@axos-web-dev/shared-components 1.0.100-dev.3 → 1.0.100-dev.31

package/dist/Chatbot/ChatWindow.js

@@ -1,11 +1,13 @@
 "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, 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";
-import { windowBarStyle, chat_title, button_reset, arrowFill, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 const ChatWindow = ({
   messages,
   status = "connected",
@@ -14,11 +16,18 @@ const ChatWindow = ({
   onClose,
   endChat = () => {
     console.log("End chat");
-  }
+  },
+  showReconnect = false,
+  virtualAgent,
+  showAvatar = false
 }) => {
+  const [mounted, setMounted] = React.useState(false);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [showEndChatDialog, setShowEndChatDialog] = React.useState(false);
+  const state = useNetworkState();
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
-  const isOpen = useOpenChat((state) => state.isOpen);
+  const isOpen = useOpenChat((state2) => state2.isOpen);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -29,6 +38,9 @@ const ChatWindow = ({
       setInput("");
     }
   };
+  useMount(() => {
+    setMounted(true);
+  });
   const project = process.env.CCAI_PROJECT_ID;
   const isAxos = project === "axos";
   const endUserBg = isAxos ? "#14263d" : "#323339";
@@ -47,6 +59,105 @@ const ChatWindow = ({
         ),
         /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Evo Virtual Assistant" })
       ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setMenuOpen(!menuOpen);
+          },
+          style: {
+            border: "none",
+            background: "transparent",
+            marginLeft: "auto",
+            cursor: "pointer",
+            padding: 0,
+            display: "flex",
+            alignContent: "center"
+          },
+          children: /* @__PURE__ */ jsx(EllipsisIcon, { color: "#fff" })
+        }
+      ),
+      menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setShowEndChatDialog(true);
+            setMenuOpen(false);
+          },
+          style: { width: "100%" },
+          children: "Finish chat"
+        }
+      ) }) }),
+      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",
         {
@@ -75,8 +186,31 @@ const ChatWindow = ({
         }
       )
     ] }),
+    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" }),
@@ -99,7 +233,7 @@ const ChatWindow = ({
               boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -108,22 +242,48 @@ const ChatWindow = ({
                     flexDirection: "column",
                     gap: 4
                   },
-                  children: /* @__PURE__ */ jsx(
-                    ReactMarkdown,
-                    {
-                      remarkPlugins: [[remarkGfm, { singleTilde: false }]],
-                      components: {
-                        p: ({ ...props }) => /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            style: { margin: 0, fontSize: "inherit" },
-                            ...props
-                          }
-                        )
-                      },
-                      children: msg.content
-                    }
-                  )
+                  children: [
+                    msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          // justifyContent: "center",
+                          alignItems: "center",
+                          gap: "8px"
+                        },
+                        children: [
+                          showAvatar && /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              width: 24,
+                              height: 24,
+                              src: virtualAgent?.avatar_url,
+                              alt: "agent avatar"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ReactMarkdown,
+                      {
+                        remarkPlugins: [[remarkGfm, { singleTilde: false }]],
+                        components: {
+                          p: ({ ...props }) => /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              style: { margin: 0, fontSize: "inherit" },
+                              title: new Date(msg.$timestamp).toLocaleString(),
+                              ...props
+                            }
+                          )
+                        },
+                        children: msg.content
+                      }
+                    )
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 2 } })
@@ -152,8 +312,36 @@ 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",
+        {
+          style: { margin: "12px auto", display: "block" },
+          onClick: () => {
+          },
+          children: "Reconnect Chat"
+        }
+      ),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -174,6 +362,7 @@ const ChatWindow = ({
               onChange: (e) => setInput(e.target.value),
               placeholder: "Ask something...",
               className: inputStyle,
+              autoFocus: true,
               disabled: inputDisabled || status !== "connected"
             }
           ),

package/dist/Chatbot/Chatbot.css.js

@@ -1,4 +1,3 @@
-import "./Chatbot.css.ts.vanilla.css.js";
 var chatbotAXB = "_1hpv6vm0";
 var chatbotUFB = "_1hpv6vm1";
 export {

package/dist/Chatbot/Chatbot.js

@@ -2,15 +2,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { authenticate } from "./authenticate.js";
 import { Bubble } from "./Bubble.js";
+import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
 import { useHeadlessChat } from "./useHeadlessChat.js";
-import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
 const Chatbot = (props) => {
   const messages = useMessages((state) => state.messages);
   const close = useOpenChat((state) => state.close);
-  const { status, sendMessage } = useHeadlessChat({
+  const { status, sendMessage, showReconnect, endChat, virtualAgent } = useHeadlessChat({
     companyId: process.env.CCAI_COMPANY_ID || "",
     tenant: process.env.CCAI_TENANT_NAME || "",
     host: process.env.CCAI_HOST || "",
@@ -29,7 +29,10 @@ const Chatbot = (props) => {
         messages,
         onSend: function(msg) {
           sendMessage(msg);
-        }
+        },
+        endChat,
+        virtualAgent,
+        showReconnect
       }
     )
   ] });

package/dist/Chatbot/EllipsisIcon.d.ts

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

package/dist/Chatbot/EllipsisIcon.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const EllipsisIcon = ({ size = 24, color = "currentColor" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "2", fill: color }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: color }),
+      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "2", fill: color })
+    ]
+  }
+);
+export {
+  EllipsisIcon
+};

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, 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,8 +15,12 @@ export {
   arrowFill,
   bubbleWrapper,
   button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
   chat_title,
   chatbotAXB,
+  chatbotMenu,
+  chatbotMenuItem,
   chatbotUFB,
   endChatButtonStyle,
   inline_button,

package/dist/Chatbot/store/messages.d.ts

@@ -5,6 +5,7 @@ interface MessageStore {
     addMessage: (message: MessageResponse) => void;
     removeMessage: (id: string) => void;
     addMessages: (newMessages: MessageResponse[]) => void;
+    clearMessages: () => void;
 }
 export interface Message {
     id: string;

package/dist/Chatbot/store/messages.js

@@ -5,7 +5,8 @@ const useMessages = create((set) => ({
   removeMessage: (id) => set((state) => ({
     messages: state.messages.filter((msg) => msg.id !== id)
   })),
-  addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] }))
+  addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
+  clearMessages: () => set({ messages: [] })
 }));
 export {
   useMessages

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,8 +16,12 @@ 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;
+    setShowReconnect: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    endChat: () => Promise<void>;
+    virtualAgent: any;
 };
 export {};

package/dist/Chatbot/useHeadlessChat.js

@@ -1,26 +1,68 @@
 "use client";
 import { useState, useRef, useCallback, useEffect } from "react";
+import { useLocation } from "react-use";
 import { useMessages } from "./store/messages.js";
+const brandMap = /* @__PURE__ */ new Map([
+  ["axos", 1],
+  ["", 2],
+  ["ufb", 3]
+]);
 function useHeadlessChat({
   companyId,
   tenant,
   host,
   getToken,
   projectId = "axos",
-  debug = false
+  debug = false,
+  menuOption = "Support Virtual Agent"
 }) {
+  const { hostname } = useLocation();
   const addMessage = useMessages((state) => state.addMessage);
   const addMessages = useMessages((state) => state.addMessages);
+  const clearMessages = useMessages((state) => state.clearMessages);
+  const [showReconnect, setShowReconnect] = useState(false);
   const [status, setStatus] = useState("idle");
   const chatRef = useRef(null);
   const clientRef = useRef(null);
   const isMountedRef = useRef(true);
   const hasLoadedBefore = useRef(true);
+  const menuRef = useRef({ menus: [] });
   const sendMessage = useCallback(async (body) => {
     if (chatRef.current) {
       await clientRef.current?.sendTextMessage(body);
     }
   }, []);
+  const endChat = useCallback(async () => {
+    if (chatRef.current) {
+      await clientRef.current?.finishChat();
+      clearMessages();
+      clientRef.current?.createChat(
+        menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
+        {
+          custom_data: {
+            unsigned: {
+              facingBrandId: {
+                label: "facingBrandId",
+                value: `${brandMap.get(projectId) || 1}`
+              },
+              channel: {
+                label: "channel",
+                value: "in_web"
+              },
+              user_auth: {
+                label: "user_auth",
+                value: "false"
+              },
+              env: {
+                label: "env",
+                value: hostname?.includes("www") ? "prod" : hostname?.split(".")[1] ? hostname?.split(".")[1] : ""
+              }
+            }
+          }
+        }
+      );
+    }
+  }, [clearMessages, hostname, menuOption, projectId]);
   useEffect(() => {
     let messageHandler;
     let chatReadyHandler;
@@ -49,21 +91,49 @@ function useHeadlessChat({
         if (isMountedRef.current) setStatus("error");
         return;
       }
-      const menus = await clientRef.current?.getMenus();
-      if (debug) console.log("channelId:", menus);
-      if (debug) console.log("channelId:", menus?.menus[5].id);
-      try {
-        chatRef.current = await clientRef.current?.createChat(
-          menus.menus[5].id
-          // {
-          //   custom_data: {
-          //     unsigned: {
-          //       facingBrandId: brandMap.get(projectId) || 1,
-          //     },
-          //   },
-          // }
+      menuRef.current = await clientRef.current?.getMenus();
+      if (debug) console.log("channelId:", menuRef.current);
+      if (debug)
+        console.log(
+          "channelId:",
+          menuRef.current?.menus.find((menu) => menu.name === menuOption)?.id
         );
-        if (debug) console.log("chatRef:", chatRef.current);
+      const custom_data = {
+        unsigned: {
+          facingBrandId: {
+            label: "facingBrandId",
+            value: `${brandMap.get(projectId) || 1}`
+          },
+          channel: {
+            label: "channel",
+            value: "in_web"
+          },
+          user_auth: {
+            label: "user_auth",
+            value: "false"
+          },
+          env: {
+            label: "env",
+            value: hostname?.includes("www") ? "prod" : hostname?.split(".")[1] ? hostname?.split(".")[1] : ""
+          }
+        }
+      };
+      try {
+        chatRef.current = await clientRef.current?.loadOngoingChat();
+        if (chatRef.current != null) {
+          chatRef.current = await clientRef.current?.resumeChat(
+            chatRef.current?.state?.id
+          );
+          if (debug) console.log("Resumed chatRef:", chatRef.current);
+        } else {
+          chatRef.current = await clientRef.current?.createChat(
+            menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
+            {
+              custom_data
+            }
+          );
+          if (debug) console.log("chatRef:", chatRef.current);
+        }
       } catch (error) {
         console.error("Error creating chat:", error);
       }
@@ -81,9 +151,13 @@ function useHeadlessChat({
       chatConnectedHandler = async () => {
         console.log("Chat connected");
         setStatus("connected");
-        const messagesFetched = await chatRef.current?.fetchMessages();
-        if (debug) console.log("[messages]:", messagesFetched);
-        addMessages(messagesFetched || []);
+        try {
+          const messagesFetched = await chatRef.current?.fetchMessages();
+          if (debug) console.log("[messages]:", messagesFetched);
+          addMessages(messagesFetched || []);
+        } catch (error) {
+          console.error("Error fetching messages:", error);
+        }
       };
       startTypingHandler = (identity) => {
         console.log("start typing: ", identity);
@@ -148,9 +222,18 @@ function useHeadlessChat({
     addMessage,
     addMessages,
     debug,
-    projectId
+    projectId,
+    menuOption,
+    hostname
   ]);
-  return { status, sendMessage };
+  return {
+    status,
+    sendMessage,
+    showReconnect,
+    setShowReconnect,
+    endChat,
+    virtualAgent: chatRef.current?.state.virtual_agent
+  };
 }
 export {
   useHeadlessChat

package/dist/Chevron/Chevron.css.d.ts

@@ -19,11 +19,11 @@ export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            color: `var(--${string})`;
+            color: "FFFFFF";
             selectors: {
                 "&:hover": {
                     textDecoration: "underline";
-                    textDecorationColor: `var(--${string})`;
+                    textDecorationColor: "#FFFFFF";
                 };
             };
         };

package/dist/Chevron/index.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import SvgArrowIcon from "../icons/ArrowIcon/index.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/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.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/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.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/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.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                                                    */
@@ -69,14 +69,15 @@ import "react-dom";
 import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
+/* empty css                                    */
 /* empty css                                                    */
 import "../Carousel/index.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/authenticate.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.js";
@@ -101,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";