@axos-web-dev/shared-components 1.0.100-dev.2 → 1.0.100-dev.21

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, notificationStyle, messageStyle, inline_button_wrapper, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 const ChatWindow = ({
   messages,
   status = "connected",
@@ -14,11 +16,17 @@ const ChatWindow = ({
   onClose,
   endChat = () => {
     console.log("End chat");
-  }
+  },
+  showReconnect = false,
+  virtualAgent
 }) => {
+  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 +37,13 @@ const ChatWindow = ({
       setInput("");
     }
   };
+  useMount(() => {
+    setMounted(true);
+  });
+  const project = process.env.CCAI_PROJECT_ID;
+  const isAxos = project === "axos";
+  const endUserBg = isAxos ? "#14263d" : "#323339";
+  const chatbotBg = isAxos ? "#E9F8FF" : "#EAE8E8";
   return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
     /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { paddingBlock: "6px" }, children: [
@@ -43,6 +58,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",
         {
@@ -51,19 +165,51 @@ const ChatWindow = ({
           "aria-label": "Close chat",
           title: "Close",
           children: /* @__PURE__ */ jsx(
-            "img",
+            "svg",
             {
-              src: "https://www.axos.com/images/fXFpk3tIJEym7OWKNuKBU/axb-down-chevron.svg",
-              height: 24,
-              width: 24,
-              alt: ""
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: arrowFill,
+                  d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
+                  fill: "#98DDFF"
+                }
+              )
             }
           )
         }
       )
     ] }),
+    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" }),
@@ -81,12 +227,12 @@ const ChatWindow = ({
             style: {
               textAlign: msg.$userType == "end_user" ? "right" : "left",
               alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
-              background: msg.$userType == "end_user" ? "#14263d" : "#E9F8FF",
+              background: msg.$userType == "end_user" ? endUserBg : chatbotBg,
               color: msg.$userType == "end_user" ? "#fff" : "#1F1F1F",
               boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -95,16 +241,48 @@ const ChatWindow = ({
                     flexDirection: "column",
                     gap: 4
                   },
-                  children: /* @__PURE__ */ jsx(
-                    ReactMarkdown,
-                    {
-                      remarkPlugins: [[remarkGfm, { singleTilde: false }]],
-                      components: {
-                        p: ({ ...props }) => /* @__PURE__ */ jsx("p", { style: { margin: 0 }, ...props })
-                      },
-                      children: msg.content
-                    }
-                  )
+                  children: [
+                    msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          // justifyContent: "center",
+                          alignItems: "center",
+                          gap: "8px"
+                        },
+                        children: [
+                          /* @__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 } })
@@ -117,11 +295,8 @@ const ChatWindow = ({
           return /* @__PURE__ */ jsx(
             "button",
             {
+              className: inline_button,
               style: {
-                fontSize: 12,
-                textAlign: "left",
-                background: "#fff",
-                color: "#1e3860",
                 borderRadius: "0px",
                 borderTopLeftRadius: [0].includes(index) ? 8 : 0,
                 borderTopRightRadius: [0].includes(index) ? 8 : 0,
@@ -136,18 +311,36 @@ const ChatWindow = ({
             index
           );
         }) }),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: {
-              fontSize: 12,
-              textAlign: "center"
-            },
-            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(
@@ -168,6 +361,7 @@ const ChatWindow = ({
               onChange: (e) => setInput(e.target.value),
               placeholder: "Ask something...",
               className: inputStyle,
+              autoFocus: true,
               disabled: inputDisabled || status !== "connected"
             }
           ),

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

@@ -1 +1,2 @@
-export declare const chatbotWrapper: string;
+export declare const chatbotAXB: string;
+export declare const chatbotUFB: string;

package/dist/Chatbot/Chatbot.css.js

@@ -1,5 +1,6 @@
-import "./Chatbot.css.ts.vanilla.css.js";
-var chatbotWrapper = "_1hpv6vm0";
+var chatbotAXB = "_1hpv6vm0";
+var chatbotUFB = "_1hpv6vm1";
 export {
-  chatbotWrapper
+  chatbotAXB,
+  chatbotUFB
 };

package/dist/Chatbot/Chatbot.d.ts

@@ -1 +1,5 @@
-export declare const Chatbot: () => import("react/jsx-runtime").JSX.Element;
+export type ChatbotProps = {
+    project?: "axos" | "ufb";
+    debug?: boolean;
+};
+export declare const Chatbot: (props: ChatbotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Chatbot/Chatbot.js

@@ -2,24 +2,24 @@
 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";
-const Chatbot = () => {
+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 || "",
     // or your region
-    projectId: process.env.CCAI_PROJECT_ID || "axos",
-    // replace with your project id
+    projectId: process.env.CCAI_PROJECT_ID || props.project || "axos",
     getToken: authenticate,
-    debug: process.env.NODE_ENV === "development"
+    debug: props.debug || process.env.NODE_ENV === "development"
   });
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: props.project === "ufb" ? chatbotUFB : chatbotAXB, children: [
     /* @__PURE__ */ jsx(Bubble, {}),
     /* @__PURE__ */ jsx(
       ChatWindow,
@@ -29,7 +29,10 @@ const Chatbot = () => {
         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

@@ -1,10 +1,10 @@
 "use client";
 import { Bubble } from "./Bubble.js";
-import { bubbleWrapper } from "./Bubble.css.js";
+import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { Chatbot } from "./Chatbot.js";
-import { chatbotWrapper } from "./Chatbot.css.js";
+import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
-import { button_reset, chat_title, 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";
@@ -12,16 +12,25 @@ export {
   Bubble,
   ChatWindow,
   Chatbot,
+  arrowFill,
   bubbleWrapper,
   button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
   chat_title,
-  chatbotWrapper,
+  chatbotAXB,
+  chatbotMenu,
+  chatbotMenuItem,
+  chatbotUFB,
+  endChatButtonStyle,
+  inline_button,
   inline_button_wrapper,
   inputStyle,
   messageStyle,
   messagesContainerStyle,
   notificationStyle,
   sendButtonStyle,
+  svgFill,
   useHeadlessChat,
   useMessages,
   useOpenChat,

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 {};