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

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/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/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                                                    */
@@ -41,8 +41,11 @@ import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
 import "../Input/DownPaymentInput.js";
 import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
 import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
@@ -61,8 +64,6 @@ import "iframe-resizer";
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
-import "../Input/PercentageInput.js";
-import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 /* empty css                                    */
 import "react-dom";
 /* empty css                                */
@@ -70,6 +71,12 @@ import "../Auth/SignInPassword.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                                    */
+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";
 /* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "next/image.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,8 @@
+import "./Chatbot.css.ts.vanilla.css.js";
+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,3 @@
+import { PropsWithChildren } from 'react';
+
+export declare const Bubble: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Bubble.js

@@ -0,0 +1,100 @@
+"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 }) => {
+  const isOpen = useOpenChat((state) => state.isOpen);
+  const toggle = useOpenChat((state) => state.toggle);
+  return /* @__PURE__ */ jsxs("div", { className: bubbleWrapper, onClick: toggle, 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,16 @@
+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 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;

package/dist/Chatbot/ChatWindow.css.js

@@ -0,0 +1,35 @@
+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 sendButtonStyle = "_13n1jqk7";
+var messagesContainerStyle = "_13n1jqk8";
+var notificationStyle = "_13n1jqk9";
+var messageStyle = "_13n1jqka";
+var inline_button_wrapper = "_13n1jqkb";
+var inline_button = "_13n1jqkc";
+var endChatButtonStyle = "_13n1jqkd";
+var chatbotMenu = "_13n1jqke";
+var chatbotMenuItem = "_13n1jqkf";
+export {
+  arrowFill,
+  button_reset,
+  chat_title,
+  chatbotMenu,
+  chatbotMenuItem,
+  endChatButtonStyle,
+  inline_button,
+  inline_button_wrapper,
+  inputStyle,
+  messageStyle,
+  messagesContainerStyle,
+  notificationStyle,
+  sendButtonStyle,
+  windowBarStyle,
+  windowOpenStyle,
+  windowStyle
+};

package/dist/Chatbot/ChatWindow.d.ts

@@ -0,0 +1,29 @@
+import { MessageResponse as BaseMessageResponse, HumanAgent } 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: MessageResponse[];
+    status?: string;
+    onSend: (msg: string) => void;
+    inputDisabled?: boolean;
+    onClose?: () => void;
+    endChat?: () => void;
+    showReconnect?: boolean;
+    virtualAgent?: {
+        avatar_url: string;
+        name: string;
+        id: string;
+    };
+}
+export declare const ChatWindow: React.FC<ChatWindowProps>;
+export {};