@axos-web-dev/shared-components 2.0.0-dev.9-fixdependencies → 2.0.0-dev.enableCTA2

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,3 @@
-import '../assets/Chatbot/Chatbot.css';/* empty css                           */
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Chatbot/Chatbot.css.ts.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/Chatbot/Chatbot.d.ts

@@ -1,10 +1,21 @@
+import { default as AudioManager } from './AudioManager';
+
+export declare const audioManager: AudioManager;
 export type ChatbotProps = {
     project?: "axos" | "ufb";
     debug?: boolean;
 };
-export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
+type InitalizeChatbot = {
+    companyId: string;
+    tenantName: string;
+    host: string;
+    authUrl: string;
+};
+export declare const Chatbot: ({ project, projectEnv, menuOption, config, }: {
     project?: "axos" | "ufb" | "Axos" | "Ufb";
     projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
     menuOption?: "Support Virtual Agent" | string;
     debug?: boolean;
-}) => false | import("react/jsx-runtime").JSX.Element;
+    config: InitalizeChatbot;
+}) => false | import("react").JSX.Element;
+export {};

package/dist/Chatbot/Chatbot.js

@@ -1,33 +1,29 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { usePageVisibility } from "../utils/useVisibility.js";
 import { useRef, useState, useEffect } from "react";
 import { useMount, useUnmount } from "react-use";
 import notificationSound from "../assets/notification.mp3.js";
-import { authenticate } from "./authenticate.js";
+import AudioManager from "./AudioManager.js";
 import { Bubble } from "./Bubble.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
-const __vite_import_meta_env__ = {};
-const env = __vite_import_meta_env__ || process.env;
-if (typeof window !== "undefined") {
-  const OriginalAudio = window.Audio;
-  class PatchedAudio extends OriginalAudio {
-    constructor(src) {
-      const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
-      super(newSrc);
-    }
-  }
-  window.Audio = PatchedAudio;
+const audioManager = new AudioManager();
+audioManager.installUjetAudioOverride(notificationSound);
+audioManager.setSoundEnabled(false);
+function isChat(obj) {
+  return obj !== null && typeof obj === "object" && "id" in obj && "agent" in obj && typeof obj.connect === "function";
 }
 const Chatbot = ({
   project = "axos",
   projectEnv = "dev",
   menuOption = "Support Virtual Agent",
-  debug = false
+  config
 }) => {
   const {
+    isOpen,
     hasOpenedOnce,
     toggle,
     reset,
@@ -35,21 +31,43 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    blockInput
+    blockInput,
+    hasStarted,
+    setChatStarted,
+    resetChatStarted,
+    setChatStatus,
+    displayThankyouMessage,
+    hideDisplayThankyouMessage
   } = useOpenChat();
-  const { addMessage, addMessages, clearMessages, messages } = useMessages();
+  const isVisible = usePageVisibility();
+  const {
+    addMessage,
+    addMessages,
+    clearMessages,
+    messages,
+    addPendingMessage,
+    resolvePendingMessage
+  } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
   const isMountedRef = useRef(false);
-  const hasLoadedBefore = useRef(true);
   const chatRef = useRef(null);
+  const chatLoading = useRef(false);
   const agent_virtual = useRef(null);
+  const messageQueueRef = useRef([]);
+  const sendInFlightRef = useRef(false);
+  const flushingRef = useRef(false);
+  const statusRef = useRef("idle");
   const [status, setStatus] = useState("idle");
-  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(() => {
+    statusRef.current = status;
+    if (status === "connected") {
+      flushQueuedMessages();
+    }
+  }, [status]);
   useEffect(() => {
     if (messages.length === 0) return;
     const hasScalation = messages.some(
@@ -66,6 +84,9 @@ const Chatbot = ({
     ["axos", 1],
     ["ufb", 3]
   ]);
+  const hasRealReply = () => useMessages.getState().messages.some(
+    (m) => !m.pending && m.$userType !== "end_user" && m.type !== "noti" && m.$sid !== "typing-1"
+  );
   const typingMessage = {
     $sid: "typing-1",
     type: "system",
@@ -76,7 +97,7 @@ const Chatbot = ({
     $index: -10,
     $userId: 0
   };
-  const custom_data = {
+  const custom_data = () => ({
     unsigned: {
       facingBrandId: {
         label: "facingBrandId",
@@ -93,15 +114,22 @@ const Chatbot = ({
       env: {
         label: "env",
         value: projectEnv === "uat" ? "dev" : projectEnv
+      },
+      url: {
+        label: "url",
+        value: window.location.href
       }
     }
-  };
+  });
   const onReadyHandler = async () => {
     console.log("Chat client is ready");
     if (clientRef.current) {
       menuRef.current = await clientRef.current.getMenus();
       setMenusLoaded(true);
       console.log("menus:", menuRef.current);
+      if (menuRef.current !== null && useOpenChat.getState().isOpen) {
+        await startChat("onReady");
+      }
     }
   };
   const onAuthenticatedHandler = async () => {
@@ -113,10 +141,11 @@ const Chatbot = ({
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
     const { event, $userType } = message;
-    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
+    if (["virtual_agent", "user"].includes($userType) && event === void 0) {
       addMessage(message);
       if (!hasEscalated) {
         unblockInput?.();
+        flushQueuedMessages();
       }
       return;
     }
@@ -197,6 +226,7 @@ const Chatbot = ({
           startEscalation?.();
         }
       }
+      flushQueuedMessages();
     } catch (error) {
       console.error("Error fetching messages on chat connected:", error);
     }
@@ -218,7 +248,7 @@ const Chatbot = ({
   const deregisterEventHandlers = () => {
     clientRef.current?.off("ready", onReadyHandler);
     clientRef.current?.off("authenticated", onAuthenticatedHandler);
-    clientRef.current?.off("chat.ongoing", onDismissedHandler);
+    clientRef.current?.off("chat.ongoing", onChatOngoingHandler);
     clientRef.current?.off("chat.message", onChatMessageHandler);
     clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
     clientRef.current?.off("chat.typingEnded", onChatTypingEndedHandler);
@@ -232,16 +262,24 @@ const Chatbot = ({
     clientRef.current?.off("chat.connected", onChatConnectedHandler);
   };
   const createClient = async () => {
-    const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
-    if (projectEnv !== "prod" || debug) {
-      Logger.addHandler(consoleLoggerHandler);
-    }
+    const { Client } = await import("@ujet/websdk-headless");
     if (clientRef.current) return;
     const client = new Client({
-      companyId: env.VITE_COMPANY_ID || env.CCAI_COMPANY_ID || "",
-      tenant: env.VITE_TENANT_NAME || env.CCAI_TENANT_NAME || "",
-      host: env.VITE_HOST || env.CCAI_HOST || "",
-      authenticate
+      companyId: config.companyId,
+      tenant: config.tenantName,
+      host: config.host,
+      authenticate: async () => {
+        const res = await fetch(config.authUrl, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        const data = await res.json();
+        return {
+          token: data.token
+        };
+      }
     });
     client?.on("ready", onReadyHandler);
     client?.on("authenticated", onAuthenticatedHandler);
@@ -250,37 +288,60 @@ const Chatbot = ({
     registerEventHandlers();
     return;
   };
-  const startChat = async () => {
-    console.log("Starting chat");
+  const startChat = async (source) => {
     const client = clientRef.current;
-    if (!client) return;
-    if (!menuRef.current || !menuRef.current.menus) {
-      let waited = 0;
-      while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
-        await new Promise((res) => setTimeout(res, 100));
-        waited += 100;
-      }
-      if (!menuRef.current || !menuRef.current.menus) {
-        console.error("Menu not loaded, cannot start chat");
-        return;
-      }
+    if (!client) {
+      console.log(`no client detected`);
+      return;
+    }
+    if (hasStarted) {
+      console.log(`has started is ${hasStarted}`);
+      return;
+    }
+    hideDisplayThankyouMessage();
+    if (chatLoading.current) {
+      console.log(`startChat skipped [${source}] — already in progress`);
+      return;
     }
+    setChatStatus("connected");
     try {
+      console.log(`Starting chat [${source}]`, chatRef.current);
+      chatLoading.current = true;
+      if (!menuRef.current || !menuRef.current.menus) {
+        let waited = 0;
+        while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
+          await new Promise((res) => setTimeout(res, 100));
+          waited += 100;
+        }
+        if (!menuRef.current || !menuRef.current.menus) {
+          console.error("Menu not loaded, cannot start chat");
+          return;
+        }
+      }
+      console.log("menus: ->", menuRef.current);
       const ongoingChat = await client.loadOngoingChat();
+      console.log("theres a ongoing chat?: -->", ongoingChat);
       if (ongoingChat) {
         console.log("Ongoing chat found:", ongoingChat);
         console.log("Resuming chat:", ongoingChat.id);
-        chatRef.current = await client.resumeChat(ongoingChat.id);
+        chatRef.current = ongoingChat;
         agent_virtual.current = ongoingChat.agent;
         return;
       }
+      console.log("not ongoing chat ");
+      console.log(!!ongoingChat);
       const foundMenu = menuRef.current.menus.find(
         (menu) => menu.name === menuOption
       );
       const menuId = foundMenu && foundMenu.id;
       console.log("Creating new chat with menu ID:", menuId);
-      const newChat = await client.createChat(menuId, { custom_data });
-      if (newChat !== null) {
+      if (!foundMenu) {
+        throw new Error("Menu not found: " + menuOption);
+      }
+      const newChat = await client.createChat(menuId, {
+        custom_data: custom_data()
+      });
+      if (newChat && typeof newChat === "object" && isChat(newChat)) {
         chatRef.current = newChat;
         agent_virtual.current = newChat.agent;
         console.log("Chat created id:", newChat.id);
@@ -288,58 +349,106 @@ const Chatbot = ({
     } catch (err) {
       console.error("Error creating chat:", err);
     } finally {
-      if (clientRef?.current?.chat?.state?.status == "va_assigned") {
-        const OriginalAudio = window.Audio;
-        class PatchedAudio extends OriginalAudio {
-          constructor(src) {
-            const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
-            super(newSrc);
-          }
-        }
-        window.Audio = PatchedAudio;
-      }
+      chatLoading.current = false;
+      setChatStarted();
     }
   };
   const handleClick = async () => {
+    audioManager.setSoundEnabled(true);
     toggle();
     if (hasStarted) return;
-    if (!menusLoaded) {
-      setPendingStart(true);
-      return;
-    }
     if (!hasOpenedOnce) {
-      await startChat();
-      setHasStarted(true);
+      await startChat("bubbleClick");
+      setChatStarted();
     }
   };
-  const onSendMessage = async (msg) => {
-    console.log("Sending message:", msg);
+  const sendNow = async (msg) => {
+    sendInFlightRef.current = true;
+    let success = true;
     try {
       await clientRef.current?.sendTextMessage(msg);
     } catch (error) {
       console.log(error);
+      success = false;
     } finally {
+      sendInFlightRef.current = false;
       if (!hasEscalated) {
         blockInput?.();
       }
     }
+    return success;
+  };
+  const flushQueuedMessages = async () => {
+    if (flushingRef.current) return;
+    if (messageQueueRef.current.length === 0) return;
+    if (!clientRef.current || statusRef.current !== "connected") return;
+    if (!hasRealReply()) return;
+    flushingRef.current = true;
+    try {
+      while (messageQueueRef.current.length > 0 && !useOpenChat.getState().isBlockedInput && !sendInFlightRef.current) {
+        const next = messageQueueRef.current[0];
+        const success = await sendNow(next.text);
+        messageQueueRef.current.shift();
+        if (!success) {
+          resolvePendingMessage(next.id);
+        }
+      }
+    } finally {
+      flushingRef.current = false;
+    }
+  };
+  const onSendMessage = async (msg) => {
+    const clientChatId = clientRef.current?.chat?.id;
+    const refChatId = chatRef.current?.id;
+    console.log(
+      "Sending message:",
+      msg,
+      "| client.chat.id:",
+      clientChatId,
+      "| chatRef.id:",
+      refChatId
+    );
+    const notReady = !clientRef.current || statusRef.current !== "connected";
+    const isThinking = useOpenChat.getState().isBlockedInput;
+    const noReplyYet = !hasRealReply();
+    if (notReady || isThinking || sendInFlightRef.current || noReplyYet) {
+      const id = `pending-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      messageQueueRef.current.push({ id, text: msg });
+      addPendingMessage(id, msg);
+      return;
+    }
+    await sendNow(msg);
   };
   const onEndChat = async () => {
-    console.log("Ending chat");
+    console.log(`Ending chat [end chat]`);
     if (chatRef.current) {
-      await clientRef.current?.finishChat();
-      await chatRef.current?.destroy();
-      clearMessages();
-      chatRef.current = null;
-      console.log("Chat ended");
-      setHasStarted(false);
-      endEscalation?.();
+      try {
+        await clientRef.current?.finishChat();
+        console.log(`Chat finished`);
+        try {
+          await chatRef.current?.destroy();
+          console.log(`Chat destroyed`);
+          clearMessages();
+          chatRef.current = null;
+          resetChatStarted();
+          messageQueueRef.current = [];
+          sendInFlightRef.current = false;
+          flushingRef.current = false;
+          console.log("Chat ended");
+          endEscalation?.();
+        } finally {
+          setChatStatus("ending");
+          displayThankyouMessage();
+        }
+      } catch (error) {
+        console.log(error, "from onEndChat");
+      }
     }
   };
   const onEndAndStartNewChat = async () => {
     console.log("Ending current chat and starting a new one");
     await onEndChat();
-    await startChat();
+    await startChat("endAndStartNew");
   };
   useMount(async () => {
     console.log("Chatbot mounted");
@@ -347,19 +456,14 @@ const Chatbot = ({
     isMountedRef.current = true;
     await createClient();
   });
-  useEffect(() => {
-    if (menusLoaded && pendingStart && !hasStarted) {
-      startChat();
-      setPendingStart(false);
-    }
-  }, [menusLoaded, pendingStart, hasStarted]);
   useUnmount(() => {
     console.log("Chatbot unmounted");
     deregisterEventHandlers();
-    isMountedRef.current = false;
-    hasLoadedBefore.current = true;
+    chatLoading.current = false;
+    messageQueueRef.current = [];
+    sendInFlightRef.current = false;
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     setStatus("idle");
     clearMessages();
     endEscalation?.();
@@ -370,9 +474,13 @@ const Chatbot = ({
   const onClose = () => {
     toggle();
   };
-  const onCloseAfterThankYou = () => {
+  const newChatSession = async () => {
+    console.log("create new session");
+  };
+  const onCloseAfterThankYou = async () => {
     reset();
-    setHasStarted(false);
+    resetChatStarted();
+    newChatSession();
   };
   const onPreviewTyping = async (msg) => {
     console.log("Preview typing message:", msg);
@@ -385,6 +493,19 @@ const Chatbot = ({
       console.error("Error sending preview message:", error);
     }
   };
+  useEffect(() => {
+    if (chatRef.current) {
+      if (isVisible && isOpen) {
+        audioManager.setSoundEnabled(false);
+      }
+      if (isVisible && !isOpen) {
+        audioManager.setSoundEnabled(true);
+      }
+      if (!isVisible) {
+        audioManager.setSoundEnabled(true);
+      }
+    }
+  }, [isOpen, isVisible]);
   return menusLoaded && /* @__PURE__ */ jsxs(
     "div",
     {
@@ -411,5 +532,6 @@ const Chatbot = ({
   );
 };
 export {
-  Chatbot
+  Chatbot,
+  audioManager
 };

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -3,6 +3,7 @@ import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from
 
 interface MessageResponse extends BaseMessageResponse {
     to_agent?: HumanAgent;
+    pending?: boolean;
 }
 interface ChatbotMessageProps {
     msg: MessageResponse;