@axos-web-dev/shared-components 1.0.100-dev.5 → 1.0.100-dev.50

package/dist/Calculators/MarineLoanMonthlyPaymentCalculator/index.js

@@ -4,8 +4,8 @@ import { button } from "../../Button/Button.css.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
-import clsx from "clsx";
 import { useState } from "react";
+import clsx from "clsx";
 import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import { calculator } from "../calculator.css.js";
 import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, hide_select_arrow, calculation_header, payment_results } from "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -5,8 +5,8 @@ import { calc_container, container, h2i, inputs_container, input_container, inpu
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
-import clsx from "clsx";
 import { useState } from "react";
+import clsx from "clsx";
 import { calculator } from "../calculator.css.js";
 const MaxLoanCalculator = ({
   variant,

package/dist/Calculators/MonthlyPaymentCalculator/index.js

@@ -4,8 +4,8 @@ import { button } from "../../Button/Button.css.js";
 import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
-import clsx from "clsx";
 import { useState } from "react";
+import clsx from "clsx";
 import { calc_text, description_text, calc_disclosure } from "../BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import { calculator } from "../calculator.css.js";
 import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "./MonthlyPaymentCalculator.css.js";

package/dist/Calculators/SummitApyCalculator/index.js

@@ -27,15 +27,24 @@ const SummitApyCalculator = ({
   variant
 }) => {
   const calc_variant = getVariant(variant);
+  const SUMMIT_APY = +process.env.NEXT_PUBLIC_SUMMIT_SAVINGS_APY;
   const [balance, setBalance] = useState(1e4);
-  const [axbAPY, _setAxbAPY] = useState(4);
-  const [axbEarning, setAxbEarning] = useState(400);
-  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.7);
-  const [capitalOneEarning, setcapitalOneEarning] = useState(370);
+  const [axbAPY, _setAxbAPY] = useState(SUMMIT_APY);
+  const [axbEarning, setAxbEarning] = useState(
+    SUMMIT_APY / 100 * balance
+  );
+  const [capitalOneAPY, _setcapitalOneAPY] = useState(3.4);
+  const [capitalOneEarning, setcapitalOneEarning] = useState(
+    capitalOneAPY / 100 * balance
+  );
   const [bofaAPY, _setBofaAPY] = useState(0.04);
-  const [bofaEarning, setBofaEarning] = useState(4);
+  const [bofaEarning, setBofaEarning] = useState(
+    bofaAPY / 100 * balance
+  );
   const [chaseAPY, _setchaseAPY] = useState(0.01);
-  const [chaseEarning, setchaseEarning] = useState(1);
+  const [chaseEarning, setchaseEarning] = useState(
+    chaseAPY / 100 * balance
+  );
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";

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

@@ -22,16 +22,10 @@ export declare const calculator_description: import('@vanilla-extract/recipes').
 export declare const calculator_headline: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -1,4 +1,7 @@
 export declare const cta: string;
+export declare const cta_h2: string;
+export declare const is_sticky: string;
+export declare const cta_containment: string;
 export declare const cta_image_section: string;
 export declare const cta_image_section_overlap: string;
 export declare const cta_section_lg: string;
@@ -10,7 +13,6 @@ export declare const cta_section: string;
 export declare const cta_image_overlap: string;
 export declare const cta_body_section: string;
 export declare const sticky_banner: string;
-export declare const is_sticky: string;
 export declare const ctas_section: string;
 export declare const cta_text: string;
 export declare const cta_large_image: string;

package/dist/CallToActionBar/CallToActionBar.css.js

@@ -1,26 +1,32 @@
-import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* 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/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
+/* empty css                                          */
+/* empty css                                    */
 /* empty css                                   */
 var cta = "_1tdyl740";
-var cta_image_section = "_1tdyl741";
-var cta_image_section_overlap = "_1tdyl742";
-var cta_section_lg = "_1tdyl743";
-var cta_section_lg_overlap = "_1tdyl744";
-var cta_section_md = "_1tdyl745";
-var cta_section_md_overlap = "_1tdyl746";
-var cta_section_sm = "_1tdyl747";
-var cta_section = "_1tdyl748";
-var cta_image_overlap = "_1tdyl749";
-var cta_body_section = "_1tdyl74a";
-var sticky_banner = "_1tdyl74b";
-var is_sticky = "_1tdyl74c";
-var ctas_section = "_1tdyl74d";
-var cta_text = "_1tdyl74e";
-var cta_large_image = "_1tdyl74f";
+var cta_h2 = "_1tdyl741";
+var is_sticky = "_1tdyl742";
+var cta_containment = "_1tdyl743";
+var cta_image_section = "_1tdyl744";
+var cta_image_section_overlap = "_1tdyl745";
+var cta_section_lg = "_1tdyl746";
+var cta_section_lg_overlap = "_1tdyl747";
+var cta_section_md = "_1tdyl748";
+var cta_section_md_overlap = "_1tdyl749";
+var cta_section_sm = "_1tdyl74a";
+var cta_section = "_1tdyl74b";
+var cta_image_overlap = "_1tdyl74c";
+var cta_body_section = "_1tdyl74d";
+var sticky_banner = "_1tdyl74e";
+var ctas_section = "_1tdyl74f";
+var cta_text = "_1tdyl74g";
+var cta_large_image = "_1tdyl74h";
 export {
   cta,
   cta_body_section,
+  cta_containment,
+  cta_h2,
   cta_image_overlap,
   cta_image_section,
   cta_image_section_overlap,

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_text, ctas_section, cta_body_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,
@@ -67,6 +67,7 @@ const CallToActionBar = ({
             "containment",
             "flex",
             "middle",
+            cta_containment,
             row_reverse && image ? "reversed" : ""
           ),
           style: { justifyContent: "center" },
@@ -106,8 +107,8 @@ const CallToActionBar = ({
                         (imageMobileView || !image) && "text_center"
                       ),
                       children: [
-                        headline && /* @__PURE__ */ jsx("h2", { className: "header_3", children: headline }),
-                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
+                        headline && /* @__PURE__ */ jsx("h2", { className: clsx(cta_h2, "header_3"), children: headline }),
+                        banner_size === "large" && bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { children: bodyCopy }) })
                       ]
                     }
                   ),

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

@@ -5,28 +5,16 @@ export declare const dots: string;
 export declare const headerCarousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
+            color: `var(--${string})`;
         };
         tertiary: {
             color: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
         };
         quaternary: {
             color: `var(--${string})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
-            textShadow: "0px 0px #00000000";
         };
     };
 }>;
@@ -34,6 +22,7 @@ export declare const carousel: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})`;
+            border: "1px solid #E9EBEF";
             color: `var(--${string})`;
         };
         secondary: {
@@ -90,7 +79,7 @@ export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{}>;
 export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            borderColor: "#1E3860";
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -98,7 +87,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         secondary: {
-            borderColor: "#1E3860";
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#87B9D7";
@@ -106,7 +95,7 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            borderColor: "#FFFFFF";
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     background: "#EBEBEB";
@@ -114,10 +103,10 @@ export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         quaternary: {
-            borderColor: "#FAA74A";
+            borderColor: `var(--${string})`;
             selectors: {
                 "&:hover": {
-                    background: "#FFE7D2";
+                    background: "#EBEBEB";
                 };
             };
         };

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/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/Insight.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/CallToActionBar/CallToActionBar.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/premier.css';import '../assets/themes/axos.css';/* 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/Bubble.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/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -70,7 +70,14 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/authenticate.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -95,7 +102,6 @@ import "next/script.js";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                            */
-/* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                                      */
 import "next/navigation.js";

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

@@ -0,0 +1,2 @@
+export declare const bubbleWrapper: string;
+export declare const svgFill: string;

package/dist/Chatbot/Bubble.css.js

@@ -0,0 +1,7 @@
+import '../assets/Chatbot/Bubble.css';/* empty css                          */
+var bubbleWrapper = "_7u9pv30";
+var svgFill = "_7u9pv31";
+export {
+  bubbleWrapper,
+  svgFill
+};

package/dist/Chatbot/Bubble.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export declare const Bubble: ({ children, onClick, }: PropsWithChildren & {
+    onClick?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Bubble.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { bubbleWrapper, svgFill } from "./Bubble.css.js";
+import { useOpenChat } from "./store/chat.js";
+const Bubble = ({
+  children,
+  onClick = () => {
+  }
+}) => {
+  const isOpen = useOpenChat((state) => state.isOpen);
+  return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick, children: [
+    /* @__PURE__ */ jsx("div", { className: "bubble-circle flex", children: /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "39",
+        height: "39",
+        viewBox: "0 0 39 39",
+        fill: "none",
+        initial: { scale: 0.1, opacity: 0 },
+        animate: {
+          scale: 1,
+          opacity: 1,
+          transition: {
+            default: { type: "spring" },
+            opacity: { ease: [0, 0.71, 0.2, 1.01] }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M3 7.5C3 5.01472 5.01472 3 7.5 3H22.5V0H7.5C3.35786 0 0 3.35786 0 7.5V16.5H3V7.5Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M13.5 30H12C8.68629 30 6 27.3137 6 24V12C6 8.68629 8.68629 6 12 6H33C36.3137 6 39 8.68629 39 12V24C39 27.3137 36.3137 30 33 30H26.25L18.6213 37.6287C16.7314 39.5186 13.5 38.1801 13.5 35.5074V30ZM16.5 35.5074V27H12C10.3431 27 9 25.6569 9 24V12C9 10.3431 10.3431 9 12 9H33C34.6569 9 36 10.3431 36 12V24C36 25.6569 34.6569 27 33 27H25.0074L16.5 35.5074Z",
+              fill: "#98DDFF"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "close-icon", children: /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        initial: { opacity: 0, rotate: 0, scale: 0.1 },
+        animate: {
+          opacity: 1,
+          rotate: -360,
+          scale: 1,
+          transition: {
+            default: { type: "spring" },
+            opacity: { ease: "linear" },
+            scale: { ease: "linear" }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M23.7096 0.892655L23.1073 0.290383C22.7202 -0.0967942 22.0749 -0.0967942 21.6447 0.290383L13.6 8.33506L15.6649 10.4L23.7096 2.35533C24.0968 1.92513 24.0968 1.27983 23.7096 0.892655Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M2.44278 0.293744C2.04123 -0.0979148 1.37197 -0.0979148 0.925804 0.293744L0.301162 0.902989C-0.100387 1.29465 -0.100387 1.94742 0.301162 2.38259L10.1168 12L0.301162 21.6174C-0.100387 22.0091 -0.100387 22.6618 0.301162 23.097L0.925804 23.7063C1.32735 24.0979 1.99661 24.0979 2.44278 23.7063L14.4 12.0435L2.44278 0.293744Z",
+              fill: "#98DDFF"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: svgFill,
+              d: "M23.7096 23.1073L23.1073 23.7096C22.7202 24.0968 22.0749 24.0968 21.6447 23.7096L13.6 15.6649L15.6649 13.6L23.7096 21.6446C24.0968 22.0748 24.0968 22.7201 23.7096 23.1073Z",
+              fill: "#98DDFF"
+            }
+          )
+        ]
+      }
+    ) }) }) }),
+    children
+  ] });
+};
+export {
+  Bubble
+};

package/dist/Chatbot/Chat.d.ts

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

package/dist/Chatbot/Chat.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { authenticate } from "./authenticate.js";
+import { useMessages } from "./store/messages.js";
+const companyId = process.env.CCAI_COMPANY_ID || "";
+const tenant = process.env.CCAI_TENANT_NAME || "";
+const host = process.env.CCAI_HOST || "";
+const COBROWSE_CONSENT_TEMPLATE = `
+  <script class="cobrowse-template" type="text/template">
+    <div class="cobrowse">
+      <div class="cobrowse-title">$title</div>
+      <div class="cobrowse-content">$content</div>
+      <div class="cobrowse-footer">
+        <button class="cobrowse-deny js-cobrowse-deny">$deny</button>
+        <button class="cobrowse-allow js-cobrowse-allow">$allow</button>
+      </div>
+    </div>
+  <\/script>
+`;
+function Chat() {
+  const clientRef = useRef(null);
+  const hasLoadedBefore = useRef(true);
+  const addMessages = useMessages((state) => state.addMessages);
+  const addMessage = useMessages((state) => state.addMessage);
+  const chatRef = useRef(null);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    let messageHandler;
+    let identityHandler;
+    let chatUpdatedHandler;
+    let memberJoinedHandler;
+    let chatConnectedHandler;
+    async function initChat() {
+      const { Client, consoleLoggerHandler, Logger } = await import("@ujet/websdk-headless");
+      console.log("this", isMounted);
+      Logger.addHandler(consoleLoggerHandler);
+      clientRef.current = new Client({
+        companyId,
+        tenant,
+        cobrowse: {
+          enabled: true,
+          template: COBROWSE_CONSENT_TEMPLATE,
+          messages: {
+            confirmSessionTitle: "...",
+            confirmSessionContent: "...",
+            endSessionText: "...",
+            confirmRemoteControlTitle: "...",
+            confirmRemoteControlContent: "...",
+            confirmFullDeviceTitle: "...",
+            confirmFullDeviceContent: "...",
+            allowText: "...",
+            denyText: "..."
+          }
+        },
+        host,
+        authenticate
+      });
+      const menus = await clientRef.current?.getMenus();
+      try {
+        chatRef.current = await clientRef.current?.loadOngoingChat();
+        console.log("chat:", chatRef.current);
+        if (!chatRef.current) {
+          chatRef.current = await clientRef.current?.createChat(
+            menus?.menus[5].id
+          );
+        }
+      } catch (error) {
+        console.error("Error creating chat:", error);
+        chatRef.current = await clientRef.current?.createChat(
+          menus?.menus[5].id
+        );
+      }
+      console.log("this");
+      identityHandler = (identity) => {
+        if (!isMounted.current) return;
+        console.log("identity:", identity);
+      };
+      messageHandler = (msg) => {
+        console.log("new message:", msg);
+        console.log("addMessage:", msg);
+        addMessage(msg);
+      };
+      chatUpdatedHandler = (chat) => {
+        console.log("chat updated:", chat);
+      };
+      chatConnectedHandler = async () => {
+        console.log("connected");
+        const messagesFetched = await clientRef.current?.fetchMessages();
+        console.log("[messages]:", messagesFetched);
+        addMessages(messagesFetched || []);
+      };
+      memberJoinedHandler = (identity) => {
+        console.log("member joined:", identity);
+      };
+      console.log(isMounted.current);
+      clientRef.current?.on("authenticated", () => {
+        console.log("authenticated");
+      });
+      clientRef.current?.on("chat.ongoing", (chat) => {
+        if (!isMounted.current) return;
+        console.log("chat:", chat);
+      });
+      clientRef.current?.on("chat.connected", chatConnectedHandler);
+      clientRef.current?.on("chat.updated", chatUpdatedHandler);
+      clientRef.current?.on("chat.identity", identityHandler);
+      clientRef.current?.on("chat.message", messageHandler);
+      clientRef.current?.on("cobrowse.request", ({ from }) => {
+        console.log("request by", from);
+      });
+      clientRef.current?.on("chat.memberJoined", memberJoinedHandler);
+    }
+    if (hasLoadedBefore.current) {
+      console.log("Initial setup");
+      initChat();
+      hasLoadedBefore.current = false;
+    }
+    return () => {
+      isMounted.current = false;
+      console.log("Component unmounted. Cancelling pending async operations.");
+      if (clientRef.current) {
+        if (messageHandler)
+          clientRef.current.off("chat.message", messageHandler);
+        if (identityHandler)
+          clientRef.current.off("chat.identity", identityHandler);
+        clientRef.current.off("chat.connected", chatConnectedHandler);
+        clientRef.current.off("chat.updated", chatUpdatedHandler);
+        clientRef.current.off("chat.memberJoined", memberJoinedHandler);
+        if (typeof clientRef.current.destroyChat === "function") {
+          console.log("Destroying chat:", chatRef.current);
+          clientRef.current.destroyChat();
+        }
+      }
+    };
+  }, [addMessage, addMessages]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h2", { children: "Chat" }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        style: { marginTop: "1rem", display: "flex", gap: "0.5rem" },
+        onSubmit: async (e) => {
+          e.preventDefault();
+          const form = e.target;
+          const input = form.elements[0];
+          const message = input.value;
+          console.log("Sending message:", message);
+          try {
+            await clientRef.current?.sendTextMessage(message);
+            input.value = "";
+          } catch (error) {
+            console.error("Error sending message:", error);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { type: "text", name: "message", placeholder: "Type a message..." }),
+          /* @__PURE__ */ jsx("button", { type: "submit", children: "Send" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Chat as default
+};

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

@@ -0,0 +1,19 @@
+export declare const windowStyle: string;
+export declare const windowOpenStyle: string;
+export declare const windowBarStyle: string;
+export declare const chat_title: string;
+export declare const button_reset: string;
+export declare const arrowFill: string;
+export declare const inputStyle: string;
+export declare const autoResize: string;
+export declare const sendButtonStyle: string;
+export declare const messagesContainerStyle: string;
+export declare const notificationStyle: string;
+export declare const messageStyle: string;
+export declare const inline_button_wrapper: string;
+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

@@ -0,0 +1,41 @@
+import '../assets/Chatbot/ChatWindow.css';/* empty css                              */
+var windowStyle = "_13n1jqk0";
+var windowOpenStyle = "_13n1jqk1";
+var windowBarStyle = "_13n1jqk2";
+var chat_title = "_13n1jqk3";
+var button_reset = "_13n1jqk4";
+var arrowFill = "_13n1jqk5";
+var inputStyle = "_13n1jqk6";
+var autoResize = "_13n1jqk7";
+var sendButtonStyle = "_13n1jqk8";
+var messagesContainerStyle = "_13n1jqk9";
+var notificationStyle = "_13n1jqka";
+var messageStyle = "_13n1jqkb";
+var inline_button_wrapper = "_13n1jqkc";
+var inline_button = "_13n1jqkd";
+var endChatButtonStyle = "_13n1jqke";
+var chatbotMenu = "_13n1jqkf";
+var chatbotMenuItem = "_13n1jqkg";
+var chatNetworkStatus = "_13n1jqkh";
+var chatFinishDialog = "_13n1jqki";
+export {
+  arrowFill,
+  autoResize,
+  button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
+  chat_title,
+  chatbotMenu,
+  chatbotMenuItem,
+  endChatButtonStyle,
+  inline_button,
+  inline_button_wrapper,
+  inputStyle,
+  messageStyle,
+  messagesContainerStyle,
+  notificationStyle,
+  sendButtonStyle,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};