@adatechnology/conversations-ui 0.1.1 → 0.2.1

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([])
+  })
+})

package/src/workspace/QueuedAttachmentsList.tsx

@@ -0,0 +1,198 @@
+/**
+ * Fila de anexos do composer — itens `local` (ainda não subiram) e `stored` (mensagem pronta,
+ * enviados por referência). Mostra nome, tipo, tamanho, miniatura de imagem sob demanda e o estado
+ * de envio de cada item (QR-32, QR-33, QR-47).
+ */
+
+import { useEffect, useRef, useState } from 'react'
+
+import { formatFileSize } from '../lib/format'
+import { attachmentKey, type AttachmentSendStatus } from '../quickReplies/quickReplyAttachments'
+import type { QueuedAttachment } from '../quickReplies/quickReply.types'
+
+export type QueuedAttachmentsListLabels = {
+  readonly remove: string
+  readonly waiting: string
+  readonly sending: string
+  readonly sent: string
+  readonly failed: string
+  readonly skipped: string
+  readonly retry: string
+}
+
+export type QueuedAttachmentsListProps = {
+  readonly items: readonly QueuedAttachment[]
+  readonly statusOf: (key: string) => AttachmentSendStatus
+  readonly onRemove: (item: QueuedAttachment) => void
+  readonly onRetry?: (item: QueuedAttachment) => void
+  /** Chaves com retry avulso em voo — desabilita o botão "Tentar de novo" desse item específico. */
+  readonly retryingKeys?: ReadonlySet<string>
+  readonly getThumbnailUrl?: (uploadId: string) => Promise<string>
+  readonly labels: QueuedAttachmentsListLabels
+  readonly busy: boolean
+}
+
+function nameOf(item: QueuedAttachment): string {
+  return item.kind === 'local' ? item.file.name : item.filename
+}
+
+function mimeTypeOf(item: QueuedAttachment): string {
+  return item.kind === 'local' ? item.file.type : item.mimeType
+}
+
+function sizeOf(item: QueuedAttachment): number {
+  return item.kind === 'local' ? item.file.size : item.sizeBytes
+}
+
+/** Espaço reservado do tamanho final enquanto a miniatura carrega — sem pulo de layout (QR-47). */
+function AttachmentThumbnail({
+  item,
+  getThumbnailUrl,
+}: {
+  readonly item: QueuedAttachment
+  readonly getThumbnailUrl?: (uploadId: string) => Promise<string>
+}) {
+  const isImage = mimeTypeOf(item).startsWith('image/')
+  const [url, setUrl] = useState<string | undefined>(item.kind === 'local' ? undefined : item.previewUrl)
+  const localFile = item.kind === 'local' ? item.file : undefined
+  const uploadId = item.kind === 'stored' ? item.uploadId : undefined
+
+  // Só o `File` decide a URL de objeto local: incluir `item` inteiro (H4) recriava e revogava a URL
+  // a cada render em que a identidade do objeto da fila mudasse por outro motivo (status, por ex.).
+  useEffect(() => {
+    if (!isImage || !localFile) return
+    const objectUrl = URL.createObjectURL(localFile)
+    setUrl(objectUrl)
+    return () => URL.revokeObjectURL(objectUrl)
+  }, [isImage, localFile])
+
+  // `url` fica de fora do array por propósito: é este efeito que o define via `setUrl`, incluí-lo
+  // reexecutaria a busca a cada resolução. Só `uploadId` reinicia a busca da miniatura remota.
+  useEffect(() => {
+    if (!isImage || !uploadId || !getThumbnailUrl) return
+    let cancelled = false
+    getThumbnailUrl(uploadId)
+      .then((resolved) => {
+        if (!cancelled) setUrl(resolved)
+      })
+      .catch(() => undefined)
+    return () => {
+      cancelled = true
+    }
+  }, [isImage, uploadId, getThumbnailUrl])
+
+  if (!isImage) return null
+  return (
+    <span className="cv-attachment-item__thumbnail" aria-hidden="true">
+      {url ? <img src={url} alt="" /> : null}
+    </span>
+  )
+}
+
+/**
+ * Parte pura da transição: quais itens saíram da fila entre a última lista renderizada e a nova.
+ * Separada de `useDepartingItems` para ser testável sem montar um componente.
+ */
+export function departedItemsOf(
+  previouslyRendered: readonly QueuedAttachment[],
+  items: readonly QueuedAttachment[],
+): readonly QueuedAttachment[] {
+  const currentKeys = new Set(items.map(attachmentKey))
+  return previouslyRendered.filter((item) => !currentKeys.has(attachmentKey(item)))
+}
+
+/** Mantém o item visível por uma transição curta depois de sair da fila (QR-47), sem travar props. */
+function useDepartingItems(items: readonly QueuedAttachment[]) {
+  const [rendered, setRendered] = useState(items)
+  const [departingKeys, setDepartingKeys] = useState<ReadonlySet<string>>(new Set())
+  // Espelha `rendered` num ref lido dentro do efeito: assim o array de dependências fica completo
+  // (só `items`, que é o que deve reiniciar a transição) sem o efeito reagir à própria escrita em
+  // `rendered` via `setRendered`, o que recriaria o timer em loop.
+  const renderedRef = useRef(rendered)
+  renderedRef.current = rendered
+
+  useEffect(() => {
+    const removedItems = departedItemsOf(renderedRef.current, items)
+    if (removedItems.length === 0) {
+      setRendered(items)
+      return
+    }
+    setDepartingKeys(new Set(removedItems.map(attachmentKey)))
+    const reduceMotion =
+      typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+    const delay = reduceMotion ? 0 : 220
+    const timer = setTimeout(() => {
+      setRendered(items)
+      setDepartingKeys(new Set())
+    }, delay)
+    return () => clearTimeout(timer)
+  }, [items])
+
+  return { rendered: departingKeys.size > 0 ? [...rendered] : items, departingKeys }
+}
+
+export function QueuedAttachmentsList({
+  items,
+  statusOf,
+  onRemove,
+  onRetry,
+  retryingKeys,
+  getThumbnailUrl,
+  labels,
+  busy,
+}: QueuedAttachmentsListProps) {
+  const { rendered, departingKeys } = useDepartingItems(items)
+  if (rendered.length === 0) return null
+
+  const statusLabelOf = (status: AttachmentSendStatus): string => {
+    if (status === 'sending') return labels.sending
+    if (status === 'sent') return labels.sent
+    if (status === 'failed') return labels.failed
+    if (status === 'skipped') return labels.skipped
+    return labels.waiting
+  }
+
+  return (
+    <ul className="cv-workspace-attachments" aria-busy={busy} aria-live="polite">
+      {rendered.map((item) => {
+        const key = attachmentKey(item)
+        const status = statusOf(key)
+        const isDeparting = departingKeys.has(key)
+        return (
+          <li
+            key={key}
+            className={`cv-attachment-item cv-attachment-item--${status}${isDeparting ? ' cv-attachment-item--departing' : ''}`}
+          >
+            <AttachmentThumbnail item={item} getThumbnailUrl={getThumbnailUrl} />
+            <span className="cv-attachment-item__info">
+              <span className="cv-attachment-item__name">{nameOf(item)}</span>
+              <span className="cv-attachment-item__meta">
+                {formatFileSize(sizeOf(item))} · {statusLabelOf(status)}
+              </span>
+            </span>
+            {(status === 'failed' || status === 'skipped') && onRetry ? (
+              <button
+                type="button"
+                className="cv-attachment-item__retry"
+                disabled={busy || (retryingKeys?.has(key) ?? false)}
+                aria-busy={retryingKeys?.has(key) ?? false}
+                onClick={() => onRetry(item)}
+              >
+                {labels.retry}
+              </button>
+            ) : null}
+            <button
+              data-cv-tooltip={labels.remove}
+              type="button"
+              aria-label={labels.remove}
+              disabled={status === 'sending'}
+              onClick={() => onRemove(item)}
+            >
+              ✕
+            </button>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/workspace/index.ts

@@ -11,6 +11,7 @@ export { BulkTemplateModal } from './BulkTemplateModal'
 export type { BulkTemplateModalProps } from './BulkTemplateModal'
 export { ConversationsInboxList } from './ConversationsInboxList'
 export type { ConversationsInboxListProps } from './ConversationsInboxList'
+export { QueuedAttachmentsList } from './QueuedAttachmentsList'
 export { useConversationsInbox, CONVERSATIONS_PER_PAGE } from './useConversationsInbox'
 export type { UseConversationsInboxParams, UseConversationsInboxResult } from './useConversationsInbox'
 export { DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './labels'

package/src/workspace/labels.ts

@@ -36,6 +36,14 @@ export interface ConversationsWorkspaceLabels {
   readonly attachFailure: string
   /** Tira um arquivo da fila antes de enviar. */
   readonly attachmentRemove: string
+  /** Estado de cada item da fila durante o envio (QR-47). */
+  readonly attachmentWaiting: string
+  readonly attachmentSending: string
+  readonly attachmentSent: string
+  readonly attachmentFailed: string
+  /** Servidor parou antes de tentar este arquivo, por causa de uma falha anterior no mesmo lote. */
+  readonly attachmentSkipped: string
+  readonly attachmentRetry: string
   readonly recordFailure: string
   readonly sendFailure: string
   readonly takeoverToReply: string
@@ -76,6 +84,12 @@ export const DEFAULT_CONVERSATIONS_WORKSPACE_LABELS: ConversationsWorkspaceLabel
   composerPlaceholder: 'Responder como atendente…',
   attachFailure: 'Falha ao enviar o arquivo.',
   attachmentRemove: 'Remover anexo',
+  attachmentWaiting: 'Aguardando',
+  attachmentSending: 'Enviando…',
+  attachmentSent: 'Enviado ✓',
+  attachmentFailed: 'Falhou',
+  attachmentSkipped: 'Não enviado — aguardando o anterior',
+  attachmentRetry: 'Tentar de novo',
   recordFailure: 'Falha ao gravar o áudio.',
   sendFailure: 'Falha ao enviar a mensagem.',
   takeoverToReply: 'Assuma o atendimento para responder diretamente ao cliente.',