@axos-web-dev/shared-components 2.0.0-dev.14 → 2.0.0-dev.16

package/dist/Calculators/SummitApyCalculator/BalanceAPYCalculator.css.d.ts

@@ -15,32 +15,32 @@ export declare const summit_calc_text: string;
 export declare const summit_description_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;
 export declare const summit_calc_disclosure: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         quaternary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js

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

package/dist/Calculators/SummitApyCalculator/index.js

@@ -8,7 +8,7 @@ import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../../icons/AxosX/index.js";
 import SvgComponent from "../../icons/AxosX/Blue.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-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                                  */
 /* empty css                                       */
@@ -19,7 +19,7 @@ import { headerCell } from "../../Table/Table.css.js";
 import { getVariant } from "../../utils/getVariant.js";
 import { useGlobalContext } from "../../Modal/contextApi/store.js";
 import clsx from "clsx";
-import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_table_container, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
+import { summit_container, summit_calc_icon, summit_header_container, summit_header_calc, summit_calc_text, summit_description_text, summit_table_container, summit_calculator_wrapper, summit_input_container, summit_input_label, summit_d_label, summit_m_label, summit_calculator_input, summit_calculator_button, focus_row, summit_calc_disclosure } from "./BalanceAPYCalculator.css.js";
 const SummitApyCalculator = ({
   headline,
   bodyCopy,

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

package/dist/Calculators/calculator.css.js

@@ -1,4 +1,4 @@
-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                                   */
 /* empty css                               */

package/dist/CallToActionBar/CallToActionBar.css.js

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

package/dist/Carousel/Carousel.css.js

@@ -1,4 +1,4 @@
-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                               */
 /* 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";
-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/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.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/Bubble.css';import '../assets/Chatbot/Chatbot.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/Modal/Modal.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                               */
 /* empty css                                    */
@@ -128,7 +128,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                  */
 /* empty css                                                */
 /* empty css                                              */
-import { icon, quoteSetContainer, headerCarousel, descriptionCarousel, slides, carousel, slide, authorLocation, author, dots, dot } from "./Carousel.css.js";
+import { icon, slide, authorLocation, author, quoteSetContainer, headerCarousel, descriptionCarousel, carousel, slides, dots, dot } from "./Carousel.css.js";
 import { useCarousel } from "./store.js";
 const iconVarints = /* @__PURE__ */ new Map([
   [

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

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

package/dist/Chatbot/AnimatedGradientBorder.css.js

@@ -1,4 +1,4 @@
-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                               */
 /* empty css                                    */

package/dist/Chatbot/Bubble.css.js

@@ -1,4 +1,4 @@
-import '../assets/Chatbot/Bubble.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                               */
 /* 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, gradientBorderUfb } from "./AnimatedGradientBorder.css.js";
-import { inner, svgFill, bubbleText, bubbleButton, bubbleWrapper } from "./Bubble.css.js";
+import { bubbleWrapper, inner, bubbleButton, svgFill, bubbleText } from "./Bubble.css.js";
 import { useOpenChat } from "./store/chat.js";
 const Bubble = ({
   children,

package/dist/Chatbot/ChatWindow.css.js

@@ -1,4 +1,4 @@
-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                               */
 /* empty css                                    */

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";
-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                               */
 /* 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 { 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 { 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 { EllipsisIcon } from "./EllipsisIcon.js";
 import { useOpenChat } from "./store/chat.js";
 import { ThankYouMessage } from "./ThankYouMessage.js";
@@ -43,7 +43,8 @@ const ChatWindow = ({
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
-    isOpen
+    isOpen,
+    hasOpenedOnce
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -398,7 +399,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(),
@@ -425,23 +426,28 @@ const ChatWindow = ({
           )
         }
       ),
-      messages?.map((msg) => /* @__PURE__ */ jsx(
-        ChatbotMessage,
-        {
-          msg,
-          onSend,
-          showAvatar,
-          showName,
-          virtualAgent,
-          onCancelEndChat,
-          onEndChat: () => {
-            endChat();
-            onCloseAfterThankYou();
+      messages?.map((msg) => {
+        if (!hasOpenedOnce) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          ChatbotMessage,
+          {
+            msg,
+            onSend,
+            showAvatar,
+            showName,
+            virtualAgent,
+            onCancelEndChat,
+            onEndChat: () => {
+              endChat();
+              onCloseAfterThankYou();
+            },
+            inputRef
           },
-          inputRef
-        },
-        msg?.$index
-      )),
+          msg?.$index
+        );
+      }),
       showReconnect && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/Chatbot/Chatbot.css.js

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

package/dist/Chatbot/Chatbot.js

@@ -39,13 +39,11 @@ const Chatbot = ({
   const clientRef = useRef(null);
   const menuRef = useRef(null);
   const isMountedRef = useRef(false);
-  const hasLoadedBefore = useRef(true);
   const chatRef = useRef(null);
   const agent_virtual = useRef(null);
   const [status, setStatus] = useState("idle");
   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(() => {
@@ -100,6 +98,9 @@ const Chatbot = ({
       menuRef.current = await clientRef.current.getMenus();
       setMenusLoaded(true);
       console.log("menus:", menuRef.current);
+      if (menuRef.current !== null) {
+        await startChat();
+      }
     }
   };
   const onAuthenticatedHandler = async () => {
@@ -260,9 +261,10 @@ const Chatbot = ({
     return;
   };
   const startChat = async () => {
-    console.log("Starting chat");
+    console.log("Starting chat", chatRef.current);
     const client = clientRef.current;
     if (!client) return;
+    if (hasStarted) return;
     if (!menuRef.current || !menuRef.current.menus) {
       let waited = 0;
       while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
@@ -275,19 +277,26 @@ const Chatbot = ({
       }
     }
     try {
+      console.log("menus: ->", menuRef.current);
       const ongoingChat = await client.loadOngoingChat();
+      console.log("theres a ongoing chat?: -->", ongoingChat);
       if (ongoingChat) {
         console.log("Ongoing chat found:", ongoingChat);
         console.log("Resuming chat:", ongoingChat.id);
-        chatRef.current = await client.resumeChat(ongoingChat.id);
+        chatRef.current = ongoingChat;
         agent_virtual.current = ongoingChat.agent;
         return;
       }
+      console.log("not ongoing chat ");
+      console.log(!!ongoingChat);
       const foundMenu = menuRef.current.menus.find(
         (menu) => menu.name === menuOption
       );
       const menuId = foundMenu && foundMenu.id;
       console.log("Creating new chat with menu ID:", menuId);
+      if (!foundMenu) {
+        throw new Error("Menu not found: " + menuOption);
+      }
       const newChat = await client.createChat(menuId, { custom_data });
       if (newChat !== null) {
         chatRef.current = newChat;
@@ -297,6 +306,7 @@ const Chatbot = ({
     } catch (err) {
       console.error("Error creating chat:", err);
     } finally {
+      setHasStarted(true);
       if (clientRef?.current?.chat?.state?.status == "va_assigned") {
         const OriginalAudio = window.Audio;
         class PatchedAudio extends OriginalAudio {
@@ -312,10 +322,6 @@ const Chatbot = ({
   const handleClick = async () => {
     toggle();
     if (hasStarted) return;
-    if (!menusLoaded) {
-      setPendingStart(true);
-      return;
-    }
     if (!hasOpenedOnce) {
       await startChat();
       setHasStarted(true);
@@ -356,17 +362,9 @@ const Chatbot = ({
     isMountedRef.current = true;
     await createClient();
   });
-  useEffect(() => {
-    if (menusLoaded && pendingStart && !hasStarted) {
-      startChat();
-      setPendingStart(false);
-    }
-  }, [menusLoaded, pendingStart, hasStarted]);
   useUnmount(() => {
     console.log("Chatbot unmounted");
     deregisterEventHandlers();
-    isMountedRef.current = false;
-    hasLoadedBefore.current = true;
     reset();
     setHasStarted(false);
     setStatus("idle");
@@ -379,9 +377,13 @@ const Chatbot = ({
   const onClose = () => {
     toggle();
   };
-  const onCloseAfterThankYou = () => {
+  const newChatSession = async () => {
+    console.log("create new session");
+  };
+  const onCloseAfterThankYou = async () => {
     reset();
     setHasStarted(false);
+    newChatSession();
   };
   const onPreviewTyping = async (msg) => {
     console.log("Preview typing message:", msg);

package/dist/Chatbot/ChatbotMessage.js

@@ -4,12 +4,12 @@ import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 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                               */
 /* empty css                                    */
 import clsx from "clsx";
-import { shimmerText, notificationStyle, trMortgageTable, tableCell, tableHead, tableMsg, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
+import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, tableMsg, tableHead, tableCell, trMortgageTable, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
 import { useOpenChat } from "./store/chat.js";
 function timeAgo(date) {
   const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);

package/dist/Chatbot/ThankYouMessage.js

@@ -1,11 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 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                               */
 /* empty css                                    */
 import { clsx } from "clsx";
-import { thankyou_image, endChatButtonStyle, noAnswerButton, chatFinishDialog, thankyou_message, chatEndDialogOverlay, thankyou_overlay } from "./ChatWindow.css.js";
+import { chatEndDialogOverlay, thankyou_overlay, chatFinishDialog, thankyou_message, thankyou_image, endChatButtonStyle, noAnswerButton } 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})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: `var(--${string})`;
+                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
         };
         secondary: {
-            color: `var(--${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: `var(--${string})`;
+                    textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
         };

package/dist/Chevron/Chevron.css.js

@@ -1,4 +1,4 @@
-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                                   */
 /* empty css                               */