@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/src/conversationTranscript.ts

@@ -33,16 +33,41 @@ export function buildTranscriptText(params: BuildTranscriptTextParams): string {
   ]
 
   const lines = params.messages.map((message) => {
-    const stamp = new Date(message.timestamp).toLocaleString('pt-BR')
     const author = message.agentName ?? SENDER_LABEL[message.sender]
-    // Mídia sem legenda não tem texto nenhum; marcar o tipo evita uma linha vazia sem explicação.
-    const body = message.content ?? message.caption ?? `<${message.type}>`
-    return `[${stamp}] ${author}: ${body}`
+    return `[${formatStamp(message.timestamp)}] ${author}: ${bodyOf(message)}`
   })
 
   return [...header, ...lines].join('\n')
 }
 
+/**
+ * Corpo da linha no arquivo.
+ *
+ * Áudio transcrito entra com o TEXTO, não como `<audio>`. Quem baixa a conversa quer lê-la, e um
+ * histórico onde o pedido do cliente aparece como marcador vazio é inútil justamente para o caso que
+ * motiva o download: auditoria e repasse. O prefixo `[áudio]` fica na frente para a linha não passar
+ * por mensagem digitada — quem audita precisa saber que aquilo foi falado e transcrito por máquina.
+ */
+function bodyOf(message: MessagePayload): string {
+  const transcript = message.transcription?.text?.trim()
+  if (message.type === 'audio' && transcript) return `[áudio] ${transcript}`
+
+  // Mídia sem legenda não tem texto nenhum; marcar o tipo evita uma linha vazia sem explicação.
+  return message.content ?? message.caption ?? `<${message.type}>`
+}
+
+/**
+ * `Invalid Date` no arquivo é pior do que data ausente: parece dado corrompido e põe em dúvida o
+ * resto do transcript. E acontece de verdade — a rota de export do módulo devolve `createdAt`, não
+ * `sentAt`, então quem mapeia esperando `sentAt` recebe `undefined` aqui.
+ */
+function formatStamp(timestamp: string | undefined): string {
+  if (!timestamp) return 'data indisponível'
+
+  const parsed = new Date(timestamp)
+  return Number.isNaN(parsed.getTime()) ? 'data indisponível' : parsed.toLocaleString('pt-BR')
+}
+
 export function buildTranscriptFilename(whatsappNumber: string, generatedAt: Date): string {
   const stamp = generatedAt.toISOString().slice(0, 10)
   return `conversa-${whatsappNumber}-${stamp}.txt`

package/src/conversationWindow.ts

@@ -22,12 +22,14 @@ export const CONVERSATION_WINDOW = {
 } as const
 export type ConversationWindow = (typeof CONVERSATION_WINDOW)[keyof typeof CONVERSATION_WINDOW]
 
+// O tom pinta o próprio chip, em vez de uma bolinha ao lado do rótulo: a bolinha somava ~14px por
+// filtro e era o que fazia a fila de cinco quebrar em duas linhas na coluna da lista.
 export const WINDOW_FILTERS = [
-  { value: CONVERSATION_WINDOW.ALL, label: 'Todas', dotClass: '' },
-  { value: CONVERSATION_WINDOW.FRESH, label: '<12h', dotClass: 'bg-green-500' },
-  { value: CONVERSATION_WINDOW.WARNING, label: '12-21h', dotClass: 'bg-yellow-500' },
-  { value: CONVERSATION_WINDOW.CRITICAL, label: '21-24h', dotClass: 'bg-red-500' },
-  { value: CONVERSATION_WINDOW.EXPIRED, label: '>24h', dotClass: 'bg-gray-400' },
+  { value: CONVERSATION_WINDOW.ALL, label: 'Todas', tone: '' },
+  { value: CONVERSATION_WINDOW.FRESH, label: '<12h', tone: 'fresh' },
+  { value: CONVERSATION_WINDOW.WARNING, label: '12-21h', tone: 'warning' },
+  { value: CONVERSATION_WINDOW.CRITICAL, label: '21-24h', tone: 'critical' },
+  { value: CONVERSATION_WINDOW.EXPIRED, label: '>24h', tone: 'expired' },
 ] as const
 
 // Proporções da janela: 12h e 21h numa janela de 24h, mas expressas como fração para acompanharem

package/src/documentTypeLabel.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Guarda o rótulo de tipo da bolha de documento.
+ *
+ * O defeito que motivou: `mimeType.split('/')[1].toUpperCase()` transformava um `.docx` em
+ * `VND.OPENXMLFORMATS-OFFICEDOCUMENT.WORDPROCESSINGML.DOCUMENT` — 58 caracteres numa linha que não
+ * quebra, esticando a bolha até empurrar a coluna da conversa e estourar o layout de três painéis.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { documentTypeLabel } from './MediaRenderer'
+
+describe('documentTypeLabel', () => {
+  // O caso que quebrou a tela.
+  it('usa a extensão do arquivo em vez do subtipo gigante do Office', () => {
+    const rotulo = documentTypeLabel(
+      'contrato.docx',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+
+    expect(rotulo).toBe('DOCX')
+  })
+
+  it('serve para os tipos curtos também', () => {
+    expect(documentTypeLabel('nota-fiscal.pdf', 'application/pdf')).toBe('PDF')
+    expect(documentTypeLabel('lista.txt', 'text/plain')).toBe('TXT')
+  })
+
+  // Áudio e sticker chegam sem nome de arquivo: o rótulo vem do mimeType, ainda curto.
+  it('cai no sufixo do subtipo quando não há nome', () => {
+    expect(documentTypeLabel(undefined, 'application/vnd.ms-excel')).toBe('MS-EXCEL')
+    expect(documentTypeLabel(undefined, 'application/pdf')).toBe('PDF')
+  })
+
+  it('descarta parâmetro do mimeType', () => {
+    expect(documentTypeLabel(undefined, 'audio/ogg; codecs=opus')).toBe('OGG')
+  })
+
+  // Nome sem ponto não tem extensão — o id da mídia, por exemplo.
+  it('não confunde nome sem extensão com extensão', () => {
+    expect(documentTypeLabel('seed-media-03', 'application/zip')).toBe('ZIP')
+  })
+
+  it('tem rótulo para o caso sem nome e sem tipo', () => {
+    expect(documentTypeLabel()).toBe('FILE')
+  })
+
+  // Teto de tamanho: nenhum rótulo pode voltar a esticar a bolha.
+  it('nunca passa de 12 caracteres', () => {
+    const longo = documentTypeLabel(
+      undefined,
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    )
+
+    expect(longo.length).toBeLessThanOrEqual(12)
+  })
+})

package/src/documents/DocumentsWorkspace.tsx

@@ -0,0 +1,550 @@
+/**
+ * Tela completa de Documentos: a biblioteca de arquivos de TODAS as conversas, fora do atendimento.
+ *
+ * Distinta do `ConversationDocumentsPanel`, que parte de uma conversa aberta e vive dentro dela.
+ * Esta varre a empresa, e por isso mostra de qual conversa cada arquivo veio.
+ *
+ * É a tela inteira, não um punhado de peças: ordenação por coluna, filtros de seleção múltipla,
+ * recorte por data, seleção em lote, paginação e espelho na URL já vêm montados. Produto que
+ * remontasse isso à mão voltaria a divergir dos outros — foi o que aconteceu antes desta tela existir.
+ */
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { Download, Eye, MessageSquare, Trash2, Upload, X } from 'lucide-react'
+
+import { useConversations } from '../providers/ConversationsProvider'
+import { FileIcon } from '../FileIcon'
+import { documentTypeLabel } from '../MediaRenderer'
+import { cn } from '../lib/cn'
+import { formatDateTime, formatFileSize } from '../lib/format'
+import { formatPhone } from '../lib/phone'
+import {
+  BulkActionBar,
+  ListingPagination,
+  MultiSelectFilter,
+  SortableHead,
+  type FilterOption,
+  type SortDirection,
+} from '../listing'
+import { useDebouncedValue, useUrlArrayState, useUrlNumberState, useUrlStringState } from '../hooks/useUrlFilterState'
+import type { CompanyDocument } from '../providers/types'
+import { DEFAULT_DOCUMENTS_WORKSPACE_LABELS, type DocumentsWorkspaceLabels } from './labels'
+import { TooltipLayer } from '../Tooltip'
+
+const DEFAULT_PER_PAGE = 20
+const DEFAULT_PER_PAGE_OPTIONS = [10, 20, 50, 100] as const
+const DEFAULT_SORT_FIELD = 'linkedAt'
+
+export interface DocumentsWorkspaceClassNames {
+  root: string
+  header: string
+  filters: string
+  table: string
+  row: string
+  status: string
+}
+
+export interface DocumentsWorkspaceProps {
+  readonly perPage?: number
+  readonly perPageOptions?: readonly number[]
+  /** Abrir a conversa de origem. Ausente, o número aparece como texto e não como link. */
+  readonly onOpenConversation?: (conversationId: string) => void
+  /** Origens filtráveis. Ausente, usa o vocabulário padrão (`customer`, `agent`, `bot`). */
+  readonly sources?: readonly FilterOption[]
+  /** Categorias de arquivo. Lista vazia esconde o filtro — nem todo host classifica anexo. */
+  readonly categories?: readonly FilterOption[]
+  /** Recorte por data. Desligado quando o backend não sabe filtrar por período. */
+  readonly dateFilter?: boolean
+  /**
+   * Filtros do produto (cliente, unidade, campanha). Recebe os parâmetros extras atuais e devolve
+   * os controles; o que o produto guardar aqui viaja em `extra` para o `getAllDocuments`.
+   */
+  readonly renderFilters?: (context: DocumentsFiltersContext) => ReactNode
+  readonly labels?: Partial<DocumentsWorkspaceLabels>
+  readonly className?: string
+  readonly classNames?: Partial<DocumentsWorkspaceClassNames>
+  /** Espelhar filtros e paginação na URL. Desligado em preview, onde não há rota de verdade. */
+  readonly syncUrl?: boolean
+}
+
+export interface DocumentsFiltersContext {
+  readonly extra: Readonly<Record<string, string | number>>
+  readonly setExtra: (next: Readonly<Record<string, string | number>>) => void
+}
+
+export function DocumentsWorkspace({
+  perPage: initialPerPage = DEFAULT_PER_PAGE,
+  perPageOptions = DEFAULT_PER_PAGE_OPTIONS,
+  onOpenConversation,
+  sources,
+  categories,
+  dateFilter = true,
+  renderFilters,
+  labels: labelsOverride,
+  className,
+  classNames,
+  syncUrl = true,
+}: DocumentsWorkspaceProps) {
+  const labels = { ...DEFAULT_DOCUMENTS_WORKSPACE_LABELS, ...labelsOverride }
+  const context = useConversations()
+  const urlOptions = { enabled: syncUrl }
+
+  const [search, setSearch] = useUrlStringState('search', '', urlOptions)
+  const [source, setSource] = useUrlArrayState('source', urlOptions)
+  const [category, setCategory] = useUrlArrayState('fileCategory', urlOptions)
+  const [startDate, setStartDate] = useUrlStringState('startDate', '', urlOptions)
+  const [endDate, setEndDate] = useUrlStringState('endDate', '', urlOptions)
+  const [sortField, setSortField] = useUrlStringState('sortField', DEFAULT_SORT_FIELD, urlOptions)
+  const [sortDirection, setSortDirection] = useUrlStringState('sortDirection', 'desc', urlOptions)
+  const [page, setPage] = useUrlNumberState('page', 1, urlOptions)
+  const [perPage, setPerPage] = useUrlNumberState('limit', initialPerPage, urlOptions)
+  const [extra, setExtra] = useState<Readonly<Record<string, string | number>>>({})
+
+  const [documents, setDocuments] = useState<readonly CompanyDocument[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set())
+  const [reloadToken, setReloadToken] = useState(0)
+  const [busy, setBusy] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [uploadFailed, setUploadFailed] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const debouncedSearch = useDebouncedValue(search)
+  const fetchAll = context?.api.getAllDocuments
+  const removeDocument = context?.api.deleteDocument
+  const downloadArchive = context?.api.downloadDocumentsArchiveByIds
+  const uploadDocument = context?.api.uploadDocument
+  const extraKey = JSON.stringify(extra)
+
+  const sourceOptions = useMemo<readonly FilterOption[]>(
+    () => sources ?? Object.entries(labels.sourceLabels).map(([value, label]) => ({ value, label })),
+    [sources, labels.sourceLabels],
+  )
+  const categoryOptions = useMemo<readonly FilterOption[]>(
+    () => categories ?? Object.entries(labels.categoryLabels).map(([value, label]) => ({ value, label })),
+    [categories, labels.categoryLabels],
+  )
+
+  const hasFilters =
+    debouncedSearch !== '' ||
+    source.length > 0 ||
+    category.length > 0 ||
+    startDate !== '' ||
+    endDate !== '' ||
+    Object.keys(extra).length > 0
+
+  useEffect(() => {
+    if (!fetchAll) return
+    let active = true
+    setLoading(true)
+    setFailed(false)
+
+    void fetchAll({
+      search: debouncedSearch || undefined,
+      page,
+      limit: perPage,
+      sortField,
+      sortDirection: sortDirection === 'asc' ? 'asc' : 'desc',
+      ...(source.length > 0 ? { source: source.join(',') } : {}),
+      ...(category.length > 0 ? { fileCategory: category.join(',') } : {}),
+      ...(startDate ? { startDate } : {}),
+      ...(endDate ? { endDate } : {}),
+      ...(Object.keys(extra).length > 0 ? { extra } : {}),
+    })
+      .then((result) => {
+        // `active` evita que uma resposta antiga sobrescreva a nova: digitar rápido na busca dispara
+        // várias chamadas e a ordem de retorno não é garantida.
+        if (!active) return
+        setDocuments(result.documents)
+        setTotal(result.total)
+      })
+      .catch(() => {
+        if (active) setFailed(true)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+    // `extraKey` no lugar de `extra`: o objeto é remontado a cada render do host e a identidade
+    // sozinha dispararia a busca em loop.
+
+  }, [fetchAll, debouncedSearch, source, category, startDate, endDate, sortField, sortDirection, page, perPage, extraKey, reloadToken])
+
+  // Trocar de filtro mantendo a página 7 mostra "nenhum resultado" com dados existindo na página 1.
+  useEffect(() => {
+    setPage(1)
+    setSelectedIds(new Set())
+
+  }, [debouncedSearch, source, category, startDate, endDate, perPage, extraKey])
+
+  function toggleSort(field: string): void {
+    if (sortField === field) setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    else {
+      setSortField(field)
+      setSortDirection('asc')
+    }
+  }
+
+  function toggleRow(id: string): void {
+    const next = new Set(selectedIds)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    setSelectedIds(next)
+  }
+
+  const isAllSelected = documents.length > 0 && documents.every((document) => selectedIds.has(document.id))
+
+  function toggleAll(): void {
+    setSelectedIds(isAllSelected ? new Set() : new Set(documents.map((document) => document.id)))
+  }
+
+  function clearFilters(): void {
+    setSearch('')
+    setSource([])
+    setCategory([])
+    setStartDate('')
+    setEndDate('')
+    setExtra({})
+  }
+
+  async function handleOpen(uploadId: string, disposition: 'inline' | 'attachment'): Promise<void> {
+    const url = await context?.api.getDocumentUrl(uploadId, disposition)
+    if (url) window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  async function handleRemove(ids: readonly string[]): Promise<void> {
+    if (!removeDocument) return
+    setBusy(true)
+    try {
+      await Promise.all(ids.map((id) => removeDocument(id)))
+      setSelectedIds(new Set())
+      setReloadToken((token) => token + 1)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleUpload(file: File): Promise<void> {
+    if (!uploadDocument) return
+    setUploading(true)
+    setUploadFailed(false)
+    try {
+      await uploadDocument(file, Object.keys(extra).length > 0 ? extra : undefined)
+      setReloadToken((token) => token + 1)
+    } catch {
+      setUploadFailed(true)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  async function handleDownloadArchive(): Promise<void> {
+    if (!downloadArchive) return
+    setBusy(true)
+    try {
+      const blob = await downloadArchive(Array.from(selectedIds))
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = 'documentos.zip'
+      anchor.click()
+      URL.revokeObjectURL(url)
+      setSelectedIds(new Set())
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Host sem `getAllDocuments` não tem o que mostrar aqui — some, em vez de renderizar vazio para
+  // sempre e fazer parecer que a empresa não tem arquivo nenhum.
+  if (!fetchAll) return null
+
+  const direction: SortDirection = sortDirection === 'asc' ? 'asc' : 'desc'
+  const canSelect = Boolean(removeDocument ?? downloadArchive)
+
+  return (
+    <div className={cn('space-y-4', classNames?.root, className)}>
+      <TooltipLayer />
+      <header className={cn('space-y-0.5', classNames?.header)}>
+        <h2 className="text-lg font-semibold">{labels.title}</h2>
+        <p className="text-sm text-gray-500 dark:text-gray-400">{labels.subtitle(total)}</p>
+      </header>
+
+      <div className={cn('flex flex-wrap items-center gap-2', classNames?.filters)}>
+        <input
+          type="search"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder={labels.searchPlaceholder}
+          aria-label={labels.searchPlaceholder}
+          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
+        />
+
+        <MultiSelectFilter label={labels.sourceFilter} options={sourceOptions} selected={source} onChange={setSource} />
+
+        {categoryOptions.length > 0 ? (
+          <MultiSelectFilter
+            label={labels.categoryFilter}
+            options={categoryOptions}
+            selected={category}
+            onChange={setCategory}
+          />
+        ) : null}
+
+        {dateFilter ? (
+          <>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(event) => setStartDate(event.target.value)}
+              aria-label={labels.startDate}
+              className="rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+            />
+            <input
+              type="date"
+              value={endDate}
+              onChange={(event) => setEndDate(event.target.value)}
+              aria-label={labels.endDate}
+              className="rounded-md border border-gray-300 px-2 py-2 text-xs dark:border-gray-700 dark:bg-gray-900"
+            />
+          </>
+        ) : null}
+
+        {renderFilters?.({ extra, setExtra })}
+
+        {hasFilters ? (
+          <button data-cv-tooltip={labels.clearFilters} aria-label={labels.clearFilters} type="button" onClick={clearFilters} className="cv-header-action inline-flex items-center gap-1">
+            <X size={12} aria-hidden="true" />
+            {labels.clearFilters}
+          </button>
+        ) : null}
+
+        {uploadDocument ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              hidden
+              onChange={(event) => {
+                const file = event.target.files?.[0]
+                event.target.value = ''
+                if (file) void handleUpload(file)
+              }}
+            />
+            <button
+              data-cv-tooltip={labels.upload}
+              aria-label={labels.upload}
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+              className="cv-header-action ml-auto inline-flex items-center gap-1 disabled:opacity-40"
+            >
+              <Upload size={12} aria-hidden="true" />
+              {labels.upload}
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      {uploadFailed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.uploadError}
+        </p>
+      ) : null}
+
+      {canSelect ? (
+        <BulkActionBar
+          selectedCount={selectedIds.size}
+          selectedLabel={labels.bulkSelected}
+          clearLabel={labels.bulkClear}
+          onClear={() => setSelectedIds(new Set())}
+        >
+          {downloadArchive ? (
+            <button
+              data-cv-tooltip={labels.bulkDownloadZip} aria-label={labels.bulkDownloadZip}
+              type="button"
+              onClick={() => void handleDownloadArchive()}
+              disabled={busy}
+              className="cv-header-action inline-flex items-center gap-1 disabled:opacity-40"
+            >
+              <Download size={12} aria-hidden="true" />
+              {labels.bulkDownloadZip}
+            </button>
+          ) : null}
+          {removeDocument ? (
+            <button
+              data-cv-tooltip={labels.bulkRemove(selectedIds.size)} aria-label={labels.bulkRemove(selectedIds.size)}
+              type="button"
+              onClick={() => {
+                if (window.confirm(labels.bulkRemoveConfirm(selectedIds.size))) void handleRemove(Array.from(selectedIds))
+              }}
+              disabled={busy}
+              className="cv-header-action cv-header-action--danger inline-flex items-center gap-1 disabled:opacity-40"
+            >
+              <Trash2 size={12} aria-hidden="true" />
+              {labels.bulkRemove(selectedIds.size)}
+            </button>
+          ) : null}
+        </BulkActionBar>
+      ) : null}
+
+      {loading ? <p className={cn('text-sm text-gray-500', classNames?.status)}>{labels.loading}</p> : null}
+      {failed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.failure}
+        </p>
+      ) : null}
+
+      <div className={cn('cv-table-card', classNames?.table)}>
+        <table className="cv-table">
+          <thead>
+            <tr>
+              {canSelect ? (
+                <th scope="col" className="w-10 px-3 py-2">
+                  <input
+                    type="checkbox"
+                    checked={isAllSelected}
+                    onChange={toggleAll}
+                    aria-label={labels.selectAllPage}
+                    className="cursor-pointer rounded border-gray-300 text-blue-600 dark:border-gray-600"
+                  />
+                </th>
+              ) : null}
+              <SortableHead label={labels.columnFilename} field="filename" activeField={sortField} direction={direction} onSort={toggleSort} />
+              <SortableHead label={labels.columnContact} field="conversationId" activeField={sortField} direction={direction} onSort={toggleSort} className="hidden sm:table-cell" />
+              <SortableHead label={labels.columnType} field="mimeType" activeField={sortField} direction={direction} onSort={toggleSort} className="hidden md:table-cell" />
+              <SortableHead label={labels.columnSize} field="sizeBytes" activeField={sortField} direction={direction} onSort={toggleSort} className="hidden lg:table-cell" />
+              <SortableHead label={labels.columnSource} field="source" activeField={sortField} direction={direction} onSort={toggleSort} className="hidden lg:table-cell" />
+              <SortableHead label={labels.columnDate} field="linkedAt" activeField={sortField} direction={direction} onSort={toggleSort} className="hidden xl:table-cell" />
+              <th scope="col" className="px-3 py-2 text-left text-xs font-medium">
+                {labels.columnActions}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {documents.map((document) => (
+              <tr key={`${document.conversationId}:${document.id}`} className={classNames?.row}>
+                {canSelect ? (
+                  <td className="w-10 px-3 py-2">
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(document.id)}
+                      onChange={() => toggleRow(document.id)}
+                      aria-label={`${labels.selectRow}: ${document.filename}`}
+                      className="cursor-pointer rounded border-gray-300 text-blue-600 dark:border-gray-600"
+                    />
+                  </td>
+                ) : null}
+
+                <td className="max-w-xs px-3 py-2">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <FileIcon filename={document.filename} mimeType={document.mimeType} />
+                    <span className="truncate font-medium" data-cv-tooltip={document.filename}>
+                      {document.filename}
+                    </span>
+                  </div>
+                </td>
+
+                {/* A conversa de origem é o dado que só esta tela tem. Vira botão quando o host sabe
+                    navegar; sem handler, fica texto — link que não leva a lugar nenhum é pior. */}
+                <td className="hidden px-3 py-2 sm:table-cell">
+                  {onOpenConversation ? (
+                    <button
+                      type="button"
+                      onClick={() => onOpenConversation(document.conversationId)}
+                      data-cv-tooltip={labels.openConversation} aria-label={labels.openConversation}
+                      className="cv-header-action inline-flex items-center gap-1"
+                    >
+                      <MessageSquare size={12} aria-hidden="true" />
+                      {document.contactName ?? formatPhone(document.conversationId)}
+                    </button>
+                  ) : (
+                    <span className="text-xs text-gray-500">{document.contactName ?? formatPhone(document.conversationId)}</span>
+                  )}
+                </td>
+
+                {/* O tipo curto, não o MIME cru: `.docx` responde
+                    `application/vnd.openxmlformats-officedocument.wordprocessingml.document`, que numa
+                    célula sem quebra esticava a coluna a 556px e espremia todas as outras. O MIME
+                    inteiro continua na dica. */}
+                <td className="hidden px-3 py-2 md:table-cell" data-cv-tooltip={document.mimeType}>
+                  <span className="cv-type-tag">{documentTypeLabel(document.filename, document.mimeType)}</span>
+                </td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell">{formatFileSize(document.sizeBytes)}</td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs lg:table-cell">
+                  {labels.sourceLabels[document.source] ?? document.source}
+                </td>
+                <td className="hidden whitespace-nowrap px-3 py-2 text-xs xl:table-cell">{formatDateTime(document.linkedAt)}</td>
+
+                <td className="px-3 py-2">
+                  <div className="flex gap-1">
+                    <button
+                      type="button"
+                      onClick={() => void handleOpen(document.id, 'inline')}
+                      data-cv-tooltip={labels.view}
+                      aria-label={`${labels.view}: ${document.filename}`}
+                      className="cv-header-icon"
+                    >
+                      <Eye size={14} />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => void handleOpen(document.id, 'attachment')}
+                      data-cv-tooltip={labels.download}
+                      aria-label={`${labels.download}: ${document.filename}`}
+                      className="cv-header-icon"
+                    >
+                      <Download size={14} />
+                    </button>
+                    {removeDocument ? (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (window.confirm(labels.removeConfirm(document.filename))) void handleRemove([document.id])
+                        }}
+                        disabled={busy}
+                        data-cv-tooltip={labels.remove}
+                        aria-label={`${labels.remove}: ${document.filename}`}
+                        className="cv-header-icon disabled:opacity-40"
+                      >
+                        <Trash2 size={14} className="text-red-500" />
+                      </button>
+                    ) : null}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {!loading && documents.length === 0 ? (
+          <p className={cn('py-8 text-center text-sm text-gray-400', classNames?.status)}>
+            {hasFilters ? labels.noResults : labels.empty}
+          </p>
+        ) : null}
+      </div>
+
+      <ListingPagination
+        page={page}
+        total={total}
+        perPage={perPage}
+        perPageOptions={perPageOptions}
+        onPageChange={setPage}
+        onPerPageChange={setPerPage}
+        labels={{
+          show: labels.show,
+          perPage: labels.perPage,
+          total: labels.total,
+          page: labels.page,
+          previous: labels.previousPage,
+          next: labels.nextPage,
+        }}
+      />
+    </div>
+  )
+}

package/src/documents/index.ts

@@ -0,0 +1,8 @@
+export { DocumentsWorkspace } from './DocumentsWorkspace'
+export type {
+  DocumentsWorkspaceProps,
+  DocumentsWorkspaceClassNames,
+  DocumentsFiltersContext,
+} from './DocumentsWorkspace'
+export { DEFAULT_DOCUMENTS_WORKSPACE_LABELS } from './labels'
+export type { DocumentsWorkspaceLabels } from './labels'