@axos-web-dev/shared-components 1.0.100-dev.61 → 1.0.100-dev.62-0

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,6 +32,9 @@ const ChatWindow = ({
   showName = false,
   onCloseAfterThankYou = () => {
     console.log("Close after thank you");
+  },
+  previewTyping = (msg) => {
+    console.log("Preview typing: ", msg);
   }
 }) => {
   const { showThankyouMessage, displayThankyouMessage, toggleThankyouMessage } = useOpenChat();
@@ -86,6 +89,24 @@ const ChatWindow = ({
     setInput("");
     toggleThankyouMessage?.();
   };
+  useEffect(() => {
+    const scalationStarted = messages.some(
+      (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+        msg.event
+      )
+    );
+    if (!scalationStarted) {
+      return;
+    }
+    const sendPreview = () => {
+      const cleaned = cleanInput(input);
+      previewTyping(cleaned);
+    };
+    const intervalId = setInterval(sendPreview, 2e3);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [input, messages, previewTyping]);
   return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
     /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
       /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section) }),
@@ -136,6 +157,7 @@ const ChatWindow = ({
         /* @__PURE__ */ jsx(
           "button",
           {
+            disabled: messages.length === 0,
             onClick: () => {
               setMenuOpen(!menuOpen);
             },
@@ -417,7 +439,11 @@ const ChatWindow = ({
           showAvatar,
           showName,
           virtualAgent,
-          onCancelEndChat
+          onCancelEndChat,
+          onEndChat: () => {
+            endChat();
+            onCloseAfterThankYou();
+          }
         },
         msg?.$index
       )),

package/dist/Chatbot/Chatbot.js

@@ -6,7 +6,7 @@ import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { useMount, useUnmount } from "react-use";
 const Chatbot = ({
   project = "axos",
@@ -26,6 +26,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 +47,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",
@@ -78,12 +91,31 @@ const Chatbot = ({
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
     addMessage(message);
-    if (!["virtual_agent", "system"].includes(message.$userType)) {
-      addMessage(typingMessage);
+    const eventName = message?.event;
+    switch (eventName) {
+      case "escalationAccepted":
+        setScalationStarted(true);
+        return;
+      case "escalationStarted":
+        setScalationStarted(true);
+        return;
+      default:
+        if (["end_user"].includes(message.$userType)) {
+          console.log("ai thiunk", message?.$userType, scalationStarted);
+          if (!scalationStarted) {
+            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");
@@ -111,12 +143,20 @@ const Chatbot = ({
     const messages2 = await clientRef.current?.fetchMessages();
     if (messages2) {
       addMessages(messages2);
+      setScalationStarted(
+        messages2.some(
+          (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+            msg.event
+          )
+        )
+      );
     }
   };
   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);
@@ -131,6 +171,7 @@ 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);
@@ -150,6 +191,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,7 +254,7 @@ const Chatbot = ({
       setHasStarted(true);
     }
   };
-  const onSendMessage = (msg) => {
+  const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
     clientRef.current?.sendTextMessage(msg);
   };
@@ -262,6 +306,16 @@ const Chatbot = ({
     reset();
     setHasStarted(false);
   };
+  const onPreviewTyping = useCallback(async (msg) => {
+    console.log("Preview typing message:", msg);
+    try {
+      if (clientRef.current) {
+        clientRef.current?.sendPreviewMessage(msg);
+      }
+    } catch (error) {
+      console.error("Error sending preview message:", error);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
     /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
     /* @__PURE__ */ jsx(
@@ -274,7 +328,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

@@ -24,6 +24,7 @@ const ChatbotMessage = ({
   showName,
   virtualAgent,
   onCancelEndChat,
+  onEndChat,
   onSend
 }) => {
   const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
@@ -196,7 +197,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/utils/allowedAxosDomains.js

@@ -43,7 +43,8 @@ const moreDomains = {
   "{MODELSELECTION}": process.env.MODEL_SELECTION_URL || "https://modelselection.axos.com",
   "{COMMERCIALPORTAL_LOGIN}": `${process.env.COMMERCIALPORTAL_URL}/login` || "https://portals.axosbank.com/login",
   "{COMMERCIALPORTAL_REGISTER}": process.env.COMMERCIALPORTAL_URL + "/Register" || "https://portals.axosbank.com/Register",
-  "{SHAREAXB}": process.env.SHAREAXB_URL || "https://share.axosbank.com"
+  "{SHAREAXB}": process.env.SHAREAXB_URL || "https://share.axosbank.com",
+  "{MERIDIAN}": process.env.MERIDIAN_URL || "https://www.axosbank.com/"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.61",
+  "version": "1.0.100-dev.62-0",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",