@axos-web-dev/shared-components 1.0.100-chat.1 → 1.0.100-dev.10

package/dist/Calculators/BuyDownCalculator/index.d.ts

@@ -11,6 +11,7 @@ export type BuyDownCalculatorInputs = {
     purchasePrice: number;
     downpayment: number;
     dealerContribution: number;
+    manufacturerContributionAmount: number;
     program: string;
     fico: string;
     buydownRate: number;

package/dist/Calculators/BuyDownCalculator/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "react-use";
 import { Program, Fico, BuydownRate, BuydownTerm, LoanRates } from "../../Forms/FormEnums.js";
 import { Checkbox } from "../../Input/Checkbox.js";
@@ -39,7 +39,6 @@ const BuyDownCalculator = ({
   const [finalNoteRate, setFinalNoteRate] = useState("");
   const [manuContributionPercentage, setManuContributionPercentage] = useState("");
   const [buydownPayment, setBuydownPayment] = useState("");
-  const [manuContributionAmount, setManuContributionAmount] = useState("");
   const [nonBuydownPayment, setNonBuydownPayment] = useState("");
   const [totalBuydownCost, setTotalBuydownCost] = useState("");
   const [monthlySavings, setMonthlySavings] = useState("");
@@ -47,6 +46,11 @@ const BuyDownCalculator = ({
   const [enableFullTimeCharter, setEnableFullTimeCharter] = useState(false);
   const [disableMooringOutside, setDisableMooringOutside] = useState(false);
   const [disableLTVAbove60, setDisableLTVAbove60] = useState(true);
+  const [isDealerContributionDisabled, setIsDealerContributionDisabled] = useState(false);
+  const [
+    isManufacturerContributionDisabled,
+    setIsManufacturerContributionDisabled
+  ] = useState(false);
   const schema = z.object({
     purchasePrice: z.string().min(1, { message: "Loan amount is required." }).transform((val) => {
       return formatToNumber(val);
@@ -54,8 +58,13 @@ const BuyDownCalculator = ({
     downpayment: z.string().min(1, { message: "Down Payment is required." }).transform((val) => {
       return formatToNumber(val);
     }),
-    dealerContribution: z.string().min(1, { message: "Dealer Contribution is required." }).transform((val) => {
-      return formatToNumber(val);
+    dealerContribution: z.union([z.string(), z.number()]).optional().transform((val) => {
+      if (typeof val === "number") return val;
+      return val ? formatToNumber(val) : 0;
+    }),
+    manufacturerContributionAmount: z.union([z.string(), z.number()]).optional().transform((val) => {
+      if (typeof val === "number") return val;
+      return val ? formatToNumber(val) : 0;
     }),
     program: z.string().min(1, { message: "Program is required." }),
     fico: z.string().min(1, { message: "FICO is required." }),
@@ -66,7 +75,32 @@ const BuyDownCalculator = ({
       return formatToNumber(val);
     })
   }).superRefine((values, ctx) => {
-    const { purchasePrice, downpayment, program, buydownTerm } = values;
+    const {
+      purchasePrice,
+      downpayment,
+      program,
+      buydownTerm,
+      dealerContribution,
+      manufacturerContributionAmount
+    } = values;
+    if (dealerContribution > 0 && manufacturerContributionAmount > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["dealerContribution"],
+        message: "Cannot specify both Dealer Contribution and Manufacturer Contribution Amount. Please choose one."
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["manufacturerContributionAmount"],
+        message: "Cannot specify both Dealer Contribution and Manufacturer Contribution Amount. Please choose one."
+      });
+    } else if (dealerContribution === 0 && manufacturerContributionAmount === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["dealerContribution"],
+        message: "Either Dealer Contribution or Manufacturer Contribution Amount is required."
+      });
+    }
     if (program === "3/6 SOFR ARM" && (buydownTerm === 4 || buydownTerm === 5)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
@@ -114,8 +148,23 @@ const BuyDownCalculator = ({
     handleSubmit,
     register,
     setValue,
+    watch,
+    trigger,
     formState: { errors, isValid }
   } = methods;
+  const watchedFields = watch(["purchasePrice", "downpayment", "program"]);
+  useEffect(() => {
+    const [purchasePrice, downpayment, program] = watchedFields;
+    if (purchasePrice && downpayment && program) {
+      const purchasePriceNum = typeof purchasePrice === "string" ? formatToNumber(purchasePrice) : purchasePrice;
+      const downpaymentNum = typeof downpayment === "string" ? formatToNumber(downpayment) : downpayment;
+      if (purchasePriceNum > 0 && downpaymentNum >= 0 && purchasePriceNum > downpaymentNum) {
+        const financedAmount2 = purchasePriceNum - downpaymentNum;
+        const loanRange2 = getRange(financedAmount2, program);
+        setLoanRange(loanRange2);
+      }
+    }
+  }, [watchedFields]);
   const calculator_variant = getVariant(variant);
   const enableDependentInputs = enableFullTimeCharter;
   const formatToNumber = (value) => {
@@ -224,6 +273,32 @@ const BuyDownCalculator = ({
       setDisableMooringOutside(true);
     }
   };
+  const handleDealerContributionChange = (event) => {
+    const value = event.target.value;
+    const numericValue = formatToNumber(value);
+    if (numericValue > 0) {
+      setIsManufacturerContributionDisabled(true);
+      setValue("manufacturerContributionAmount", 0);
+    } else {
+      setIsManufacturerContributionDisabled(false);
+    }
+    setTimeout(() => {
+      trigger(["dealerContribution", "manufacturerContributionAmount"]);
+    }, 0);
+  };
+  const handleManufacturerContributionChange = (event) => {
+    const value = event.target.value;
+    const numericValue = formatToNumber(value);
+    if (numericValue > 0) {
+      setIsDealerContributionDisabled(true);
+      setValue("dealerContribution", 0);
+    } else {
+      setIsDealerContributionDisabled(false);
+    }
+    setTimeout(() => {
+      trigger(["dealerContribution", "manufacturerContributionAmount"]);
+    }, 0);
+  };
   const updateFicoRequirements = (loanRangeValue, program) => {
     const ficoOptionsToDisable = ["700-719", "720-759"];
     const ficoSelect = document.getElementById("fico");
@@ -383,17 +458,17 @@ const BuyDownCalculator = ({
     setTotalBuydownCost(formatToCurrency(TBC));
     return TBC;
   };
-  const calculateManufacturerContribution = (dealerContribution) => {
-    const manufacturerContribution = 100 - dealerContribution;
+  const calculateManufacturerContribution = (dealerContribution, manufacturerContributionAmount, totalBuydownCost2) => {
+    let manufacturerContribution;
+    if (manufacturerContributionAmount > 0) {
+      manufacturerContribution = manufacturerContributionAmount / totalBuydownCost2 * 100;
+    } else {
+      manufacturerContribution = 100 - dealerContribution;
+    }
     const percentage = formatToPercentage(manufacturerContribution);
     setManuContributionPercentage(percentage);
     return manufacturerContribution;
   };
-  const calculateManufacturerAmount = (totalBuydownCost2, manufacturerContribution) => {
-    const manufacturerAmount = totalBuydownCost2 * (manufacturerContribution / 100);
-    const formattedAmount = formatToCurrency(manufacturerAmount);
-    setManuContributionAmount(formattedAmount);
-  };
   const calculateDealerContributionAmount = (dealerContribution, totalBuydownCost2) => {
     const dealerContributionValue = totalBuydownCost2 * (dealerContribution / 100);
     const formattedAmount = formatToCurrency(dealerContributionValue);
@@ -405,6 +480,7 @@ const BuyDownCalculator = ({
         buydownRate,
         buydownTerm,
         dealerContribution,
+        manufacturerContributionAmount,
         downpayment,
         fico,
         program,
@@ -436,8 +512,11 @@ const BuyDownCalculator = ({
         financedAmountValue,
         buydownTerm
       );
-      const manufacturerContribution = calculateManufacturerContribution(dealerContribution);
-      calculateManufacturerAmount(totalBuydownCost2, manufacturerContribution);
+      calculateManufacturerContribution(
+        dealerContribution,
+        manufacturerContributionAmount,
+        totalBuydownCost2
+      );
       calculateDealerContributionAmount(dealerContribution, totalBuydownCost2);
     }
   };
@@ -495,16 +574,40 @@ const BuyDownCalculator = ({
                 PercentageInput,
                 {
                   id: "dealerContribution",
-                  ...register("dealerContribution", { required: true }),
+                  ...register("dealerContribution", {
+                    required: false,
+                    onChange: handleDealerContributionChange
+                  }),
                   sizes: "medium",
                   placeholder: "0.00%",
                   label: "Dealer Contribution",
-                  required: true,
+                  required: false,
                   error: !!errors["dealerContribution"],
                   helperText: errors["dealerContribution"]?.message,
-                  variant: calculator_variant
+                  variant: calculator_variant,
+                  disabled: isDealerContributionDisabled
                 }
               ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  id: "manufacturerContributionAmount",
+                  ...register("manufacturerContributionAmount", {
+                    required: false,
+                    onChange: handleManufacturerContributionChange
+                  }),
+                  sizes: "medium",
+                  placeholder: "$0.00",
+                  label: "Manufacturer Contribution Amount",
+                  required: false,
+                  error: !!errors["manufacturerContributionAmount"],
+                  helperText: errors["manufacturerContributionAmount"]?.message,
+                  variant: calculator_variant,
+                  disabled: isManufacturerContributionDisabled
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -526,9 +629,7 @@ const BuyDownCalculator = ({
                     Program.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                   ]
                 }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
+              ) }),
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -546,7 +647,9 @@ const BuyDownCalculator = ({
                     Fico.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                   ]
                 }
-              ) }),
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -558,10 +661,8 @@ const BuyDownCalculator = ({
                   variant: calculator_variant,
                   value: loanRange
                 }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                 Dropdown,
                 {
                   id: "buydownRate",
@@ -574,35 +675,31 @@ const BuyDownCalculator = ({
                   error: !!errors.buydownRate,
                   helperText: errors.buydownRate?.message,
                   variant: calculator_variant,
-                  defaultValue: "",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select Buydown Rate" }),
-                    BuydownRate.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  id: "buydownTerm",
-                  ...register("buydownTerm", {
-                    required: true,
-                    deps: ["program"]
-                  }),
-                  label: "Buydown Term (1-5 Years)",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.buydownTerm,
-                  helperText: errors.buydownTerm?.message,
-                  variant: calculator_variant,
-                  defaultValue: 0,
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select Buydown Term" }),
-                    BuydownTerm.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                  ]
+                  disabled: true,
+                  defaultValue: 3.74,
+                  children: BuydownRate.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                 }
               ) })
             ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                id: "buydownTerm",
+                ...register("buydownTerm", {
+                  required: true,
+                  deps: ["program"]
+                }),
+                label: "Buydown Term (1-5 Years)",
+                sizes: "medium",
+                required: true,
+                error: !!errors.buydownTerm,
+                helperText: errors.buydownTerm?.message,
+                variant: calculator_variant,
+                disabled: true,
+                defaultValue: 3,
+                children: BuydownTerm.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+              }
+            ) }) }),
             /* @__PURE__ */ jsx("div", { className: `${row_form}`, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { children: "Loan Level Rate Adjustments" }) }) }),
             /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: row_form, children: /* @__PURE__ */ jsxs(
@@ -788,23 +885,23 @@ const BuyDownCalculator = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "manuContributionAmount",
+                id: "nonBuydownPayment",
                 sizes: "medium",
-                label: "Manufacturer Contribution Amount",
+                label: "Non-buydown Payment",
                 disabled: true,
                 variant: calculator_variant,
-                value: manuContributionAmount
+                value: nonBuydownPayment
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "nonBuydownPayment",
+                id: "totalBuydownCost",
                 sizes: "medium",
-                label: "Non-buydown Payment",
+                label: "Total Buydown Cost",
                 disabled: true,
                 variant: calculator_variant,
-                value: nonBuydownPayment
+                value: totalBuydownCost
               }
             ) })
           ] }),
@@ -812,38 +909,27 @@ const BuyDownCalculator = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "totalBuydownCost",
+                id: "monthlySavings",
                 sizes: "medium",
-                label: "Total Buydown Cost",
+                label: "Monthly Savings",
                 disabled: true,
                 variant: calculator_variant,
-                value: totalBuydownCost
+                value: monthlySavings
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "monthlySavings",
+                id: "dealerContributionAmount",
                 sizes: "medium",
-                label: "Monthly Savings",
+                label: "Dealer Contribution Amount",
                 disabled: true,
                 variant: calculator_variant,
-                value: monthlySavings
+                value: dealerContributionAmount,
+                helperText: "Dealer reserve offset not included in this amount."
               }
             ) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: `${row_form}`, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            CurrencyInput,
-            {
-              id: "dealerContributionAmount",
-              sizes: "medium",
-              label: "Dealer Contribution Amount",
-              disabled: true,
-              variant: calculator_variant,
-              value: dealerContributionAmount,
-              helperText: "Dealer reserve offset not included in this amount."
-            }
-          ) }) })
+          ] })
         ]
       }
     ) }),

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

@@ -14,3 +14,5 @@ export declare const inline_button: string;
 export declare const endChatButtonStyle: string;
 export declare const chatbotMenu: string;
 export declare const chatbotMenuItem: string;
+export declare const chatNetworkStatus: string;
+export declare const chatFinishDialog: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -15,9 +15,13 @@ var inline_button = "_13n1jqkc";
 var endChatButtonStyle = "_13n1jqkd";
 var chatbotMenu = "_13n1jqke";
 var chatbotMenuItem = "_13n1jqkf";
+var chatNetworkStatus = "_13n1jqkg";
+var chatFinishDialog = "_13n1jqkh";
 export {
   arrowFill,
   button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
   chat_title,
   chatbotMenu,
   chatbotMenuItem,

package/dist/Chatbot/ChatWindow.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
-import React, { useRef, useEffect, Fragment } from "react";
+import React, { useRef, useEffect, Fragment as Fragment$1 } from "react";
 import ReactMarkdown from "react-markdown";
 import { useNetworkState, useMount } from "react-use";
 import remarkGfm from "remark-gfm";
-import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, button_reset, arrowFill, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
+import { windowBarStyle, chat_title, chatbotMenuItem, chatbotMenu, chatFinishDialog, endChatButtonStyle, button_reset, arrowFill, chatNetworkStatus, notificationStyle, messageStyle, inline_button_wrapper, inline_button, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
 import { useOpenChat } from "./store/chat.js";
 const ChatWindow = ({
@@ -88,46 +88,75 @@ const ChatWindow = ({
           children: "Finish chat"
         }
       ) }) }),
-      showEndChatDialog && /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          open: showEndChatDialog,
-          style: {
-            padding: "1rem",
-            borderRadius: 8,
-            background: "#fff",
-            color: "#000",
-            border: "none",
-            outline: "none",
-            maxWidth: "90%",
-            top: "25%"
-          },
-          children: /* @__PURE__ */ jsxs("form", { method: "dialog", children: [
-            /* @__PURE__ */ jsx("p", { children: "are you sure you want to end this chat?" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                onClick: () => {
-                  endChat();
-                  setShowEndChatDialog(false);
-                },
-                children: "Yes"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setShowEndChatDialog(false);
-                },
-                children: "No"
-              }
-            )
-          ] })
-        }
-      ),
+      showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              background: "#00000080",
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 999,
+              opacity: 0.75
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            open: showEndChatDialog,
+            style: {
+              padding: "1rem",
+              borderRadius: 8,
+              background: "#fff",
+              color: "#000",
+              border: `1px solid ${endUserBg}`,
+              outline: "none",
+              maxWidth: "90%",
+              top: "25%",
+              marginInline: "auto",
+              zIndex: 1e3
+            },
+            children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
+              /* @__PURE__ */ jsx("p", { children: "Are you sure you want to end this chat?" }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", gap: "1rem", marginTop: "1rem" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: endChatButtonStyle,
+                        type: "submit",
+                        onClick: () => {
+                          endChat();
+                          setShowEndChatDialog(false);
+                        },
+                        children: "Yes"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: endChatButtonStyle,
+                        type: "button",
+                        onClick: () => {
+                          setShowEndChatDialog(false);
+                        },
+                        children: "No"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ] }),
       onClose && /* @__PURE__ */ jsx(
         "button",
         {
@@ -156,13 +185,31 @@ const ChatWindow = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      " ",
-      mounted && !state.online ? "Offline" : null,
-      " "
-    ] }),
+    mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          color: "#d32f2f",
+          textAlign: "center",
+          padding: "8px 0",
+          fontWeight: 500
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "img",
+              "aria-label": "disconnected",
+              style: { marginRight: 6 },
+              children: "⚠️"
+            }
+          ),
+          "You are currently disconnected. Please check your connection."
+        ]
+      }
+    ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      messages?.map((msg) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx("div", { className: notificationStyle, children: "We are connecting you with a human agent..." }, msg.$index),
         msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
           /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
@@ -264,7 +311,26 @@ const ChatWindow = ({
             index
           );
         }) }),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: endChat, children: "End Chat" }) })
+        msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              title: (/* @__PURE__ */ new Date()).toLocaleString(),
+              style: {
+                fontSize: 12,
+                color: "#888",
+                marginBottom: 4,
+                textAlign: "center"
+              },
+              children: [
+                "Thank you for chatting!",
+                /* @__PURE__ */ jsx("br", {}),
+                " This conversation has ended."
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: endChat, children: "End Chat" }) })
+        ] })
       ] }, msg.$index)),
       showReconnect && /* @__PURE__ */ jsx(
         "button",
@@ -295,6 +361,7 @@ const ChatWindow = ({
               onChange: (e) => setInput(e.target.value),
               placeholder: "Ask something...",
               className: inputStyle,
+              autoFocus: true,
               disabled: inputDisabled || status !== "connected"
             }
           ),

package/dist/Chatbot/index.js

@@ -4,7 +4,7 @@ import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { Chatbot } from "./Chatbot.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
-import { arrowFill, button_reset, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
+import { arrowFill, button_reset, chatFinishDialog, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./ChatWindow.css.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
 import { useHeadlessChat } from "./useHeadlessChat.js";
@@ -15,6 +15,8 @@ export {
   arrowFill,
   bubbleWrapper,
   button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
   chat_title,
   chatbotAXB,
   chatbotMenu,

package/dist/Chatbot/useHeadlessChat.d.ts

@@ -8,6 +8,7 @@ interface UseHeadlessChatOptions {
     channelId?: string;
     projectId?: "axos" | "" | "ufb" | string;
     debug?: boolean;
+    menuOption?: string;
 }
 export interface ChatMessage {
     id: string;
@@ -15,7 +16,7 @@ export interface ChatMessage {
     sender?: string;
     timestamp?: string;
 }
-export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, }: UseHeadlessChatOptions): {
+export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, menuOption, }: UseHeadlessChatOptions): {
     status: "error" | "idle" | "connected" | "connecting" | "finished";
     sendMessage: (body: string) => Promise<void>;
     showReconnect: boolean;