@baseportal/chat-widget 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,2253 @@
+// src/api/client.ts
+var ApiClient = class {
+  constructor(channelToken, apiUrl) {
+    this.channelToken = channelToken;
+    this.baseUrl = `${apiUrl}/public/chat`;
+  }
+  setVisitorIdentity(email, hash) {
+    this.visitorEmail = email;
+    this.visitorHash = hash;
+  }
+  clearVisitorIdentity() {
+    this.visitorEmail = void 0;
+    this.visitorHash = void 0;
+  }
+  headers() {
+    const h2 = {
+      "Content-Type": "application/json",
+      "x-channel-token": this.channelToken
+    };
+    if (this.visitorEmail) h2["x-visitor-email"] = this.visitorEmail;
+    if (this.visitorHash) h2["x-visitor-hash"] = this.visitorHash;
+    return h2;
+  }
+  async request(method, path, body) {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers: this.headers(),
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw new Error(`[BaseportalChat] API error ${res.status}: ${text}`);
+    }
+    return res.json();
+  }
+  async getChannelInfo() {
+    return this.request("GET", "/channel-info");
+  }
+  async initConversation(data) {
+    return this.request("POST", "/conversations", {
+      ...data,
+      channelToken: this.channelToken
+    });
+  }
+  async getMessages(conversationId, params) {
+    const qs = new URLSearchParams();
+    if (params?.limit) qs.set("limit", String(params.limit));
+    if (params?.page) qs.set("page", String(params.page));
+    const query = qs.toString() ? `?${qs.toString()}` : "";
+    return this.request("GET", `/conversations/${conversationId}/messages${query}`);
+  }
+  async uploadFile(conversationId, file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const headers = {
+      "x-channel-token": this.channelToken
+    };
+    if (this.visitorEmail) headers["x-visitor-email"] = this.visitorEmail;
+    if (this.visitorHash) headers["x-visitor-hash"] = this.visitorHash;
+    const res = await fetch(`${this.baseUrl}/conversations/${conversationId}/upload`, {
+      method: "POST",
+      headers,
+      body: formData
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw new Error(`[BaseportalChat] Upload error ${res.status}: ${text}`);
+    }
+    return res.json();
+  }
+  async sendMessage(conversationId, data) {
+    return this.request(
+      "POST",
+      `/conversations/${conversationId}/messages`,
+      data
+    );
+  }
+  async getVisitorConversations() {
+    return this.request("GET", "/conversations");
+  }
+  async reopenConversation(conversationId) {
+    return this.request("POST", `/conversations/${conversationId}/reopen`);
+  }
+  async getAblyToken(conversationId) {
+    return this.request("POST", "/ably-token", { conversationId });
+  }
+};
+
+// src/realtime/ably-client.ts
+import * as Ably from "ably";
+var RealtimeClient = class {
+  constructor(apiClient) {
+    this.client = null;
+    this.channel = null;
+    this.conversationId = null;
+    this.handlers = null;
+    this.apiClient = apiClient;
+  }
+  async subscribe(conversationId, handlers) {
+    this.unsubscribe();
+    this.conversationId = conversationId;
+    this.handlers = handlers;
+    try {
+      const tokenRequest = await this.apiClient.getAblyToken(conversationId);
+      this.client = new Ably.Realtime({
+        authCallback: (_data, callback) => {
+          callback(null, tokenRequest);
+        },
+        clientId: `visitor-${conversationId}`
+      });
+      const channelName = `conversation-${conversationId}`;
+      this.channel = this.client.channels.get(channelName);
+      this.channel.subscribe((msg) => {
+        if (!msg.data) return;
+        try {
+          const data = typeof msg.data === "string" ? JSON.parse(msg.data) : msg.data;
+          if (data.text === "conversation_status_updated" && data.metadata) {
+            handlers.onConversationStatusUpdate(data.metadata);
+          } else if (data.text === "created_or_updated_message" && data.metadata) {
+            handlers.onMessage(data.metadata);
+          }
+        } catch (e) {
+          console.error("[BaseportalChat] Error parsing realtime message:", e);
+        }
+      });
+    } catch (e) {
+      console.error("[BaseportalChat] Error connecting to realtime:", e);
+    }
+  }
+  unsubscribe() {
+    if (this.channel) {
+      this.channel.unsubscribe();
+      this.channel = null;
+    }
+    if (this.client) {
+      this.client.close();
+      this.client = null;
+    }
+    this.conversationId = null;
+    this.handlers = null;
+  }
+  isConnected() {
+    return this.client?.connection.state === "connected";
+  }
+};
+
+// src/ui/i18n.ts
+var pt = {
+  prechat: {
+    title: "Iniciar conversa",
+    description: "Preencha os dados abaixo para iniciar o atendimento.",
+    name: "Nome",
+    namePlaceholder: "Seu nome",
+    email: "E-mail",
+    emailPlaceholder: "seu@email.com",
+    start: "Iniciar conversa",
+    loading: "Iniciando...",
+    privacyPrefix: "Ao enviar, voc\xEA concorda com nossa",
+    privacyLink: "Pol\xEDtica de Privacidade"
+  },
+  chat: {
+    placeholder: "Digite uma mensagem...",
+    closed: "Esta conversa foi encerrada.",
+    reopen: "Reabrir conversa",
+    attachFile: "Anexar arquivo",
+    uploading: "Enviando...",
+    fileTooLarge: "Arquivo muito grande (m\xE1x. 25MB)",
+    download: "Baixar"
+  },
+  conversations: {
+    title: "Atendimento",
+    newConversation: "Nova conversa",
+    empty: "Nenhuma conversa encontrada.",
+    open: "Aberta",
+    closed: "Fechada",
+    noMessages: "Nenhuma mensagem ainda"
+  }
+};
+var en = {
+  prechat: {
+    title: "Start a conversation",
+    description: "Fill in the details below to start chatting.",
+    name: "Name",
+    namePlaceholder: "Your name",
+    email: "Email",
+    emailPlaceholder: "you@email.com",
+    start: "Start conversation",
+    loading: "Starting...",
+    privacyPrefix: "By sending, you agree to our",
+    privacyLink: "Privacy Policy"
+  },
+  chat: {
+    placeholder: "Type a message...",
+    closed: "This conversation has been closed.",
+    reopen: "Reopen conversation",
+    attachFile: "Attach file",
+    uploading: "Uploading...",
+    fileTooLarge: "File too large (max 25MB)",
+    download: "Download"
+  },
+  conversations: {
+    title: "Support",
+    newConversation: "New conversation",
+    empty: "No conversations found.",
+    open: "Open",
+    closed: "Closed",
+    noMessages: "No messages yet"
+  }
+};
+var es = {
+  prechat: {
+    title: "Iniciar conversaci\xF3n",
+    description: "Complete los datos a continuaci\xF3n para iniciar la atenci\xF3n.",
+    name: "Nombre",
+    namePlaceholder: "Tu nombre",
+    email: "Correo electr\xF3nico",
+    emailPlaceholder: "tu@email.com",
+    start: "Iniciar conversaci\xF3n",
+    loading: "Iniciando...",
+    privacyPrefix: "Al enviar, aceptas nuestra",
+    privacyLink: "Pol\xEDtica de Privacidad"
+  },
+  chat: {
+    placeholder: "Escribe un mensaje...",
+    closed: "Esta conversaci\xF3n ha sido cerrada.",
+    reopen: "Reabrir conversaci\xF3n",
+    attachFile: "Adjuntar archivo",
+    uploading: "Subiendo...",
+    fileTooLarge: "Archivo demasiado grande (m\xE1x. 25MB)",
+    download: "Descargar"
+  },
+  conversations: {
+    title: "Atenci\xF3n",
+    newConversation: "Nueva conversaci\xF3n",
+    empty: "No se encontraron conversaciones.",
+    open: "Abierta",
+    closed: "Cerrada",
+    noMessages: "Sin mensajes a\xFAn"
+  }
+};
+var locales = { pt, en, es };
+function getTranslations(locale) {
+  return locales[locale] || locales["pt"];
+}
+
+// src/ui/mount.ts
+import { render, h } from "preact";
+
+// src/ui/App.tsx
+import { useEffect as useEffect4, useState as useState4 } from "preact/hooks";
+
+// src/ui/icons.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var IconChat = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: /* @__PURE__ */ 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" }) });
+var IconX = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var IconArrowLeft = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+] });
+var IconSend = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+] });
+var IconPlus = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var IconPaperclip = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: /* @__PURE__ */ 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" }) });
+var IconDownload = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+  /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+] });
+var IconFile = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+] });
+
+// src/ui/components/ChatBubble.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+function ChatBubble({
+  isOpen,
+  position,
+  unreadCount,
+  onClick
+}) {
+  const posClass = position === "bottom-left" ? "bp-bubble--left" : "bp-bubble--right";
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      class: `bp-bubble ${posClass}`,
+      onClick,
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      children: [
+        isOpen ? /* @__PURE__ */ jsx2(IconX, {}) : /* @__PURE__ */ jsx2(IconChat, {}),
+        !isOpen && unreadCount > 0 && /* @__PURE__ */ jsx2("span", { class: "bp-bubble__badge", children: unreadCount > 99 ? "99+" : unreadCount })
+      ]
+    }
+  );
+}
+
+// src/ui/components/ChatWindow.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "preact/hooks";
+
+// src/ui/components/ConversationList.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+function ConversationList({
+  conversations,
+  channelInfo,
+  loading,
+  onSelect,
+  onNew,
+  t
+}) {
+  const hasOpen = conversations.some((c) => c.open);
+  const canReopen = channelInfo.config.allowReopenConversation;
+  if (loading) {
+    return /* @__PURE__ */ jsx3("div", { class: "bp-loading", children: /* @__PURE__ */ jsx3("div", { class: "bp-spinner" }) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { class: "bp-convlist", children: [
+    !hasOpen && /* @__PURE__ */ jsx3("div", { class: "bp-convlist__new", children: /* @__PURE__ */ jsxs3("button", { class: "bp-convlist__new-btn", onClick: onNew, children: [
+      /* @__PURE__ */ jsx3(IconPlus, {}),
+      t.conversations.newConversation
+    ] }) }),
+    /* @__PURE__ */ jsx3("div", { class: "bp-convlist__items", children: conversations.length === 0 ? /* @__PURE__ */ jsx3("div", { class: "bp-convlist__empty", children: t.conversations.empty }) : conversations.map((conv) => {
+      const isClickable = conv.open || canReopen;
+      return /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          class: "bp-convlist__item",
+          onClick: () => isClickable && onSelect(conv),
+          disabled: !isClickable,
+          children: [
+            /* @__PURE__ */ jsxs3("div", { class: "bp-convlist__item-top", children: [
+              /* @__PURE__ */ jsx3("span", { class: "bp-convlist__item-title", children: channelInfo.name }),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  class: `bp-convlist__item-status ${conv.open ? "bp-convlist__item-status--open" : "bp-convlist__item-status--closed"}`,
+                  children: conv.open ? t.conversations.open : t.conversations.closed
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3("span", { class: "bp-convlist__item-preview", children: conv.lastMessage?.content || t.conversations.noMessages })
+          ]
+        },
+        conv.id
+      );
+    }) })
+  ] });
+}
+
+// src/ui/components/MessageInput.tsx
+import { useCallback, useRef } from "preact/hooks";
+import { jsx as jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
+function MessageInput({
+  value,
+  onChange,
+  onSend,
+  onFileSelect,
+  onFileRemove,
+  attachedFile,
+  uploading,
+  disabled,
+  placeholder,
+  t
+}) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onSend();
+      }
+    },
+    [onSend]
+  );
+  const handleInput = useCallback(
+    (e) => {
+      const target = e.target;
+      onChange(target.value);
+      target.style.height = "auto";
+      target.style.height = `${Math.min(target.scrollHeight, 100)}px`;
+    },
+    [onChange]
+  );
+  const handleAttachClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = useCallback(
+    (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (file) {
+        onFileSelect(file);
+      }
+      input.value = "";
+    },
+    [onFileSelect]
+  );
+  const isImage = attachedFile?.file.type.startsWith("image/");
+  const canSend = (value.trim() || attachedFile) && !disabled && !uploading;
+  return /* @__PURE__ */ jsxs4("div", { class: "bp-composer", children: [
+    attachedFile && /* @__PURE__ */ jsxs4("div", { class: "bp-composer__preview", children: [
+      isImage && attachedFile.preview ? /* @__PURE__ */ jsx4(
+        "img",
+        {
+          src: attachedFile.preview,
+          alt: attachedFile.file.name,
+          class: "bp-composer__preview-thumb"
+        }
+      ) : /* @__PURE__ */ jsx4("div", { class: "bp-composer__preview-icon", children: /* @__PURE__ */ jsx4(IconFile, {}) }),
+      /* @__PURE__ */ jsxs4("div", { class: "bp-composer__preview-info", children: [
+        /* @__PURE__ */ jsx4("div", { class: "bp-composer__preview-name", children: attachedFile.file.name }),
+        /* @__PURE__ */ jsx4("div", { class: "bp-composer__preview-status", children: uploading ? t.chat.uploading : formatSize(attachedFile.file.size) })
+      ] }),
+      !uploading && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          class: "bp-composer__preview-remove",
+          onClick: onFileRemove,
+          "aria-label": "Remove file",
+          children: /* @__PURE__ */ jsx4(IconX, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { class: "bp-composer__row", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          class: "bp-composer__attach",
+          onClick: handleAttachClick,
+          disabled: disabled || uploading || !!attachedFile,
+          "aria-label": t.chat.attachFile,
+          children: /* @__PURE__ */ jsx4(IconPaperclip, {})
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "textarea",
+        {
+          ref: textareaRef,
+          class: "bp-composer__field",
+          value,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          placeholder: placeholder || t.chat.placeholder,
+          disabled,
+          rows: 1
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          class: "bp-composer__send",
+          onClick: onSend,
+          disabled: !canSend,
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ jsx4(IconSend, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        onChange: handleFileChange,
+        style: { display: "none" },
+        accept: "image/*,video/mp4,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
+      }
+    )
+  ] });
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/ui/components/MessageList.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "preact/hooks";
+
+// src/ui/components/ImageLightbox.tsx
+import { useCallback as useCallback2, useEffect } from "preact/hooks";
+import { jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+function ImageLightbox({ src, alt, onClose }) {
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  return /* @__PURE__ */ jsxs5("div", { class: "bp-lightbox", onClick: onClose, children: [
+    /* @__PURE__ */ jsx5("button", { class: "bp-lightbox__close", onClick: onClose, children: /* @__PURE__ */ jsx5(IconX, {}) }),
+    /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src,
+        alt: alt || "",
+        class: "bp-lightbox__img",
+        onClick: (e) => e.stopPropagation()
+      }
+    )
+  ] });
+}
+
+// src/ui/components/MessageMedia.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+function MessageMedia({ media, onImageClick, t }) {
+  const mimeType = (media.mimeType || "").toLowerCase();
+  if (mimeType.startsWith("image/") || media.kind === "image") {
+    const thumbSrc = media.streamUrlData?.small || media.url;
+    const fullSrc = media.streamUrlData?.large || media.url;
+    return /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src: thumbSrc,
+        alt: media.name,
+        class: "bp-media-img",
+        onClick: () => onImageClick(fullSrc)
+      }
+    );
+  }
+  if (mimeType.startsWith("video/")) {
+    return /* @__PURE__ */ jsx6("video", { controls: true, class: "bp-media-video", preload: "metadata", children: /* @__PURE__ */ jsx6("source", { src: media.url, type: mimeType }) });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "a",
+    {
+      href: media.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      class: "bp-media-file",
+      download: media.name,
+      children: [
+        /* @__PURE__ */ jsx6("div", { class: "bp-media-file__icon", children: /* @__PURE__ */ jsx6(IconFile, {}) }),
+        /* @__PURE__ */ jsx6("span", { class: "bp-media-file__name", children: media.name }),
+        /* @__PURE__ */ jsx6("span", { class: "bp-media-file__download", children: /* @__PURE__ */ jsx6(IconDownload, {}) })
+      ]
+    }
+  );
+}
+
+// src/ui/components/MessageList.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "preact/jsx-runtime";
+function MessageList({ messages, loading, t }) {
+  const endRef = useRef2(null);
+  const [lightboxSrc, setLightboxSrc] = useState(null);
+  useEffect2(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  if (loading) {
+    return /* @__PURE__ */ jsx7("div", { class: "bp-loading", children: /* @__PURE__ */ jsx7("div", { class: "bp-spinner" }) });
+  }
+  return /* @__PURE__ */ jsxs7("div", { class: "bp-messages", children: [
+    messages.map((msg) => /* @__PURE__ */ jsx7(
+      MessageBubble,
+      {
+        message: msg,
+        onImageClick: setLightboxSrc,
+        t
+      },
+      msg.id
+    )),
+    /* @__PURE__ */ jsx7("div", { ref: endRef }),
+    lightboxSrc && /* @__PURE__ */ jsx7(
+      ImageLightbox,
+      {
+        src: lightboxSrc,
+        onClose: () => setLightboxSrc(null)
+      }
+    )
+  ] });
+}
+function MessageBubble({
+  message,
+  onImageClick,
+  t
+}) {
+  const isClient = message.role === "client";
+  const cls = isClient ? "bp-msg bp-msg--client" : "bp-msg bp-msg--agent";
+  const time = new Date(message.createdAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return /* @__PURE__ */ jsxs7("div", { class: cls, children: [
+    !isClient && /* @__PURE__ */ jsx7("div", { class: "bp-msg__avatar", children: message.user?.avatar?.url ? /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src: message.user.avatar.url,
+        alt: message.user.firstName || "Agent"
+      }
+    ) : (message.user?.firstName?.[0] || "A").toUpperCase() }),
+    /* @__PURE__ */ jsxs7("div", { class: "bp-msg__body", children: [
+      message.media && /* @__PURE__ */ jsx7(
+        MessageMedia,
+        {
+          media: message.media,
+          onImageClick,
+          t
+        }
+      ),
+      message.content && /* @__PURE__ */ jsx7("div", { class: "bp-msg__content", children: message.content }),
+      /* @__PURE__ */ jsx7("div", { class: "bp-msg__time", children: time })
+    ] })
+  ] });
+}
+
+// src/ui/components/PreChatForm.tsx
+import { useState as useState2 } from "preact/hooks";
+import { jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
+function PreChatForm({
+  channelInfo,
+  onSubmit,
+  loading,
+  t
+}) {
+  const [name, setName] = useState2("");
+  const [email, setEmail] = useState2("");
+  const { requireName, requireEmail, privacyPolicyUrl } = channelInfo.config;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({
+      name: name.trim() || void 0,
+      email: email.trim() || void 0
+    });
+  };
+  const isValid = (!requireName || name.trim()) && (!requireEmail || email.trim());
+  return /* @__PURE__ */ jsxs8("form", { class: "bp-prechat", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx8("div", { class: "bp-prechat__title", children: t.prechat.title }),
+    /* @__PURE__ */ jsx8("div", { class: "bp-prechat__desc", children: t.prechat.description }),
+    requireName && /* @__PURE__ */ jsxs8("div", { class: "bp-prechat__field", children: [
+      /* @__PURE__ */ jsx8("label", { class: "bp-prechat__label", children: t.prechat.name }),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          class: "bp-prechat__input",
+          type: "text",
+          value: name,
+          onInput: (e) => setName(e.target.value),
+          placeholder: t.prechat.namePlaceholder,
+          required: true
+        }
+      )
+    ] }),
+    requireEmail && /* @__PURE__ */ jsxs8("div", { class: "bp-prechat__field", children: [
+      /* @__PURE__ */ jsx8("label", { class: "bp-prechat__label", children: t.prechat.email }),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          class: "bp-prechat__input",
+          type: "email",
+          value: email,
+          onInput: (e) => setEmail(e.target.value),
+          placeholder: t.prechat.emailPlaceholder,
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        class: "bp-prechat__submit",
+        type: "submit",
+        disabled: !isValid || loading,
+        children: loading ? t.prechat.loading : t.prechat.start
+      }
+    ),
+    privacyPolicyUrl && /* @__PURE__ */ jsxs8("div", { class: "bp-prechat__privacy", children: [
+      t.prechat.privacyPrefix,
+      " ",
+      /* @__PURE__ */ jsx8("a", { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", children: t.prechat.privacyLink })
+    ] })
+  ] });
+}
+
+// src/ui/components/ChatWindow.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "preact/jsx-runtime";
+function ChatWindow({
+  channelInfo,
+  apiClient,
+  realtimeClient,
+  storage,
+  events,
+  visitor,
+  isAuthenticated,
+  position,
+  onClose,
+  t,
+  initialConversationId
+}) {
+  const [view, setView] = useState3("chat");
+  const [conversation, setConversation] = useState3(null);
+  const [conversations, setConversations] = useState3([]);
+  const [messages, setMessages] = useState3([]);
+  const [inputValue, setInputValue] = useState3("");
+  const [loading, setLoading] = useState3(true);
+  const [sending, setSending] = useState3(false);
+  const [attachedFile, setAttachedFile] = useState3(null);
+  const [uploadedFileId, setUploadedFileId] = useState3(null);
+  const [uploading, setUploading] = useState3(false);
+  const isOpen = conversation?.open !== false;
+  const allowViewHistory = channelInfo.config.allowViewHistory && isAuthenticated;
+  useEffect3(() => {
+    const init = async () => {
+      setLoading(true);
+      try {
+        if (allowViewHistory) {
+          const convs = await apiClient.getVisitorConversations();
+          setConversations(convs);
+          if (initialConversationId) {
+            const conv = convs.find((c) => c.id === initialConversationId);
+            if (conv) {
+              await openConversation(conv);
+              return;
+            }
+          }
+          if (convs.length > 0) {
+            setView("conversations");
+          } else {
+            if (needsPreChat()) {
+              setView("prechat");
+            } else {
+              await startNewConversation();
+            }
+          }
+        } else {
+          const storedId = initialConversationId || storage.getConversationId();
+          if (storedId) {
+            try {
+              const msgs = await apiClient.getMessages(storedId, { limit: 50 });
+              setMessages(Array.isArray(msgs) ? msgs.reverse() : []);
+              setConversation({ id: storedId, open: true });
+              setView("chat");
+              connectRealtime(storedId);
+            } catch {
+              storage.clear();
+              if (needsPreChat()) {
+                setView("prechat");
+              } else {
+                await startNewConversation();
+              }
+            }
+          } else {
+            if (needsPreChat()) {
+              setView("prechat");
+            } else {
+              await startNewConversation();
+            }
+          }
+        }
+      } catch (e) {
+        console.error("[BaseportalChat] Error initializing:", e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+    return () => {
+      realtimeClient.unsubscribe();
+    };
+  }, []);
+  const needsPreChat = useCallback3(() => {
+    if (visitor?.name && visitor?.email) return false;
+    return channelInfo.config.requireName || channelInfo.config.requireEmail;
+  }, [channelInfo, visitor]);
+  const connectRealtime = useCallback3(
+    (convId) => {
+      realtimeClient.subscribe(convId, {
+        onMessage: (msg) => {
+          setMessages((prev) => {
+            if (prev.some((m) => m.id === msg.id)) {
+              return prev.map(
+                (m) => m.id === msg.id ? { ...m, ...msg } : m
+              );
+            }
+            const withoutTemp = prev.filter(
+              (m) => !String(m.id).startsWith("temp-") || m.content !== msg.content
+            );
+            return [...withoutTemp, msg];
+          });
+          events.emit("message:received", msg);
+        },
+        onConversationStatusUpdate: (conv) => {
+          setConversation(
+            (prev) => prev ? { ...prev, open: conv.open } : prev
+          );
+          if (!conv.open) {
+            events.emit("conversation:closed", conv);
+          }
+        }
+      });
+    },
+    [realtimeClient, events]
+  );
+  const openConversation = useCallback3(
+    async (conv) => {
+      setLoading(true);
+      try {
+        const msgs = await apiClient.getMessages(conv.id, { limit: 50 });
+        setMessages(Array.isArray(msgs) ? msgs.reverse() : []);
+        setConversation(conv);
+        setView("chat");
+        storage.setConversationId(conv.id);
+        connectRealtime(conv.id);
+      } catch (e) {
+        console.error("[BaseportalChat] Error opening conversation:", e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiClient, storage, connectRealtime]
+  );
+  const startNewConversation = useCallback3(async () => {
+    setLoading(true);
+    try {
+      const result = await apiClient.initConversation({
+        name: visitor?.name,
+        email: visitor?.email
+      });
+      setConversation(result);
+      setMessages(result.messages || []);
+      setView("chat");
+      storage.setConversationId(result.id);
+      connectRealtime(result.id);
+      events.emit("conversation:started", result);
+    } catch (e) {
+      console.error("[BaseportalChat] Error starting conversation:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient, visitor, storage, connectRealtime, events]);
+  const handlePreChatSubmit = useCallback3(
+    async (data) => {
+      storage.setVisitor({ ...visitor, ...data });
+      const result = await apiClient.initConversation(data);
+      setConversation(result);
+      setMessages(result.messages || []);
+      setView("chat");
+      storage.setConversationId(result.id);
+      connectRealtime(result.id);
+      events.emit("conversation:started", result);
+    },
+    [apiClient, visitor, storage, connectRealtime, events]
+  );
+  const handleFileSelect = useCallback3(
+    async (file) => {
+      if (!conversation) return;
+      const MAX_SIZE = 25 * 1024 * 1024;
+      if (file.size > MAX_SIZE) {
+        console.warn("[BaseportalChat] File too large");
+        return;
+      }
+      const preview = file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0;
+      setAttachedFile({ file, preview });
+      setUploading(true);
+      try {
+        const uploaded = await apiClient.uploadFile(conversation.id, file);
+        setUploadedFileId(uploaded.id);
+      } catch (e) {
+        console.error("[BaseportalChat] Error uploading file:", e);
+        setAttachedFile(null);
+        if (preview) URL.revokeObjectURL(preview);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [apiClient, conversation]
+  );
+  const handleFileRemove = useCallback3(() => {
+    if (attachedFile?.preview) URL.revokeObjectURL(attachedFile.preview);
+    setAttachedFile(null);
+    setUploadedFileId(null);
+  }, [attachedFile]);
+  const handleSend = useCallback3(async () => {
+    const content = inputValue.trim();
+    if (!content && !uploadedFileId || !conversation || sending) return;
+    const tempId = `temp-${Date.now()}`;
+    const optimistic = {
+      id: tempId,
+      content,
+      role: "client",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const mediaId = uploadedFileId || void 0;
+    setInputValue("");
+    setAttachedFile(null);
+    setUploadedFileId(null);
+    setSending(true);
+    setMessages((prev) => [...prev, optimistic]);
+    try {
+      const msg = await apiClient.sendMessage(conversation.id, {
+        content: content || void 0,
+        mediaId
+      });
+      setMessages((prev) => prev.map((m) => m.id === tempId ? msg : m));
+      events.emit("message:sent", msg);
+    } catch (e) {
+      console.error("[BaseportalChat] Error sending message:", e);
+      setMessages((prev) => prev.filter((m) => m.id !== tempId));
+      setInputValue(content);
+    } finally {
+      setSending(false);
+    }
+  }, [inputValue, uploadedFileId, conversation, sending, apiClient, events]);
+  const handleReopen = useCallback3(async () => {
+    if (!conversation) return;
+    try {
+      const updated = await apiClient.reopenConversation(conversation.id);
+      setConversation((prev) => prev ? { ...prev, open: updated.open ?? true } : prev);
+    } catch (e) {
+      console.error("[BaseportalChat] Error reopening conversation:", e);
+    }
+  }, [conversation, apiClient]);
+  const handleBack = useCallback3(() => {
+    if (allowViewHistory && view === "chat") {
+      realtimeClient.unsubscribe();
+      setView("conversations");
+      setConversation(null);
+      setMessages([]);
+      apiClient.getVisitorConversations().then(setConversations).catch(() => {
+      });
+    } else {
+      onClose();
+    }
+  }, [allowViewHistory, view, realtimeClient, apiClient, onClose]);
+  const posClass = position === "bottom-left" ? "bp-window--left" : "bp-window--right";
+  const headerTitle = view === "conversations" ? t.conversations.title : channelInfo.name;
+  const showBack = allowViewHistory && view === "chat" || view === "prechat";
+  return /* @__PURE__ */ jsxs9("div", { class: `bp-window ${posClass}`, children: [
+    /* @__PURE__ */ jsxs9("div", { class: "bp-header", children: [
+      /* @__PURE__ */ jsxs9("div", { class: "bp-header__title", children: [
+        showBack && /* @__PURE__ */ jsx9("button", { class: "bp-header__back", onClick: handleBack, children: /* @__PURE__ */ jsx9(IconArrowLeft, {}) }),
+        headerTitle
+      ] }),
+      /* @__PURE__ */ jsx9("button", { class: "bp-header__close", onClick: onClose, children: /* @__PURE__ */ jsx9(IconX, {}) })
+    ] }),
+    loading && view !== "chat" ? /* @__PURE__ */ jsx9("div", { class: "bp-loading", children: /* @__PURE__ */ jsx9("div", { class: "bp-spinner" }) }) : /* @__PURE__ */ jsxs9(Fragment, { children: [
+      view === "prechat" && /* @__PURE__ */ jsx9(
+        PreChatForm,
+        {
+          channelInfo,
+          onSubmit: handlePreChatSubmit,
+          loading,
+          t
+        }
+      ),
+      view === "conversations" && /* @__PURE__ */ jsx9(
+        ConversationList,
+        {
+          conversations,
+          channelInfo,
+          loading,
+          onSelect: openConversation,
+          onNew: needsPreChat() ? () => setView("prechat") : startNewConversation,
+          t
+        }
+      ),
+      view === "chat" && /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx9(MessageList, { messages, loading, t }),
+        isOpen ? /* @__PURE__ */ jsx9(
+          MessageInput,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onFileSelect: handleFileSelect,
+            onFileRemove: handleFileRemove,
+            attachedFile,
+            uploading,
+            disabled: sending || loading,
+            placeholder: t.chat.placeholder,
+            t
+          }
+        ) : /* @__PURE__ */ jsxs9("div", { class: "bp-closed-banner", children: [
+          /* @__PURE__ */ jsx9("span", { class: "bp-closed-banner__text", children: t.chat.closed }),
+          channelInfo.config.allowReopenConversation && /* @__PURE__ */ jsx9("button", { class: "bp-closed-banner__reopen", onClick: handleReopen, children: t.chat.reopen })
+        ] }),
+        channelInfo.config.privacyPolicyUrl && /* @__PURE__ */ jsx9("div", { class: "bp-privacy-footer", children: /* @__PURE__ */ jsx9(
+          "a",
+          {
+            href: channelInfo.config.privacyPolicyUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: t.prechat.privacyLink
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/App.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "preact/jsx-runtime";
+function App({
+  channelInfo,
+  apiClient,
+  realtimeClient,
+  storage,
+  events,
+  visitor,
+  isAuthenticated,
+  position,
+  hidden,
+  t,
+  isOpenRef,
+  setIsOpen
+}) {
+  const [isOpen, setIsOpenState] = useState4(isOpenRef.current);
+  const [isHidden, setIsHidden] = useState4(hidden);
+  const [unreadCount] = useState4(0);
+  useEffect4(() => {
+    const onOpen = () => {
+      setIsOpenState(true);
+      isOpenRef.current = true;
+      setIsOpen(true);
+    };
+    const onClose = () => {
+      setIsOpenState(false);
+      isOpenRef.current = false;
+      setIsOpen(false);
+    };
+    const onShow = () => setIsHidden(false);
+    const onHide = () => {
+      setIsHidden(true);
+      setIsOpenState(false);
+      isOpenRef.current = false;
+      setIsOpen(false);
+    };
+    events.on("_open", onOpen);
+    events.on("_close", onClose);
+    events.on("show", onShow);
+    events.on("hide", onHide);
+    return () => {
+      events.off("_open", onOpen);
+      events.off("_close", onClose);
+      events.off("show", onShow);
+      events.off("hide", onHide);
+    };
+  }, [events, isOpenRef, setIsOpen]);
+  const handleToggle = () => {
+    const next = !isOpen;
+    setIsOpenState(next);
+    isOpenRef.current = next;
+    setIsOpen(next);
+    events.emit(next ? "open" : "close");
+  };
+  const handleClose = () => {
+    setIsOpenState(false);
+    isOpenRef.current = false;
+    setIsOpen(false);
+    events.emit("close");
+  };
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    !isHidden && /* @__PURE__ */ jsx10(
+      ChatBubble,
+      {
+        isOpen,
+        position,
+        unreadCount,
+        onClick: handleToggle
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx10(
+      ChatWindow,
+      {
+        channelInfo,
+        apiClient,
+        realtimeClient,
+        storage,
+        events,
+        visitor,
+        isAuthenticated,
+        position,
+        onClose: handleClose,
+        t
+      }
+    )
+  ] });
+}
+
+// src/ui/styles/widget-css.ts
+var widget_css_default = `#baseportal-chat-widget {
+  display: block;
+  position: static;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  --bp-primary: #6366f1;
+  --bp-primary-contrast: #ffffff;
+  --bp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --bp-radius: 16px;
+  --bp-radius-sm: 8px;
+  --bp-bubble-size: 60px;
+  --bp-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+  --bp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --bp-gray-50: #f9fafb;
+  --bp-gray-100: #f3f4f6;
+  --bp-gray-200: #e5e7eb;
+  --bp-gray-300: #d1d5db;
+  --bp-gray-500: #6b7280;
+  --bp-gray-700: #374151;
+  --bp-gray-900: #111827;
+  --bp-transition: 0.2s ease;
+}
+
+#baseportal-chat-widget *,
+#baseportal-chat-widget *::before,
+#baseportal-chat-widget *::after {
+  box-sizing: border-box;
+}
+
+/* ===== Chat Bubble (FAB) ===== */
+.bp-bubble {
+  pointer-events: auto;
+  position: fixed;
+  bottom: 24px;
+  z-index: 2147483646;
+  width: var(--bp-bubble-size);
+  height: var(--bp-bubble-size);
+  border-radius: 50%;
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--bp-shadow);
+  transition: transform var(--bp-transition), box-shadow var(--bp-transition);
+  font-family: var(--bp-font-family);
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+
+.bp-bubble:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.2);
+}
+
+.bp-bubble--right {
+  right: 24px;
+}
+
+.bp-bubble--left {
+  left: 24px;
+}
+
+.bp-bubble svg {
+  width: 28px;
+  height: 28px;
+  fill: currentColor;
+}
+
+.bp-bubble__badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+}
+
+/* ===== Chat Window ===== */
+.bp-window {
+  pointer-events: auto;
+  position: fixed;
+  bottom: 96px;
+  z-index: 2147483647;
+  width: 380px;
+  height: 520px;
+  border-radius: var(--bp-radius);
+  background: #fff;
+  box-shadow: var(--bp-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: bp-slide-up 0.25s ease-out;
+  font-family: var(--bp-font-family);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--bp-gray-900);
+}
+
+.bp-window--right {
+  right: 24px;
+}
+
+.bp-window--left {
+  left: 24px;
+}
+
+@keyframes bp-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile fullscreen */
+@media (max-width: 480px) {
+  .bp-window {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
+/* ===== Header ===== */
+.bp-header {
+  padding: 16px;
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.bp-header__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bp-header__back,
+.bp-header__close {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--bp-transition);
+}
+
+.bp-header__back:hover,
+.bp-header__close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.bp-header__back svg,
+.bp-header__close svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* ===== Message List ===== */
+.bp-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--bp-gray-50);
+}
+
+.bp-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.bp-messages::-webkit-scrollbar-thumb {
+  background: var(--bp-gray-300);
+  border-radius: 2px;
+}
+
+/* ===== Message Bubble ===== */
+.bp-msg {
+  display: flex;
+  max-width: 80%;
+}
+
+.bp-msg--client {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.bp-msg--agent {
+  align-self: flex-start;
+}
+
+.bp-msg__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+.bp-msg__avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.bp-msg__body {
+  margin: 0 8px;
+}
+
+.bp-msg__content {
+  padding: 10px 14px;
+  border-radius: 16px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.bp-msg--client .bp-msg__content {
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  border-bottom-right-radius: 4px;
+}
+
+.bp-msg--agent .bp-msg__content {
+  background: var(--bp-gray-100);
+  color: var(--bp-gray-900);
+  border-bottom-left-radius: 4px;
+}
+
+.bp-msg__time {
+  font-size: 11px;
+  color: var(--bp-gray-500);
+  margin-top: 2px;
+  padding: 0 4px;
+}
+
+.bp-msg--client .bp-msg__time {
+  text-align: right;
+}
+
+/* ===== Composer (Message Input) ===== */
+.bp-composer {
+  margin: 8px 12px 12px;
+  border: 1px solid var(--bp-gray-200);
+  border-radius: 12px;
+  background: #fff;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: border-color var(--bp-transition);
+}
+
+.bp-composer:focus-within {
+  border-color: var(--bp-primary);
+}
+
+.bp-composer__preview {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--bp-gray-100);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bp-gray-50);
+}
+
+.bp-composer__preview-thumb {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.bp-composer__preview-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  background: var(--bp-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--bp-gray-500);
+}
+
+.bp-composer__preview-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.bp-composer__preview-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.bp-composer__preview-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--bp-gray-700);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bp-composer__preview-status {
+  font-size: 11px;
+  color: var(--bp-gray-500);
+}
+
+.bp-composer__preview-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--bp-gray-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.bp-composer__preview-remove svg {
+  width: 14px;
+  height: 14px;
+}
+
+.bp-composer__preview-remove:hover {
+  color: var(--bp-gray-700);
+}
+
+.bp-composer__row {
+  display: flex;
+  align-items: flex-end;
+  padding: 4px;
+}
+
+.bp-composer__attach {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--bp-gray-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 6px;
+  transition: color var(--bp-transition), background var(--bp-transition);
+}
+
+.bp-composer__attach:hover {
+  color: var(--bp-primary);
+  background: var(--bp-gray-50);
+}
+
+.bp-composer__attach:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.bp-composer__attach svg {
+  width: 18px;
+  height: 18px;
+}
+
+.bp-composer__field {
+  flex: 1;
+  border: none;
+  padding: 6px 4px;
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.4;
+  resize: none;
+  outline: none;
+  max-height: 100px;
+  overflow-y: auto;
+  color: var(--bp-gray-900);
+  background: transparent;
+}
+
+.bp-composer__field::placeholder {
+  color: var(--bp-gray-500);
+}
+
+.bp-composer__field:disabled {
+  cursor: not-allowed;
+}
+
+.bp-composer__send {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity var(--bp-transition);
+}
+
+.bp-composer__send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.bp-composer__send svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ===== Message Media ===== */
+.bp-media-img {
+  max-width: 100%;
+  max-height: 240px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: block;
+  object-fit: contain;
+}
+
+.bp-media-video {
+  max-width: 100%;
+  max-height: 240px;
+  border-radius: 8px;
+  display: block;
+}
+
+.bp-media-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bp-gray-50);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--bp-gray-700);
+  transition: background var(--bp-transition);
+}
+
+.bp-media-file:hover {
+  background: var(--bp-gray-100);
+}
+
+.bp-media-file__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--bp-gray-200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--bp-gray-500);
+}
+
+.bp-media-file__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bp-media-file__name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.bp-media-file__download svg {
+  width: 16px;
+  height: 16px;
+  color: var(--bp-primary);
+}
+
+/* ===== Image Lightbox ===== */
+.bp-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.bp-lightbox__img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+  cursor: default;
+}
+
+.bp-lightbox__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--bp-transition);
+}
+
+.bp-lightbox__close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.bp-lightbox__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ===== Pre-Chat Form ===== */
+.bp-prechat {
+  flex: 1;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+}
+
+.bp-prechat__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--bp-gray-900);
+}
+
+.bp-prechat__desc {
+  font-size: 13px;
+  color: var(--bp-gray-500);
+}
+
+.bp-prechat__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bp-prechat__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--bp-gray-700);
+}
+
+.bp-prechat__input {
+  border: 1px solid var(--bp-gray-200);
+  border-radius: var(--bp-radius-sm);
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--bp-transition);
+  color: var(--bp-gray-900);
+  background: #fff;
+}
+
+.bp-prechat__input:focus {
+  border-color: var(--bp-primary);
+}
+
+.bp-prechat__submit {
+  padding: 10px 20px;
+  border-radius: var(--bp-radius-sm);
+  background: var(--bp-primary);
+  color: var(--bp-primary-contrast);
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity var(--bp-transition);
+}
+
+.bp-prechat__submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.bp-prechat__privacy {
+  font-size: 12px;
+  color: var(--bp-gray-500);
+  text-align: center;
+  margin-top: auto;
+}
+
+.bp-prechat__privacy a {
+  color: var(--bp-primary);
+  text-decoration: underline;
+}
+
+/* ===== Conversation List ===== */
+.bp-convlist {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.bp-convlist__new {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bp-gray-200);
+}
+
+.bp-convlist__new-btn {
+  width: 100%;
+  padding: 10px 16px;
+  border-radius: var(--bp-radius-sm);
+  background: rgba(99, 102, 241, 0.08);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--bp-primary);
+  transition: background var(--bp-transition);
+}
+
+.bp-convlist__new-btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.bp-convlist__new-btn:hover {
+  background: rgba(99, 102, 241, 0.15);
+}
+
+.bp-convlist__items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.bp-convlist__item {
+  width: 100%;
+  padding: 12px;
+  border-radius: var(--bp-radius-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: left;
+  font-family: inherit;
+  transition: background var(--bp-transition);
+  color: var(--bp-gray-900);
+}
+
+.bp-convlist__item:hover {
+  background: var(--bp-gray-50);
+}
+
+.bp-convlist__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bp-convlist__item-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.bp-convlist__item-title {
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.bp-convlist__item-status {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.bp-convlist__item-status--open {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.bp-convlist__item-status--closed {
+  background: var(--bp-gray-100);
+  color: var(--bp-gray-500);
+}
+
+.bp-convlist__item-preview {
+  font-size: 13px;
+  color: var(--bp-gray-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bp-convlist__empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--bp-gray-500);
+  font-size: 14px;
+}
+
+/* ===== Closed conversation banner ===== */
+.bp-closed-banner {
+  padding: 14px 16px;
+  border-top: 1px solid var(--bp-gray-200);
+  background: var(--bp-gray-50);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.bp-closed-banner__text {
+  font-size: 13px;
+  color: var(--bp-gray-500);
+}
+
+.bp-closed-banner__reopen {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--bp-primary);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.bp-closed-banner__reopen:hover {
+  opacity: 0.8;
+}
+
+/* ===== Privacy footer ===== */
+.bp-privacy-footer {
+  padding: 4px 16px 8px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--bp-gray-500);
+  flex-shrink: 0;
+}
+
+.bp-privacy-footer a {
+  color: var(--bp-primary);
+  text-decoration: underline;
+}
+
+/* ===== Loading ===== */
+.bp-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bp-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--bp-gray-200);
+  border-top-color: var(--bp-primary);
+  border-radius: 50%;
+  animation: bp-spin 0.6s linear infinite;
+}
+
+@keyframes bp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ===== Hidden ===== */
+.bp-hidden {
+  display: none !important;
+}
+`;
+
+// src/ui/mount.ts
+var styleElement = null;
+var hostElement = null;
+function mount(options) {
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = "baseportal-chat-styles";
+    styleElement.textContent = widget_css_default;
+    document.head.appendChild(styleElement);
+  }
+  hostElement = document.createElement("div");
+  hostElement.id = "baseportal-chat-widget";
+  const target = options.container || document.body;
+  target.appendChild(hostElement);
+  const primaryColor = options.channelInfo.theme?.primaryColor || "#6366f1";
+  const contrastColor = getContrastColor(primaryColor);
+  hostElement.style.setProperty("--bp-primary", primaryColor);
+  hostElement.style.setProperty("--bp-primary-contrast", contrastColor);
+  render(
+    h(App, {
+      channelInfo: options.channelInfo,
+      apiClient: options.apiClient,
+      realtimeClient: options.realtimeClient,
+      storage: options.storage,
+      events: options.events,
+      visitor: options.visitor,
+      isAuthenticated: options.isAuthenticated,
+      position: options.position,
+      hidden: options.hidden,
+      t: options.t,
+      isOpenRef: options.isOpenRef,
+      setIsOpen: options.setIsOpen
+    }),
+    hostElement
+  );
+}
+function unmount() {
+  if (hostElement) {
+    render(null, hostElement);
+    hostElement.remove();
+    hostElement = null;
+  }
+  if (styleElement) {
+    styleElement.remove();
+    styleElement = null;
+  }
+}
+function updateTheme(primaryColor) {
+  if (!hostElement) return;
+  hostElement.style.setProperty("--bp-primary", primaryColor);
+  hostElement.style.setProperty(
+    "--bp-primary-contrast",
+    getContrastColor(primaryColor)
+  );
+}
+function getContrastColor(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+
+// src/utils/events.ts
+var EventEmitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(callback);
+  }
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
+  }
+  emit(event, ...args) {
+    this.listeners.get(event)?.forEach((cb) => {
+      try {
+        cb(...args);
+      } catch (e) {
+        console.error(`[BaseportalChat] Error in ${event} handler:`, e);
+      }
+    });
+  }
+  removeAllListeners() {
+    this.listeners.clear();
+  }
+};
+
+// src/utils/storage.ts
+var Storage = class {
+  constructor(channelToken, email) {
+    this.prefix = email ? `bp_chat_${channelToken}_${email}` : `bp_chat_${channelToken}`;
+  }
+  get() {
+    try {
+      const raw = localStorage.getItem(this.prefix);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  }
+  set(data) {
+    try {
+      const current = this.get();
+      localStorage.setItem(this.prefix, JSON.stringify({ ...current, ...data }));
+    } catch {
+    }
+  }
+  getConversationId() {
+    return this.get().conversationId;
+  }
+  setConversationId(id) {
+    this.set({ conversationId: id });
+  }
+  getVisitor() {
+    return this.get().visitor;
+  }
+  setVisitor(visitor) {
+    this.set({ visitor });
+  }
+  clear() {
+    try {
+      localStorage.removeItem(this.prefix);
+    } catch {
+    }
+  }
+};
+
+// src/widget.ts
+var DEFAULT_API_URL = "https://api.baseportal.io";
+var BaseportalChat = class {
+  constructor(config) {
+    this.events = new EventEmitter();
+    this.channelInfo = null;
+    this.visitor = null;
+    this.isAuthenticated = false;
+    this.isOpenRef = { current: false };
+    this.mounted = false;
+    this.config = {
+      ...config,
+      apiUrl: config.apiUrl || DEFAULT_API_URL,
+      position: config.position || "bottom-right",
+      locale: config.locale || "pt"
+    };
+    this.hidden = config.hideOnLoad || false;
+    this.visitor = config.visitor || null;
+    this.isAuthenticated = !!config.visitor?.email;
+    this.apiClient = new ApiClient(
+      this.config.channelToken,
+      this.config.apiUrl
+    );
+    if (this.isAuthenticated && this.visitor?.email) {
+      this.apiClient.setVisitorIdentity(this.visitor.email, this.visitor.hash);
+    }
+    this.storage = new Storage(
+      this.config.channelToken,
+      this.isAuthenticated ? this.visitor?.email : void 0
+    );
+    this.realtimeClient = new RealtimeClient(this.apiClient);
+    if (!this.visitor) {
+      this.visitor = this.storage.getVisitor() || null;
+    }
+    this.init();
+  }
+  async init() {
+    try {
+      this.channelInfo = await this.apiClient.getChannelInfo();
+      const primaryColor = this.config.theme?.primaryColor || this.channelInfo.theme?.primaryColor || "#6366f1";
+      const t = getTranslations(this.config.locale);
+      mount({
+        channelInfo: this.channelInfo,
+        apiClient: this.apiClient,
+        realtimeClient: this.realtimeClient,
+        storage: this.storage,
+        events: this.events,
+        visitor: this.visitor,
+        isAuthenticated: this.isAuthenticated,
+        position: this.config.position,
+        hidden: this.hidden,
+        t,
+        container: this.config.container,
+        isOpenRef: this.isOpenRef,
+        setIsOpen: (open) => {
+          this.isOpenRef.current = open;
+        }
+      });
+      if (primaryColor !== "#6366f1") {
+        updateTheme(primaryColor);
+      }
+      this.mounted = true;
+      this.events.emit("ready");
+    } catch (e) {
+      console.error("[BaseportalChat] Failed to initialize:", e);
+    }
+  }
+  // --- Visibility ---
+  open() {
+    if (!this.mounted) return;
+    this.events.emit("_open");
+    this.events.emit("open");
+  }
+  close() {
+    if (!this.mounted) return;
+    this.events.emit("_close");
+    this.events.emit("close");
+  }
+  toggle() {
+    if (this.isOpenRef.current) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  show() {
+    this.hidden = false;
+    this.events.emit("show");
+  }
+  hide() {
+    this.hidden = true;
+    this.events.emit("hide");
+  }
+  isOpen() {
+    return this.isOpenRef.current;
+  }
+  // --- Visitor ---
+  identify(visitor) {
+    this.visitor = visitor;
+    this.isAuthenticated = true;
+    this.apiClient.setVisitorIdentity(visitor.email, visitor.hash);
+    this.storage = new Storage(this.config.channelToken, visitor.email);
+    this.storage.setVisitor(visitor);
+    this.events.emit("identified", visitor);
+    if (this.mounted) {
+      this.remount();
+    }
+  }
+  updateVisitor(data) {
+    if (this.visitor) {
+      this.visitor = { ...this.visitor, ...data };
+      this.storage.setVisitor(this.visitor);
+    }
+  }
+  clearVisitor() {
+    this.visitor = null;
+    this.isAuthenticated = false;
+    this.apiClient.clearVisitorIdentity();
+    this.storage.clear();
+    this.storage = new Storage(this.config.channelToken);
+    this.realtimeClient.unsubscribe();
+    if (this.mounted) {
+      this.remount();
+    }
+  }
+  // --- Actions ---
+  sendMessage(content) {
+    this.events.emit("_sendMessage", content);
+  }
+  setConversationId(id) {
+    this.events.emit("_setConversationId", id);
+  }
+  newConversation() {
+    this.events.emit("_newConversation");
+  }
+  // --- Config ---
+  setTheme(theme) {
+    if (theme.primaryColor) {
+      updateTheme(theme.primaryColor);
+    }
+  }
+  setPosition(position) {
+    this.config.position = position;
+    if (this.mounted) {
+      this.remount();
+    }
+  }
+  setLocale(locale) {
+    this.config.locale = locale;
+    if (this.mounted) {
+      this.remount();
+    }
+  }
+  // --- Events ---
+  on(event, callback) {
+    this.events.on(event, callback);
+  }
+  off(event, callback) {
+    this.events.off(event, callback);
+  }
+  // --- Lifecycle ---
+  destroy() {
+    this.realtimeClient.unsubscribe();
+    this.events.removeAllListeners();
+    unmount();
+    this.mounted = false;
+  }
+  remount() {
+    unmount();
+    this.mounted = false;
+    this.init();
+  }
+};
+
+// src/index.ts
+var src_default = BaseportalChat;
+export {
+  BaseportalChat,
+  src_default as default
+};
+//# sourceMappingURL=index.esm.js.map