@axos-web-dev/shared-components 2.0.0-queryparams.1 → 2.1.0

package/dist/Chatbot/Chat.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { authenticate } from "./authenticate.js";
 import { useMessages } from "./store/messages.js";
-const companyId = process.env.CCAI_COMPANY_ID || "";
-const tenant = process.env.CCAI_TENANT_NAME || "";
-const host = process.env.CCAI_HOST || "";
+const companyId = "";
+const tenant = "";
+const host = "";
+const authUrl = "";
 const COBROWSE_CONSENT_TEMPLATE = `
   <script class="cobrowse-template" type="text/template">
     <div class="cobrowse">
@@ -32,8 +32,7 @@ function Chat() {
     let memberJoinedHandler;
     let chatConnectedHandler;
     async function initChat() {
-      const { Client, consoleLoggerHandler, Logger } = await import("@ujet/websdk-headless");
-      Logger.addHandler(consoleLoggerHandler);
+      const { Client } = await import("@ujet/websdk-headless");
       clientRef.current = new Client({
         companyId,
         tenant,
@@ -53,7 +52,18 @@ function Chat() {
           }
         },
         host,
-        authenticate
+        authenticate: async () => {
+          const res = await fetch(authUrl, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json"
+            }
+          });
+          const data = await res.json();
+          return {
+            token: data.token
+          };
+        }
       });
       const menus = await clientRef.current?.getMenus();
       try {

package/dist/Chatbot/ChatWindow.css.d.ts

@@ -34,3 +34,7 @@ export declare const chatEndCircle: string;
 export declare const user_msg: string;
 export declare const agent_msg: string;
 export declare const shimmerText: string;
+export declare const tableMsg: string;
+export declare const tableHead: string;
+export declare const tableCell: string;
+export declare const trMortgageTable: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -4,37 +4,41 @@ import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css'
 /* empty css                                    */
 /* empty css                           */
 /* empty css                              */
-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";
+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";
 export {
   agent_msg,
   arrowFill,
@@ -60,9 +64,13 @@ export {
   notificationStyle,
   sendButtonStyle,
   shimmerText,
+  tableCell,
+  tableHead,
+  tableMsg,
   thankyou_image,
   thankyou_message,
   thankyou_overlay,
+  trMortgageTable,
   user_msg,
   windowBarStyle,
   windowOpenStyle,

package/dist/Chatbot/ChatWindow.js

@@ -1,14 +1,15 @@
 "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 } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
@@ -39,11 +40,13 @@ const ChatWindow = ({
 }) => {
   const {
     showThankyouMessage,
-    displayThankyouMessage,
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
-    isOpen
+    isOpen,
+    hasOpenedOnce,
+    chatStatus,
+    setChatStatus
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -52,6 +55,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]);
@@ -82,9 +86,6 @@ const ChatWindow = ({
   useEffect(() => {
     autoResizeTextarea();
   }, [input]);
-  const displayThankYouScreen = () => {
-    displayThankyouMessage();
-  };
   const onCancelEndChat = () => {
     setShowEndChatDialog(false);
     toggleThankyouMessage?.();
@@ -96,6 +97,11 @@ const ChatWindow = ({
     setInput("");
     toggleThankyouMessage?.();
   };
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [messages]);
   return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
     /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
       /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section) }),
@@ -159,7 +165,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(
@@ -191,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: "#1E3860"
+                          fill: vars.chatbot.window.headerText
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -200,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: "#1E3860"
+                          fill: vars.chatbot.window.headerText
                         }
                       )
                     ] }),
@@ -287,7 +293,7 @@ const ChatWindow = ({
                       type: "submit",
                       onClick: () => {
                         endChat();
-                        displayThankYouScreen();
+                        setChatStatus("ending");
                         setShowEndChatDialog(false);
                       },
                       children: "Yes, End Chat"
@@ -310,6 +316,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,
           {
@@ -393,7 +438,7 @@ const ChatWindow = ({
       }
     ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-      (status === "idle" || messages.length == 0) && /* @__PURE__ */ jsx(
+      (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__PURE__ */ jsx(
         "div",
         {
           className: clsx(),
@@ -413,29 +458,35 @@ const ChatWindow = ({
                 fontSize: 14,
                 display: "flex",
                 flexDirection: "column",
-                gap: 4
+                gap: 16
               },
-              children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "AI thinking..." })
+              children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
             }
           )
         }
       ),
-      messages?.map((msg) => /* @__PURE__ */ jsx(
-        ChatbotMessage,
-        {
-          msg,
-          onSend,
-          showAvatar,
-          showName,
-          virtualAgent,
-          onCancelEndChat,
-          onEndChat: () => {
-            endChat();
-            onCloseAfterThankYou();
-          }
-        },
-        msg?.$index
-      )),
+      messages?.map((msg) => {
+        if (!hasOpenedOnce) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          ChatbotMessage,
+          {
+            msg,
+            onSend,
+            showAvatar,
+            showName,
+            virtualAgent,
+            onCancelEndChat,
+            onEndChat: () => {
+              endChat();
+              onCloseAfterThankYou();
+            },
+            inputRef
+          },
+          msg?.$index
+        );
+      }),
       showReconnect && /* @__PURE__ */ jsx(
         "button",
         {
@@ -447,71 +498,88 @@ 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__ */ 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"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) }) })
+    /* @__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"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
   ] });
 };
 export {

package/dist/Chatbot/Chatbot.d.ts

@@ -2,9 +2,17 @@ export type ChatbotProps = {
     project?: "axos" | "ufb";
     debug?: boolean;
 };
-export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
-    project?: "axos" | "ufb";
+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;
+    config: InitalizeChatbot;
 }) => false | import("react/jsx-runtime").JSX.Element;
+export {};