From 79189e500fd688d198d357ed4f716d027aaa90dc Mon Sep 17 00:00:00 2001 From: tjtanjin Date: Thu, 7 Nov 2024 00:18:55 +0800 Subject: [PATCH 1/2] fix: Fix an issue where new message prompts are not dismissed in embedded chatbots --- src/components/ChatBotBody/ChatBotBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatBotBody/ChatBotBody.tsx b/src/components/ChatBotBody/ChatBotBody.tsx index 7a95b7c0..6b9d8319 100644 --- a/src/components/ChatBotBody/ChatBotBody.tsx +++ b/src/components/ChatBotBody/ChatBotBody.tsx @@ -118,7 +118,7 @@ const ChatBotBody = ({ chatBodyRef.current.scrollTop = scrollHeight - clientHeight - 1; } - if (isChatWindowOpen) { + if (isChatWindowOpen || settings.general?.embedded) { setUnreadCount(0); } } From 6b35b213ed5ce166fb106c25a05e89284ab15c2e Mon Sep 17 00:00:00 2001 From: tjtanjin Date: Thu, 7 Nov 2024 01:57:11 +0800 Subject: [PATCH 2/2] fix: Fix an issue where toasts are not positioned properly --- .../ToastPrompt}/ToastPrompt.test.tsx | 14 +++--- src/components/ChatBotBody/ChatBotBody.css | 17 ------- src/components/ChatBotBody/ChatBotBody.tsx | 24 ---------- src/components/ChatBotContainer.css | 3 -- src/components/ChatBotContainer.tsx | 2 + .../ToastContainer/ToastContainer.css | 17 +++++++ .../ToastContainer/ToastContainer.tsx | 44 +++++++++++++++++++ .../ToastPrompt/ToastPrompt.css | 0 .../ToastPrompt/ToastPrompt.tsx | 0 9 files changed, 70 insertions(+), 51 deletions(-) rename __tests__/components/{ChatBotBody => ChatBotToast/ToastPrompt}/ToastPrompt.test.tsx (93%) create mode 100644 src/components/ChatBotToast/ToastContainer/ToastContainer.css create mode 100644 src/components/ChatBotToast/ToastContainer/ToastContainer.tsx rename src/components/{ChatBotBody => ChatBotToast}/ToastPrompt/ToastPrompt.css (100%) rename src/components/{ChatBotBody => ChatBotToast}/ToastPrompt/ToastPrompt.tsx (100%) diff --git a/__tests__/components/ChatBotBody/ToastPrompt.test.tsx b/__tests__/components/ChatBotToast/ToastPrompt/ToastPrompt.test.tsx similarity index 93% rename from __tests__/components/ChatBotBody/ToastPrompt.test.tsx rename to __tests__/components/ChatBotToast/ToastPrompt/ToastPrompt.test.tsx index b848f248..9f31a810 100644 --- a/__tests__/components/ChatBotBody/ToastPrompt.test.tsx +++ b/__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. diff --git a/src/components/ChatBotBody/ChatBotBody.css b/src/components/ChatBotBody/ChatBotBody.css index 40f8fcf8..921ef2f8 100644 --- a/src/components/ChatBotBody/ChatBotBody.css +++ b/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; } \ No newline at end of file diff --git a/src/components/ChatBotBody/ChatBotBody.tsx b/src/components/ChatBotBody/ChatBotBody.tsx index 6b9d8319..bc9cbf83 100644 --- a/src/components/ChatBotBody/ChatBotBody.tsx +++ b/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) { @@ -261,16 +247,6 @@ const ChatBotBody = ({ )} -
- {toasts.map((toast) => ( - - ))} -
); }; diff --git a/src/components/ChatBotContainer.css b/src/components/ChatBotContainer.css index 06b0d855..2f134888 100644 --- a/src/components/ChatBotContainer.css +++ b/src/components/ChatBotContainer.css @@ -7,9 +7,6 @@ z-index: 9999; } -/* ChatBot Commons */ - - /* Chat Window */ .rcb-chat-window { diff --git a/src/components/ChatBotContainer.tsx b/src/components/ChatBotContainer.tsx index 40cfdf85..9e32f431 100644 --- a/src/components/ChatBotContainer.tsx +++ b/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 = ({
{settings.general?.showHeader && } + {settings.general?.showInputRow && } {settings.general?.showFooter && }
diff --git a/src/components/ChatBotToast/ToastContainer/ToastContainer.css b/src/components/ChatBotToast/ToastContainer/ToastContainer.css new file mode 100644 index 00000000..0c58c9ea --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/ChatBotToast/ToastContainer/ToastContainer.tsx b/src/components/ChatBotToast/ToastContainer/ToastContainer.tsx new file mode 100644 index 00000000..821ae70c --- /dev/null +++ b/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 ( +
+ {toasts.map((toast) => ( + + ))} +
+ ); +}; + +export default ToastContainer; diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.css b/src/components/ChatBotToast/ToastPrompt/ToastPrompt.css similarity index 100% rename from src/components/ChatBotBody/ToastPrompt/ToastPrompt.css rename to src/components/ChatBotToast/ToastPrompt/ToastPrompt.css diff --git a/src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx b/src/components/ChatBotToast/ToastPrompt/ToastPrompt.tsx similarity index 100% rename from src/components/ChatBotBody/ToastPrompt/ToastPrompt.tsx rename to src/components/ChatBotToast/ToastPrompt/ToastPrompt.tsx