@axos-web-dev/shared-components 2.0.0-dev.29 → 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 { useLocation, useMount, useUnmount } from "react-use";
+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,9 +31,15 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    blockInput
+    blockInput,
+    hasStarted,
+    setChatStarted,
+    resetChatStarted,
+    setChatStatus,
+    displayThankyouMessage,
+    hideDisplayThankyouMessage
   } = useOpenChat();
-  const location = useLocation();
+  const isVisible = usePageVisibility();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
@@ -43,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);
@@ -73,7 +77,7 @@ const Chatbot = ({
     $index: -10,
     $userId: 0
   };
-  const custom_data = {
+  const custom_data = () => ({
     unsigned: {
       facingBrandId: {
         label: "facingBrandId",
@@ -93,10 +97,10 @@ const Chatbot = ({
       },
       url: {
         label: "url",
-        value: location.href
+        value: window.location.href
       }
     }
-  };
+  });
   const onReadyHandler = async () => {
     console.log("Chat client is ready");
     if (clientRef.current) {
@@ -264,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;
@@ -304,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);
@@ -314,25 +328,16 @@ 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) => {
@@ -357,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 () => {
@@ -384,7 +400,7 @@ const Chatbot = ({
     deregisterEventHandlers();
     chatLoading.current = false;
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     setStatus("idle");
     clearMessages();
     endEscalation?.();
@@ -400,7 +416,7 @@ const Chatbot = ({
   };
   const onCloseAfterThankYou = async () => {
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     newChatSession();
   };
   const onPreviewTyping = async (msg) => {
@@ -414,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",
     {
@@ -440,5 +499,6 @@ const Chatbot = ({
   );
 };
 export {
-  Chatbot
+  Chatbot,
+  audioManager
 };

package/dist/Chatbot/ChatbotMessage.js

@@ -19,31 +19,6 @@ function timeAgo(date) {
     minute: "2-digit"
   });
 }
-function convertBulletsToTable(text) {
-  const lines = text.split("\n");
-  const header = lines[0];
-  const bulletLines = lines.filter((line) => line.trim().startsWith("•"));
-  if (bulletLines.length === 0) return text;
-  const fields = bulletLines.map((line) => {
-    const [field] = line.split(":");
-    const cleanField = field.replace(/•\s*\*\*|\*\*/g, "").trim();
-    return cleanField;
-  });
-  const values = bulletLines.map((line) => {
-    const [, value] = line.split(":");
-    return value.trim();
-  });
-  const headerRow = `| ${fields.join(" | ")} |`;
-  const separatorRow = `| ${fields.map(() => "-------").join(" | ")} |`;
-  const valueRow = `| ${values.join(" | ")} |`;
-  return `
-### ${header}
-
-${headerRow}
-${separatorRow}
-${valueRow}
-`;
-}
 const ChatbotMessage = ({
   msg,
   showAvatar,
@@ -93,186 +68,197 @@ const ChatbotMessage = ({
       }
     );
   }
-  const checkInformationMortgage = typeof msg.content == "string" ? convertBulletsToTable(msg.content) : "";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx("div", { className: notificationStyle, children: "We are connecting you with a human agent..." }, msg.$index),
-    msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
-      " just left the conversation."
-    ] }, msg.$index),
-    msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
-      "You are now connected with a",
-      " ",
-      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__ */ 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" }),
-          "."
-        ]
+  const checkInformationMortgage = typeof msg.content == "string" ? msg.content.replace(/•/g, "-").replace(/\\n/g, "\n") : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column"
       },
-      msg.$index
-    ) }),
-    ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          messageStyle,
-          msg.$userType == "end_user" ? user_msg : agent_msg
+      children: [
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx("div", { className: notificationStyle, children: "We are connecting you with a human agent..." }, msg.$index),
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
+          " just left the conversation."
+        ] }, msg.$index),
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
+          "You are now connected with a",
+          " ",
+          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__ */ 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",
+          {
+            className: clsx(
+              messageStyle,
+              msg.$userType == "end_user" ? user_msg : agent_msg
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  fontSize: 14,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4
+                },
+                children: [
+                  msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px"
+                      },
+                      children: [
+                        showAvatar && /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            width: 24,
+                            height: 24,
+                            src: virtualAgent?.avatar_url,
+                            alt: "agent avatar"
+                          }
+                        ),
+                        showName && /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
+                      ]
+                    }
+                  ),
+                  msg.$userType != "end_user" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                    ReactMarkdown,
+                    {
+                      remarkPlugins: [[remarkGfm, { singleTilde: false }]],
+                      components: {
+                        p: ({ ...props }) => /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            style: { margin: 0, fontSize: "inherit" },
+                            title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                              hour: "2-digit",
+                              minute: "2-digit"
+                            }),
+                            ...props
+                          }
+                        ),
+                        a: ({ ...props }) => /* @__PURE__ */ jsx("a", { style: { wordBreak: "break-word" }, ...props }),
+                        table: ({ node, ...props }) => /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", marginTop: 4 }, children: /* @__PURE__ */ jsx(
+                          "table",
+                          {
+                            ...props,
+                            className: clsx(tableMsg),
+                            style: { tableLayout: "fixed" }
+                          }
+                        ) }),
+                        th: ({ node, ...props }) => /* @__PURE__ */ jsx("th", { ...props, className: clsx(tableHead) }),
+                        td: ({ node, ...props }) => /* @__PURE__ */ jsx("td", { ...props, className: clsx(tableCell) }),
+                        tr: ({ node, ...props }) => {
+                          return /* @__PURE__ */ jsx("tr", { className: clsx(trMortgageTable), ...props });
+                        }
+                      },
+                      children: msg?.content?.includes("Does this information look correct?") ? checkInformationMortgage : msg.content
+                    }
+                  ) }) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit"
+                      }),
+                      children: msg.content
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          msg.$index
         ),
-        children: /* @__PURE__ */ jsxs(
+        msg.type == "inline_button" && Array.isArray(msg.buttons) && msg.buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: inline_button_wrapper, children: msg.buttons.length !== 0 && Array.isArray(msg.buttons) && msg.buttons.map((button, index) => {
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: inline_button,
+              onClick: () => {
+                onSend?.(button?.title);
+              },
+              children: button.title
+            },
+            index
+          );
+        }) }),
+        " ",
+        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",
+            {
+              title: (/* @__PURE__ */ new Date()).toLocaleString(),
+              style: {
+                fontSize: 12,
+                color: "#888",
+                marginBottom: 4,
+                textAlign: "center"
+              },
+              children: [
+                "Thank you for chatting!",
+                /* @__PURE__ */ jsx("br", {}),
+                " This conversation has ended."
+              ]
+            }
+          ),
+          /* @__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",
           {
             style: {
-              fontSize: 14,
-              display: "flex",
-              flexDirection: "column",
-              gap: 4
+              textAlign: msg.$userType === "end_user" ? "right" : "left",
+              fontSize: 12,
+              color: vars.chatbot.window.timestampColor,
+              textTransform: "capitalize",
+              fontFamily: "inherit"
             },
-            children: [
-              msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px"
-                  },
-                  children: [
-                    showAvatar && /* @__PURE__ */ jsx(
-                      "img",
-                      {
-                        width: 24,
-                        height: 24,
-                        src: virtualAgent?.avatar_url,
-                        alt: "agent avatar"
-                      }
-                    ),
-                    showName && /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
-                  ]
-                }
-              ),
-              msg.$userType != "end_user" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                ReactMarkdown,
-                {
-                  remarkPlugins: [[remarkGfm, { singleTilde: false }]],
-                  components: {
-                    p: ({ ...props }) => /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        style: { margin: 0, fontSize: "inherit" },
-                        title: new Date(msg.$timestamp).toLocaleTimeString([], {
-                          hour: "2-digit",
-                          minute: "2-digit"
-                        }),
-                        ...props
-                      }
-                    ),
-                    a: ({ ...props }) => /* @__PURE__ */ jsx("a", { style: { wordBreak: "break-word" }, ...props }),
-                    table: ({ node, ...props }) => /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", marginTop: 4 }, children: /* @__PURE__ */ jsx(
-                      "table",
-                      {
-                        ...props,
-                        className: clsx(tableMsg),
-                        style: { tableLayout: "fixed" }
-                      }
-                    ) }),
-                    th: ({ node, ...props }) => /* @__PURE__ */ jsx("th", { ...props, className: clsx(tableHead) }),
-                    td: ({ node, ...props }) => /* @__PURE__ */ jsx("td", { ...props, className: clsx(tableCell) }),
-                    tr: ({ node, ...props }) => {
-                      return /* @__PURE__ */ jsx("tr", { className: clsx(trMortgageTable), ...props });
-                    }
-                  },
-                  children: msg?.content?.includes("Does this information look correct?") ? checkInformationMortgage : msg.content
-                }
-              ) }) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  title: new Date(msg.$timestamp).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit"
-                  }),
-                  children: msg.content
-                }
-              )
-            ]
+            children: timeText
           }
         )
-      },
-      msg.$index
-    ),
-    msg.type == "inline_button" && Array.isArray(msg.buttons) && msg.buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: inline_button_wrapper, children: msg.buttons.length !== 0 && Array.isArray(msg.buttons) && msg.buttons.map((button, index) => {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: inline_button,
-          onClick: () => {
-            onSend?.(button?.title);
-          },
-          children: button.title
-        },
-        index
-      );
-    }) }),
-    " ",
-    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",
-        {
-          title: (/* @__PURE__ */ new Date()).toLocaleString(),
-          style: {
-            fontSize: 12,
-            color: "#888",
-            marginBottom: 4,
-            textAlign: "center"
-          },
-          children: [
-            "Thank you for chatting!",
-            /* @__PURE__ */ jsx("br", {}),
-            " This conversation has ended."
-          ]
-        }
-      ),
-      /* @__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",
-      {
-        style: {
-          textAlign: msg.$userType === "end_user" ? "right" : "left",
-          fontSize: 12,
-          color: vars.chatbot.window.timestampColor
-        },
-        children: timeText
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 export {
   ChatbotMessage