@axos-web-dev/shared-components 1.0.101-dev.1 → 2.0.0-dev.2

package/dist/Carousel/index.js

@@ -6,7 +6,7 @@ import { getVariant } from "../utils/getVariant.js";
 import { section_text } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Modal/Modal.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                               */
 /* empty css                                    */
@@ -15,7 +15,6 @@ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet
 import SvgQuoteIconGrey from "../icons/QuoteIconGrey.js";
 import SvgQuoteIconWhite from "../icons/QuoteIconWhite.js";
 import SvgQuoteIconYellow from "../icons/QuoteIconYellow.js";
-import "../utils/allowedAxosDomains.js";
 /* empty css                                          */
 /* empty css                                          */
 import "../Accordion/Accordion.js";
@@ -26,6 +25,7 @@ import "../ArticlesSet/ArticlesSet.css.js";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Button/Button.css.js";
+import "../Modal/contextApi/store.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
 import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
@@ -53,11 +53,10 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Chevron/Chevron.css.js";
+/* empty css                                */
 import "../Interstitial/Interstitial-variants.css.js";
 import "../Inputs/Input.css.js";
 /* empty css                                                         */
-/* empty css                                */
-import "../Modal/contextApi/store.js";
 import "../Hyperlink/Hyperlink.css.js";
 /* empty css                                                      */
 import "iframe-resizer";
@@ -111,15 +110,11 @@ import "next/navigation.js";
 /* empty css                                                              */
 /* empty css                                                                 */
 import "next/link.js";
-import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
 /* empty css                                                   */
-import "../NavigationMenu/AxosBank/NavData.js";
 /* empty css                                                      */
 /* empty css                                                       */
-import "../NavigationMenu/AxosALTS/NavData.js";
 /* empty css                                                   */
 /* empty css                                                     */
-import "../NavigationMenu/LaVictoire/NavData.js";
 import "../PageNavItem/PageNavItem.css.js";
 import "react-slick";
 /* empty css                                                 */
@@ -230,10 +225,13 @@ const Carousel = (props) => {
           /* @__PURE__ */ jsx("div", { children: iconVarints.get(variant) }),
           /* @__PURE__ */ jsx("div", { className: slides, children: children ? Children.map(children, (child2, idx) => {
             if (!React.isValidElement(child2)) return child2;
-            return cloneElement(child2, {
-              selected: idx === itemSelected,
-              variant
-            });
+            return cloneElement(
+              child2,
+              {
+                selected: idx === itemSelected,
+                variant
+              }
+            );
           }) : items?.map((item, idx) => /* @__PURE__ */ jsx(
             CarouselSlide,
             {

package/dist/Chatbot/Bubble.js

@@ -101,7 +101,7 @@ const Bubble = ({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: bubbleText, children: "Ask Sam AI" }),
+    /* @__PURE__ */ jsx("div", { className: bubbleText, children: "Ask Evo AI" }),
     children
   ] }) }) });
 };

package/dist/Chatbot/Chat.js

@@ -33,7 +33,6 @@ function Chat() {
     let chatConnectedHandler;
     async function initChat() {
       const { Client, consoleLoggerHandler, Logger } = await import("@ujet/websdk-headless");
-      console.log("this", isMounted);
       Logger.addHandler(consoleLoggerHandler);
       clientRef.current = new Client({
         companyId,
@@ -71,14 +70,11 @@ function Chat() {
           menus?.menus[5].id
         );
       }
-      console.log("this");
       identityHandler = (identity) => {
         if (!isMounted.current) return;
         console.log("identity:", identity);
       };
       messageHandler = (msg) => {
-        console.log("new message:", msg);
-        console.log("addMessage:", msg);
         addMessage(msg);
       };
       chatUpdatedHandler = (chat) => {
@@ -87,13 +83,11 @@ function Chat() {
       chatConnectedHandler = async () => {
         console.log("connected");
         const messagesFetched = await clientRef.current?.fetchMessages();
-        console.log("[messages]:", messagesFetched);
         addMessages(messagesFetched || []);
       };
       memberJoinedHandler = (identity) => {
         console.log("member joined:", identity);
       };
-      console.log(isMounted.current);
       clientRef.current?.on("authenticated", () => {
         console.log("authenticated");
       });
@@ -144,7 +138,6 @@ function Chat() {
           const form = e.target;
           const input = form.elements[0];
           const message = input.value;
-          console.log("Sending message:", message);
           try {
             await clientRef.current?.sendTextMessage(message);
             input.value = "";

package/dist/Chatbot/ChatWindow.d.ts

@@ -24,6 +24,8 @@ interface ChatWindowProps {
     showName?: boolean;
     onNewChat?: () => void;
     onCloseAfterThankYou?: () => void;
+    isTyping?: boolean;
+    previewTyping?: (msg: string) => void;
 }
 export declare const ChatWindow: React.FC<ChatWindowProps>;
 export {};

package/dist/Chatbot/ChatWindow.js

@@ -32,9 +32,19 @@ const ChatWindow = ({
   showName = false,
   onCloseAfterThankYou = () => {
     console.log("Close after thank you");
+  },
+  previewTyping = (msg) => {
+    console.log("Preview typing: ", msg);
   }
 }) => {
-  const { showThankyouMessage, displayThankyouMessage, toggleThankyouMessage } = useOpenChat();
+  const {
+    showThankyouMessage,
+    displayThankyouMessage,
+    toggleThankyouMessage,
+    hasEscalated,
+    isBlockedInput,
+    isOpen
+  } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
   const [showEndChatDialog, setShowEndChatDialog] = React.useState(false);
@@ -42,14 +52,14 @@ const ChatWindow = ({
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
-  const isOpen = useOpenChat((state2) => state2.isOpen);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSend = (e) => {
     e.preventDefault();
     const cleaned = cleanInput(input);
-    if (cleaned) {
+    if (isBlockedInput) return;
+    if (cleaned != "") {
       onSend(cleaned);
       setInput("");
     }
@@ -128,7 +138,7 @@ const ChatWindow = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Ask Sam AI" })
+            /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Ask Evo AI" })
           ]
         }
       ),
@@ -136,6 +146,7 @@ const ChatWindow = ({
         /* @__PURE__ */ jsx(
           "button",
           {
+            disabled: messages.length === 0,
             onClick: () => {
               setMenuOpen(!menuOpen);
             },
@@ -417,7 +428,11 @@ const ChatWindow = ({
           showAvatar,
           showName,
           virtualAgent,
-          onCancelEndChat
+          onCancelEndChat,
+          onEndChat: () => {
+            endChat();
+            onCloseAfterThankYou();
+          }
         },
         msg?.$index
       )),
@@ -438,7 +453,7 @@ const ChatWindow = ({
         style: {
           display: "flex",
           padding: "12px 16px",
-          background: "#ffffff",
+          background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
           borderRadius: 12
         },
         children: [
@@ -449,19 +464,17 @@ const ChatWindow = ({
               value: input,
               onChange: (e) => setInput(e.target.value),
               onKeyDown: (e) => {
+                if (hasEscalated) {
+                  previewTyping(e.target?.value);
+                }
                 if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  const cleaned = cleanInput(input);
-                  if (cleaned) {
-                    onSend(cleaned);
-                    setInput("");
-                  }
+                  handleSend(e);
                 }
               },
               placeholder: "Ask anything...",
               className: clsx(inputStyle, autoResize),
               autoFocus: true,
-              disabled: inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
+              disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
               rows: 1
             }
           ),
@@ -474,7 +487,7 @@ const ChatWindow = ({
               ),
               type: "submit",
               title: "Send message",
-              disabled: inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
+              disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
               children: /* @__PURE__ */ jsx(
                 "svg",
                 {

package/dist/Chatbot/Chatbot.d.ts

@@ -7,4 +7,4 @@ export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
     projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
     menuOption?: "Support Virtual Agent" | string;
     debug?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => false | import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Chatbot.js

@@ -14,7 +14,16 @@ const Chatbot = ({
   menuOption = "Support Virtual Agent",
   debug = false
 }) => {
-  const { hasOpenedOnce, toggle, reset } = useOpenChat();
+  const {
+    hasOpenedOnce,
+    toggle,
+    reset,
+    startEscalation,
+    hasEscalated,
+    endEscalation,
+    unblockInput,
+    blockInput
+  } = useOpenChat();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
@@ -26,6 +35,20 @@ const Chatbot = ({
   const [hasStarted, setHasStarted] = useState(false);
   const [menusLoaded, setMenusLoaded] = useState(false);
   const [pendingStart, setPendingStart] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [scalationStarted, setScalationStarted] = useState(false);
+  useEffect(() => {
+    if (messages.length === 0) return;
+    const hasScalation = messages.some(
+      (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+        msg.event
+      )
+    );
+    setScalationStarted(hasScalation);
+    return () => {
+      setScalationStarted(false);
+    };
+  }, [messages]);
   const brandMap = /* @__PURE__ */ new Map([
     ["axos", 1],
     ["ufb", 3]
@@ -33,8 +56,7 @@ const Chatbot = ({
   const typingMessage = {
     $sid: "typing-1",
     type: "system",
-    // or a custom type like "typing"
-    text: "AI is typing...",
+    text: scalationStarted ? "Typing" : "AI is typing...",
     sender: { id: "system", type: "system" },
     $timestamp: /* @__PURE__ */ new Date(),
     $userType: "system",
@@ -77,13 +99,44 @@ const Chatbot = ({
   };
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
-    addMessage(message);
-    if (!["virtual_agent", "system"].includes(message.$userType)) {
-      addMessage(typingMessage);
+    const { event, $userType } = message;
+    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
+      addMessage(message);
+      if (!hasEscalated) {
+        unblockInput?.();
+      }
+      return;
+    }
+    switch (event) {
+      case "escalationAccepted":
+      case "escalationStarted":
+        setScalationStarted(true);
+        startEscalation?.();
+        addMessage(message);
+        return;
+      case "escalationEnded":
+      case "escalationFailed": {
+        endEscalation?.();
+        addMessage(message);
+        return;
+      }
+      default:
+        addMessage(message);
+        if (["end_user"].includes(message.$userType)) {
+          if (!hasEscalated) {
+            addMessage(typingMessage);
+          }
+        }
+        return;
     }
   };
   const onChatTypingStartedHandler = async (identity) => {
     console.log("Typing started by:", identity);
+    setIsTyping(true);
+  };
+  const onChatTypingEndedHandler = async (identity) => {
+    console.log("Typing ended by:", identity);
+    setIsTyping(false);
   };
   const onChatDisconnectedHandler = async () => {
     console.log("Chat disconnected");
@@ -105,23 +158,47 @@ const Chatbot = ({
   const onChatMemberLeftHandler = async (identity) => {
     console.log("Chat member left:", identity);
   };
+  const onChatMemberJoinedHandler = async (identity) => {
+    console.log("Chat member joined:", identity);
+  };
   const onChatConnectedHandler = async () => {
     setStatus("connected");
     console.log("connected");
-    const messages2 = await clientRef.current?.fetchMessages();
-    if (messages2) {
-      addMessages(messages2);
+    try {
+      if (!clientRef.current) {
+        console.error("Client not initialized on chat connected");
+        return;
+      }
+      const messages2 = await clientRef.current?.fetchMessages();
+      console.log("Fetched messages on chat connected:", messages2);
+      if (messages2) {
+        addMessages(messages2);
+        const hasEscalation = messages2.some(
+          (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+            msg.event
+          )
+        );
+        console.log(hasEscalation);
+        if (hasEscalation) {
+          setScalationStarted(true);
+          startEscalation?.();
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching messages on chat connected:", error);
     }
   };
   const registerEventHandlers = () => {
     clientRef.current?.on("chat.ongoing", onChatOngoingHandler);
     clientRef.current?.on("chat.message", onChatMessageHandler);
     clientRef.current?.on("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.on("chat.typingEnded", onChatTypingEndedHandler);
     clientRef.current?.on("chat.disconnected", onChatDisconnectedHandler);
     clientRef.current?.on("chat.dismissed", onDismissedHandler);
     clientRef.current?.on("chat.timeout", onTimeoutHandler);
     clientRef.current?.on("chat.ended", onEndedHandler);
     clientRef.current?.on("chat.destroyed", onDestroyedHandler);
+    clientRef.current?.on("chat.memberJoined", onChatMemberJoinedHandler);
     clientRef.current?.on("chat.memberLeft", onChatMemberLeftHandler);
     clientRef?.current?.on("chat.connected", onChatConnectedHandler);
   };
@@ -131,12 +208,14 @@ const Chatbot = ({
     clientRef.current?.off("chat.ongoing", onDismissedHandler);
     clientRef.current?.off("chat.message", onChatMessageHandler);
     clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.off("chat.typingEnded", onChatTypingEndedHandler);
     clientRef.current?.off("chat.disconnected", onChatDisconnectedHandler);
     clientRef.current?.off("chat.dismissed", onDismissedHandler);
     clientRef.current?.off("chat.timeout", onTimeoutHandler);
     clientRef.current?.off("chat.ended", onEndedHandler);
     clientRef.current?.off("chat.destroyed", onDestroyedHandler);
     clientRef.current?.off("chat.memberLeft", onChatMemberLeftHandler);
+    clientRef.current?.off("chat.memberJoined", onChatMemberJoinedHandler);
     clientRef.current?.off("chat.connected", onChatConnectedHandler);
   };
   const createClient = async () => {
@@ -150,6 +229,9 @@ const Chatbot = ({
       tenant: process.env.CCAI_TENANT_NAME || "",
       host: process.env.CCAI_HOST || "",
       // or your region
+      // companyId: import.meta.env.VITE_COMPANY_ID || "",
+      // tenant: import.meta.env.VITE_TENANT_NAME || "",
+      // host: import.meta.env.VITE_HOST || "", // or your region
       authenticate
     });
     client?.on("ready", onReadyHandler);
@@ -210,9 +292,17 @@ const Chatbot = ({
       setHasStarted(true);
     }
   };
-  const onSendMessage = (msg) => {
+  const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
-    clientRef.current?.sendTextMessage(msg);
+    try {
+      await clientRef.current?.sendTextMessage(msg);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      if (!hasEscalated) {
+        blockInput?.();
+      }
+    }
   };
   const onEndChat = async () => {
     console.log("Ending chat");
@@ -223,6 +313,7 @@ const Chatbot = ({
       chatRef.current = null;
       console.log("Chat ended");
       setHasStarted(false);
+      endEscalation?.();
     }
   };
   const onEndAndStartNewChat = async () => {
@@ -251,6 +342,7 @@ const Chatbot = ({
     setHasStarted(false);
     setStatus("idle");
     clearMessages();
+    endEscalation?.();
     clientRef.current?.destroy();
     clientRef.current?.destroyChat();
     clientRef.current = null;
@@ -262,7 +354,18 @@ const Chatbot = ({
     reset();
     setHasStarted(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
+  const onPreviewTyping = async (msg) => {
+    console.log("Preview typing message:", msg);
+    try {
+      if (clientRef.current) {
+        chatRef.current?.startTyping();
+        await clientRef.current?.sendPreviewMessage(msg);
+      }
+    } catch (error) {
+      console.error("Error sending preview message:", error);
+    }
+  };
+  return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
     /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
     /* @__PURE__ */ jsx(
       ChatWindow,
@@ -274,7 +377,9 @@ const Chatbot = ({
         endChat: onEndChat,
         onClose,
         onNewChat: onEndAndStartNewChat,
-        onCloseAfterThankYou
+        onCloseAfterThankYou,
+        previewTyping: onPreviewTyping,
+        isTyping
       }
     )
   ] });

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -11,6 +11,7 @@ interface ChatbotMessageProps {
     virtualAgent?: VirtualAgent | null;
     onCancelEndChat?: () => void;
     onSend?: (content: string) => void;
+    onEndChat?: () => void;
 }
 export declare const ChatbotMessage: FC<ChatbotMessageProps>;
 export {};

package/dist/Chatbot/ChatbotMessage.js

@@ -9,7 +9,8 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
 /* empty css                               */
 /* empty css                                    */
 import clsx from "clsx";
-import { shimmerText, notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
+import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
+import { useOpenChat } from "./store/chat.js";
 function timeAgo(date) {
   const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
   if (seconds < 60) return "Just now";
@@ -23,9 +24,10 @@ const ChatbotMessage = ({
   showAvatar,
   showName,
   virtualAgent,
-  onCancelEndChat,
+  onEndChat,
   onSend
 }) => {
+  const { hasEscalated } = useOpenChat();
   const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
   useEffect(() => {
     const interval = setInterval(() => {
@@ -33,7 +35,7 @@ const ChatbotMessage = ({
     }, 3e4);
     return () => clearInterval(interval);
   }, [msg.$timestamp]);
-  if (msg.$sid === "typing-1") {
+  if (msg.$sid === "typing-1" && !hasEscalated) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -73,23 +75,20 @@ const ChatbotMessage = ({
       " ",
       msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
     ] }, msg.$index),
-    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: notificationStyle,
-          style: { fontSize: 12 },
-          children: [
-            "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
-            " ",
-            /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
-            "."
-          ]
-        },
-        msg.$index
-      ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
-    ] }),
+    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: notificationStyle,
+        style: { fontSize: 12 },
+        children: [
+          "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
+          "."
+        ]
+      },
+      msg.$index
+    ) }),
     ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
       "div",
       {
@@ -178,7 +177,28 @@ const ChatbotMessage = ({
         index
       );
     }) }),
-    msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    msg.event == "chatEnded" && msg.status == "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          title: (/* @__PURE__ */ new Date()).toLocaleString(),
+          style: {
+            fontSize: 12,
+            color: "#888",
+            marginBottom: 4,
+            textAlign: "center"
+          },
+          children: [
+            "No team members are online at the moment.",
+            /* @__PURE__ */ jsx("br", {}),
+            " Please try again later."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
+    ] }),
+    msg.event == "chatEnded" && msg.status != "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -196,7 +216,7 @@ const ChatbotMessage = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
     ] }),
     msg.type == "text" && /* @__PURE__ */ jsx(
       "div",

package/dist/Chatbot/store/chat.d.ts

@@ -8,6 +8,12 @@ interface OpenChatState {
     showThankyouMessage: boolean;
     displayThankyouMessage: () => void;
     toggleThankyouMessage?: () => void;
+    hasEscalated?: boolean;
+    startEscalation?: () => void;
+    endEscalation?: () => void;
+    isBlockedInput?: boolean;
+    blockInput?: () => void;
+    unblockInput?: () => void;
 }
 export declare const useOpenChat: import('zustand').UseBoundStore<import('zustand').StoreApi<OpenChatState>>;
 export {};

package/dist/Chatbot/store/chat.js

@@ -3,6 +3,7 @@ const useOpenChat = create((set, get) => ({
   isOpen: false,
   hasOpenedOnce: false,
   showThankyouMessage: false,
+  hasEscalated: false,
   toggle: () => set((state) => ({ isOpen: !state.isOpen, hasOpenedOnce: true })),
   open: () => {
     const alreadyOpened = get().hasOpenedOnce;
@@ -12,9 +13,20 @@ const useOpenChat = create((set, get) => ({
     });
   },
   close: () => set({ isOpen: false }),
-  reset: () => set({ hasOpenedOnce: false, isOpen: false, showThankyouMessage: false }),
+  reset: () => set({
+    hasOpenedOnce: false,
+    isOpen: false,
+    showThankyouMessage: false,
+    hasEscalated: false,
+    isBlockedInput: false
+  }),
   displayThankyouMessage: () => set({ showThankyouMessage: true }),
-  toggleThankyouMessage: () => set((state) => ({ showThankyouMessage: !state.showThankyouMessage }))
+  toggleThankyouMessage: () => set((state) => ({ showThankyouMessage: !state.showThankyouMessage })),
+  startEscalation: () => set({ hasEscalated: true }),
+  endEscalation: () => set({ hasEscalated: false }),
+  isBlockedInput: false,
+  blockInput: () => set({ isBlockedInput: true }),
+  unblockInput: () => set({ isBlockedInput: false })
 }));
 export {
   useOpenChat