@adatechnology/conversations-ui 0.1.0-rc.21 → 0.1.0-rc.23

package/dist/index.js

@@ -2586,6 +2586,854 @@ function useInboxActions() {
     [api]
   );
 }
+
+// src/workspace/ConversationsWorkspace.tsx
+import { useEffect as useEffect10, useMemo as useMemo5, useState as useState14 } from "react";
+
+// src/workspace/BulkTemplateModal.tsx
+import { useEffect as useEffect7, useMemo as useMemo3, useState as useState11 } from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function BulkTemplateModal({
+  labels,
+  expiredCount,
+  sending,
+  onClose,
+  onSend
+}) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("BulkTemplateModal requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  const [templates, setTemplates] = useState11([]);
+  const [search, setSearch] = useState11("");
+  const [selected, setSelected] = useState11("");
+  useEffect7(() => {
+    let active = true;
+    void api.listTemplates?.().then((loaded) => {
+      if (active) setTemplates(loaded);
+    }).catch(() => {
+    });
+    return () => {
+      active = false;
+    };
+  }, [api]);
+  const filtered = useMemo3(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return templates;
+    return templates.filter((template) => template.name.toLowerCase().includes(term));
+  }, [templates, search]);
+  return /* @__PURE__ */ jsx21("div", { className: "cv-workspace-modal", role: "dialog", "aria-modal": "true", "aria-label": labels.templateModalTitle, children: /* @__PURE__ */ jsxs19("div", { className: "cv-workspace-modal__box", children: [
+    /* @__PURE__ */ jsxs19("header", { className: "cv-workspace-modal__header", children: [
+      /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx21("h3", { children: labels.templateModalTitle }),
+        /* @__PURE__ */ jsx21("p", { children: labels.templateModalAvailable(templates.length) })
+      ] }),
+      /* @__PURE__ */ jsx21("button", { type: "button", onClick: onClose, "aria-label": labels.templateModalCancel, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: "cv-workspace-modal__search", children: /* @__PURE__ */ jsx21(
+      "input",
+      {
+        type: "search",
+        value: search,
+        onChange: (event) => setSearch(event.target.value),
+        placeholder: labels.templateModalSearch,
+        autoFocus: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxs19("div", { className: "cv-workspace-modal__list", children: [
+      filtered.length === 0 ? /* @__PURE__ */ jsx21("p", { className: "cv-workspace-empty", children: labels.templateModalEmpty }) : null,
+      filtered.map((template) => /* @__PURE__ */ jsxs19(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelected(template.name === selected ? "" : template.name),
+          "aria-pressed": template.name === selected,
+          className: `cv-workspace-modal__item${template.name === selected ? " cv-workspace-modal__item--on" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx21("span", { className: "cv-workspace-modal__item-name", children: template.name }),
+            /* @__PURE__ */ jsxs19("span", { className: "cv-workspace-modal__item-meta", children: [
+              template.language,
+              template.category ? ` \xB7 ${template.category.toLowerCase()}` : ""
+            ] })
+          ]
+        },
+        template.name
+      ))
+    ] }),
+    expiredCount === 0 ? /* @__PURE__ */ jsx21("p", { className: "cv-workspace-modal__warning", children: labels.templateModalNoneExpired }) : null,
+    /* @__PURE__ */ jsxs19("footer", { className: "cv-workspace-modal__footer", children: [
+      /* @__PURE__ */ jsx21("button", { type: "button", onClick: onClose, children: labels.templateModalCancel }),
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          disabled: sending || expiredCount === 0,
+          onClick: () => onSend(selected || void 0),
+          children: sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/workspace/ConversationPane.tsx
+import { useEffect as useEffect8, useState as useState12 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function ConversationPane({
+  conversation,
+  now,
+  busy,
+  labels,
+  onTakeover,
+  onReturnToBot,
+  onFinish,
+  onBack,
+  extraUtilities,
+  contextEntriesOf,
+  quickReplies,
+  quickReplyVariablesFor,
+  flowLabel,
+  onDownload,
+  requireTakeoverToReply,
+  messageSelection,
+  initialComposerText,
+  renderAboveTranscript,
+  onAttach
+}) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("ConversationPane requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  const { messages, refetch } = useConversationMessages(conversation.id);
+  const { context: conversationContext } = useConversationContext(conversation.id);
+  const [documentsOpen, setDocumentsOpen] = useState12(false);
+  const [sendFailure, setSendFailure] = useState12(void 0);
+  const [selectedMessageIds, setSelectedMessageIds] = useState12(/* @__PURE__ */ new Set());
+  const [draft, setDraft] = useState12(initialComposerText ?? "");
+  useEffect8(() => {
+    setSelectedMessageIds(/* @__PURE__ */ new Set());
+    setDraft(initialComposerText ?? "");
+  }, [conversation.id, initialComposerText]);
+  function toggleMessageSelected(messageId) {
+    setSelectedMessageIds((current) => {
+      const next = new Set(current);
+      if (next.has(messageId)) next.delete(messageId);
+      else next.add(messageId);
+      return next;
+    });
+  }
+  function copySelectedMessages() {
+    const transcript = messages.filter((message) => selectedMessageIds.has(message.id)).map(
+      (message) => `[${new Date(message.timestamp).toLocaleString()}] ${message.sender}: ${message.content ?? `(${message.type})`}`
+    ).join("\n");
+    void navigator.clipboard.writeText(transcript);
+    setSelectedMessageIds(/* @__PURE__ */ new Set());
+  }
+  const scroll = useScrollToLatestMessage({ conversationId: conversation.id, messageCount: messages.length });
+  useConversationRealtime(conversation.id, () => {
+    void refetch();
+  });
+  const blocked = isWindowBlocking(
+    windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel })
+  );
+  async function runSend(action, fallback) {
+    setSendFailure(void 0);
+    try {
+      await action();
+      await refetch();
+    } catch (error) {
+      setSendFailure(error instanceof Error ? error.message : fallback);
+    }
+  }
+  async function handleSend(text) {
+    await runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure);
+  }
+  async function handleAttach(file) {
+    if (!onAttach) return;
+    await runSend(() => onAttach(file), labels.attachFailure);
+  }
+  function handleDownload() {
+    downloadTextFile(
+      buildTranscriptFilename(conversation.whatsappNumber, /* @__PURE__ */ new Date()),
+      buildTranscriptText({
+        messages,
+        whatsappNumber: conversation.whatsappNumber,
+        clientName: conversation.clientName
+      })
+    );
+  }
+  const contextEntries = contextEntriesOf?.(conversationContext);
+  const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== "human";
+  return /* @__PURE__ */ jsxs20("div", { className: "cv-workspace-pane", children: [
+    /* @__PURE__ */ jsx22(
+      ConversationHeader,
+      {
+        conversation,
+        busy,
+        ...onTakeover ? { onTakeover } : {},
+        ...onReturnToBot ? { onReturnToBot } : {},
+        ...onFinish ? { onFinish } : {},
+        onDownload: onDownload ?? handleDownload,
+        onBack,
+        onOpenDocuments: () => setDocumentsOpen(!documentsOpen),
+        documentsOpen,
+        ...extraUtilities ? { extraUtilities } : {}
+      }
+    ),
+    contextEntries && contextEntries.length > 0 || flowLabel ? /* @__PURE__ */ jsx22(ConversationContextPanel, { entries: contextEntries ?? [], ...flowLabel ? { flowLabel } : {} }) : null,
+    /* @__PURE__ */ jsx22(ConversationDocumentsPanel, { conversationId: conversation.id, open: documentsOpen }),
+    renderAboveTranscript?.(conversation),
+    /* @__PURE__ */ jsx22(
+      ConversationWallpaper,
+      {
+        ref: scroll.containerRef,
+        onScroll: scroll.handleScroll,
+        className: "cv-workspace-transcript",
+        children: messages.map((message, index) => {
+          const previous = index > 0 ? messages[index - 1] : void 0;
+          const startsNewDay = !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString();
+          return /* @__PURE__ */ jsxs20("div", { children: [
+            startsNewDay ? /* @__PURE__ */ jsx22(DateDivider, { iso: message.timestamp }) : null,
+            /* @__PURE__ */ jsx22(
+              MessageBubble,
+              {
+                message,
+                isMine: message.direction === "outbound",
+                isFirstInGroup: !previous || previous.sender !== message.sender,
+                ...messageSelection ? {
+                  isSelecting: selectedMessageIds.size > 0,
+                  isSelected: selectedMessageIds.has(message.id),
+                  onToggleSelect: () => toggleMessageSelected(message.id)
+                } : {}
+              }
+            )
+          ] }, message.id);
+        })
+      }
+    ),
+    messageSelection && selectedMessageIds.size > 0 ? /* @__PURE__ */ jsxs20("div", { className: "cv-workspace-selection", children: [
+      /* @__PURE__ */ jsx22("span", { children: labels.messagesSelected(selectedMessageIds.size) }),
+      /* @__PURE__ */ jsxs20("div", { className: "cv-workspace-selection__actions", children: [
+        /* @__PURE__ */ jsx22("button", { type: "button", onClick: () => setSelectedMessageIds(/* @__PURE__ */ new Set()), children: labels.bulkClear }),
+        /* @__PURE__ */ jsx22("button", { type: "button", onClick: copySelectedMessages, children: labels.copySelected })
+      ] })
+    ] }) : null,
+    sendFailure ? /* @__PURE__ */ jsx22("p", { role: "alert", className: "cv-workspace-alert", children: sendFailure }) : null,
+    blocked ? /* @__PURE__ */ jsx22(
+      WindowExpiredNotice,
+      {
+        disabled: busy,
+        onSendTemplate: () => void api.sendTemplate(conversation.id, {}).then(() => refetch())
+      }
+    ) : botOwnsConversation ? (
+      // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
+      /* @__PURE__ */ jsx22("p", { className: "cv-workspace-notice", children: labels.takeoverToReply })
+    ) : /* @__PURE__ */ jsx22(
+      MessageComposer,
+      {
+        value: draft,
+        onChange: setDraft,
+        onSend: (text) => void handleSend(text),
+        ...onAttach ? { onAttach: (file) => void handleAttach(file) } : {},
+        placeholder: labels.composerPlaceholder,
+        ...quickReplies ? { quickReplies } : {},
+        ...quickReplyVariablesFor ? { quickReplyVariables: quickReplyVariablesFor(conversation, conversationContext) } : {}
+      }
+    )
+  ] });
+}
+
+// src/workspace/ConversationsInboxList.tsx
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function ConversationsInboxList({
+  inbox,
+  labels,
+  className,
+  renderFilters,
+  renderBulkActions,
+  renderRow,
+  onSendTemplateToSelected
+}) {
+  const hasSelection = inbox.selectedIds.size > 0;
+  return /* @__PURE__ */ jsxs21("aside", { className, children: [
+    hasSelection ? /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-bulk", children: [
+      /* @__PURE__ */ jsx23("span", { className: "cv-workspace-bulk__count", children: labels.bulkSelected(inbox.selectedIds.size) }),
+      /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-bulk__actions", children: [
+        /* @__PURE__ */ jsx23("button", { type: "button", onClick: inbox.clearBulkSelection, children: labels.bulkClear }),
+        onSendTemplateToSelected ? /* @__PURE__ */ jsx23("button", { type: "button", onClick: onSendTemplateToSelected, disabled: inbox.busy, children: labels.bulkTemplate }) : null,
+        inbox.canFinalize ? /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            disabled: inbox.busy,
+            onClick: () => {
+              if (window.confirm(labels.bulkFinalizeConfirm(inbox.selectedIds.size))) {
+                void inbox.finalizeSelected();
+              }
+            },
+            children: labels.bulkFinalize
+          }
+        ) : null,
+        renderBulkActions?.(inbox)
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-filters", children: [
+      /* @__PURE__ */ jsx23(
+        "input",
+        {
+          type: "search",
+          value: inbox.search,
+          onChange: (event) => inbox.setSearch(event.target.value),
+          placeholder: labels.search,
+          className: "cv-workspace-search"
+        }
+      ),
+      /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-chips", children: [
+        /* @__PURE__ */ jsx23("span", { className: "cv-workspace-chips__legend", children: labels.windowLegend }),
+        WINDOW_FILTERS.map((filter) => /* @__PURE__ */ jsxs21(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.setWindowFilter(filter.value),
+            "aria-pressed": inbox.windowFilter === filter.value,
+            className: `cv-workspace-chip${inbox.windowFilter === filter.value ? " cv-workspace-chip--on" : ""}`,
+            children: [
+              filter.dotClass ? /* @__PURE__ */ jsx23("span", { className: `cv-workspace-dot ${filter.dotClass}` }) : null,
+              filter.label
+            ]
+          },
+          filter.value
+        ))
+      ] }),
+      inbox.channelFilters.length > 0 ? /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-chips", children: [
+        /* @__PURE__ */ jsx23("span", { className: "cv-workspace-chips__legend", children: labels.channelLegend }),
+        inbox.channelFilters.map((filter) => /* @__PURE__ */ jsxs21(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.setChannelFilter(filter.value),
+            "aria-pressed": inbox.channelFilter === filter.value,
+            className: `cv-workspace-chip${inbox.channelFilter === filter.value ? " cv-workspace-chip--on" : ""}`,
+            children: [
+              filter.value === CHANNEL_FILTER_ALL ? null : /* @__PURE__ */ jsx23(ChannelIcon, { channel: filter.value }),
+              filter.label
+            ]
+          },
+          filter.value
+        ))
+      ] }) : null,
+      renderFilters?.(inbox),
+      /* @__PURE__ */ jsxs21("label", { className: "cv-workspace-selectall", children: [
+        /* @__PURE__ */ jsx23("input", { type: "checkbox", checked: inbox.allOnPageSelected, onChange: inbox.toggleSelectAllOnPage }),
+        labels.selectAll
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-rows", children: [
+      inbox.pageConversations.map(
+        (conversation) => renderRow ? /* @__PURE__ */ jsx23("div", { children: renderRow(conversation) }, conversation.id) : /* @__PURE__ */ jsx23(
+          ConversationRow,
+          {
+            conversation,
+            active: conversation.id === inbox.selectedId,
+            selected: inbox.selectedIds.has(conversation.id),
+            now: inbox.now,
+            busy: inbox.busy,
+            onOpen: () => inbox.selectConversation(conversation.id),
+            onToggleSelected: () => inbox.toggleSelected(conversation.id),
+            onTakeover: () => void inbox.takeover(conversation.id)
+          },
+          conversation.id
+        )
+      ),
+      !inbox.loading && inbox.filteredCount === 0 ? /* @__PURE__ */ jsx23("p", { className: "cv-workspace-empty", children: labels.emptyList }) : null
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-pager", children: [
+      /* @__PURE__ */ jsx23("span", { children: labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount) }),
+      /* @__PURE__ */ jsxs21("div", { className: "cv-workspace-pager__buttons", children: [
+        /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => inbox.goToPage(1), disabled: inbox.page === 1, "aria-label": "Primeira p\xE1gina", children: "\xAB" }),
+        /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.goToPage(inbox.page - 1),
+            disabled: inbox.page === 1,
+            "aria-label": "P\xE1gina anterior",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx23("span", { children: labels.pageOf(inbox.page, inbox.pageCount) }),
+        /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.goToPage(inbox.page + 1),
+            disabled: inbox.page === inbox.pageCount,
+            "aria-label": "Pr\xF3xima p\xE1gina",
+            children: "\u203A"
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.goToPage(inbox.pageCount),
+            disabled: inbox.page === inbox.pageCount,
+            "aria-label": "\xDAltima p\xE1gina",
+            children: "\xBB"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/workspace/labels.ts
+var DEFAULT_CONVERSATIONS_WORKSPACE_LABELS = {
+  title: "Conversas",
+  conversations: "conversas",
+  waiting: "aguardando",
+  unread: "n\xE3o lidas",
+  waitingOnly: "Aguardando atendimento",
+  markSelectedAsRead: "Marcar selecionadas como lidas",
+  search: "Buscar conversa...",
+  windowLegend: "Janela:",
+  channelLegend: "Canal:",
+  selectAll: "Selecionar todas",
+  emptyList: "Nenhuma conversa encontrada.",
+  emptyDetail: "Selecione uma conversa.",
+  bulkSelected: (count) => `${count} selecionada${count === 1 ? "" : "s"}`,
+  bulkClear: "Limpar sele\xE7\xE3o",
+  bulkFinalize: "Finalizar",
+  bulkFinalizeConfirm: (count) => `Finalizar ${count} conversa${count === 1 ? "" : "s"}?`,
+  bulkTemplate: "Enviar template",
+  markAllAsRead: "Marcar todas como lidas",
+  templateModalTitle: "Escolher template",
+  templateModalSearch: "Buscar template...",
+  templateModalEmpty: "Nenhum template encontrado.",
+  templateModalCancel: "Cancelar",
+  templateModalSending: "Enviando\u2026",
+  templateModalNoneExpired: "Nenhuma das conversas selecionadas est\xE1 fora da janela de 24h.",
+  templateModalAvailable: (count) => `${count} template${count === 1 ? "" : "s"} dispon\xEDve${count === 1 ? "l" : "is"}`,
+  templateModalSend: (count) => `Enviar para ${count}`,
+  messagesSelected: (count) => `${count} mensagem${count === 1 ? "" : "s"} selecionada${count === 1 ? "" : "s"}`,
+  copySelected: "Copiar",
+  composerPlaceholder: "Responder como atendente\u2026",
+  attachFailure: "Falha ao enviar o arquivo.",
+  sendFailure: "Falha ao enviar a mensagem.",
+  takeoverToReply: "Assuma o atendimento para responder diretamente ao cliente.",
+  signIn: "Entrar no painel",
+  pageOf: (page, pageCount) => `${page} / ${pageCount}`,
+  rangeOf: (first, last, total) => total === 0 ? `0 de 0` : `${first}\u2013${last} de ${total}`
+};
+
+// src/workspace/useConversationsInbox.ts
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef7, useState as useState13 } from "react";
+var CONVERSATIONS_PER_PAGE = 50;
+function defaultDescribeFailure(error) {
+  const status = error.status;
+  if (status === 401 || status === 403) {
+    return "Sess\xE3o expirada nesta aba \u2014 entre no painel de novo para ver as conversas.";
+  }
+  return error instanceof Error && error.message ? `N\xE3o foi poss\xEDvel carregar as conversas: ${error.message}` : "N\xE3o foi poss\xEDvel carregar as conversas.";
+}
+function useConversationsInbox(params = {}) {
+  const context = useConversations();
+  if (!context) {
+    throw new Error("useConversationsInbox requires an ancestor <ConversationsProvider>");
+  }
+  const { api } = context;
+  const perPage = params.perPage ?? CONVERSATIONS_PER_PAGE;
+  const markReadOnOpen = params.markReadOnOpen ?? true;
+  const describeFailure = params.describeFailure ?? defaultDescribeFailure;
+  const [waitingOnly, setWaitingOnly] = useState13(false);
+  const [windowFilter, setWindowFilter] = useState13(CONVERSATION_WINDOW.ALL);
+  const [channelFilter, setChannelFilter] = useState13(CHANNEL_FILTER_ALL);
+  const [search, setSearch] = useState13("");
+  const [page, setPage] = useState13(1);
+  const [selectedId, setSelectedId] = useState13(void 0);
+  const [selectedIds, setSelectedIds] = useState13(/* @__PURE__ */ new Set());
+  const [busy, setBusy] = useState13(false);
+  const { conversations, total, loading, error, refetch } = useConversationList({
+    ...waitingOnly ? { waitingHuman: true } : {},
+    ...search ? { search } : {},
+    ...params.filters ? { filters: params.filters } : {},
+    ...params.serverPaginated ? { page, limit: perPage } : {}
+  });
+  useGlobalRealtime(
+    useCallback7(() => {
+      void refetch();
+    }, [refetch])
+  );
+  const now = useMemo4(() => Date.now(), [conversations]);
+  const filtered = useMemo4(
+    () => conversations.filter(
+      (conversation) => channelFilter === CHANNEL_FILTER_ALL || (conversation.channel ?? DEFAULT_CONVERSATION_CHANNEL) === channelFilter
+    ).filter(
+      (conversation) => windowFilter === CONVERSATION_WINDOW.ALL || windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel }) === windowFilter
+    ),
+    [conversations, windowFilter, channelFilter, now]
+  );
+  const totalForPaging = params.serverPaginated ? total : filtered.length;
+  const pageCount = Math.max(1, Math.ceil(totalForPaging / perPage));
+  const currentPage = Math.min(page, pageCount);
+  const pageConversations = params.serverPaginated ? filtered : filtered.slice((currentPage - 1) * perPage, currentPage * perPage);
+  useEffect9(() => {
+    setPage(1);
+  }, [search, waitingOnly, windowFilter, channelFilter]);
+  useEffect9(() => {
+    if (selectedId && !conversations.some((conversation) => conversation.id === selectedId)) {
+      setSelectedId(void 0);
+    }
+  }, [conversations, selectedId]);
+  const lastMarkReadAttempt = useRef7(void 0);
+  useEffect9(() => {
+    if (!markReadOnOpen || !selectedId) return;
+    const opened = conversations.find((conversation) => conversation.id === selectedId);
+    if (!opened || opened.unread === 0) return;
+    const attempt = `${selectedId}:${opened.unread}`;
+    if (lastMarkReadAttempt.current === attempt) return;
+    lastMarkReadAttempt.current = attempt;
+    void api.markRead(selectedId).then(() => refetch()).catch(() => {
+    });
+  }, [markReadOnOpen, selectedId, conversations, refetch, api]);
+  const toggleSelected = useCallback7((conversationId) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (next.has(conversationId)) next.delete(conversationId);
+      else next.add(conversationId);
+      return next;
+    });
+  }, []);
+  const pageIds = pageConversations.map((conversation) => conversation.id);
+  const allOnPageSelected = pageIds.length > 0 && pageIds.every((id) => selectedIds.has(id));
+  const toggleSelectAllOnPage = useCallback7(() => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (allOnPageSelected) pageIds.forEach((id) => next.delete(id));
+      else pageIds.forEach((id) => next.add(id));
+      return next;
+    });
+  }, [allOnPageSelected, pageIds]);
+  const runOnSelection = useCallback7(
+    async (action) => {
+      setBusy(true);
+      try {
+        await Promise.all([...selectedIds].map(action));
+        setSelectedIds(/* @__PURE__ */ new Set());
+        await refetch();
+      } finally {
+        setBusy(false);
+      }
+    },
+    [selectedIds, refetch]
+  );
+  const runConversationAction = useCallback7(
+    async (action, conversationId) => {
+      if (!action) return;
+      setBusy(true);
+      try {
+        await action(conversationId);
+        await refetch();
+      } finally {
+        setBusy(false);
+      }
+    },
+    [refetch]
+  );
+  return {
+    conversations,
+    pageConversations,
+    selectedConversation: conversations.find((conversation) => conversation.id === selectedId),
+    loading,
+    now,
+    totalCount: conversations.length,
+    unreadCount: conversations.reduce((total2, conversation) => total2 + conversation.unread, 0),
+    waitingCount: conversations.filter((conversation) => conversation.waitingHuman).length,
+    filteredCount: totalForPaging,
+    expiredSelectedCount: conversations.filter(
+      (conversation) => selectedIds.has(conversation.id) && isWindowBlocking(windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel }))
+    ).length,
+    page: currentPage,
+    pageCount,
+    firstOnPage: (currentPage - 1) * perPage + 1,
+    lastOnPage: Math.min(currentPage * perPage, totalForPaging),
+    selectedId,
+    selectedIds,
+    allOnPageSelected,
+    waitingOnly,
+    windowFilter,
+    channelFilter,
+    channelFilters: channelFiltersFor(conversations),
+    search,
+    busy,
+    loadFailure: error ? describeFailure(error) : void 0,
+    canTakeover: Boolean(api.takeover),
+    canFinalize: Boolean(api.finalize),
+    canListTemplates: Boolean(api.listTemplates),
+    canMarkAllRead: Boolean(api.markAllRead),
+    refetch,
+    selectConversation: setSelectedId,
+    clearSelection: () => setSelectedId(void 0),
+    toggleSelected,
+    toggleSelectAllOnPage,
+    clearBulkSelection: () => setSelectedIds(/* @__PURE__ */ new Set()),
+    setWaitingOnly,
+    setWindowFilter,
+    setChannelFilter,
+    setSearch,
+    goToPage: setPage,
+    markSelectedAsRead: () => runOnSelection((conversationId) => api.markRead(conversationId)),
+    markAllAsRead: async () => {
+      if (!api.markAllRead) return;
+      setBusy(true);
+      try {
+        await api.markAllRead();
+        await refetch();
+      } finally {
+        setBusy(false);
+      }
+    },
+    takeover: (conversationId) => runConversationAction(api.takeover, conversationId),
+    releaseToBot: (conversationId) => runConversationAction(api.release, conversationId),
+    finalize: (conversationId) => runConversationAction(api.finalize, conversationId),
+    finalizeSelected: () => runOnSelection(async (conversationId) => {
+      await api.finalize?.(conversationId);
+    }),
+    sendTemplateToSelected: (templateName) => runOnSelection(async (conversationId) => {
+      await api.sendTemplate(conversationId, templateName ? { templateName } : {});
+    })
+  };
+}
+
+// src/workspace/ConversationsWorkspace.tsx
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+function ConversationsWorkspace({
+  labels: labelsOverride,
+  filters,
+  perPage,
+  markReadOnOpen,
+  serverPaginated,
+  initialConversationId,
+  initialWhatsappNumber,
+  simulator,
+  quickReplies,
+  quickReplyVariablesFor,
+  flowLabelOf,
+  onDownload,
+  requireTakeoverToReply,
+  messageSelection,
+  initialComposerText,
+  contextEntriesOf,
+  onAttach,
+  extraUtilitiesFor,
+  renderFilters,
+  renderBulkActions,
+  renderRow,
+  renderAboveTranscript,
+  renderHeaderActions,
+  onSendTemplateToSelected,
+  signInHref,
+  className
+}) {
+  const labels = { ...DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, ...labelsOverride };
+  const inbox = useConversationsInbox({
+    ...filters ? { filters } : {},
+    ...perPage ? { perPage } : {},
+    ...markReadOnOpen === void 0 ? {} : { markReadOnOpen },
+    ...serverPaginated ? { serverPaginated } : {}
+  });
+  const [simulatorOpen, setSimulatorOpen] = useState14(false);
+  const [templateModalOpen, setTemplateModalOpen] = useState14(false);
+  const [openedFromLink, setOpenedFromLink] = useState14(void 0);
+  useEffect10(() => {
+    const link = initialConversationId ?? initialWhatsappNumber;
+    if (!link || openedFromLink === link) return;
+    const target = inbox.conversations.find(
+      (conversation) => conversation.id === initialConversationId || conversation.whatsappNumber === initialWhatsappNumber
+    );
+    if (!target) return;
+    inbox.selectConversation(target.id);
+    setOpenedFromLink(link);
+  }, [initialConversationId, initialWhatsappNumber, openedFromLink, inbox]);
+  const selected = inbox.selectedConversation;
+  const simulatorEnabled = Boolean(simulator && (simulator.enabled ?? true));
+  const showSimulator = simulatorEnabled && simulatorOpen && Boolean(selected);
+  const paneUtilities = useMemo5(() => {
+    if (!selected) return void 0;
+    const fromProduct = extraUtilitiesFor?.(selected) ?? [];
+    if (!simulatorEnabled) return fromProduct;
+    return [
+      ...fromProduct,
+      {
+        key: "simulator",
+        icon: simulator?.icon ?? "\u{1F9EA}",
+        label: simulator?.label ?? "Simular cliente",
+        active: simulatorOpen,
+        run: () => setSimulatorOpen((open) => !open)
+      }
+    ];
+  }, [selected, extraUtilitiesFor, simulatorEnabled, simulator, simulatorOpen]);
+  return /* @__PURE__ */ jsxs22("div", { className: `cv-workspace${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs22("header", { className: "cv-workspace-header", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "cv-workspace-header__titles", children: [
+        /* @__PURE__ */ jsx24("h1", { children: labels.title }),
+        /* @__PURE__ */ jsxs22("p", { children: [
+          /* @__PURE__ */ jsxs22("span", { title: labels.conversations, children: [
+            "\u{1F4AC} ",
+            inbox.totalCount,
+            /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+              " ",
+              labels.conversations
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs22("span", { title: labels.waiting, className: "cv-workspace-header__waiting", children: [
+            "\u23F3 ",
+            inbox.waitingCount,
+            /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+              " ",
+              labels.waiting
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs22("span", { title: labels.unread, children: [
+            "\u2709\uFE0F ",
+            inbox.unreadCount,
+            /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+              " ",
+              labels.unread
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs22("div", { className: "cv-workspace-header__actions", children: [
+        /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            type: "button",
+            onClick: () => inbox.setWaitingOnly(!inbox.waitingOnly),
+            "aria-pressed": inbox.waitingOnly,
+            title: labels.waitingOnly,
+            className: inbox.waitingOnly ? "cv-workspace-toggle cv-workspace-toggle--on" : "cv-workspace-toggle",
+            children: [
+              "\u23F3",
+              /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+                " ",
+                labels.waitingOnly
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            type: "button",
+            onClick: () => void inbox.markSelectedAsRead(),
+            disabled: inbox.selectedIds.size === 0 || inbox.busy,
+            title: labels.markSelectedAsRead,
+            "aria-label": labels.markSelectedAsRead,
+            className: "cv-workspace-toggle",
+            children: [
+              "\u2713",
+              /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+                " ",
+                labels.markSelectedAsRead
+              ] }),
+              inbox.selectedIds.size > 0 ? ` (${inbox.selectedIds.size})` : ""
+            ]
+          }
+        ),
+        inbox.canMarkAllRead && inbox.unreadCount > 0 ? /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            type: "button",
+            onClick: () => void inbox.markAllAsRead(),
+            disabled: inbox.busy,
+            title: labels.markAllAsRead,
+            className: "cv-workspace-toggle",
+            children: [
+              "\u2713\u2713",
+              /* @__PURE__ */ jsxs22("span", { className: "cv-only-wide", children: [
+                " ",
+                labels.markAllAsRead
+              ] })
+            ]
+          }
+        ) : null,
+        renderHeaderActions?.(inbox)
+      ] })
+    ] }),
+    inbox.loadFailure ? /* @__PURE__ */ jsxs22("p", { role: "alert", className: "cv-workspace-failure", children: [
+      inbox.loadFailure,
+      signInHref ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+        " ",
+        /* @__PURE__ */ jsx24("a", { href: signInHref, className: "cv-workspace-failure__link", children: labels.signIn })
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        className: `cv-workspace-grid${showSimulator ? " cv-workspace-grid--with-simulator" : ""}`,
+        "data-detail": selected ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ jsx24(
+            ConversationsInboxList,
+            {
+              inbox,
+              labels,
+              className: "cv-workspace-list",
+              ...renderFilters ? { renderFilters } : {},
+              ...renderBulkActions ? { renderBulkActions } : {},
+              ...renderRow ? { renderRow } : {},
+              ...onSendTemplateToSelected ? { onSendTemplateToSelected: () => onSendTemplateToSelected(inbox) } : inbox.canListTemplates ? { onSendTemplateToSelected: () => setTemplateModalOpen(true) } : {}
+            }
+          ),
+          /* @__PURE__ */ jsx24("section", { className: "cv-workspace-detail", children: selected ? /* @__PURE__ */ jsx24(
+            ConversationPane,
+            {
+              conversation: selected,
+              now: inbox.now,
+              busy: inbox.busy,
+              labels,
+              ...inbox.canTakeover ? { onTakeover: () => void inbox.takeover(selected.id) } : {},
+              ...inbox.canTakeover ? { onReturnToBot: () => void inbox.releaseToBot(selected.id) } : {},
+              ...inbox.canFinalize ? { onFinish: () => void inbox.finalize(selected.id) } : {},
+              ...flowLabelOf ? { flowLabel: flowLabelOf(selected) } : {},
+              ...onDownload ? { onDownload: () => onDownload(selected) } : {},
+              ...requireTakeoverToReply ? { requireTakeoverToReply } : {},
+              ...messageSelection ? { messageSelection } : {},
+              ...initialComposerText ? { initialComposerText } : {},
+              onBack: inbox.clearSelection,
+              ...paneUtilities ? { extraUtilities: paneUtilities } : {},
+              ...contextEntriesOf ? { contextEntriesOf } : {},
+              ...quickReplies ? { quickReplies } : {},
+              ...quickReplyVariablesFor ? { quickReplyVariablesFor } : {},
+              ...renderAboveTranscript ? { renderAboveTranscript } : {},
+              ...onAttach ? { onAttach: (file) => onAttach(selected, file) } : {}
+            }
+          ) : /* @__PURE__ */ jsx24("p", { className: "cv-workspace-empty", children: labels.emptyDetail }) }),
+          showSimulator && selected ? (
+            // `min-height:0` junto do `min-width:0`: sem isso a linha do grid cresce com o conteúdo do
+            // painel, o scroll interno nunca ativa e quem rola passa a ser a página inteira.
+            /* @__PURE__ */ jsx24("div", { className: "cv-workspace-simulator", children: simulator?.render({ conversationId: selected.id, close: () => setSimulatorOpen(false) }) })
+          ) : null
+        ]
+      }
+    ),
+    templateModalOpen ? /* @__PURE__ */ jsx24(
+      BulkTemplateModal,
+      {
+        labels,
+        expiredCount: inbox.expiredSelectedCount,
+        sending: inbox.busy,
+        onClose: () => setTemplateModalOpen(false),
+        onSend: (templateName) => {
+          void inbox.sendTemplateToSelected(templateName).then(() => setTemplateModalOpen(false));
+        }
+      }
+    ) : null
+  ] });
+}
 export {
   AudioPlayer,
   AudioRecorderButton,
@@ -2594,6 +3442,7 @@ export {
   CHANNEL_BRAND_COLOR,
   CHANNEL_CAPABILITIES,
   CHANNEL_FILTER_ALL,
+  CONVERSATIONS_PER_PAGE,
   CONVERSATION_CHANNEL,
   CONVERSATION_WINDOW,
   ChannelIcon,
@@ -2602,12 +3451,16 @@ export {
   ConversationHeader,
   ConversationListItem,
   ConversationLocalesProvider,
+  ConversationPane,
   ConversationRow,
   ConversationWallpaper,
+  ConversationsInboxList,
   ConversationsProvider,
+  ConversationsWorkspace,
   DEFAULT_ACCEPTED_FILE_TYPES,
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DEFAULT_AVATAR_LABELS,
+  DEFAULT_CONVERSATIONS_WORKSPACE_LABELS,
   DEFAULT_CONVERSATION_CHANNEL,
   DEFAULT_CONVERSATION_CONTEXT_LABELS,
   DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
@@ -2685,6 +3538,7 @@ export {
   useConversationMessages,
   useConversationRealtime,
   useConversations,
+  useConversationsInbox,
   useDarkMode,
   useGlobalRealtime,
   useInboxActions,