@axos-web-dev/shared-components 2.2.5 → 2.2.7

package/dist/Chatbot/ChatWindow.js

@@ -1,17 +1,19 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { LoadingIndicator } from "../LoadingIndicator/index.js";
 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 React, { useRef, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { useNetworkState, useMount } from "react-use";
-import { gradientFocus } from "./AnimatedGradientBorder.css.js";
+import { focusAnimation, gradientFocus } from "./AnimatedGradientBorder.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, shimmerText, messagesContainerStyle, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle } from "./ChatWindow.css.js";
+import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, shimmerText, messagesContainerStyle, formTextButton, inputStyle, autoResize, sendButtonStyle, chatAiDisclaimer, windowStyle, windowOpenStyle, windowExpandedStyle } from "./ChatWindow.css.js";
 import { EllipsisIcon } from "./EllipsisIcon.js";
+import { ExpandChatToggle } from "./ExpandChatToggle.js";
 import { useOpenChat } from "./store/chat.js";
 import { ThankYouMessage } from "./ThankYouMessage.js";
 const ChatWindow = ({
@@ -39,12 +41,15 @@ const ChatWindow = ({
 }) => {
   const {
     showThankyouMessage,
-    displayThankyouMessage,
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
     isOpen,
-    hasOpenedOnce
+    hasOpenedOnce,
+    chatStatus,
+    setChatStatus,
+    isWindowExpanded,
+    toggleWindowExpanded
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -53,6 +58,7 @@ const ChatWindow = ({
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -83,9 +89,6 @@ const ChatWindow = ({
   useEffect(() => {
     autoResizeTextarea();
   }, [input]);
-  const displayThankYouScreen = () => {
-    displayThankyouMessage();
-  };
   const onCancelEndChat = () => {
     setShowEndChatDialog(false);
     toggleThankyouMessage?.();
@@ -102,102 +105,176 @@ const ChatWindow = ({
       inputRef.current.focus();
     }
   }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: clsx(windowStyle, isOpen && windowOpenStyle), children: [
-    /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
-      /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section) }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex middle center",
-          style: { paddingBlock: "6px", gap: 4 },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "svg",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        windowStyle,
+        isOpen && windowOpenStyle,
+        isWindowExpanded && windowExpandedStyle
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: windowBarStyle, children: [
+          /* @__PURE__ */ jsx("div", { className: clsx(left_bar_section), children: /* @__PURE__ */ jsx(
+            ExpandChatToggle,
+            {
+              isExpanded: isWindowExpanded,
+              onToggle: toggleWindowExpanded
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex middle center",
+              style: { paddingBlock: "6px", gap: 4 },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "17",
+                    viewBox: "0 0 20 17",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M10.5277 2.78937C10.8911 2.78937 11.1852 3.08251 11.1853 3.44452C11.1852 3.80654 10.8911 4.10056 10.5277 4.10056H5.26386C4.5371 4.10064 3.94791 4.68761 3.94789 5.41175V10.6565C3.9479 11.3806 4.5371 11.9676 5.26386 11.9677H6.97488C7.12012 11.9678 7.23818 12.0854 7.23825 12.2301V15.6861L10.8932 12.0445C10.9424 11.9956 11.0092 11.9679 11.0786 11.9677H14.4765C15.2032 11.9676 15.7925 11.3806 15.7925 10.6565V9.27302C15.7925 8.91106 16.0868 8.61721 16.45 8.61697C16.8134 8.61699 17.1084 8.91093 17.1084 9.27302V10.6565C17.1084 12.1048 15.9301 13.2788 14.4765 13.2789H11.5149L8.16901 16.6135C7.33997 17.4393 5.92245 16.8542 5.92229 15.6861V13.2789H5.26386C3.81026 13.2788 2.63193 12.1048 2.63193 10.6565V5.41175C2.63194 3.96341 3.81027 2.78945 5.26386 2.78937H10.5277Z",
+                          fill: "#1E3860"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M9.21265 0.166102C9.57579 0.166381 9.87012 0.460269 9.87018 0.822142C9.87004 1.18394 9.57574 1.47701 9.21265 1.47729H3.29036C2.20017 1.47729 1.31606 2.35831 1.31596 3.44452V6.72294C1.31577 7.08487 1.02083 7.37808 0.657534 7.37808C0.294361 7.37794 0.000196551 7.08478 0 6.72294V3.44452C9.80773e-05 1.63411 1.47333 0.166102 3.29036 0.166102H9.21265Z",
+                          fill: "#1E3860"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M15.7145 0.475824C15.9558 -0.158638 16.8779 -0.158578 17.1192 0.475824L17.6459 1.8611C17.7218 2.06058 17.8835 2.2175 18.0885 2.29132L19.511 2.80454C20.163 3.03936 20.163 3.93626 19.511 4.17107L18.0885 4.6843C17.8835 4.75812 17.7218 4.91504 17.6459 5.11452L17.1192 6.49979C16.8779 7.1342 15.9558 7.13426 15.7145 6.49979L15.1878 5.11452C15.1119 4.91508 14.9502 4.75811 14.7453 4.6843L13.3227 4.17107C12.6708 3.93622 12.6708 3.0394 13.3227 2.80454L14.7453 2.29132C14.9502 2.21751 15.1119 2.06054 15.1878 1.8611L15.7145 0.475824Z",
+                          fill: "#1E3860"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Ask Evo AI" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: clsx(buttonss_section), children: [
+            /* @__PURE__ */ jsx(
+              "button",
               {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "20",
-                height: "17",
-                viewBox: "0 0 20 17",
-                fill: "none",
+                disabled: messages.length === 0,
+                onClick: () => {
+                  setMenuOpen(!menuOpen);
+                },
+                className: clsx(button_bar),
+                style: {
+                  border: menuOpen ? `1px solid ${vars.chatbot.window.headerText}` : "none",
+                  cursor: "pointer",
+                  padding: 0,
+                  display: "flex",
+                  alignContent: "center",
+                  background: menuOpen ? "#0000000f" : void 0
+                },
+                "aria-label": "end chat with evo ai",
+                title: "end chat",
+                children: /* @__PURE__ */ jsx(EllipsisIcon, { color: vars.chatbot.window.headerText })
+              }
+            ),
+            menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setShowEndChatDialog(true);
+                  setMenuOpen(false);
+                },
+                style: {
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "12px"
+                },
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "path",
+                  /* @__PURE__ */ jsx("div", { className: clsx(button_bar), children: /* @__PURE__ */ jsxs(
+                    "svg",
                     {
-                      d: "M10.5277 2.78937C10.8911 2.78937 11.1852 3.08251 11.1853 3.44452C11.1852 3.80654 10.8911 4.10056 10.5277 4.10056H5.26386C4.5371 4.10064 3.94791 4.68761 3.94789 5.41175V10.6565C3.9479 11.3806 4.5371 11.9676 5.26386 11.9677H6.97488C7.12012 11.9678 7.23818 12.0854 7.23825 12.2301V15.6861L10.8932 12.0445C10.9424 11.9956 11.0092 11.9679 11.0786 11.9677H14.4765C15.2032 11.9676 15.7925 11.3806 15.7925 10.6565V9.27302C15.7925 8.91106 16.0868 8.61721 16.45 8.61697C16.8134 8.61699 17.1084 8.91093 17.1084 9.27302V10.6565C17.1084 12.1048 15.9301 13.2788 14.4765 13.2789H11.5149L8.16901 16.6135C7.33997 17.4393 5.92245 16.8542 5.92229 15.6861V13.2789H5.26386C3.81026 13.2788 2.63193 12.1048 2.63193 10.6565V5.41175C2.63194 3.96341 3.81027 2.78945 5.26386 2.78937H10.5277Z",
-                      fill: "#1E3860"
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_92_1389)", children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M11.1236 5.37374L8.60278 7.89457L11.1236 10.4167L10.4166 11.1237L7.89445 8.6029L5.37362 11.1237L4.66658 10.4167L7.18742 7.89457L4.66658 5.37374L5.37362 4.66671L7.89445 7.18754L10.4166 4.66671L11.1236 5.37374Z",
+                              fill: vars.chatbot.window.headerText
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              clipRule: "evenodd",
+                              d: "M13.3333 0.833374C14.3458 0.833374 15.1666 1.65419 15.1666 2.66671V13.3334C15.1666 14.3459 14.3458 15.1667 13.3333 15.1667H2.66659C1.65406 15.1667 0.833252 14.3459 0.833252 13.3334V2.66671C0.833252 1.65419 1.65406 0.833374 2.66659 0.833374H13.3333ZM2.66659 1.83337C2.20635 1.83337 1.83325 2.20647 1.83325 2.66671V13.3334C1.83325 13.7936 2.20635 14.1667 2.66659 14.1667H13.3333C13.7935 14.1667 14.1666 13.7936 14.1666 13.3334V2.66671C14.1666 2.20647 13.7935 1.83337 13.3333 1.83337H2.66659Z",
+                              fill: vars.chatbot.window.headerText
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_92_1389", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white" }) }) })
+                      ]
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M9.21265 0.166102C9.57579 0.166381 9.87012 0.460269 9.87018 0.822142C9.87004 1.18394 9.57574 1.47701 9.21265 1.47729H3.29036C2.20017 1.47729 1.31606 2.35831 1.31596 3.44452V6.72294C1.31577 7.08487 1.02083 7.37808 0.657534 7.37808C0.294361 7.37794 0.000196551 7.08478 0 6.72294V3.44452C9.80773e-05 1.63411 1.47333 0.166102 3.29036 0.166102H9.21265Z",
-                      fill: "#1E3860"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M15.7145 0.475824C15.9558 -0.158638 16.8779 -0.158578 17.1192 0.475824L17.6459 1.8611C17.7218 2.06058 17.8835 2.2175 18.0885 2.29132L19.511 2.80454C20.163 3.03936 20.163 3.93626 19.511 4.17107L18.0885 4.6843C17.8835 4.75812 17.7218 4.91504 17.6459 5.11452L17.1192 6.49979C16.8779 7.1342 15.9558 7.13426 15.7145 6.49979L15.1878 5.11452C15.1119 4.91508 14.9502 4.75811 14.7453 4.6843L13.3227 4.17107C12.6708 3.93622 12.6708 3.0394 13.3227 2.80454L14.7453 2.29132C14.9502 2.21751 15.1119 2.06054 15.1878 1.8611L15.7145 0.475824Z",
-                      fill: "#1E3860"
-                    }
-                  )
+                  ) }),
+                  /* @__PURE__ */ jsx("span", { children: "End Chat" })
                 ]
               }
-            ),
-            /* @__PURE__ */ jsx("h2", { className: chat_title, children: "Ask Evo AI" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: clsx(buttonss_section), children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            disabled: messages.length === 0,
-            onClick: () => {
-              setMenuOpen(!menuOpen);
-            },
-            className: clsx(button_bar),
-            style: {
-              border: menuOpen ? `1px solid ${vars.chatbot.window.headerText}` : "none",
-              cursor: "pointer",
-              padding: 0,
-              display: "flex",
-              alignContent: "center",
-              background: menuOpen ? "#0000000f" : void 0
-            },
-            children: /* @__PURE__ */ jsx(EllipsisIcon, {})
-          }
-        ),
-        menuOpen && /* @__PURE__ */ jsx("ul", { className: clsx(chatbotMenu), children: /* @__PURE__ */ jsx("li", { className: chatbotMenuItem, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setShowEndChatDialog(true);
-              setMenuOpen(false);
-            },
-            style: {
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              gap: "12px"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: clsx(button_bar), children: /* @__PURE__ */ jsxs(
-                "svg",
+            ) }) }),
+            showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  fill: "none",
-                  children: [
-                    /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_92_1389)", children: [
+                  style: {
+                    background: "#00000080",
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 999
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("dialog", { open: showEndChatDialog, className: chatEndDialogOverlay, children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
+                /* @__PURE__ */ jsx("div", { className: clsx(button_bar, chatEndCircle), children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: [
                       /* @__PURE__ */ jsx(
                         "path",
                         {
-                          d: "M11.1236 5.37374L8.60278 7.89457L11.1236 10.4167L10.4166 11.1237L7.89445 8.6029L5.37362 11.1237L4.66658 10.4167L7.18742 7.89457L4.66658 5.37374L5.37362 4.66671L7.89445 7.18754L10.4166 4.66671L11.1236 5.37374Z",
-                          fill: "#1E3860"
+                          d: "M12.7514 7.14531V15.3953H11.2514V7.14531H12.7514Z",
+                          fill: "#D2272F"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M12.0014 16.8953C12.6227 16.8953 13.1264 17.399 13.1264 18.0203C13.1264 18.6416 12.6227 19.1453 12.0014 19.1453C11.3801 19.1453 10.8764 18.6416 10.8764 18.0203C10.8764 17.399 11.3801 16.8953 12.0014 16.8953Z",
+                          fill: "#D2272F"
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -205,326 +282,334 @@ const ChatWindow = ({
                         {
                           fillRule: "evenodd",
                           clipRule: "evenodd",
-                          d: "M13.3333 0.833374C14.3458 0.833374 15.1666 1.65419 15.1666 2.66671V13.3334C15.1666 14.3459 14.3458 15.1667 13.3333 15.1667H2.66659C1.65406 15.1667 0.833252 14.3459 0.833252 13.3334V2.66671C0.833252 1.65419 1.65406 0.833374 2.66659 0.833374H13.3333ZM2.66659 1.83337C2.20635 1.83337 1.83325 2.20647 1.83325 2.66671V13.3334C1.83325 13.7936 2.20635 14.1667 2.66659 14.1667H13.3333C13.7935 14.1667 14.1666 13.7936 14.1666 13.3334V2.66671C14.1666 2.20647 13.7935 1.83337 13.3333 1.83337H2.66659Z",
-                          fill: "#1E3860"
+                          d: "M9.31805 3.51187L2.17215 17.8037C1.1748 19.7984 2.62529 22.1453 4.85543 22.1453H19.1472C21.3774 22.1453 22.8279 19.7984 21.8305 17.8037L14.6846 3.51188C13.579 1.30073 10.4236 1.30073 9.31805 3.51187ZM3.51379 18.4745L10.6597 4.18269C11.2125 3.07712 12.7902 3.07712 13.343 4.1827L20.4889 18.4745C20.9875 19.4718 20.2623 20.6453 19.1472 20.6453H4.85543C3.74036 20.6453 3.01512 19.4718 3.51379 18.4745Z",
+                          fill: "#D2272F"
                         }
                       )
-                    ] }),
-                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_92_1389", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white" }) }) })
-                  ]
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "Are you sure you want to end",
+                  /* @__PURE__ */ jsx("br", {}),
+                  " this chat?"
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "1rem",
+                      marginTop: "1rem",
+                      flexDirection: "column",
+                      marginBottom: 24,
+                      width: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: endChatButtonStyle,
+                          type: "submit",
+                          onClick: () => {
+                            endChat();
+                            setChatStatus("ending");
+                            setShowEndChatDialog(false);
+                          },
+                          children: "Yes, End Chat"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          className: clsx(endChatButtonStyle, noAnswerButton),
+                          type: "button",
+                          onClick: () => {
+                            setShowEndChatDialog(false);
+                          },
+                          children: "No, Go Back"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                " "
+              ] }) })
+            ] }),
+            chatStatus == "ending" && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    background: "#00000080",
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 999
+                  }
                 }
-              ) }),
-              /* @__PURE__ */ jsx("span", { children: "End Chat" })
-            ]
-          }
-        ) }) }),
-        showEndChatDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                background: "#00000080",
-                position: "fixed",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 999
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("dialog", { open: showEndChatDialog, className: chatEndDialogOverlay, children: /* @__PURE__ */ jsxs("form", { method: "dialog", className: chatFinishDialog, children: [
-            /* @__PURE__ */ jsx("div", { className: clsx(button_bar, chatEndCircle), children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M12.7514 7.14531V15.3953H11.2514V7.14531H12.7514Z",
-                      fill: "#D2272F"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M12.0014 16.8953C12.6227 16.8953 13.1264 17.399 13.1264 18.0203C13.1264 18.6416 12.6227 19.1453 12.0014 19.1453C11.3801 19.1453 10.8764 18.6416 10.8764 18.0203C10.8764 17.399 11.3801 16.8953 12.0014 16.8953Z",
-                      fill: "#D2272F"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 1e3,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    LoadingIndicator,
                     {
-                      fillRule: "evenodd",
-                      clipRule: "evenodd",
-                      d: "M9.31805 3.51187L2.17215 17.8037C1.1748 19.7984 2.62529 22.1453 4.85543 22.1453H19.1472C21.3774 22.1453 22.8279 19.7984 21.8305 17.8037L14.6846 3.51188C13.579 1.30073 10.4236 1.30073 9.31805 3.51187ZM3.51379 18.4745L10.6597 4.18269C11.2125 3.07712 12.7902 3.07712 13.343 4.1827L20.4889 18.4745C20.9875 19.4718 20.2623 20.6453 19.1472 20.6453H4.85543C3.74036 20.6453 3.01512 19.4718 3.51379 18.4745Z",
-                      fill: "#D2272F"
+                      variant: "primary",
+                      style: { borderTopColor: vars.chatbot.bubble.glowShadow }
                     }
                   )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              "Are you sure you want to end",
-              /* @__PURE__ */ jsx("br", {}),
-              " this chat?"
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(
+              ThankYouMessage,
               {
-                style: {
-                  display: "flex",
-                  gap: "1rem",
-                  marginTop: "1rem",
-                  flexDirection: "column",
-                  marginBottom: 24,
-                  width: "100%"
+                showEndChatDialog: showThankyouMessage,
+                onStart: onStartChat,
+                onClose: onCancelEndChat
+              }
+            ),
+            onClose && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  onClose();
+                  setMenuOpen(false);
                 },
+                className: clsx(button_reset, button_bar),
+                "aria-label": "Close chat window",
+                title: "Close",
                 children: [
                   /* @__PURE__ */ jsx(
-                    "button",
+                    "svg",
                     {
-                      className: endChatButtonStyle,
-                      type: "submit",
-                      onClick: () => {
-                        endChat();
-                        displayThankYouScreen();
-                        setShowEndChatDialog(false);
-                      },
-                      children: "Yes, End Chat"
+                      xmlns: "http://www.w3.org/2000/svg",
+                      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",
+                          color: vars.chatbot.window.headerText
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    "button",
+                    "svg",
                     {
-                      className: clsx(endChatButtonStyle, noAnswerButton),
-                      type: "button",
-                      onClick: () => {
-                        setShowEndChatDialog(false);
-                      },
-                      children: "No, Go Back"
+                      width: "15",
+                      height: "15",
+                      viewBox: "0 0 15 15",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M13.2187 0L14.0142 0.795495L7.803 7.0065L14.0142 13.2187L13.2187 14.0142L7.0065 7.803L0.795495 14.0142L0 13.2187L6.21112 7.0065L0 0.795495L0.795495 0L7.0065 6.21112L13.2187 0Z",
+                          fill: vars.chatbot.window.headerText
+                        }
+                      )
                     }
                   )
                 ]
               }
-            ),
-            " "
-          ] }) })
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          ThankYouMessage,
-          {
-            showEndChatDialog: showThankyouMessage,
-            onStart: onStartChat,
-            onClose: onCancelEndChat
-          }
-        ),
-        onClose && /* @__PURE__ */ jsxs(
-          "button",
+        mounted && !state.online ? /* @__PURE__ */ jsx("div", { className: clsx(chatNetworkStatus), children: /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: () => {
-              onClose();
-              setMenuOpen(false);
+            style: {
+              color: "#d32f2f",
+              textAlign: "center",
+              padding: "8px 0",
+              fontWeight: 500
             },
-            className: clsx(button_reset, button_bar),
-            "aria-label": "Close chat window",
-            title: "Close",
             children: [
               /* @__PURE__ */ jsx(
-                "svg",
+                "span",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  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",
-                      color: vars.chatbot.window.headerText
-                    }
-                  )
+                  role: "img",
+                  "aria-label": "disconnected",
+                  style: { marginRight: 6 },
+                  children: "⚠️"
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "15",
-                  height: "15",
-                  viewBox: "0 0 15 15",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M13.2187 0L14.0142 0.795495L7.803 7.0065L14.0142 13.2187L13.2187 14.0142L7.0065 7.803L0.795495 14.0142L0 13.2187L6.21112 7.0065L0 0.795495L0.795495 0L7.0065 6.21112L13.2187 0Z",
-                      fill: vars.chatbot.window.headerText
-                    }
-                  )
-                }
-              )
+              "You are currently disconnected. Please check your connection."
             ]
           }
-        )
-      ] })
-    ] }),
-    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: [
-      (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__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(
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
+          (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__PURE__ */ jsx(
             "div",
             {
+              className: clsx(),
               style: {
-                fontSize: 14,
-                display: "flex",
-                flexDirection: "column",
-                gap: 4
+                textAlign: "left",
+                alignSelf: "flex-start",
+                color: "#1e3860",
+                borderRadius: 16,
+                padding: "8px 8px",
+                maxWidth: "80%",
+                marginBottom: 2
               },
-              children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
-            }
-          )
-        }
-      ),
-      messages?.map((msg) => {
-        if (!hasOpenedOnce) {
-          return null;
-        }
-        return /* @__PURE__ */ jsx(
-          ChatbotMessage,
-          {
-            msg,
-            onSend,
-            showAvatar,
-            showName,
-            virtualAgent,
-            onCancelEndChat,
-            onEndChat: () => {
-              endChat();
-              onCloseAfterThankYou();
-            },
-            inputRef
-          },
-          msg?.$index
-        );
-      }),
-      showReconnect && /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: { margin: "12px auto", display: "block" },
-          onClick: () => {
-          },
-          children: "Reconnect Chat"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 24px 16px" }, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          padding: "12px 16px",
-          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: [
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ref: inputRef,
-              value: input,
-              onChange: (e) => setInput(e.target.value),
-              onKeyDown: (e) => {
-                if (hasEscalated) {
-                  previewTyping(e.target?.value);
-                }
-                if (e.key === "Enter" && !e.shiftKey) {
-                  handleSend(e);
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 14,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 16
+                  },
+                  children: /* @__PURE__ */ jsx("p", { className: shimmerText, children: "Chat connecting..." })
                 }
-              },
-              placeholder: "Ask anything...",
-              className: clsx(inputStyle, autoResize),
-              autoFocus: true,
-              disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
-              rows: 1
+              )
             }
           ),
-          /* @__PURE__ */ jsx(
+          messages?.map((msg) => {
+            if (!hasOpenedOnce) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              ChatbotMessage,
+              {
+                msg,
+                onSend,
+                showAvatar,
+                showName,
+                virtualAgent,
+                onCancelEndChat,
+                onEndChat: () => {
+                  endChat();
+                  onCloseAfterThankYou();
+                },
+                inputRef
+              },
+              msg?.$index
+            );
+          }),
+          showReconnect && /* @__PURE__ */ jsx(
             "button",
             {
-              className: clsx(
-                sendButtonStyle,
-                input.trim().length > 0 && "active"
-              ),
-              type: "submit",
-              title: "Send message",
-              disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  fill: "none",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
+              style: { margin: "12px auto", display: "block" },
+              onClick: () => {
+              },
+              children: "Reconnect Chat"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 24px 16px" }, children: [
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  focused && !inputDisabled && !isBlockedInput ? focusAnimation : ""
+                ),
+                style: {
+                  position: "absolute",
+                  left: "10%",
+                  width: "80%",
+                  height: "40px",
+                  zIndex: "-1"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: formTextButton,
+                style: {
+                  display: "flex",
+                  padding: "12px 16px",
+                  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: [
+                  /* @__PURE__ */ jsx(
+                    "textarea",
                     {
-                      fillRule: "evenodd",
-                      clipRule: "evenodd",
-                      d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
-                      fill: "#435164"
+                      ref: inputRef,
+                      value: input,
+                      onChange: (e) => setInput(e.target.value),
+                      onKeyDown: (e) => {
+                        if (hasEscalated) {
+                          previewTyping(e.target?.value);
+                        }
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          handleSend(e);
+                        }
+                      },
+                      onFocus: () => setFocused(() => true),
+                      onBlur: () => setFocused(() => false),
+                      placeholder: "Ask anything...",
+                      "aria-label": "Ask anything...",
+                      className: clsx(inputStyle, autoResize),
+                      autoFocus: true,
+                      disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
+                      rows: 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: clsx(
+                        sendButtonStyle,
+                        input.trim().length > 0 && "active"
+                      ),
+                      type: "submit",
+                      title: "Send message",
+                      disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 16 16",
+                          fill: "none",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              clipRule: "evenodd",
+                              d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
+                              fill: "#435164"
+                            }
+                          )
+                        }
+                      )
                     }
                   )
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) }) })
-  ] });
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: chatAiDisclaimer, children: "Evo is AI and can make mistakes. Verify important details." })
+        ] })
+      ]
+    }
+  );
 };
 export {
   ChatWindow