diff --git a/src/components/ChatBotBody/ChatBotBody.tsx b/src/components/ChatBotBody/ChatBotBody.tsx index 7347e6a7..6fe60a74 100644 --- a/src/components/ChatBotBody/ChatBotBody.tsx +++ b/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 }; diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css b/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css index 4979e5cf..219e6506 100644 --- a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css +++ b/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 { diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx b/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx index 8143160f..1f371501 100644 --- a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx +++ b/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" > diff --git a/src/components/ChatBotContainer.tsx b/src/components/ChatBotContainer.tsx index 3514b2a3..a3757ba4 100644 --- a/src/components/ChatBotContainer.tsx +++ b/src/components/ChatBotContainer.tsx @@ -114,7 +114,6 @@ const ChatBotContainer = ({ flow }: { flow: Flow }) => { // tracks toasts shown const [toasts, setToasts] = useState>([]); - const maxToasts = 5; // Maximum number of toasts allowed at any one time // tracks block timeout if transition is interruptable const [timeoutId, setTimeoutId] = useState>(); @@ -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 }]; diff --git a/src/constants/internal/DefaultSettings.tsx b/src/constants/internal/DefaultSettings.tsx index 2fb7477b..6ee7ce8b 100644 --- a/src/constants/internal/DefaultSettings.tsx +++ b/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, diff --git a/src/types/Settings.ts b/src/types/Settings.ts index 79a53eca..c73b5231 100644 --- a/src/types/Settings.ts +++ b/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;