@axos-web-dev/shared-components 2.0.0-dev.28 → 2.0.0-dev.29-toasts

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,3 +1,6 @@
+import { default as AudioManager } from './AudioManager';
+
+export declare const audioManager: AudioManager;
 export type ChatbotProps = {
     project?: "axos" | "ufb";
     debug?: boolean;

package/dist/Chatbot/Chatbot.js

@@ -1,22 +1,20 @@
 "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 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";
-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",
@@ -25,6 +23,7 @@ const Chatbot = ({
   config
 }) => {
   const {
+    isOpen,
     hasOpenedOnce,
     toggle,
     reset,
@@ -32,8 +31,15 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    blockInput
+    blockInput,
+    hasStarted,
+    setChatStarted,
+    resetChatStarted,
+    setChatStatus,
+    displayThankyouMessage,
+    hideDisplayThankyouMessage
   } = useOpenChat();
+  const isVisible = usePageVisibility();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
@@ -42,7 +48,6 @@ const Chatbot = ({
   const chatLoading = useRef(false);
   const agent_virtual = useRef(null);
   const [status, setStatus] = useState("idle");
-  const [hasStarted, setHasStarted] = useState(false);
   const [menusLoaded, setMenusLoaded] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const [scalationStarted, setScalationStarted] = useState(false);
@@ -72,7 +77,7 @@ const Chatbot = ({
     $index: -10,
     $userId: 0
   };
-  const custom_data = {
+  const custom_data = () => ({
     unsigned: {
       facingBrandId: {
         label: "facingBrandId",
@@ -89,9 +94,13 @@ 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) {
@@ -259,12 +268,20 @@ const Chatbot = ({
   };
   const startChat = async (source) => {
     const client = clientRef.current;
-    if (!client) return;
-    if (hasStarted) 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;
@@ -299,8 +316,10 @@ const Chatbot = ({
       if (!foundMenu) {
         throw new Error("Menu not found: " + menuOption);
       }
-      const newChat = await client.createChat(menuId, { custom_data });
-      if (newChat !== null) {
+      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);
@@ -309,31 +328,29 @@ const Chatbot = ({
       console.error("Error creating chat:", err);
     } finally {
       chatLoading.current = false;
-      setHasStarted(true);
-      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;
-      }
+      setChatStarted();
     }
   };
   const handleClick = async () => {
+    audioManager.setSoundEnabled(true);
     toggle();
     if (hasStarted) return;
     if (!hasOpenedOnce) {
       await startChat("bubbleClick");
-      setHasStarted(true);
+      setChatStarted();
     }
   };
   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);
+    console.log(
+      "Sending message:",
+      msg,
+      "| client.chat.id:",
+      clientChatId,
+      "| chatRef.id:",
+      refChatId
+    );
     try {
       await clientRef.current?.sendTextMessage(msg);
     } catch (error) {
@@ -345,15 +362,26 @@ const Chatbot = ({
     }
   };
   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();
+          console.log("Chat ended");
+          endEscalation?.();
+        } finally {
+          setChatStatus("ending");
+          displayThankyouMessage();
+        }
+      } catch (error) {
+        console.log(error, "from onEndChat");
+      }
     }
   };
   const onEndAndStartNewChat = async () => {
@@ -372,7 +400,7 @@ const Chatbot = ({
     deregisterEventHandlers();
     chatLoading.current = false;
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     setStatus("idle");
     clearMessages();
     endEscalation?.();
@@ -388,7 +416,7 @@ const Chatbot = ({
   };
   const onCloseAfterThankYou = async () => {
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     newChatSession();
   };
   const onPreviewTyping = async (msg) => {
@@ -402,6 +430,49 @@ 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]);
+  useMount(() => {
+    const hasParams = () => {
+      return window.location.search.includes("utm_");
+    };
+    const tryStart = () => {
+      if (hasParams()) {
+        startChat("utm-ready");
+        return true;
+      }
+      return false;
+    };
+    if (tryStart()) return;
+    const original = history.replaceState;
+    history.replaceState = function(...args) {
+      original.apply(this, args);
+      if (tryStart()) {
+        history.replaceState = original;
+      }
+    };
+    const interval = setInterval(() => {
+      if (tryStart()) {
+        clearInterval(interval);
+        history.replaceState = original;
+      }
+    }, 100);
+    return () => {
+      clearInterval(interval);
+      history.replaceState = original;
+    };
+  });
   return menusLoaded && /* @__PURE__ */ jsxs(
     "div",
     {
@@ -428,5 +499,6 @@ const Chatbot = ({
   );
 };
 export {
-  Chatbot
+  Chatbot,
+  audioManager
 };