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

package/dist/index.d.ts

@@ -1300,6 +1300,9 @@ interface ConversationsWorkspaceLabels {
     readonly copySelected: string;
     readonly composerPlaceholder: string;
     readonly attachFailure: string;
+    /** Tira um arquivo da fila antes de enviar. */
+    readonly attachmentRemove: string;
+    readonly recordFailure: string;
     readonly sendFailure: string;
     readonly takeoverToReply: string;
     readonly signIn: string;
@@ -1428,20 +1431,28 @@ interface ConversationsWorkspaceProps {
     readonly messageSelection?: boolean;
     /** Texto já no campo ao abrir a conversa (deep link que sugere a resposta). */
     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. */
+    readonly composerVariablesFor?: (conversation: ConversationSummary, context: Record<string, unknown> | undefined) => readonly RichComposerVariable[];
+    /** Fila de anexos com legenda, como no WhatsApp. Ausente, o clipe manda cada arquivo na hora. */
+    readonly onSendAttachments?: (conversation: ConversationSummary, files: readonly File[], caption: string) => Promise<void>;
+    /** Nota de voz. Ausente, o microfone não aparece. */
+    readonly onRecordAudio?: (conversation: ConversationSummary, file: File) => Promise<void>;
     readonly contextEntriesOf?: (context: Record<string, unknown> | undefined) => readonly ConversationContextEntry[];
     readonly onAttach?: (conversation: ConversationSummary, file: File) => Promise<void>;
     readonly extraUtilitiesFor?: (conversation: ConversationSummary) => readonly ConversationHeaderUtility[];
     readonly renderFilters?: (inbox: UseConversationsInboxResult) => ReactNode;
     readonly renderBulkActions?: (inbox: UseConversationsInboxResult) => ReactNode;
     readonly renderRow?: (conversation: ConversationSummary) => ReactNode;
-    readonly renderAboveTranscript?: (conversation: ConversationSummary) => ReactNode;
+    readonly renderAboveTranscript?: (conversation: ConversationSummary, context: Record<string, unknown> | undefined) => ReactNode;
     readonly renderHeaderActions?: (inbox: UseConversationsInboxResult) => ReactNode;
     readonly onSendTemplateToSelected?: (inbox: UseConversationsInboxResult) => void;
     /** Destino do link de reentrar no painel, mostrado junto do aviso de sessão expirada. */
     readonly signInHref?: string;
     readonly className?: string;
 }
-declare function ConversationsWorkspace({ labels: labelsOverride, filters, perPage, markReadOnOpen, serverPaginated, initialConversationId, initialWhatsappNumber, simulator, quickReplies, quickReplyVariablesFor, flowLabelOf, onDownload, requireTakeoverToReply, messageSelection, initialComposerText, contextEntriesOf, onAttach, extraUtilitiesFor, renderFilters, renderBulkActions, renderRow, renderAboveTranscript, renderHeaderActions, onSendTemplateToSelected, signInHref, className, }: ConversationsWorkspaceProps): react.JSX.Element;
+declare function ConversationsWorkspace({ labels: labelsOverride, filters, perPage, markReadOnOpen, serverPaginated, initialConversationId, initialWhatsappNumber, simulator, quickReplies, quickReplyVariablesFor, flowLabelOf, onDownload, requireTakeoverToReply, messageSelection, initialComposerText, composer, composerVariablesFor, onSendAttachments, onRecordAudio, contextEntriesOf, onAttach, extraUtilitiesFor, renderFilters, renderBulkActions, renderRow, renderAboveTranscript, renderHeaderActions, onSendTemplateToSelected, signInHref, className, }: ConversationsWorkspaceProps): react.JSX.Element;
 
 interface ConversationPaneProps {
     readonly conversation: ConversationSummary;
@@ -1480,11 +1491,30 @@ interface ConversationPaneProps {
     readonly messageSelection?: boolean;
     /** Texto já no campo ao abrir (deep link que sugere a resposta). */
     readonly initialComposerText?: string | undefined;
-    /** Peça do produto entre o contexto e o transcript (ex.: ficha do lead, resumo do pedido). */
-    readonly renderAboveTranscript?: (conversation: ConversationSummary) => ReactNode;
+    /**
+     * Peça do produto entre o contexto e o transcript (ex.: ficha do lead, resumo do pedido). Recebe o
+     * contexto do fluxo junto: é dele que sai o resumo, e sem isso o host teria de buscá-lo de novo.
+     */
+    readonly renderAboveTranscript?: (conversation: ConversationSummary, context: Record<string, unknown> | undefined) => ReactNode;
     readonly onAttach?: ((file: File) => Promise<void>) | undefined;
+    /**
+     * `rich` troca o `textarea` pelo campo com a formatação do WhatsApp desenhada enquanto se escreve.
+     * Vale onde o atendente manda texto longo e formatado; para responder "já vou ver" o campo simples
+     * é menos coisa na tela.
+     */
+    readonly composer?: 'simple' | 'rich';
+    /** Valores que o operador insere sem digitar. Só o composer `rich` os oferece. */
+    readonly composerVariablesFor?: (conversation: ConversationSummary, context: Record<string, unknown> | undefined) => readonly RichComposerVariable[];
+    /**
+     * 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
+     * perde a legenda, e era a diferença entre as telas.
+     */
+    readonly onSendAttachments?: (files: readonly File[], caption: string) => Promise<void>;
+    /** Grava e envia nota de voz. Ausente, o microfone não aparece. */
+    readonly onRecordAudio?: (file: File) => Promise<void>;
 }
-declare function ConversationPane({ conversation, now, busy, labels, onTakeover, onReturnToBot, onFinish, onBack, extraUtilities, contextEntriesOf, quickReplies, quickReplyVariablesFor, flowLabel, onDownload, requireTakeoverToReply, messageSelection, initialComposerText, renderAboveTranscript, onAttach, }: ConversationPaneProps): react.JSX.Element;
+declare function ConversationPane({ conversation, now, busy, labels, onTakeover, onReturnToBot, onFinish, onBack, extraUtilities, contextEntriesOf, quickReplies, quickReplyVariablesFor, flowLabel, onDownload, requireTakeoverToReply, messageSelection, initialComposerText, renderAboveTranscript, onAttach, composer, composerVariablesFor, onSendAttachments, onRecordAudio, }: ConversationPaneProps): react.JSX.Element;
 
 interface ConversationsInboxListProps {
     readonly inbox: UseConversationsInboxResult;

package/dist/index.js

@@ -2699,7 +2699,11 @@ function ConversationPane({
   messageSelection,
   initialComposerText,
   renderAboveTranscript,
-  onAttach
+  onAttach,
+  composer = "simple",
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio
 }) {
   const context = useConversations();
   if (!context) {
@@ -2712,9 +2716,11 @@ function ConversationPane({
   const [sendFailure, setSendFailure] = useState12(void 0);
   const [selectedMessageIds, setSelectedMessageIds] = useState12(/* @__PURE__ */ new Set());
   const [draft, setDraft] = useState12(initialComposerText ?? "");
+  const [queuedFiles, setQueuedFiles] = useState12([]);
   useEffect8(() => {
     setSelectedMessageIds(/* @__PURE__ */ new Set());
     setDraft(initialComposerText ?? "");
+    setQueuedFiles([]);
   }, [conversation.id, initialComposerText]);
   function toggleMessageSelected(messageId) {
     setSelectedMessageIds((current) => {
@@ -2750,6 +2756,19 @@ function ConversationPane({
   async function handleSend(text) {
     await runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure);
   }
+  async function handleRichSend() {
+    if (onSendAttachments && queuedFiles.length > 0) {
+      const files = queuedFiles;
+      const caption = draft;
+      await runSend(() => onSendAttachments(files, caption), labels.attachFailure);
+      setQueuedFiles([]);
+      setDraft("");
+      return;
+    }
+    if (!draft.trim()) return;
+    await handleSend(draft);
+    setDraft("");
+  }
   async function handleAttach(file) {
     if (!onAttach) return;
     await runSend(() => onAttach(file), labels.attachFailure);
@@ -2765,6 +2784,12 @@ function ConversationPane({
     );
   }
   const contextEntries = contextEntriesOf?.(conversationContext);
+  const composerVariables = composerVariablesFor?.(conversation, conversationContext);
+  const richQuickReplies = quickReplies?.map((reply) => ({
+    id: reply.key,
+    label: reply.label,
+    text: typeof reply.text === "string" ? applyQuickReplyVariables(reply.text, quickReplyVariablesFor?.(conversation, conversationContext) ?? {}) : reply.text(quickReplyVariablesFor?.(conversation, conversationContext) ?? {})
+  }));
   const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== "human";
   return /* @__PURE__ */ jsxs20("div", { className: "cv-workspace-pane", children: [
     /* @__PURE__ */ jsx22(
@@ -2784,7 +2809,7 @@ function ConversationPane({
     ),
     contextEntries && contextEntries.length > 0 || flowLabel ? /* @__PURE__ */ jsx22(ConversationContextPanel, { entries: contextEntries ?? [], ...flowLabel ? { flowLabel } : {} }) : null,
     /* @__PURE__ */ jsx22(ConversationDocumentsPanel, { conversationId: conversation.id, open: documentsOpen }),
-    renderAboveTranscript?.(conversation),
+    renderAboveTranscript?.(conversation, conversationContext),
     /* @__PURE__ */ jsx22(
       ConversationWallpaper,
       {
@@ -2830,6 +2855,45 @@ function ConversationPane({
     ) : botOwnsConversation ? (
       // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
       /* @__PURE__ */ jsx22("p", { className: "cv-workspace-notice", children: labels.takeoverToReply })
+    ) : composer === "rich" ? /* @__PURE__ */ jsx22(
+      RichMessageComposer,
+      {
+        value: draft,
+        onChange: setDraft,
+        onSend: () => void handleRichSend(),
+        ...onSendAttachments ? { onAttachFiles: (files) => setQueuedFiles((current) => [...current, ...Array.from(files)]) } : onAttach ? {
+          onAttachFiles: (files) => {
+            for (const file of Array.from(files)) void handleAttach(file);
+          }
+        } : {},
+        placeholder: labels.composerPlaceholder,
+        isSending: busy,
+        ...onRecordAudio ? {
+          idleAction: /* @__PURE__ */ jsx22(
+            AudioRecorderButton,
+            {
+              onRecorded: (file) => void runSend(() => onRecordAudio(file), labels.recordFailure),
+              onFailure: (failureMessage) => setSendFailure(failureMessage)
+            }
+          )
+        } : {},
+        ...queuedFiles.length > 0 ? {
+          attachmentsPreview: /* @__PURE__ */ jsx22("ul", { className: "cv-workspace-attachments", children: queuedFiles.map((file, index) => /* @__PURE__ */ jsxs20("li", { children: [
+            /* @__PURE__ */ jsx22("span", { children: file.name }),
+            /* @__PURE__ */ jsx22(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.attachmentRemove,
+                onClick: () => setQueuedFiles((current) => current.filter((_, position) => position !== index)),
+                children: "\u2715"
+              }
+            )
+          ] }, `${file.name}-${index}`)) })
+        } : {},
+        ...richQuickReplies ? { quickReplies: [...richQuickReplies] } : {},
+        ...composerVariables ? { variables: [...composerVariables] } : {}
+      }
     ) : /* @__PURE__ */ jsx22(
       MessageComposer,
       {
@@ -3021,6 +3085,8 @@ var DEFAULT_CONVERSATIONS_WORKSPACE_LABELS = {
   copySelected: "Copiar",
   composerPlaceholder: "Responder como atendente\u2026",
   attachFailure: "Falha ao enviar o arquivo.",
+  attachmentRemove: "Remover anexo",
+  recordFailure: "Falha ao gravar o \xE1udio.",
   sendFailure: "Falha ao enviar a mensagem.",
   takeoverToReply: "Assuma o atendimento para responder diretamente ao cliente.",
   signIn: "Entrar no painel",
@@ -3225,6 +3291,10 @@ function ConversationsWorkspace({
   requireTakeoverToReply,
   messageSelection,
   initialComposerText,
+  composer,
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio,
   contextEntriesOf,
   onAttach,
   extraUtilitiesFor,
@@ -3403,6 +3473,12 @@ function ConversationsWorkspace({
               ...requireTakeoverToReply ? { requireTakeoverToReply } : {},
               ...messageSelection ? { messageSelection } : {},
               ...initialComposerText ? { initialComposerText } : {},
+              ...composer ? { composer } : {},
+              ...composerVariablesFor ? { composerVariablesFor } : {},
+              ...onSendAttachments ? {
+                onSendAttachments: (files, caption) => onSendAttachments(selected, files, caption)
+              } : {},
+              ...onRecordAudio ? { onRecordAudio: (file) => onRecordAudio(selected, file) } : {},
               onBack: inbox.clearSelection,
               ...paneUtilities ? { extraUtilities: paneUtilities } : {},
               ...contextEntriesOf ? { contextEntriesOf } : {},

package/dist/styles.css

@@ -796,3 +796,38 @@
   border-color: #4b5563;
   color: #f3f4f6;
 }
+.cv-workspace-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+}
+.cv-workspace-attachments li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-attachments li span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-attachments li button {
+  flex: none;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  color: inherit;
+}
+.dark .cv-workspace-attachments li {
+  border-color: rgb(51 65 85);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.23",
+  "version": "0.1.0-rc.24",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/styles.css

@@ -734,3 +734,41 @@
   border-color: #4b5563;
   color: #f3f4f6;
 }
+
+/* Fila de anexos acima da barra: nomes visíveis para conferir antes de mandar, e um X por item —
+   escolher seis arquivos e não poder tirar o errado obrigava a recomeçar. */
+.cv-workspace-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+}
+.cv-workspace-attachments li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-attachments li span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-attachments li button {
+  flex: none;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  color: inherit;
+}
+.dark .cv-workspace-attachments li {
+  border-color: rgb(51 65 85);
+}

package/src/workspace/ConversationPane.tsx

@@ -7,13 +7,15 @@
 
 import { useEffect, useState, type ReactNode } from 'react'
 
+import { AudioRecorderButton } from '../AudioRecorderButton'
 import { ConversationContextPanel, type ConversationContextEntry } from '../ConversationContextPanel'
 import { ConversationDocumentsPanel } from '../ConversationDocumentsPanel'
 import { ConversationHeader, type ConversationHeaderUtility } from '../ConversationHeader'
 import { ConversationWallpaper } from '../Wallpaper'
 import { DateDivider } from '../DateDivider'
 import { MessageBubble } from '../MessageBubble'
-import { MessageComposer, type QuickReply } from '../MessageComposer'
+import { MessageComposer, applyQuickReplyVariables, type QuickReply } from '../MessageComposer'
+import { RichMessageComposer, type RichComposerVariable } from '../RichMessageComposer'
 import { WindowExpiredNotice, isWindowBlocking } from '../WindowExpiredNotice'
 import { windowOf } from '../conversationWindow'
 import {
@@ -69,9 +71,34 @@ export interface ConversationPaneProps {
   readonly messageSelection?: boolean
   /** Texto já no campo ao abrir (deep link que sugere a resposta). */
   readonly initialComposerText?: string | undefined
-  /** Peça do produto entre o contexto e o transcript (ex.: ficha do lead, resumo do pedido). */
-  readonly renderAboveTranscript?: (conversation: ConversationSummary) => ReactNode
+  /**
+   * Peça do produto entre o contexto e o transcript (ex.: ficha do lead, resumo do pedido). Recebe o
+   * contexto do fluxo junto: é dele que sai o resumo, e sem isso o host teria de buscá-lo de novo.
+   */
+  readonly renderAboveTranscript?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => ReactNode
   readonly onAttach?: ((file: File) => Promise<void>) | undefined
+  /**
+   * `rich` troca o `textarea` pelo campo com a formatação do WhatsApp desenhada enquanto se escreve.
+   * Vale onde o atendente manda texto longo e formatado; para responder "já vou ver" o campo simples
+   * é menos coisa na tela.
+   */
+  readonly composer?: 'simple' | 'rich'
+  /** Valores que o operador insere sem digitar. Só o composer `rich` os oferece. */
+  readonly composerVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => readonly RichComposerVariable[]
+  /**
+   * 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
+   * perde a legenda, e era a diferença entre as telas.
+   */
+  readonly onSendAttachments?: (files: readonly File[], caption: string) => Promise<void>
+  /** Grava e envia nota de voz. Ausente, o microfone não aparece. */
+  readonly onRecordAudio?: (file: File) => Promise<void>
 }
 
 export function ConversationPane({
@@ -94,6 +121,10 @@ export function ConversationPane({
   initialComposerText,
   renderAboveTranscript,
   onAttach,
+  composer = 'simple',
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio,
 }: ConversationPaneProps) {
   const context = useConversations()
   if (!context) {
@@ -107,12 +138,14 @@ 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[]>([])
 
   // 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.
   useEffect(() => {
     setSelectedMessageIds(new Set())
     setDraft(initialComposerText ?? '')
+    setQueuedFiles([])
   }, [conversation.id, initialComposerText])
 
   function toggleMessageSelected(messageId: string): void {
@@ -168,6 +201,24 @@ export function ConversationPane({
     await runSend(() => api.sendMessage(conversation.id, text), 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> {
+    if (onSendAttachments && queuedFiles.length > 0) {
+      const files = queuedFiles
+      const caption = draft
+      await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
+      setQueuedFiles([])
+      setDraft('')
+      return
+    }
+    if (!draft.trim()) return
+    await handleSend(draft)
+    setDraft('')
+  }
+
   async function handleAttach(file: File): Promise<void> {
     if (!onAttach) return
     await runSend(() => onAttach(file), labels.attachFailure)
@@ -185,6 +236,19 @@ export function ConversationPane({
   }
 
   const contextEntries = contextEntriesOf?.(conversationContext)
+  const 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.
+   */
+  const richQuickReplies = quickReplies?.map((reply) => ({
+    id: reply.key,
+    label: reply.label,
+    text:
+      typeof reply.text === 'string'
+        ? applyQuickReplyVariables(reply.text, quickReplyVariablesFor?.(conversation, conversationContext) ?? {})
+        : reply.text(quickReplyVariablesFor?.(conversation, conversationContext) ?? {}),
+  }))
   const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== 'human'
 
   return (
@@ -207,7 +271,7 @@ export function ConversationPane({
       ) : null}
       <ConversationDocumentsPanel conversationId={conversation.id} open={documentsOpen} />
 
-      {renderAboveTranscript?.(conversation)}
+      {renderAboveTranscript?.(conversation, conversationContext)}
 
       {/* Mesmo wallpaper do preview do cliente: atendente e cliente devem ver a conversa com a
           mesma aparência, senão o preview deixa de ser referência confiável. */}
@@ -269,6 +333,57 @@ export function ConversationPane({
       ) : 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>
+      ) : composer === 'rich' ? (
+        <RichMessageComposer
+          value={draft}
+          onChange={setDraft}
+          onSend={() => void handleRichSend()}
+          {...(onSendAttachments
+            ? { onAttachFiles: (files: FileList) => setQueuedFiles((current) => [...current, ...Array.from(files)]) }
+            : onAttach
+              ? {
+                  onAttachFiles: (files: FileList) => {
+                    for (const file of Array.from(files)) void handleAttach(file)
+                  },
+                }
+              : {})}
+          placeholder={labels.composerPlaceholder}
+          isSending={busy}
+          {...(onRecordAudio
+            ? {
+                idleAction: (
+                  <AudioRecorderButton
+                    onRecorded={(file) => void runSend(() => onRecordAudio(file), labels.recordFailure)}
+                    onFailure={(failureMessage) => setSendFailure(failureMessage)}
+                  />
+                ),
+              }
+            : {})}
+          {...(queuedFiles.length > 0
+            ? {
+                attachmentsPreview: (
+                  <ul className="cv-workspace-attachments">
+                    {queuedFiles.map((file, index) => (
+                      <li key={`${file.name}-${index}`}>
+                        <span>{file.name}</span>
+                        <button
+                          type="button"
+                          aria-label={labels.attachmentRemove}
+                          onClick={() =>
+                            setQueuedFiles((current) => current.filter((_, position) => position !== index))
+                          }
+                        >
+                          ✕
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                ),
+              }
+            : {})}
+          {...(richQuickReplies ? { quickReplies: [...richQuickReplies] } : {})}
+          {...(composerVariables ? { variables: [...composerVariables] } : {})}
+        />
       ) : (
         <MessageComposer
           value={draft}

package/src/workspace/ConversationsWorkspace.tsx

@@ -16,6 +16,7 @@ import { useEffect, useMemo, useState, type ReactNode } from 'react'
 import type { ConversationContextEntry } from '../ConversationContextPanel'
 import type { ConversationHeaderUtility } from '../ConversationHeader'
 import type { QuickReply } from '../MessageComposer'
+import type { RichComposerVariable } from '../RichMessageComposer'
 import type { ConversationSummary } from '../providers/types'
 import { BulkTemplateModal } from './BulkTemplateModal'
 import { ConversationPane } from './ConversationPane'
@@ -62,13 +63,31 @@ export interface ConversationsWorkspaceProps {
   readonly messageSelection?: boolean
   /** Texto já no campo ao abrir a conversa (deep link que sugere a resposta). */
   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. */
+  readonly composerVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => readonly RichComposerVariable[]
+  /** Fila de anexos com legenda, como no WhatsApp. Ausente, o clipe manda cada arquivo na hora. */
+  readonly onSendAttachments?: (
+    conversation: ConversationSummary,
+    files: readonly File[],
+    caption: string,
+  ) => Promise<void>
+  /** Nota de voz. Ausente, o microfone não aparece. */
+  readonly onRecordAudio?: (conversation: ConversationSummary, file: File) => Promise<void>
   readonly contextEntriesOf?: (context: Record<string, unknown> | undefined) => readonly ConversationContextEntry[]
   readonly onAttach?: (conversation: ConversationSummary, file: File) => Promise<void>
   readonly extraUtilitiesFor?: (conversation: ConversationSummary) => readonly ConversationHeaderUtility[]
   readonly renderFilters?: (inbox: UseConversationsInboxResult) => ReactNode
   readonly renderBulkActions?: (inbox: UseConversationsInboxResult) => ReactNode
   readonly renderRow?: (conversation: ConversationSummary) => ReactNode
-  readonly renderAboveTranscript?: (conversation: ConversationSummary) => ReactNode
+  readonly renderAboveTranscript?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => ReactNode
   readonly renderHeaderActions?: (inbox: UseConversationsInboxResult) => ReactNode
   readonly onSendTemplateToSelected?: (inbox: UseConversationsInboxResult) => void
   /** Destino do link de reentrar no painel, mostrado junto do aviso de sessão expirada. */
@@ -92,6 +111,10 @@ export function ConversationsWorkspace({
   requireTakeoverToReply,
   messageSelection,
   initialComposerText,
+  composer,
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio,
   contextEntriesOf,
   onAttach,
   extraUtilitiesFor,
@@ -268,6 +291,15 @@ export function ConversationsWorkspace({
               {...(requireTakeoverToReply ? { requireTakeoverToReply } : {})}
               {...(messageSelection ? { messageSelection } : {})}
               {...(initialComposerText ? { initialComposerText } : {})}
+              {...(composer ? { composer } : {})}
+              {...(composerVariablesFor ? { composerVariablesFor } : {})}
+              {...(onSendAttachments
+                ? {
+                    onSendAttachments: (files: readonly File[], caption: string) =>
+                      onSendAttachments(selected, files, caption),
+                  }
+                : {})}
+              {...(onRecordAudio ? { onRecordAudio: (file: File) => onRecordAudio(selected, file) } : {})}
               onBack={inbox.clearSelection}
               {...(paneUtilities ? { extraUtilities: paneUtilities } : {})}
               {...(contextEntriesOf ? { contextEntriesOf } : {})}

package/src/workspace/labels.ts

@@ -34,6 +34,9 @@ export interface ConversationsWorkspaceLabels {
   readonly copySelected: string
   readonly composerPlaceholder: string
   readonly attachFailure: string
+  /** Tira um arquivo da fila antes de enviar. */
+  readonly attachmentRemove: string
+  readonly recordFailure: string
   readonly sendFailure: string
   readonly takeoverToReply: string
   readonly signIn: string
@@ -72,6 +75,8 @@ export const DEFAULT_CONVERSATIONS_WORKSPACE_LABELS: ConversationsWorkspaceLabel
   copySelected: 'Copiar',
   composerPlaceholder: 'Responder como atendente…',
   attachFailure: 'Falha ao enviar o arquivo.',
+  attachmentRemove: 'Remover anexo',
+  recordFailure: 'Falha ao gravar o áudio.',
   sendFailure: 'Falha ao enviar a mensagem.',
   takeoverToReply: 'Assuma o atendimento para responder diretamente ao cliente.',
   signIn: 'Entrar no painel',