@axos-web-dev/shared-components 2.2.7-2 → 2.2.8

package/dist/Chatbot/ChatWindow.js

@@ -1,16 +1,17 @@
 "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, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { useNetworkState, useMount } from "react-use";
-import { gradientFocus } from "./AnimatedGradientBorder.css.js";
+import { focusAnimation, 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, windowExpandedStyle } from "./ChatWindow.css.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, formTextButton, inputStyle, autoResize, sendButtonStyle, chatAiDisclaimer, windowStyle, windowOpenStyle, windowExpandedStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
 import { ExpandChatToggle } from "./ExpandChatToggle.js";
 import { useOpenChat } from "./store/chat.js";
@@ -40,12 +41,13 @@ const ChatWindow = ({
 }) => {
   const {
     showThankyouMessage,
-    displayThankyouMessage,
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
     isOpen,
     hasOpenedOnce,
+    chatStatus,
+    setChatStatus,
     isWindowExpanded,
     toggleWindowExpanded
   } = useOpenChat();
@@ -56,6 +58,7 @@ 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,9 +89,6 @@ const ChatWindow = ({
   useEffect(() => {
     autoResizeTextarea();
   }, [input]);
-  const displayThankYouScreen = () => {
-    displayThankyouMessage();
-  };
   const onCancelEndChat = () => {
     setShowEndChatDialog(false);
     toggleThankyouMessage?.();
@@ -182,7 +182,7 @@ const ChatWindow = ({
                   alignContent: "center",
                   background: menuOpen ? "#0000000f" : void 0
                 },
-                children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+                children: /* @__PURE__ */ jsx(EllipsisIcon, { color: vars.chatbot.window.headerText })
               }
             ),
             menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsxs(
@@ -214,7 +214,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: "#1E3860"
+                              fill: vars.chatbot.window.headerText
                             }
                           ),
                           /* @__PURE__ */ jsx(
@@ -223,7 +223,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: "#1E3860"
+                              fill: vars.chatbot.window.headerText
                             }
                           )
                         ] }),
@@ -310,7 +310,7 @@ const ChatWindow = ({
                           type: "submit",
                           onClick: () => {
                             endChat();
-                            displayThankYouScreen();
+                            setChatStatus("ending");
                             setShowEndChatDialog(false);
                           },
                           children: "Yes, End Chat"
@@ -333,6 +333,45 @@ 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,
               {
@@ -436,7 +475,7 @@ const ChatWindow = ({
                     fontSize: 14,
                     display: "flex",
                     flexDirection: "column",
-                    gap: 4
+                    gap: 16
                   },
                   children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
                 }
@@ -476,71 +515,94 @@ const ChatWindow = ({
           ),
           /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
         ] }),
-        /* @__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__ */ jsxs("div", { style: { padding: "16px 16px 24px 16px" }, children: [
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  focused && !inputDisabled && !isBlockedInput ? focusAnimation : ""
+                ),
+                style: {
+                  position: "absolute",
+                  left: "10%",
+                  width: "80%",
+                  height: "40px",
+                  zIndex: "-1"
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: clsx(
-                    sendButtonStyle,
-                    input.trim().length > 0 && "active"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: formTextButton,
+                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
+                    }
                   ),
-                  type: "submit",
-                  title: "Send message",
-                  disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
+                  /* @__PURE__ */ jsx(
+                    "button",
                     {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 16 16",
-                      fill: "none",
+                      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(
-                        "path",
+                        "svg",
                         {
-                          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"
+                          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("p", { className: chatAiDisclaimer, children: "Evo is AI and can make mistakes. Verify important details." })
+        ] })
       ]
     }
   );

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,4 @@
-import '../assets/Chatbot/Chatbot.css';/* empty css                           */
+import "./Chatbot.css.ts.vanilla.css.js";
 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

@@ -17,5 +17,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

@@ -13,6 +13,9 @@ import { useMessages } from "./store/messages.js";
 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",
@@ -28,7 +31,13 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    blockInput
+    blockInput,
+    hasStarted,
+    setChatStarted,
+    resetChatStarted,
+    setChatStatus,
+    displayThankyouMessage,
+    hideDisplayThankyouMessage
   } = useOpenChat();
   const isVisible = usePageVisibility();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
@@ -39,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);
@@ -69,7 +77,7 @@ const Chatbot = ({
     $index: -10,
     $userId: 0
   };
-  const custom_data = {
+  const custom_data = () => ({
     unsigned: {
       facingBrandId: {
         label: "facingBrandId",
@@ -86,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) {
@@ -230,9 +242,6 @@ 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,
@@ -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,7 +328,7 @@ const Chatbot = ({
       console.error("Error creating chat:", err);
     } finally {
       chatLoading.current = false;
-      setHasStarted(true);
+      setChatStarted();
     }
   };
   const handleClick = async () => {
@@ -318,7 +337,7 @@ const Chatbot = ({
     if (hasStarted) return;
     if (!hasOpenedOnce) {
       await startChat("bubbleClick");
-      setHasStarted(true);
+      setChatStarted();
     }
   };
   const onSendMessage = async (msg) => {
@@ -343,15 +362,27 @@ 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 {
+        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;
     }
   };
   const onEndAndStartNewChat = async () => {
@@ -370,7 +401,7 @@ const Chatbot = ({
     deregisterEventHandlers();
     chatLoading.current = false;
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     setStatus("idle");
     clearMessages();
     endEscalation?.();
@@ -386,7 +417,7 @@ const Chatbot = ({
   };
   const onCloseAfterThankYou = async () => {
     reset();
-    setHasStarted(false);
+    resetChatStarted();
     newChatSession();
   };
   const onPreviewTyping = async (msg) => {
@@ -413,6 +444,36 @@ const Chatbot = ({
       }
     }
   }, [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",
     {