@axos-web-dev/shared-components 2.1.0 → 2.2.0

package/dist/Chatbot/ChatWindow.css.js

@@ -4,41 +4,37 @@ import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css'
 /* empty css                                    */
 /* empty css                           */
 /* empty css                              */
-var windowStyle = "_13n1jqk1";
-var windowOpenStyle = "_13n1jqk2";
-var windowBarStyle = "_13n1jqk3";
-var left_bar_section = "_13n1jqk4";
-var chat_title = "_13n1jqk5";
-var buttonss_section = "_13n1jqk6";
-var button_bar = "_13n1jqk7";
-var button_reset = "_13n1jqk8";
-var arrowFill = "_13n1jqk9";
-var inputStyle = "_13n1jqka";
-var autoResize = "_13n1jqkb";
-var sendButtonStyle = "_13n1jqkc";
-var messagesContainerStyle = "_13n1jqkd";
-var notificationStyle = "_13n1jqke";
-var messageStyle = "_13n1jqkf";
-var inline_button_wrapper = "_13n1jqkg";
-var inline_button = "_13n1jqkh";
-var endChatButtonStyle = "_13n1jqki";
-var noAnswerButton = "_13n1jqkj";
-var chatbotMenu = "_13n1jqkk";
-var chatbotMenuItem = "_13n1jqkl";
-var chatNetworkStatus = "_13n1jqkm";
-var chatEndDialogOverlay = "_13n1jqkn";
-var chatFinishDialog = "_13n1jqko";
-var thankyou_overlay = "_13n1jqkp";
-var thankyou_message = "_13n1jqkq";
-var thankyou_image = "_13n1jqkr";
-var chatEndCircle = "_13n1jqks";
-var user_msg = "_13n1jqkt";
-var agent_msg = "_13n1jqku";
-var shimmerText = "_13n1jqkw";
-var tableMsg = "_13n1jqkx";
-var tableHead = "_13n1jqky";
-var tableCell = "_13n1jqkz";
-var trMortgageTable = "_13n1jqk10";
+var windowStyle = "_13n1jqk0";
+var windowOpenStyle = "_13n1jqk1";
+var windowBarStyle = "_13n1jqk2";
+var left_bar_section = "_13n1jqk3";
+var chat_title = "_13n1jqk4";
+var buttonss_section = "_13n1jqk5";
+var button_bar = "_13n1jqk6";
+var button_reset = "_13n1jqk7";
+var arrowFill = "_13n1jqk8";
+var inputStyle = "_13n1jqk9";
+var autoResize = "_13n1jqka";
+var sendButtonStyle = "_13n1jqkb";
+var messagesContainerStyle = "_13n1jqkc";
+var notificationStyle = "_13n1jqkd";
+var messageStyle = "_13n1jqke";
+var inline_button_wrapper = "_13n1jqkf";
+var inline_button = "_13n1jqkg";
+var endChatButtonStyle = "_13n1jqkh";
+var noAnswerButton = "_13n1jqki";
+var chatbotMenu = "_13n1jqkj";
+var chatbotMenuItem = "_13n1jqkk";
+var chatNetworkStatus = "_13n1jqkl";
+var chatEndDialogOverlay = "_13n1jqkm";
+var chatFinishDialog = "_13n1jqkn";
+var thankyou_overlay = "_13n1jqko";
+var thankyou_message = "_13n1jqkp";
+var thankyou_image = "_13n1jqkq";
+var chatEndCircle = "_13n1jqkr";
+var user_msg = "_13n1jqks";
+var agent_msg = "_13n1jqkt";
+var shimmerText = "_13n1jqkv";
 export {
   agent_msg,
   arrowFill,
@@ -64,13 +60,9 @@ export {
   notificationStyle,
   sendButtonStyle,
   shimmerText,
-  tableCell,
-  tableHead,
-  tableMsg,
   thankyou_image,
   thankyou_message,
   thankyou_overlay,
-  trMortgageTable,
   user_msg,
   windowBarStyle,
   windowOpenStyle,

package/dist/Chatbot/ChatWindow.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { LoadingIndicator } from "../LoadingIndicator/index.js";
 import { vars } from "../themes/axos.css.js";
 import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                               */
 /* empty css                                    */
 import clsx from "clsx";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useEffect } from "react";
 import { useNetworkState, useMount } from "react-use";
-import { focusAnimation, gradientFocus } from "./AnimatedGradientBorder.css.js";
+import { gradientFocus } from "./AnimatedGradientBorder.css.js";
 import { ChatbotMessage } from "./ChatbotMessage.js";
 import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, shimmerText, messagesContainerStyle, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
@@ -40,13 +39,12 @@ const ChatWindow = ({
 }) => {
   const {
     showThankyouMessage,
+    displayThankyouMessage,
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
     isOpen,
-    hasOpenedOnce,
-    chatStatus,
-    setChatStatus
+    hasOpenedOnce
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -55,7 +53,6 @@ const ChatWindow = ({
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
-  const [focused, setFocused] = useState(false);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -86,6 +83,9 @@ const ChatWindow = ({
   useEffect(() => {
     autoResizeTextarea();
   }, [input]);
+  const displayThankYouScreen = () => {
+    displayThankyouMessage();
+  };
   const onCancelEndChat = () => {
     setShowEndChatDialog(false);
     toggleThankyouMessage?.();
@@ -165,7 +165,7 @@ const ChatWindow = ({
               alignContent: "center",
               background: menuOpen ? "#0000000f" : void 0
             },
-            children: /* @__PURE__ */ jsx(EllipsisIcon, { color: vars.chatbot.window.headerText })
+            children: /* @__PURE__ */ jsx(EllipsisIcon, {})
           }
         ),
         menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsxs(
@@ -197,7 +197,7 @@ const ChatWindow = ({
                         "path",
                         {
                           d: "M11.1236 5.37374L8.60278 7.89457L11.1236 10.4167L10.4166 11.1237L7.89445 8.6029L5.37362 11.1237L4.66658 10.4167L7.18742 7.89457L4.66658 5.37374L5.37362 4.66671L7.89445 7.18754L10.4166 4.66671L11.1236 5.37374Z",
-                          fill: vars.chatbot.window.headerText
+                          fill: "#1E3860"
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -206,7 +206,7 @@ const ChatWindow = ({
                           fillRule: "evenodd",
                           clipRule: "evenodd",
                           d: "M13.3333 0.833374C14.3458 0.833374 15.1666 1.65419 15.1666 2.66671V13.3334C15.1666 14.3459 14.3458 15.1667 13.3333 15.1667H2.66659C1.65406 15.1667 0.833252 14.3459 0.833252 13.3334V2.66671C0.833252 1.65419 1.65406 0.833374 2.66659 0.833374H13.3333ZM2.66659 1.83337C2.20635 1.83337 1.83325 2.20647 1.83325 2.66671V13.3334C1.83325 13.7936 2.20635 14.1667 2.66659 14.1667H13.3333C13.7935 14.1667 14.1666 13.7936 14.1666 13.3334V2.66671C14.1666 2.20647 13.7935 1.83337 13.3333 1.83337H2.66659Z",
-                          fill: vars.chatbot.window.headerText
+                          fill: "#1E3860"
                         }
                       )
                     ] }),
@@ -293,7 +293,7 @@ const ChatWindow = ({
                       type: "submit",
                       onClick: () => {
                         endChat();
-                        setChatStatus("ending");
+                        displayThankYouScreen();
                         setShowEndChatDialog(false);
                       },
                       children: "Yes, End Chat"
@@ -316,45 +316,6 @@ const ChatWindow = ({
             " "
           ] }) })
         ] }),
-        chatStatus == "ending" && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                background: "#00000080",
-                position: "fixed",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 999
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "fixed",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 1e3,
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  variant: "primary",
-                  style: { borderTopColor: vars.chatbot.bubble.glowShadow }
-                }
-              )
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           ThankYouMessage,
           {
@@ -458,7 +419,7 @@ const ChatWindow = ({
                 fontSize: 14,
                 display: "flex",
                 flexDirection: "column",
-                gap: 16
+                gap: 4
               },
               children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
             }
@@ -498,88 +459,71 @@ const ChatWindow = ({
       ),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 24px 16px" }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(focused ? focusAnimation : ""),
-          style: {
-            position: "absolute",
-            left: "10%",
-            width: "80%",
-            height: "40px",
-            zIndex: "-1"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            padding: "12px 16px",
-            background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
-            borderRadius: 12
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                ref: inputRef,
-                value: input,
-                onChange: (e) => setInput(e.target.value),
-                onKeyDown: (e) => {
-                  if (hasEscalated) {
-                    previewTyping(e.target?.value);
-                  }
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    handleSend(e);
-                  }
-                },
-                onFocus: () => setFocused(true),
-                onBlur: () => setFocused(false),
-                placeholder: "Ask anything...",
-                className: clsx(inputStyle, autoResize),
-                autoFocus: true,
-                disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
-                rows: 1
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: clsx(
-                  sendButtonStyle,
-                  input.trim().length > 0 && "active"
-                ),
-                type: "submit",
-                title: "Send message",
-                disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        fillRule: "evenodd",
-                        clipRule: "evenodd",
-                        d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
-                        fill: "#435164"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 24px 16px" }, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          padding: "12px 16px",
+          background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
+          borderRadius: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: inputRef,
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: (e) => {
+                if (hasEscalated) {
+                  previewTyping(e.target?.value);
+                }
+                if (e.key === "Enter" && !e.shiftKey) {
+                  handleSend(e);
+                }
+              },
+              placeholder: "Ask anything...",
+              className: clsx(inputStyle, autoResize),
+              autoFocus: true,
+              disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
+              rows: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: clsx(
+                sendButtonStyle,
+                input.trim().length > 0 && "active"
+              ),
+              type: "submit",
+              title: "Send message",
+              disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      clipRule: "evenodd",
+                      d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
+                      fill: "#435164"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }) })
   ] });
 };
 export {

package/dist/Chatbot/Chatbot.d.ts

@@ -14,5 +14,5 @@ export declare const Chatbot: ({ project, projectEnv, menuOption, config, }: {
     menuOption?: "Support Virtual Agent" | string;
     debug?: boolean;
     config: InitalizeChatbot;
-}) => false | import("react/jsx-runtime").JSX.Element;
+}) => false | import("react").JSX.Element;
 export {};

package/dist/Chatbot/Chatbot.js

@@ -1,23 +1,12 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { useLocation, useMount, useUnmount } from "react-use";
-import notificationSound from "../assets/notification.mp3.js";
+import { useMount, useUnmount } from "react-use";
 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 Chatbot = ({
   project = "axos",
   projectEnv = "dev",
@@ -32,14 +21,8 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    blockInput,
-    hasStarted,
-    setChatStarted,
-    resetChatStarted,
-    setChatStatus,
-    displayThankyouMessage
+    blockInput
   } = useOpenChat();
-  const location = useLocation();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
@@ -48,6 +31,7 @@ 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);
@@ -94,10 +78,6 @@ const Chatbot = ({
       env: {
         label: "env",
         value: projectEnv === "uat" ? "dev" : projectEnv
-      },
-      url: {
-        label: "url",
-        value: location.href
       }
     }
   };
@@ -242,6 +222,9 @@ const Chatbot = ({
   const createClient = async () => {
     const { Client } = await import("@ujet/websdk-headless");
     if (clientRef.current) return;
+    console.log({
+      config
+    });
     const client = new Client({
       companyId: config.companyId,
       tenant: config.tenantName,
@@ -268,19 +251,12 @@ const Chatbot = ({
   };
   const startChat = async (source) => {
     const client = clientRef.current;
-    if (!client) {
-      console.log(`no client detected`);
-      return;
-    }
-    if (hasStarted) {
-      console.log(`has started is ${hasStarted}`);
-      return;
-    }
+    if (!client) return;
+    if (hasStarted) return;
     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;
@@ -325,7 +301,7 @@ const Chatbot = ({
       console.error("Error creating chat:", err);
     } finally {
       chatLoading.current = false;
-      setChatStarted();
+      setHasStarted(true);
     }
   };
   const handleClick = async () => {
@@ -333,7 +309,7 @@ const Chatbot = ({
     if (hasStarted) return;
     if (!hasOpenedOnce) {
       await startChat("bubbleClick");
-      setChatStarted();
+      setHasStarted(true);
     }
   };
   const onSendMessage = async (msg) => {
@@ -358,27 +334,15 @@ const Chatbot = ({
     }
   };
   const onEndChat = async () => {
-    console.log(`Ending chat [end chat]`);
+    console.log("Ending chat");
     if (chatRef.current) {
-      try {
-        clientRef.current?.finishChat().then(() => {
-          console.log(`Chat finished`);
-          chatRef.current?.destroy().then(() => {
-            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");
-      }
-      return;
+      await clientRef.current?.finishChat();
+      await chatRef.current?.destroy();
+      clearMessages();
+      chatRef.current = null;
+      console.log("Chat ended");
+      setHasStarted(false);
+      endEscalation?.();
     }
   };
   const onEndAndStartNewChat = async () => {
@@ -397,7 +361,7 @@ const Chatbot = ({
     deregisterEventHandlers();
     chatLoading.current = false;
     reset();
-    resetChatStarted();
+    setHasStarted(false);
     setStatus("idle");
     clearMessages();
     endEscalation?.();
@@ -413,7 +377,7 @@ const Chatbot = ({
   };
   const onCloseAfterThankYou = async () => {
     reset();
-    resetChatStarted();
+    setHasStarted(false);
     newChatSession();
   };
   const onPreviewTyping = async (msg) => {