@adatechnology/conversations-ui 0.1.0-rc.0 → 0.1.0-rc.10

package/src/index.ts

@@ -1,26 +1,90 @@
 export { MessageBubble } from './MessageBubble'
+export { InteractiveMessage, DEFAULT_INTERACTIVE_MESSAGE_LABELS } from './InteractiveMessage'
 export { ConversationWallpaper } from './Wallpaper'
 export { ConversationLocalesProvider, useConversationLocales } from './ConversationLocalesProvider'
 export { AudioPlayer } from './AudioPlayer'
-export { EmojiPicker } from './EmojiPicker'
-export { MessageComposer } from './MessageComposer'
-export { WhatsAppMessageEditor } from './WhatsAppMessageEditor'
+export { EmojiPicker, DEFAULT_EMOJI_PICKER_LABELS } from './EmojiPicker'
+export { EMOJI_CATEGORIES, searchEmojis } from './emojiCatalog'
+export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
+export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
-export { Avatar } from './Avatar'
-export { ConversationListItem } from './ConversationListItem'
+export { Avatar, DEFAULT_AVATAR_LABELS } from './Avatar'
+export { ConversationListItem, DEFAULT_CONVERSATION_LIST_ITEM_LABELS } from './ConversationListItem'
 export { ToastProvider, useToast, toast } from './Toast'
 
 export { StatusTicks } from './StatusTicks'
-export { Lightbox } from './Lightbox'
+export { Lightbox, DEFAULT_LIGHTBOX_LABELS } from './Lightbox'
 export { MediaRenderer } from './MediaRenderer'
 export { FileIcon } from './FileIcon'
 export { MessageText } from './MessageText'
 export { MessageTimestamp } from './MessageTimestamp'
 export { MessageTail } from './MessageTail'
 
-export { useDarkMode } from './useDarkMode'
+// Operação da inbox: janela de 24h da Meta, linha com ações e painéis do atendimento. Regras da
+// plataforma e do ofício de atender, não de um produto — por isso moram aqui.
+export { CONVERSATION_WINDOW, WINDOW_FILTERS, windowOf, formatStalledFor } from './conversationWindow'
+export type { WindowOfParams } from './conversationWindow'
+// Canal de origem: capacidades por plataforma (janela de sessão, reabertura, tipo de identificador).
+export {
+  CONVERSATION_CHANNEL,
+  DEFAULT_CONVERSATION_CHANNEL,
+  CHANNEL_CAPABILITIES,
+  channelFiltersFor,
+  CHANNEL_FILTER_ALL,
+  REOPEN_MECHANISM,
+  HANDLE_KIND,
+  capabilitiesOf,
+  formatContactHandle,
+  contactFlag,
+} from './conversationChannel'
+export type {
+  ConversationChannel,
+  ChannelCapabilities,
+  ChannelFilter,
+  ChannelFilterOption,
+  ReopenMechanism,
+  HandleKind,
+  FormatContactHandleParams,
+} from './conversationChannel'
+export type { ConversationWindow } from './conversationWindow'
+export { ConversationRow } from './ConversationRow'
+export { ChannelIcon, CHANNEL_BRAND_COLOR } from './ChannelIcon'
+export type { ChannelIconProps } from './ChannelIcon'
+export type { ConversationRowProps, ConversationRowClassNames } from './ConversationRow'
+export { ConversationHeader, DEFAULT_CONVERSATION_HEADER_LABELS } from './ConversationHeader'
+export type {
+  ConversationHeaderProps,
+  ConversationHeaderLabels,
+  ConversationHeaderClassNames,
+} from './ConversationHeader'
+export { ConversationContextPanel, DEFAULT_CONVERSATION_CONTEXT_LABELS } from './ConversationContextPanel'
+export type {
+  ConversationContextPanelProps,
+  ConversationContextEntry,
+  ConversationContextPanelLabels,
+  ConversationContextPanelClassNames,
+} from './ConversationContextPanel'
+export { WindowExpiredNotice, isWindowBlocking, DEFAULT_WINDOW_EXPIRED_LABELS } from './WindowExpiredNotice'
+export type { WindowExpiredNoticeProps, WindowExpiredNoticeLabels } from './WindowExpiredNotice'
+export { DocumentsLibrary, DEFAULT_DOCUMENTS_LIBRARY_LABELS } from './DocumentsLibrary'
+export type { DocumentsLibraryProps, DocumentsLibraryLabels, DocumentsLibraryClassNames } from './DocumentsLibrary'
+export { DOCUMENT_SOURCE_FILTER } from './ConversationDocumentsPanel'
+export type { DocumentSourceFilter } from './ConversationDocumentsPanel'
+export type { ConversationDocumentsPanelClassNames } from './ConversationDocumentsPanel'
+export { ConversationDocumentsPanel, DEFAULT_CONVERSATION_DOCUMENTS_LABELS } from './ConversationDocumentsPanel'
+export type { ConversationDocumentsPanelProps, ConversationDocumentsPanelLabels } from './ConversationDocumentsPanel'
+export { buildTranscriptText, buildTranscriptFilename, downloadTextFile } from './conversationTranscript'
+export type { BuildTranscriptTextParams } from './conversationTranscript'
+
+export { useDarkMode, useIsDarkTheme } from './useDarkMode'
+export { useIsNarrow, NARROW_MAX_WIDTH_PX } from './useIsNarrow'
 export { useWaitingNotifications } from './useWaitingNotifications'
+export type {
+  UseWaitingNotificationsLabels,
+  UseWaitingNotificationsParams,
+  UseWaitingNotificationsResult,
+} from './useWaitingNotifications'
 
 export { ConversationsProvider, useConversations } from './providers/ConversationsProvider'
 
@@ -29,6 +93,11 @@ export { ConversationsProvider, useConversations } from './providers/Conversatio
 export { WhatsAppTemplateSettingsForm } from './settings/WhatsAppTemplateSettingsForm'
 export { WhatsAppCreateTemplateForm } from './settings/WhatsAppCreateTemplateForm'
 export { WelcomeFarewellForm } from './settings/WelcomeFarewellForm'
+export {
+  WhatsAppTemplatesSettings,
+  TEMPLATE_SETTINGS_TAB,
+  DEFAULT_TEMPLATES_SETTINGS_LABELS,
+} from './settings/WhatsAppTemplatesSettings'
 export { TopicsForm } from './settings/TopicsForm'
 
 // Camada headless (T6.9) — hooks de dados/ações independentes de qualquer tela, para o
@@ -38,27 +107,47 @@ export { useConversationList } from './hooks/useConversationList'
 export { useConversationContext } from './hooks/useConversationContext'
 export { useConversationDocuments } from './hooks/useConversationDocuments'
 export { useConversationRealtime, useGlobalRealtime } from './hooks/useConversationRealtime'
+export { useConversationActions, useInboxActions } from './hooks/useConversationActions'
 
 export { parseWhatsAppFormatting, waToHTML, htmlToWA, waToHTMLInline } from './lib/whatsapp-formatting'
 export { formatPhone, phoneInitials } from './lib/phone'
-export { formatTimestamp, formatFileSize } from './lib/format'
+// `formatDateTime` e `isSameDay` já eram usados pelas bolhas e pelo divisor de data; exportá-los
+// evita que cada host mantenha a própria cópia e acabe com timeline e transcript divergindo.
+export { formatTimestamp, formatFileSize, formatDateTime, isSameDay } from './lib/format'
 
 export type { MessagePayload, ConversationsUIConfig, ConversationsTheme, ConversationsFeatures } from './types'
-export type { ConversationsApi, SSEProvider, ConversationSummary, ConversationDocument } from './providers/types'
+export type { InteractivePayload, InteractiveSection, InteractiveOption, InteractiveSelection } from './types'
+export type {
+  ConversationsApi,
+  SSEProvider,
+  ConversationEventSource,
+  ConversationSummary,
+  ConversationDocument,
+  ConversationPage,
+  ConversationDocumentPage,
+  CompanyDocument,
+  CompanyDocumentPage,
+  ConversationTemplate,
+  ListConversationsParams,
+  ListDocumentsParams,
+} from './providers/types'
+export type { UseConversationActionsResult, UseInboxActionsResult } from './hooks/useConversationActions'
 
 export type { MessageBubbleProps } from './MessageBubble'
 export type { ConversationWallpaperProps } from './Wallpaper'
 export type { ConversationLocales, ConversationLocalesProviderProps } from './ConversationLocalesProvider'
 export type { AudioPlayerProps } from './AudioPlayer'
-export type { EmojiPickerProps } from './EmojiPicker'
-export type { MessageComposerProps } from './MessageComposer'
-export type { WhatsAppMessageEditorProps } from './WhatsAppMessageEditor'
+export type { EmojiPickerProps, EmojiPickerLabels } from './EmojiPicker'
+export type { EmojiEntry, EmojiCategory } from './emojiCatalog'
+export type { InteractiveMessageProps, InteractiveMessageLabels } from './InteractiveMessage'
+export type { MessageComposerProps, MessageComposerClassNames, MessageComposerLabels } from './MessageComposer'
+export type { WhatsAppMessageEditorProps, WhatsAppMessageEditorLabels } from './WhatsAppMessageEditor'
 export type { SimpleEmojiPickerProps } from './SimpleEmojiPicker'
-export type { DateDividerProps } from './DateDivider'
-export type { AvatarProps } from './Avatar'
-export type { ConversationListItemProps } from './ConversationListItem'
+export type { DateDividerProps, DateDividerClassNames } from './DateDivider'
+export type { AvatarProps, AvatarLabels } from './Avatar'
+export type { ConversationListItemProps, ConversationListItemLabels } from './ConversationListItem'
 export type { StatusTicksProps } from './StatusTicks'
-export type { LightboxProps } from './Lightbox'
+export type { LightboxProps, LightboxLabels } from './Lightbox'
 export type { MediaRendererProps, ResolveMediaUrl } from './MediaRenderer'
 export type { FileIconProps } from './FileIcon'
 export type { MessageTextProps } from './MessageText'
@@ -77,6 +166,11 @@ export type {
   WhatsAppCreateTemplateFormLabels,
 } from './settings/WhatsAppCreateTemplateForm'
 export type { WelcomeFarewellFormProps, WelcomeFarewellFormLabels } from './settings/WelcomeFarewellForm'
+export type {
+  WhatsAppTemplatesSettingsProps,
+  WhatsAppTemplatesSettingsLabels,
+  TemplateSettingsTab,
+} from './settings/WhatsAppTemplatesSettings'
 export type { TopicsFormProps, TopicItem, TopicsFormLabels } from './settings/TopicsForm'
 
 export type { UseConversationMessagesResult } from './hooks/useConversationMessages'
@@ -85,3 +179,5 @@ export type { UseConversationContextResult } from './hooks/useConversationContex
 export type { UseConversationDocumentsParams, UseConversationDocumentsResult } from './hooks/useConversationDocuments'
 export type { ConversationRealtimeHandler } from './hooks/useConversationRealtime'
 export type { AsyncResourceState } from './hooks/useAsyncResource'
+export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
+export type { ConversationHeaderUtility } from './ConversationHeader'

package/src/lib/cn.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test'
+
+import { cn } from './cn'
+
+describe('cn', () => {
+  // O contrato de `classNames`/`className` dos componentes depende disto: se o override não vencer,
+  // a API de customização é decorativa. Concatenar falharia justo no caso comum — o Tailwind emite
+  // `px-2` antes de `px-4`, então a base ganharia de quem quer apertar o espaçamento.
+  it('o override do host vence a classe base em conflito', () => {
+    expect(cn('px-4 py-3', 'px-2')).toBe('py-3 px-2')
+  })
+
+  it('mantém o que não conflita', () => {
+    expect(cn('flex items-center gap-3', 'gap-1')).toBe('flex items-center gap-1')
+  })
+
+  it('preserva classes próprias do pacote, que o merge não conhece', () => {
+    expect(cn('cv-row flex', 'bg-red-50')).toBe('cv-row flex bg-red-50')
+  })
+
+  it('ignora ausente, falso e vazio', () => {
+    expect(cn('border-b', undefined, false, '')).toBe('border-b')
+  })
+
+  it('aplica condicional na ordem recebida', () => {
+    const isCompact = false
+    expect(cn('mt-2', isCompact && 'mt-8', 'mt-4')).toBe('mt-4')
+  })
+})

package/src/lib/cn.ts

@@ -0,0 +1,15 @@
+/**
+ * Junta classes resolvendo conflitos de utilitário do Tailwind.
+ *
+ * Concatenar não basta: a ordem no atributo `class` não decide nada, quem decide é a ordem no CSS
+ * gerado. Com `px-4` na base e `px-2` vindo do host, o Tailwind emite `px-2` antes de `px-4` e a
+ * base ganharia — justo o caso de quem quer apertar o espaçamento. O `twMerge` descarta a classe
+ * base quando o host manda uma da mesma família, então o override do produto sempre vence.
+ */
+
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/lib/createMediaUrlResolver.ts

@@ -0,0 +1,33 @@
+/**
+ * Resolve a mídia de uma mensagem numa URL exibível, usando só o `ConversationsApi`.
+ *
+ * Mora no pacote, e não em cada host, porque a regra não tem nada de específico de produto: é a
+ * tradução de `uploadId`/`mediaId` pelos dois métodos que o próprio contrato já declara. Deixá-la no
+ * host significava que todo projeto que adotasse o SDK reescreveria as mesmas oito linhas — e, na
+ * prática, ninguém escrevia: o `MediaRenderer` só busca mídia pela porta `onResolveMediaUrl`, então
+ * onde nada era injetado foto, vídeo e áudio ficavam no placeholder para sempre.
+ */
+
+import type { MessagePayload } from '../types'
+import type { ConversationsApi } from '../providers/types'
+import type { ResolveMediaUrl } from '../MediaRenderer'
+
+export function createMediaUrlResolver(
+  api: Pick<ConversationsApi, 'getDocumentUrl' | 'getMediaProxyUrl'>,
+): ResolveMediaUrl {
+  return async (message: MessagePayload): Promise<string | null> => {
+    // Mídia já copiada para o storage do host: sai por URL assinada e o binário não passa pela API.
+    // `inline` porque aqui o arquivo é para VER na tela — `attachment` faria o navegador baixar.
+    if (message.uploadId) return api.getDocumentUrl(message.uploadId, 'inline')
+
+    // Antes da ingestão só existe o id na Meta, cuja URL expira; o backend busca e devolve base64.
+    // Data URL serve de `src` para `<img>`/`<video>`/`<audio>`: o bloqueio do Chrome a `data:` vale
+    // para navegação de topo, não para carregar mídia dentro da página.
+    if (message.mediaId) {
+      const { mimeType, data } = await api.getMediaProxyUrl(message.mediaId)
+      return `data:${mimeType};base64,${data}`
+    }
+
+    return null
+  }
+}

package/src/lib/paginated.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'bun:test'
+import { conversationsOf, documentsOf, totalOf } from './paginated'
+import type { ConversationDocument, ConversationSummary } from '../providers/types'
+
+const conversation = { id: '1', whatsappNumber: '5511900000000' } as ConversationSummary
+const document = { id: 'd1', filename: 'contrato.pdf' } as ConversationDocument
+
+describe('normalização de lista ou página', () => {
+  // As duas formas existem porque o contrato aceita as duas: array puro é o retorno original, e
+  // implementações antigas continuam válidas. Um consumidor que só tratasse uma delas quebraria
+  // em runtime, não no compilador.
+  it('aceita o array puro do contrato original', () => {
+    expect(conversationsOf([conversation])).toEqual([conversation])
+    expect(documentsOf([document])).toEqual([document])
+  })
+
+  it('desembrulha a forma paginada', () => {
+    expect(conversationsOf({ conversations: [conversation], total: 42 })).toEqual([conversation])
+    expect(documentsOf({ documents: [document], total: 7 })).toEqual([document])
+  })
+
+  it('usa o total do servidor quando ele vem, e o tamanho da página quando não vem', () => {
+    // A distinção importa: com array puro não dá para saber se a página é a última, então o
+    // melhor palpite honesto é o que se tem em mãos.
+    expect(totalOf({ conversations: [conversation], total: 42 })).toBe(42)
+    expect(totalOf([conversation])).toBe(1)
+  })
+
+  it('trata página vazia sem confundir com ausência de dados', () => {
+    expect(conversationsOf({ conversations: [], total: 0 })).toEqual([])
+    expect(totalOf({ conversations: [], total: 0 })).toBe(0)
+  })
+})

package/src/lib/paginated.ts

@@ -0,0 +1,26 @@
+import type {
+  ConversationDocument,
+  ConversationDocumentPage,
+  ConversationPage,
+  ConversationSummary,
+} from '../providers/types'
+
+/**
+ * `fetchConversations` e `getDocuments` devolvem o array puro (contrato original) ou uma página
+ * com total. Normalizar num lugar só evita que cada consumidor invente sua própria checagem —
+ * e um consumidor esquecido não falha no compilador, falha em runtime com `.map is not a
+ * function`.
+ */
+export function conversationsOf(result: ConversationSummary[] | ConversationPage): ConversationSummary[] {
+  return Array.isArray(result) ? result : result.conversations
+}
+
+export function documentsOf(result: ConversationDocument[] | ConversationDocumentPage): ConversationDocument[] {
+  return Array.isArray(result) ? result : result.documents
+}
+
+export function totalOf(
+  result: ConversationSummary[] | ConversationPage | ConversationDocument[] | ConversationDocumentPage,
+): number {
+  return Array.isArray(result) ? result.length : result.total
+}

package/src/lib/phone.ts

@@ -20,6 +20,40 @@ export function formatPhone(number: string): string {
   return number
 }
 
+// Mapa explícito em vez de derivar o emoji do código: prefixos são ambíguos (1 = EUA e Canadá,
+// 7 = Rússia e Cazaquistão) e mostrar a bandeira errada é pior do que não mostrar nenhuma.
+const COUNTRY_FLAG_BY_DIAL_CODE: Readonly<Record<string, string>> = {
+  '55': '🇧🇷',
+  '351': '🇵🇹',
+  '34': '🇪🇸',
+  '54': '🇦🇷',
+  '56': '🇨🇱',
+  '57': '🇨🇴',
+  '52': '🇲🇽',
+  '598': '🇺🇾',
+  '595': '🇵🇾',
+  '44': '🇬🇧',
+  '49': '🇩🇪',
+  '39': '🇮🇹',
+  '33': '🇫🇷',
+}
+
+/**
+ * Devolve string vazia quando não reconhece o país — quem renderiza decide se some com o espaço.
+ */
+export function phoneCountryFlag(number: string): string {
+  const digits = number.replace(/\D/g, '')
+
+  // Do prefixo mais longo para o mais curto: '55' casaria antes de '551' e daria bandeira errada
+  // em países de código de três dígitos.
+  for (const length of [3, 2, 1]) {
+    const flag = COUNTRY_FLAG_BY_DIAL_CODE[digits.slice(0, length)]
+    if (flag) return flag
+  }
+
+  return ''
+}
+
 export function phoneInitials(number: string): string {
   const digits = number.replace(/\D/g, '')
   return digits.slice(-2)

package/src/preview/AudioRecorderButton.tsx

@@ -0,0 +1,125 @@
+/**
+ * Gravação de áudio no simulador, pelo microfone do próprio navegador.
+ *
+ * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
+ * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
+ *
+ * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
+ * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
+ */
+
+import { useCallback, useRef, useState } from 'react'
+
+export interface AudioRecorderButtonLabels {
+  start: string
+  stop: string
+  unsupported: string
+  denied: string
+}
+
+export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
+  start: 'Gravar áudio',
+  stop: 'Parar gravação',
+  unsupported: 'Este navegador não grava áudio.',
+  denied: 'Sem permissão para usar o microfone.',
+}
+
+export interface AudioRecorderButtonProps {
+  onRecorded: (file: File) => void | Promise<void>
+  onFailure?: (message: string) => void
+  labels?: Partial<AudioRecorderButtonLabels>
+  disabled?: boolean
+}
+
+/**
+ * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
+ * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
+ * do envio que o formato é inválido é pior do que gravar já no formato certo.
+ */
+const RECORDING_FORMATS = [
+  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
+  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
+  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
+] as const
+
+export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
+
+/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
+export function resolveRecordingFormat(): RecordingFormat | undefined {
+  if (typeof MediaRecorder === 'undefined') return undefined
+  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
+  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
+}
+
+export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }: AudioRecorderButtonProps) {
+  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start
+  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop
+  const [isRecording, setIsRecording] = useState(false)
+  const recorderRef = useRef<MediaRecorder | null>(null)
+
+  const stop = useCallback(() => {
+    recorderRef.current?.stop()
+  }, [])
+
+  const start = useCallback(async () => {
+    const format = resolveRecordingFormat()
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported)
+      return
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType })
+      const chunks: Blob[] = []
+
+      recorder.addEventListener('dataavailable', (event) => {
+        if (event.data.size > 0) chunks.push(event.data)
+      })
+      recorder.addEventListener('stop', () => {
+        // Solta o microfone assim que para: sem isto o indicador de gravação do navegador fica
+        // aceso depois do envio, e o operador acha que o simulador continua ouvindo.
+        stream.getTracks().forEach((track) => track.stop())
+        setIsRecording(false)
+        recorderRef.current = null
+        // O `File` sai com o MIME sem os parâmetros de codec: `audio/ogg;codecs=opus` serve ao
+        // gravador, mas quem valida upload compara com `audio/ogg` puro.
+        const blob = new Blob(chunks, { type: format.uploadMimeType })
+        void onRecorded(
+          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType }),
+        )
+      })
+
+      recorderRef.current = recorder
+      recorder.start()
+      setIsRecording(true)
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
+    }
+  }, [labels?.denied, labels?.unsupported, onFailure, onRecorded])
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => (isRecording ? stop() : void start())}
+      title={isRecording ? stopLabel : startLabel}
+      aria-label={isRecording ? stopLabel : startLabel}
+      aria-pressed={isRecording}
+      /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está
+         vazio, e qualquer diferença de tamanho faz a barra pular a cada letra digitada. */
+      className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-colors ${
+        isRecording
+          ? 'bg-red-500 text-white hover:bg-red-600'
+          : 'text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+      }`}
+    >
+      {isRecording ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
+      ) : (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 11a7 7 0 0 1-14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>
+      )}
+    </button>
+  )
+}