@adatechnology/conversations-ui 0.1.1 → 0.2.0

package/src/quickReplies/useQuickReplyAttachmentUploads.ts

@@ -0,0 +1,159 @@
+/**
+ * Fila de upload de anexo do formulário de cadastro (QR-31/M1), extraída de
+ * `useQuickRepliesWorkspace`: até 3 uploads em voo por vez, progresso real por arquivo, e
+ * cancelamento de tudo ao trocar de registro (M2) sem `setState` órfão depois do unmount.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createUploadQueue } from './createUploadQueue'
+import { validateAttachmentFiles, type AttachmentFileRejection } from './quickReplyAttachmentUpload'
+import type { MaxAttachmentSizeBytes } from './quickReplyAttachments'
+import type { QuickReplyAttachment } from './quickReply.types'
+import type { QuickRepliesWorkspaceLabels } from './labels'
+
+/** Item em upload no formulário: estado local, nunca persistido — some ao terminar ou ser removido. */
+export type PendingAttachmentUpload = {
+  readonly localId: string
+  readonly file: File
+  readonly status: 'uploading' | 'error'
+  readonly progress: number
+  readonly error?: string
+}
+
+export type UseQuickReplyAttachmentUploadsParams = {
+  readonly upload?: (
+    file: File,
+    options?: { onProgress?: (fraction: number) => void; signal?: AbortSignal },
+  ) => Promise<QuickReplyAttachment>
+  readonly labels: QuickRepliesWorkspaceLabels
+  /** Sobrescreve o teto por tipo de arquivo. Ausente, usa `DEFAULT_MAX_ATTACHMENT_SIZE_BYTES`. */
+  readonly attachmentSizeLimits?: MaxAttachmentSizeBytes
+  /** Quantos anexos já confirmados (`editing.attachments.length`) — entra no teto de 10 (QR-31). */
+  readonly attachmentsCount: number
+  /** Onde o item entra assim que o upload resolve — o hook não sabe de `editing`, só devolve o resultado. */
+  readonly onUploaded: (attachment: QuickReplyAttachment) => void
+}
+
+export type UseQuickReplyAttachmentUploadsResult = {
+  readonly pendingUploads: readonly PendingAttachmentUpload[]
+  readonly attachmentRejections: readonly AttachmentFileRejection[]
+  readonly addAttachmentFiles: (files: FileList | readonly File[]) => void
+  readonly retryAttachmentUpload: (localId: string) => void
+  readonly cancelAttachmentUpload: (localId: string) => void
+  readonly dismissAttachmentRejections: () => void
+  /** Cancela todo upload em voo — trocar de registro sem isso deixaria um `fetch` órfão terminando
+   * sozinho e tentando atualizar um estado que já não existe mais. */
+  readonly abortAllUploads: () => void
+}
+
+/** Estado e orquestração do upload de anexo — sem saber de `editing`, só de arquivos e resultado. */
+export function useQuickReplyAttachmentUploads({
+  upload,
+  labels,
+  attachmentSizeLimits,
+  attachmentsCount,
+  onUploaded,
+}: UseQuickReplyAttachmentUploadsParams): UseQuickReplyAttachmentUploadsResult {
+  const [pendingUploads, setPendingUploads] = useState<readonly PendingAttachmentUpload[]>([])
+  const [attachmentRejections, setAttachmentRejections] = useState<readonly AttachmentFileRejection[]>([])
+  /** Fila compartilhada (M1): no máximo 3 uploads em voo ao mesmo tempo, somando o que
+   * `addAttachmentFiles` e `retryAttachmentUpload` enfileiram — nenhum dos dois abre janela própria. */
+  const uploadQueueRef = useRef(createUploadQueue(3))
+  /** M2: depois do unmount, nenhuma promessa de upload em voo pode chamar setState — só aborta. */
+  const isMountedRef = useRef(true)
+
+  useEffect(
+    () => () => {
+      isMountedRef.current = false
+      uploadQueueRef.current.abortAll()
+    },
+    [],
+  )
+
+  const abortAllUploads = useCallback(() => {
+    uploadQueueRef.current.abortAll()
+    setPendingUploads([])
+  }, [])
+
+  const dismissAttachmentRejections = useCallback(() => setAttachmentRejections([]), [])
+
+  const cancelAttachmentUpload = useCallback((localId: string) => {
+    uploadQueueRef.current.abort(localId)
+    setPendingUploads((current) => current.filter((item) => item.localId !== localId))
+  }, [])
+
+  const updatePendingUpload = useCallback((localId: string, patch: Partial<PendingAttachmentUpload>) => {
+    setPendingUploads((current) => current.map((item) => (item.localId === localId ? { ...item, ...patch } : item)))
+  }, [])
+
+  /** Sobe um arquivo já validado, através da fila compartilhada (M1): progresso real por
+   * `onProgress`, e o resultado vira `onUploaded` na ordem de chegada assim que a promessa
+   * resolve. Enfileira e retorna — quem chama não espera. */
+  const uploadOneFile = useCallback(
+    (localId: string, file: File) => {
+      if (!upload) return
+      uploadQueueRef.current.enqueue(localId, async (signal) => {
+        try {
+          const attachment = await upload(file, {
+            onProgress: (fraction) => {
+              if (isMountedRef.current) updatePendingUpload(localId, { progress: fraction })
+            },
+            signal,
+          })
+          if (!isMountedRef.current) return
+          onUploaded(attachment)
+          setPendingUploads((current) => current.filter((item) => item.localId !== localId))
+        } catch (caught: unknown) {
+          if (signal.aborted || !isMountedRef.current) return
+          updatePendingUpload(localId, {
+            status: 'error',
+            error: caught instanceof Error ? caught.message : labels.saveError,
+          })
+        }
+      })
+    },
+    [upload, updatePendingUpload, onUploaded, labels.saveError],
+  )
+
+  const retryAttachmentUpload = useCallback(
+    (localId: string) => {
+      const item = pendingUploads.find((pending) => pending.localId === localId)
+      if (!item) return
+      updatePendingUpload(localId, { status: 'uploading', progress: 0, error: undefined })
+      uploadOneFile(localId, item.file)
+    },
+    [pendingUploads, updatePendingUpload, uploadOneFile],
+  )
+
+  /** Valida (teto de 10, tamanho por tipo) ANTES de subir (QR-31) — só o aceito vira upload; o
+   * recusado fica em `attachmentRejections` para a tela explicar por quê, sem gastar rede nele. */
+  const addAttachmentFiles = useCallback(
+    (files: FileList | readonly File[]) => {
+      if (!upload) return
+      const currentCount = attachmentsCount + pendingUploads.length
+      const { accepted, rejected } = validateAttachmentFiles(Array.from(files), currentCount, attachmentSizeLimits)
+      setAttachmentRejections(rejected)
+      if (accepted.length === 0) return
+      const newItems: PendingAttachmentUpload[] = accepted.map((file) => ({
+        localId: `${file.name}-${file.size}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
+        file,
+        status: 'uploading',
+        progress: 0,
+      }))
+      setPendingUploads((current) => [...current, ...newItems])
+      // Até 3 em paralelo (QR-31), somando com retries em voo — a fila compartilhada decide (M1).
+      for (const item of newItems) uploadOneFile(item.localId, item.file)
+    },
+    [upload, attachmentsCount, pendingUploads.length, uploadOneFile, attachmentSizeLimits],
+  )
+
+  return {
+    pendingUploads,
+    attachmentRejections,
+    addAttachmentFiles,
+    retryAttachmentUpload,
+    cancelAttachmentUpload,
+    dismissAttachmentRejections,
+    abortAllUploads,
+  }
+}

package/src/styles.css

@@ -818,6 +818,93 @@
   border-color: rgb(51 65 85);
 }
 
+/* Item da fila com miniatura, estado de envio (QR-47) e saída com transição curta. */
+.cv-attachment-item {
+  max-width: 16rem;
+}
+.cv-attachment-item__thumbnail {
+  display: block;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background: rgb(226 232 240);
+}
+.dark .cv-attachment-item__thumbnail { background: rgb(51 65 85); }
+.cv-attachment-item__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
+.cv-attachment-item__info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+.cv-attachment-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.cv-attachment-item__meta { font-size: 0.6875rem; color: rgb(100 116 139); }
+.dark .cv-attachment-item__meta { color: rgb(148 163 184); }
+.cv-attachment-item--failed .cv-attachment-item__meta { color: rgb(220 38 38); }
+.dark .cv-attachment-item--failed .cv-attachment-item__meta { color: rgb(248 113 113); }
+.cv-attachment-item--sent .cv-attachment-item__meta { color: rgb(22 163 74); }
+.dark .cv-attachment-item--sent .cv-attachment-item__meta { color: rgb(74 222 128); }
+.cv-attachment-item--skipped .cv-attachment-item__meta { color: rgb(180 83 9); }
+.dark .cv-attachment-item--skipped .cv-attachment-item__meta { color: rgb(251 191 36); }
+.cv-attachment-item__retry {
+  flex: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-size: 0.6875rem;
+  text-decoration: underline;
+  color: rgb(37 99 235);
+  cursor: pointer;
+}
+.cv-attachment-item {
+  transition: opacity 200ms ease, transform 200ms ease;
+  opacity: 1;
+  transform: scale(1);
+}
+.cv-attachment-item--departing {
+  opacity: 0;
+  transform: scale(0.92);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-attachment-item { transition: none; }
+}
+
+/* Esqueleto de linha — usado no painel de mensagens prontas e na tabela de cadastro (QR-47): nunca
+   "Carregando…" solto, e o conteúdo nunca aparece de uma vez. */
+.cv-skeleton-line {
+  border-radius: 0.25rem;
+  background: linear-gradient(90deg, rgb(226 232 240) 25%, rgb(241 245 249) 50%, rgb(226 232 240) 75%);
+  background-size: 200% 100%;
+  animation: cv-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+.dark .cv-skeleton-line {
+  background: linear-gradient(90deg, rgb(51 65 85) 25%, rgb(71 85 105) 50%, rgb(51 65 85) 75%);
+  background-size: 200% 100%;
+}
+@keyframes cv-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-skeleton-line { animation: none; }
+}
+/* Larguras da linha de esqueleto da tabela de mensagens prontas: uma por coluna, porque colunas
+   diferentes leem melhor com proporções diferentes em vez de todas do mesmo tamanho. */
+.cv-skeleton-line--title { width: 70%; height: 0.75rem; }
+.cv-skeleton-line--shortcut { width: 50%; height: 0.75rem; }
+.cv-skeleton-line--body { width: 90%; height: 0.75rem; }
+
+/* Linha excluída sai com transição curta em vez de sumir de repente (QR-47). */
+.cv-row-departing {
+  transition: opacity 200ms ease;
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-row-departing { transition: none; }
+}
+
 /* Peças de listagem (documentos, mensagens): tabela com filtros, seleção em lote e paginação. */
 .cv-filter-count {
   display: inline-flex;

package/src/workspace/ConversationPane.tsx

@@ -5,7 +5,7 @@
  * última mensagem, outro engolia falha de anexo, outro não abria a biblioteca de arquivos.
  */
 
-import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 
 import { AudioRecorderButton } from '../AudioRecorderButton'
 import { ConversationContextPanel, type ConversationContextEntry } from '../ConversationContextPanel'
@@ -18,11 +18,7 @@ import { MessageComposer, applyQuickReplyVariables, type QuickReply } from '../M
 import { RichMessageComposer, type RichComposerVariable } from '../RichMessageComposer'
 import { WindowExpiredNotice, isWindowBlocking } from '../WindowExpiredNotice'
 import { windowOf } from '../conversationWindow'
-import {
-  buildTranscriptFilename,
-  buildTranscriptText,
-  downloadTextFile,
-} from '../conversationTranscript'
+import { buildTranscriptFilename, buildTranscriptText, downloadTextFile } from '../conversationTranscript'
 import { useConversationContext } from '../hooks/useConversationContext'
 import { useConversationMessages } from '../hooks/useConversationMessages'
 import { useConversationRealtime } from '../hooks/useConversationRealtime'
@@ -30,6 +26,15 @@ import { useScrollToLatestMessage } from '../hooks/useScrollToLatestMessage'
 import { useConversations } from '../providers/ConversationsProvider'
 import type { ConversationSummary } from '../providers/types'
 import type { ConversationsWorkspaceLabels } from './labels'
+import type {
+  ConversationVariable,
+  QueuedAttachment,
+  QuickReply as SavedQuickReply,
+} from '../quickReplies/quickReply.types'
+import { queuedAttachmentsFromQuickReply } from '../quickReplies/quickReplyAttachments'
+import { resolveConversationVariables } from '../quickReplies/resolveConversationVariables'
+import { QueuedAttachmentsList } from './QueuedAttachmentsList'
+import { useComposerQueue } from './useComposerQueue'
 
 export interface ConversationPaneProps {
   readonly conversation: ConversationSummary
@@ -49,6 +54,7 @@ export interface ConversationPaneProps {
    * Recebe o contexto junto porque o dado que interessa à variável (o nome que o bot perguntou,
    * por exemplo) vive no contexto do fluxo, não no resumo da listagem.
    */
+  /** @deprecated Use `conversationVariablesFor`, que alimenta os dois composers com uma lista só. */
   readonly quickReplyVariablesFor?: (
     conversation: ConversationSummary,
     context: Record<string, unknown> | undefined,
@@ -87,11 +93,22 @@ export interface ConversationPaneProps {
    * é menos coisa na tela.
    */
   readonly composer?: 'simple' | 'rich'
-  /** Valores que o operador insere sem digitar. Só o composer `rich` os oferece. */
+  /**
+   * Valores que o operador insere sem digitar. Só o composer `rich` os oferece.
+   * @deprecated Use `conversationVariablesFor`.
+   */
   readonly composerVariablesFor?: (
     conversation: ConversationSummary,
     context: Record<string, unknown> | undefined,
   ) => readonly RichComposerVariable[]
+  /**
+   * Dados da conversa que o texto pode citar, numa lista só. Presente, manda sobre
+   * `quickReplyVariablesFor` e `composerVariablesFor`.
+   */
+  readonly conversationVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => readonly ConversationVariable[]
   /**
    * Fila de anexos com legenda, como no WhatsApp: os arquivos escolhidos ficam visíveis acima da
    * barra e saem junto com o texto escrito. Ausente, o clipe manda cada arquivo na hora — o que
@@ -124,6 +141,7 @@ export function ConversationPane({
   onAttach,
   composer = 'simple',
   composerVariablesFor,
+  conversationVariablesFor,
   onSendAttachments,
   onRecordAudio,
 }: ConversationPaneProps) {
@@ -139,17 +157,51 @@ export function ConversationPane({
   const [sendFailure, setSendFailure] = useState<string | undefined>(undefined)
   const [selectedMessageIds, setSelectedMessageIds] = useState<ReadonlySet<string>>(new Set())
   const [draft, setDraft] = useState(initialComposerText ?? '')
-  const [queuedFiles, setQueuedFiles] = useState<readonly File[]>([])
-  const [isSendingDraft, setIsSendingDraft] = useState(false)
-  /** Ref, não estado: entre dois cliques seguidos o React ainda não teria repintado a trava. */
-  const sendInFlightRef = useRef(false)
 
-  // Trocar de conversa zera as duas coisas: seleção de mensagem e rascunho pertencem à thread, e
-  // levá-los adiante faria copiar o trecho errado ou responder ao cliente errado.
+  const {
+    queue,
+    enqueueAttachments,
+    attachmentStatus,
+    isSendingDraft,
+    handleRichSend,
+    removeQueuedAttachment,
+    retryQueuedAttachment,
+    retryingKeys,
+  } = useComposerQueue({
+    conversationId: conversation.id,
+    draft,
+    setDraft,
+    api,
+    labels: { sendFailure: labels.sendFailure, attachFailure: labels.attachFailure },
+    ...(onSendAttachments ? { onSendAttachments } : {}),
+    refetch,
+    setSendFailure,
+  })
+
+  /**
+   * Uma promessa por `uploadId`, nunca duas: sem o cache, cada render da lista de anexos disparava
+   * de novo a URL assinada do mesmo arquivo (M4) — a função abaixo é estável, mas o item pode
+   * remontar por causa do estado de envio.
+   */
+  const thumbnailUrlCacheRef = useRef(new Map<string, Promise<string>>())
+  const getQueuedAttachmentThumbnailUrl = useCallback(
+    (uploadId: string): Promise<string> => {
+      const cached = thumbnailUrlCacheRef.current.get(uploadId)
+      if (cached) return cached
+      const pending = api.getDocumentUrl(uploadId, 'inline')
+      thumbnailUrlCacheRef.current.set(uploadId, pending)
+      pending.catch(() => thumbnailUrlCacheRef.current.delete(uploadId))
+      return pending
+    },
+    [api],
+  )
+
+  // Trocar de conversa zera seleção de mensagem e rascunho — pertencem à thread, e levá-los adiante
+  // faria copiar o trecho errado ou responder ao cliente errado. A fila de anexos se reseta sozinha
+  // dentro de `useComposerQueue`, keyed pelo mesmo `conversation.id`.
   useEffect(() => {
     setSelectedMessageIds(new Set())
     setDraft(initialComposerText ?? '')
-    setQueuedFiles([])
   }, [conversation.id, initialComposerText])
 
   function toggleMessageSelected(messageId: string): void {
@@ -218,35 +270,6 @@ export function ConversationPane({
     await runSend(() => api.sendTemplate(conversation.id, {}), labels.sendFailure)
   }
 
-  /**
-   * O texto escrito é a legenda do anexo, não uma segunda mensagem: no WhatsApp a foto chega com a
-   * frase embaixo, e mandar as duas separadas invertia a ordem quando a mídia demorava a subir.
-   */
-  async function handleRichSend(): Promise<void> {
-    // O upload da mídia demora e não dá retorno na tela; sem esta trava o segundo clique — ou o
-    // Enter impaciente — mandava o mesmo arquivo outra vez.
-    if (sendInFlightRef.current) return
-    sendInFlightRef.current = true
-    setIsSendingDraft(true)
-    try {
-      if (onSendAttachments && queuedFiles.length > 0) {
-        const files = queuedFiles
-        const caption = draft
-        const didSend = await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
-        if (didSend) {
-          setQueuedFiles([])
-          setDraft('')
-        }
-        return
-      }
-      if (!draft.trim()) return
-      if (await handleSend(draft)) setDraft('')
-    } finally {
-      sendInFlightRef.current = false
-      setIsSendingDraft(false)
-    }
-  }
-
   async function handleAttach(file: File): Promise<void> {
     if (!onAttach) return
     await runSend(() => onAttach(file), labels.attachFailure)
@@ -264,7 +287,11 @@ export function ConversationPane({
   }
 
   const contextEntries = contextEntriesOf?.(conversationContext)
-  const composerVariables = composerVariablesFor?.(conversation, conversationContext)
+  const { quickReplyVariables, composerVariables } = resolveConversationVariables({
+    conversationVariables: conversationVariablesFor?.(conversation, conversationContext),
+    quickReplyVariables: quickReplyVariablesFor?.(conversation, conversationContext),
+    composerVariables: composerVariablesFor?.(conversation, conversationContext),
+  })
   /**
    * As mesmas `quickReplies` do composer simples, com as variáveis já resolvidas — o campo rico
    * recebe texto pronto. Uma segunda lista, só de formato diferente, é como as telas divergiam.
@@ -274,9 +301,29 @@ export function ConversationPane({
     label: reply.label,
     text:
       typeof reply.text === 'string'
-        ? applyQuickReplyVariables(reply.text, quickReplyVariablesFor?.(conversation, conversationContext) ?? {})
-        : reply.text(quickReplyVariablesFor?.(conversation, conversationContext) ?? {}),
+        ? applyQuickReplyVariables(reply.text, quickReplyVariables ?? {})
+        : reply.text(quickReplyVariables ?? {}),
   }))
+  /**
+   * Botão de raio e atalho `/` dos dois composers. `listQuickReplies` é a capacidade — sem ela na
+   * porta do host, nenhum dos dois aparece, em vez de um botão que abre uma lista sempre vazia.
+   */
+  const savedQuickReplies = api.listQuickReplies
+    ? {
+        // Arrow em vez de repassar o método direto: `api.listQuickReplies` solto perde o `this` do
+        // objeto que o implementa, e um cliente HTTP real costuma depender dele internamente.
+        listQuickReplies: (params?: { search?: string }) => api.listQuickReplies!(params),
+        conversationId: conversation.id,
+        variables: quickReplyVariables,
+        hasAttachmentsCapability: Boolean(api.sendStoredAttachments),
+        // Empurra os anexos da mensagem escolhida como itens guardados (QR-32) — sem a porta, a
+        // linha do picker já avisou e o texto entra sozinho, sem silenciosamente perder o anexo.
+        onSelect: (quickReply: SavedQuickReply) => {
+          const attachments = queuedAttachmentsFromQuickReply(quickReply, Boolean(api.sendStoredAttachments))
+          enqueueAttachments(attachments)
+        },
+      }
+    : undefined
   const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== 'human'
 
   return (
@@ -337,10 +384,20 @@ export function ConversationPane({
         <div className="cv-workspace-selection">
           <span>{labels.messagesSelected(selectedMessageIds.size)}</span>
           <div className="cv-workspace-selection__actions">
-            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={() => setSelectedMessageIds(new Set())}>
+            <button
+              data-cv-tooltip={labels.bulkClear}
+              aria-label={labels.bulkClear}
+              type="button"
+              onClick={() => setSelectedMessageIds(new Set())}
+            >
               {labels.bulkClear}
             </button>
-            <button data-cv-tooltip={labels.copySelected} aria-label={labels.copySelected} type="button" onClick={copySelectedMessages}>
+            <button
+              data-cv-tooltip={labels.copySelected}
+              aria-label={labels.copySelected}
+              type="button"
+              onClick={copySelectedMessages}
+            >
               {labels.copySelected}
             </button>
           </div>
@@ -354,10 +411,7 @@ export function ConversationPane({
       ) : null}
 
       {blocked ? (
-        <WindowExpiredNotice
-          disabled={busy}
-          onSendTemplate={() => void handleSendTemplate()}
-        />
+        <WindowExpiredNotice disabled={busy} onSendTemplate={() => void handleSendTemplate()} />
       ) : botOwnsConversation ? (
         // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
         <p className="cv-workspace-notice">{labels.takeoverToReply}</p>
@@ -367,7 +421,14 @@ export function ConversationPane({
           onChange={setDraft}
           onSend={() => void handleRichSend()}
           {...(onSendAttachments
-            ? { onAttachFiles: (files: FileList) => setQueuedFiles((current) => [...current, ...Array.from(files)]) }
+            ? {
+                onAttachFiles: (files: FileList) =>
+                  enqueueAttachments(
+                    Array.from(files).map(
+                      (file): QueuedAttachment => ({ kind: 'local', localId: crypto.randomUUID(), file }),
+                    ),
+                  ),
+              }
             : onAttach
               ? {
                   onAttachFiles: (files: FileList) => {
@@ -377,7 +438,7 @@ export function ConversationPane({
               : {})}
           placeholder={labels.composerPlaceholder}
           isSending={busy || isSendingDraft}
-          hasQueuedAttachments={queuedFiles.length > 0}
+          hasQueuedAttachments={queue.length > 0}
           {...(onRecordAudio
             ? {
                 idleAction: (
@@ -388,31 +449,33 @@ export function ConversationPane({
                 ),
               }
             : {})}
-          {...(queuedFiles.length > 0
+          {...(queue.length > 0
             ? {
                 attachmentsPreview: (
-                  <ul className="cv-workspace-attachments">
-                    {queuedFiles.map((file, index) => (
-                      <li key={`${file.name}-${index}`}>
-                        <span>{file.name}</span>
-                        <button
-                          data-cv-tooltip={labels.attachmentRemove}
-                          type="button"
-                          aria-label={labels.attachmentRemove}
-                          onClick={() =>
-                            setQueuedFiles((current) => current.filter((_, position) => position !== index))
-                          }
-                        >
-                          ✕
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
+                  <QueuedAttachmentsList
+                    items={queue}
+                    statusOf={(key) => attachmentStatus[key] ?? 'waiting'}
+                    onRemove={removeQueuedAttachment}
+                    onRetry={retryQueuedAttachment}
+                    retryingKeys={retryingKeys}
+                    getThumbnailUrl={getQueuedAttachmentThumbnailUrl}
+                    busy={isSendingDraft}
+                    labels={{
+                      remove: labels.attachmentRemove,
+                      waiting: labels.attachmentWaiting,
+                      sending: labels.attachmentSending,
+                      sent: labels.attachmentSent,
+                      failed: labels.attachmentFailed,
+                      skipped: labels.attachmentSkipped,
+                      retry: labels.attachmentRetry,
+                    }}
+                  />
                 ),
               }
             : {})}
           {...(richQuickReplies ? { quickReplies: [...richQuickReplies] } : {})}
           {...(composerVariables ? { variables: [...composerVariables] } : {})}
+          {...(savedQuickReplies ? { savedQuickReplies } : {})}
         />
       ) : (
         <MessageComposer
@@ -424,7 +487,8 @@ export function ConversationPane({
           {...(onAttach ? { onAttach: (file: File) => void handleAttach(file) } : {})}
           placeholder={labels.composerPlaceholder}
           {...(quickReplies ? { quickReplies } : {})}
-          {...(quickReplyVariablesFor ? { quickReplyVariables: quickReplyVariablesFor(conversation, conversationContext) } : {})}
+          {...(quickReplyVariables ? { quickReplyVariables } : {})}
+          {...(savedQuickReplies ? { savedQuickReplies } : {})}
         />
       )}
     </div>

package/src/workspace/ConversationsWorkspace.tsx

@@ -39,6 +39,7 @@ import { ConversationsInboxList } from './ConversationsInboxList'
 import { DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, type ConversationsWorkspaceLabels } from './labels'
 import { useConversationsInbox, type UseConversationsInboxResult } from './useConversationsInbox'
 import { TooltipLayer } from '../Tooltip'
+import type { ConversationVariable } from '../quickReplies/quickReply.types'
 
 export type SimulatorTransportParams = {
   readonly conversationId: string
@@ -98,6 +99,7 @@ export interface ConversationsWorkspaceProps {
   readonly initialWhatsappNumber?: string | undefined
   readonly simulator?: ConversationsWorkspaceSimulator
   readonly quickReplies?: readonly QuickReply[]
+  /** @deprecated Use `conversationVariablesFor`, que alimenta os dois composers com uma lista só. */
   readonly quickReplyVariablesFor?: (
     conversation: ConversationSummary,
     context: Record<string, unknown> | undefined,
@@ -114,11 +116,22 @@ export interface ConversationsWorkspaceProps {
   readonly initialComposerText?: string | undefined
   /** `rich` troca o campo simples pelo texto com a formatação do WhatsApp desenhada ao escrever. */
   readonly composer?: 'simple' | 'rich'
-  /** Valores que o operador insere sem digitar. Só o composer `rich` os oferece. */
+  /**
+   * Valores que o operador insere sem digitar. Só o composer `rich` os oferece.
+   * @deprecated Use `conversationVariablesFor`.
+   */
   readonly composerVariablesFor?: (
     conversation: ConversationSummary,
     context: Record<string, unknown> | undefined,
   ) => readonly RichComposerVariable[]
+  /**
+   * Dados da conversa que o texto pode citar, numa lista só. Presente, manda sobre
+   * `quickReplyVariablesFor` e `composerVariablesFor`.
+   */
+  readonly conversationVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => readonly ConversationVariable[]
   /** Fila de anexos com legenda, como no WhatsApp. Ausente, o clipe manda cada arquivo na hora. */
   readonly onSendAttachments?: (
     conversation: ConversationSummary,
@@ -162,6 +175,7 @@ export function ConversationsWorkspace({
   initialComposerText,
   composer,
   composerVariablesFor,
+  conversationVariablesFor,
   onSendAttachments,
   onRecordAudio,
   contextEntriesOf,
@@ -360,6 +374,7 @@ export function ConversationsWorkspace({
               {...(initialComposerText ? { initialComposerText } : {})}
               {...(composer ? { composer } : {})}
               {...(composerVariablesFor ? { composerVariablesFor } : {})}
+              {...(conversationVariablesFor ? { conversationVariablesFor } : {})}
               {...(onSendAttachments
                 ? {
                     onSendAttachments: (files: readonly File[], caption: string) =>

package/src/workspace/QueuedAttachmentsList.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'bun:test'
+
+import { departedItemsOf } from './QueuedAttachmentsList'
+import type { QueuedAttachment } from '../quickReplies/quickReply.types'
+
+function storedItem(uploadId: string): QueuedAttachment {
+  return { kind: 'stored', uploadId, filename: `${uploadId}.pdf`, mimeType: 'application/pdf', sizeBytes: 100 }
+}
+
+describe('departedItemsOf', () => {
+  it('não aponta saída quando a fila não muda', () => {
+    const items = [storedItem('a'), storedItem('b')]
+    expect(departedItemsOf(items, items)).toEqual([])
+  })
+
+  it('aponta só o item que saiu da fila', () => {
+    const previouslyRendered = [storedItem('a'), storedItem('b')]
+    const items = [storedItem('a')]
+    expect(departedItemsOf(previouslyRendered, items)).toEqual([storedItem('b')])
+  })
+
+  it('não aponta saída quando um item entra na fila', () => {
+    const previouslyRendered = [storedItem('a')]
+    const items = [storedItem('a'), storedItem('b')]
+    expect(departedItemsOf(previouslyRendered, items)).toEqual([])
+  })
+})