From df0466073d8b7aaee16a4f7ef0c6cfa680a8e26a Mon Sep 17 00:00:00 2001 From: tjtanjin Date: Mon, 14 Oct 2024 08:03:44 +0800 Subject: [PATCH] fix: Fix footer icon and remove comments from theme css files parsing --- CHANGELOG.md | 6 ++ package-lock.json | 4 +- package.json | 2 +- src/constants/internal/DefaultSettings.tsx | 68 +++++++++++-------- ...eAudioInternal.tsx => useAudioInternal.ts} | 0 ...eBotIdInternal.tsx => useBotIdInternal.ts} | 0 ...useFlowInternal.tsx => useFlowInternal.ts} | 0 ...oastsInternal.tsx => useToastsInternal.ts} | 0 src/hooks/{useBotId.tsx => useBotId.ts} | 0 src/services/ThemeService.ts | 4 -- 10 files changed, 47 insertions(+), 37 deletions(-) rename src/hooks/internal/{useAudioInternal.tsx => useAudioInternal.ts} (100%) rename src/hooks/internal/{useBotIdInternal.tsx => useBotIdInternal.ts} (100%) rename src/hooks/internal/{useFlowInternal.tsx => useFlowInternal.ts} (100%) rename src/hooks/internal/{useToastsInternal.tsx => useToastsInternal.ts} (100%) rename src/hooks/{useBotId.tsx => useBotId.ts} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5209084..b653216c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # CHANGELOG.md +## v2.0.0-beta.18 (14-10-2024) + +**Fixed:** +- Excluded comments from theme css files parsing +- Fixed an issue where icon was not rendered correctly in footer + ## v2.0.0-beta.17 (13-10-2024) **Fixed:** diff --git a/package-lock.json b/package-lock.json index 8738c155..7fc714e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-chatbotify", - "version": "2.0.0-beta.17", + "version": "2.0.0-beta.18", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-chatbotify", - "version": "2.0.0-beta.17", + "version": "2.0.0-beta.18", "license": "MIT", "devDependencies": { "@testing-library/jest-dom": "^6.5.0", diff --git a/package.json b/package.json index 190d8311..5b4fba76 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "files": [ "./dist" ], - "version": "2.0.0-beta.17", + "version": "2.0.0-beta.18", "description": "A modern React library for creating flexible and extensible chatbots.", "type": "module", "main": "./dist/index.cjs", diff --git a/src/constants/internal/DefaultSettings.tsx b/src/constants/internal/DefaultSettings.tsx index fb858a35..22f963e1 100644 --- a/src/constants/internal/DefaultSettings.tsx +++ b/src/constants/internal/DefaultSettings.tsx @@ -4,17 +4,17 @@ import { Button } from "../Button"; import actionDisabledIcon from "../../assets/action_disabled_icon.svg"; import botAvatar from "../../assets/bot_avatar.svg"; import userAvatar from "../../assets/user_avatar.svg"; -import { ReactComponent as chatIcon } from "../../assets/chat_icon.svg"; -import { ReactComponent as fileAttachmentIcon } from '../../assets/file_attachment_icon.svg'; -import { ReactComponent as notificationIcon } from '../../assets/notification_icon.svg'; -import { ReactComponent as notificationIconDisabled } from '../../assets/notification_icon_disabled.svg'; -import { ReactComponent as closeChatIcon } from '../../assets/close_chat_icon.svg'; -import { ReactComponent as sendButtonIcon } from '../../assets/send_icon.svg'; -import { ReactComponent as voiceIcon } from '../../assets/voice_icon.svg'; -import { ReactComponent as voiceIconDisabled } from '../../assets/voice_icon_disabled.svg'; -import { ReactComponent as emojiIcon } from '../../assets/emoji_icon.svg'; -import { ReactComponent as audioIcon } from '../../assets/audio_icon.svg'; -import { ReactComponent as audioIconDisabled } from '../../assets/audio_icon_disabled.svg'; +import { ReactComponent as ChatIcon } from "../../assets/chat_icon.svg"; +import { ReactComponent as FileAttachmentIcon } from '../../assets/file_attachment_icon.svg'; +import { ReactComponent as NotificationIcon } from '../../assets/notification_icon.svg'; +import { ReactComponent as NotificationIconDisabled } from '../../assets/notification_icon_disabled.svg'; +import { ReactComponent as CloseChatIcon } from '../../assets/close_chat_icon.svg'; +import { ReactComponent as SendButtonIcon } from '../../assets/send_icon.svg'; +import { ReactComponent as VoiceIcon } from '../../assets/voice_icon.svg'; +import { ReactComponent as VoiceIconDisabled } from '../../assets/voice_icon_disabled.svg'; +import { ReactComponent as EmojiIcon } from '../../assets/emoji_icon.svg'; +import { ReactComponent as AudioIcon } from '../../assets/audio_icon.svg'; +import { ReactComponent as AudioIconDisabled } from '../../assets/audio_icon_disabled.svg'; import notificationSound from "../../assets/notification_sound.wav"; // default settings provided to the bot @@ -39,7 +39,7 @@ export const DefaultSettings: Settings = { text: "Talk to me! 😊", }, chatButton: { - icon: chatIcon, + icon: ChatIcon, }, header: { title: ( @@ -52,14 +52,14 @@ export const DefaultSettings: Settings = { showAvatar: true, avatar: botAvatar, buttons: [Button.NOTIFICATION_BUTTON, Button.AUDIO_BUTTON, Button.CLOSE_CHAT_BUTTON], - closeChatIcon: closeChatIcon, + closeChatIcon: CloseChatIcon, }, notification: { disabled: false, defaultToggledOn: true, volume: 0.2, - icon: notificationIcon, - iconDisabled: notificationIconDisabled, + icon: NotificationIcon, + iconDisabled: NotificationIconDisabled, sound: notificationSound, showCount: true, }, @@ -70,8 +70,8 @@ export const DefaultSettings: Settings = { voiceNames: ["Microsoft David - English (United States)", "Alex (English - United States)"], rate: 1, volume: 1, - icon: audioIcon, - iconDisabled: audioIconDisabled, + icon: AudioIcon, + iconDisabled: AudioIconDisabled, }, chatHistory: { disabled: false, @@ -89,7 +89,7 @@ export const DefaultSettings: Settings = { showCharacterCount: false, characterLimit: -1, botDelay: 1000, - sendButtonIcon: sendButtonIcon, + sendButtonIcon: SendButtonIcon, blockSpam: true, sendOptionOutput: true, sendCheckboxOutput: true, @@ -133,8 +133,8 @@ export const DefaultSettings: Settings = { autoSendDisabled: false, autoSendPeriod: 1000, sendAsAudio: false, - icon: voiceIcon, - iconDisabled: voiceIconDisabled, + icon: VoiceIcon, + iconDisabled: VoiceIconDisabled, }, footer: { text: ( @@ -142,12 +142,20 @@ export const DefaultSettings: Settings = { onClick={() => window.open("https://react-chatbotify.com")} > Powered By - - +
+ +
React ChatBotify ), @@ -157,15 +165,15 @@ export const DefaultSettings: Settings = { disabled: false, multiple: true, accept: ".png", - icon: fileAttachmentIcon, - iconDisabled: fileAttachmentIcon, + icon: FileAttachmentIcon, + iconDisabled: FileAttachmentIcon, sendFileName: true, showMediaDisplay: false, }, emoji: { disabled: false, - icon: emojiIcon, - iconDisabled: emojiIcon, + icon: EmojiIcon, + iconDisabled: EmojiIcon, list: ["😀", "😃", "😄", "😅", "😊", "😌", "😇", "🙃", "🤣", "😍", "🥰", "🥳", "🎉", "🎈", "🚀", "⭐️"] }, toast: { diff --git a/src/hooks/internal/useAudioInternal.tsx b/src/hooks/internal/useAudioInternal.ts similarity index 100% rename from src/hooks/internal/useAudioInternal.tsx rename to src/hooks/internal/useAudioInternal.ts diff --git a/src/hooks/internal/useBotIdInternal.tsx b/src/hooks/internal/useBotIdInternal.ts similarity index 100% rename from src/hooks/internal/useBotIdInternal.tsx rename to src/hooks/internal/useBotIdInternal.ts diff --git a/src/hooks/internal/useFlowInternal.tsx b/src/hooks/internal/useFlowInternal.ts similarity index 100% rename from src/hooks/internal/useFlowInternal.tsx rename to src/hooks/internal/useFlowInternal.ts diff --git a/src/hooks/internal/useToastsInternal.tsx b/src/hooks/internal/useToastsInternal.ts similarity index 100% rename from src/hooks/internal/useToastsInternal.tsx rename to src/hooks/internal/useToastsInternal.ts diff --git a/src/hooks/useBotId.tsx b/src/hooks/useBotId.ts similarity index 100% rename from src/hooks/useBotId.tsx rename to src/hooks/useBotId.ts diff --git a/src/services/ThemeService.ts b/src/services/ThemeService.ts index 4efb88b6..4ec38c84 100644 --- a/src/services/ThemeService.ts +++ b/src/services/ThemeService.ts @@ -158,10 +158,6 @@ const getScopedCssStylesText = (botId: string, cssStylesText: string) => { const scopedCssText = cssStylesText.split(/(?<=})/) .map(rule => { const trimmedRule = rule.trim(); - // ignores comments - if (trimmedRule.startsWith('/*')) { - return trimmedRule; - } // ignores imports, keyframes and media queries if (trimmedRule.startsWith('@import') || trimmedRule.startsWith('@keyframes')