@axos-web-dev/shared-components 2.0.0-queryparams.2 → 2.2.0

package/dist/Calculators/Calculator.d.ts

@@ -16,4 +16,4 @@ export interface CalculatorProps {
     initialBalance?: number;
     callToActionRow?: ChevronProps[];
 }
-export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calculator: (props: CalculatorProps) => React.JSX.Element;

package/dist/Calculators/Calculator.js

@@ -39,7 +39,7 @@ import { ApyCalculator } from "./ApyCalculator/index.js";
 import { AxosOneCalculator } from "./AxosOneCalculator/index.js";
 import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
 import { BuyDownCalculator } from "./BuyDownCalculator/index.js";
-import { calculator_headline, calculator_description } from "./calculator.css.js";
+import { calculator_headline, calculator_description, calculator } from "./calculator.css.js";
 import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
 import { MarineLoanMonthlyPaymentCalculator } from "./MarineLoanMonthlyPaymentCalculator/index.js";
 import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
@@ -52,16 +52,15 @@ import "../Carousel/index.js";
 /* empty css                                                   */
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
-import "../Chatbot/authenticate.js";
-/* empty css                                    */
 import "react-use";
+/* empty css                                    */
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
-import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";
@@ -271,7 +270,7 @@ const Calculator = (props) => {
       }
     );
   } else {
-    return /* @__PURE__ */ jsx("section", { id, children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+    return /* @__PURE__ */ jsx("section", { id, className: clsx(calculator({ variant })), children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
       /* @__PURE__ */ jsxs("div", { children: [
         icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
         /* @__PURE__ */ jsx(

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -27,6 +27,7 @@ import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import { useGlobalContext } from "../../Modal/contextApi/store.js";
+import "next/image.js";
 import "../../Table/Table.css.js";
 import "../AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
@@ -74,15 +75,13 @@ import "../../Carousel/index.js";
 /* empty css                                                      */
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
-import "../../Chatbot/authenticate.js";
 /* empty css                                       */
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */
 import "../../Comparison/Comparison.css.js";
-import "next/image.js";
-import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/LargeBanner.css.js";
+import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";
 import "../../SetContainer/SetContainer.css.js";
 import "../../Tab/Tab.css.js";

package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.js

@@ -108,7 +108,7 @@ const MarineLoanMonthlyPaymentCalculator = ({ variant, header, disclosure, bodyC
       setEstimatedPayment(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator({ variant: fullVariant })), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -111,7 +111,7 @@ const MaxLoanCalculator = ({
       setLoanAmount(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator({ variant: fullVariant })), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -110,7 +110,7 @@ const MonthlyPaymentCalculator = ({
       setEstimatedPayment(0);
     }
   };
-  return /* @__PURE__ */ jsx("section", { className: clsx(calculator), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { className: clsx(calculator({ variant: fullVariant })), children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `rounded ${calc_container} ${container({ variant: fullVariant })}`,

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

@@ -1,4 +1,24 @@
-export declare const calculator: string;
+export declare const calculator: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            marginInline: "auto";
+            paddingBlock: "2.5rem";
+            selectors: {
+                ".page_body_contents > div:not(:first-child) &": {
+                    paddingTop: "0px";
+                };
+            };
+            "@media": {
+                "screen and (max-width: 768px)": {
+                    paddingBlock: "1.5rem";
+                };
+            };
+        };
+        secondary: {};
+        tertiary: {};
+        quaternary: {};
+    };
+}>;
 export declare const calculator_description: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {

package/dist/Calculators/calculator.css.js

@@ -5,9 +5,9 @@ import '../assets/Calculators/calculator.css';import '../assets/themes/victorie.
 /* empty css                                    */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var calculator = "iois7n0";
-var calculator_description = createRuntimeFn({ defaultClassName: "iois7n1", variantClassNames: { variant: { primary: "iois7n2", secondary: "iois7n3", tertiary: "iois7n4", quaternary: "iois7n5" } }, defaultVariants: {}, compoundVariants: [] });
-var calculator_headline = createRuntimeFn({ defaultClassName: "iois7n6", variantClassNames: { variant: { primary: "iois7n7", secondary: "iois7n8", tertiary: "iois7n9", quaternary: "iois7na" } }, defaultVariants: {}, compoundVariants: [] });
+var calculator = createRuntimeFn({ defaultClassName: "iois7n0", variantClassNames: { variant: { primary: "iois7n1", secondary: "iois7n2", tertiary: "iois7n3", quaternary: "iois7n4" } }, defaultVariants: { variant: "primary" }, compoundVariants: [] });
+var calculator_description = createRuntimeFn({ defaultClassName: "iois7n5", variantClassNames: { variant: { primary: "iois7n6", secondary: "iois7n7", tertiary: "iois7n8", quaternary: "iois7n9" } }, defaultVariants: {}, compoundVariants: [] });
+var calculator_headline = createRuntimeFn({ defaultClassName: "iois7na", variantClassNames: { variant: { primary: "iois7nb", secondary: "iois7nc", tertiary: "iois7nd", quaternary: "iois7ne" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   calculator,
   calculator_description,

package/dist/Carousel/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { default as React, PropsWithChildren, ReactNode } from 'react';
 import { carouselVariants } from './Carousel.css';
 
 export interface SlideProps extends PropsWithChildren {
@@ -17,5 +17,5 @@ export interface CarouselProps extends PropsWithChildren {
     description?: ReactNode;
     internalName?: string;
 }
-export declare const CarouselSlide: (props: SlideProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;
-export declare const Carousel: (props: CarouselProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselSlide: (props: SlideProps & carouselVariants) => React.JSX.Element;
+export declare const Carousel: (props: CarouselProps & carouselVariants) => React.JSX.Element;

package/dist/Carousel/index.js

@@ -24,8 +24,9 @@ import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
 import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
-import "../Button/Button.css.js";
 import "../Modal/contextApi/store.js";
+import "next/image.js";
+import "../Button/Button.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
 import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
@@ -75,15 +76,13 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                   */
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
-import "../Chatbot/authenticate.js";
 /* empty css                                    */
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
-import "next/image.js";
-import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";

package/dist/Chatbot/Bubble.d.ts

@@ -2,4 +2,5 @@ import { PropsWithChildren } from 'react';
 
 export declare const Bubble: ({ children, onClick, }: PropsWithChildren & {
     onClick?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+    project: "axos" | "ufb" | "Axos" | "Ufb";
+}) => import("react").JSX.Element;

package/dist/Chatbot/Chat.d.ts

@@ -1 +1 @@
-export default function Chat(): import("react/jsx-runtime").JSX.Element;
+export default function Chat(): import("react").JSX.Element;

package/dist/Chatbot/ChatWindow.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);
@@ -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) }),
@@ -393,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(),
@@ -415,27 +421,33 @@ const ChatWindow = ({
                 flexDirection: "column",
                 gap: 4
               },
-              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",
         {

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;
-}) => false | import("react/jsx-runtime").JSX.Element;
+    config: InitalizeChatbot;
+}) => false | import("react").JSX.Element;
+export {};

package/dist/Chatbot/Chatbot.js

@@ -1,18 +1,17 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { authenticate } from "./authenticate.js";
+import { useRef, useState, useEffect } from "react";
+import { useMount, useUnmount } from "react-use";
 import { Bubble } from "./Bubble.js";
-import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
+import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
-import { useRef, useState, useEffect } from "react";
-import { useMount, useUnmount } from "react-use";
 const Chatbot = ({
   project = "axos",
   projectEnv = "dev",
   menuOption = "Support Virtual Agent",
-  debug = false
+  config
 }) => {
   const {
     hasOpenedOnce,
@@ -28,13 +27,12 @@ const Chatbot = ({
   const clientRef = useRef(null);
   const menuRef = useRef(null);
   const isMountedRef = useRef(false);
-  const hasLoadedBefore = useRef(true);
   const chatRef = useRef(null);
+  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 [pendingStart, setPendingStart] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const [scalationStarted, setScalationStarted] = useState(false);
   useEffect(() => {
@@ -89,6 +87,9 @@ const Chatbot = ({
       menuRef.current = await clientRef.current.getMenus();
       setMenusLoaded(true);
       console.log("menus:", menuRef.current);
+      if (menuRef.current !== null) {
+        await startChat("onReady");
+      }
     }
   };
   const onAuthenticatedHandler = async () => {
@@ -219,20 +220,27 @@ const Chatbot = ({
     clientRef.current?.off("chat.connected", onChatConnectedHandler);
   };
   const createClient = async () => {
-    const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
-    if (projectEnv !== "prod" || debug) {
-      Logger.addHandler(consoleLoggerHandler);
-    }
+    const { Client } = await import("@ujet/websdk-headless");
     if (clientRef.current) return;
+    console.log({
+      config
+    });
     const client = new Client({
-      companyId: process.env.CCAI_COMPANY_ID || "",
-      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
+      companyId: config.companyId,
+      tenant: config.tenantName,
+      host: config.host,
+      authenticate: async () => {
+        const res = await fetch(config.authUrl, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        const data = await res.json();
+        return {
+          token: data.token
+        };
+      }
     });
     client?.on("ready", onReadyHandler);
     client?.on("authenticated", onAuthenticatedHandler);
@@ -241,35 +249,48 @@ const Chatbot = ({
     registerEventHandlers();
     return;
   };
-  const startChat = async () => {
-    console.log("Starting chat");
+  const startChat = async (source) => {
     const client = clientRef.current;
     if (!client) return;
-    if (!menuRef.current || !menuRef.current.menus) {
-      let waited = 0;
-      while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
-        await new Promise((res) => setTimeout(res, 100));
-        waited += 100;
-      }
-      if (!menuRef.current || !menuRef.current.menus) {
-        console.error("Menu not loaded, cannot start chat");
-        return;
-      }
+    if (hasStarted) return;
+    if (chatLoading.current) {
+      console.log(`startChat skipped [${source}] — already in progress`);
+      return;
     }
     try {
+      console.log(`Starting chat [${source}]`, chatRef.current);
+      chatLoading.current = true;
+      if (!menuRef.current || !menuRef.current.menus) {
+        let waited = 0;
+        while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
+          await new Promise((res) => setTimeout(res, 100));
+          waited += 100;
+        }
+        if (!menuRef.current || !menuRef.current.menus) {
+          console.error("Menu not loaded, cannot start chat");
+          return;
+        }
+      }
+      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;
@@ -278,22 +299,30 @@ const Chatbot = ({
       }
     } catch (err) {
       console.error("Error creating chat:", err);
+    } finally {
+      chatLoading.current = false;
+      setHasStarted(true);
     }
   };
   const handleClick = async () => {
     toggle();
     if (hasStarted) return;
-    if (!menusLoaded) {
-      setPendingStart(true);
-      return;
-    }
     if (!hasOpenedOnce) {
-      await startChat();
+      await startChat("bubbleClick");
       setHasStarted(true);
     }
   };
   const onSendMessage = async (msg) => {
-    console.log("Sending message:", msg);
+    const clientChatId = clientRef.current?.chat?.id;
+    const refChatId = chatRef.current?.id;
+    console.log(
+      "Sending message:",
+      msg,
+      "| client.chat.id:",
+      clientChatId,
+      "| chatRef.id:",
+      refChatId
+    );
     try {
       await clientRef.current?.sendTextMessage(msg);
     } catch (error) {
@@ -319,7 +348,7 @@ const Chatbot = ({
   const onEndAndStartNewChat = async () => {
     console.log("Ending current chat and starting a new one");
     await onEndChat();
-    await startChat();
+    await startChat("endAndStartNew");
   };
   useMount(async () => {
     console.log("Chatbot mounted");
@@ -327,17 +356,10 @@ 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;
+    chatLoading.current = false;
     reset();
     setHasStarted(false);
     setStatus("idle");
@@ -350,9 +372,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);
@@ -365,24 +391,30 @@ const Chatbot = ({
       console.error("Error sending preview message:", error);
     }
   };
-  return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
-    /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
-    /* @__PURE__ */ jsx(
-      ChatWindow,
-      {
-        status,
-        virtualAgent: agent_virtual.current,
-        messages,
-        onSend: onSendMessage,
-        endChat: onEndChat,
-        onClose,
-        onNewChat: onEndAndStartNewChat,
-        onCloseAfterThankYou,
-        previewTyping: onPreviewTyping,
-        isTyping
-      }
-    )
-  ] });
+  return menusLoaded && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["axos", "Axos"].includes(project) ? chatbotAXB : chatbotUFB,
+      children: [
+        /* @__PURE__ */ jsx(Bubble, { onClick: handleClick, project }),
+        /* @__PURE__ */ jsx(
+          ChatWindow,
+          {
+            status,
+            virtualAgent: agent_virtual.current,
+            messages,
+            onSend: onSendMessage,
+            endChat: onEndChat,
+            onClose,
+            onNewChat: onEndAndStartNewChat,
+            onCloseAfterThankYou,
+            previewTyping: onPreviewTyping,
+            isTyping
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   Chatbot

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -12,6 +12,7 @@ interface ChatbotMessageProps {
     onCancelEndChat?: () => void;
     onSend?: (content: string) => void;
     onEndChat?: () => void;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
 }
 export declare const ChatbotMessage: FC<ChatbotMessageProps>;
 export {};

package/dist/Chatbot/ChatbotMessage.js

@@ -25,7 +25,8 @@ const ChatbotMessage = ({
   showName,
   virtualAgent,
   onEndChat,
-  onSend
+  onSend,
+  inputRef
 }) => {
   const { hasEscalated } = useOpenChat();
   const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
@@ -36,6 +37,9 @@ const ChatbotMessage = ({
     return () => clearInterval(interval);
   }, [msg.$timestamp]);
   if (msg.$sid === "typing-1" && !hasEscalated) {
+    if (inputRef?.current) {
+      inputRef?.current.focus();
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/Chatbot/EllipsisAnimation.d.ts

@@ -1,2 +1,2 @@
-declare const EllipsisLoader: () => import("react/jsx-runtime").JSX.Element;
+declare const EllipsisLoader: () => import("react").JSX.Element;
 export default EllipsisLoader;

package/dist/Chatbot/EllipsisIcon.d.ts

@@ -1,4 +1,4 @@
 export declare const EllipsisIcon: ({ size, color }: {
     size?: number | undefined;
     color?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;