feat: Add toast settings and minor code cleanup

src/components/ChatBotBody/ChatBotBody.tsx

@@ -91,6 +91,9 @@ const ChatBotBody = ({
 	const toastPromptContainerStyle: CSSProperties = {
 		bottom: (styles.chatInputContainerStyle?.height as number || 70) +
 			(styles.footerStyle?.height as number || 50) + 15,
+		width: 300,
+		minWidth: (styles.chatWindowStyle?.width as number || 375) / 2,
+		maxWidth: (styles.chatWindowStyle?.width as number || 375)  - 50,
 		...styles.toastPromptContainerStyle
 	};
 

src/components/ChatBotBody/ToastPrompt/ToastPrompt.css

@@ -1,13 +1,16 @@
 .rcb-toast-prompt-text {
     padding: 6px 12px;
-    border-radius: 20px;
-    color: #adadad;
+    border-radius: 5px;
+    color: #7a7a7a;
     font-size: 12px;
+    text-align: center;
     background-color: #fff;
-    border: 0.5px solid #adadad;
+    border: 0.5px solid #7a7a7a;
     cursor: pointer;
     transition: color 0.3s ease, border-color 0.3s ease;
     z-index: 9999;
+    width: 100%;
+    margin-top: 6px;
 }
 
 @keyframes popIn {

src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx

@@ -72,8 +72,10 @@ const Toast = ({
 				onMouseLeave={handleMouseLeave} 
 				style={isHovered ? toastPromptHoveredStyle : styles.toastPromptStyle}
 				onMouseDown={(event: MouseEvent) => {
-					event.preventDefault();
-					removeToast(id);
+					if (settings.toast?.dismissOnClick) {
+						event.preventDefault();
+						removeToast(id);
+					}
 				}}
 				className="rcb-toast-prompt-text"
 			>

src/components/ChatBotContainer.tsx

@@ -114,7 +114,6 @@ const ChatBotContainer = ({ flow }: { flow: Flow }) => {
 
 	// tracks toasts shown
 	const [toasts, setToasts] = useState<Array<Toast>>([]);
-	const maxToasts = 5; // Maximum number of toasts allowed at any one time
 
 	// tracks block timeout if transition is interruptable
 	const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
@@ -452,8 +451,12 @@ const ChatBotContainer = ({ flow }: { flow: Flow }) => {
 	 */
 	const injectToast = useCallback((content: string | JSX.Element, timeout?: number): void => {
 		setToasts((prevToasts: Toast[]) => {
-			// if toast array is full, remove oldest
-			if (prevToasts.length >= maxToasts) {
+			if (prevToasts.length >= (settings.toast?.maxCount || 3)) {
+				// if toast array is full and forbidden to add new ones, return existing toasts
+				if (settings.toast?.forbidOnMax) {
+					return prevToasts;
+				}
+				// else remove the oldest toast
 				return [...prevToasts.slice(1), { id: crypto.randomUUID(), content, timeout }];
 			}
 			return [...prevToasts, { id: crypto.randomUUID(), content, timeout }];

src/constants/internal/DefaultSettings.tsx

@@ -163,6 +163,11 @@ export const DefaultSettings: Settings = {
 		icon: emojiIcon,
 		list: ["😀", "😃", "😄", "😅", "😊", "😌", "😇", "🙃", "🤣", "😍", "🥰", "🥳", "🎉", "🎈", "🚀", "⭐️"]
 	},
+	toast: {
+		maxCount: 3,
+		forbidOnMax: false,
+		dismissOnClick: true,
+	},
 	advance: {
 		useAdvancedMessages: false,
 		useAdvancedSettings: false,

src/types/Settings.ts

@@ -128,6 +128,11 @@ export type Settings = {
 		icon?: string;
 		list?: string[] ;
 	},
+	toast?: {
+		maxCount?: number;
+		forbidOnMax?: boolean;
+		dismissOnClick?: boolean;
+	},
 	advance?: {
 		useAdvancedMessages?: boolean;
 		useAdvancedSettings?: boolean;