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

package/dist/Chatbot/ChatWindow.js

@@ -1,10 +1,12 @@
 "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 { windowStyle, windowOpenStyle, windowBarStyle, messagesContainerStyle, inputStyle, sendButtonStyle } from "./ChatWindow.css.js";
+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";
 const ChatWindow = ({
   messages,
@@ -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,104 +37,202 @@ 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: clsx(windowBarStyle), children: [
-      /* @__PURE__ */ jsx("b", { children: "Chat" }),
-      onClose && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { paddingBlock: "6px" }, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "https://www.axos.com/images/2xmVfQm5l0HWOKjgxQO1Iw/axb-assistant.svg",
+            style: { marginRight: 12 },
+            height: 18,
+            width: 18
+          }
+        ),
+        /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Evo Virtual Assistant" })
+      ] }),
+      /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: onClose,
+          onClick: () => {
+            setMenuOpen(!menuOpen);
+          },
           style: {
-            marginLeft: 8,
-            background: "transparent",
             border: "none",
-            fontSize: 18,
+            background: "transparent",
+            marginLeft: "auto",
             cursor: "pointer",
-            color: "#fff",
             padding: 0,
-            lineHeight: 1
+            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",
+        {
+          onClick: onClose,
+          className: button_reset,
           "aria-label": "Close chat",
           title: "Close",
           children: /* @__PURE__ */ jsx(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              height: "24px",
-              viewBox: "0 -960 960 960",
-              width: "24px",
-              fill: "#faa74a",
-              children: /* @__PURE__ */ jsx("path", { d: "M360-200v-80h264L160-744l56-56 464 464v-264h80v400H360Z" })
+              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: [
-        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationStarted" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: 10,
-              color: "#888",
-              marginBottom: 4,
-              textAlign: "center"
-            },
-            children: "We are connecting you with a human agent..."
-          },
-          msg.$index
-        ),
-        msg.type == "noti" && msg.$userType == "system" && msg.event == "memberLeft" && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: 10,
-              color: "#888",
-              marginBottom: 4,
-              textAlign: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx("strong", { children: "Virtual Agent" }),
-              " just left the conversation."
-            ]
-          },
-          msg.$index
-        ),
-        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: 10,
-              color: "#888",
-              marginBottom: 4,
-              textAlign: "center"
-            },
-            children: [
-              "You are now connected with a",
-              " ",
-              msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
-            ]
-          },
-          msg.$index
-        ),
+      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" }),
+          " just left the conversation."
+        ] }, msg.$index),
+        msg.type == "noti" && msg.$userType == "system" && msg.event == "escalationAccepted" && /* @__PURE__ */ jsxs("div", { className: notificationStyle, children: [
+          "You are now connected with a",
+          " ",
+          msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
+        ] }, msg.$index),
         ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx(),
+            className: messageStyle,
             style: {
               textAlign: msg.$userType == "end_user" ? "right" : "left",
               alignSelf: msg.$userType == "end_user" ? "flex-end" : "flex-start",
-              background: msg.$userType == "end_user" ? "#1e3860" : "#eee",
-              color: msg.$userType == "end_user" ? "#fff" : "#1e3860",
-              borderRadius: 16,
-              padding: "8px 8px",
-              maxWidth: "80%",
-              boxShadow: msg.$userType == "end_user" ? "0 1px 4px #b3e0ff55" : void 0,
-              marginBottom: 2
+              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: {
@@ -135,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 } })
@@ -152,57 +290,57 @@ const ChatWindow = ({
           },
           msg.$index
         ),
-        msg.type == "inline_button" && Array.isArray(msg.buttons) && msg.buttons.length > 0 && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              // gap: 4,
-              marginTop: 4,
-              marginBottom: 8,
-              border: "1px solid #ddd",
-              borderRadius: "12px",
-              boxShadow: "0 1px 4px #b3e0ff55"
-            },
-            children: msg.buttons.length !== 0 && Array.isArray(msg.buttons) && msg.buttons.map((button, index) => {
-              const lastItem = msg.buttons && msg.buttons?.length - 1;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  style: {
-                    fontSize: 12,
-                    textAlign: "left",
-                    background: "#fff",
-                    color: "#1e3860",
-                    borderRadius: "0px",
-                    borderTopLeftRadius: [0].includes(index) ? 8 : 0,
-                    borderTopRightRadius: [0].includes(index) ? 8 : 0,
-                    borderBottomLeftRadius: [lastItem].includes(index) ? 8 : 0,
-                    borderBottomRightRadius: [lastItem].includes(index) ? 8 : 0
-                  },
-                  onClick: () => {
-                    onSend(button?.title);
-                  },
-                  children: button.title
-                },
-                index
-              );
-            })
-          }
-        ),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            style: {
-              fontSize: 12,
-              textAlign: "center"
+        msg.type == "inline_button" && Array.isArray(msg.buttons) && msg.buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: inline_button_wrapper, children: msg.buttons.length !== 0 && Array.isArray(msg.buttons) && msg.buttons.map((button, index) => {
+          const lastItem = msg.buttons && msg.buttons?.length - 1;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: inline_button,
+              style: {
+                borderRadius: "0px",
+                borderTopLeftRadius: [0].includes(index) ? 8 : 0,
+                borderTopRightRadius: [0].includes(index) ? 8 : 0,
+                borderBottomLeftRadius: [lastItem].includes(index) ? 8 : 0,
+                borderBottomRightRadius: [lastItem].includes(index) ? 8 : 0
+              },
+              onClick: () => {
+                onSend(button?.title);
+              },
+              children: button.title
             },
-            onClick: endChat,
-            children: "End Chat"
-          }
-        ) })
+            index
+          );
+        }) }),
+        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(
@@ -210,13 +348,9 @@ const ChatWindow = ({
       {
         onSubmit: handleSend,
         style: {
-          display: "flex",
-          gap: 8,
-          padding: "1rem",
           borderTop: "1px solid #eee",
-          background: "#fafbfc",
-          borderBottomLeftRadius: 16,
-          borderBottomRightRadius: 16
+          display: "flex",
+          gap: 8
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -225,8 +359,9 @@ const ChatWindow = ({
               type: "text",
               value: input,
               onChange: (e) => setInput(e.target.value),
-              placeholder: "Ask  something.. .",
-              className: clsx(inputStyle),
+              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 { bubbleCircle, bubbleWrapper, closeIcon } 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 { inputStyle, messageStyle, messagesContainerStyle, 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,14 +12,25 @@ export {
   Bubble,
   ChatWindow,
   Chatbot,
-  bubbleCircle,
+  arrowFill,
   bubbleWrapper,
-  chatbotWrapper,
-  closeIcon,
+  button_reset,
+  chatFinishDialog,
+  chatNetworkStatus,
+  chat_title,
+  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