@axos-web-dev/shared-components 1.0.100-dev.53-chat-revamp.2 → 1.0.100-dev.53-chat-revamp.3

package/dist/Chatbot/ChatWindow.d.ts

@@ -12,7 +12,7 @@ export interface ChatBubble {
     isOwn?: boolean;
 }
 interface ChatWindowProps {
-    messages: MessageResponse[];
+    messages: Array<MessageResponse>;
     status?: string;
     onSend: (msg: string) => void;
     inputDisabled?: boolean;

package/dist/Chatbot/ChatWindow.js

@@ -6,12 +6,11 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
 /* empty css                               */
 /* empty css                                    */
 import clsx from "clsx";
-import React, { useRef, useEffect, Fragment as Fragment$1 } from "react";
-import ReactMarkdown from "react-markdown";
+import React, { useRef, useEffect } from "react";
 import { useNetworkState, useMount } from "react-use";
-import remarkGfm from "remark-gfm";
 import { gradientFocus } from "./AnimatedGradientBorder.css.js";
-import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, messagesContainerStyle, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
+import { ChatbotMessage } from "./ChatbotMessage.js";
+import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, messagesContainerStyle, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
 import EllipsisLoader from "./EllipsisAnimation.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
 import { useOpenChat } from "./store/chat.js";
@@ -408,157 +407,18 @@ const ChatWindow = ({
           )
         }
       ),
-      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),
-        msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: notificationStyle,
-              style: { fontSize: 12 },
-              children: [
-                "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at ",
-                /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
-                "."
-              ]
-            },
-            msg.$index
-          ),
-          /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: endChatButtonStyle,
-              onClick: onCancelEndChat,
-              children: "End Chat"
-            }
-          ) })
-        ] }),
-        ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              messageStyle,
-              msg.$userType == "end_user" ? user_msg : agent_msg
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  fontSize: 14,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 4
-                },
-                children: [
-                  msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px"
-                      },
-                      children: [
-                        showAvatar && /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            width: 24,
-                            height: 24,
-                            src: virtualAgent?.avatar_url,
-                            alt: "agent avatar"
-                          }
-                        ),
-                        showName && /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
-                      ]
-                    }
-                  ),
-                  msg.$userType != "end_user" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                    ReactMarkdown,
-                    {
-                      remarkPlugins: [[remarkGfm, { singleTilde: false }]],
-                      components: {
-                        p: ({ ...props }) => /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            style: { margin: 0, fontSize: "inherit" },
-                            title: new Date(
-                              msg.$timestamp
-                            ).toLocaleTimeString([], {
-                              hour: "2-digit",
-                              minute: "2-digit"
-                            }),
-                            ...props
-                          }
-                        )
-                      },
-                      children: msg.content
-                    }
-                  ) }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      title: new Date(msg.$timestamp).toLocaleTimeString([], {
-                        hour: "2-digit",
-                        minute: "2-digit"
-                      }),
-                      children: msg.content
-                    }
-                  )
-                ]
-              }
-            )
-          },
-          msg.$index
-        ),
-        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) => {
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: inline_button,
-              onClick: () => {
-                onSend(button?.title);
-              },
-              children: button.title
-            },
-            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: onCancelEndChat,
-              children: "End Chat"
-            }
-          ) })
-        ] })
-      ] }, msg.$index)),
+      messages?.map((msg) => /* @__PURE__ */ jsx(
+        ChatbotMessage,
+        {
+          msg,
+          onSend,
+          showAvatar,
+          showName,
+          virtualAgent,
+          onCancelEndChat
+        },
+        msg?.$index
+      )),
       showReconnect && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from '@ujet/websdk-headless';
+
+interface MessageResponse extends BaseMessageResponse {
+    to_agent?: HumanAgent;
+}
+interface ChatbotMessageProps {
+    msg: MessageResponse;
+    showAvatar?: boolean;
+    showName?: boolean;
+    virtualAgent?: VirtualAgent | null;
+    onCancelEndChat?: () => void;
+    onSend?: (content: string) => void;
+}
+export declare const ChatbotMessage: FC<ChatbotMessageProps>;
+export {};

package/dist/Chatbot/ChatbotMessage.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { vars } from "../themes/axos.css.js";
+import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+/* empty css                                   */
+/* 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";
+function timeAgo(date) {
+  const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
+  if (seconds < 60) return "Just now";
+  return new Date(date).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+const ChatbotMessage = ({
+  msg,
+  showAvatar,
+  showName,
+  virtualAgent,
+  onCancelEndChat,
+  onSend
+}) => {
+  const [timeText, setTimeText] = useState(timeAgo(msg.$timestamp));
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeText(timeAgo(msg.$timestamp));
+    }, 3e4);
+    return () => clearInterval(interval);
+  }, [msg.$timestamp]);
+  if (msg.$sid === "typing-1") {
+    return /* @__PURE__ */ jsx("div", { children: "IA is 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),
+    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),
+    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: notificationStyle,
+          style: { fontSize: 12 },
+          children: [
+            "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
+            " ",
+            /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
+            "."
+          ]
+        },
+        msg.$index
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
+    ] }),
+    ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          messageStyle,
+          msg.$userType == "end_user" ? user_msg : agent_msg
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 14,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: [
+              msg.$userType == "virtual_agent" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    showAvatar && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        width: 24,
+                        height: 24,
+                        src: virtualAgent?.avatar_url,
+                        alt: "agent avatar"
+                      }
+                    ),
+                    showName && /* @__PURE__ */ jsx("strong", { children: virtualAgent?.name })
+                  ]
+                }
+              ),
+              msg.$userType != "end_user" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                ReactMarkdown,
+                {
+                  remarkPlugins: [[remarkGfm, { singleTilde: false }]],
+                  components: {
+                    p: ({ ...props }) => /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: { margin: 0, fontSize: "inherit" },
+                        title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit"
+                        }),
+                        ...props
+                      }
+                    )
+                  },
+                  children: msg.content
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  title: new Date(msg.$timestamp).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  }),
+                  children: msg.content
+                }
+              )
+            ]
+          }
+        )
+      },
+      msg.$index
+    ),
+    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) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: inline_button,
+          onClick: () => {
+            onSend?.(button?.title);
+          },
+          children: button.title
+        },
+        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: onCancelEndChat, children: "End Chat" }) })
+    ] }),
+    msg.type == "text" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          textAlign: msg.$userType === "end_user" ? "right" : "left",
+          fontSize: 12,
+          color: vars.chatbot.window.timestampColor
+        },
+        children: timeText
+      }
+    )
+  ] });
+};
+export {
+  ChatbotMessage
+};

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

@@ -1,7 +1,7 @@
 import { MessageResponse } from '@ujet/websdk-headless';
 
 interface MessageStore {
-    messages: MessageResponse[];
+    messages: Array<MessageResponse>;
     addMessage: (message: MessageResponse) => void;
     removeMessage: (id: string) => void;
     addMessages: (newMessages: MessageResponse[]) => void;

package/dist/Chatbot/store/messages.js

@@ -2,9 +2,18 @@ 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) => msg.id !== id)
-  })),
+  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)
+  ),
   addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
   clearMessages: () => set({ messages: [] })
 }));

package/dist/assets/Chatbot/ChatWindow.css

@@ -132,7 +132,7 @@
 ._13n1jqke {
   border-top-left-radius: 32px;
   border-top-right-radius: 32px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   max-width: 93%;
   padding: 12px 24px;
 }

package/dist/assets/themes/axos.css

@@ -47,4 +47,5 @@
   --_1073cm81a: #F5F5F5;
   --_1073cm81b: #DEF4FF;
   --_1073cm81c: #E9EBEF;
+  --_1073cm81d: #8C8C8C;
 }

package/dist/assets/themes/premier.css

@@ -47,4 +47,5 @@
   --_1073cm81a: #F5F5F5;
   --_1073cm81b: #DEF4FF;
   --_1073cm81c: #000000;
+  --_1073cm81d: #1F1F1F;
 }

package/dist/assets/themes/ufb.css

@@ -47,4 +47,5 @@
   --_1073cm81a: #EDEEF0;
   --_1073cm81b: #FFF8F6;
   --_1073cm81c: #000000;
+  --_1073cm81d: #000000;
 }

package/dist/assets/themes/victorie.css

@@ -47,4 +47,5 @@
   --_1073cm81a: #F5F5F5;
   --_1073cm81b: #DEF4FF;
   --_1073cm81c: #000000;
+  --_1073cm81d: #1F1F1F;
 }

package/dist/themes/axos.css.d.ts

@@ -77,6 +77,7 @@ export declare const axosTheme: string, vars: {
             agentBackground: `var(--${string})`;
             userBackground: `var(--${string})`;
             inputBorder: `var(--${string})`;
+            timestampColor: `var(--${string})`;
         };
     };
 };

package/dist/themes/axos.css.js

@@ -1,6 +1,6 @@
 import '../assets/themes/axos.css';/* empty css                        */
 var axosTheme = "_1073cm80";
-var vars = { colors: { primary: { background: "var(--_1073cm81)", backgroundButton: "var(--_1073cm82)", body: "var(--_1073cm83)", border: "var(--_1073cm84)", headline: "var(--_1073cm85)", textButton: "var(--_1073cm86)", textGradient: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", backgroundButton: "var(--_1073cm89)", body: "var(--_1073cm8a)", border: "var(--_1073cm8b)", headline: "var(--_1073cm8c)", textButton: "var(--_1073cm8d)", textGradient: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", backgroundButton: "var(--_1073cm8g)", body: "var(--_1073cm8h)", border: "var(--_1073cm8i)", headline: "var(--_1073cm8j)", textButton: "var(--_1073cm8k)", textGradient: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", backgroundButton: "var(--_1073cm8n)", body: "var(--_1073cm8o)", border: "var(--_1073cm8p)", headline: "var(--_1073cm8q)", textButton: "var(--_1073cm8r)", textGradient: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } }, selecction: { icon: { color: "var(--_1073cm812)" } }, chatbot: { bubble: { background: "var(--_1073cm813)", border: "var(--_1073cm814)", borderGradient: "var(--_1073cm815)", icon: "var(--_1073cm816)" }, window: { background: "var(--_1073cm817)", headerBackground: "var(--_1073cm818)", headerText: "var(--_1073cm819)", agentBackground: "var(--_1073cm81a)", userBackground: "var(--_1073cm81b)", inputBorder: "var(--_1073cm81c)" } } };
+var vars = { colors: { primary: { background: "var(--_1073cm81)", backgroundButton: "var(--_1073cm82)", body: "var(--_1073cm83)", border: "var(--_1073cm84)", headline: "var(--_1073cm85)", textButton: "var(--_1073cm86)", textGradient: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", backgroundButton: "var(--_1073cm89)", body: "var(--_1073cm8a)", border: "var(--_1073cm8b)", headline: "var(--_1073cm8c)", textButton: "var(--_1073cm8d)", textGradient: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", backgroundButton: "var(--_1073cm8g)", body: "var(--_1073cm8h)", border: "var(--_1073cm8i)", headline: "var(--_1073cm8j)", textButton: "var(--_1073cm8k)", textGradient: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", backgroundButton: "var(--_1073cm8n)", body: "var(--_1073cm8o)", border: "var(--_1073cm8p)", headline: "var(--_1073cm8q)", textButton: "var(--_1073cm8r)", textGradient: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } }, selecction: { icon: { color: "var(--_1073cm812)" } }, chatbot: { bubble: { background: "var(--_1073cm813)", border: "var(--_1073cm814)", borderGradient: "var(--_1073cm815)", icon: "var(--_1073cm816)" }, window: { background: "var(--_1073cm817)", headerBackground: "var(--_1073cm818)", headerText: "var(--_1073cm819)", agentBackground: "var(--_1073cm81a)", userBackground: "var(--_1073cm81b)", inputBorder: "var(--_1073cm81c)", timestampColor: "var(--_1073cm81d)" } } };
 export {
   axosTheme,
   vars

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.53-chat-revamp.2",
+  "version": "1.0.100-dev.53-chat-revamp.3",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",