@axos-web-dev/shared-components 1.0.100-dev.54 → 1.0.100-dev.55

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

@@ -3,10 +3,10 @@ export declare const windowOpenStyle: string;
 export declare const windowBarStyle: string;
 export declare const left_bar_section: string;
 export declare const chat_title: string;
+export declare const buttonss_section: string;
 export declare const button_bar: string;
 export declare const button_reset: string;
 export declare const arrowFill: string;
-export declare const buttonss_section: string;
 export declare const inputStyle: string;
 /**
  * Style for automatically resizing a textarea or input element.

package/dist/Chatbot/ChatWindow.css.js

@@ -9,10 +9,10 @@ var windowOpenStyle = "_13n1jqk1";
 var windowBarStyle = "_13n1jqk2";
 var left_bar_section = "_13n1jqk3";
 var chat_title = "_13n1jqk4";
-var button_bar = "_13n1jqk5";
-var button_reset = "_13n1jqk6";
-var arrowFill = "_13n1jqk7";
-var buttonss_section = "_13n1jqk8";
+var buttonss_section = "_13n1jqk5";
+var button_bar = "_13n1jqk6";
+var button_reset = "_13n1jqk7";
+var arrowFill = "_13n1jqk8";
 var inputStyle = "_13n1jqk9";
 var autoResize = "_13n1jqka";
 var sendButtonStyle = "_13n1jqkb";

package/dist/Chatbot/ChatWindow.js

@@ -141,11 +141,12 @@ const ChatWindow = ({
             },
             className: clsx(button_bar),
             style: {
-              border: "none",
+              border: menuOpen ? `1px solid ${vars.chatbot.window.headerText}` : "none",
               cursor: "pointer",
               padding: 0,
               display: "flex",
-              alignContent: "center"
+              alignContent: "center",
+              background: menuOpen ? "#0000000f" : void 0
             },
             children: /* @__PURE__ */ jsx(EllipsisIcon, {})
           }
@@ -309,9 +310,12 @@ const ChatWindow = ({
         onClose && /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: onClose,
+            onClick: () => {
+              onClose();
+              setMenuOpen(false);
+            },
             className: clsx(button_reset, button_bar),
-            "aria-label": "Close chat",
+            "aria-label": "Close chat window",
             title: "Close",
             children: [
               /* @__PURE__ */ jsx(

package/dist/Chatbot/Chatbot.js

@@ -30,6 +30,17 @@ const Chatbot = ({
     ["axos", 1],
     ["ufb", 3]
   ]);
+  const typingMessage = {
+    $sid: "typing-1",
+    type: "system",
+    // or a custom type like "typing"
+    text: "AI is typing...",
+    sender: { id: "system", type: "system" },
+    $timestamp: /* @__PURE__ */ new Date(),
+    $userType: "system",
+    $index: -10,
+    $userId: 0
+  };
   const custom_data = {
     unsigned: {
       facingBrandId: {
@@ -67,6 +78,9 @@ const Chatbot = ({
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
     addMessage(message);
+    if (message.$userType != "virtual_agent") {
+      addMessage(typingMessage);
+    }
   };
   const onChatTypingStartedHandler = async (identity) => {
     console.log("Typing started by:", identity);

package/dist/Chatbot/ChatbotMessage.js

@@ -9,7 +9,7 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
 /* empty css                               */
 /* empty css                                    */
 import clsx from "clsx";
-import { notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
+import { shimmerText, notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
 function timeAgo(date) {
   const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
   if (seconds < 60) return "Just now";
@@ -34,7 +34,33 @@ const ChatbotMessage = ({
     return () => clearInterval(interval);
   }, [msg.$timestamp]);
   if (msg.$sid === "typing-1") {
-    return /* @__PURE__ */ jsx("div", { children: "IA is thinking..." });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(),
+        style: {
+          textAlign: "left",
+          alignSelf: "flex-start",
+          color: "#1e3860",
+          borderRadius: 16,
+          padding: "8px 8px",
+          maxWidth: "80%",
+          marginBottom: 2
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 14,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "AI thinking..." })
+          }
+        )
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { 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),

package/dist/Chatbot/store/messages.js

@@ -1,19 +1,15 @@
 import { create } from "zustand";
 const useMessages = create((set) => ({
   messages: [],
-  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
-  removeMessage: (id) => (
-    // set((state) => ({
-    //   messages: state.messages.filter(
-    //     (msg) => "$sid" in msg && msg.$sid !== id
-    //   ),
-    // })
-    setTimeout(() => {
-      set((state) => ({
-        messages: state.messages.filter((msg) => msg.$sid !== id)
-      }));
-    }, 800)
-  ),
+  addMessage: (message) => set((state) => {
+    const cleaned = state.messages.filter((m) => m.$sid !== "typing-1");
+    return { messages: [...cleaned, message] };
+  }),
+  removeMessage: (id) => set((state) => ({
+    messages: state.messages.filter(
+      (msg) => "$sid" in msg && msg.$sid !== id
+    )
+  })),
   addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
   clearMessages: () => set({ messages: [] })
 }));

package/dist/assets/Chatbot/ChatWindow.css

@@ -47,6 +47,11 @@
   line-height: 1.5;
 }
 ._13n1jqk5 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+._13n1jqk6 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -56,28 +61,31 @@
   justify-content: center;
   align-items: center;
 }
-._13n1jqk6 {
+._13n1jqk6:hover {
+  background: #0000000f;
+  cursor: pointer;
+}
+button:has(span:hover) ._13n1jqk6 {
+  background: #0000000f;
+  cursor: pointer;
+}
+._13n1jqk7 {
   border: none;
   cursor: pointer;
   line-height: 1;
   margin-left: 8px;
   padding: 0;
 }
-._13n1jqk6 >:first-child {
+._13n1jqk7 >:first-child {
   display: block;
 }
-._13n1jqk6 > :last-child {
+._13n1jqk7 > :last-child {
   display: none;
 }
-._13n1jqk7 {
+._13n1jqk8 {
   fill: var(--_1073cm819);
   color: var(--_1073cm819);
 }
-._13n1jqk8 {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 ._13n1jqk9 {
   border: none;
   color: #1F1F1F;
@@ -327,10 +335,10 @@
   }
 }
 @media screen and (max-width:768px) {
-  ._13n1jqk6 >:first-child {
+  ._13n1jqk7 >:first-child {
     display: none;
   }
-  ._13n1jqk6 > :last-child {
+  ._13n1jqk7 > :last-child {
     display: block;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.54",
+  "version": "1.0.100-dev.55",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",