fix: Fix footer icon and remove comments from theme css files parsing

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:**

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",

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,21 +133,29 @@ export const DefaultSettings: Settings = {
 		autoSendDisabled: false,
 		autoSendPeriod: 1000,
 		sendAsAudio: false,
-		icon: voiceIcon,
-		iconDisabled: voiceIconDisabled,
+		icon: VoiceIcon,
+		iconDisabled: VoiceIconDisabled,
 	},
 	footer: {
 		text: (
 			<div style={{cursor: "pointer", display: "flex", flexDirection: "row", alignItems: "center", columnGap: 3}} 
 				onClick={() => window.open("https://react-chatbotify.com")}
 			>
 				<span key={0}>Powered By </span>
-				<img key={1} style={{
-					borderRadius: "50%",
-					width: 14, height: 14, backgroundImage: `url(${chatIcon}),
-					linear-gradient(to right, #42b0c5, #491d8d)`
-				}}>
-				</img>
+				<div
+					key={1}
+					style={{
+						borderRadius: "50%",
+						width: 14,
+						height: 14,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						background: "linear-gradient(to right, #42b0c5, #491d8d)",
+					}}
+				>
+					<ChatIcon style={{ width: "80%", height: "80%" }} />
+				</div>
 				<span key={2} style={{fontWeight: "bold"}}> React ChatBotify</span>
 			</div>
 		),
@@ -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: {

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')