@xcelsior/ui-chat 2.0.1 → 2.0.3

package/dist/index.mjs

@@ -11,6 +11,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectTimeoutRef = useRef(null);
   const reconnectAttemptsRef = useRef(0);
   const messageHandlerRef = useRef(null);
+  const abortedRef = useRef(false);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -43,6 +44,7 @@ function useWebSocket(config, externalWebSocket) {
     };
   }, []);
   const connect = useCallback(() => {
+    if (abortedRef.current) return;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -62,6 +64,10 @@ function useWebSocket(config, externalWebSocket) {
       }
       const ws = new WebSocket(url.toString());
       ws.onopen = () => {
+        if (abortedRef.current) {
+          ws.close(1e3, "Effect cleaned up");
+          return;
+        }
         console.log("WebSocket connected");
         setIsConnected(true);
         setError(null);
@@ -69,12 +75,14 @@ function useWebSocket(config, externalWebSocket) {
         config.onConnectionChange?.(true);
       };
       ws.onerror = (event) => {
+        if (abortedRef.current) return;
         console.error("WebSocket error:", event);
         const err = new Error("WebSocket connection error");
         setError(err);
         config.onError?.(err);
       };
       ws.onclose = (event) => {
+        if (abortedRef.current) return;
         console.log("WebSocket closed:", event.code, event.reason);
         setIsConnected(false);
         config.onConnectionChange?.(false);
@@ -123,6 +131,7 @@ function useWebSocket(config, externalWebSocket) {
   );
   const reconnect = useCallback(() => {
     reconnectAttemptsRef.current = 0;
+    abortedRef.current = false;
     connect();
   }, [connect]);
   useEffect(() => {
@@ -132,8 +141,10 @@ function useWebSocket(config, externalWebSocket) {
       const cleanup = subscribeToMessage(externalWebSocket);
       return cleanup;
     }
+    abortedRef.current = false;
     connect();
     return () => {
+      abortedRef.current = true;
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
@@ -912,7 +923,50 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
 
 // src/components/MessageList.tsx
 import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4 } from "react";
-import { Spinner } from "@xcelsior/design-system";
+
+// src/components/Spinner.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIZE_MAP = {
+  sm: 16,
+  md: 24,
+  lg: 36
+};
+var BORDER_MAP = {
+  sm: 2,
+  md: 2,
+  lg: 3
+};
+function Spinner({ size = "md", color = "currentColor" }) {
+  const px = SIZE_MAP[size];
+  const border = BORDER_MAP[size];
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("style", { children: `
+                @keyframes xchat-spin {
+                    to { transform: rotate(360deg); }
+                }
+                .xchat-spinner {
+                    animation: xchat-spin 0.75s linear infinite;
+                    border-radius: 50%;
+                    display: inline-block;
+                    flex-shrink: 0;
+                }
+            ` }),
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: "xchat-spinner",
+        role: "status",
+        "aria-label": "Loading",
+        style: {
+          width: px,
+          height: px,
+          border: `${border}px solid rgba(128,128,128,0.25)`,
+          borderTopColor: color
+        }
+      }
+    )
+  ] });
+}
 
 // src/components/MessageItem.tsx
 import { formatDistanceToNow } from "date-fns";
@@ -1007,7 +1061,7 @@ function getMarkdownStyles(theme, isLightTheme) {
 }
 
 // src/components/MarkdownMessage.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function computeIsLightTheme(theme) {
   const bgColor = theme?.background || "#00001a";
   if (!bgColor.startsWith("#")) return false;
@@ -1026,18 +1080,18 @@ function MarkdownMessage({ content, theme }) {
     // inside the bubble.
     display: "block"
   };
-  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
     ReactMarkdown,
     {
       components: {
         // Paragraphs
-        p: ({ children }) => /* @__PURE__ */ jsx3("p", { style: styles.paragraph, children }),
+        p: ({ children }) => /* @__PURE__ */ jsx4("p", { style: styles.paragraph, children }),
         // Bold
-        strong: ({ children }) => /* @__PURE__ */ jsx3("strong", { style: styles.strong, children }),
+        strong: ({ children }) => /* @__PURE__ */ jsx4("strong", { style: styles.strong, children }),
         // Italic
-        em: ({ children }) => /* @__PURE__ */ jsx3("em", { style: styles.emphasis, children }),
+        em: ({ children }) => /* @__PURE__ */ jsx4("em", { style: styles.emphasis, children }),
         // Links — open in new tab
-        a: ({ href, children }) => /* @__PURE__ */ jsx3(
+        a: ({ href, children }) => /* @__PURE__ */ jsx4(
           "a",
           {
             href,
@@ -1048,9 +1102,9 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Unordered list
-        ul: ({ children }) => /* @__PURE__ */ jsx3("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
+        ul: ({ children }) => /* @__PURE__ */ jsx4("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
         // Ordered list
-        ol: ({ children }) => /* @__PURE__ */ jsx3(
+        ol: ({ children }) => /* @__PURE__ */ jsx4(
           "ol",
           {
             style: { ...styles.list, listStyleType: "decimal" },
@@ -1058,7 +1112,7 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // List item
-        li: ({ children }) => /* @__PURE__ */ jsx3("li", { style: styles.listItem, children }),
+        li: ({ children }) => /* @__PURE__ */ jsx4("li", { style: styles.listItem, children }),
         // Inline code vs code block — react-markdown wraps fenced
         // code blocks as <pre><code className="language-*">. The
         // cleanest heuristic: if the className starts with
@@ -1068,7 +1122,7 @@ function MarkdownMessage({ content, theme }) {
             className?.startsWith("language-")
           );
           if (isBlock) {
-            return /* @__PURE__ */ jsx3(
+            return /* @__PURE__ */ jsx4(
               "code",
               {
                 className,
@@ -1077,10 +1131,10 @@ function MarkdownMessage({ content, theme }) {
               }
             );
           }
-          return /* @__PURE__ */ jsx3("code", { style: styles.code, children });
+          return /* @__PURE__ */ jsx4("code", { style: styles.code, children });
         }),
         // Pre wrapper for code blocks
-        pre: ({ children }) => /* @__PURE__ */ jsx3(
+        pre: ({ children }) => /* @__PURE__ */ jsx4(
           "pre",
           {
             style: {
@@ -1094,7 +1148,7 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Headings — h1 through h6 with progressive size reduction
-        h1: ({ children }) => /* @__PURE__ */ jsx3(
+        h1: ({ children }) => /* @__PURE__ */ jsx4(
           "h1",
           {
             style: {
@@ -1104,7 +1158,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h2: ({ children }) => /* @__PURE__ */ jsx3(
+        h2: ({ children }) => /* @__PURE__ */ jsx4(
           "h2",
           {
             style: {
@@ -1114,7 +1168,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h3: ({ children }) => /* @__PURE__ */ jsx3(
+        h3: ({ children }) => /* @__PURE__ */ jsx4(
           "h3",
           {
             style: {
@@ -1124,8 +1178,8 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h4: ({ children }) => /* @__PURE__ */ jsx3("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
-        h5: ({ children }) => /* @__PURE__ */ jsx3(
+        h4: ({ children }) => /* @__PURE__ */ jsx4("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
+        h5: ({ children }) => /* @__PURE__ */ jsx4(
           "h5",
           {
             style: {
@@ -1135,7 +1189,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h6: ({ children }) => /* @__PURE__ */ jsx3(
+        h6: ({ children }) => /* @__PURE__ */ jsx4(
           "h6",
           {
             style: {
@@ -1146,9 +1200,9 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Blockquote
-        blockquote: ({ children }) => /* @__PURE__ */ jsx3("blockquote", { style: styles.blockquote, children }),
+        blockquote: ({ children }) => /* @__PURE__ */ jsx4("blockquote", { style: styles.blockquote, children }),
         // Horizontal rule
-        hr: () => /* @__PURE__ */ jsx3("hr", { style: styles.hr })
+        hr: () => /* @__PURE__ */ jsx4("hr", { style: styles.hr })
       },
       children: content
     }
@@ -1156,7 +1210,7 @@ function MarkdownMessage({ content, theme }) {
 }
 
 // src/components/MessageItem.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function MessageItem({
   message,
   currentUser,
@@ -1182,7 +1236,7 @@ function MessageItem({
   const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
   const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.35)");
   if (isSystemMessage) {
-    return /* @__PURE__ */ jsx4("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx5(
       "div",
       {
         className: "px-4 py-1.5 rounded-full",
@@ -1190,7 +1244,7 @@ function MessageItem({
           backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.03)",
           boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06)"
         },
-        children: /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsx5(
           "p",
           {
             style: {
@@ -1229,12 +1283,12 @@ function MessageItem({
     borderRadius: "18px 18px 18px 4px",
     boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
       children: [
-        showAvatar && !isOwnMessage && /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx4(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx4(
+        showAvatar && !isOwnMessage && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx5(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx5(
           "div",
           {
             className: "h-7 w-7 rounded-full flex items-center justify-center",
@@ -1242,7 +1296,7 @@ function MessageItem({
               background: isLightTheme ? `linear-gradient(135deg, ${primaryColor}30, rgba(0,0,0,0.04))` : `linear-gradient(135deg, ${primaryColor}60, rgba(255,255,255,0.06))`,
               boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.08)" : "inset 0 0 0 0.5px rgba(255,255,255,0.1)"
             },
-            children: /* @__PURE__ */ jsxs3(
+            children: /* @__PURE__ */ jsxs4(
               "svg",
               {
                 width: "14",
@@ -1255,21 +1309,21 @@ function MessageItem({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx4("title", { children: "Agent" }),
-                  /* @__PURE__ */ jsx4("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
-                  /* @__PURE__ */ jsx4("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
+                  /* @__PURE__ */ jsx5("title", { children: "Agent" }),
+                  /* @__PURE__ */ jsx5("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
+                  /* @__PURE__ */ jsx5("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
                 ]
               }
             )
           }
         ) }),
-        showAvatar && isOwnMessage && /* @__PURE__ */ jsx4("div", { className: "w-7 flex-shrink-0" }),
-        /* @__PURE__ */ jsxs3(
+        showAvatar && isOwnMessage && /* @__PURE__ */ jsx5("div", { className: "w-7 flex-shrink-0" }),
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
             children: [
-              senderLabel && /* @__PURE__ */ jsx4(
+              senderLabel && /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: "mb-1 px-1 font-medium",
@@ -1281,7 +1335,7 @@ function MessageItem({
                   children: senderLabel
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   className: "px-4 py-2.5",
@@ -1294,12 +1348,12 @@ function MessageItem({
                   children: [
                     message.messageType === "text" && (isOwnMessage ? (
                       // User messages: plain text — no markdown parsing
-                      /* @__PURE__ */ jsx4("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
+                      /* @__PURE__ */ jsx5("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
                     ) : (
                       // Bot / agent messages: full markdown rendering
-                      /* @__PURE__ */ jsx4(MarkdownMessage, { content: message.content, theme })
+                      /* @__PURE__ */ jsx5(MarkdownMessage, { content: message.content, theme })
                     )),
-                    message.messageType === "image" && /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+                    message.messageType === "image" && /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
                       "img",
                       {
                         src: message.content,
@@ -1308,8 +1362,8 @@ function MessageItem({
                         loading: "lazy"
                       }
                     ) }),
-                    message.messageType === "file" && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxs3(
+                    message.messageType === "file" && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs4(
                         "svg",
                         {
                           width: "18",
@@ -1322,12 +1376,12 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx4("title", { children: "File" }),
-                            /* @__PURE__ */ jsx4("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+                            /* @__PURE__ */ jsx5("title", { children: "File" }),
+                            /* @__PURE__ */ jsx5("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "a",
                         {
                           href: message.content,
@@ -1345,12 +1399,12 @@ function MessageItem({
                   ]
                 }
               ),
-              showTimestamp && /* @__PURE__ */ jsxs3(
+              showTimestamp && /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
                   children: [
-                    /* @__PURE__ */ jsx4(
+                    /* @__PURE__ */ jsx5(
                       "span",
                       {
                         style: {
@@ -1363,8 +1417,8 @@ function MessageItem({
                         })
                       }
                     ),
-                    isOwnMessage && message.status && /* @__PURE__ */ jsxs3("span", { style: { color: textMuted }, children: [
-                      message.status === "sent" && /* @__PURE__ */ jsxs3(
+                    isOwnMessage && message.status && /* @__PURE__ */ jsxs4("span", { style: { color: textMuted }, children: [
+                      message.status === "sent" && /* @__PURE__ */ jsxs4(
                         "svg",
                         {
                           width: "14",
@@ -1377,12 +1431,12 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx4("title", { children: "Sent" }),
-                            /* @__PURE__ */ jsx4("polyline", { points: "20 6 9 17 4 12" })
+                            /* @__PURE__ */ jsx5("title", { children: "Sent" }),
+                            /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
                           ]
                         }
                       ),
-                      message.status === "delivered" && /* @__PURE__ */ jsxs3(
+                      message.status === "delivered" && /* @__PURE__ */ jsxs4(
                         "svg",
                         {
                           width: "14",
@@ -1395,13 +1449,13 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx4("title", { children: "Delivered" }),
-                            /* @__PURE__ */ jsx4("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ jsx4("polyline", { points: "22 6 11 17" })
+                            /* @__PURE__ */ jsx5("title", { children: "Delivered" }),
+                            /* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
                           ]
                         }
                       ),
-                      message.status === "read" && /* @__PURE__ */ jsxs3(
+                      message.status === "read" && /* @__PURE__ */ jsxs4(
                         "svg",
                         {
                           width: "14",
@@ -1414,9 +1468,9 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx4("title", { children: "Read" }),
-                            /* @__PURE__ */ jsx4("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ jsx4("polyline", { points: "22 6 11 17" })
+                            /* @__PURE__ */ jsx5("title", { children: "Read" }),
+                            /* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
                           ]
                         }
                       )
@@ -1434,7 +1488,7 @@ function MessageItem({
 
 // src/components/ThinkingIndicator.tsx
 import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PHRASE_POOLS = {
   // ── Greetings & small talk ──
   greeting: [
@@ -1653,7 +1707,7 @@ function ThinkingIndicator({
     }
     return () => clearTimeout(timeout);
   }, [displayText, isDeleting, phraseIndex]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "flex gap-2.5 mb-3",
@@ -1661,8 +1715,8 @@ function ThinkingIndicator({
       "aria-live": "polite",
       "aria-label": "Xcelsior is thinking",
       children: [
-        showAvatar && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx5(XcelsiorAvatar, { size: 28 }) }),
-        /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx5(
+        showAvatar && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx6(XcelsiorAvatar, { size: 28 }) }),
+        /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -1672,8 +1726,8 @@ function ThinkingIndicator({
               padding: "12px 16px",
               minWidth: 160
             },
-            children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ jsx5("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx6(
                 "span",
                 {
                   style: {
@@ -1687,7 +1741,7 @@ function ThinkingIndicator({
                 },
                 i
               )) }),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs5(
                 "span",
                 {
                   style: {
@@ -1698,7 +1752,7 @@ function ThinkingIndicator({
                   },
                   children: [
                     displayText,
-                    /* @__PURE__ */ jsx5(
+                    /* @__PURE__ */ jsx6(
                       "span",
                       {
                         style: {
@@ -1724,7 +1778,7 @@ function ThinkingIndicator({
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageList({
   messages,
   currentUser,
@@ -1805,11 +1859,11 @@ function MessageList({
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx6(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
+      /* @__PURE__ */ jsx7(
         "h3",
         {
           className: "font-semibold mb-2",
@@ -1821,7 +1875,7 @@ function MessageList({
           children: "How can we help?"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "p",
         {
           className: "max-w-[240px]",
@@ -1835,11 +1889,11 @@ function MessageList({
           children: "Ask us anything. We are here to help you get the most out of Xcelsior."
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap justify-center gap-2", children: [
         { label: "Our services", message: "What services does Xcelsior offer?" },
         { label: "Get a quote", message: "I would like to get a quote for a project" },
         { label: "Support", message: "I need help with something" }
-      ].map((action) => /* @__PURE__ */ jsx6(
+      ].map((action) => /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1871,14 +1925,14 @@ function MessageList({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: containerRef,
       className: "flex-1 overflow-y-auto px-4 py-3",
       style: { scrollBehavior: "smooth" },
       children: [
-        /* @__PURE__ */ jsx6("style", { children: `
+        /* @__PURE__ */ jsx7("style", { children: `
                 @keyframes thinkingPulse {
                     0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
                     30% { opacity: 1; transform: scale(1); }
@@ -1888,9 +1942,9 @@ function MessageList({
                     50% { opacity: 0; }
                 }
             ` }),
-        isLoadingMore && /* @__PURE__ */ jsx6("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx6(Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ jsx6("div", { ref: loadMoreTriggerRef }),
-        messages.map((message) => /* @__PURE__ */ jsx6(
+        isLoadingMore && /* @__PURE__ */ jsx7("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx7(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ jsx7("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ jsx7(
           MessageItem,
           {
             message,
@@ -1901,10 +1955,10 @@ function MessageList({
           },
           message.id
         )),
-        isTyping && /* @__PURE__ */ jsxs5("div", { className: "flex gap-2.5 mb-3", children: [
-          /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx6(XcelsiorAvatar, { size: 28 }) }),
-          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx6(
+        isTyping && /* @__PURE__ */ jsxs6("div", { className: "flex gap-2.5 mb-3", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx7(XcelsiorAvatar, { size: 28 }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 className: "px-4 py-3",
@@ -1913,7 +1967,7 @@ function MessageList({
                   borderRadius: "18px 18px 18px 4px",
                   boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
                 },
-                children: /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx6(
+                children: /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx7(
                   "span",
                   {
                     className: "rounded-full animate-bounce",
@@ -1929,7 +1983,7 @@ function MessageList({
                 )) })
               }
             ),
-            typingUser && /* @__PURE__ */ jsxs5(
+            typingUser && /* @__PURE__ */ jsxs6(
               "span",
               {
                 className: "mt-1 px-1",
@@ -1946,14 +2000,14 @@ function MessageList({
             )
           ] })
         ] }),
-        isBotThinking && !isTyping && /* @__PURE__ */ jsx6(
+        isBotThinking && !isTyping && /* @__PURE__ */ jsx7(
           ThinkingIndicator,
           {
             theme,
             lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
           }
         ),
-        /* @__PURE__ */ jsx6("div", { ref: messagesEndRef })
+        /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
       ]
     }
   );
@@ -1963,7 +2017,7 @@ function MessageList({
 import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
 import { createPortal } from "react-dom";
 import Picker from "@emoji-mart/react";
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function isLightColor(color) {
   let r = 0, g = 0, b = 0;
   if (color.startsWith("#")) {
@@ -2141,7 +2195,7 @@ ${uploadedFile.markdown}
   };
   const canSend = message.trim().length > 0 && !disabled;
   const placeholderColor = isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.3)";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "px-4 py-3",
@@ -2149,7 +2203,7 @@ ${uploadedFile.markdown}
         borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
       },
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             className: "relative flex items-center rounded-full transition-all duration-200",
@@ -2161,8 +2215,8 @@ ${uploadedFile.markdown}
               backdropFilter: "blur(32px)"
             },
             children: [
-              /* @__PURE__ */ jsx7("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
+              /* @__PURE__ */ jsx8(
                 "textarea",
                 {
                   ref: textAreaRef,
@@ -2191,8 +2245,8 @@ ${uploadedFile.markdown}
                   disabled
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
-                enableEmoji && /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
+                enableEmoji && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     ref: emojiButtonRef,
@@ -2222,7 +2276,7 @@ ${uploadedFile.markdown}
                     },
                     disabled,
                     "aria-label": "Add emoji",
-                    children: /* @__PURE__ */ jsxs6(
+                    children: /* @__PURE__ */ jsxs7(
                       "svg",
                       {
                         width: "18",
@@ -2235,18 +2289,18 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ jsx7("title", { children: "Emoji" }),
-                          /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ jsx7("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-                          /* @__PURE__ */ jsx7("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
-                          /* @__PURE__ */ jsx7("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+                          /* @__PURE__ */ jsx8("title", { children: "Emoji" }),
+                          /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ jsx8("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+                          /* @__PURE__ */ jsx8("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+                          /* @__PURE__ */ jsx8("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
                         ]
                       }
                     )
                   }
                 ),
-                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs6(Fragment, { children: [
-                  /* @__PURE__ */ jsx7(
+                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
@@ -2266,7 +2320,7 @@ ${uploadedFile.markdown}
                       },
                       disabled: disabled || fileUpload.isUploading,
                       "aria-label": "Attach file",
-                      children: fileUpload.isUploading ? /* @__PURE__ */ jsxs6(
+                      children: fileUpload.isUploading ? /* @__PURE__ */ jsxs7(
                         "svg",
                         {
                           width: "18",
@@ -2278,11 +2332,11 @@ ${uploadedFile.markdown}
                           className: "animate-spin",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx7("title", { children: "Uploading" }),
-                            /* @__PURE__ */ jsx7("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                            /* @__PURE__ */ jsx8("title", { children: "Uploading" }),
+                            /* @__PURE__ */ jsx8("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                           ]
                         }
-                      ) : /* @__PURE__ */ jsxs6(
+                      ) : /* @__PURE__ */ jsxs7(
                         "svg",
                         {
                           width: "18",
@@ -2295,14 +2349,14 @@ ${uploadedFile.markdown}
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx7("title", { children: "Attach file" }),
-                            /* @__PURE__ */ jsx7("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+                            /* @__PURE__ */ jsx8("title", { children: "Attach file" }),
+                            /* @__PURE__ */ jsx8("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
                           ]
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "input",
                     {
                       ref: fileInputRef,
@@ -2313,7 +2367,7 @@ ${uploadedFile.markdown}
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -2328,7 +2382,7 @@ ${uploadedFile.markdown}
                       boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
                     },
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsxs6(
+                    children: /* @__PURE__ */ jsxs7(
                       "svg",
                       {
                         width: "18",
@@ -2341,9 +2395,9 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ jsx7("title", { children: "Send" }),
-                          /* @__PURE__ */ jsx7("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                          /* @__PURE__ */ jsx7("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                          /* @__PURE__ */ jsx8("title", { children: "Send" }),
+                          /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
                         ]
                       }
                     )
@@ -2353,8 +2407,8 @@ ${uploadedFile.markdown}
             ]
           }
         ),
-        fileUpload.isUploading && /* @__PURE__ */ jsxs6("div", { className: "mt-2 px-1", children: [
-          /* @__PURE__ */ jsx7(
+        fileUpload.isUploading && /* @__PURE__ */ jsxs7("div", { className: "mt-2 px-1", children: [
+          /* @__PURE__ */ jsx8(
             "div",
             {
               className: "w-full rounded-full overflow-hidden",
@@ -2362,7 +2416,7 @@ ${uploadedFile.markdown}
                 height: 3,
                 backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: "h-full rounded-full transition-all duration-300",
@@ -2374,7 +2428,7 @@ ${uploadedFile.markdown}
               )
             }
           ),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs7(
             "p",
             {
               className: "mt-1",
@@ -2392,7 +2446,7 @@ ${uploadedFile.markdown}
           )
         ] }),
         showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               ref: emojiPickerRef,
@@ -2407,7 +2461,7 @@ ${uploadedFile.markdown}
                   "0 16px 48px -8px rgba(0,0,0,0.5)"
                 ].join(", ")
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 Picker,
                 {
                   data: emojiData,
@@ -2433,7 +2487,7 @@ ${uploadedFile.markdown}
 }
 
 // src/components/ChatWidget.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function getAnonymousUser() {
   let anonId;
   try {
@@ -2567,14 +2621,14 @@ function ChatWidget({
     outlineOffset: -1,
     transition: "outline 150ms ease"
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: isFullPage ? `flex flex-col h-full ${className}` : `fixed bottom-20 ${positionClass} z-50 flex flex-col overflow-hidden ${className}`,
       style: { ...containerStyle, ...dotGridBg, ...edgeHintStyle },
       ...!isFullPage ? containerResizeProps : {},
       children: [
-        !isFullPage && /* @__PURE__ */ jsx8(
+        !isFullPage && /* @__PURE__ */ jsx9(
           ChatHeader,
           {
             agent: effectiveUser.type === "customer" ? {
@@ -2588,7 +2642,7 @@ function ChatWidget({
             theme: config.theme
           }
         ),
-        !websocket.isConnected && /* @__PURE__ */ jsx8(
+        !websocket.isConnected && /* @__PURE__ */ jsx9(
           "div",
           {
             className: "px-4 py-2",
@@ -2596,15 +2650,15 @@ function ChatWidget({
               backgroundColor: isLightTheme ? "rgba(255,169,56,0.08)" : "rgba(255,169,56,0.06)",
               borderBottom: `1px solid rgba(255,169,56,${isLightTheme ? "0.15" : "0.12"})`
             },
-            children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "w-1.5 h-1.5 rounded-full animate-pulse",
                   style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "span",
                 {
                   style: {
@@ -2615,7 +2669,7 @@ function ChatWidget({
                   children: "Reconnecting..."
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
@@ -2639,8 +2693,8 @@ function ChatWidget({
             ] })
           }
         ),
-        isLoading ? /* @__PURE__ */ jsx8("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx8(
+        isLoading ? /* @__PURE__ */ jsx9("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx9(
             "div",
             {
               className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
@@ -2650,7 +2704,7 @@ function ChatWidget({
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "p",
             {
               style: {
@@ -2661,7 +2715,7 @@ function ChatWidget({
               children: "Loading messages..."
             }
           )
-        ] }) }) : /* @__PURE__ */ jsx8(
+        ] }) }) : /* @__PURE__ */ jsx9(
           MessageList,
           {
             messages,
@@ -2677,7 +2731,7 @@ function ChatWidget({
             isBotThinking
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ChatInput,
           {
             onSend: handleSendMessage,
@@ -2687,7 +2741,7 @@ function ChatWidget({
             disabled: !websocket.isConnected
           }
         ),
-        !isFullPage && /* @__PURE__ */ jsx8(
+        !isFullPage && /* @__PURE__ */ jsx9(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -2695,7 +2749,7 @@ function ChatWidget({
               borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)",
               backgroundColor: isLightTheme ? "rgba(0,0,0,0.03)" : "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ jsxs7(
+            children: /* @__PURE__ */ jsxs8(
               "p",
               {
                 style: {
@@ -2706,7 +2760,7 @@ function ChatWidget({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ jsx8("span", { style: {
+                  /* @__PURE__ */ jsx9("span", { style: {
                     fontWeight: 600,
                     color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
                   }, children: "Xcelsior" })
@@ -2725,7 +2779,7 @@ import { useCallback as useCallback8, useEffect as useEffect10, useState as useS
 
 // src/components/PreChatForm.tsx
 import { useState as useState8 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function PreChatForm({
   onSubmit,
   className = "",
@@ -2786,7 +2840,7 @@ function PreChatForm({
     transition: "box-shadow 0.2s ease",
     caretColor: "#337eff"
   });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
@@ -2806,7 +2860,7 @@ function PreChatForm({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             className: "relative text-white overflow-hidden",
@@ -2814,7 +2868,7 @@ function PreChatForm({
               background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
             },
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: "absolute inset-0 pointer-events-none",
@@ -2823,9 +2877,9 @@ function PreChatForm({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx9("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx10(
                     "h2",
                     {
                       className: "font-semibold",
@@ -2836,7 +2890,7 @@ function PreChatForm({
                       children: "Start a Conversation"
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "p",
                     {
                       className: "mt-1",
@@ -2849,8 +2903,8 @@ function PreChatForm({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 ml-2", children: [
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs9("div", { className: "flex gap-1 ml-2", children: [
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -2864,7 +2918,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Minimize chat",
-                      children: /* @__PURE__ */ jsxs8(
+                      children: /* @__PURE__ */ jsxs9(
                         "svg",
                         {
                           width: "18",
@@ -2873,8 +2927,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ jsx9("title", { children: "Minimize" }),
-                            /* @__PURE__ */ jsx9(
+                            /* @__PURE__ */ jsx10("title", { children: "Minimize" }),
+                            /* @__PURE__ */ jsx10(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2888,7 +2942,7 @@ function PreChatForm({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
@@ -2902,7 +2956,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Close chat",
-                      children: /* @__PURE__ */ jsxs8(
+                      children: /* @__PURE__ */ jsxs9(
                         "svg",
                         {
                           width: "18",
@@ -2911,8 +2965,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ jsx9("title", { children: "Close" }),
-                            /* @__PURE__ */ jsx9(
+                            /* @__PURE__ */ jsx10("title", { children: "Close" }),
+                            /* @__PURE__ */ jsx10(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2928,7 +2982,7 @@ function PreChatForm({
                   )
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: "h-px",
@@ -2940,9 +2994,9 @@ function PreChatForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs8("div", { children: [
-            /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsxs9(
               "label",
               {
                 htmlFor: "chat-name",
@@ -2954,11 +3008,11 @@ function PreChatForm({
                 },
                 children: [
                   "Name ",
-                  /* @__PURE__ */ jsx9("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 type: "text",
@@ -2978,7 +3032,7 @@ function PreChatForm({
                 autoComplete: "name"
               }
             ),
-            errors.name && /* @__PURE__ */ jsx9(
+            errors.name && /* @__PURE__ */ jsx10(
               "p",
               {
                 className: "mt-1.5",
@@ -2992,8 +3046,8 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs8("div", { children: [
-            /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsxs9(
               "label",
               {
                 htmlFor: "chat-email",
@@ -3005,11 +3059,11 @@ function PreChatForm({
                 },
                 children: [
                   "Email ",
-                  /* @__PURE__ */ jsx9("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 type: "email",
@@ -3029,7 +3083,7 @@ function PreChatForm({
                 autoComplete: "email"
               }
             ),
-            errors.email && /* @__PURE__ */ jsx9(
+            errors.email && /* @__PURE__ */ jsx10(
               "p",
               {
                 className: "mt-1.5",
@@ -3043,7 +3097,7 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "submit",
@@ -3065,8 +3119,8 @@ function PreChatForm({
               onMouseLeave: (e) => {
                 e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
               },
-              children: isSubmitting ? /* @__PURE__ */ jsxs8("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsxs8(
+              children: isSubmitting ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxs9(
                   "svg",
                   {
                     className: "animate-spin",
@@ -3078,8 +3132,8 @@ function PreChatForm({
                     strokeWidth: "2",
                     "aria-label": "Loading",
                     children: [
-                      /* @__PURE__ */ jsx9("title", { children: "Loading" }),
-                      /* @__PURE__ */ jsx9("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                      /* @__PURE__ */ jsx10("title", { children: "Loading" }),
+                      /* @__PURE__ */ jsx10("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                     ]
                   }
                 ),
@@ -3087,7 +3141,7 @@ function PreChatForm({
               ] }) : "Start Chat"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "p",
             {
               className: "text-center",
@@ -3100,7 +3154,7 @@ function PreChatForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -3108,7 +3162,7 @@ function PreChatForm({
               borderTop: "1px solid rgba(255,255,255,0.06)",
               backgroundColor: "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs9(
               "p",
               {
                 style: {
@@ -3119,7 +3173,7 @@ function PreChatForm({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ jsx9("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
+                  /* @__PURE__ */ jsx10("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
                 ]
               }
             )
@@ -3233,7 +3287,7 @@ function useChatWidgetState({
 }
 
 // src/components/Chat.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function generateSessionId() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
@@ -3364,7 +3418,7 @@ function Chat({
   const primaryColor = config.theme?.primary || "#337eff";
   const primaryStrong = config.theme?.primaryStrong || "#005eff";
   if (currentState === "minimized") {
-    return /* @__PURE__ */ jsx10("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsx11("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ jsxs10(
       "button",
       {
         type: "button",
@@ -3389,8 +3443,8 @@ function Chat({
         "aria-label": "Open chat",
         ...handlers,
         children: [
-          /* @__PURE__ */ jsx10(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
+          /* @__PURE__ */ jsx11(
             "span",
             {
               className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
@@ -3406,7 +3460,7 @@ function Chat({
     ) });
   }
   if (identityMode === "form" && (!userInfo || !userInfo.email || !userInfo.name)) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       PreChatForm,
       {
         onSubmit: handlePreChatSubmit,
@@ -3432,7 +3486,7 @@ function Chat({
     transform: "translateY(12px) scale(0.97)",
     transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
   };
-  return /* @__PURE__ */ jsx10("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx11(
     ChatWidget,
     {
       config: fullConfig,
@@ -3445,12 +3499,12 @@ function Chat({
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TypingIndicator({ isTyping, userName }) {
   if (!isTyping) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "px-4 py-2",
@@ -3458,8 +3512,8 @@ function TypingIndicator({ isTyping, userName }) {
         borderTop: "1px solid rgba(255,255,255,0.06)",
         backgroundColor: "rgba(0,0,0,0.15)"
       },
-      children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx12("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx12(
           "span",
           {
             className: "rounded-full animate-bounce",
@@ -3473,7 +3527,7 @@ function TypingIndicator({ isTyping, userName }) {
           },
           i
         )) }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "span",
           {
             style: {