Merge branch 'main' into add-async-event-handlers

__tests__/components/ChatBotBody/ToastPrompt.test.tsx → __tests__/components/ChatBotToast/ToastPrompt/ToastPrompt.test.tsx

@@ -3,15 +3,15 @@ import { expect } from "@jest/globals";
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/jest-globals";
 
-import ToastPrompt from "../../../src/components/ChatBotBody/ToastPrompt/ToastPrompt";
-import { useSettingsContext } from "../../../src/context/SettingsContext";
-import { useStylesContext } from "../../../src/context/StylesContext";
-import { useToastsInternal } from "../../../src/hooks/internal/useToastsInternal";
+import ToastPrompt from "../../../../src/components/ChatBotToast/ToastPrompt/ToastPrompt";
+import { useSettingsContext } from "../../../../src/context/SettingsContext";
+import { useStylesContext } from "../../../../src/context/StylesContext";
+import { useToastsInternal } from "../../../../src/hooks/internal/useToastsInternal";
 
 // Mock the contexts
-jest.mock("../../../src/context/SettingsContext");
-jest.mock("../../../src/context/StylesContext");
-jest.mock("../../../src/hooks/internal/useToastsInternal");
+jest.mock("../../../../src/context/SettingsContext");
+jest.mock("../../../../src/context/StylesContext");
+jest.mock("../../../../src/hooks/internal/useToastsInternal");
 
 /**
  * Helper function to render Toast with different props.

src/components/ChatBotBody/ChatBotBody.css

@@ -123,21 +123,4 @@
 
 .rcb-dot:nth-child(3) {
   	animation-delay: 0.4s;
-}
-
-/* Toast Container */
-.rcb-toast-prompt-container {
-    position: absolute;
-	left: 50%;
-    transform: translateX(-50%); 
-    bottom: 0px;
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-	flex-direction: column;
-    opacity: 1;
-    animation: popIn 0.3s ease-in-out;
-    pointer-events: auto;
-	margin-top: 200;
 }

src/components/ChatBotBody/ChatBotBody.tsx

@@ -1,14 +1,12 @@
 import { Dispatch, SetStateAction, CSSProperties, MouseEvent, useEffect } from "react";
 
 import ChatMessagePrompt from "./ChatMessagePrompt/ChatMessagePrompt";
-import ToastPrompt from "./ToastPrompt/ToastPrompt";
 import { useChatWindowInternal } from "../../hooks/internal/useChatWindowInternal";
 import { useBotStatesContext } from "../../context/BotStatesContext";
 import { useBotRefsContext } from "../../context/BotRefsContext";
 import { useMessagesContext } from "../../context/MessagesContext";
 import { useSettingsContext } from "../../context/SettingsContext";
 import { useStylesContext } from "../../context/StylesContext";
-import { useToastsContext } from "../../context/ToastsContext";
 import { Message } from "../../types/Message";
 
 import "./ChatBotBody.css";
@@ -32,9 +30,6 @@ const ChatBotBody = ({
 	// handles messages
 	const { messages } = useMessagesContext();
 
-	// handles toasts
-	const { toasts } = useToastsContext();
-
 	// handles chat window
 	const { isChatWindowOpen } = useChatWindowInternal();
 
@@ -73,15 +68,6 @@ const ChatBotBody = ({
 	};
 	const botBubbleEntryStyle = settings.botBubble?.animate ? "rcb-bot-message-entry" : "";
 
-	// styles for toast prompt container
-	const toastPromptContainerStyle: CSSProperties = {
-		bottom: 20,
-		width: 300,
-		minWidth: (styles.chatWindowStyle?.width as number ?? 375) / 2,
-		maxWidth: (styles.chatWindowStyle?.width as number ?? 375)  - 50,
-		...styles.toastPromptContainerStyle
-	};
-
 	// shifts scroll position when scroll height changes and determines if a user is scrolling in chat window.
 	useEffect(() => {
 		if (!chatBodyRef.current) {
@@ -118,7 +104,7 @@ const ChatBotBody = ({
 				chatBodyRef.current.scrollTop = scrollHeight - clientHeight - 1;
 			}
 
-			if (isChatWindowOpen) {
+			if (isChatWindowOpen || settings.general?.embedded) {
 				setUnreadCount(0);
 			}
 		}
@@ -261,16 +247,6 @@ const ChatBotBody = ({
 				</div>
 			)}
 			<ChatMessagePrompt/>
-			<div className="rcb-toast-prompt-container" style={toastPromptContainerStyle}>
-				{toasts.map((toast) => (
-					<ToastPrompt
-						key={toast.id}
-						id={toast.id}
-						content={toast.content}
-						timeout={toast.timeout}
-					/>
-				))}
-			</div>
 		</div>
 	);
 };

src/components/ChatBotContainer.css

@@ -7,9 +7,6 @@
 	z-index: 9999;
 }
 
-/* ChatBot Commons */
-
-
 /* Chat Window */
 
 .rcb-chat-window {

src/components/ChatBotContainer.tsx

@@ -6,6 +6,7 @@ import ChatBotInput from "./ChatBotInput/ChatBotInput";
 import ChatBotFooter from "./ChatBotFooter/ChatBotFooter";
 import ChatBotButton from "./ChatBotButton/ChatBotButton";
 import ChatBotTooltip from "./ChatBotTooltip/ChatBotTooltip";
+import ToastContainer from "./ChatBotToast/ToastContainer/ToastContainer";
 import { useButtonInternal } from "../hooks/internal/useButtonsInternal";
 import { useChatWindowInternal } from "../hooks/internal/useChatWindowInternal";
 import { useBotEffectsInternal } from "../hooks/internal/useBotEffectsInternal";
@@ -147,6 +148,7 @@ const ChatBotContainer = ({
 					<div style={getChatWindowStyle()} className="rcb-chat-window">
 						{settings.general?.showHeader && <ChatBotHeader buttons={headerButtons}/>}
 						<ChatBotBody setChatScrollHeight={setChatScrollHeight}/>
+						<ToastContainer/>
 						{settings.general?.showInputRow && <ChatBotInput buttons={chatInputButtons}/>}
 						{settings.general?.showFooter && <ChatBotFooter buttons={footerButtons}/>}
 					</div>

src/components/ChatBotToast/ToastContainer/ToastContainer.css

@@ -0,0 +1,17 @@
+/* Toast Container */
+
+.rcb-toast-prompt-container {
+    position: absolute;
+	left: 50%;
+    transform: translateX(-50%); 
+    bottom: 0px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+	flex-direction: column;
+    opacity: 1;
+    animation: popIn 0.3s ease-in-out;
+    pointer-events: auto;
+	margin-top: 200;
+}

src/components/ChatBotToast/ToastContainer/ToastContainer.tsx

@@ -0,0 +1,44 @@
+import { CSSProperties } from "react";
+
+import ToastPrompt from "../ToastPrompt/ToastPrompt";
+import { useStylesContext } from "../../../context/StylesContext";
+import { useToastsContext } from "../../../context/ToastsContext";
+
+import "./ToastContainer.css";
+
+/**
+ * Holds toast prompts.
+ * 
+ */
+const ToastContainer = () => {
+	// handles styles
+	const { styles } = useStylesContext();
+
+	// handles toasts
+	const { toasts } = useToastsContext();
+
+	// styles for toast prompt container
+	const toastPromptContainerStyle: CSSProperties = {
+		bottom: (styles.footerStyle?.height as number ?? 50) +
+			(styles.chatInputContainerStyle?.height as number ?? 70) + 20,
+		width: 300,
+		minWidth: (styles.chatWindowStyle?.width as number ?? 375) / 2,
+		maxWidth: (styles.chatWindowStyle?.width as number ?? 375) - 50,
+		...styles.toastPromptContainerStyle
+	};
+
+	return (
+		<div className="rcb-toast-prompt-container" style={toastPromptContainerStyle}>
+			{toasts.map((toast) => (
+				<ToastPrompt
+					key={toast.id}
+					id={toast.id}
+					content={toast.content}
+					timeout={toast.timeout}
+				/>
+			))}
+		</div>
+	);
+};
+
+export default ToastContainer;