@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.0

package/src/theme.ts

@@ -28,3 +28,16 @@ export function getCustomStyles(theme?: ConversationsTheme): Record<string, stri
 
   return styles
 }
+
+/**
+ * Texto do chat nos dois temas.
+ *
+ * Existe porque as cores viviam cravadas em hexadecimal na marcação, sem variante escura: nome do
+ * cliente em `#111b21` e número, horário e prévia em `#667781` — os cinzas do WhatsApp CLARO. Com o
+ * tema escuro ligado eles continuavam escuros sobre fundo escuro, e a lista virava texto quase
+ * ilegível. O mesmo par aparecia dentro do balão, que também escurece.
+ *
+ * Os valores escuros são os que o próprio WhatsApp usa, para a tela não inventar uma paleta própria.
+ */
+export const CHAT_TEXT_PRIMARY_CLASS = 'text-[#111b21] dark:text-[#e9edef]'
+export const CHAT_TEXT_SECONDARY_CLASS = 'text-[#667781] dark:text-[#8696a0]'

package/src/types.ts

@@ -84,6 +84,32 @@ export interface MessagePayload {
    * diferente de avaliado e limpo.
    */
   moderation?: { isOffensive: boolean; terms: string[] } | null
+  /**
+   * Transcrição do áudio, vinda do backend — a UI só exibe, nunca transcreve. Rodar STT no browser
+   * exigiria baixar modelo por aba e daria resultado diferente por versão de cliente.
+   *
+   * `null`/ausente = não avaliado, que é diferente de `'done'` com texto vazio (áudio em silêncio,
+   * já processado). É essa distinção que decide se o balão oferece "transcrever" ou "sem fala
+   * detectada".
+   */
+  transcription?: MessageTranscription | null
   isFirstInGroup?: boolean
   isLastInGroup?: boolean
 }
+
+export type TranscriptionStatus = 'pending' | 'done' | 'failed' | 'unsupported'
+
+/**
+ * Quando transcrever, escolhido nas configurações da empresa. Espelha o
+ * `TranscriptionMode` de `@adatechnology/meta-whatsapp-contracts`; declarado aqui para o pacote de
+ * UI não obrigar quem só desenha telas a instalar os contratos do backend.
+ */
+export type TranscriptionMode = 'auto' | 'onDemand'
+
+export interface MessageTranscription {
+  status: TranscriptionStatus
+  text?: string | null
+  /** ISO 639-1 ou nome do idioma, conforme o engine. Exibido como dica, não interpretado. */
+  language?: string | null
+  engine?: string | null
+}

package/src/workspace/BulkTemplateModal.tsx

@@ -0,0 +1,132 @@
+/**
+ * Escolha do template para o envio em lote.
+ *
+ * Fora da janela de 24h só template abre conversa, e a lista aprovada muda por conta da Meta — daí
+ * a busca: quem tem trinta templates não acha o certo rolando. Só aparece quando o host implementa
+ * `listTemplates`; sem a listagem não há o que escolher, e o envio cai no template padrão.
+ *
+ * O aviso de "nenhuma selecionada está fora da janela" existe porque o envio parecia falhar em
+ * silêncio: dentro da janela a Meta recusa o template, e a tela não dizia por quê.
+ */
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { useConversations } from '../providers/ConversationsProvider'
+import type { ConversationTemplate } from '../providers/types'
+import type { ConversationsWorkspaceLabels } from './labels'
+
+export interface BulkTemplateModalProps {
+  readonly labels: ConversationsWorkspaceLabels
+  /** Quantas das selecionadas estão fora da janela — as únicas que o template atinge. */
+  readonly expiredCount: number
+  readonly sending: boolean
+  readonly onClose: () => void
+  readonly onSend: (templateName: string | undefined) => void
+}
+
+export function BulkTemplateModal({
+  labels,
+  expiredCount,
+  sending,
+  onClose,
+  onSend,
+}: BulkTemplateModalProps) {
+  const context = useConversations()
+  if (!context) {
+    throw new Error('BulkTemplateModal requires an ancestor <ConversationsProvider>')
+  }
+  const { api } = context
+
+  const [templates, setTemplates] = useState<readonly ConversationTemplate[]>([])
+  const [search, setSearch] = useState('')
+  const [selected, setSelected] = useState('')
+
+  useEffect(() => {
+    let active = true
+    void api
+      .listTemplates?.()
+      .then((loaded) => {
+        if (active) setTemplates(loaded)
+      })
+      .catch(() => {
+        // Lista vazia já comunica o que houve; um alerta a mais competiria com o atendimento.
+      })
+    return () => {
+      active = false
+    }
+  }, [api])
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase()
+    if (!term) return templates
+    return templates.filter((template) => template.name.toLowerCase().includes(term))
+  }, [templates, search])
+
+  return (
+    <div className="cv-workspace-modal" role="dialog" aria-modal="true" aria-label={labels.templateModalTitle}>
+      <div className="cv-workspace-modal__box">
+        <header className="cv-workspace-modal__header">
+          <div>
+            <h3>{labels.templateModalTitle}</h3>
+            <p>{labels.templateModalAvailable(templates.length)}</p>
+          </div>
+          <button data-cv-tooltip={labels.templateModalCancel} type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
+            ✕
+          </button>
+        </header>
+
+        <div className="cv-workspace-modal__search">
+          <input
+            type="search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={labels.templateModalSearch}
+            autoFocus
+          />
+        </div>
+
+        <div className="cv-workspace-modal__list">
+          {filtered.length === 0 ? <p className="cv-workspace-empty">{labels.templateModalEmpty}</p> : null}
+          {filtered.map((template) => (
+            <button
+              data-cv-tooltip={template.name} aria-label={template.name}
+              key={template.name}
+              type="button"
+              // Reclicar desmarca: sem isso não havia como voltar ao template padrão depois de
+              // escolher um por engano.
+              onClick={() => setSelected(template.name === selected ? '' : template.name)}
+              aria-pressed={template.name === selected}
+              className={`cv-workspace-modal__item${
+                template.name === selected ? ' cv-workspace-modal__item--on' : ''
+              }`}
+            >
+              <span className="cv-workspace-modal__item-name">{template.name}</span>
+              <span className="cv-workspace-modal__item-meta">
+                {template.language}
+                {template.category ? ` · ${template.category.toLowerCase()}` : ''}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {expiredCount === 0 ? (
+          <p className="cv-workspace-modal__warning">{labels.templateModalNoneExpired}</p>
+        ) : null}
+
+        <footer className="cv-workspace-modal__footer">
+          <button data-cv-tooltip={labels.templateModalCancel} aria-label={labels.templateModalCancel} type="button" onClick={onClose}>
+            {labels.templateModalCancel}
+          </button>
+          <button
+            data-cv-tooltip={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)} aria-label={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
+            type="button"
+            disabled={sending || expiredCount === 0}
+            onClick={() => onSend(selected || undefined)}
+          >
+            {sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
+          </button>
+        </footer>
+      </div>
+    </div>
+  )
+}

package/src/workspace/ConversationPane.tsx

@@ -0,0 +1,432 @@
+/**
+ * Coluna do meio: cabeçalho, contexto, documentos, transcript e composer da conversa aberta.
+ *
+ * Era a peça mais copiada entre os produtos, e a que mais divergia: um perdia o salto para a
+ * última mensagem, outro engolia falha de anexo, outro não abria a biblioteca de arquivos.
+ */
+
+import { useEffect, useRef, 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, applyQuickReplyVariables, type QuickReply } from '../MessageComposer'
+import { RichMessageComposer, type RichComposerVariable } from '../RichMessageComposer'
+import { WindowExpiredNotice, isWindowBlocking } from '../WindowExpiredNotice'
+import { windowOf } from '../conversationWindow'
+import {
+  buildTranscriptFilename,
+  buildTranscriptText,
+  downloadTextFile,
+} from '../conversationTranscript'
+import { useConversationContext } from '../hooks/useConversationContext'
+import { useConversationMessages } from '../hooks/useConversationMessages'
+import { useConversationRealtime } from '../hooks/useConversationRealtime'
+import { useScrollToLatestMessage } from '../hooks/useScrollToLatestMessage'
+import { useConversations } from '../providers/ConversationsProvider'
+import type { ConversationSummary } from '../providers/types'
+import type { ConversationsWorkspaceLabels } from './labels'
+
+export interface ConversationPaneProps {
+  readonly conversation: ConversationSummary
+  readonly now: number
+  readonly busy: boolean
+  readonly labels: ConversationsWorkspaceLabels
+  /** Devolve a promessa quando o host a tem: o envio de template espera a tomada antes de sair. */
+  readonly onTakeover?: (() => void | Promise<void>) | undefined
+  readonly onReturnToBot?: (() => void) | undefined
+  readonly onFinish?: (() => void) | undefined
+  readonly onBack: () => void
+  readonly extraUtilities?: readonly ConversationHeaderUtility[]
+  /** Traduz o contexto cru do produto nas linhas do painel. Ausente, o painel não aparece. */
+  readonly contextEntriesOf?: (context: Record<string, unknown> | undefined) => readonly ConversationContextEntry[]
+  readonly quickReplies?: readonly QuickReply[]
+  /**
+   * 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.
+   */
+  readonly quickReplyVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => Record<string, string>
+  /** Etapa do fluxo ao lado do contexto (ex.: "Anotando o pedido"). */
+  readonly flowLabel?: string | undefined
+  /**
+   * Substitui o download local do transcript. Existe para o produto que exporta pela rota do
+   * servidor, onde o arquivo sai completo em vez de só com o que a tela carregou.
+   */
+  readonly onDownload?: (() => void) | undefined
+  /**
+   * Bloqueia o composer enquanto a conversa estiver com o bot. Ligado, responder sem assumir
+   * atropelaria o fluxo automático no meio de uma pergunta.
+   */
+  readonly requireTakeoverToReply?: boolean
+  /**
+   * Deixa marcar mensagens e copiar o trecho. É o que se faz para levar um pedaço da conversa a um
+   * e-mail ou a um chamado, sem baixar o transcript inteiro.
+   */
+  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). 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({
+  conversation,
+  now,
+  busy,
+  labels,
+  onTakeover,
+  onReturnToBot,
+  onFinish,
+  onBack,
+  extraUtilities,
+  contextEntriesOf,
+  quickReplies,
+  quickReplyVariablesFor,
+  flowLabel,
+  onDownload,
+  requireTakeoverToReply,
+  messageSelection,
+  initialComposerText,
+  renderAboveTranscript,
+  onAttach,
+  composer = 'simple',
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio,
+}: ConversationPaneProps) {
+  const context = useConversations()
+  if (!context) {
+    throw new Error('ConversationPane requires an ancestor <ConversationsProvider>')
+  }
+  const { api } = context
+
+  const { messages, refetch } = useConversationMessages(conversation.id)
+  const { context: conversationContext } = useConversationContext(conversation.id)
+  const [documentsOpen, setDocumentsOpen] = useState(false)
+  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.
+  useEffect(() => {
+    setSelectedMessageIds(new Set())
+    setDraft(initialComposerText ?? '')
+    setQueuedFiles([])
+  }, [conversation.id, initialComposerText])
+
+  function toggleMessageSelected(messageId: string): void {
+    setSelectedMessageIds((current) => {
+      const next = new Set(current)
+      if (next.has(messageId)) next.delete(messageId)
+      else next.add(messageId)
+      return next
+    })
+  }
+
+  /** Data, quem falou e o texto: fora do painel o trecho precisa se sustentar sozinho. */
+  function copySelectedMessages(): void {
+    const transcript = messages
+      .filter((message) => selectedMessageIds.has(message.id))
+      .map(
+        (message) =>
+          `[${new Date(message.timestamp).toLocaleString()}] ${message.sender}: ${message.content ?? `(${message.type})`}`,
+      )
+      .join('\n')
+    void navigator.clipboard.writeText(transcript)
+    setSelectedMessageIds(new Set())
+  }
+
+  // Abrir no topo do histórico obrigava a rolar semanas até a última mensagem — que é sempre o que
+  // interessa. O hook salta ao trocar de conversa sem arrastar quem estiver lendo o histórico.
+  const scroll = useScrollToLatestMessage({ conversationId: conversation.id, messageCount: messages.length })
+
+  // O evento traz só `{ direction, sender }` — quem tem o conteúdo é a query.
+  useConversationRealtime(conversation.id, () => {
+    void refetch()
+  })
+
+  const blocked = isWindowBlocking(
+    windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel }),
+  )
+
+  /**
+   * Falha vira aviso na tela em vez de exceção silenciosa: o atendente escreveu ou gravou, achou
+   * que mandou, e sem retorno não teria como saber que o cliente não recebeu nada.
+   */
+  /** Devolve se o envio passou: limpar o rascunho depois de uma falha apagaria o texto do operador. */
+  async function runSend(action: () => Promise<unknown>, fallback: string): Promise<boolean> {
+    setSendFailure(undefined)
+    try {
+      await action()
+      await refetch()
+      return true
+    } catch (error: unknown) {
+      setSendFailure(error instanceof Error ? error.message : fallback)
+      return false
+    }
+  }
+
+  async function handleSend(text: string): Promise<boolean> {
+    return runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure)
+  }
+
+  /**
+   * Reabrir a janela é ato de atendente: quem manda o template quer conversar. A tomada vai antes do
+   * envio — se ficasse depois, a resposta do cliente chegaria com a conversa ainda no bot e o fluxo
+   * automático responderia por cima de quem acabou de reabri-la.
+   */
+  async function handleSendTemplate(): Promise<void> {
+    if (conversation.mode !== 'human' && onTakeover) await onTakeover()
+    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)
+  }
+
+  function handleDownload(): void {
+    downloadTextFile(
+      buildTranscriptFilename(conversation.whatsappNumber, new Date()),
+      buildTranscriptText({
+        messages,
+        whatsappNumber: conversation.whatsappNumber,
+        clientName: conversation.clientName,
+      }),
+    )
+  }
+
+  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 (
+    <div className="cv-workspace-pane">
+      <ConversationHeader
+        conversation={conversation}
+        busy={busy}
+        {...(onTakeover ? { onTakeover } : {})}
+        {...(onReturnToBot ? { onReturnToBot } : {})}
+        {...(onFinish ? { onFinish } : {})}
+        onDownload={onDownload ?? handleDownload}
+        onBack={onBack}
+        onOpenDocuments={() => setDocumentsOpen(!documentsOpen)}
+        documentsOpen={documentsOpen}
+        {...(extraUtilities ? { extraUtilities } : {})}
+      />
+
+      {(contextEntries && contextEntries.length > 0) || flowLabel ? (
+        <ConversationContextPanel entries={contextEntries ?? []} {...(flowLabel ? { flowLabel } : {})} />
+      ) : null}
+      <ConversationDocumentsPanel conversationId={conversation.id} open={documentsOpen} />
+
+      {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. */}
+      <ConversationWallpaper
+        ref={scroll.containerRef}
+        onScroll={scroll.handleScroll}
+        className="cv-workspace-transcript"
+      >
+        {messages.map((message, index) => {
+          const previous = index > 0 ? messages[index - 1] : undefined
+          const startsNewDay =
+            !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
+
+          return (
+            <div key={message.id}>
+              {startsNewDay ? <DateDivider iso={message.timestamp} /> : null}
+              <MessageBubble
+                message={message}
+                isMine={message.direction === 'outbound'}
+                isFirstInGroup={!previous || previous.sender !== message.sender}
+                {...(messageSelection
+                  ? {
+                      isSelecting: selectedMessageIds.size > 0,
+                      isSelected: selectedMessageIds.has(message.id),
+                      onToggleSelect: () => toggleMessageSelected(message.id),
+                    }
+                  : {})}
+              />
+            </div>
+          )
+        })}
+      </ConversationWallpaper>
+
+      {messageSelection && selectedMessageIds.size > 0 ? (
+        <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())}>
+              {labels.bulkClear}
+            </button>
+            <button data-cv-tooltip={labels.copySelected} aria-label={labels.copySelected} type="button" onClick={copySelectedMessages}>
+              {labels.copySelected}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {sendFailure ? (
+        <p role="alert" className="cv-workspace-alert">
+          {sendFailure}
+        </p>
+      ) : null}
+
+      {blocked ? (
+        <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>
+      ) : 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 || isSendingDraft}
+          hasQueuedAttachments={queuedFiles.length > 0}
+          {...(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
+                          data-cv-tooltip={labels.attachmentRemove}
+                          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}
+          onChange={setDraft}
+          onSend={(text) => void handleSend(text)}
+          // Habilita clipe E microfone: o composer desenha o gravador sozinho quando existe um jeito
+          // de entregar arquivo, porque áudio gravado é um anexo como qualquer outro.
+          {...(onAttach ? { onAttach: (file: File) => void handleAttach(file) } : {})}
+          placeholder={labels.composerPlaceholder}
+          {...(quickReplies ? { quickReplies } : {})}
+          {...(quickReplyVariablesFor ? { quickReplyVariables: quickReplyVariablesFor(conversation, conversationContext) } : {})}
+        />
+      )}
+    </div>
+  )
+}