@axos-web-dev/shared-components 1.0.100-dev.62 → 1.0.100-dev.62-0

package/dist/Calculators/calculator.css.d.ts

@@ -2,36 +2,36 @@ export declare const calculator: string;
 export declare const calculator_description: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;
 export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/Calculators/calculator.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                               */

package/dist/CallToActionBar/CallToActionBar.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/Typography/Typography.css';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                                    */

package/dist/CallToActionBar/index.js

@@ -8,7 +8,7 @@ import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { getBannerSizeClassName } from "../utils/ctaOptions.js";
-import { sticky_banner, is_sticky, cta, cta_containment, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_body_section, cta_text, cta_h2, ctas_section } from "./CallToActionBar.css.js";
+import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_large_image, cta_h2, cta_text, ctas_section, cta_body_section, cta_containment } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
   bannerSize,
   image,

package/dist/Carousel/Carousel.css.d.ts

@@ -5,53 +5,53 @@ export declare const dots: string;
 export declare const headerCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
 export declare const carousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             border: "1px solid #E9EBEF";
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;
 export declare const descriptionCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -59,16 +59,16 @@ export declare const authorLocation: string;
 export declare const author: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -79,7 +79,7 @@ export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{}>;
 export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -87,7 +87,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         secondary: {
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -95,7 +95,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#EBEBEB";
@@ -103,7 +103,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         quaternary: {
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#EBEBEB";

package/dist/Carousel/Carousel.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/Carousel/Carousel.css';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                                    */

package/dist/Carousel/index.js

@@ -6,7 +6,7 @@ import { getVariant } from "../utils/getVariant.js";
 import { section_text } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Modal/Modal.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';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                                    */
@@ -133,7 +133,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                  */
 /* empty css                                                */
 /* empty css                                              */
-import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, carousel, slides, dots, dot } from "./Carousel.css.js";
+import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, slides, carousel, dots, dot } from "./Carousel.css.js";
 import { useCarousel } from "./store.js";
 const iconVarints = /* @__PURE__ */ new Map([
   [

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

@@ -1,3 +1,3 @@
-export declare const angle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const angle: `var(--${string})`;
 export declare const gradientBorder: string;
 export declare const gradientFocus: string;

package/dist/Chatbot/AnimatedGradientBorder.css.js

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

package/dist/Chatbot/Bubble.css.js

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

package/dist/Chatbot/Bubble.js

@@ -4,7 +4,7 @@ import { vars } from "../themes/axos.css.js";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { gradientBorder } from "./AnimatedGradientBorder.css.js";
-import { bubbleWrapper, inner, bubbleButton, svgFill, bubbleText } from "./Bubble.css.js";
+import { inner, svgFill, bubbleText, bubbleButton, bubbleWrapper } from "./Bubble.css.js";
 import { useOpenChat } from "./store/chat.js";
 const Bubble = ({
   children,

package/dist/Chatbot/ChatWindow.css.js

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

package/dist/Chatbot/ChatWindow.d.ts

@@ -24,6 +24,8 @@ interface ChatWindowProps {
     showName?: boolean;
     onNewChat?: () => void;
     onCloseAfterThankYou?: () => void;
+    isTyping?: boolean;
+    previewTyping?: (msg: string) => void;
 }
 export declare const ChatWindow: React.FC<ChatWindowProps>;
 export {};

package/dist/Chatbot/ChatWindow.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { vars } from "../themes/axos.css.js";
-/* empty css                                */
+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                                    */
@@ -10,7 +10,7 @@ import React, { useRef, useEffect } from "react";
 import { useNetworkState, useMount } from "react-use";
 import { gradientFocus } from "./AnimatedGradientBorder.css.js";
 import { ChatbotMessage } from "./ChatbotMessage.js";
-import { windowStyle, windowOpenStyle, windowBarStyle, left_bar_section, chat_title, buttonss_section, button_bar, chatbotMenu, chatbotMenuItem, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, button_reset, arrowFill, chatNetworkStatus, messagesContainerStyle, shimmerText, inputStyle, autoResize, sendButtonStyle } 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, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
 import { useOpenChat } from "./store/chat.js";
 import { ThankYouMessage } from "./ThankYouMessage.js";
@@ -32,6 +32,9 @@ const ChatWindow = ({
   showName = false,
   onCloseAfterThankYou = () => {
     console.log("Close after thank you");
+  },
+  previewTyping = (msg) => {
+    console.log("Preview typing: ", msg);
   }
 }) => {
   const { showThankyouMessage, displayThankyouMessage, toggleThankyouMessage } = useOpenChat();
@@ -86,6 +89,24 @@ const ChatWindow = ({
     setInput("");
     toggleThankyouMessage?.();
   };
+  useEffect(() => {
+    const scalationStarted = messages.some(
+      (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+        msg.event
+      )
+    );
+    if (!scalationStarted) {
+      return;
+    }
+    const sendPreview = () => {
+      const cleaned = cleanInput(input);
+      previewTyping(cleaned);
+    };
+    const intervalId = setInterval(sendPreview, 2e3);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [input, messages, previewTyping]);
   return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
     /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
       /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section) }),
@@ -136,6 +157,7 @@ const ChatWindow = ({
         /* @__PURE__ */ jsx(
           "button",
           {
+            disabled: messages.length === 0,
             onClick: () => {
               setMenuOpen(!menuOpen);
             },
@@ -417,7 +439,11 @@ const ChatWindow = ({
           showAvatar,
           showName,
           virtualAgent,
-          onCancelEndChat
+          onCancelEndChat,
+          onEndChat: () => {
+            endChat();
+            onCloseAfterThankYou();
+          }
         },
         msg?.$index
       )),

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,4 @@
-/* empty css                           */
+import '../assets/Chatbot/Chatbot.css';/* empty css                           */
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Chatbot/Chatbot.js

@@ -6,7 +6,7 @@ import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { useMount, useUnmount } from "react-use";
 const Chatbot = ({
   project = "axos",
@@ -26,6 +26,20 @@ const Chatbot = ({
   const [hasStarted, setHasStarted] = useState(false);
   const [menusLoaded, setMenusLoaded] = useState(false);
   const [pendingStart, setPendingStart] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [scalationStarted, setScalationStarted] = useState(false);
+  useEffect(() => {
+    if (messages.length === 0) return;
+    const hasScalation = messages.some(
+      (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+        msg.event
+      )
+    );
+    setScalationStarted(hasScalation);
+    return () => {
+      setScalationStarted(false);
+    };
+  }, [messages]);
   const brandMap = /* @__PURE__ */ new Map([
     ["axos", 1],
     ["ufb", 3]
@@ -33,8 +47,7 @@ const Chatbot = ({
   const typingMessage = {
     $sid: "typing-1",
     type: "system",
-    // or a custom type like "typing"
-    text: "AI is typing...",
+    text: scalationStarted ? "Typing" : "AI is typing...",
     sender: { id: "system", type: "system" },
     $timestamp: /* @__PURE__ */ new Date(),
     $userType: "system",
@@ -78,12 +91,31 @@ const Chatbot = ({
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
     addMessage(message);
-    if (!["virtual_agent", "system"].includes(message.$userType)) {
-      addMessage(typingMessage);
+    const eventName = message?.event;
+    switch (eventName) {
+      case "escalationAccepted":
+        setScalationStarted(true);
+        return;
+      case "escalationStarted":
+        setScalationStarted(true);
+        return;
+      default:
+        if (["end_user"].includes(message.$userType)) {
+          console.log("ai thiunk", message?.$userType, scalationStarted);
+          if (!scalationStarted) {
+            addMessage(typingMessage);
+          }
+        }
+        return;
     }
   };
   const onChatTypingStartedHandler = async (identity) => {
     console.log("Typing started by:", identity);
+    setIsTyping(true);
+  };
+  const onChatTypingEndedHandler = async (identity) => {
+    console.log("Typing ended by:", identity);
+    setIsTyping(false);
   };
   const onChatDisconnectedHandler = async () => {
     console.log("Chat disconnected");
@@ -111,12 +143,20 @@ const Chatbot = ({
     const messages2 = await clientRef.current?.fetchMessages();
     if (messages2) {
       addMessages(messages2);
+      setScalationStarted(
+        messages2.some(
+          (msg) => msg.$userType === "user" || ["escalationAccepted", "escalationStarted"].includes(
+            msg.event
+          )
+        )
+      );
     }
   };
   const registerEventHandlers = () => {
     clientRef.current?.on("chat.ongoing", onChatOngoingHandler);
     clientRef.current?.on("chat.message", onChatMessageHandler);
     clientRef.current?.on("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.on("chat.typingEnded", onChatTypingEndedHandler);
     clientRef.current?.on("chat.disconnected", onChatDisconnectedHandler);
     clientRef.current?.on("chat.dismissed", onDismissedHandler);
     clientRef.current?.on("chat.timeout", onTimeoutHandler);
@@ -131,6 +171,7 @@ const Chatbot = ({
     clientRef.current?.off("chat.ongoing", onDismissedHandler);
     clientRef.current?.off("chat.message", onChatMessageHandler);
     clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
+    clientRef.current?.off("chat.typingEnded", onChatTypingEndedHandler);
     clientRef.current?.off("chat.disconnected", onChatDisconnectedHandler);
     clientRef.current?.off("chat.dismissed", onDismissedHandler);
     clientRef.current?.off("chat.timeout", onTimeoutHandler);
@@ -150,6 +191,9 @@ const Chatbot = ({
       tenant: process.env.CCAI_TENANT_NAME || "",
       host: process.env.CCAI_HOST || "",
       // or your region
+      // companyId: import.meta.env.VITE_COMPANY_ID || "",
+      // tenant: import.meta.env.VITE_TENANT_NAME || "",
+      // host: import.meta.env.VITE_HOST || "", // or your region
       authenticate
     });
     client?.on("ready", onReadyHandler);
@@ -210,7 +254,7 @@ const Chatbot = ({
       setHasStarted(true);
     }
   };
-  const onSendMessage = (msg) => {
+  const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
     clientRef.current?.sendTextMessage(msg);
   };
@@ -262,6 +306,16 @@ const Chatbot = ({
     reset();
     setHasStarted(false);
   };
+  const onPreviewTyping = useCallback(async (msg) => {
+    console.log("Preview typing message:", msg);
+    try {
+      if (clientRef.current) {
+        clientRef.current?.sendPreviewMessage(msg);
+      }
+    } catch (error) {
+      console.error("Error sending preview message:", error);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
     /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
     /* @__PURE__ */ jsx(
@@ -274,7 +328,9 @@ const Chatbot = ({
         endChat: onEndChat,
         onClose,
         onNewChat: onEndAndStartNewChat,
-        onCloseAfterThankYou
+        onCloseAfterThankYou,
+        previewTyping: onPreviewTyping,
+        isTyping
       }
     )
   ] });

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -11,6 +11,7 @@ interface ChatbotMessageProps {
     virtualAgent?: VirtualAgent | null;
     onCancelEndChat?: () => void;
     onSend?: (content: string) => void;
+    onEndChat?: () => void;
 }
 export declare const ChatbotMessage: FC<ChatbotMessageProps>;
 export {};

package/dist/Chatbot/ChatbotMessage.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { vars } from "../themes/axos.css.js";
-/* empty css                                */
+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                                    */
@@ -24,6 +24,7 @@ const ChatbotMessage = ({
   showName,
   virtualAgent,
   onCancelEndChat,
+  onEndChat,
   onSend
 }) => {
   const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
@@ -196,7 +197,7 @@ const ChatbotMessage = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
+      /* @__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",

package/dist/Chatbot/ThankYouMessage.js

@@ -1,11 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { vars } from "../themes/axos.css.js";
-/* empty css                                */
+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 { chatEndDialogOverlay, thankyou_overlay, chatFinishDialog, thankyou_message, thankyou_image, endChatButtonStyle, noAnswerButton } from "./ChatWindow.css.js";
+import { thankyou_image, endChatButtonStyle, noAnswerButton, chatFinishDialog, thankyou_message, chatEndDialogOverlay, thankyou_overlay } from "./ChatWindow.css.js";
 const ThankYouMessage = ({
   showEndChatDialog = false,
   onClose,

package/dist/Chevron/Chevron.css.d.ts

@@ -1,20 +1,20 @@
 export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    textDecorationColor: `var(--${string})`;
                 };
             };
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    textDecorationColor: `var(--${string})`;
                 };
             };
         };

package/dist/Chevron/Chevron.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/Chevron/Chevron.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                               */

package/dist/Chevron/index.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';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                                    */
@@ -15,7 +15,7 @@ import { getVariant } from "../utils/getVariant.js";
 import { useState } from "react";
 import "../Article/Article.css.js";
 import { Interstitial } from "../Interstitial/Interstitial.js";
-import { chevron_wrapper, chevron } from "./Chevron.css.js";
+import { chevron, chevron_wrapper } from "./Chevron.css.js";
 /* empty css                                */
 import { useGlobalContext } from "../Modal/contextApi/store.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";

package/dist/CollectInformationAlert/CollectInformationAlert.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                               */

package/dist/CollectInformationAlert/index.js

@@ -7,7 +7,7 @@ import { Hyperlink } from "../Hyperlink/index.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCloseIcon from "../icons/CloseIcon/index.js";
-/* empty css                                */
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';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                                    */