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

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.js

@@ -37,7 +37,12 @@ const ChatWindow = ({
     console.log("Preview typing: ", msg);
   }
 }) => {
-  const { showThankyouMessage, displayThankyouMessage, toggleThankyouMessage } = useOpenChat();
+  const {
+    showThankyouMessage,
+    displayThankyouMessage,
+    toggleThankyouMessage,
+    hasEscalated
+  } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
   const [showEndChatDialog, setShowEndChatDialog] = React.useState(false);
@@ -89,24 +94,6 @@ 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) }),
@@ -475,6 +462,9 @@ 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);

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, useCallback } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useMount, useUnmount } from "react-use";
 const Chatbot = ({
   project = "axos",
@@ -14,7 +14,14 @@ const Chatbot = ({
   menuOption = "Support Virtual Agent",
   debug = false
 }) => {
-  const { hasOpenedOnce, toggle, reset } = useOpenChat();
+  const {
+    hasOpenedOnce,
+    toggle,
+    reset,
+    startEscalation,
+    hasEscalated,
+    endEscalation
+  } = useOpenChat();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
@@ -90,19 +97,26 @@ const Chatbot = ({
   };
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
-    addMessage(message);
+    if (["system", "virtual_agent", "user"].includes(message.$userType) && message.event === void 0) {
+      addMessage(message);
+      return;
+    }
     const eventName = message?.event;
     switch (eventName) {
       case "escalationAccepted":
         setScalationStarted(true);
+        startEscalation?.();
+        addMessage(message);
         return;
       case "escalationStarted":
         setScalationStarted(true);
+        startEscalation?.();
+        addMessage(message);
         return;
       default:
+        addMessage(message);
         if (["end_user"].includes(message.$userType)) {
-          console.log("ai thiunk", message?.$userType, scalationStarted);
-          if (!scalationStarted) {
+          if (!hasEscalated) {
             addMessage(typingMessage);
           }
         }
@@ -137,19 +151,25 @@ 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);
-      setScalationStarted(
-        messages2.some(
-          (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
-            msg.event
-          )
+      const hasEscalation = messages2.some(
+        (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+          msg.event
         )
       );
+      console.log(hasEscalation);
+      if (hasEscalation) {
+        setScalationStarted(true);
+        startEscalation?.();
+      }
     }
   };
   const registerEventHandlers = () => {
@@ -162,6 +182,7 @@ const Chatbot = ({
     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);
   };
@@ -178,6 +199,7 @@ const Chatbot = ({
     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 () => {
@@ -256,7 +278,7 @@ const Chatbot = ({
   };
   const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
-    clientRef.current?.sendTextMessage(msg);
+    await clientRef.current?.sendTextMessage(msg);
   };
   const onEndChat = async () => {
     console.log("Ending chat");
@@ -267,6 +289,7 @@ const Chatbot = ({
       chatRef.current = null;
       console.log("Chat ended");
       setHasStarted(false);
+      endEscalation?.();
     }
   };
   const onEndAndStartNewChat = async () => {
@@ -295,6 +318,7 @@ const Chatbot = ({
     setHasStarted(false);
     setStatus("idle");
     clearMessages();
+    endEscalation?.();
     clientRef.current?.destroy();
     clientRef.current?.destroyChat();
     clientRef.current = null;
@@ -306,16 +330,17 @@ const Chatbot = ({
     reset();
     setHasStarted(false);
   };
-  const onPreviewTyping = useCallback(async (msg) => {
+  const onPreviewTyping = async (msg) => {
     console.log("Preview typing message:", msg);
     try {
       if (clientRef.current) {
-        clientRef.current?.sendPreviewMessage(msg);
+        chatRef.current?.startTyping();
+        await 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(

package/dist/Chatbot/ChatbotMessage.js

@@ -10,6 +10,7 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
 /* 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 { 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";
@@ -27,6 +28,7 @@ const ChatbotMessage = ({
   onEndChat,
   onSend
 }) => {
+  const { hasEscalated } = useOpenChat();
   const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
   useEffect(() => {
     const interval = setInterval(() => {
@@ -34,7 +36,7 @@ const ChatbotMessage = ({
     }, 3e4);
     return () => clearInterval(interval);
   }, [msg.$timestamp]);
-  if (msg.$sid === "typing-1") {
+  if (msg.$sid === "typing-1" && !hasEscalated) {
     return /* @__PURE__ */ jsx(
       "div",
       {

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

@@ -8,6 +8,9 @@ interface OpenChatState {
     showThankyouMessage: boolean;
     displayThankyouMessage: () => void;
     toggleThankyouMessage?: () => void;
+    hasEscalated?: boolean;
+    startEscalation?: () => void;
+    endEscalation?: () => 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,16 @@ 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
+  }),
   displayThankyouMessage: () => set({ showThankyouMessage: true }),
-  toggleThankyouMessage: () => set((state) => ({ showThankyouMessage: !state.showThankyouMessage }))
+  toggleThankyouMessage: () => set((state) => ({ showThankyouMessage: !state.showThankyouMessage })),
+  startEscalation: () => set({ hasEscalated: true }),
+  endEscalation: () => set({ hasEscalated: false })
 }));
 export {
   useOpenChat

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

@@ -6,6 +6,7 @@ interface MessageStore {
     removeMessage: (id: string) => void;
     addMessages: (newMessages: MessageResponse[]) => void;
     clearMessages: () => void;
+    isEscalated: boolean;
 }
 export interface Message {
     id: string;

package/dist/Chatbot/store/messages.js

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-const useMessages = create((set) => ({
+const useMessages = create((set, get) => ({
   messages: [],
   addMessage: (message) => set((state) => {
     const cleaned = state.messages.filter((m) => m.$sid !== "typing-1");
@@ -11,7 +11,10 @@ const useMessages = create((set) => ({
     )
   })),
   addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
-  clearMessages: () => set({ messages: [] })
+  clearMessages: () => set({ messages: [] }),
+  isEscalated: get()?.messages?.some(
+    (msg) => ["escalationAccepted", "escalationStarted"].includes(msg.event)
+  )
 }));
 export {
   useMessages

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.62-0",
+  "version": "1.0.100-dev.62-1",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",