@axos-web-dev/shared-components 1.0.100-dev.6 → 1.0.100-dev.60

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/Carousel.css.js

@@ -1,5 +1,6 @@
-import '../assets/Carousel/Carousel.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/Carousel/Carousel.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                            */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/Carousel/index.js

@@ -6,8 +6,9 @@ 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/Chatbot.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Modal/Modal.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
@@ -70,7 +71,15 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
+/* 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";
@@ -95,7 +104,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/AnimatedGradientBorder.css.d.ts

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

package/dist/Chatbot/AnimatedGradientBorder.css.js

@@ -0,0 +1,13 @@
+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                                          */
+var angle = "var(--angle)";
+var gradientBorder = "ic6iil1";
+var gradientFocus = "ic6iil2";
+export {
+  angle,
+  gradientBorder,
+  gradientFocus
+};

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

@@ -0,0 +1,6 @@
+export declare const borderHoverGradient: string;
+export declare const bubbleWrapper: string;
+export declare const bubbleButton: string;
+export declare const inner: string;
+export declare const bubbleText: string;
+export declare const svgFill: string;

package/dist/Chatbot/Bubble.css.js

@@ -0,0 +1,19 @@
+import '../assets/Chatbot/Bubble.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                   */
+/* empty css                               */
+/* empty css                                    */
+/* empty css                          */
+var borderHoverGradient = "_7u9pv31";
+var bubbleWrapper = "_7u9pv32";
+var bubbleButton = "_7u9pv33";
+var inner = "_7u9pv34";
+var bubbleText = "_7u9pv35";
+var svgFill = "_7u9pv36";
+export {
+  borderHoverGradient,
+  bubbleButton,
+  bubbleText,
+  bubbleWrapper,
+  inner,
+  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,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { vars } from "../themes/axos.css.js";
+import clsx from "clsx";
+import { AnimatePresence, motion } from "framer-motion";
+import { gradientBorder } from "./AnimatedGradientBorder.css.js";
+import { inner, svgFill, bubbleText, bubbleButton, bubbleWrapper } from "./Bubble.css.js";
+import { useOpenChat } from "./store/chat.js";
+const Bubble = ({
+  children,
+  onClick = () => {
+  }
+}) => {
+  const isOpen = useOpenChat((state) => state.isOpen);
+  return /* @__PURE__ */ jsx("div", { className: clsx(bubbleWrapper, gradientBorder), children: /* @__PURE__ */ jsx("div", { className: inner, children: /* @__PURE__ */ jsxs("button", { className: clsx(bubbleButton, inner), onClick, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsx("div", { className: "bubble-circle", children: /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        initial: { scale: 0.1, opacity: 0 },
+        animate: {
+          scale: 1,
+          opacity: 1,
+          transition: {
+            default: { type: "spring" },
+            opacity: { ease: [0, 0.71, 0.2, 1.01] }
+          }
+        },
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12.5277 6.78937C12.8911 6.78937 13.1852 7.08251 13.1853 7.44452C13.1852 7.80654 12.8911 8.10056 12.5277 8.10056H7.26386C6.5371 8.10064 5.94791 8.68761 5.94789 9.41175V14.6565C5.9479 15.3806 6.5371 15.9676 7.26386 15.9677H8.97488C9.12012 15.9678 9.23818 16.0854 9.23825 16.2301V19.6861L12.8932 16.0445C12.9424 15.9956 13.0092 15.9679 13.0786 15.9677H16.4765C17.2032 15.9676 17.7925 15.3806 17.7925 14.6565V13.273C17.7925 12.9111 18.0868 12.6172 18.45 12.617C18.8134 12.617 19.1084 12.9109 19.1084 13.273V14.6565C19.1084 16.1048 17.9301 17.2788 16.4765 17.2789H13.5149L10.169 20.6135C9.33997 21.4393 7.92245 20.8542 7.92229 19.6861V17.2789H7.26386C5.81026 17.2788 4.63193 16.1048 4.63193 14.6565V9.41175C4.63194 7.96341 5.81027 6.78945 7.26386 6.78937H12.5277Z",
+              fill: vars.chatbot.bubble.icon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11.2126 4.1661C11.5758 4.16638 11.8701 4.46027 11.8702 4.82214C11.87 5.18394 11.5757 5.47701 11.2126 5.47729H5.29036C4.20017 5.47729 3.31606 6.35831 3.31596 7.44452V10.7229C3.31577 11.0849 3.02083 11.3781 2.65753 11.3781C2.29436 11.3779 2.0002 11.0848 2 10.7229V7.44452C2.0001 5.63411 3.47333 4.1661 5.29036 4.1661H11.2126Z",
+              fill: vars.chatbot.bubble.icon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M17.7145 4.47582C17.9558 3.84136 18.8779 3.84142 19.1192 4.47582L19.6459 5.8611C19.7218 6.06058 19.8835 6.2175 20.0885 6.29132L21.511 6.80454C22.163 7.03936 22.163 7.93626 21.511 8.17107L20.0885 8.6843C19.8835 8.75812 19.7218 8.91504 19.6459 9.11452L19.1192 10.4998C18.8779 11.1342 17.9558 11.1343 17.7145 10.4998L17.1878 9.11452C17.1119 8.91508 16.9502 8.75811 16.7453 8.6843L15.3227 8.17107C14.6708 7.93622 14.6708 7.0394 15.3227 6.80454L16.7453 6.29132C16.9502 6.21751 17.1119 6.06054 17.1878 5.8611L17.7145 4.47582Z",
+              fill: vars.chatbot.bubble.icon
+            }
+          )
+        ]
+      }
+    ) }) : /* @__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"
+            }
+          )
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: bubbleText, children: "Ask Sam AI" }),
+    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,36 @@
+export declare const windowStyle: string;
+export declare const windowOpenStyle: string;
+export declare const windowBarStyle: string;
+export declare const left_bar_section: string;
+export declare const chat_title: string;
+export declare const buttonss_section: string;
+export declare const button_bar: string;
+export declare const button_reset: string;
+export declare const arrowFill: string;
+export declare const inputStyle: string;
+/**
+ * Style for automatically resizing a textarea or input element.
+ * - Hides vertical overflow to prevent scrollbars.
+ * - Sets a minimum height to ensure at least 1 or 2 lines are visible.
+ */
+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 noAnswerButton: string;
+export declare const chatbotMenu: string;
+export declare const chatbotMenuItem: string;
+export declare const chatNetworkStatus: string;
+export declare const chatEndDialogOverlay: string;
+export declare const chatFinishDialog: string;
+export declare const thankyou_overlay: string;
+export declare const thankyou_message: string;
+export declare const thankyou_image: string;
+export declare const chatEndCircle: string;
+export declare const user_msg: string;
+export declare const agent_msg: string;
+export declare const shimmerText: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -0,0 +1,70 @@
+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                           */
+/* empty css                              */
+var windowStyle = "_13n1jqk0";
+var windowOpenStyle = "_13n1jqk1";
+var windowBarStyle = "_13n1jqk2";
+var left_bar_section = "_13n1jqk3";
+var chat_title = "_13n1jqk4";
+var buttonss_section = "_13n1jqk5";
+var button_bar = "_13n1jqk6";
+var button_reset = "_13n1jqk7";
+var arrowFill = "_13n1jqk8";
+var inputStyle = "_13n1jqk9";
+var autoResize = "_13n1jqka";
+var sendButtonStyle = "_13n1jqkb";
+var messagesContainerStyle = "_13n1jqkc";
+var notificationStyle = "_13n1jqkd";
+var messageStyle = "_13n1jqke";
+var inline_button_wrapper = "_13n1jqkf";
+var inline_button = "_13n1jqkg";
+var endChatButtonStyle = "_13n1jqkh";
+var noAnswerButton = "_13n1jqki";
+var chatbotMenu = "_13n1jqkj";
+var chatbotMenuItem = "_13n1jqkk";
+var chatNetworkStatus = "_13n1jqkl";
+var chatEndDialogOverlay = "_13n1jqkm";
+var chatFinishDialog = "_13n1jqkn";
+var thankyou_overlay = "_13n1jqko";
+var thankyou_message = "_13n1jqkp";
+var thankyou_image = "_13n1jqkq";
+var chatEndCircle = "_13n1jqkr";
+var user_msg = "_13n1jqks";
+var agent_msg = "_13n1jqkt";
+var shimmerText = "_13n1jqkv";
+export {
+  agent_msg,
+  arrowFill,
+  autoResize,
+  button_bar,
+  button_reset,
+  buttonss_section,
+  chatEndCircle,
+  chatEndDialogOverlay,
+  chatFinishDialog,
+  chatNetworkStatus,
+  chat_title,
+  chatbotMenu,
+  chatbotMenuItem,
+  endChatButtonStyle,
+  inline_button,
+  inline_button_wrapper,
+  inputStyle,
+  left_bar_section,
+  messageStyle,
+  messagesContainerStyle,
+  noAnswerButton,
+  notificationStyle,
+  sendButtonStyle,
+  shimmerText,
+  thankyou_image,
+  thankyou_message,
+  thankyou_overlay,
+  user_msg,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};

package/dist/Chatbot/ChatWindow.d.ts

@@ -0,0 +1,29 @@
+import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from '@ujet/websdk-headless';
+import { default as React } from 'react';
+
+interface MessageResponse extends BaseMessageResponse {
+    to_agent?: HumanAgent;
+}
+export interface ChatBubble {
+    id: string | number;
+    body: string;
+    sender?: string;
+    timestamp?: string;
+    isOwn?: boolean;
+}
+interface ChatWindowProps {
+    messages: Array<MessageResponse>;
+    status?: string;
+    onSend: (msg: string) => void;
+    inputDisabled?: boolean;
+    onClose?: () => void;
+    endChat?: () => void;
+    showReconnect?: boolean;
+    virtualAgent?: VirtualAgent | null;
+    showAvatar?: boolean;
+    showName?: boolean;
+    onNewChat?: () => void;
+    onCloseAfterThankYou?: () => void;
+}
+export declare const ChatWindow: React.FC<ChatWindowProps>;
+export {};