npm - @xcelsior/ui-chat - Versions diffs - 2.0.1 → 2.0.3 - Mend

@xcelsior/ui-chat 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +1 -1
package/dist/index.d.mts +3 -0
package/dist/index.d.ts +3 -0
package/dist/index.js +236 -182
package/dist/index.js.map +1 -1
package/dist/index.mjs +236 -182
package/dist/index.mjs.map +1 -1
package/package.json +2 -6
package/src/components/MessageList.tsx +1 -1
package/src/components/Spinner.tsx +50 -0
package/src/hooks/useWebSocket.ts +18 -1

package/dist/index.js CHANGED Viewed

@@ -62,6 +62,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectTimeoutRef = (0, import_react.useRef)(null);
   const reconnectAttemptsRef = (0, import_react.useRef)(0);
   const messageHandlerRef = (0, import_react.useRef)(null);
+  const abortedRef = (0, import_react.useRef)(false);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -94,6 +95,7 @@ function useWebSocket(config, externalWebSocket) {
     };
   }, []);
   const connect = (0, import_react.useCallback)(() => {
+    if (abortedRef.current) return;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -113,6 +115,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);
@@ -120,12 +126,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);
@@ -174,6 +182,7 @@ function useWebSocket(config, externalWebSocket) {
   );
   const reconnect = (0, import_react.useCallback)(() => {
     reconnectAttemptsRef.current = 0;
+    abortedRef.current = false;
     connect();
   }, [connect]);
   (0, import_react.useEffect)(() => {
@@ -183,8 +192,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);
       }
@@ -963,7 +974,50 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
 // src/components/MessageList.tsx
 var import_react7 = require("react");
-var import_design_system = require("@xcelsior/design-system");
+// src/components/Spinner.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+      "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
 var import_date_fns = require("date-fns");
@@ -1058,7 +1112,7 @@ function getMarkdownStyles(theme, isLightTheme) {
 }
 // src/components/MarkdownMessage.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function computeIsLightTheme(theme) {
   const bgColor = theme?.background || "#00001a";
   if (!bgColor.startsWith("#")) return false;
@@ -1077,18 +1131,18 @@ function MarkdownMessage({ content, theme }) {
     // inside the bubble.
     display: "block"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_react_markdown.default,
     {
       components: {
         // Paragraphs
-        p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles.paragraph, children }),
+        p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.paragraph, children }),
         // Bold
-        strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { style: styles.strong, children }),
+        strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: styles.strong, children }),
         // Italic
-        em: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("em", { style: styles.emphasis, children }),
+        em: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("em", { style: styles.emphasis, children }),
         // Links — open in new tab
-        a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "a",
           {
             href,
@@ -1099,9 +1153,9 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Unordered list
-        ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
+        ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
         // Ordered list
-        ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "ol",
           {
             style: { ...styles.list, listStyleType: "decimal" },
@@ -1109,7 +1163,7 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // List item
-        li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { style: styles.listItem, children }),
+        li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
@@ -1119,7 +1173,7 @@ function MarkdownMessage({ content, theme }) {
             className?.startsWith("language-")
           );
           if (isBlock) {
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "code",
               {
                 className,
@@ -1128,10 +1182,10 @@ function MarkdownMessage({ content, theme }) {
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: styles.code, children });
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { style: styles.code, children });
         }),
         // Pre wrapper for code blocks
-        pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "pre",
           {
             style: {
@@ -1145,7 +1199,7 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Headings — h1 through h6 with progressive size reduction
-        h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "h1",
           {
             style: {
@@ -1155,7 +1209,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "h2",
           {
             style: {
@@ -1165,7 +1219,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "h3",
           {
             style: {
@@ -1175,8 +1229,8 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h4: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
-        h5: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        h4: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
+        h5: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "h5",
           {
             style: {
@@ -1186,7 +1240,7 @@ function MarkdownMessage({ content, theme }) {
             children
           }
         ),
-        h6: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        h6: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "h6",
           {
             style: {
@@ -1197,9 +1251,9 @@ function MarkdownMessage({ content, theme }) {
           }
         ),
         // Blockquote
-        blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { style: styles.blockquote, children }),
+        blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("blockquote", { style: styles.blockquote, children }),
         // Horizontal rule
-        hr: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { style: styles.hr })
+        hr: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("hr", { style: styles.hr })
       },
       children: content
     }
@@ -1207,7 +1261,7 @@ function MarkdownMessage({ content, theme }) {
 }
 // src/components/MessageItem.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function MessageItem({
   message,
   currentUser,
@@ -1233,7 +1287,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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         className: "px-4 py-1.5 rounded-full",
@@ -1241,7 +1295,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__ */ (0, import_jsx_runtime4.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "p",
           {
             style: {
@@ -1280,12 +1334,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__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
       children: [
-        showAvatar && !isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        showAvatar && !isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: "h-7 w-7 rounded-full flex items-center justify-center",
@@ -1293,7 +1347,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__ */ (0, import_jsx_runtime4.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "svg",
               {
                 width: "14",
@@ -1306,21 +1360,21 @@ function MessageItem({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Agent" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Agent" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-7 flex-shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        showAvatar && isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-7 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
             children: [
-              senderLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              senderLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
                   className: "mb-1 px-1 font-medium",
@@ -1332,7 +1386,7 @@ function MessageItem({
                   children: senderLabel
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "div",
                 {
                   className: "px-4 py-2.5",
@@ -1345,12 +1399,12 @@ function MessageItem({
                   children: [
                     message.messageType === "text" && (isOwnMessage ? (
                       // User messages: plain text — no markdown parsing
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
                     ) : (
                       // Bot / agent messages: full markdown rendering
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MarkdownMessage, { content: message.content, theme })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownMessage, { content: message.content, theme })
                     )),
-                    message.messageType === "image" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    message.messageType === "image" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "img",
                       {
                         src: message.content,
@@ -1359,8 +1413,8 @@ function MessageItem({
                         loading: "lazy"
                       }
                     ) }),
-                    message.messageType === "file" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    message.messageType === "file" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -1373,12 +1427,12 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "File" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("title", { children: "File" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "a",
                         {
                           href: message.content,
@@ -1396,12 +1450,12 @@ function MessageItem({
                   ]
                 }
               ),
-              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "div",
                 {
                   className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "span",
                       {
                         style: {
@@ -1414,8 +1468,8 @@ function MessageItem({
                         })
                       }
                     ),
-                    isOwnMessage && message.status && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { color: textMuted }, children: [
-                      message.status === "sent" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    isOwnMessage && message.status && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: textMuted }, children: [
+                      message.status === "sent" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "svg",
                         {
                           width: "14",
@@ -1428,12 +1482,12 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Sent" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Sent" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 6 9 17 4 12" })
                           ]
                         }
                       ),
-                      message.status === "delivered" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      message.status === "delivered" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "svg",
                         {
                           width: "14",
@@ -1446,13 +1500,13 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Delivered" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "22 6 11 17" })
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Delivered" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "22 6 11 17" })
                           ]
                         }
                       ),
-                      message.status === "read" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      message.status === "read" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "svg",
                         {
                           width: "14",
@@ -1465,9 +1519,9 @@ function MessageItem({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Read" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "22 6 11 17" })
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Read" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "18 6 7 17 2 12" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "22 6 11 17" })
                           ]
                         }
                       )
@@ -1485,7 +1539,7 @@ function MessageItem({
 // src/components/ThinkingIndicator.tsx
 var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var PHRASE_POOLS = {
   // ── Greetings & small talk ──
   greeting: [
@@ -1704,7 +1758,7 @@ function ThinkingIndicator({
     }
     return () => clearTimeout(timeout);
   }, [displayText, isDeleting, phraseIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "flex gap-2.5 mb-3",
@@ -1712,8 +1766,8 @@ function ThinkingIndicator({
       "aria-live": "polite",
       "aria-label": "Xcelsior is thinking",
       children: [
-        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XcelsiorAvatar, { size: 28 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XcelsiorAvatar, { size: 28 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             style: {
@@ -1723,8 +1777,8 @@ function ThinkingIndicator({
               padding: "12px 16px",
               minWidth: 160
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "span",
                 {
                   style: {
@@ -1738,7 +1792,7 @@ function ThinkingIndicator({
                 },
                 i
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "span",
                 {
                   style: {
@@ -1749,7 +1803,7 @@ function ThinkingIndicator({
                   },
                   children: [
                     displayText,
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "span",
                       {
                         style: {
@@ -1775,7 +1829,7 @@ function ThinkingIndicator({
 }
 // src/components/MessageList.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MessageList({
   messages,
   currentUser,
@@ -1856,11 +1910,11 @@ function MessageList({
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "lg" }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "h3",
         {
           className: "font-semibold mb-2",
@@ -1872,7 +1926,7 @@ function MessageList({
           children: "How can we help?"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "p",
         {
           className: "max-w-[240px]",
@@ -1886,11 +1940,11 @@ function MessageList({
           children: "Ask us anything. We are here to help you get the most out of Xcelsior."
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(
+      ].map((action) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -1922,14 +1976,14 @@ function MessageList({
       )) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: containerRef,
       className: "flex-1 overflow-y-auto px-4 py-3",
       style: { scrollBehavior: "smooth" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
                 @keyframes thinkingPulse {
                     0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
                     30% { opacity: 1; transform: scale(1); }
@@ -1939,9 +1993,9 @@ function MessageList({
                     50% { opacity: 0; }
                 }
             ` }),
-        isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: loadMoreTriggerRef }),
-        messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MessageItem,
           {
             message,
@@ -1952,10 +2006,10 @@ function MessageList({
           },
           message.id
         )),
-        isTyping && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2.5 mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XcelsiorAvatar, { size: 28 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isTyping && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2.5 mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(XcelsiorAvatar, { size: 28 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 className: "px-4 py-3",
@@ -1964,7 +2018,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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "span",
                   {
                     className: "rounded-full animate-bounce",
@@ -1980,7 +2034,7 @@ function MessageList({
                 )) })
               }
             ),
-            typingUser && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            typingUser && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "span",
               {
                 className: "mt-1 px-1",
@@ -1997,14 +2051,14 @@ function MessageList({
             )
           ] })
         ] }),
-        isBotThinking && !isTyping && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isBotThinking && !isTyping && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ThinkingIndicator,
           {
             theme,
             lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: messagesEndRef })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: messagesEndRef })
       ]
     }
   );
@@ -2014,7 +2068,7 @@ function MessageList({
 var import_react8 = require("react");
 var import_react_dom = require("react-dom");
 var import_react9 = __toESM(require("@emoji-mart/react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function isLightColor(color) {
   let r = 0, g = 0, b = 0;
   if (color.startsWith("#")) {
@@ -2192,7 +2246,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__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: "px-4 py-3",
@@ -2200,7 +2254,7 @@ ${uploadedFile.markdown}
         borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: "relative flex items-center rounded-full transition-all duration-200",
@@ -2212,8 +2266,8 @@ ${uploadedFile.markdown}
               backdropFilter: "blur(32px)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "textarea",
                 {
                   ref: textAreaRef,
@@ -2242,8 +2296,8 @@ ${uploadedFile.markdown}
                   disabled
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
-                enableEmoji && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
+                enableEmoji && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     ref: emojiButtonRef,
@@ -2273,7 +2327,7 @@ ${uploadedFile.markdown}
                     },
                     disabled,
                     "aria-label": "Add emoji",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "svg",
                       {
                         width: "18",
@@ -2286,18 +2340,18 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "Emoji" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Emoji" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
                         ]
                       }
                     )
                   }
                 ),
-                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2317,7 +2371,7 @@ ${uploadedFile.markdown}
                       },
                       disabled: disabled || fileUpload.isUploading,
                       "aria-label": "Attach file",
-                      children: fileUpload.isUploading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                      children: fileUpload.isUploading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2329,11 +2383,11 @@ ${uploadedFile.markdown}
                           className: "animate-spin",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "Uploading" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Uploading" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                           ]
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2346,14 +2400,14 @@ ${uploadedFile.markdown}
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "Attach file" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Attach file" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "input",
                     {
                       ref: fileInputRef,
@@ -2364,7 +2418,7 @@ ${uploadedFile.markdown}
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2379,7 +2433,7 @@ ${uploadedFile.markdown}
                       boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
                     },
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "svg",
                       {
                         width: "18",
@@ -2392,9 +2446,9 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "Send" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Send" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
                         ]
                       }
                     )
@@ -2404,8 +2458,8 @@ ${uploadedFile.markdown}
             ]
           }
         ),
-        fileUpload.isUploading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-2 px-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        fileUpload.isUploading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-2 px-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "w-full rounded-full overflow-hidden",
@@ -2413,7 +2467,7 @@ ${uploadedFile.markdown}
                 height: 3,
                 backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: "h-full rounded-full transition-all duration-300",
@@ -2425,7 +2479,7 @@ ${uploadedFile.markdown}
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "p",
             {
               className: "mt-1",
@@ -2443,7 +2497,7 @@ ${uploadedFile.markdown}
           )
         ] }),
         showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               ref: emojiPickerRef,
@@ -2458,7 +2512,7 @@ ${uploadedFile.markdown}
                   "0 16px 48px -8px rgba(0,0,0,0.5)"
                 ].join(", ")
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react9.default,
                 {
                   data: emojiData,
@@ -2484,7 +2538,7 @@ ${uploadedFile.markdown}
 }
 // src/components/ChatWidget.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function getAnonymousUser() {
   let anonId;
   try {
@@ -2618,14 +2672,14 @@ function ChatWidget({
     outlineOffset: -1,
     transition: "outline 150ms ease"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "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__ */ (0, import_jsx_runtime8.jsx)(
+        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ChatHeader,
           {
             agent: effectiveUser.type === "customer" ? {
@@ -2639,7 +2693,7 @@ function ChatWidget({
             theme: config.theme
           }
         ),
-        !websocket.isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        !websocket.isConnected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: "px-4 py-2",
@@ -2647,15 +2701,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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   className: "w-1.5 h-1.5 rounded-full animate-pulse",
                   style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   style: {
@@ -2666,7 +2720,7 @@ function ChatWidget({
                   children: "Reconnecting..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2690,8 +2744,8 @@ function ChatWidget({
             ] })
           }
         ),
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
@@ -2701,7 +2755,7 @@ function ChatWidget({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "p",
             {
               style: {
@@ -2712,7 +2766,7 @@ function ChatWidget({
               children: "Loading messages..."
             }
           )
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           MessageList,
           {
             messages,
@@ -2728,7 +2782,7 @@ function ChatWidget({
             isBotThinking
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ChatInput,
           {
             onSend: handleSendMessage,
@@ -2738,7 +2792,7 @@ function ChatWidget({
             disabled: !websocket.isConnected
           }
         ),
-        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -2746,7 +2800,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__ */ (0, import_jsx_runtime8.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "p",
               {
                 style: {
@@ -2757,7 +2811,7 @@ function ChatWidget({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: {
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: {
                     fontWeight: 600,
                     color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
                   }, children: "Xcelsior" })
@@ -2776,7 +2830,7 @@ var import_react14 = require("react");
 // src/components/PreChatForm.tsx
 var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function PreChatForm({
   onSubmit,
   className = "",
@@ -2837,7 +2891,7 @@ function PreChatForm({
     transition: "box-shadow 0.2s ease",
     caretColor: "#337eff"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
@@ -2857,7 +2911,7 @@ function PreChatForm({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: "relative text-white overflow-hidden",
@@ -2865,7 +2919,7 @@ function PreChatForm({
               background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 pointer-events-none",
@@ -2874,9 +2928,9 @@ function PreChatForm({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "h2",
                     {
                       className: "font-semibold",
@@ -2887,7 +2941,7 @@ function PreChatForm({
                       children: "Start a Conversation"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "p",
                     {
                       className: "mt-1",
@@ -2900,8 +2954,8 @@ function PreChatForm({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2915,7 +2969,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Minimize chat",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2924,8 +2978,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Minimize" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Minimize" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2939,7 +2993,7 @@ function PreChatForm({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2953,7 +3007,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Close chat",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2962,8 +3016,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Close" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Close" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2979,7 +3033,7 @@ function PreChatForm({
                   )
                 ] })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   className: "h-px",
@@ -2991,9 +3045,9 @@ function PreChatForm({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "label",
               {
                 htmlFor: "chat-name",
@@ -3005,11 +3059,11 @@ function PreChatForm({
                 },
                 children: [
                   "Name ",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 type: "text",
@@ -3029,7 +3083,7 @@ function PreChatForm({
                 autoComplete: "name"
               }
             ),
-            errors.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            errors.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "p",
               {
                 className: "mt-1.5",
@@ -3043,8 +3097,8 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "label",
               {
                 htmlFor: "chat-email",
@@ -3056,11 +3110,11 @@ function PreChatForm({
                 },
                 children: [
                   "Email ",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 type: "email",
@@ -3080,7 +3134,7 @@ function PreChatForm({
                 autoComplete: "email"
               }
             ),
-            errors.email && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            errors.email && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "p",
               {
                 className: "mt-1.5",
@@ -3094,7 +3148,7 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "submit",
@@ -3116,8 +3170,8 @@ function PreChatForm({
               onMouseLeave: (e) => {
                 e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
               },
-              children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "svg",
                   {
                     className: "animate-spin",
@@ -3129,8 +3183,8 @@ function PreChatForm({
                     strokeWidth: "2",
                     "aria-label": "Loading",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Loading" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Loading" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                     ]
                   }
                 ),
@@ -3138,7 +3192,7 @@ function PreChatForm({
               ] }) : "Start Chat"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "p",
             {
               className: "text-center",
@@ -3151,7 +3205,7 @@ function PreChatForm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -3159,7 +3213,7 @@ function PreChatForm({
               borderTop: "1px solid rgba(255,255,255,0.06)",
               backgroundColor: "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "p",
               {
                 style: {
@@ -3170,7 +3224,7 @@ function PreChatForm({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
                 ]
               }
             )
@@ -3284,7 +3338,7 @@ function useChatWidgetState({
 }
 // src/components/Chat.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function generateSessionId() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
@@ -3415,7 +3469,7 @@ function Chat({
   const primaryColor = config.theme?.primary || "#337eff";
   const primaryStrong = config.theme?.primaryStrong || "#005eff";
   if (currentState === "minimized") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         type: "button",
@@ -3440,8 +3494,8 @@ function Chat({
         "aria-label": "Open chat",
         ...handlers,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "span",
             {
               className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
@@ -3457,7 +3511,7 @@ function Chat({
     ) });
   }
   if (identityMode === "form" && (!userInfo || !userInfo.email || !userInfo.name)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PreChatForm,
       {
         onSubmit: handlePreChatSubmit,
@@ -3483,7 +3537,7 @@ function Chat({
     transform: "translateY(12px) scale(0.97)",
     transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     ChatWidget,
     {
       config: fullConfig,
@@ -3496,12 +3550,12 @@ function Chat({
 }
 // src/components/TypingIndicator.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TypingIndicator({ isTyping, userName }) {
   if (!isTyping) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: "px-4 py-2",
@@ -3509,8 +3563,8 @@ function TypingIndicator({ isTyping, userName }) {
         borderTop: "1px solid rgba(255,255,255,0.06)",
         backgroundColor: "rgba(0,0,0,0.15)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "span",
           {
             className: "rounded-full animate-bounce",
@@ -3524,7 +3578,7 @@ function TypingIndicator({ isTyping, userName }) {
           },
           i
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "span",
           {
             style: {