@bootdesk/js-web-adapter-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2536 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AttachmentList: () => AttachmentList,
+  CardProvider: () => CardProvider,
+  CardRenderer: () => CardRenderer,
+  ChatProvider: () => ChatProvider,
+  ChatWidget: () => ChatWidget,
+  DefaultCard: () => DefaultCard,
+  Dropzone: () => Dropzone,
+  ErrorBoundary: () => ErrorBoundary,
+  FileCardComponent: () => FileCardComponent,
+  FloatingButton: () => FloatingButton,
+  Header: () => Header,
+  ImageCardComponent: () => ImageCardComponent,
+  InputArea: () => InputArea,
+  LaravelEchoBroadcastClient: () => import_js_web_adapter_core4.LaravelEchoBroadcastClient,
+  LocaleProvider: () => LocaleProvider,
+  MarkdownRenderer: () => MarkdownRenderer,
+  MessageContent: () => MessageContent,
+  MessageList: () => MessageList,
+  PushManager: () => import_js_web_adapter_core3.PushManager,
+  PushPermissionPrompt: () => PushPermissionPrompt,
+  PushToggle: () => PushToggle,
+  PusherBroadcastClient: () => import_js_web_adapter_core4.PusherBroadcastClient,
+  TypingIndicator: () => TypingIndicator,
+  WebChatClient: () => import_js_web_adapter_core4.WebChatClient,
+  createPushSubscriptionHandlers: () => import_js_web_adapter_core3.createPushSubscriptionHandlers,
+  getAvailableLocales: () => getAvailableLocales,
+  registerLocale: () => registerLocale,
+  renderMarkdown: () => renderMarkdown,
+  useAttachmentUpload: () => useAttachmentUpload,
+  useCardRegistry: () => useCardRegistry,
+  useCardRendererRegistry: () => useCardRegistry,
+  useChatClient: () => useChatClient,
+  useChatContext: () => useChatContext,
+  useLocale: () => useLocale,
+  useMessages: () => useMessages,
+  usePushNotifications: () => usePushNotifications,
+  useStreaming: () => useStreaming,
+  useTyping: () => useTyping
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ChatWidget.tsx
+var import_react13 = require("react");
+
+// src/hooks/useChatClient.ts
+var import_react = require("react");
+var import_js_web_adapter_core = require("@bootdesk/js-web-adapter-core");
+function useChatClient(config) {
+  const client = (0, import_react.useMemo)(() => new import_js_web_adapter_core.WebChatClient(config), [config]);
+  (0, import_react.useEffect)(() => {
+    client.connect().catch((error) => {
+      console.error("Failed to connect chat client:", error);
+    });
+    return () => {
+      client.disconnect();
+    };
+  }, [client]);
+  return client;
+}
+
+// src/hooks/useMessages.ts
+var import_react2 = require("react");
+function useMessages(client, enabled = true) {
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [isLoadingHistory, setIsLoadingHistory] = (0, import_react2.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react2.useState)(false);
+  const [nextCursor, setNextCursor] = (0, import_react2.useState)(void 0);
+  const [loadError, setLoadError] = (0, import_react2.useState)(null);
+  const abortRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) return;
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const { signal } = controller;
+    setIsLoadingHistory(true);
+    setLoadError(null);
+    const loadInitial = async () => {
+      try {
+        const result = await client.loadMessages({ limit: 50, skipStateSeed: true }, signal);
+        if (signal.aborted) return;
+        setMessages(result.messages);
+        setHasMore(result.hasMore);
+        setNextCursor(result.nextCursor);
+      } catch (error) {
+        if (signal.aborted) return;
+        setLoadError(error instanceof Error ? error : new Error("Failed to load messages"));
+      } finally {
+        if (!signal.aborted) {
+          setIsLoadingHistory(false);
+        }
+      }
+    };
+    loadInitial();
+    return () => {
+      controller.abort();
+      if (abortRef.current === controller) {
+        abortRef.current = null;
+      }
+    };
+  }, [client, enabled]);
+  const reloadMessages = (0, import_react2.useCallback)(async () => {
+    setIsLoadingHistory(true);
+    setLoadError(null);
+    try {
+      const result = await client.loadMessages({ limit: 50, skipStateSeed: true });
+      setMessages(result.messages);
+      setHasMore(result.hasMore);
+      setNextCursor(result.nextCursor);
+    } catch (error) {
+      setLoadError(error instanceof Error ? error : new Error("Failed to reload messages"));
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, [client]);
+  const retryLoad = (0, import_react2.useCallback)(async () => {
+    setLoadError(null);
+    setIsLoadingHistory(true);
+    try {
+      const result = await client.loadMessages({ limit: 50, skipStateSeed: true });
+      setMessages(result.messages);
+      setHasMore(result.hasMore);
+      setNextCursor(result.nextCursor);
+    } catch (error) {
+      setLoadError(error instanceof Error ? error : new Error("Failed to load messages"));
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, [client]);
+  (0, import_react2.useEffect)(() => {
+    const unsubscribes = [];
+    unsubscribes.push(
+      client.addEventListener("message:added", (message) => {
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === message.id)) return prev;
+          return [...prev, message];
+        });
+      })
+    );
+    const features2 = client.getFeatures();
+    if (features2.editMessages) {
+      unsubscribes.push(
+        client.addEventListener(
+          "message:edited",
+          ({ messageId, newText }) => {
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === messageId ? { ...msg, content: { ...msg.content, text: newText } } : msg
+              )
+            );
+          }
+        )
+      );
+    }
+    if (features2.deleteMessages) {
+      unsubscribes.push(
+        client.addEventListener("message:deleted", ({ messageId }) => {
+          setMessages((prev) => prev.filter((msg) => msg.id !== messageId));
+        })
+      );
+    }
+    if (features2.reactions) {
+      unsubscribes.push(
+        client.addEventListener(
+          "reaction:added",
+          ({ messageId, emoji }) => {
+            setMessages(
+              (prev) => prev.map((msg) => {
+                if (msg.id !== messageId || !msg.reactions) return msg;
+                const existing = msg.reactions.find((r) => r.emoji === emoji);
+                if (existing) {
+                  return {
+                    ...msg,
+                    reactions: msg.reactions.map(
+                      (r) => r.emoji === emoji ? { ...r, count: r.count + 1 } : r
+                    )
+                  };
+                }
+                return {
+                  ...msg,
+                  reactions: [...msg.reactions, { emoji, count: 1, users: [] }]
+                };
+              })
+            );
+          }
+        )
+      );
+      unsubscribes.push(
+        client.addEventListener(
+          "reaction:removed",
+          ({ messageId, emoji }) => {
+            setMessages(
+              (prev) => prev.map((msg) => {
+                if (msg.id !== messageId || !msg.reactions) return msg;
+                const idx = msg.reactions.findIndex((r) => r.emoji === emoji);
+                if (idx === -1) return msg;
+                const updated = [...msg.reactions];
+                if (updated[idx].count <= 1) {
+                  updated.splice(idx, 1);
+                } else {
+                  updated[idx] = { ...updated[idx], count: updated[idx].count - 1 };
+                }
+                return { ...msg, reactions: updated };
+              })
+            );
+          }
+        )
+      );
+    }
+    return () => {
+      unsubscribes.forEach((unsub) => unsub());
+    };
+  }, [client]);
+  const sendMessage = (0, import_react2.useCallback)(
+    async (text, attachments) => {
+      setLoading(true);
+      try {
+        await client.sendMessage(text, attachments || []);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+  const editMessage = (0, import_react2.useCallback)(
+    async (id, text) => {
+      if (!client.getFeatures().editMessages) {
+        throw new Error("Edit messages not enabled. Set features.editMessages = true.");
+      }
+      const endpoint = client.getEndpoints().editMessage || "/api/chat/messages/{id}/edit";
+      await client.getHttpClient().editMessage(id, text, endpoint);
+      setMessages(
+        (prev) => prev.map((msg) => msg.id === id ? { ...msg, content: { ...msg.content, text } } : msg)
+      );
+    },
+    [client]
+  );
+  const deleteMessage = (0, import_react2.useCallback)(
+    async (id) => {
+      if (!client.getFeatures().deleteMessages) {
+        throw new Error("Delete messages not enabled. Set features.deleteMessages = true.");
+      }
+      const endpoint = client.getEndpoints().deleteMessage || "/api/chat/messages/{id}";
+      await client.getHttpClient().deleteMessage(id, endpoint);
+      setMessages((prev) => prev.filter((msg) => msg.id !== id));
+    },
+    [client]
+  );
+  const addReaction = (0, import_react2.useCallback)(
+    async (id, emoji) => {
+      await client.addReaction(id, emoji);
+    },
+    [client]
+  );
+  const removeReaction = (0, import_react2.useCallback)(
+    async (id, emoji) => {
+      await client.removeReaction(id, emoji);
+    },
+    [client]
+  );
+  const loadMore = (0, import_react2.useCallback)(async () => {
+    if (!nextCursor || isLoadingHistory) return;
+    setIsLoadingHistory(true);
+    try {
+      const result = await client.loadMessages({
+        limit: 50,
+        before: nextCursor
+      });
+      setMessages((prev) => [...result.messages, ...prev]);
+      setHasMore(result.hasMore);
+      setNextCursor(result.nextCursor);
+    } catch (error) {
+      console.error("Failed to load more messages:", error);
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, [client, nextCursor, isLoadingHistory]);
+  const features = client.getFeatures();
+  const canEdit = !!features.editMessages;
+  const canDelete = !!features.deleteMessages;
+  const canReact = !!features.reactions;
+  return {
+    messages,
+    loading,
+    isLoadingHistory,
+    hasMore,
+    loadMore,
+    reloadMessages,
+    retryLoad,
+    loadError,
+    canEdit,
+    canDelete,
+    canReact,
+    sendMessage,
+    editMessage,
+    deleteMessage,
+    addReaction,
+    removeReaction
+  };
+}
+
+// src/hooks/useStreaming.ts
+var import_react3 = require("react");
+function useStreaming(client) {
+  const [streamingMessages, setStreamingMessages] = (0, import_react3.useState)(
+    /* @__PURE__ */ new Map()
+  );
+  (0, import_react3.useEffect)(() => {
+    const unsub = client.onStreamingChunk((event) => {
+      setStreamingMessages((prev) => {
+        const next = new Map(prev);
+        const existing = next.get(event.messageId);
+        const newText = (existing?.fullText || "") + event.chunk;
+        if (event.isFinal) {
+          next.delete(event.messageId);
+        } else {
+          next.set(event.messageId, {
+            messageId: event.messageId,
+            fullText: newText,
+            isComplete: event.isFinal
+          });
+        }
+        return next;
+      });
+    });
+    return unsub;
+  }, [client]);
+  const isStreaming = streamingMessages.size > 0;
+  return { streamingMessages, isStreaming };
+}
+
+// src/hooks/useTyping.ts
+var import_react4 = require("react");
+function useTyping(client) {
+  const [typingUsers, setTypingUsers] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
+  const timeoutsRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react4.useEffect)(() => {
+    const unsub = client.onTypingStarted((event) => {
+      const existing = timeoutsRef.current.get(event.userId);
+      if (existing) clearTimeout(existing);
+      setTypingUsers((prev) => new Set(prev).add(event.userId));
+      const timeoutId = setTimeout(() => {
+        timeoutsRef.current.delete(event.userId);
+        setTypingUsers((prev) => {
+          const next = new Set(prev);
+          next.delete(event.userId);
+          return next;
+        });
+      }, 3e3);
+      timeoutsRef.current.set(event.userId, timeoutId);
+    });
+    return () => {
+      unsub();
+      for (const id of timeoutsRef.current.values()) {
+        clearTimeout(id);
+      }
+      timeoutsRef.current.clear();
+    };
+  }, [client]);
+  const isSomeoneTyping = typingUsers.size > 0;
+  return { typingUsers, isSomeoneTyping };
+}
+
+// src/hooks/usePushNotifications.ts
+var import_react5 = require("react");
+var import_js_web_adapter_core2 = require("@bootdesk/js-web-adapter-core");
+function usePushNotifications(options) {
+  const { enabled = false } = options;
+  const [status, setStatus] = (0, import_react5.useState)("unsupported");
+  const pushManagerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!enabled) return;
+    const pushManager = new import_js_web_adapter_core2.PushManager({
+      getVapidPublicKey: options.getVapidPublicKey,
+      onSubscribe: options.onSubscribe,
+      onUnsubscribe: options.onUnsubscribe,
+      serviceWorkerUrl: options.serviceWorkerUrl,
+      notificationOptions: options.notificationOptions
+    });
+    pushManagerRef.current = pushManager;
+    const unsubscribeStatus = pushManager.onStatusChange(setStatus);
+    pushManager.initialize();
+    return () => {
+      unsubscribeStatus();
+    };
+  }, [enabled]);
+  const subscribe = (0, import_react5.useCallback)(async () => {
+    await pushManagerRef.current?.subscribe();
+  }, []);
+  const unsubscribe = (0, import_react5.useCallback)(async () => {
+    await pushManagerRef.current?.unsubscribe();
+  }, []);
+  return {
+    status,
+    isSupported: import_js_web_adapter_core2.PushManager.isSupported(),
+    isSubscribed: status === "subscribed",
+    subscribe,
+    unsubscribe
+  };
+}
+
+// src/hooks/useAttachmentUpload.ts
+var import_react6 = require("react");
+
+// src/types/AttachmentUpload.ts
+function isMultiStepUpload(config) {
+  return "requestSignedUrl" in config;
+}
+
+// src/hooks/useAttachmentUpload.ts
+function generateAttachmentId() {
+  return `att-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function useAttachmentUpload(uploadConfig) {
+  const [attachments, setAttachments] = (0, import_react6.useState)([]);
+  const abortControllers = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
+  const uploadFileRef = (0, import_react6.useRef)();
+  const addFiles = (0, import_react6.useCallback)((files) => {
+    const fileArray = Array.isArray(files) ? files : Array.from(files);
+    const newAttachments = fileArray.map((file) => ({
+      id: generateAttachmentId(),
+      file,
+      name: file.name,
+      mimeType: file.type,
+      size: file.size,
+      status: "pending",
+      progress: 0
+    }));
+    setAttachments((prev) => [...prev, ...newAttachments]);
+    newAttachments.forEach((att) => uploadFileRef.current?.(att));
+  }, []);
+  const uploadFile = (0, import_react6.useCallback)(
+    async (attachment) => {
+      const controller = new AbortController();
+      abortControllers.current.set(attachment.id, controller);
+      try {
+        setAttachments(
+          (prev) => prev.map(
+            (a) => a.id === attachment.id ? { ...a, status: "uploading", progress: 0 } : a
+          )
+        );
+        if (isMultiStepUpload(uploadConfig)) {
+          const signedUrl = await uploadConfig.requestSignedUrl({
+            name: attachment.name,
+            mimeType: attachment.mimeType,
+            size: attachment.size
+          });
+          if (controller.signal.aborted) return;
+          const uploadSuccess = await uploadConfig.uploadToSignedUrl(
+            signedUrl,
+            attachment.file,
+            (progress) => {
+              setAttachments(
+                (prev) => prev.map((a) => a.id === attachment.id ? { ...a, progress } : a)
+              );
+            }
+          );
+          if (controller.signal.aborted) return;
+          if (!uploadSuccess) {
+            throw new Error("Upload to signed URL failed");
+          }
+          const finalUrl = await uploadConfig.confirmUpload(signedUrl, {
+            name: attachment.name,
+            mimeType: attachment.mimeType,
+            size: attachment.size
+          });
+          setAttachments(
+            (prev) => prev.map(
+              (a) => a.id === attachment.id ? { ...a, status: "uploaded", progress: 100, url: finalUrl } : a
+            )
+          );
+        } else {
+          const formData = new FormData();
+          formData.append("file", attachment.file);
+          const xhr = new XMLHttpRequest();
+          xhr.upload.addEventListener("progress", (e) => {
+            if (e.lengthComputable) {
+              const progress = Math.round(e.loaded / e.total * 100);
+              setAttachments(
+                (prev) => prev.map((a) => a.id === attachment.id ? { ...a, progress } : a)
+              );
+            }
+          });
+          const response = await new Promise((resolve, reject) => {
+            xhr.onload = () => {
+              if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(JSON.parse(xhr.responseText));
+              } else {
+                reject(new Error(`Upload failed: ${xhr.status}`));
+              }
+            };
+            xhr.onerror = () => reject(new Error("Network error"));
+            xhr.onabort = () => reject(new Error("Upload cancelled"));
+            xhr.open("POST", uploadConfig.endpoint);
+            if (uploadConfig.headers) {
+              Object.entries(uploadConfig.headers).forEach(([key, value]) => {
+                xhr.setRequestHeader(key, value);
+              });
+            }
+            xhr.send(formData);
+          });
+          setAttachments(
+            (prev) => prev.map(
+              (a) => a.id === attachment.id ? { ...a, status: "uploaded", progress: 100, url: response.url } : a
+            )
+          );
+        }
+      } catch (error) {
+        if (controller.signal.aborted) return;
+        setAttachments(
+          (prev) => prev.map(
+            (a) => a.id === attachment.id ? {
+              ...a,
+              status: "error",
+              error: error instanceof Error ? error.message : "Upload failed"
+            } : a
+          )
+        );
+      } finally {
+        abortControllers.current.delete(attachment.id);
+      }
+    },
+    [uploadConfig]
+  );
+  uploadFileRef.current = uploadFile;
+  const removeAttachment = (0, import_react6.useCallback)((id) => {
+    const controller = abortControllers.current.get(id);
+    if (controller) {
+      controller.abort();
+    }
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+  const clearAttachments = (0, import_react6.useCallback)(() => {
+    abortControllers.current.forEach((c) => c.abort());
+    abortControllers.current.clear();
+    setAttachments([]);
+  }, []);
+  const resetUploads = (0, import_react6.useCallback)(() => {
+    setAttachments(
+      (prev) => prev.map(
+        (a) => a.status === "error" ? { ...a, status: "pending", progress: 0, error: void 0 } : a
+      )
+    );
+  }, []);
+  const getUploadedAttachments = (0, import_react6.useCallback)(() => {
+    return attachments.filter((a) => a.status === "uploaded" && a.url);
+  }, [attachments]);
+  const isUploading = attachments.some((a) => a.status === "uploading");
+  const isComplete = attachments.length > 0 && attachments.every((a) => a.status === "uploaded" || a.status === "error");
+  return {
+    attachments,
+    addFiles,
+    removeAttachment,
+    clearAttachments,
+    resetUploads,
+    getUploadedAttachments,
+    isUploading,
+    isComplete
+  };
+}
+
+// src/hooks/useBridge.ts
+var import_react7 = require("react");
+function useBridge() {
+  const notificationCbRef = (0, import_react7.useRef)(null);
+  const [config, setConfig] = (0, import_react7.useState)(null);
+  const isInIframe = typeof window !== "undefined" && window !== window.parent;
+  const notifyMessage = (0, import_react7.useCallback)(
+    (text) => {
+      if (!isInIframe) return;
+      window.parent.postMessage({ type: "chat-message", text }, "*");
+    },
+    [isInIframe]
+  );
+  const notifyViewportConfig = (0, import_react7.useCallback)(
+    (viewportContent) => {
+      if (!isInIframe) return;
+      window.parent.postMessage({ type: "chat-viewport-config", content: viewportContent }, "*");
+    },
+    [isInIframe]
+  );
+  const onNotificationClicked = (0, import_react7.useCallback)((cb) => {
+    notificationCbRef.current = cb;
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (!isInIframe) return;
+    function handleMessage(event) {
+      const data = event.data;
+      if (!data || typeof data !== "object" || !data.type) return;
+      if (data.type === "chat-config") {
+        const configData = { ...data };
+        delete configData.type;
+        setConfig(configData);
+      }
+      if (data.type === "chat-notification-clicked") {
+        notificationCbRef.current?.();
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isInIframe]);
+  return { config, isInIframe, notifyMessage, notifyViewportConfig, onNotificationClicked };
+}
+
+// src/i18n/LocaleProvider.tsx
+var import_react8 = require("react");
+
+// src/i18n/types.ts
+function getBaseLocale(locale) {
+  return locale.split("-")[0] || locale;
+}
+function getFallbackChain(locale) {
+  const base = getBaseLocale(locale);
+  if (locale === base) {
+    return [locale, "en"];
+  }
+  return [locale, base, "en"];
+}
+
+// src/i18n/locales/en.json
+var en_default = {
+  chatWidget: {
+    title: "Chat",
+    placeholder: "Type a message...",
+    openChat: "Open chat",
+    closeChat: "Close chat",
+    connectionStatus: {
+      connected: "Connected",
+      disconnected: "Disconnected"
+    }
+  },
+  inputArea: {
+    send: "Send",
+    uploading: "Uploading...",
+    dropzone: {
+      dropFiles: "Drop files here",
+      dropOrClick: "Drop or click to attach"
+    }
+  },
+  typingIndicator: {
+    typing: "typing",
+    isTyping: "is typing..."
+  },
+  messageList: {
+    emptyState: "No messages yet. Start the conversation!"
+  },
+  attachmentList: {
+    remove: "Remove",
+    uploadFailed: "Upload failed"
+  },
+  header: {
+    enterFullscreen: "Enter fullscreen",
+    exitFullscreen: "Exit fullscreen",
+    closeChat: "Close chat",
+    lightMode: "Light mode",
+    darkMode: "Dark mode",
+    autoMode: "System theme"
+  },
+  floatingButton: {
+    openChat: "Open chat",
+    closeChat: "Close chat"
+  },
+  common: {
+    loading: "Loading...",
+    error: "Error",
+    retry: "Retry",
+    cancel: "Cancel",
+    download: "Download"
+  }
+};
+
+// src/i18n/locales/en-US.json
+var en_US_default = {
+  chatWidget: {
+    title: "Chat"
+  }
+};
+
+// src/i18n/locales/en-GB.json
+var en_GB_default = {
+  chatWidget: {
+    title: "Chat"
+  },
+  common: {
+    loading: "Loading..."
+  }
+};
+
+// src/i18n/locales/pt.json
+var pt_default = {
+  chatWidget: {
+    title: "Chat",
+    placeholder: "Digite uma mensagem...",
+    openChat: "Abrir chat",
+    closeChat: "Fechar chat",
+    connectionStatus: {
+      connected: "Conectado",
+      disconnected: "Desconectado"
+    }
+  },
+  inputArea: {
+    send: "Enviar",
+    uploading: "Enviando...",
+    dropzone: {
+      dropFiles: "Solte arquivos aqui",
+      dropOrClick: "Solte ou clique para anexar"
+    }
+  },
+  typingIndicator: {
+    typing: "digitando",
+    isTyping: "est\xE1 digitando..."
+  },
+  messageList: {
+    emptyState: "Nenhuma mensagem ainda. Inicie a conversa!"
+  },
+  attachmentList: {
+    remove: "Remover",
+    uploadFailed: "Falha no envio"
+  },
+  header: {
+    enterFullscreen: "Tela cheia",
+    exitFullscreen: "Sair da tela cheia",
+    closeChat: "Fechar chat"
+  },
+  floatingButton: {
+    openChat: "Abrir chat",
+    closeChat: "Fechar chat"
+  },
+  common: {
+    loading: "Carregando...",
+    error: "Erro",
+    retry: "Tentar novamente",
+    cancel: "Cancelar",
+    download: "Baixar"
+  }
+};
+
+// src/i18n/locales/pt-BR.json
+var pt_BR_default = {
+  chatWidget: {
+    placeholder: "Digite uma mensagem..."
+  },
+  inputArea: {
+    send: "Enviar",
+    uploading: "Enviando...",
+    dropzone: {
+      dropFiles: "Solte arquivos aqui",
+      dropOrClick: "Solte ou clique para anexar"
+    }
+  },
+  typingIndicator: {
+    isTyping: "est\xE1 digitando..."
+  },
+  attachmentList: {
+    uploadFailed: "Falha no envio"
+  },
+  common: {
+    loading: "Carregando...",
+    retry: "Tentar novamente"
+  }
+};
+
+// src/i18n/locales/pt-PT.json
+var pt_PT_default = {
+  chatWidget: {
+    placeholder: "Escreva uma mensagem..."
+  },
+  inputArea: {
+    send: "Enviar",
+    uploading: "A enviar...",
+    dropzone: {
+      dropFiles: "Largue ficheiros aqui",
+      dropOrClick: "Largue ou clique para anexar"
+    }
+  },
+  typingIndicator: {
+    isTyping: "est\xE1 a escrever..."
+  },
+  attachmentList: {
+    uploadFailed: "Falha no envio"
+  },
+  common: {
+    loading: "A carregar...",
+    retry: "Tentar novamente"
+  }
+};
+
+// src/i18n/locales/es.json
+var es_default = {
+  chatWidget: {
+    title: "Chat",
+    placeholder: "Escribe un mensaje...",
+    openChat: "Abrir chat",
+    closeChat: "Cerrar chat",
+    connectionStatus: {
+      connected: "Conectado",
+      disconnected: "Desconectado"
+    }
+  },
+  inputArea: {
+    send: "Enviar",
+    uploading: "Subiendo...",
+    dropzone: {
+      dropFiles: "Suelta archivos aqu\xED",
+      dropOrClick: "Suelta o haz clic para adjuntar"
+    }
+  },
+  typingIndicator: {
+    typing: "escribiendo",
+    isTyping: "est\xE1 escribiendo..."
+  },
+  messageList: {
+    emptyState: "No hay mensajes todav\xEDa. \xA1Inicia la conversaci\xF3n!"
+  },
+  attachmentList: {
+    remove: "Eliminar",
+    uploadFailed: "Error al subir"
+  },
+  header: {
+    enterFullscreen: "Pantalla completa",
+    exitFullscreen: "Salir de pantalla completa",
+    closeChat: "Cerrar chat"
+  },
+  floatingButton: {
+    openChat: "Abrir chat",
+    closeChat: "Cerrar chat"
+  },
+  common: {
+    loading: "Cargando...",
+    error: "Error",
+    retry: "Reintentar",
+    cancel: "Cancelar",
+    download: "Descargar"
+  }
+};
+
+// src/i18n/mergeLocale.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceVal = source[key];
+    const targetVal = target[key];
+    if (sourceVal && typeof sourceVal === "object" && !Array.isArray(sourceVal) && targetVal && typeof targetVal === "object" && !Array.isArray(targetVal)) {
+      result[key] = deepMerge(targetVal, sourceVal);
+    } else if (sourceVal !== void 0) {
+      result[key] = sourceVal;
+    }
+  }
+  return result;
+}
+var systemLocales = {
+  en: en_default,
+  "en-US": deepMerge(en_default, en_US_default),
+  "en-GB": deepMerge(en_default, en_GB_default),
+  pt: pt_default,
+  "pt-BR": deepMerge(pt_default, pt_BR_default),
+  "pt-PT": deepMerge(pt_default, pt_PT_default),
+  es: es_default
+};
+function registerLocale(locale, strings) {
+  systemLocales[locale] = strings;
+}
+function mergeLocale(locale, overrides) {
+  const chain = getFallbackChain(locale);
+  let base = systemLocales["en"] || en_default;
+  for (const code of chain) {
+    if (code === "en") continue;
+    const localeStrings = systemLocales[code];
+    if (localeStrings) {
+      base = deepMerge(base, localeStrings);
+    }
+  }
+  if (!overrides) return base;
+  return deepMerge(base, overrides);
+}
+function getAvailableLocales() {
+  return Object.keys(systemLocales);
+}
+
+// src/i18n/LocaleProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LocaleContext = (0, import_react8.createContext)(void 0);
+function LocaleProvider({ children, locale }) {
+  const config = (0, import_react8.useMemo)(() => {
+    if (!locale) return { locale: "en" };
+    if (typeof locale === "string") return { locale };
+    return locale;
+  }, [locale]);
+  const value = (0, import_react8.useMemo)(() => {
+    const strings = mergeLocale(config.locale, config.overrides);
+    const t = (path) => {
+      const parts = path.split(".");
+      let current = strings;
+      for (const part of parts) {
+        if (current == null) return path;
+        current = current[part];
+      }
+      return typeof current === "string" ? current : path;
+    };
+    return { locale: config.locale, strings, t };
+  }, [config.locale, config.overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocaleContext.Provider, { value, children });
+}
+function useLocale() {
+  const context = (0, import_react8.useContext)(LocaleContext);
+  if (!context) {
+    const strings = mergeLocale("en");
+    return {
+      locale: "en",
+      strings,
+      t: (path) => {
+        const parts = path.split(".");
+        let current = strings;
+        for (const part of parts) {
+          if (current == null) return path;
+          current = current[part];
+        }
+        return typeof current === "string" ? current : path;
+      }
+    };
+  }
+  return context;
+}
+
+// src/components/FloatingButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FloatingButton({
+  onClick,
+  isOpen,
+  position = "bottom-right",
+  className,
+  icon,
+  openIcon,
+  badgeCount,
+  size = 60,
+  backgroundColor,
+  ariaLabel
+}) {
+  const { t } = useLocale();
+  const positionClasses = {
+    "bottom-right": "fixed bottom-5 right-5",
+    "bottom-left": "fixed bottom-5 left-5",
+    "top-right": "fixed top-5 right-5",
+    "top-left": "fixed top-5 left-5"
+  };
+  const iconSize = Math.floor(size * 0.4);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      onClick,
+      className: `${positionClasses[position]} chat-floating-button hover:scale-105 transition-transform ${className || ""}`,
+      style: { width: size, height: size, backgroundColor },
+      "data-chat-floating-button": "true",
+      "data-testid": "chat-floating-button",
+      "aria-label": ariaLabel || (isOpen ? t("floatingButton.closeChat") : t("floatingButton.openChat")),
+      children: [
+        badgeCount && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: "absolute -top-1 -right-1 min-w-5 h-5 rounded-full bg-chat-error text-white text-xs font-bold flex items-center justify-center px-1",
+            "data-chat-badge": "true",
+            children: badgeCount > 99 ? "99+" : badgeCount
+          }
+        ),
+        isOpen ? openIcon || icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            width: iconSize,
+            height: iconSize,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "#fff",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
+          }
+        ) : icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            width: iconSize,
+            height: iconSize,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "#fff",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Header.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Header({
+  title = "Chat",
+  onClose,
+  onToggleFullscreen,
+  isFullscreen = false,
+  showConnectionStatus = true,
+  isConnected = true,
+  className,
+  theme,
+  onThemeChange
+}) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `chat-header ${className || ""}`,
+      "data-chat-header": "true",
+      "data-testid": "chat-header",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+          showConnectionStatus && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: `w-2 h-2 rounded-full ${isConnected ? "bg-chat-success" : "bg-chat-error"}`,
+              "data-chat-connection-status": "true",
+              title: isConnected ? "Connected" : "Disconnected"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "m-0 text-base font-semibold text-chat-text", children: title })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
+          onThemeChange && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => onThemeChange(theme === "light" ? "dark" : theme === "dark" ? "auto" : "light"),
+              className: "p-1 bg-transparent border-none cursor-pointer text-chat-text-secondary rounded hover:bg-chat-surface transition",
+              "data-chat-theme-toggle": "true",
+              "aria-label": theme === "light" ? t("header.darkMode") : theme === "dark" ? t("header.autoMode") : t("header.lightMode"),
+              title: theme === "light" ? t("header.darkMode") : theme === "dark" ? t("header.autoMode") : t("header.lightMode"),
+              children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+                }
+              ) : theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+                  ]
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+                  ]
+                }
+              )
+            }
+          ),
+          onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: onToggleFullscreen,
+              className: "p-1 bg-transparent border-none cursor-pointer text-chat-text-secondary rounded hover:bg-chat-surface transition",
+              "data-chat-fullscreen-toggle": "true",
+              "aria-label": isFullscreen ? t("header.exitFullscreen") : t("header.enterFullscreen"),
+              title: isFullscreen ? t("header.exitFullscreen") : t("header.enterFullscreen"),
+              children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+                }
+              )
+            }
+          ),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 bg-transparent border-none cursor-pointer text-chat-text-secondary rounded hover:bg-chat-surface transition",
+              "data-chat-close": "true",
+              "aria-label": t("header.closeChat"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+var import_react10 = require("react");
+
+// src/cards/CardContext.tsx
+var import_react9 = require("react");
+
+// src/utils/markdown.tsx
+var import_marked = require("marked");
+var import_dompurify = __toESM(require("dompurify"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var renderer = new import_marked.marked.Renderer();
+renderer.link = ({ href, text }) => {
+  return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+};
+import_marked.marked.setOptions({
+  gfm: true,
+  breaks: true,
+  renderer
+});
+function renderMarkdown(text) {
+  const rawHtml = import_marked.marked.parse(text);
+  return import_dompurify.default.sanitize(rawHtml, { ADD_ATTR: ["target"] });
+}
+function MarkdownRenderer({
+  text,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: `prose prose-sm max-w-none prose-headings:font-semibold prose-a:text-chat-primary prose-a:no-underline hover:prose-a:underline prose-code:bg-chat-surface prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-mono prose-code:text-sm prose-blockquote:border-l-chat-border prose-blockquote:text-chat-text-secondary ${className || ""}`,
+      dangerouslySetInnerHTML: { __html: renderMarkdown(text) }
+    }
+  );
+}
+
+// src/cards/DefaultCard.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DefaultCard({
+  card: rawCard,
+  onActionClick
+}) {
+  if (rawCard.type !== "card") {
+    return null;
+  }
+  const card = rawCard;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: "border border-chat-border rounded-lg overflow-hidden max-w-sm bg-[var(--chat-background)]",
+      "data-chat-card": "default",
+      children: [
+        card.header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-3 py-2 bg-chat-surface border-b border-chat-border font-semibold text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { text: card.header }) }),
+        card.image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "img",
+          {
+            src: card.image.url,
+            alt: card.image.alt || "",
+            className: "block w-full h-auto max-h-48 object-cover",
+            "data-chat-card-image": "true"
+          }
+        ),
+        card.sections?.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-3 py-2", "data-chat-section": index, children: [
+          section.text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-2 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { text: section.text }) }),
+          section.fields?.map((field, fieldIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-1 last:mb-0", "data-chat-field": fieldIndex, children: [
+            field.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-xs text-chat-text-secondary font-medium", children: field.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-chat-text", children: field.value })
+          ] }, fieldIndex))
+        ] }, index)),
+        card.elements?.map((element, elIndex) => {
+          switch (element.type) {
+            case "text":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  className: `px-3 py-2 text-sm ${element.style === "muted" ? "text-chat-text-secondary" : element.style === "bold" ? "text-chat-text font-bold" : "text-chat-text"}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { text: element.content })
+                },
+                `el-${elIndex}`
+              );
+            case "divider":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { className: "border-0 border-t border-chat-border" }, `el-${elIndex}`);
+            case "link":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "a",
+                {
+                  href: element.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "block px-3 py-2 text-chat-primary text-sm no-underline hover:underline",
+                  children: element.label
+                },
+                `el-${elIndex}`
+              );
+            case "table":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full border-collapse text-xs", children: [
+                element.headers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: element.headers.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "th",
+                  {
+                    className: "px-2 py-1 text-left border-b border-chat-border font-semibold",
+                    children: h
+                  },
+                  i
+                )) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: element.rows.map((row, rIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: row.map((cell, cIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "px-2 py-1 border-b border-chat-border", children: cell }, cIdx)) }, rIdx)) })
+              ] }, `el-${elIndex}`);
+            case "link_button":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "a",
+                {
+                  href: element.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: `block px-2 py-1.5 mx-2 my-1 rounded text-sm font-medium text-center no-underline ${element.style === "primary" ? "bg-chat-primary text-white" : element.style === "danger" ? "bg-chat-error text-white" : "bg-chat-surface text-chat-text hover:bg-chat-background"}`,
+                  children: element.label
+                },
+                `el-${elIndex}`
+              );
+            case "image":
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "img",
+                {
+                  src: element.url,
+                  alt: element.alt || "",
+                  className: "block w-full h-auto max-h-36 object-cover"
+                },
+                `el-${elIndex}`
+              );
+            default:
+              return null;
+          }
+        }),
+        card.actions && card.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-wrap gap-2 px-3 py-2", "data-chat-actions": "true", children: card.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            onClick: () => onActionClick?.(action.id, action.value || ""),
+            className: `px-3 py-1.5 border border-chat-border rounded text-sm font-medium transition cursor-pointer ${action.style === "primary" ? "bg-chat-primary text-white border-transparent hover:bg-chat-primary-hover" : action.style === "danger" ? "bg-chat-error text-white border-transparent hover:opacity-90" : "bg-chat-surface text-chat-text hover:bg-chat-background"}`,
+            "data-chat-action": action.id,
+            children: action.label
+          },
+          action.id
+        )) })
+      ]
+    }
+  );
+}
+
+// src/cards/ImageCard.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ImageCardComponent({ card: rawCard }) {
+  if (rawCard.type !== "image") {
+    return null;
+  }
+  const card = rawCard;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rounded-lg overflow-hidden max-w-full", "data-chat-card": "image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "img",
+      {
+        src: card.url,
+        alt: card.alt || "",
+        className: "block max-w-full h-auto",
+        "data-chat-image": "true"
+      }
+    ),
+    card.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-3 py-2 text-sm bg-chat-surface", children: card.title })
+  ] });
+}
+
+// src/utils/formatSize.ts
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/cards/FileCard.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function FileCardComponent({ card: rawCard }) {
+  if (rawCard.type !== "file") {
+    return null;
+  }
+  const card = rawCard;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "flex items-center gap-3 p-3 border border-chat-border rounded-lg max-w-xs",
+      "data-chat-card": "file",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-10 h-10 flex items-center justify-center bg-chat-surface rounded", children: "\u{1F4C4}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm font-medium truncate", children: card.name }),
+          card.size && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-chat-text-secondary", children: formatSize(card.size) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "a",
+          {
+            href: card.url,
+            download: card.name,
+            className: "px-3 py-2 bg-chat-primary text-white rounded text-sm font-medium no-underline hover:opacity-90",
+            "data-chat-file-download": "true",
+            children: "Download"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/cards/CardContext.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CardContext = (0, import_react9.createContext)(void 0);
+function CardProvider({ children, renderers }) {
+  const value = (0, import_react9.useMemo)(() => {
+    const defaultRenderers = /* @__PURE__ */ new Map([
+      ["card", DefaultCard],
+      ["image", ImageCardComponent],
+      ["file", FileCardComponent]
+    ]);
+    if (renderers) {
+      Object.entries(renderers).forEach(([type, renderer2]) => {
+        defaultRenderers.set(type, renderer2);
+      });
+    }
+    return {
+      renderers: defaultRenderers,
+      registerRenderer: (type, renderer2) => {
+        defaultRenderers.set(type, renderer2);
+      },
+      getRenderer: (type) => {
+        return defaultRenderers.get(type);
+      }
+    };
+  }, [renderers]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContext.Provider, { value, children });
+}
+function useCardRegistry() {
+  const context = (0, import_react9.useContext)(CardContext);
+  if (!context) {
+    throw new Error("useCardRegistry must be used within CardProvider");
+  }
+  return context;
+}
+
+// src/cards/CardRenderer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CardRenderer({ card, onActionClick }) {
+  const { getRenderer } = useCardRegistry();
+  const Renderer = getRenderer(card.type);
+  if (Renderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Renderer, { card, onActionClick });
+  }
+  if (isPHPCard(card)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultCard, { card, onActionClick });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "8px", background: "#f3f4f6", borderRadius: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { style: { fontSize: "12px", overflow: "auto" }, children: JSON.stringify(card, null, 2) }) });
+}
+function isPHPCard(card) {
+  return card.type === "card";
+}
+
+// src/components/MessageContent.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function MessageContent({ message, onActionClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-chat-message-content": "true", children: [
+    message.content.text && !message.content.cards?.length && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "break-words text-sm leading-relaxed", "data-chat-text": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkdownRenderer, { text: message.content.text }) }),
+    message.content.cards?.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: index > 0 ? "mt-2" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CardRenderer,
+      {
+        card,
+        onActionClick: (actionId, value) => onActionClick?.(message.id, actionId, value)
+      }
+    ) }, index)),
+    message.attachments?.map((attachment) => {
+      const isImage = attachment.type === "image" || attachment.mimeType?.startsWith("image/");
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: isImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href: attachment.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: attachment.url,
+          alt: attachment.name || "Image",
+          className: "max-w-full rounded object-cover",
+          loading: "lazy",
+          "data-chat-attachment": attachment.id
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "a",
+        {
+          href: attachment.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 px-3 py-2 bg-chat-surface rounded text-sm no-underline text-chat-text hover:bg-chat-background transition",
+          "data-chat-attachment": attachment.id,
+          children: [
+            "\u{1F4CE} ",
+            attachment.name
+          ]
+        }
+      ) }, attachment.id);
+    })
+  ] });
+}
+
+// src/utils/formatTimestamp.ts
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`;
+  return date.toLocaleDateString();
+}
+
+// src/components/MessageList.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function MessageList({
+  messages,
+  currentUserId,
+  isLoading = false,
+  onReactionClick,
+  onActionClick,
+  className
+}) {
+  const { t } = useLocale();
+  const containerRef = (0, import_react10.useRef)(null);
+  const listEndRef = (0, import_react10.useRef)(null);
+  const hasInitiallyScrolled = (0, import_react10.useRef)(false);
+  const isNearBottom = (0, import_react10.useRef)(true);
+  (0, import_react10.useEffect)(() => {
+    if (!hasInitiallyScrolled.current && messages.length > 0) {
+      listEndRef.current?.scrollIntoView?.();
+      hasInitiallyScrolled.current = true;
+    }
+  }, [messages.length]);
+  const prevMessagesLength = (0, import_react10.useRef)(messages.length);
+  (0, import_react10.useEffect)(() => {
+    if (messages.length > prevMessagesLength.current) {
+      listEndRef.current?.scrollIntoView?.({ behavior: "smooth" });
+    }
+    prevMessagesLength.current = messages.length;
+  }, [messages.length]);
+  (0, import_react10.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleScroll = () => {
+      const threshold = 100;
+      isNearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    const observer = new ResizeObserver(() => {
+      if (isNearBottom.current) {
+        listEndRef.current?.scrollIntoView?.({ behavior: "smooth" });
+      }
+    });
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+      observer.disconnect();
+    };
+  }, []);
+  const groupedMessages = (0, import_react10.useMemo)(() => {
+    const groups = [];
+    let currentGroup = null;
+    for (const message of messages) {
+      const userId = message.author.id;
+      if (!currentGroup || currentGroup.user !== userId) {
+        if (currentGroup) {
+          groups.push(currentGroup);
+        }
+        currentGroup = { user: userId, messages: [message] };
+      } else {
+        currentGroup.messages.push(message);
+      }
+    }
+    if (currentGroup) {
+      groups.push(currentGroup);
+    }
+    return groups;
+  }, [messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `chat-message-list flex-1 min-h-0 overflow-y-auto ${className || ""}`,
+      "data-chat-message-list": "true",
+      "data-testid": "chat-message-list",
+      children: [
+        groupedMessages.length === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col items-center justify-center h-full min-h-[200px] text-center px-6", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-chat-text-secondary text-sm", children: t("messageList.emptyState") }) }),
+        groupedMessages.map((group, groupIndex) => {
+          const isOwn = group.user === currentUserId;
+          const firstMessage = group.messages[0];
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            firstMessage.author.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs text-chat-text-secondary", children: firstMessage.author.name }),
+            group.messages.map((message, msgIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col", "data-chat-message-id": message.id, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: isOwn ? "chat-message-bubble-own" : "chat-message-bubble-other", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageContent, { message, onActionClick }) }),
+              message.reactions && message.reactions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex gap-1 mt-1", children: message.reactions.map((reaction, rIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "button",
+                {
+                  onClick: () => onReactionClick?.(message.id, reaction.emoji),
+                  className: `flex items-center gap-1 px-2 py-0.5 border border-chat-border rounded-full text-sm cursor-pointer transition ${reaction.hasReacted ? "bg-chat-surface" : "bg-transparent hover:bg-chat-surface"}`,
+                  "data-chat-reaction": reaction.emoji,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: reaction.emoji }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-chat-text-secondary", children: reaction.count })
+                  ]
+                },
+                `${reaction.emoji}-${rIndex}`
+              )) }),
+              msgIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs text-chat-text-secondary mt-1", children: formatTimestamp(message.timestamp) })
+            ] }, message.id))
+          ] }, `${group.user}-${groupIndex}`);
+        }),
+        isLoading && groupedMessages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-center min-h-[200px]", "data-chat-loading": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: "w-2 h-2 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "0ms" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: "w-2 h-2 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "160ms" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: "w-2 h-2 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "320ms" }
+            }
+          )
+        ] }) }),
+        isLoading && groupedMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-center py-4", "data-chat-loading": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-chat-text-secondary", children: t("common.loading") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: listEndRef, className: "h-px" })
+      ]
+    }
+  );
+}
+
+// src/components/InputArea.tsx
+var import_react12 = require("react");
+
+// src/components/Dropzone.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Dropzone({
+  onFilesSelected,
+  disabled = false,
+  accept,
+  maxSize,
+  multiple = true,
+  className
+}) {
+  const { t } = useLocale();
+  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
+  const dragCounter = (0, import_react11.useRef)(0);
+  const handleDragEnter = (0, import_react11.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  }, []);
+  const handleDragLeave = (0, import_react11.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+  const handleDragOver = (0, import_react11.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = (0, import_react11.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      dragCounter.current = 0;
+      if (disabled) return;
+      const files = e.dataTransfer.files;
+      if (files && files.length > 0) {
+        const filtered = filterFiles(files, maxSize, accept);
+        if (filtered.length > 0) {
+          onFilesSelected(multiple ? filtered : [filtered[0]]);
+        }
+      }
+    },
+    [disabled, maxSize, accept, multiple, onFilesSelected]
+  );
+  const handleInputChange = (0, import_react11.useCallback)(
+    (e) => {
+      if (disabled) return;
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        const filtered = filterFiles(files, maxSize, accept);
+        if (filtered.length > 0) {
+          onFilesSelected(multiple ? filtered : [filtered[0]]);
+        }
+      }
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [disabled, maxSize, accept, multiple, onFilesSelected]
+  );
+  const handleClick = (0, import_react11.useCallback)(() => {
+    inputRef.current?.click();
+  }, []);
+  function filterFiles(files, maxSize2, accept2) {
+    return Array.from(files).filter((file) => {
+      if (maxSize2 && file.size > maxSize2) return false;
+      if (accept2) {
+        const accepted = accept2.split(",").map((a) => a.trim().toLowerCase());
+        const mimeType = file.type.toLowerCase();
+        const ext = "." + file.name.split(".").pop()?.toLowerCase();
+        return accepted.some((a) => {
+          if (a.endsWith("/*")) return mimeType.startsWith(a.replace("/*", "/"));
+          return a === mimeType || a === ext;
+        });
+      }
+      return true;
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick();
+      },
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: `flex items-center justify-center p-2 border-2 border-dashed rounded-lg cursor-pointer transition ${isDragging ? "border-chat-primary bg-chat-primary/10" : "border-chat-border"} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className || ""}`,
+      "data-chat-dropzone": "true",
+      "data-testid": "chat-dropzone",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            onChange: handleInputChange,
+            className: "hidden",
+            disabled,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: isDragging ? "var(--chat-primary)" : "var(--chat-text-secondary)",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "mx-auto mb-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs text-chat-text-secondary", children: isDragging ? t("inputArea.dropzone.dropFiles") : t("inputArea.dropzone.dropOrClick") })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/AttachmentList.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function AttachmentList({
+  attachments,
+  onRemove,
+  className
+}) {
+  const { t } = useLocale();
+  if (attachments.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
+  function getFileIcon(mimeType) {
+    if (mimeType.startsWith("image/")) return "\u{1F5BC}\uFE0F";
+    if (mimeType === "application/pdf") return "\u{1F4C4}";
+    if (mimeType.includes("video")) return "\u{1F3AC}";
+    if (mimeType.includes("audio")) return "\u{1F3B5}";
+    return "\u{1F4CE}";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `flex flex-wrap gap-1 p-1 ${className || ""}`, "data-chat-attachment-list": "true", children: attachments.map((att) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `flex items-center gap-1 px-2 py-1 text-xs rounded border max-w-[200px] ${att.status === "error" ? "bg-chat-error/15 border-chat-error" : "bg-chat-surface shadow-sm border-chat-border"}`,
+      "data-chat-attachment-item": att.id,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: getFileIcon(att.mimeType) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: `overflow-hidden text-ellipsis whitespace-nowrap ${att.status === "error" ? "text-chat-error" : "text-chat-text"}`,
+              children: att.name
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-[10px] text-chat-text-secondary", children: att.status === "uploading" ? `${att.progress}%` : att.status === "error" ? att.error || t("attachmentList.uploadFailed") : formatSize(att.size) }),
+          att.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-0.5 bg-chat-border rounded overflow-hidden mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: "h-full bg-chat-primary transition-[width] duration-150",
+              style: { width: `${att.progress}%` }
+            }
+          ) })
+        ] }),
+        onRemove && att.status !== "uploading" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            onClick: () => onRemove(att.id),
+            className: "bg-none border-none cursor-pointer text-chat-text-secondary p-0.5 leading-none hover:text-chat-error",
+            "aria-label": `Remove ${att.name}`,
+            children: "\xD7"
+          }
+        )
+      ]
+    },
+    att.id
+  )) });
+}
+
+// src/components/InputArea.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function InputArea({
+  onSend,
+  disabled = false,
+  placeholder = "Type a message...",
+  className,
+  enableAttachments = false,
+  uploadConfig,
+  accept,
+  maxFileSize
+}) {
+  const [text, setText] = (0, import_react12.useState)("");
+  const [showDropzone, setShowDropzone] = (0, import_react12.useState)(false);
+  const textareaRef = (0, import_react12.useRef)(null);
+  const sendingRef = (0, import_react12.useRef)(false);
+  const { attachments, addFiles, removeAttachment, clearAttachments, isUploading } = useAttachmentUpload(uploadConfig);
+  const { t } = useLocale();
+  (0, import_react12.useEffect)(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+  }, [text]);
+  const handleSubmit = async () => {
+    const trimmed = text.trim();
+    if (!trimmed && attachments.length === 0 || disabled || sendingRef.current) return;
+    if (isUploading) return;
+    sendingRef.current = true;
+    const uploadedAttachments = attachments.filter((a) => a.status === "uploaded" && a.url).map((a) => ({
+      url: a.url,
+      name: a.name,
+      mimeType: a.mimeType,
+      size: a.size
+    }));
+    setText("");
+    setShowDropzone(false);
+    clearAttachments();
+    try {
+      await onSend(trimmed, uploadedAttachments);
+    } finally {
+      sendingRef.current = false;
+    }
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const canSend = (text.trim().length > 0 || attachments.some((a) => a.status === "uploaded")) && !isUploading;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: `chat-input-area ${className || ""}`,
+      "data-chat-input-area": "true",
+      "data-testid": "chat-input-area",
+      children: [
+        enableAttachments && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AttachmentList, { attachments, onRemove: removeAttachment }),
+        enableAttachments && showDropzone && uploadConfig && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Dropzone,
+          {
+            onFilesSelected: addFiles,
+            disabled: disabled || isUploading,
+            accept,
+            maxSize: maxFileSize
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-3", children: [
+          enableAttachments && uploadConfig && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: () => setShowDropzone((prev) => !prev),
+              disabled,
+              className: `p-2 rounded-lg cursor-pointer transition ${showDropzone ? "bg-chat-primary/10 text-chat-primary" : "bg-transparent text-chat-text-secondary"} disabled:cursor-not-allowed disabled:opacity-50`,
+              "data-chat-attachment-toggle": "true",
+              "aria-label": "Toggle file attachment",
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              className: "chat-input",
+              "data-chat-input": "true",
+              rows: 1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: handleSubmit,
+              disabled: disabled || !canSend,
+              className: "chat-send-button",
+              "data-chat-send-button": "true",
+              "aria-label": t("inputArea.send"),
+              children: isUploading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "animate-spin",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/TypingIndicator.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function TypingIndicator({ users = [] }) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: "chat-typing-indicator",
+      "data-chat-typing-indicator": "true",
+      "data-testid": "chat-typing-indicator",
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              className: "w-1.5 h-1.5 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "0ms" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              className: "w-1.5 h-1.5 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "160ms" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              className: "w-1.5 h-1.5 rounded-full bg-chat-text-secondary animate-bounce",
+              style: { animationDelay: "320ms" }
+            }
+          )
+        ] }),
+        users.length > 0 && ` ${users[0]} ${t("typingIndicator.isTyping")}`
+      ] })
+    }
+  );
+}
+
+// src/components/ChatWidget.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ChatWidget({
+  client,
+  initialMode = "floating",
+  theme: themeProp,
+  onThemeChange,
+  position = "bottom-right",
+  className,
+  showClose = true,
+  showFullscreenToggle = true,
+  title = "Chat",
+  placeholder = "Type a message...",
+  onOpen,
+  onClose,
+  embedded,
+  floatingButton,
+  enableAttachments = false,
+  uploadConfig,
+  accept,
+  maxFileSize,
+  renderPushPrompt
+}) {
+  const {
+    config: iframeConfig,
+    isInIframe,
+    notifyMessage,
+    notifyViewportConfig,
+    onNotificationClicked
+  } = useBridge();
+  const autoEmbedded = isInIframe && embedded !== false;
+  const effectiveEmbedded = embedded === true || autoEmbedded;
+  const effectiveMode = effectiveEmbedded ? "embedded" : initialMode;
+  const [theme, setTheme] = (0, import_react13.useState)(() => {
+    if (themeProp) return themeProp;
+    try {
+      const stored = localStorage.getItem("chat-theme");
+      if (stored === "light" || stored === "dark" || stored === "auto") return stored;
+    } catch {
+    }
+    return "auto";
+  });
+  const [systemDark, setSystemDark] = (0, import_react13.useState)(
+    () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+  const effectiveTheme = theme === "auto" ? systemDark ? "dark" : "light" : theme;
+  (0, import_react13.useEffect)(() => {
+    if (themeProp && themeProp !== theme) {
+      setTheme(themeProp);
+      try {
+        localStorage.setItem("chat-theme", themeProp);
+      } catch {
+      }
+    }
+  }, [themeProp]);
+  (0, import_react13.useEffect)(() => {
+    if (theme !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  const handleThemeChange = (newTheme) => {
+    setTheme(newTheme);
+    try {
+      localStorage.setItem("chat-theme", newTheme);
+    } catch {
+    }
+    onThemeChange?.(newTheme);
+  };
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(effectiveMode === "fullscreen");
+  const [displayMode, setDisplayMode] = (0, import_react13.useState)(effectiveMode);
+  const [isConnected] = (0, import_react13.useState)(true);
+  const [isSmallScreen, setIsSmallScreen] = (0, import_react13.useState)(
+    () => typeof window !== "undefined" && window.innerWidth < 800
+  );
+  (0, import_react13.useEffect)(() => {
+    const mq = window.matchMedia("(max-width: 799px)");
+    const handler = (e) => {
+      setIsSmallScreen(e.matches);
+      if (e.matches) setDisplayMode("fullscreen");
+    };
+    setIsSmallScreen(mq.matches);
+    if (mq.matches) setDisplayMode("fullscreen");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    if (initialMode !== "fullscreen") return;
+    if (!isSmallScreen) setIsOpen(true);
+  }, [initialMode, isSmallScreen]);
+  (0, import_react13.useEffect)(() => {
+    if (isInIframe) {
+      notifyViewportConfig("interactive-widget=resizes-content");
+      return () => notifyViewportConfig("");
+    }
+    const isFullscreen = displayMode === "fullscreen" || isSmallScreen;
+    const active = isOpen && isFullscreen;
+    const meta = document.querySelector('meta[name="viewport"]');
+    if (!meta) return;
+    if (active) {
+      const original = meta.getAttribute("content") ?? "";
+      if (!original.includes("interactive-widget=")) {
+        meta.setAttribute("content", `${original}, interactive-widget=resizes-content`);
+      }
+      return () => {
+        meta.setAttribute("content", original);
+      };
+    }
+  }, [isOpen, displayMode, isSmallScreen, isInIframe, notifyViewportConfig]);
+  const { messages, sendMessage, loading, isLoadingHistory, reloadMessages } = useMessages(
+    client,
+    isOpen || effectiveEmbedded
+  );
+  const { isSomeoneTyping } = useTyping(client);
+  (0, import_react13.useEffect)(() => {
+    if (!isInIframe || !iframeConfig) return;
+    if (iframeConfig.theme?.cssVariables) {
+      const root = document.documentElement;
+      for (const [key, value] of Object.entries(iframeConfig.theme.cssVariables)) {
+        root.style.setProperty(key, value);
+      }
+    }
+    const mode = iframeConfig.theme?.mode;
+    if (mode === "light" || mode === "dark" || mode === "auto") {
+      setTheme(mode);
+    }
+  }, [isInIframe, iframeConfig]);
+  (0, import_react13.useEffect)(() => {
+    if (!isInIframe) return;
+    onNotificationClicked(() => {
+      reloadMessages();
+    });
+  }, [isInIframe, onNotificationClicked, reloadMessages]);
+  const effectiveTitle = isInIframe && iframeConfig?.title || title;
+  const effectivePlaceholder = isInIframe && iframeConfig?.placeholder || placeholder;
+  const currentUserId = "getCurrentUserId" in client ? client.getCurrentUserId() : "";
+  const handleSend = (0, import_react13.useCallback)(
+    async (text, attachments = []) => {
+      await sendMessage(text, attachments);
+      if (isInIframe) {
+        notifyMessage(text);
+      }
+    },
+    [sendMessage, isInIframe, notifyMessage]
+  );
+  const handleActionClick = (0, import_react13.useCallback)(
+    (messageId, actionId, value) => {
+      client.sendAction(messageId, actionId, value).catch((err) => {
+        console.error("Action failed:", err);
+      });
+    },
+    [client]
+  );
+  const handleReactionClick = (0, import_react13.useCallback)((_messageId, _emoji) => {
+  }, []);
+  const toggleOpen = (0, import_react13.useCallback)(() => {
+    setIsOpen((prev) => {
+      if (!prev) onOpen?.();
+      else onClose?.();
+      return !prev;
+    });
+  }, [onOpen, onClose]);
+  const toggleFullscreen = (0, import_react13.useCallback)(() => {
+    setDisplayMode((prev) => prev === "fullscreen" ? "floating" : "fullscreen");
+  }, []);
+  const close = (0, import_react13.useCallback)(() => {
+    setIsOpen(false);
+    setDisplayMode("floating");
+    onClose?.();
+  }, [onClose]);
+  const embeddedClose = (0, import_react13.useCallback)(() => {
+    if (isInIframe) {
+      window.parent.postMessage({ type: "chat-close" }, "*");
+    }
+  }, [isInIframe]);
+  if (effectiveEmbedded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        className: "flex flex-col h-full min-h-[300px] overflow-hidden bg-chat-background",
+        "data-chat-widget": "embedded",
+        "data-chat-theme": effectiveTheme,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Header,
+            {
+              title: effectiveTitle,
+              isFullscreen: false,
+              showConnectionStatus: true,
+              isConnected,
+              className: className?.header,
+              theme,
+              onThemeChange: handleThemeChange,
+              onClose: isInIframe ? embeddedClose : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            MessageList,
+            {
+              messages,
+              currentUserId,
+              isLoading: isLoadingHistory || loading,
+              onActionClick: handleActionClick,
+              onReactionClick: handleReactionClick,
+              className: className?.messageList
+            }
+          ),
+          isSomeoneTyping && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TypingIndicator, {}),
+          renderPushPrompt?.(),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            InputArea,
+            {
+              onSend: handleSend,
+              placeholder: effectivePlaceholder,
+              className: className?.inputArea,
+              enableAttachments,
+              uploadConfig,
+              accept,
+              maxFileSize
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    !effectiveEmbedded && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      FloatingButton,
+      {
+        onClick: toggleOpen,
+        isOpen,
+        position,
+        icon: floatingButton?.icon,
+        openIcon: floatingButton?.openIcon,
+        badgeCount: floatingButton?.badgeCount,
+        size: floatingButton?.size,
+        backgroundColor: floatingButton?.backgroundColor,
+        ariaLabel: floatingButton?.ariaLabel,
+        className: floatingButton?.className
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        className: `flex flex-col overflow-hidden ${displayMode === "fullscreen" ? "fixed inset-0 z-50" : `absolute ${position === "bottom-right" ? "bottom-20 right-5" : position === "bottom-left" ? "bottom-20 left-5" : ""} w-[480px] max-w-[min(800px,calc(100dvw-40px))] h-dvh max-h-[min(600px,80dvh)] z-10 shadow-xl border border-chat-border rounded-2xl`} bg-chat-background`,
+        "data-chat-widget": displayMode,
+        "data-chat-position": position,
+        "data-chat-theme": effectiveTheme,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Header,
+            {
+              title: effectiveTitle,
+              onClose: displayMode === "floating" ? close : showClose ? close : void 0,
+              onToggleFullscreen: showFullscreenToggle && !isSmallScreen ? toggleFullscreen : void 0,
+              isFullscreen: displayMode === "fullscreen",
+              showConnectionStatus: true,
+              isConnected,
+              className: className?.header,
+              theme,
+              onThemeChange: handleThemeChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            MessageList,
+            {
+              messages,
+              currentUserId,
+              isLoading: isLoadingHistory || loading,
+              onActionClick: handleActionClick,
+              onReactionClick: handleReactionClick,
+              className: className?.messageList
+            }
+          ),
+          isSomeoneTyping && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TypingIndicator, {}),
+          renderPushPrompt?.(),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            InputArea,
+            {
+              onSend: handleSend,
+              placeholder: effectivePlaceholder,
+              disabled: loading,
+              className: className?.inputArea,
+              enableAttachments,
+              uploadConfig,
+              accept,
+              maxFileSize
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/providers/ChatProvider.tsx
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ChatContext = (0, import_react14.createContext)(void 0);
+function ChatProvider({
+  children,
+  client,
+  cardRenderers
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardProvider, { renderers: cardRenderers, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatContext.Provider, { value: { client }, children }) });
+}
+function useChatContext() {
+  const context = (0, import_react14.useContext)(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within ChatProvider");
+  }
+  return context;
+}
+
+// src/components/ErrorBoundary.tsx
+var import_react15 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react15.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    const { fallback } = this.props;
+    if (typeof fallback === "function") {
+      return fallback(this.state.error);
+    }
+    if (fallback) return fallback;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center p-6 text-center",
+        "data-chat-error-boundary": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-chat-error text-lg font-semibold mb-2", children: "Something went wrong" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-chat-text-secondary text-sm mb-4", children: this.state.error.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "button",
+            {
+              onClick: () => this.setState({ error: null }),
+              className: "px-4 py-2 bg-chat-primary text-white rounded text-sm cursor-pointer hover:opacity-90",
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+
+// src/components/PushPermissionPrompt.tsx
+var import_react16 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function PushPermissionPrompt({
+  autoHide = true,
+  title,
+  description,
+  onStatusChange,
+  getVapidPublicKey,
+  onSubscribe,
+  onUnsubscribe
+}) {
+  const { t } = useLocale();
+  const { status, isSupported, isSubscribed, subscribe, unsubscribe } = usePushNotifications({
+    enabled: true,
+    getVapidPublicKey,
+    onSubscribe,
+    onUnsubscribe
+  });
+  const [dismissed, setDismissed] = (0, import_react16.useState)(false);
+  if (!isSupported) return null;
+  if (autoHide && (isSubscribed || status === "denied")) return null;
+  if (dismissed) return null;
+  const handleEnable = async () => {
+    await subscribe();
+    onStatusChange?.(true);
+  };
+  const handleDisable = async () => {
+    await unsubscribe();
+    onStatusChange?.(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      className: "p-3 bg-chat-surface rounded-lg flex items-start gap-3",
+      "data-chat-push-prompt": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "font-semibold mb-1 text-chat-text", children: title || t("push.title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-sm text-chat-text-secondary", children: description || t("push.description") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-2", children: [
+          !isSubscribed && status !== "denied" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "button",
+            {
+              onClick: handleEnable,
+              className: "px-3 py-1.5 bg-chat-primary text-white border-none rounded cursor-pointer text-sm hover:opacity-90",
+              children: t("push.enable")
+            }
+          ),
+          isSubscribed && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "button",
+            {
+              onClick: handleDisable,
+              className: "px-3 py-1.5 bg-transparent text-chat-text-secondary border border-chat-border rounded cursor-pointer text-sm hover:bg-chat-surface",
+              children: t("push.disable")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "button",
+            {
+              onClick: () => setDismissed(true),
+              className: "px-1.5 bg-transparent border-none cursor-pointer text-chat-text-secondary hover:text-chat-text",
+              children: "\u2715"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/PushToggle.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function PushToggle({ getVapidPublicKey, onSubscribe, onUnsubscribe }) {
+  const { t } = useLocale();
+  const { status, isSupported, isSubscribed, subscribe, unsubscribe } = usePushNotifications({
+    enabled: true,
+    getVapidPublicKey,
+    onSubscribe,
+    onUnsubscribe
+  });
+  if (!isSupported) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-sm text-chat-text-secondary", children: t("push.unsupported") });
+  }
+  if (status === "denied") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-sm text-chat-text-secondary", children: t("push.denied") });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        checked: isSubscribed,
+        onChange: async (e) => {
+          if (e.target.checked) await subscribe();
+          else await unsubscribe();
+        },
+        disabled: status === "subscribing",
+        className: "w-4 h-4 cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm", children: status === "subscribing" ? t("push.subscribing") : t("push.notifications") })
+  ] });
+}
+
+// src/index.ts
+var import_js_web_adapter_core3 = require("@bootdesk/js-web-adapter-core");
+var import_js_web_adapter_core4 = require("@bootdesk/js-web-adapter-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AttachmentList,
+  CardProvider,
+  CardRenderer,
+  ChatProvider,
+  ChatWidget,
+  DefaultCard,
+  Dropzone,
+  ErrorBoundary,
+  FileCardComponent,
+  FloatingButton,
+  Header,
+  ImageCardComponent,
+  InputArea,
+  LaravelEchoBroadcastClient,
+  LocaleProvider,
+  MarkdownRenderer,
+  MessageContent,
+  MessageList,
+  PushManager,
+  PushPermissionPrompt,
+  PushToggle,
+  PusherBroadcastClient,
+  TypingIndicator,
+  WebChatClient,
+  createPushSubscriptionHandlers,
+  getAvailableLocales,
+  registerLocale,
+  renderMarkdown,
+  useAttachmentUpload,
+  useCardRegistry,
+  useCardRendererRegistry,
+  useChatClient,
+  useChatContext,
+  useLocale,
+  useMessages,
+  usePushNotifications,
+  useStreaming,
+  useTyping
+});
+//# sourceMappingURL=index.cjs.map