@sesionario/blocks 1.42.0-rc.2 → 1.42.0-rc.4

package/dist/index.cjs

@@ -7675,12 +7675,225 @@ function MessageScrollerButton({
     }
   );
 }
+
+// src/lib/support-chat.ts
+var CHAT_ATTACHMENT_MIME_TYPES = [
+  "application/pdf",
+  "image/jpeg",
+  "image/png",
+  "image/webp"
+];
+var CHAT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
+var CHAT_ATTACHMENT_MAX_COUNT = 5;
+var CHAT_ATTACHMENT_ACCEPT = "application/pdf,image/jpeg,image/png,image/webp,.pdf,.jpg,.jpeg,.png,.webp";
+var EXTENSIONS = {
+  "application/pdf": ["pdf"],
+  "image/jpeg": ["jpg", "jpeg"],
+  "image/png": ["png"],
+  "image/webp": ["webp"]
+};
+function isChatAttachmentMime(value) {
+  return CHAT_ATTACHMENT_MIME_TYPES.includes(value);
+}
+function isChatImageAttachment(contentType) {
+  return contentType === "image/jpeg" || contentType === "image/png" || contentType === "image/webp";
+}
+function filenameMatchesChatMime(filename, mime) {
+  if (!isChatAttachmentMime(mime)) return false;
+  const base = filename.split(/[/\\]/).pop() ?? "";
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return false;
+  const ext = base.slice(dot + 1).toLowerCase();
+  return EXTENSIONS[mime].includes(ext);
+}
+function validateChatAttachmentFile(file) {
+  if (file.size <= 0 || file.size > CHAT_ATTACHMENT_MAX_BYTES) {
+    return "too_large";
+  }
+  if (!isChatAttachmentMime(file.type) || !filenameMatchesChatMime(file.name, file.type)) {
+    return "bad_type";
+  }
+  return null;
+}
+async function parseJson(res) {
+  const body = await res.json();
+  if (!res.ok) {
+    throw new Error(
+      typeof body === "object" && body && "error" in body && body.error ? String(body.error) : `Chat request failed (${res.status})`
+    );
+  }
+  return body;
+}
+function createSupportChatClient(basePath = "/api/chat-svc") {
+  const root = basePath.replace(/\/$/, "");
+  const client = {
+    basePath: root,
+    async listConversations() {
+      const res = await fetch(`${root}/me/conversations`);
+      const body = await parseJson(res);
+      return body.result ?? [];
+    },
+    async findOrCreateConversation(input) {
+      const res = await fetch(`${root}/conversations`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(input)
+      });
+      const body = await parseJson(res);
+      return body.result;
+    },
+    async listMessages(conversationId, opts) {
+      const params = new URLSearchParams();
+      if (opts?.cursor) params.set("cursor", opts.cursor);
+      if (opts?.limit != null) params.set("limit", String(opts.limit));
+      const qs = params.toString();
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/messages${qs ? `?${qs}` : ""}`
+      );
+      const body = await parseJson(res);
+      return {
+        messages: body.result ?? [],
+        nextCursor: body.nextCursor ?? null
+      };
+    },
+    async sendMessage(conversationId, input) {
+      const body = (input.body ?? "").trim();
+      const attachments = input.attachments ?? [];
+      const payload = {};
+      if (body) payload.body = body;
+      if (attachments.length > 0) payload.attachments = attachments;
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/messages`,
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload)
+        }
+      );
+      const parsed = await parseJson(res);
+      return parsed.result;
+    },
+    async createUpload(conversationId, input) {
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/uploads`,
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(input)
+        }
+      );
+      const body = await parseJson(res);
+      return body.result;
+    },
+    async getAttachmentUrls(conversationId, keys) {
+      if (keys.length === 0) return [];
+      const res = await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/attachment-urls`,
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ keys })
+        }
+      );
+      const body = await parseJson(res);
+      return body.result?.urls ?? [];
+    },
+    async uploadAttachment(conversationId, file) {
+      const validation = validateChatAttachmentFile(file);
+      if (validation === "too_large") {
+        throw new Error("File too large");
+      }
+      if (validation) {
+        throw new Error("File type not allowed");
+      }
+      const upload = await client.createUpload(conversationId, {
+        contentType: file.type,
+        fileName: file.name,
+        sizeBytes: file.size
+      });
+      const put = await fetch(upload.uploadUrl, {
+        method: "PUT",
+        headers: {
+          "content-type": file.type,
+          "content-disposition": upload.contentDisposition
+        },
+        body: file
+      });
+      if (!put.ok) {
+        throw new Error(`upload failed: ${put.status}`);
+      }
+      return {
+        key: upload.key,
+        fileName: file.name,
+        contentType: file.type,
+        sizeBytes: file.size
+      };
+    },
+    async markRead(conversationId) {
+      await fetch(
+        `${root}/conversations/${encodeURIComponent(conversationId)}/read`,
+        { method: "POST" }
+      );
+    }
+  };
+  return client;
+}
+function MessageAttachments({
+  attachments
+}) {
+  if (attachments.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 flex flex-col gap-1.5", children: attachments.map((att) => {
+    const url = att.url ?? void 0;
+    if (isChatImageAttachment(att.contentType)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "block overflow-hidden rounded-md",
+          "aria-label": att.fileName,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            SafeImage,
+            {
+              src: url,
+              alt: att.fileName,
+              className: "max-h-48 max-w-full rounded-md object-contain",
+              fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted text-muted-foreground flex h-24 w-36 items-center justify-center rounded-md text-xs", children: att.fileName })
+            }
+          )
+        },
+        att.key
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: url,
+        download: att.fileName,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "bg-background/60 hover:bg-background/80 inline-flex max-w-full items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs font-medium",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, { className: "size-3.5 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: att.fileName })
+        ]
+      },
+      att.key
+    );
+  }) });
+}
 function ChatMessageList({
   messages,
   currentUserId,
   emptyTitle = "Sin mensajes",
   emptyDescription = "Escribe para iniciar la conversaci\xF3n.",
-  compactEmpty = false
+  compactEmpty = false,
+  hasOlder = false,
+  loadingOlder = false,
+  onLoadOlder,
+  loadOlderLabel = "Cargar mensajes anteriores",
+  loadingOlderLabel = "Cargando\u2026"
 }) {
   if (messages.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7701,35 +7914,52 @@ function ChatMessageList({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxRuntime.jsxs(MessageScroller, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerContent, { className: "gap-4 p-4", children: messages.map((m) => {
-      const mine = Boolean(currentUserId) && m.senderId === currentUserId;
-      const align = mine ? "end" : "start";
-      return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerItem, { scrollAnchor: mine, children: m.deleted ? /* @__PURE__ */ jsxRuntime.jsx(Marker, { variant: "separator", children: /* @__PURE__ */ jsxRuntime.jsxs(MarkerContent, { children: [
-        "Mensaje eliminado \xB7 ",
-        m.senderName
-      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Message, { align, children: [
-        !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "flex size-8 items-center justify-center rounded-full text-xs font-medium",
-            style: avatarFallbackStyle(m.senderName),
-            children: getInitials(m.senderName)
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
-          !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageHeader, { children: m.senderName }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Bubble,
+    /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxRuntime.jsxs(MessageScrollerContent, { className: "gap-4 p-4", children: [
+      hasOlder && onLoadOlder ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          disabled: loadingOlder,
+          onClick: onLoadOlder,
+          children: loadingOlder ? loadingOlderLabel : loadOlderLabel
+        }
+      ) }) : null,
+      messages.map((m) => {
+        const mine = Boolean(currentUserId) && m.senderId === currentUserId;
+        const align = mine ? "end" : "start";
+        const attachments = m.deleted || !m.attachments ? [] : m.attachments;
+        return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerItem, { scrollAnchor: mine, children: m.deleted ? /* @__PURE__ */ jsxRuntime.jsx(Marker, { variant: "separator", children: /* @__PURE__ */ jsxRuntime.jsxs(MarkerContent, { children: [
+          "Mensaje eliminado \xB7 ",
+          m.senderName
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Message, { align, children: [
+          !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              variant: mine ? "default" : "muted",
-              align,
-              children: /* @__PURE__ */ jsxRuntime.jsx(BubbleContent, { children: m.body })
+              className: "flex size-8 items-center justify-center rounded-full text-xs font-medium",
+              style: avatarFallbackStyle(m.senderName),
+              children: getInitials(m.senderName)
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(MessageFooter, { children: new Date(m.createdAt).toLocaleString("es-MX") })
-        ] })
-      ] }) }, m.id);
-    }) }) }),
+          ) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
+            !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageHeader, { children: m.senderName }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Bubble,
+              {
+                variant: mine ? "default" : "muted",
+                align,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(BubbleContent, { children: [
+                  m.body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: m.body }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(MessageAttachments, { attachments })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(MessageFooter, { children: new Date(m.createdAt).toLocaleString("es-MX") })
+          ] })
+        ] }) }, m.id);
+      })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerButton, {})
   ] }) });
 }
@@ -7864,13 +8094,89 @@ var MessageComposer = React2__namespace.forwardRef(function MessageComposer2({
   );
 });
 MessageComposer.displayName = "MessageComposer";
-var RECONNECT_DELAY_MS = 2e3;
+var SupportMessengerContext = React2.createContext(null);
+function useSupportMessenger() {
+  const ctx = React2.useContext(SupportMessengerContext);
+  if (!ctx) {
+    throw new Error(
+      "useSupportMessenger must be used within SupportMessengerProvider"
+    );
+  }
+  return ctx;
+}
+function useSupportMessengerOptional() {
+  return React2.useContext(SupportMessengerContext);
+}
+function SupportMessengerProvider({
+  children,
+  items,
+  onOpenList,
+  onOpenThread
+}) {
+  const totalUnread = React2.useMemo(
+    () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
+    [items]
+  );
+  const openList = React2.useCallback(() => {
+    onOpenList?.();
+  }, [onOpenList]);
+  const openThread = React2.useCallback(
+    (req) => {
+      onOpenThread?.(req);
+    },
+    [onOpenThread]
+  );
+  const noop = React2.useCallback(() => {
+  }, []);
+  const ctx = React2.useMemo(
+    () => ({
+      listOpen: false,
+      openList,
+      closeList: noop,
+      toggleList: openList,
+      openThread,
+      closeThread: noop,
+      closeAll: noop,
+      activeThreadKey: null,
+      totalUnread
+    }),
+    [openList, openThread, noop, totalUnread]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SupportMessengerContext.Provider, { value: ctx, children });
+}
+var RECONNECT_BASE_MS = 1e3;
+var RECONNECT_MAX_MS = 3e4;
+function optimisticId() {
+  return `optimistic:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
+}
+function attachmentKeySignature(attachments) {
+  return (attachments ?? []).map((a) => a.key).filter((k) => !k.startsWith("local:")).join("\0");
+}
+function mergeAttachmentUrls(messages, urlByKey) {
+  let changed = false;
+  const next = messages.map((m) => {
+    if (m.deleted || !m.attachments?.length) return m;
+    let attChanged = false;
+    const attachments = m.attachments.map((a) => {
+      if (a.url || a.key.startsWith("local:")) return a;
+      const url = urlByKey.get(a.key);
+      if (!url) return a;
+      attChanged = true;
+      return { ...a, url };
+    });
+    if (!attChanged) return m;
+    changed = true;
+    return { ...m, attachments };
+  });
+  return changed ? next : messages;
+}
 function useSupportConversation({
   client,
   getWsUrl,
   conversationId: conversationIdProp,
   open = null,
   enabled = true,
+  currentUserId = null,
   onConversationReady,
   onIncomingMessage
 }) {
@@ -7878,20 +8184,29 @@ function useSupportConversation({
     conversationIdProp
   );
   const [messages, setMessages] = React2.useState([]);
+  const [nextCursor, setNextCursor] = React2.useState(null);
   const [loading, setLoading] = React2.useState(false);
+  const [loadingOlder, setLoadingOlder] = React2.useState(false);
   const [sending, setSending] = React2.useState(false);
   const [error, setError] = React2.useState(null);
+  const [sendError, setSendError] = React2.useState(null);
   const socketRef = React2.useRef(null);
   const reconnectRef = React2.useRef(null);
+  const reconnectAttempt = React2.useRef(0);
   const closedByUser = React2.useRef(false);
   const onReadyRef = React2.useRef(onConversationReady);
   const onIncomingRef = React2.useRef(onIncomingMessage);
+  const focusedRef = React2.useRef(enabled);
+  const resolvedKeysRef = React2.useRef(/* @__PURE__ */ new Set());
   onReadyRef.current = onConversationReady;
   onIncomingRef.current = onIncomingMessage;
+  focusedRef.current = enabled;
   const load = React2.useCallback(async () => {
     if (!enabled) return;
     setLoading(true);
     setError(null);
+    setSendError(null);
+    resolvedKeysRef.current = /* @__PURE__ */ new Set();
     try {
       let id = conversationIdProp;
       if (!id && open) {
@@ -7901,12 +8216,14 @@ function useSupportConversation({
       if (!id) {
         setConversationId(null);
         setMessages([]);
+        setNextCursor(null);
         return;
       }
       setConversationId(id);
       onReadyRef.current?.(id);
-      const msgs = await client.listMessages(id);
-      setMessages(msgs);
+      const page = await client.listMessages(id);
+      setMessages(page.messages);
+      setNextCursor(page.nextCursor);
       await client.markRead(id);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Chat load failed");
@@ -7917,8 +8234,44 @@ function useSupportConversation({
   React2.useEffect(() => {
     void load();
   }, [load]);
+  React2.useEffect(() => {
+    if (!enabled || !conversationId) return;
+    const missing = [];
+    for (const m of messages) {
+      if (m.deleted) continue;
+      for (const a of m.attachments ?? []) {
+        if (a.url || a.key.startsWith("local:")) continue;
+        if (resolvedKeysRef.current.has(a.key)) continue;
+        missing.push(a.key);
+      }
+    }
+    if (missing.length === 0) return;
+    let cancelled = false;
+    const unique = [...new Set(missing)];
+    void client.getAttachmentUrls(conversationId, unique).then((urls) => {
+      if (cancelled) return;
+      const map = /* @__PURE__ */ new Map();
+      for (const row of urls) {
+        map.set(row.key, row.url);
+        resolvedKeysRef.current.add(row.key);
+      }
+      for (const key of unique) {
+        resolvedKeysRef.current.add(key);
+      }
+      setMessages((prev) => mergeAttachmentUrls(prev, map));
+    }).catch(() => {
+      if (cancelled) return;
+      for (const key of unique) {
+        resolvedKeysRef.current.add(key);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, conversationId, enabled, messages]);
   React2.useEffect(() => {
     closedByUser.current = false;
+    reconnectAttempt.current = 0;
     if (!enabled || !conversationId) return;
     let cancelled = false;
     const connect = async () => {
@@ -7926,6 +8279,9 @@ function useSupportConversation({
       if (!url || cancelled || closedByUser.current) return;
       const socket = new WebSocket(url);
       socketRef.current = socket;
+      socket.onopen = () => {
+        reconnectAttempt.current = 0;
+      };
       socket.onmessage = (event) => {
         let data;
         try {
@@ -7936,22 +8292,46 @@ function useSupportConversation({
         if (data.type === "message") {
           setMessages((prev) => {
             if (prev.some((m) => m.id === data.id)) return prev;
-            return [...prev, data];
+            const dataKeys = attachmentKeySignature(data.attachments);
+            const withoutOptimistic = prev.filter((m) => {
+              if (!m.id.startsWith("optimistic:")) return true;
+              if (m.senderId !== data.senderId || m.body !== data.body) {
+                return true;
+              }
+              const atts = m.attachments ?? [];
+              const dataAtts = data.attachments ?? [];
+              const onlyLocal = atts.every((a) => a.key.startsWith("local:"));
+              const realKeys = attachmentKeySignature(atts);
+              if (realKeys && realKeys === dataKeys) return false;
+              if (atts.length === 0 && dataAtts.length === 0) return false;
+              if (onlyLocal && atts.length === dataAtts.length) return false;
+              return true;
+            });
+            return [...withoutOptimistic, data];
           });
           onIncomingRef.current?.(data);
+          if (focusedRef.current) {
+            void client.markRead(conversationId);
+          }
         } else if (data.type === "deleted") {
           setMessages(
             (prev) => prev.map(
-              (m) => m.id === data.id ? { ...m, deleted: true, body: "" } : m
+              (m) => m.id === data.id ? { ...m, deleted: true, body: "", attachments: [] } : m
             )
           );
         }
       };
       socket.onclose = () => {
         if (cancelled || closedByUser.current) return;
+        const attempt = reconnectAttempt.current;
+        reconnectAttempt.current = attempt + 1;
+        const delay = Math.min(
+          RECONNECT_BASE_MS * 2 ** attempt,
+          RECONNECT_MAX_MS
+        );
         reconnectRef.current = setTimeout(() => {
           void connect();
-        }, RECONNECT_DELAY_MS);
+        }, delay);
       };
     };
     void connect();
@@ -7962,91 +8342,264 @@ function useSupportConversation({
       socketRef.current?.close();
       socketRef.current = null;
     };
-  }, [conversationId, enabled, getWsUrl]);
+  }, [client, conversationId, enabled, getWsUrl]);
+  const loadOlder = React2.useCallback(async () => {
+    if (!conversationId || !nextCursor || loadingOlder) return;
+    setLoadingOlder(true);
+    try {
+      const page = await client.listMessages(conversationId, {
+        cursor: nextCursor
+      });
+      setMessages((prev) => {
+        const seen = new Set(prev.map((m) => m.id));
+        const older = page.messages.filter((m) => !seen.has(m.id));
+        return [...older, ...prev];
+      });
+      setNextCursor(page.nextCursor);
+    } catch {
+    } finally {
+      setLoadingOlder(false);
+    }
+  }, [client, conversationId, loadingOlder, nextCursor]);
   const send = React2.useCallback(
-    async (text) => {
+    async (text, files = []) => {
       const trimmed = text.trim();
-      if (!conversationId || !trimmed || sending) return;
+      if (!conversationId || sending) return;
+      if (!trimmed && files.length === 0) return;
+      if (files.length > CHAT_ATTACHMENT_MAX_COUNT) {
+        setSendError("Too many attachments");
+        throw new Error("Too many attachments");
+      }
+      for (const file of files) {
+        const issue = validateChatAttachmentFile(file);
+        if (issue === "too_large") {
+          setSendError("File too large");
+          throw new Error("File too large");
+        }
+        if (issue) {
+          setSendError("File type not allowed");
+          throw new Error("File type not allowed");
+        }
+      }
       setSending(true);
-      setError(null);
+      setSendError(null);
+      const tempId = optimisticId();
+      const localAttachments = files.map(
+        (file, index) => ({
+          key: `local:${tempId}:${index}`,
+          fileName: file.name,
+          contentType: file.type,
+          sizeBytes: file.size,
+          url: URL.createObjectURL(file)
+        })
+      );
+      const optimistic = {
+        id: tempId,
+        conversationId,
+        senderId: currentUserId ?? "me",
+        senderName: "",
+        senderSide: "member",
+        body: trimmed,
+        attachments: localAttachments,
+        deleted: false,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, optimistic]);
       try {
-        const msg = await client.sendMessage(conversationId, trimmed);
+        const uploaded = [];
+        for (const file of files) {
+          uploaded.push(await client.uploadAttachment(conversationId, file));
+        }
+        const msg = await client.sendMessage(conversationId, {
+          body: trimmed || void 0,
+          attachments: uploaded.length > 0 ? uploaded : void 0
+        });
+        for (const att of localAttachments) {
+          if (att.url?.startsWith("blob:")) URL.revokeObjectURL(att.url);
+        }
         setMessages((prev) => {
-          if (prev.some((m) => m.id === msg.id)) return prev;
-          return [...prev, msg];
+          const withoutTemp = prev.filter((m) => m.id !== tempId);
+          if (withoutTemp.some((m) => m.id === msg.id)) return withoutTemp;
+          return [...withoutTemp, msg];
         });
         await client.markRead(conversationId);
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Send failed");
+        for (const att of localAttachments) {
+          if (att.url?.startsWith("blob:")) URL.revokeObjectURL(att.url);
+        }
+        setMessages((prev) => prev.filter((m) => m.id !== tempId));
+        const message = err instanceof Error ? err.message : "Send failed";
+        setSendError(message);
         throw err;
       } finally {
         setSending(false);
       }
     },
-    [client, conversationId, sending]
+    [client, conversationId, currentUserId, sending]
   );
   return {
     conversationId,
     messages,
     loading,
+    loadingOlder,
+    hasOlder: Boolean(nextCursor),
     sending,
     error,
+    sendError,
     send,
+    loadOlder,
     reload: load
   };
 }
-var SupportMessengerContext = React2.createContext(null);
-function useSupportMessenger() {
-  const ctx = React2.useContext(SupportMessengerContext);
-  if (!ctx) {
-    throw new Error(
-      "useSupportMessenger must be used within SupportMessengerProvider"
-    );
+function formatAttachError(code, labels) {
+  switch (code) {
+    case "too_large":
+      return labels.attachTooLarge ?? "El archivo supera 10 MB";
+    case "bad_type":
+      return labels.attachBadType ?? "Solo PDF, JPEG, PNG o WebP";
+    case "too_many":
+      return labels.attachMaxCount ?? "M\xE1ximo 5 archivos por mensaje";
+    default: {
+      const _exhaustive = code;
+      return _exhaustive;
+    }
   }
-  return ctx;
 }
-function useSupportMessengerOptional() {
-  return React2.useContext(SupportMessengerContext);
-}
-function ThreadPanel({
-  thread,
+function ThreadPane({
+  item,
   client,
   getWsUrl,
   currentUserId,
   labels,
   emojiLocale,
-  onClose,
-  onBack,
   showBack,
+  onBack,
   onConversationReady,
+  composerTools,
+  composerAttachments,
   className
 }) {
   const [draft, setDraft] = React2.useState("");
-  const { messages, loading, sending, error, send } = useSupportConversation({
+  const [queued, setQueued] = React2.useState([]);
+  const [attachError, setAttachError] = React2.useState(null);
+  const fileInputRef = React2.useRef(null);
+  const {
+    messages,
+    loading,
+    loadingOlder,
+    hasOlder,
+    sending,
+    error,
+    sendError,
+    send,
+    loadOlder
+  } = useSupportConversation({
     client,
     getWsUrl,
-    conversationId: thread.conversationId ?? null,
-    open: thread.open ?? null,
+    conversationId: item.conversationId ?? null,
+    open: item.open ?? null,
+    currentUserId,
     onConversationReady
   });
+  const queuedRef = React2.useRef(queued);
+  queuedRef.current = queued;
+  React2.useEffect(() => {
+    return () => {
+      for (const q of queuedRef.current) {
+        if (q.previewUrl) URL.revokeObjectURL(q.previewUrl);
+      }
+    };
+  }, []);
+  function onPickFiles(fileList) {
+    if (!fileList || fileList.length === 0) return;
+    setAttachError(null);
+    const additions = [];
+    for (const file of Array.from(fileList)) {
+      if (queued.length + additions.length >= CHAT_ATTACHMENT_MAX_COUNT) {
+        setAttachError(formatAttachError("too_many", labels));
+        break;
+      }
+      const issue = validateChatAttachmentFile(file);
+      if (issue) {
+        setAttachError(formatAttachError(issue, labels));
+        continue;
+      }
+      additions.push({
+        id: `q:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`,
+        file,
+        previewUrl: isChatImageAttachment(file.type) ? URL.createObjectURL(file) : null
+      });
+    }
+    if (additions.length > 0) {
+      setQueued((prev) => [...prev, ...additions]);
+    }
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }
+  function removeQueued(id) {
+    setQueued((prev) => {
+      const target = prev.find((q) => q.id === id);
+      if (target?.previewUrl) URL.revokeObjectURL(target.previewUrl);
+      return prev.filter((q) => q.id !== id);
+    });
+    setAttachError(null);
+  }
   async function onSubmit(e) {
     e.preventDefault();
     const text = draft.trim();
-    if (!text) return;
+    const files = queued.map((q) => q.file);
+    if (!text && files.length === 0) return;
+    const snapshot = queued;
     setDraft("");
+    setQueued([]);
+    setAttachError(null);
     try {
-      await send(text);
+      await send(text, files);
+      for (const q of snapshot) {
+        if (q.previewUrl) URL.revokeObjectURL(q.previewUrl);
+      }
     } catch {
       setDraft(text);
+      setQueued(snapshot);
     }
   }
+  const previewStrip = queued.length > 0 || composerAttachments ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    queued.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-2", children: queued.map((q) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "bg-muted/40 relative flex max-w-[10rem] items-center gap-2 rounded-md border p-1.5",
+        children: [
+          q.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            SafeImage,
+            {
+              src: q.previewUrl,
+              alt: "",
+              className: "size-10 rounded object-cover",
+              fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted flex size-10 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-4 text-muted-foreground" }) })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted flex size-10 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[11px]", children: q.file.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              className: "size-6 shrink-0",
+              "aria-label": labels.removeAttachmentAria ?? "Quitar archivo",
+              onClick: () => removeQueued(q.id),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+            }
+          )
+        ]
+      },
+      q.id
+    )) }) : null,
+    composerAttachments
+  ] }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-card shadow-lg",
-        className
-      ),
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b bg-primary/10 px-2 py-2", children: [
           showBack && onBack ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -8064,72 +8617,98 @@ function ThreadPanel({
             "span",
             {
               className: "flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary text-[11px] font-semibold text-primary-foreground",
-              style: thread.avatarUrl ? void 0 : avatarFallbackStyle(thread.title),
+              style: item.avatarUrl ? void 0 : avatarFallbackStyle(item.title),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SafeImage,
                 {
-                  src: thread.avatarUrl,
+                  src: item.avatarUrl,
                   alt: "",
                   className: "size-full object-cover",
-                  fallback: getInitials(thread.eyebrow ?? thread.title)
+                  fallback: getInitials(item.eyebrow ?? item.title)
                 }
               )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 px-1", children: [
-            thread.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] font-semibold tracking-wide text-primary", children: thread.eyebrow }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold", children: thread.title }),
-            thread.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: thread.subtitle }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon-sm",
-              onClick: onClose,
-              "aria-label": labels.close,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" })
-            }
-          )
+            item.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] font-semibold tracking-wide text-primary", children: item.eyebrow }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold", children: item.title }),
+            item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: item.subtitle }) : null
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { label: labels.loading, className: "py-0" }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-sm text-destructive", role: "alert", children: error }) : /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { label: labels.loading, className: "py-0" }) }) : error && messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-sm text-destructive", role: "alert", children: error }) : /* @__PURE__ */ jsxRuntime.jsx(
           ChatMessageList,
           {
             messages,
             currentUserId,
             emptyDescription: labels.emptyThread,
-            compactEmpty: true
+            compactEmpty: true,
+            hasOlder,
+            loadingOlder,
+            onLoadOlder: () => void loadOlder(),
+            loadOlderLabel: labels.loadOlder,
+            loadingOlderLabel: labels.loadingOlder
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-          MessageComposer,
-          {
-            locale: emojiLocale,
-            value: draft,
-            onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
-            onSubmit,
-            sendLabel: labels.send,
-            placeholder: labels.placeholder,
-            "aria-label": labels.placeholder,
-            disabled: loading,
-            sendDisabled: loading || sending,
-            maxLength: 2e3,
-            rows: 2
-          }
-        ) })
+        attachError || sendError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-t px-3 py-2 text-sm text-destructive", role: "alert", children: attachError ?? sendError }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              className: "sr-only",
+              accept: CHAT_ATTACHMENT_ACCEPT,
+              multiple: true,
+              onChange: (e) => onPickFiles(e.target.files)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MessageComposer,
+            {
+              locale: emojiLocale,
+              value: draft,
+              onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
+              onSubmit,
+              sendLabel: labels.send,
+              placeholder: labels.placeholder,
+              "aria-label": labels.placeholder,
+              disabled: loading,
+              sendDisabled: loading || sending,
+              allowEmptySubmit: queued.length > 0,
+              maxLength: 2e3,
+              rows: 2,
+              attachments: previewStrip,
+              tools: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    className: "size-7 text-muted-foreground",
+                    "aria-label": labels.attachAria ?? "Adjuntar archivo",
+                    disabled: loading || sending || queued.length >= CHAT_ATTACHMENT_MAX_COUNT,
+                    onClick: () => fileInputRef.current?.click(),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "size-4" })
+                  }
+                ),
+                composerTools
+              ] })
+            }
+          )
+        ] })
       ]
     }
   );
 }
-function ListPanel({
+function ListPane({
   items,
   labels,
   tabs,
   activeTab,
   onTabChange,
+  selectedKey,
   onSelect,
-  onClose,
   searchThreshold,
   className
 }) {
@@ -8145,26 +8724,10 @@ function ListPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-card shadow-lg",
-        className
-      ),
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b bg-primary/10 px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: labels.listTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon-sm",
-              onClick: onClose,
-              "aria-label": labels.close,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" })
-            }
-          )
-        ] }),
-        tabs && tabs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 border-b p-2", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b bg-primary/10 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: labels.listTitle }) }),
+        tabs && tabs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 border-b p-2", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             type: "button",
@@ -8187,353 +8750,126 @@ function ListPanel({
             }
           )
         ] }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: labels.emptyList }) : filtered.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left transition-colors hover:bg-muted/80",
-            onClick: () => onSelect(item),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold text-white",
-                  style: avatarFallbackStyle(item.title),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    SafeImage,
-                    {
-                      src: item.avatarUrl,
-                      alt: "",
-                      className: "size-full object-cover",
-                      fallback: getInitials(item.title)
-                    }
-                  )
-                }
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: labels.emptyList }) : filtered.map((item) => {
+          const selected = item.key === selectedKey;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left transition-colors hover:bg-muted/80",
+                selected && "bg-muted"
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-                item.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[11px] font-semibold tracking-wide text-primary", children: item.eyebrow }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
-                item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.subtitle }) : null
-              ] }),
-              (item.unreadCount ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground", children: (item.unreadCount ?? 0) > 99 ? "99+" : item.unreadCount }) : null
-            ]
-          }
-        ) }, item.key)) })
+              onClick: () => onSelect(item),
+              "aria-current": selected ? "true" : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold text-white",
+                    style: avatarFallbackStyle(item.title),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      SafeImage,
+                      {
+                        src: item.avatarUrl,
+                        alt: "",
+                        className: "size-full object-cover",
+                        fallback: getInitials(item.title)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                  item.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[11px] font-semibold tracking-wide text-primary", children: item.eyebrow }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
+                  item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.subtitle }) : null
+                ] }),
+                (item.unreadCount ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground", children: (item.unreadCount ?? 0) > 99 ? "99+" : item.unreadCount }) : null
+              ]
+            }
+          ) }, item.key);
+        }) })
       ]
     }
   );
 }
-function SupportMessengerProvider({
-  children,
+function SupportInboxLayout({
   client,
   getWsUrl,
   currentUserId,
   items,
   labels,
-  enabled = true,
-  forceMinimized = false,
+  selectedKey,
+  onSelect,
+  onBackToList,
   emojiLocale = "es",
   tabs,
   activeTab,
   onTabChange,
   onRefreshItems,
   searchThreshold = 8,
-  className
+  className,
+  composerTools,
+  composerAttachments
 }) {
   const isMobile = useMediaQuery("(max-width: 767px)");
-  const { height: viewportHeight, keyboardInset } = useVisualViewportMetrics();
-  const dockRef = React2.useRef(null);
-  const [listOpen, setListOpen] = React2.useState(false);
-  const [threads, setThreads] = React2.useState([]);
-  const [mobileThreadKey, setMobileThreadKey] = React2.useState(null);
-  const mobileSheetOpen = listOpen || Boolean(mobileThreadKey);
-  const mobileSheetHeight = viewportHeight > 0 ? Math.max(240, Math.min(viewportHeight * 0.85, viewportHeight)) : void 0;
-  const totalUnread = React2.useMemo(
-    () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
-    [items]
-  );
-  const isDesktopOpen = !isMobile && (listOpen || threads.length > 0);
-  React2.useEffect(() => {
-    if (!forceMinimized) return;
-    setListOpen(false);
-    setThreads([]);
-    setMobileThreadKey(null);
-  }, [forceMinimized]);
-  const openList = React2.useCallback(() => {
-    setListOpen(true);
-    void onRefreshItems?.();
-  }, [onRefreshItems]);
-  const closeList = React2.useCallback(() => setListOpen(false), []);
-  const toggleList = React2.useCallback(() => {
-    setListOpen((prev) => {
-      const next = !prev;
-      if (next) void onRefreshItems?.();
-      return next;
-    });
-  }, [onRefreshItems]);
-  const openThread = React2.useCallback((req) => {
-    setListOpen(false);
-    setThreads((prev) => {
-      const existing = prev.find((t) => t.key === req.key);
-      if (existing) {
-        return [
-          ...prev.filter((t) => t.key !== req.key),
-          { ...existing, ...req }
-        ];
-      }
-      const next = [...prev, req];
-      return next.slice(-2);
-    });
-    setMobileThreadKey(req.key);
-  }, []);
-  const closeThread = React2.useCallback((key) => {
-    setThreads((prev) => prev.filter((t) => t.key !== key));
-    setMobileThreadKey((prev) => prev === key ? null : prev);
-  }, []);
-  const closeAll = React2.useCallback(() => {
-    setListOpen(false);
-    setThreads([]);
-    setMobileThreadKey(null);
-  }, []);
-  React2.useEffect(() => {
-    if (!isDesktopOpen) return;
-    function onPointerDown(event) {
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      if (dockRef.current?.contains(target)) return;
-      if (target instanceof Element && target.closest('[data-slot="popover-content"]')) {
-        return;
-      }
-      closeAll();
-    }
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [isDesktopOpen, closeAll]);
-  const ctx = React2.useMemo(
-    () => ({
-      listOpen,
-      openList,
-      closeList,
-      toggleList,
-      openThread,
-      closeThread,
-      closeAll,
-      activeThreadKey: mobileThreadKey ?? threads[threads.length - 1]?.key ?? null,
-      totalUnread
-    }),
-    [
-      listOpen,
-      openList,
-      closeList,
-      toggleList,
-      openThread,
-      closeThread,
-      closeAll,
-      mobileThreadKey,
-      threads,
-      totalUnread
-    ]
-  );
-  const handleSelectItem = React2.useCallback(
-    (item) => {
-      openThread({
-        key: item.key,
-        title: item.title,
-        subtitle: item.subtitle,
-        eyebrow: item.eyebrow,
-        avatarUrl: item.avatarUrl,
-        conversationId: item.conversationId,
-        open: item.open
-      });
-    },
-    [openThread]
+  const selected = React2.useMemo(
+    () => items.find((item) => item.key === selectedKey) ?? null,
+    [items, selectedKey]
   );
-  const activeMobileThread = threads.find((t) => t.key === mobileThreadKey);
-  return /* @__PURE__ */ jsxRuntime.jsxs(SupportMessengerContext.Provider, { value: ctx, children: [
-    children,
-    enabled ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: dockRef,
-        className: cn(
-          "pointer-events-none fixed right-4 bottom-4 z-50 flex flex-col items-end gap-3",
-          className
-        ),
-        children: [
-          !isMobile ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-auto flex items-end gap-3", children: [
-            threads.map((thread) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[28rem] w-[22rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ThreadPanel,
-              {
-                thread,
-                client,
-                getWsUrl,
-                currentUserId,
-                labels,
-                emojiLocale,
-                onClose: () => closeThread(thread.key),
-                onConversationReady: () => void onRefreshItems?.()
-              }
-            ) }, thread.key)),
-            listOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[28rem] w-[20rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ListPanel,
+  const showList = !isMobile || !selected;
+  const showThread = Boolean(selected) && (!isMobile || Boolean(selectedKey));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 overflow-hidden rounded-xl border bg-card",
+        className
+      ),
+      children: [
+        showList ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-h-0 min-w-0 border-r",
+              isMobile ? "w-full" : "w-full max-w-sm shrink-0"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ListPane,
               {
                 items,
                 labels,
                 tabs,
                 activeTab,
                 onTabChange,
-                onSelect: handleSelectItem,
-                onClose: closeList,
-                searchThreshold
+                selectedKey,
+                onSelect,
+                searchThreshold,
+                className: "h-full"
               }
-            ) }) : null
-          ] }) : null,
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
-            Drawer,
-            {
-              open: mobileSheetOpen,
-              onOpenChange: (open) => {
-                if (!open) closeAll();
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                DrawerContent,
-                {
-                  className: "pointer-events-auto mx-auto flex max-h-[85dvh] max-w-lg flex-col",
-                  style: {
-                    // Lift above the software keyboard without Vaul's
-                    // repositionInputs focus hack (see drawer.tsx).
-                    bottom: keyboardInset,
-                    height: mobileSheetHeight ?? "85dvh",
-                    maxHeight: viewportHeight > 0 ? viewportHeight : "85dvh"
-                  },
-                  children: activeMobileThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: activeMobileThread.title }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ThreadPanel,
-                      {
-                        thread: activeMobileThread,
-                        client,
-                        getWsUrl,
-                        currentUserId,
-                        labels,
-                        emojiLocale,
-                        showBack: true,
-                        onBack: () => {
-                          closeThread(activeMobileThread.key);
-                          setListOpen(true);
-                        },
-                        onClose: closeAll,
-                        onConversationReady: () => void onRefreshItems?.(),
-                        className: "h-full rounded-none border-0 shadow-none"
-                      }
-                    )
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: labels.listTitle }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ListPanel,
-                      {
-                        items,
-                        labels,
-                        tabs,
-                        activeTab,
-                        onTabChange,
-                        onSelect: handleSelectItem,
-                        onClose: closeAll,
-                        searchThreshold,
-                        className: "h-full rounded-none border-0 shadow-none"
-                      }
-                    )
-                  ] })
-                }
-              )
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "pointer-events-auto relative flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-[transform,opacity] motion-safe:hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-                listOpen && !forceMinimized && "ring-2 ring-ring ring-offset-2"
-              ),
-              "aria-label": totalUnread > 0 && labels.unreadBadgeAria ? `${labels.launcherAria}. ${labels.unreadBadgeAria.replace("{count}", String(totalUnread))}` : labels.launcherAria,
-              onClick: () => {
-                if (isMobile) {
-                  if (activeMobileThread) {
-                    closeAll();
-                  } else {
-                    toggleList();
-                  }
-                  return;
-                }
-                toggleList();
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: "size-6" }),
-                totalUnread > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 flex size-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white", children: totalUnread > 99 ? "99+" : totalUnread }) : null
-              ]
-            }
-          )
-        ]
-      }
-    ) : null
-  ] });
-}
-
-// src/lib/support-chat.ts
-async function parseJson(res) {
-  const body = await res.json();
-  if (!res.ok) {
-    throw new Error(
-      typeof body === "object" && body && "error" in body && body.error ? String(body.error) : `Chat request failed (${res.status})`
-    );
-  }
-  return body;
-}
-function createSupportChatClient(basePath = "/api/chat-svc") {
-  const root = basePath.replace(/\/$/, "");
-  return {
-    basePath: root,
-    async listConversations() {
-      const res = await fetch(`${root}/me/conversations`);
-      const body = await parseJson(res);
-      return body.result ?? [];
-    },
-    async findOrCreateConversation(input) {
-      const res = await fetch(`${root}/conversations`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(input)
-      });
-      const body = await parseJson(res);
-      return body.result;
-    },
-    async listMessages(conversationId) {
-      const res = await fetch(
-        `${root}/conversations/${encodeURIComponent(conversationId)}/messages`
-      );
-      const body = await parseJson(res);
-      return body.result ?? [];
-    },
-    async sendMessage(conversationId, text) {
-      const res = await fetch(
-        `${root}/conversations/${encodeURIComponent(conversationId)}/messages`,
-        {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ body: text })
-        }
-      );
-      const body = await parseJson(res);
-      return body.result;
-    },
-    async markRead(conversationId) {
-      await fetch(
-        `${root}/conversations/${encodeURIComponent(conversationId)}/read`,
-        { method: "POST" }
-      );
+            )
+          }
+        ) : null,
+        showThread && selected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ThreadPane,
+          {
+            item: selected,
+            client,
+            getWsUrl,
+            currentUserId,
+            labels,
+            emojiLocale,
+            showBack: isMobile,
+            onBack: onBackToList,
+            onConversationReady: () => void onRefreshItems?.(),
+            composerTools,
+            composerAttachments,
+            className: "h-full"
+          }
+        ) }) : !isMobile ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6 text-center text-sm text-muted-foreground", children: labels.selectThread ?? labels.emptyThread }) : null
+      ]
     }
-  };
+  );
 }
 var DEFAULT_RECONNECT_MS = 2e3;
 var MAX_RECONNECT_MS = 3e4;
@@ -9394,6 +9730,10 @@ exports.Bubble = Bubble;
 exports.BubbleContent = BubbleContent;
 exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
+exports.CHAT_ATTACHMENT_ACCEPT = CHAT_ATTACHMENT_ACCEPT;
+exports.CHAT_ATTACHMENT_MAX_BYTES = CHAT_ATTACHMENT_MAX_BYTES;
+exports.CHAT_ATTACHMENT_MAX_COUNT = CHAT_ATTACHMENT_MAX_COUNT;
+exports.CHAT_ATTACHMENT_MIME_TYPES = CHAT_ATTACHMENT_MIME_TYPES;
 exports.ChatMessageList = ChatMessageList;
 exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
 exports.DEFAULT_EDITABLE_SECTION_LABELS = DEFAULT_EDITABLE_SECTION_LABELS;
@@ -9456,6 +9796,7 @@ exports.SafeImage = SafeImage;
 exports.ScrollRestorationProvider = ScrollRestorationProvider;
 exports.SearchCommand = SearchCommand;
 exports.SearchablePicker = SearchablePicker;
+exports.SupportInboxLayout = SupportInboxLayout;
 exports.SupportMessengerProvider = SupportMessengerProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.VerifiedProfessionalBadge = VerifiedProfessionalBadge;
@@ -9469,12 +9810,15 @@ exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
 exports.createSupportChatClient = createSupportChatClient;
 exports.defaultLanguages = defaultLanguages;
+exports.filenameMatchesChatMime = filenameMatchesChatMime;
 exports.formatPaymentCardBrand = formatPaymentCardBrand;
 exports.formatRfcInput = formatRfcInput;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getAvatarColors = getAvatarColors;
 exports.getInitials = getInitials;
 exports.insertAtCaret = insertAtCaret;
+exports.isChatAttachmentMime = isChatAttachmentMime;
+exports.isChatImageAttachment = isChatImageAttachment;
 exports.isValidPersonaFisicaRfc = isValidPersonaFisicaRfc;
 exports.isValidPersonaMoralRfc = isValidPersonaMoralRfc;
 exports.isValidRfc = isValidRfc;
@@ -9503,6 +9847,7 @@ exports.useSupportMessenger = useSupportMessenger;
 exports.useSupportMessengerOptional = useSupportMessengerOptional;
 exports.useVisualViewportMetrics = useVisualViewportMetrics;
 exports.useZoomPanGestures = useZoomPanGestures;
+exports.validateChatAttachmentFile = validateChatAttachmentFile;
 exports.zoomToward = zoomToward;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map