@adatechnology/conversations-ui 0.1.0-rc.27 → 0.1.0-rc.29

package/dist/index.js

@@ -57,7 +57,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-UZJBYD5O.js";
+} from "./chunk-GY472G6E.js";
 import {
   ZERO_WIDTH_SPACE,
   htmlToWA,
@@ -1869,8 +1869,8 @@ function isWindowBlocking(window2) {
 }
 
 // src/documents/DocumentsWorkspace.tsx
-import { useEffect as useEffect7, useMemo as useMemo2, useState as useState11 } from "react";
-import { Download as Download2, Eye, MessageSquare, Trash2, X as X3 } from "lucide-react";
+import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef5, useState as useState11 } from "react";
+import { Download as Download2, Eye, MessageSquare, Trash2, Upload, X as X3 } from "lucide-react";
 
 // src/listing/index.tsx
 import { useState as useState9 } from "react";
@@ -2092,6 +2092,8 @@ var DEFAULT_DOCUMENTS_WORKSPACE_LABELS = {
   bulkDownloadZip: "Baixar em zip",
   bulkRemove: (count) => `Excluir ${count}`,
   bulkRemoveConfirm: (count) => `Excluir ${count} arquivo${count === 1 ? "" : "s"}?`,
+  upload: "Enviar documento",
+  uploadError: "N\xE3o foi poss\xEDvel enviar o arquivo.",
   columnFilename: "Arquivo",
   columnContact: "Contato",
   columnType: "Tipo",
@@ -2147,10 +2149,14 @@ function DocumentsWorkspace({
   const [selectedIds, setSelectedIds] = useState11(/* @__PURE__ */ new Set());
   const [reloadToken, setReloadToken] = useState11(0);
   const [busy, setBusy] = useState11(false);
+  const [uploading, setUploading] = useState11(false);
+  const [uploadFailed, setUploadFailed] = useState11(false);
+  const fileInputRef = useRef5(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 = useMemo2(
     () => sources ?? Object.entries(labels.sourceLabels).map(([value, label]) => ({ value, label })),
@@ -2234,6 +2240,19 @@ function DocumentsWorkspace({
       setBusy(false);
     }
   }
+  async function handleUpload(file) {
+    if (!uploadDocument) return;
+    setUploading(true);
+    setUploadFailed(false);
+    try {
+      await uploadDocument(file, Object.keys(extra).length > 0 ? extra : void 0);
+      setReloadToken((token) => token + 1);
+    } catch {
+      setUploadFailed(true);
+    } finally {
+      setUploading(false);
+    }
+  }
   async function handleDownloadArchive() {
     if (!downloadArchive) return;
     setBusy(true);
@@ -2307,8 +2326,39 @@ function DocumentsWorkspace({
       hasFilters ? /* @__PURE__ */ jsxs14("button", { "data-cv-tooltip": labels.clearFilters, "aria-label": labels.clearFilters, type: "button", onClick: clearFilters, className: "cv-header-action inline-flex items-center gap-1", children: [
         /* @__PURE__ */ jsx16(X3, { size: 12, "aria-hidden": "true" }),
         labels.clearFilters
+      ] }) : null,
+      uploadDocument ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            hidden: true,
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              event.target.value = "";
+              if (file) void handleUpload(file);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs14(
+          "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",
+            children: [
+              /* @__PURE__ */ jsx16(Upload, { size: 12, "aria-hidden": "true" }),
+              labels.upload
+            ]
+          }
+        )
       ] }) : null
     ] }),
+    uploadFailed ? /* @__PURE__ */ jsx16("p", { role: "alert", className: cn("text-sm text-red-600 dark:text-red-400", classNames?.status), children: labels.uploadError }) : null,
     canSelect ? /* @__PURE__ */ jsxs14(
       BulkActionBar,
       {
@@ -2516,7 +2566,7 @@ function downloadTextFile(filename, content) {
 }
 
 // src/useWaitingNotifications.ts
-import { useState as useState12, useEffect as useEffect8, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { useState as useState12, useEffect as useEffect8, useRef as useRef6, useCallback as useCallback5 } from "react";
 var DEFAULT_POLL_INTERVAL_MS = 1e4;
 var DEFAULT_LIMIT = 50;
 var DEFAULT_LABELS = {
@@ -2526,9 +2576,9 @@ var DEFAULT_LABELS = {
 function useWaitingNotifications(params) {
   const conversationsContext = useConversations();
   const [conversations, setConversations] = useState12([]);
-  const previousUnreadMap = useRef5(/* @__PURE__ */ new Map());
-  const notifiedIds = useRef5(/* @__PURE__ */ new Set());
-  const isPollingRef = useRef5(false);
+  const previousUnreadMap = useRef6(/* @__PURE__ */ new Map());
+  const notifiedIds = useRef6(/* @__PURE__ */ new Set());
+  const isPollingRef = useRef6(false);
   const isEnabled = params?.enabled ?? true;
   const intervalMs = params?.intervalMs ?? DEFAULT_POLL_INTERVAL_MS;
   const icon = params?.icon;
@@ -3708,16 +3758,16 @@ function useConversationMessages(conversationId, params) {
 }
 
 // src/hooks/useScrollToLatestMessage.ts
-import { useCallback as useCallback8, useLayoutEffect, useRef as useRef6, useState as useState15 } from "react";
+import { useCallback as useCallback8, useLayoutEffect, useRef as useRef7, useState as useState15 } from "react";
 var NEAR_BOTTOM_THRESHOLD_PX = 120;
 var SCROLL_BEHAVIOR = "auto";
 function useScrollToLatestMessage({
   conversationId,
   messageCount
 }) {
-  const containerRef = useRef6(null);
+  const containerRef = useRef7(null);
   const [isAwayFromBottom, setIsAwayFromBottom] = useState15(false);
-  const isAwayFromBottomRef = useRef6(false);
+  const isAwayFromBottomRef = useRef7(false);
   const scrollToBottom = useCallback8((behavior = SCROLL_BEHAVIOR) => {
     const container = containerRef.current;
     if (!container) return;
@@ -3730,7 +3780,7 @@ function useScrollToLatestMessage({
     isAwayFromBottomRef.current = away;
     setIsAwayFromBottom((current) => current === away ? current : away);
   }, []);
-  const jumpedForConversationRef = useRef6(void 0);
+  const jumpedForConversationRef = useRef7(void 0);
   useLayoutEffect(() => {
     const isNewConversation = jumpedForConversationRef.current !== conversationId;
     if (isNewConversation) {
@@ -3777,10 +3827,10 @@ function useConversationContext(conversationId) {
 }
 
 // src/hooks/useConversationRealtime.ts
-import { useEffect as useEffect10, useRef as useRef7 } from "react";
+import { useEffect as useEffect10, useRef as useRef8 } from "react";
 function useConversationRealtime(conversationId, onEvent) {
   const sse = useConversations()?.sse;
-  const onEventRef = useRef7(onEvent);
+  const onEventRef = useRef8(onEvent);
   onEventRef.current = onEvent;
   useEffect10(() => {
     if (!sse || !conversationId) return;
@@ -3795,7 +3845,7 @@ function useConversationRealtime(conversationId, onEvent) {
 }
 function useGlobalRealtime(onEvent) {
   const sse = useConversations()?.sse;
-  const onEventRef = useRef7(onEvent);
+  const onEventRef = useRef8(onEvent);
   onEventRef.current = onEvent;
   useEffect10(() => {
     if (!sse) return;
@@ -3937,7 +3987,7 @@ function BulkTemplateModal({
 }
 
 // src/workspace/ConversationPane.tsx
-import { useEffect as useEffect12, useRef as useRef8, useState as useState17 } from "react";
+import { useEffect as useEffect12, useRef as useRef9, useState as useState17 } from "react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function ConversationPane({
   conversation,
@@ -3977,7 +4027,7 @@ function ConversationPane({
   const [draft, setDraft] = useState17(initialComposerText ?? "");
   const [queuedFiles, setQueuedFiles] = useState17([]);
   const [isSendingDraft, setIsSendingDraft] = useState17(false);
-  const sendInFlightRef = useRef8(false);
+  const sendInFlightRef = useRef9(false);
   useEffect12(() => {
     setSelectedMessageIds(/* @__PURE__ */ new Set());
     setDraft(initialComposerText ?? "");
@@ -4383,7 +4433,7 @@ var DEFAULT_CONVERSATIONS_WORKSPACE_LABELS = {
 };
 
 // src/workspace/useConversationsInbox.ts
-import { useCallback as useCallback9, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef9, useState as useState18 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef10, useState as useState18 } from "react";
 var CONVERSATIONS_PER_PAGE = 50;
 function defaultDescribeFailure(error) {
   const status = error.status;
@@ -4441,7 +4491,7 @@ function useConversationsInbox(params = {}) {
       setSelectedId(void 0);
     }
   }, [conversations, selectedId]);
-  const lastMarkReadAttempt = useRef9(void 0);
+  const lastMarkReadAttempt = useRef10(void 0);
   useEffect13(() => {
     if (!markReadOnOpen || !selectedId) return;
     const opened = conversations.find((conversation) => conversation.id === selectedId);

package/dist/preview/index.d.ts

@@ -1,5 +1,5 @@
-import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, N as ResolveMediaUrl } from '../types-BfINicc-.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-BfINicc-.js';
+import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, N as ResolveMediaUrl } from '../types-De5aN-E_.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-De5aN-E_.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-UZJBYD5O.js";
+} from "../chunk-GY472G6E.js";
 import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts

package/dist/{types-BfINicc-.d.ts → types-De5aN-E_.d.ts}

@@ -396,6 +396,17 @@ interface ConversationsApi {
      * `downloadDocumentsArchive`, que é por conversa. Ausente, a seleção em lote não oferece o botão.
      */
     downloadDocumentsArchiveByIds?(uploadIds: readonly string[]): Promise<Blob>;
+    /**
+     * Envia um arquivo avulso direto pra biblioteca, fora do fluxo de uma conversa. **Opcional por
+     * capacidade:** cada host tem seu próprio contrato de upload (base64, multipart, presigned URL) —
+     * o pacote não escolhe um formato de payload, só entrega o `File` do input e deixa o host montar
+     * a chamada do jeito que seu backend espera. Ausente, a tela de biblioteca não desenha o botão de
+     * enviar, em vez de oferecer uma ação que sempre falha.
+     *
+     * `extra` é o mesmo vocabulário livre do produto que já viaja em `renderFilters` — cliente,
+     * unidade, campanha — pra associar o arquivo enviado ao contexto que a tela estava filtrando.
+     */
+    uploadDocument?(file: File, extra?: Readonly<Record<string, string | number>>): Promise<ConversationDocument>;
     getMediaProxyUrl(mediaId: string): Promise<{
         mimeType: string;
         data: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.27",
+  "version": "0.1.0-rc.29",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -51,7 +51,7 @@
     "@types/react-dom": "^18 || ^19"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --clean --format esm --external react --external react-dom --external @xyflow/react",
     "build:watch": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --watch --dts --format esm --external react --external react-dom --external @xyflow/react",
     "check": "tsc -p tsconfig.json --noEmit",
     "test": "bun test"

package/src/DocumentsLibrary.tsx

@@ -7,8 +7,8 @@
  * clicável. Sem essa referência, uma lista global de anexos não responde nenhuma pergunta.
  */
 
-import { useEffect, useState } from 'react'
-import { ArrowUpDown, Bot, Download, Eye, MessageSquare, Users } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { ArrowUpDown, Bot, Download, Eye, MessageSquare, Upload, Users } from 'lucide-react'
 import { useConversations } from './providers/ConversationsProvider'
 import { DOCUMENT_SOURCE_FILTER, type DocumentSourceFilter } from './ConversationDocumentsPanel'
 import { FileIcon } from './FileIcon'
@@ -34,6 +34,8 @@ export interface DocumentsLibraryLabels {
   sortMostRecent: string
   sortOldest: string
   clearFilters: string
+  upload: string
+  uploadError: string
   total: (count: number) => string
   page: (current: number, last: number) => string
 }
@@ -54,6 +56,8 @@ export const DEFAULT_DOCUMENTS_LIBRARY_LABELS: DocumentsLibraryLabels = {
   sortMostRecent: 'Mais recentes',
   sortOldest: 'Mais antigos',
   clearFilters: 'Limpar filtros',
+  upload: 'Enviar documento',
+  uploadError: 'Não foi possível enviar o arquivo.',
   total: (count: number) => `${count} arquivo${count === 1 ? '' : 's'}`,
   page: (current: number, last: number) => `${current} / ${last}`,
 }
@@ -106,9 +110,15 @@ export function DocumentsLibrary({
   const [loading, setLoading] = useState(false)
   const [failed, setFailed] = useState(false)
 
+  const [uploading, setUploading] = useState(false)
+  const [uploadFailed, setUploadFailed] = useState(false)
+  const [reloadToken, setReloadToken] = useState(0)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
   const hasFilters = search !== '' || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== 'desc'
   const lastPage = Math.max(1, Math.ceil(total / perPage))
   const fetchAll = context?.api.getAllDocuments
+  const uploadDocument = context?.api.uploadDocument
 
   useEffect(() => {
     if (!fetchAll) return
@@ -140,7 +150,7 @@ export function DocumentsLibrary({
     return () => {
       active = false
     }
-  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage])
+  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage, reloadToken])
 
   function applyFilter(change: () => void): void {
     change()
@@ -152,6 +162,20 @@ export function DocumentsLibrary({
     if (url) window.open(url, '_blank', 'noopener,noreferrer')
   }
 
+  async function handleUpload(file: File): Promise<void> {
+    if (!uploadDocument) return
+    setUploading(true)
+    setUploadFailed(false)
+    try {
+      await uploadDocument(file)
+      setReloadToken((token) => token + 1)
+    } catch {
+      setUploadFailed(true)
+    } finally {
+      setUploading(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
@@ -207,6 +231,32 @@ export function DocumentsLibrary({
             {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={14} aria-hidden="true" />
+              {labels.upload}
+            </button>
+          </>
+        ) : null}
       </div>
 
       {loading ? <p className={cn('text-sm text-gray-500', classNames?.status)}>{labels.loading}</p> : null}
@@ -215,6 +265,11 @@ export function DocumentsLibrary({
           {labels.failure}
         </p>
       ) : null}
+      {uploadFailed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.uploadError}
+        </p>
+      ) : null}
       {!loading && !failed && documents.length === 0 ? (
         <p className={cn('text-sm text-gray-500', classNames?.status)}>
           {hasFilters ? labels.noResults : labels.empty}

package/src/buildOutput.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * O único teste que lê o `dist` em vez do fonte.
+ *
+ * Existe porque o `notification-ui@rc.1` saiu com 19 testes verdes e não renderizava. Dois defeitos,
+ * os dois invisíveis para quem importa o fonte:
+ *
+ * 1. `jsx: react-jsx` chegava ao tsup por um tsconfig com `extends`, e o esbuild NÃO segue `extends`
+ *    para essa opção. O bundle saiu com `React.createElement` sem `React` no escopo, e o produto
+ *    quebrou com `ReferenceError: React is not defined`.
+ * 2. `splitting: false` com dois entrypoints duplicou o módulo de contexto. O provider de um bundle
+ *    não era o mesmo objeto do consumidor no outro, e o hook acusava "usado fora do provider" estando
+ *    dentro de um.
+ *
+ * Nenhum teste de fonte pega isso: eles importam `./index`, não `dist`. Rode depois do build.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+const DIST = `${import.meta.dir}/../dist`
+
+async function distText(file: string): Promise<string> {
+  const handle = Bun.file(`${DIST}/${file}`)
+  expect(await handle.exists(), `${file} não existe — rode \`bun run build\` antes`).toBe(true)
+  return handle.text()
+}
+
+describe('transform de JSX', () => {
+  it('usa o runtime automático, e não React.createElement', async () => {
+    for (const file of ['index.js', 'flows/index.js', 'preview/index.js']) {
+      const content = await distText(file)
+
+      expect(content, `${file} com createElement`).not.toContain('React.createElement')
+      expect(content, `${file} sem jsx-runtime`).toContain('react/jsx-runtime')
+    }
+  })
+})
+
+describe('divisão de código entre entrypoints', () => {
+  it('os entrypoints compartilham chunk em vez de duplicar módulo', async () => {
+    // Sem `splitting: true`, cada entrypoint carrega a própria cópia dos módulos comuns — e um
+    // contexto do React duplicado deixa de ser o mesmo objeto entre provider e consumidor.
+    const chunks = [...new Bun.Glob('chunk-*.js').scanSync({ cwd: DIST })]
+
+    expect(chunks.length, 'nenhum chunk compartilhado gerado').toBeGreaterThan(0)
+  })
+})
+
+describe('telas compostas chegam ao pacote publicado', () => {
+  it('o subpath raiz entrega MessagesWorkspace, no js e nos tipos', async () => {
+    expect(await distText('index.js')).toContain('MessagesWorkspace')
+    expect(await distText('index.d.ts')).toContain('MessagesWorkspace')
+  })
+
+  it('o subpath /flows entrega FlowsWorkspace, no js e nos tipos', async () => {
+    // Export declarado no `index.ts` e ausente do `dist` é o modo de falhar mais barato de cometer e
+    // mais caro de descobrir: só aparece no produto, depois de publicar.
+    expect(await distText('flows/index.js')).toContain('FlowsWorkspace')
+    expect(await distText('flows/index.d.ts')).toContain('FlowsWorkspace')
+  })
+
+  it('o CSS publicado traz as classes que as telas consomem', async () => {
+    const css = await distText('styles.css')
+
+    // A inbox depende destas classes do pacote (o editor de fluxos e a tela de mensagens estilizam por
+    // utilitários do host). Publicar sem elas deixa a tela montada e sem layout — e nada falha.
+    expect(css).toContain('.cv-workspace')
+    expect(css).toContain('.cv-workspace-modal')
+  })
+})
+
+describe('o bundle do host não paga por @xyflow/react sem pedir', () => {
+  it('o subpath raiz não puxa o xyflow', async () => {
+    // É o motivo de o editor viver em `/flows`: quem só usa a inbox não carrega a biblioteca de
+    // canvas, que é a maior dependência do pacote.
+    expect(await distText('index.js')).not.toContain('@xyflow/react')
+  })
+})

package/src/documents/DocumentsWorkspace.tsx

@@ -9,8 +9,8 @@
  * remontasse isso à mão voltaria a divergir dos outros — foi o que aconteceu antes desta tela existir.
  */
 
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
-import { Download, Eye, MessageSquare, Trash2, X } from 'lucide-react'
+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'
@@ -106,11 +106,15 @@ export function DocumentsWorkspace({
   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[]>(
@@ -224,6 +228,20 @@ export function DocumentsWorkspace({
     }
   }
 
+  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)
@@ -304,8 +322,40 @@ export function DocumentsWorkspace({
             {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}

package/src/documents/labels.ts

@@ -28,6 +28,8 @@ export interface DocumentsWorkspaceLabels {
   readonly bulkDownloadZip: string
   readonly bulkRemove: (count: number) => string
   readonly bulkRemoveConfirm: (count: number) => string
+  readonly upload: string
+  readonly uploadError: string
   readonly columnFilename: string
   readonly columnContact: string
   readonly columnType: string
@@ -70,6 +72,8 @@ export const DEFAULT_DOCUMENTS_WORKSPACE_LABELS: DocumentsWorkspaceLabels = {
   bulkDownloadZip: 'Baixar em zip',
   bulkRemove: (count) => `Excluir ${count}`,
   bulkRemoveConfirm: (count) => `Excluir ${count} arquivo${count === 1 ? '' : 's'}?`,
+  upload: 'Enviar documento',
+  uploadError: 'Não foi possível enviar o arquivo.',
   columnFilename: 'Arquivo',
   columnContact: 'Contato',
   columnType: 'Tipo',