@xcelsior/ui-chat 1.0.4 → 1.0.5

package/dist/index.mjs

@@ -0,0 +1,1576 @@
+// src/components/ChatWidget.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState6 } from "react";
+
+// src/hooks/useWebSocket.ts
+import { useEffect, useRef, useState, useCallback } from "react";
+function useWebSocket(config, externalWebSocket) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastMessage, setLastMessage] = useState(null);
+  const [error, setError] = useState(null);
+  const wsRef = useRef(null);
+  const reconnectTimeoutRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  const messageHandlerRef = useRef(null);
+  const maxReconnectAttempts = 5;
+  const reconnectDelay = 3e3;
+  const isUsingExternalWs = !!externalWebSocket;
+  const subscribeToMessage = useCallback((webSocket) => {
+    if (messageHandlerRef.current) {
+      webSocket.removeEventListener("message", messageHandlerRef.current);
+    }
+    const handler = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        setLastMessage(message);
+        if (message.type === "message" && message.data) {
+          config.onMessageReceived?.(message.data);
+        } else if (message.type === "error") {
+          const err = new Error(message.data?.message || "WebSocket error");
+          setError(err);
+          config.onError?.(err);
+        }
+      } catch (err) {
+        console.error("Failed to parse WebSocket message:", err);
+      }
+    };
+    webSocket.addEventListener("message", handler);
+    messageHandlerRef.current = handler;
+    return () => {
+      webSocket.removeEventListener("message", handler);
+      if (messageHandlerRef.current === handler) {
+        messageHandlerRef.current = null;
+      }
+    };
+  }, []);
+  const connect = useCallback(() => {
+    console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
+    try {
+      if (wsRef.current) {
+        if (messageHandlerRef.current) {
+          wsRef.current.removeEventListener("message", messageHandlerRef.current);
+          messageHandlerRef.current = null;
+        }
+        wsRef.current.close();
+      }
+      const url = new URL(config.websocketUrl);
+      url.searchParams.set("user", JSON.stringify(config.currentUser));
+      if (config.conversationId) {
+        url.searchParams.set("conversationId", config.conversationId);
+      }
+      if (config.apiKey) {
+        url.searchParams.set("apiKey", config.apiKey);
+      }
+      const ws = new WebSocket(url.toString());
+      ws.onopen = () => {
+        console.log("WebSocket connected");
+        setIsConnected(true);
+        setError(null);
+        reconnectAttemptsRef.current = 0;
+        config.onConnectionChange?.(true);
+      };
+      ws.onerror = (event) => {
+        console.error("WebSocket error:", event);
+        const err = new Error("WebSocket connection error");
+        setError(err);
+        config.onError?.(err);
+      };
+      ws.onclose = (event) => {
+        console.log("WebSocket closed:", event.code, event.reason);
+        setIsConnected(false);
+        config.onConnectionChange?.(false);
+        wsRef.current = null;
+        if (event.code !== 1e3 && reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current += 1;
+          console.log(
+            `Reconnecting... (${reconnectAttemptsRef.current}/${maxReconnectAttempts})`
+          );
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, reconnectDelay);
+        }
+      };
+      subscribeToMessage(ws);
+      wsRef.current = ws ?? null;
+    } catch (err) {
+      console.error("Failed to create WebSocket connection:", err);
+      const error2 = err instanceof Error ? err : new Error("Failed to connect");
+      setError(error2);
+      config.onError?.(error2);
+    }
+  }, [JSON.stringify([config.currentUser, config.conversationId])]);
+  const sendMessage = useCallback(
+    (action, data) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        console.error("WebSocket is not connected");
+        config.toast?.error("Not connected to chat server");
+        return;
+      }
+      try {
+        wsRef.current.send(
+          JSON.stringify({
+            action,
+            data
+          })
+        );
+      } catch (err) {
+        console.error("Failed to send message:", err);
+        const error2 = err instanceof Error ? err : new Error("Failed to send message");
+        setError(error2);
+        config.onError?.(error2);
+      }
+    },
+    [config]
+  );
+  const reconnect = useCallback(() => {
+    reconnectAttemptsRef.current = 0;
+    connect();
+  }, [connect]);
+  useEffect(() => {
+    if (isUsingExternalWs) {
+      setIsConnected(externalWebSocket?.readyState === WebSocket.OPEN || false);
+      wsRef.current = externalWebSocket;
+      const cleanup = subscribeToMessage(externalWebSocket);
+      return cleanup;
+    }
+    connect();
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        if (messageHandlerRef.current) {
+          wsRef.current.removeEventListener("message", messageHandlerRef.current);
+          messageHandlerRef.current = null;
+        }
+        wsRef.current.close(1e3, "Component unmounted");
+      }
+    };
+  }, [connect, isUsingExternalWs, externalWebSocket, subscribeToMessage]);
+  const effectiveIsConnected = isUsingExternalWs ? externalWebSocket?.readyState === WebSocket.OPEN || false : isConnected;
+  return {
+    isConnected: effectiveIsConnected,
+    sendMessage,
+    lastMessage,
+    error,
+    reconnect
+  };
+}
+
+// src/hooks/useMessages.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+
+// src/utils/api.ts
+import axios from "axios";
+async function fetchMessages(baseUrl, params, headers) {
+  try {
+    const response = await axios.get(`${baseUrl}/messages`, {
+      params: {
+        conversationId: params.conversationId,
+        limit: params.limit || 50,
+        pageToken: params.pageToken
+      },
+      headers: {
+        "Content-Type": "application/json",
+        ...headers
+      }
+    });
+    return {
+      data: response.data.data ?? [],
+      nextPageToken: response.data.pagination?.nextPageToken
+    };
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(
+        error.response?.data?.error?.message || error.message || "Failed to fetch messages"
+      );
+    }
+    throw error;
+  }
+}
+
+// src/hooks/useMessages.ts
+function useMessages(websocket, config) {
+  const [messages, setMessages] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [nextPageToken, setNextPageToken] = useState2(void 0);
+  const [hasMore, setHasMore] = useState2(true);
+  const [isLoadingMore, setIsLoadingMore] = useState2(false);
+  const { httpApiUrl, conversationId, headers, onError, toast } = config;
+  const headersWithApiKey = useMemo(
+    () => ({
+      ...headers,
+      "x-api-key": config.apiKey
+    }),
+    [headers, config.apiKey]
+  );
+  useEffect2(() => {
+    const loadMessages = async () => {
+      if (!httpApiUrl || !conversationId) {
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await fetchMessages(
+          httpApiUrl,
+          { conversationId, limit: 20 },
+          headersWithApiKey
+        );
+        setMessages(result.data);
+        setNextPageToken(result.nextPageToken);
+        setHasMore(!!result.nextPageToken);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to load messages");
+        setError(error2);
+        onError?.(error2);
+        toast?.error("Failed to load existing messages");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadMessages();
+  }, [conversationId, httpApiUrl, headersWithApiKey, onError, toast]);
+  const { onMessageReceived } = config;
+  useEffect2(() => {
+    if (websocket.lastMessage?.type === "message" && websocket.lastMessage.data) {
+      const newMessage = websocket.lastMessage.data;
+      if (conversationId && newMessage.conversationId !== conversationId) {
+        return;
+      }
+      setMessages((prev) => {
+        if (prev.some((msg) => msg.id === newMessage.id)) {
+          return prev;
+        }
+        return [...prev, newMessage];
+      });
+      onMessageReceived?.(newMessage);
+    }
+  }, [websocket.lastMessage, onMessageReceived, conversationId]);
+  const addMessage = useCallback2((message) => {
+    setMessages((prev) => {
+      if (prev.some((msg) => msg.id === message.id)) {
+        return prev;
+      }
+      return [...prev, message];
+    });
+  }, []);
+  const updateMessageStatus = useCallback2((messageId, status) => {
+    setMessages((prev) => prev.map((msg) => msg.id === messageId ? { ...msg, status } : msg));
+  }, []);
+  const clearMessages = useCallback2(() => {
+    setMessages([]);
+  }, []);
+  const loadMore = useCallback2(async () => {
+    if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) {
+      return;
+    }
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const result = await fetchMessages(
+        httpApiUrl,
+        {
+          conversationId,
+          limit: 20,
+          pageToken: nextPageToken
+        },
+        headersWithApiKey
+      );
+      setMessages((prev) => [...result.data, ...prev]);
+      setNextPageToken(result.nextPageToken);
+      setHasMore(!!result.nextPageToken);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to load more messages");
+      setError(error2);
+      onError?.(error2);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    hasMore,
+    isLoadingMore,
+    httpApiUrl,
+    conversationId,
+    nextPageToken,
+    headersWithApiKey,
+    onError
+  ]);
+  return {
+    messages,
+    addMessage,
+    updateMessageStatus,
+    clearMessages,
+    isLoading,
+    error,
+    loadMore,
+    hasMore,
+    isLoadingMore
+  };
+}
+
+// src/hooks/useFileUpload.ts
+import { useState as useState3 } from "react";
+import axios2 from "axios";
+function useFileUpload(apiKey, config) {
+  const [isUploading, setIsUploading] = useState3(false);
+  const [uploadProgress, setUploadProgress] = useState3(0);
+  const [error, setError] = useState3(null);
+  const defaultConfig = {
+    maxFileSize: 10 * 1024 * 1024,
+    // 10MB default
+    allowedTypes: [
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/gif",
+      "image/webp",
+      "application/pdf",
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "text/plain",
+      "text/csv"
+    ]
+  };
+  const finalConfig = { ...defaultConfig, ...config };
+  const canUpload = !!config?.uploadUrl;
+  const validateFile = (file) => {
+    if (!finalConfig.allowedTypes.includes(file.type)) {
+      return `File type ${file.type} is not supported. Allowed types: ${finalConfig.allowedTypes.join(", ")}`;
+    }
+    if (file.size > finalConfig.maxFileSize) {
+      return `File size ${(file.size / 1024 / 1024).toFixed(2)}MB exceeds the maximum allowed size of ${(finalConfig.maxFileSize / 1024 / 1024).toFixed(2)}MB`;
+    }
+    return null;
+  };
+  const uploadFile = async (file) => {
+    if (!config?.uploadUrl) {
+      const err = new Error("File upload URL is not configured");
+      setError(err);
+      throw err;
+    }
+    const validationError = validateFile(file);
+    if (validationError) {
+      const err = new Error(validationError);
+      setError(err);
+      throw err;
+    }
+    setIsUploading(true);
+    setUploadProgress(0);
+    setError(null);
+    try {
+      const uploadUrlResponse = await axios2.post(
+        config.uploadUrl,
+        {
+          fileName: file.name,
+          contentType: file.type,
+          fileSize: file.size
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": apiKey || "",
+            ...config.headers
+          }
+        }
+      );
+      const { uploadUrl, attachmentUrl } = uploadUrlResponse.data.data || uploadUrlResponse.data;
+      if (!uploadUrl || !attachmentUrl) {
+        throw new Error("Failed to get upload URL from server");
+      }
+      await axios2.put(uploadUrl, file, {
+        headers: {
+          "Content-Type": file.type
+        },
+        onUploadProgress: (progressEvent) => {
+          if (progressEvent.total) {
+            const progress = Math.round(
+              progressEvent.loaded * 100 / progressEvent.total
+            );
+            setUploadProgress(progress);
+          }
+        }
+      });
+      return {
+        url: attachmentUrl,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        markdown: file.type.startsWith("image/") ? `![${file.name}](${attachmentUrl})` : `[${file.name}](${attachmentUrl})`
+      };
+    } catch (err) {
+      console.error("File upload failed:", err);
+      const error2 = err instanceof Error ? err : new Error("Upload failed");
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsUploading(false);
+      setUploadProgress(0);
+    }
+  };
+  return {
+    uploadFile,
+    isUploading,
+    uploadProgress,
+    error,
+    canUpload
+  };
+}
+
+// src/hooks/useTypingIndicator.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useTypingIndicator(websocket) {
+  const [typingUsers, setTypingUsers] = useState4([]);
+  useEffect3(() => {
+    if (websocket.lastMessage?.type === "typing" && websocket.lastMessage.data) {
+      const { userId, isTyping } = websocket.lastMessage.data;
+      if (isTyping) {
+        setTypingUsers((prev) => {
+          if (!prev.includes(userId)) {
+            return [...prev, userId];
+          }
+          return prev;
+        });
+      } else {
+        setTypingUsers((prev) => prev.filter((id) => id !== userId));
+      }
+    }
+  }, [websocket.lastMessage]);
+  return {
+    isTyping: typingUsers.length > 0,
+    typingUsers
+  };
+}
+
+// src/components/ChatHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatHeader({ agent, onClose, onMinimize }) {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-white/20 flex items-center justify-center text-lg font-medium", children: agent?.avatar ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: agent.avatar,
+            alt: agent.name,
+            className: "h-10 w-10 rounded-full object-cover"
+          }
+        ) : "\u{1F3A7}" }),
+        agent?.status === "online" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-base", children: agent?.name || "Support Team" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/80", children: agent?.status === "online" ? "Online" : agent?.status === "away" ? "Away" : "We'll reply as soon as possible" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      onMinimize && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onMinimize,
+          className: "p-2 hover:bg-white/10 rounded-full transition-colors",
+          "aria-label": "Minimize chat",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "w-5 h-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "Minimize icon" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M20 12H4"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      onClose && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "p-2 hover:bg-white/10 rounded-full transition-colors",
+          "aria-label": "Close chat",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "w-5 h-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "Close icon" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/MessageList.tsx
+import { useEffect as useEffect4, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { Spinner } from "@xcelsior/design-system";
+
+// src/components/MessageItem.tsx
+import { formatDistanceToNow } from "date-fns";
+import ReactMarkdown from "react-markdown";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MessageItem({
+  message,
+  currentUser,
+  showAvatar = true,
+  showTimestamp = true
+}) {
+  const isOwnMessage = message.senderType === currentUser.type;
+  const isSystemMessage = message.senderType === "system";
+  const isAIMessage = message.metadata?.isAI === true;
+  if (isSystemMessage) {
+    return /* @__PURE__ */ jsx2("div", { className: "flex justify-center my-4", children: /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-full", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: message.content }) }) });
+  }
+  const getAvatarIcon = () => {
+    if (isAIMessage) {
+      return "\u{1F916}";
+    }
+    if (message.senderType === "agent") {
+      return "\u{1F3A7}";
+    }
+    return "\u{1F464}";
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `flex gap-2 mb-4 ${!isOwnMessage ? "flex-row-reverse" : "flex-row"}`, children: [
+    showAvatar && /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx2("div", { className: "h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium", children: getAvatarIcon() }) }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `flex flex-col max-w-[70%] ${!isOwnMessage ? "items-end" : "items-start"}`,
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: `rounded-2xl px-4 py-2 ${isOwnMessage ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"}`,
+              children: [
+                message.messageType === "text" && /* @__PURE__ */ jsx2("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx2(
+                  ReactMarkdown,
+                  {
+                    components: {
+                      p: ({ children }) => /* @__PURE__ */ jsx2("p", { className: "mb-0", children }),
+                      img: ({ src, alt, ...props }) => /* @__PURE__ */ jsx2(
+                        "img",
+                        {
+                          ...props,
+                          src,
+                          alt,
+                          className: "max-w-full h-auto rounded-lg shadow-sm my-2",
+                          loading: "lazy"
+                        }
+                      ),
+                      a: ({ href, children, ...props }) => /* @__PURE__ */ jsx2(
+                        "a",
+                        {
+                          ...props,
+                          href,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          className: `${isOwnMessage ? "text-blue-200 hover:text-blue-100" : "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"} underline`,
+                          children
+                        }
+                      )
+                    },
+                    children: message.content
+                  }
+                ) }),
+                message.messageType === "image" && /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+                  "img",
+                  {
+                    src: message.content,
+                    alt: "Attachment",
+                    className: "max-w-full h-auto rounded-lg",
+                    loading: "lazy"
+                  }
+                ) }),
+                message.messageType === "file" && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-2xl", children: "\u{1F4CE}" }),
+                  /* @__PURE__ */ jsx2(
+                    "a",
+                    {
+                      href: message.content,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: `${isOwnMessage ? "text-blue-200 hover:text-blue-100" : "text-blue-600 hover:text-blue-700 dark:text-blue-400"} underline`,
+                      children: message.metadata?.fileName || "Download file"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          showTimestamp && /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: `flex items-center gap-2 mt-1 px-2 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
+              children: [
+                /* @__PURE__ */ jsx2("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatDistanceToNow(new Date(message.createdAt), {
+                  addSuffix: true
+                }) }),
+                isOwnMessage && message.status && /* @__PURE__ */ jsxs2("span", { className: "text-xs", children: [
+                  message.status === "sent" && "\u2713",
+                  message.status === "delivered" && "\u2713\u2713",
+                  message.status === "read" && /* @__PURE__ */ jsx2("span", { className: "text-blue-600", children: "\u2713\u2713" })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/MessageList.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MessageList({
+  messages,
+  currentUser,
+  isLoading = false,
+  isTyping = false,
+  typingUser,
+  autoScroll = true,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false
+}) {
+  const messagesEndRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const prevLengthRef = useRef2(messages.length);
+  const loadMoreTriggerRef = useRef2(null);
+  const prevScrollHeightRef = useRef2(0);
+  const hasInitialScrolledRef = useRef2(false);
+  const isUserScrollingRef = useRef2(false);
+  useEffect4(() => {
+    if (autoScroll && messagesEndRef.current) {
+      if (messages.length > prevLengthRef.current && !isLoadingMore) {
+        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+      }
+      prevLengthRef.current = messages.length;
+    }
+  }, [messages.length, autoScroll, isLoadingMore]);
+  useEffect4(() => {
+    if (messages.length > 0 && messagesEndRef.current && !isLoading && !hasInitialScrolledRef.current) {
+      setTimeout(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
+        setTimeout(() => {
+          isUserScrollingRef.current = true;
+        }, 200);
+      }, 100);
+      hasInitialScrolledRef.current = true;
+    } else if (!isLoading && messages.length === 0 && !hasInitialScrolledRef.current) {
+      isUserScrollingRef.current = true;
+      hasInitialScrolledRef.current = true;
+    }
+  }, [isLoading, messages.length]);
+  useEffect4(() => {
+    if (isLoadingMore) {
+      prevScrollHeightRef.current = containerRef.current?.scrollHeight || 0;
+    } else if (prevScrollHeightRef.current > 0 && containerRef.current) {
+      const newScrollHeight = containerRef.current.scrollHeight;
+      const scrollDiff = newScrollHeight - prevScrollHeightRef.current;
+      containerRef.current.scrollTop = scrollDiff;
+      prevScrollHeightRef.current = 0;
+    }
+  }, [isLoadingMore]);
+  const handleScroll = useCallback3(() => {
+    if (!containerRef.current || !onLoadMore || !hasMore || isLoadingMore) return;
+    if (!isUserScrollingRef.current) return;
+    const { scrollTop } = containerRef.current;
+    if (scrollTop < 100) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMore, isLoadingMore]);
+  useEffect4(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx3(Spinner, { size: "lg" }) });
+  }
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center h-full text-center p-8", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-6xl mb-4", children: "\u{1F4AC}" }),
+      /* @__PURE__ */ jsx3("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2", children: "No messages yet" }),
+      /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Start the conversation by sending a message below" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex-1 overflow-y-auto p-4 space-y-2",
+      style: { scrollBehavior: "smooth" },
+      children: [
+        isLoadingMore && /* @__PURE__ */ jsx3("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsx3(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ jsx3("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ jsx3(
+          MessageItem,
+          {
+            message,
+            currentUser,
+            showAvatar: true,
+            showTimestamp: true
+          },
+          message.id
+        )),
+        isTyping && /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 mb-4", children: [
+          /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx3("div", { className: "h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium", children: "\u{1F3A7}" }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx3("div", { className: "rounded-2xl px-4 py-3 bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce" }),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+                  style: { animationDelay: "0.1s" }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+                  style: { animationDelay: "0.2s" }
+                }
+              )
+            ] }) }),
+            typingUser && /* @__PURE__ */ jsxs3("span", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 px-2", children: [
+              typingUser,
+              " is typing..."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+      ]
+    }
+  );
+}
+
+// src/components/ChatInput.tsx
+import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+import { Button, TextArea } from "@xcelsior/design-system";
+import Picker from "@emoji-mart/react";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatInput({
+  onSend,
+  onTyping,
+  config,
+  fileUpload,
+  disabled = false
+}) {
+  const [message, setMessage] = useState5("");
+  const [showEmojiPicker, setShowEmojiPicker] = useState5(false);
+  const [emojiData, setEmojiData] = useState5();
+  const [emojiPickerPosition, setEmojiPickerPosition] = useState5(null);
+  const textAreaRef = useRef3(null);
+  const emojiPickerRef = useRef3(null);
+  const emojiButtonRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const typingTimeoutRef = useRef3(null);
+  const startTypingTimeoutRef = useRef3(null);
+  const isTypingRef = useRef3(false);
+  const enableEmoji = config.enableEmoji ?? true;
+  const enableFileUpload = config.enableFileUpload ?? true;
+  useEffect5(() => {
+    if (!enableEmoji) return;
+    (async () => {
+      try {
+        const response = await fetch("https://cdn.jsdelivr.net/npm/@emoji-mart/data");
+        setEmojiData(await response.json());
+      } catch (error) {
+        console.error("Failed to load emoji data:", error);
+      }
+    })();
+  }, [enableEmoji]);
+  useEffect5(() => {
+    const handleClickOutside = (event) => {
+      if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
+        setShowEmojiPicker(false);
+      }
+    };
+    if (showEmojiPicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showEmojiPicker]);
+  useEffect5(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      if (startTypingTimeoutRef.current) {
+        clearTimeout(startTypingTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect5(() => {
+    if (!showEmojiPicker) return;
+    const updatePosition = () => {
+      if (emojiButtonRef.current) {
+        const rect = emojiButtonRef.current.getBoundingClientRect();
+        setEmojiPickerPosition({
+          top: rect.top - 370,
+          left: rect.left - 300
+        });
+      }
+    };
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [showEmojiPicker]);
+  const handleTyping = (value) => {
+    setMessage(value);
+    if (onTyping && config.enableTypingIndicator !== false) {
+      if (startTypingTimeoutRef.current) {
+        clearTimeout(startTypingTimeoutRef.current);
+      }
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      if (!isTypingRef.current) {
+        startTypingTimeoutRef.current = setTimeout(() => {
+          onTyping(true);
+          isTypingRef.current = true;
+        }, 300);
+      }
+      typingTimeoutRef.current = setTimeout(() => {
+        if (isTypingRef.current) {
+          onTyping(false);
+          isTypingRef.current = false;
+        }
+      }, 1500);
+    }
+  };
+  const handleSend = () => {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage || disabled) return;
+    onSend(trimmedMessage);
+    setMessage("");
+    setShowEmojiPicker(false);
+    if (onTyping) {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      if (startTypingTimeoutRef.current) {
+        clearTimeout(startTypingTimeoutRef.current);
+      }
+      if (isTypingRef.current) {
+        onTyping(false);
+        isTypingRef.current = false;
+      }
+    }
+    textAreaRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const insertAtCursor = (text) => {
+    const textarea = textAreaRef.current;
+    if (!textarea) {
+      setMessage((prev) => prev + text);
+      return;
+    }
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const newValue = message.slice(0, start) + text + message.slice(end);
+    setMessage(newValue);
+    setTimeout(() => {
+      const newCursorPos = start + text.length;
+      textarea.setSelectionRange(newCursorPos, newCursorPos);
+      textarea.focus();
+    }, 0);
+  };
+  const handleFileSelect = async (event) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+    const file = files[0];
+    try {
+      config.toast?.info("Uploading file...");
+      const uploadedFile = await fileUpload.uploadFile(file);
+      if (uploadedFile?.markdown) {
+        insertAtCursor(`
+${uploadedFile.markdown}
+`);
+        config.toast?.success("File uploaded successfully");
+      }
+    } catch (error) {
+      console.error("File upload failed:", error);
+      config.toast?.error(error.message);
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3", children: [
+    /* @__PURE__ */ jsx4("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx4(
+        TextArea,
+        {
+          ref: textAreaRef,
+          value: message,
+          onChange: (e) => handleTyping(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message...",
+          rows: 1,
+          className: "resize-none pr-24 pl-4 py-3 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm leading-5 placeholder-gray-500 dark:placeholder-gray-400",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "absolute right-12 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
+        enableEmoji && /* @__PURE__ */ jsx4("div", { className: "relative", children: /* @__PURE__ */ jsx4(
+          "button",
+          {
+            ref: emojiButtonRef,
+            type: "button",
+            onClick: () => {
+              if (!showEmojiPicker && emojiButtonRef.current) {
+                const rect = emojiButtonRef.current.getBoundingClientRect();
+                setEmojiPickerPosition({
+                  top: rect.top - 450,
+                  left: rect.left - 290
+                });
+              }
+              setShowEmojiPicker((v) => !v);
+            },
+            className: "p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+            disabled,
+            "aria-label": "Add emoji",
+            children: /* @__PURE__ */ jsx4("span", { className: "text-lg", children: "\u{1F60A}" })
+          }
+        ) }),
+        enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              className: "p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+              disabled: disabled || fileUpload.isUploading,
+              "aria-label": "Attach file",
+              children: fileUpload.isUploading ? /* @__PURE__ */ jsx4("span", { className: "text-lg animate-spin", children: "\u23F3" }) : /* @__PURE__ */ jsx4("span", { className: "text-lg", children: "\u{1F4CE}" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/*,application/pdf,.doc,.docx",
+              className: "hidden",
+              onChange: handleFileSelect
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx4(
+        Button,
+        {
+          onClick: handleSend,
+          disabled: !message.trim() || disabled,
+          variant: "primary",
+          size: "sm",
+          className: "h-9 w-9 p-0 rounded-full flex items-center justify-center shadow-sm",
+          children: /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs4(
+            "svg",
+            {
+              className: "w-4 h-4 rotate-90",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx4("title", { children: "Send icon" }),
+                /* @__PURE__ */ jsx4(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      ) })
+    ] }) }),
+    fileUpload.isUploading && /* @__PURE__ */ jsxs4("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx4("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "bg-blue-600 h-1.5 rounded-full transition-all duration-300",
+          style: { width: `${fileUpload.uploadProgress}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs4("p", { className: "text-xs text-gray-600 dark:text-gray-400 mt-1", children: [
+        "Uploading... ",
+        fileUpload.uploadProgress,
+        "%"
+      ] })
+    ] }),
+    showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ref: emojiPickerRef,
+          className: "fixed rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 shadow-xl",
+          style: {
+            top: `${emojiPickerPosition.top}px`,
+            left: `${emojiPickerPosition.left}px`,
+            zIndex: 9999
+          },
+          children: /* @__PURE__ */ jsx4(
+            Picker,
+            {
+              data: emojiData,
+              onEmojiSelect: (emoji) => {
+                insertAtCursor(emoji.native || emoji.shortcodes || "");
+                setShowEmojiPicker(false);
+              },
+              previewPosition: "none",
+              skinTonePosition: "none",
+              navPosition: "bottom",
+              perLine: 8,
+              searchPosition: "sticky",
+              theme: "auto"
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/ChatWidget.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatWidget({
+  config,
+  className = "",
+  variant = "popover",
+  externalWebSocket
+}) {
+  const [isMinimized, setIsMinimized] = useState6(false);
+  const [isClosed, setIsClosed] = useState6(false);
+  const isFullPage = variant === "fullPage";
+  const websocket = useWebSocket(config, externalWebSocket);
+  const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
+    websocket,
+    config
+  );
+  const fileUpload = useFileUpload(config.apiKey, config.fileUpload);
+  const { isTyping, typingUsers } = useTypingIndicator(websocket);
+  const handleSendMessage = useCallback4(
+    (content) => {
+      if (!websocket.isConnected) {
+        config.toast?.error("Not connected to chat server");
+        return;
+      }
+      const optimisticMessage = {
+        id: `temp-${Date.now()}`,
+        conversationId: config.conversationId || "",
+        senderId: config.currentUser.email,
+        senderType: config.currentUser.type,
+        content,
+        messageType: "text",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "sent"
+      };
+      addMessage(optimisticMessage);
+      websocket.sendMessage("sendMessage", {
+        conversationId: config.conversationId,
+        content,
+        messageType: "text"
+      });
+      config.onMessageSent?.(optimisticMessage);
+    },
+    [websocket, config, addMessage]
+  );
+  const handleTyping = useCallback4(
+    (isTyping2) => {
+      if (!websocket.isConnected || config.enableTypingIndicator === false) {
+        return;
+      }
+      websocket.sendMessage("typing", {
+        conversationId: config.conversationId,
+        isTyping: isTyping2
+      });
+    },
+    [websocket, config]
+  );
+  useEffect6(() => {
+    if (websocket.error) {
+      config.toast?.error(websocket.error.message || "An error occurred");
+    }
+  }, [websocket.error, config]);
+  if (!isFullPage) {
+    if (isClosed) {
+      return null;
+    }
+    if (isMinimized) {
+      return /* @__PURE__ */ jsx5("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsMinimized(false),
+          className: "h-14 w-14 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-xl transition-all flex items-center justify-center relative",
+          "aria-label": "Open chat",
+          children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-2xl", children: "\u{1F4AC}" }),
+            messages.some(
+              (msg) => msg.senderId !== config.currentUser.email && msg.status !== "read"
+            ) && /* @__PURE__ */ jsx5("span", { className: "absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center", children: "!" })
+          ]
+        }
+      ) });
+    }
+  }
+  const containerClasses = isFullPage ? `flex flex-col bg-white dark:bg-gray-900 h-full ${className}` : `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`;
+  const containerStyle = isFullPage ? void 0 : {
+    width: "400px",
+    height: "600px",
+    maxHeight: "calc(100vh - 2rem)"
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: containerClasses, style: containerStyle, children: [
+    !isFullPage && /* @__PURE__ */ jsx5(
+      ChatHeader,
+      {
+        agent: config.currentUser.type === "customer" ? {
+          email: "contact@xcelsior.co",
+          name: "Support Agent",
+          type: "agent",
+          status: websocket.isConnected ? "online" : "offline"
+        } : void 0,
+        onMinimize: () => setIsMinimized(true),
+        onClose: () => setIsClosed(true)
+      }
+    ),
+    !websocket.isConnected && /* @__PURE__ */ jsx5("div", { className: "bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800 px-4 py-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx5("div", { className: "w-2 h-2 rounded-full bg-yellow-500 animate-pulse" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "Reconnecting..." }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: websocket.reconnect,
+          className: "ml-auto text-xs text-yellow-700 dark:text-yellow-300 hover:underline",
+          children: "Retry"
+        }
+      )
+    ] }) }),
+    isLoading ? /* @__PURE__ */ jsx5("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Loading messages..." })
+    ] }) }) : /* @__PURE__ */ jsx5(
+      MessageList,
+      {
+        messages,
+        currentUser: config.currentUser,
+        isTyping,
+        typingUser: typingUsers[0],
+        autoScroll: true,
+        onLoadMore: loadMore,
+        hasMore,
+        isLoadingMore
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      ChatInput,
+      {
+        onSend: handleSendMessage,
+        onTyping: handleTyping,
+        config,
+        fileUpload,
+        disabled: !websocket.isConnected
+      }
+    ),
+    !isFullPage && /* @__PURE__ */ jsx5("div", { className: "bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs5("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      "Powered by ",
+      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: "Xcelsior Chat" })
+    ] }) })
+  ] });
+}
+
+// src/components/Chat.tsx
+import { useCallback as useCallback5, useEffect as useEffect7, useState as useState8 } from "react";
+
+// src/components/PreChatForm.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PreChatForm({
+  onSubmit,
+  className = "",
+  initialName = "",
+  initialEmail = ""
+}) {
+  const [name, setName] = useState7(initialName);
+  const [email, setEmail] = useState7(initialEmail);
+  const [errors, setErrors] = useState7({});
+  const [isSubmitting, setIsSubmitting] = useState7(false);
+  const validateForm = () => {
+    const newErrors = {};
+    if (!name.trim()) {
+      newErrors.name = "Name is required";
+    } else if (name.trim().length < 2) {
+      newErrors.name = "Name must be at least 2 characters";
+    }
+    if (!email.trim()) {
+      newErrors.email = "Email is required";
+    } else {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(email)) {
+        newErrors.email = "Please enter a valid email address";
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) {
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      onSubmit(name.trim(), email.trim());
+    } catch (error) {
+      console.error("Error submitting form:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`,
+      style: {
+        width: "400px",
+        maxHeight: "calc(100vh - 2rem)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: [
+          /* @__PURE__ */ jsx6("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
+        ] }),
+        /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "p-6 space-y-5", children: [
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsxs6(
+              "label",
+              {
+                htmlFor: "chat-name",
+                className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200",
+                children: [
+                  "Name ",
+                  /* @__PURE__ */ jsx6("span", { className: "text-red-500", children: "*" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "text",
+                id: "chat-name",
+                value: name,
+                onChange: (e) => {
+                  setName(e.target.value);
+                  if (errors.name) {
+                    setErrors((prev) => ({ ...prev, name: void 0 }));
+                  }
+                },
+                className: `block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${errors.name ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500"} dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`,
+                placeholder: "John Doe",
+                disabled: isSubmitting,
+                autoComplete: "name"
+              }
+            ),
+            errors.name && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-red-600 dark:text-red-500", role: "alert", children: errors.name })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsxs6(
+              "label",
+              {
+                htmlFor: "chat-email",
+                className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200",
+                children: [
+                  "Email ",
+                  /* @__PURE__ */ jsx6("span", { className: "text-red-500", children: "*" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "email",
+                id: "chat-email",
+                value: email,
+                onChange: (e) => {
+                  setEmail(e.target.value);
+                  if (errors.email) {
+                    setErrors((prev) => ({ ...prev, email: void 0 }));
+                  }
+                },
+                className: `block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${errors.email ? "border-red-500 focus:ring-red-500 focus:border-red-500" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500"} dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`,
+                placeholder: "john@example.com",
+                disabled: isSubmitting,
+                autoComplete: "email"
+              }
+            ),
+            errors.email && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-red-600 dark:text-red-500", role: "alert", children: errors.email })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "submit",
+              disabled: isSubmitting,
+              className: "w-full px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all",
+              children: isSubmitting ? /* @__PURE__ */ jsxs6("span", { className: "flex items-center justify-center", children: [
+                /* @__PURE__ */ jsxs6(
+                  "svg",
+                  {
+                    className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    "aria-label": "Loading",
+                    children: [
+                      /* @__PURE__ */ jsx6("title", { children: "Loading" }),
+                      /* @__PURE__ */ jsx6(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                "Starting Chat..."
+              ] }) : "Start Chat"
+            }
+          ),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: "We respect your privacy. Your information will only be used to assist you." })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs6("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+          "Powered by ",
+          /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: "Xcelsior Chat" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/Chat.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function generateSessionId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+}
+function Chat({
+  config,
+  className = "",
+  storageKeyPrefix = "xcelsior_chat",
+  onPreChatSubmit
+}) {
+  const [userInfo, setUserInfo] = useState8(null);
+  const [conversationId, setConversationId] = useState8("");
+  const [isLoading, setIsLoading] = useState8(true);
+  useEffect7(() => {
+    const initializeSession = () => {
+      try {
+        if (config.currentUser?.email && config.currentUser?.name) {
+          const convId2 = config.conversationId || generateSessionId();
+          const user = {
+            name: config.currentUser.name,
+            email: config.currentUser.email,
+            avatar: config.currentUser.avatar,
+            type: "customer",
+            status: config.currentUser.status
+          };
+          setUserInfo(user);
+          setConversationId(convId2);
+          setIsLoading(false);
+          return;
+        }
+        const storedDataJson = localStorage.getItem(`${storageKeyPrefix}_user`);
+        if (storedDataJson) {
+          const storedData = JSON.parse(storedDataJson);
+          const isExpired = Date.now() - storedData.timestamp > 24 * 60 * 60 * 1e3;
+          if (!isExpired && storedData.email && storedData.name) {
+            const user = {
+              name: storedData.name,
+              email: storedData.email,
+              type: "customer",
+              status: "online"
+            };
+            setUserInfo(user);
+            setConversationId(storedData.conversationId);
+            setIsLoading(false);
+            return;
+          }
+        }
+        const convId = config.conversationId || generateSessionId();
+        setConversationId(convId);
+        if (config.currentUser?.email && config.currentUser?.name) {
+          const user = {
+            name: config.currentUser.name,
+            email: config.currentUser.email,
+            avatar: config.currentUser.avatar,
+            type: "customer",
+            status: "online"
+          };
+          setUserInfo(user);
+        }
+      } catch (error) {
+        console.error("Error initializing chat session:", error);
+        setConversationId(config.conversationId || generateSessionId());
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    initializeSession();
+  }, [config, storageKeyPrefix]);
+  const handlePreChatSubmit = useCallback5(
+    (name, email) => {
+      const convId = conversationId || generateSessionId();
+      const user = {
+        name,
+        email,
+        type: "customer",
+        status: "online"
+      };
+      const storageData = {
+        name,
+        email,
+        conversationId: convId,
+        timestamp: Date.now()
+      };
+      try {
+        localStorage.setItem(`${storageKeyPrefix}_user`, JSON.stringify(storageData));
+      } catch (error) {
+        console.error("Error storing user data:", error);
+      }
+      setUserInfo(user);
+      setConversationId(convId);
+      onPreChatSubmit?.(user);
+    },
+    [conversationId, storageKeyPrefix, onPreChatSubmit]
+  );
+  if (isLoading) {
+    return null;
+  }
+  if (!userInfo || !userInfo.email || !userInfo.name) {
+    return /* @__PURE__ */ jsx7(
+      PreChatForm,
+      {
+        onSubmit: handlePreChatSubmit,
+        className,
+        initialName: config.currentUser?.name,
+        initialEmail: config.currentUser?.email
+      }
+    );
+  }
+  const fullConfig = {
+    ...config,
+    conversationId,
+    currentUser: userInfo
+  };
+  return /* @__PURE__ */ jsx7(ChatWidget, { config: fullConfig, className });
+}
+
+// src/components/TypingIndicator.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function TypingIndicator({ isTyping, userName }) {
+  if (!isTyping) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
+      /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
+          style: { animationDelay: "0.1s" }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
+          style: { animationDelay: "0.2s" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: userName ? `${userName} is typing...` : "Someone is typing..." })
+  ] }) });
+}
+export {
+  Chat,
+  ChatHeader,
+  ChatInput,
+  ChatWidget,
+  MessageItem,
+  MessageList,
+  PreChatForm,
+  TypingIndicator,
+  fetchMessages,
+  useFileUpload,
+  useMessages,
+  useTypingIndicator,
+  useWebSocket
+};
+//# sourceMappingURL=index.mjs.map