@axos-web-dev/shared-components 1.0.100-dev.7 → 1.0.100-dev.8

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

@@ -15,3 +15,4 @@ export declare const endChatButtonStyle: string;
 export declare const chatbotMenu: string;
 export declare const chatbotMenuItem: string;
 export declare const chatNetworkStatus: string;
+export declare const chatFinishDialog: string;

package/dist/Chatbot/ChatWindow.css.js

@@ -16,9 +16,11 @@ var endChatButtonStyle = "_13n1jqkd";
 var chatbotMenu = "_13n1jqke";
 var chatbotMenuItem = "_13n1jqkf";
 var chatNetworkStatus = "_13n1jqkg";
+var chatFinishDialog = "_13n1jqkh";
 export {
   arrowFill,
   button_reset,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotMenu,

package/dist/Chatbot/ChatWindow.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx, Fragment as Fragment$1 } 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, button_reset, arrowFill, chatNetworkStatus, notificationStyle, messageStyle, inline_button_wrapper, inline_button, endChatButtonStyle, messagesContainerStyle, inputStyle, sendButtonStyle, windowStyle, windowOpenStyle } 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 = ({
@@ -88,46 +88,75 @@ const ChatWindow = ({
           children: "Finish chat"
         }
       ) }) }),
-      showEndChatDialog && /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          open: showEndChatDialog,
-          style: {
-            padding: "1rem",
-            borderRadius: 8,
-            background: "#fff",
-            color: "#000",
-            border: "none",
-            outline: "none",
-            maxWidth: "90%",
-            top: "25%"
-          },
-          children: /* @__PURE__ */ jsxs("form", { method: "dialog", children: [
-            /* @__PURE__ */ jsx("p", { children: "are you sure you want to end this chat?" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                onClick: () => {
-                  endChat();
-                  setShowEndChatDialog(false);
-                },
-                children: "Yes"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setShowEndChatDialog(false);
-                },
-                children: "No"
-              }
-            )
-          ] })
-        }
-      ),
+      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",
         {
@@ -156,7 +185,7 @@ const ChatWindow = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: mounted && !state.online ? /* @__PURE__ */ jsxs(
+    mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
@@ -178,9 +207,9 @@ const ChatWindow = ({
           "You are currently disconnected. Please check your connection."
         ]
       }
-    ) : null }),
+    ) }) : 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" }),
@@ -282,7 +311,7 @@ const ChatWindow = ({
             index
           );
         }) }),
-        msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -332,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/index.js

@@ -4,7 +4,7 @@ import { bubbleWrapper, svgFill } from "./Bubble.css.js";
 import { Chatbot } from "./Chatbot.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
-import { arrowFill, button_reset, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, 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";
@@ -15,6 +15,7 @@ export {
   arrowFill,
   bubbleWrapper,
   button_reset,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotAXB,

package/dist/Chatbot/useHeadlessChat.js

@@ -68,9 +68,11 @@ function useHeadlessChat({
       if (debug) console.log("channelId:", menuRef.current);
       if (debug) console.log("channelId:", menuRef.current?.menus[5].id);
       try {
-        const chatId = localStorage.getItem("ujet:chat");
-        if (chatId) {
-          chatRef.current = await clientRef.current?.resumeChat(chatId);
+        chatRef.current = await clientRef.current?.loadOngoingChat();
+        if (chatRef.current != null) {
+          chatRef.current = await clientRef.current?.resumeChat(
+            chatRef.current?.state?.id
+          );
           if (debug) console.log("Resumed chatRef:", chatRef.current);
         } else {
           const custom_data = {

package/dist/assets/Chatbot/ChatWindow.css

@@ -203,4 +203,11 @@
 }
 ._1hpv6vm1 ._13n1jqkg {
   color: #323339;
+}
+._13n1jqkh {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
 }

package/dist/main.js

@@ -42,7 +42,7 @@ import { bubbleWrapper, svgFill } from "./Chatbot/Bubble.css.js";
 import { Chatbot } from "./Chatbot/Chatbot.js";
 import { chatbotAXB, chatbotUFB } from "./Chatbot/Chatbot.css.js";
 import { ChatWindow } from "./Chatbot/ChatWindow.js";
-import { arrowFill, button_reset, chatNetworkStatus, chat_title, chatbotMenu, chatbotMenuItem, endChatButtonStyle, inline_button, inline_button_wrapper, inputStyle, messageStyle, messagesContainerStyle, notificationStyle, sendButtonStyle, windowBarStyle, windowOpenStyle, windowStyle } from "./Chatbot/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 "./Chatbot/ChatWindow.css.js";
 import { useOpenChat } from "./Chatbot/store/chat.js";
 import { useMessages } from "./Chatbot/store/messages.js";
 import { useHeadlessChat } from "./Chatbot/useHeadlessChat.js";
@@ -457,6 +457,7 @@ export {
   center_center,
   center_left,
   center_right,
+  chatFinishDialog,
   chatNetworkStatus,
   chat_title,
   chatbotAXB,

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