@axos-web-dev/shared-components 1.0.100-dev.74 → 1.0.100-dev.76

package/dist/Chatbot/ChatWindow.js

@@ -41,7 +41,9 @@ const ChatWindow = ({
     showThankyouMessage,
     displayThankyouMessage,
     toggleThankyouMessage,
-    hasEscalated
+    hasEscalated,
+    isBlockedInput,
+    isOpen
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -50,9 +52,6 @@ const ChatWindow = ({
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
-  const isOpen = useOpenChat((state2) => state2.isOpen);
-  const isBlockedInput = useOpenChat((state2) => state2.isBlockedInput);
-  const blockInput = useOpenChat((state2) => state2.blockInput);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -60,10 +59,7 @@ const ChatWindow = ({
     e.preventDefault();
     const cleaned = cleanInput(input);
     if (isBlockedInput) return;
-    if (cleaned) {
-      if (!hasEscalated) {
-        blockInput?.();
-      }
+    if (cleaned != "") {
       onSend(cleaned);
       setInput("");
     }
@@ -457,7 +453,7 @@ const ChatWindow = ({
         style: {
           display: "flex",
           padding: "12px 16px",
-          background: "#ffffff",
+          background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
           borderRadius: 12
         },
         children: [

package/dist/Chatbot/Chatbot.js

@@ -22,7 +22,7 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    isBlockedInput
+    blockInput
   } = useOpenChat();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
@@ -99,31 +99,31 @@ const Chatbot = ({
   };
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
-    if (["system", "virtual_agent", "user"].includes(message.$userType) && message.event === void 0) {
-      console.log(message.$userType, "not end user");
+    const { event, $userType } = message;
+    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
       addMessage(message);
-      if (!hasEscalated && isBlockedInput) {
+      if (!hasEscalated) {
         unblockInput?.();
       }
       return;
     }
-    const eventName = message?.event;
-    switch (eventName) {
+    switch (event) {
       case "escalationAccepted":
+      case "escalationStarted":
         setScalationStarted(true);
         startEscalation?.();
         addMessage(message);
         return;
-      case "escalationStarted":
-        setScalationStarted(true);
-        startEscalation?.();
+      case "escalationEnded":
+      case "escalationFailed": {
+        endEscalation?.();
         addMessage(message);
         return;
+      }
       default:
         addMessage(message);
         if (["end_user"].includes(message.$userType)) {
           if (!hasEscalated) {
-            console.log(message.$userType, "end user");
             addMessage(typingMessage);
           }
         }
@@ -294,7 +294,15 @@ const Chatbot = ({
   };
   const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
-    await clientRef.current?.sendTextMessage(msg);
+    try {
+      await clientRef.current?.sendTextMessage(msg);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      if (!hasEscalated) {
+        blockInput?.();
+      }
+    }
   };
   const onEndChat = async () => {
     console.log("Ending chat");

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 { shimmerText, notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
+import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
 import { useOpenChat } from "./store/chat.js";
 function timeAgo(date) {
   const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
@@ -24,7 +24,6 @@ const ChatbotMessage = ({
   showAvatar,
   showName,
   virtualAgent,
-  onCancelEndChat,
   onEndChat,
   onSend
 }) => {
@@ -76,23 +75,20 @@ const ChatbotMessage = ({
       " ",
       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" }) })
-    ] }),
+    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsx(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
+    ) }),
     ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
       "div",
       {
@@ -181,7 +177,28 @@ const ChatbotMessage = ({
         index
       );
     }) }),
-    msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    msg.event == "chatEnded" && msg.status == "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          title: (/* @__PURE__ */ new Date()).toLocaleString(),
+          style: {
+            fontSize: 12,
+            color: "#888",
+            marginBottom: 4,
+            textAlign: "center"
+          },
+          children: [
+            "No team members are online at the moment.",
+            /* @__PURE__ */ jsx("br", {}),
+            " Please try again later."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
+    ] }),
+    msg.event == "chatEnded" && msg.status != "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/Forms/BoatMooringLocation.js

@@ -198,7 +198,7 @@ const BoatMooringLocation = ({
               {
                 id: "marinaAddress",
                 ...register("marinaAddress", { required: true }),
-                label: "Marina Address",
+                label: "Marina Address Line 1",
                 sizes: "medium",
                 required: true,
                 helperText: errors.marinaAddress?.message,
@@ -209,7 +209,7 @@ const BoatMooringLocation = ({
               Input,
               {
                 id: "marinaAddress2",
-                label: "Alternate Marina Address (if applicable)",
+                label: "Marina Address Line 2 (optional)",
                 sizes: "medium",
                 required: false,
                 helperText: errors.marinaAddress2?.message,
@@ -306,7 +306,7 @@ const BoatMooringLocation = ({
                 {
                   id: "extraMarinaAddress",
                   ...register("extraMarinaAddress"),
-                  label: "Marina Address",
+                  label: "Marina Address Line 1",
                   sizes: "medium",
                   required: false,
                   helperText: errors.extraMarinaAddress?.message,
@@ -317,7 +317,7 @@ const BoatMooringLocation = ({
                 Input,
                 {
                   id: "extraMarinaAddress2",
-                  label: "Alternate Marina Address (if applicable)",
+                  label: "Marina Address Line 2 (optional)",
                   sizes: "medium",
                   required: false,
                   helperText: errors.extraMarinaAddress2?.message,

package/dist/assets/Chatbot/ChatWindow.css

@@ -93,6 +93,7 @@ button:has(span:hover) ._13n1jqk6 {
   font-size: 16px;
   opacity: 0.7;
   outline: none;
+  background: transparent;
   resize: none;
 }
 ._13n1jqk9::placeholder {
@@ -101,21 +102,23 @@ button:has(span:hover) ._13n1jqk6 {
 ._1hpv6vm1 ._13n1jqk9::placeholder {
   color: rgba(31,31,31,.58);
 }
+._13n1jqk9:disabled {
+  cursor: not-allowed;
+}
 ._13n1jqka {
   overflow-y: hidden;
   min-height: 20px;
 }
 ._13n1jqkb {
   padding-inline: 20px;
-  background: #ffffff;
+  background: transparent;
   border: none;
 }
 ._13n1jqkb:hover {
-  background: #ffffff;
   cursor: pointer;
 }
-._1hpv6vm1 ._13n1jqkb:hover {
-  background: #eae8e8;
+._13n1jqkb:disabled {
+  cursor: not-allowed;
 }
 ._13n1jqkb svg {
   fill: rgba(31,31,31,.38);

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