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

package/src/RichMessageComposer.tsx

@@ -0,0 +1,379 @@
+/**
+ * Barra de composição do atendente: texto rico com a formatação do WhatsApp, respostas rápidas e
+ * anexos.
+ *
+ * Distinto do `MessageComposer`, que é um `textarea` simples: aqui o operador vê o negrito em
+ * negrito enquanto escreve, e não os asteriscos. Quem só precisa de uma caixa de texto continua no
+ * `MessageComposer`.
+ *
+ * Nada aqui sabe de produto. O que aparece na barra é decidido por `toolbar`, o texto de cada dica
+ * por `tooltips`, e as respostas rápidas chegam prontas por `quickReplies` — rótulo e conteúdo são
+ * do host, a mecânica é daqui.
+ */
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, type KeyboardEvent, type ChangeEvent, type FormEvent, type ReactNode } from 'react'
+import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces } from 'lucide-react'
+
+import { cn } from './lib/cn'
+import { htmlToWA, waToHTML } from './lib/whatsapp-formatting'
+import { SimpleEmojiPicker } from './SimpleEmojiPicker'
+import { DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
+
+/** Cada ação que a barra sabe oferecer. `toolbar` decide quais delas aparecem. */
+export const RICH_COMPOSER_ACTION = {
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  STRIKETHROUGH: 'strikethrough',
+  MONOSPACE: 'monospace',
+  EMOJI: 'emoji',
+  ATTACH: 'attach',
+  VARIABLES: 'variables',
+} as const
+export type RichComposerAction = (typeof RICH_COMPOSER_ACTION)[keyof typeof RICH_COMPOSER_ACTION]
+
+/** Texto das dicas. O host troca só o que quiser; o resto fica no padrão. */
+export interface RichComposerTooltips {
+  bold: string
+  italic: string
+  strikethrough: string
+  monospace: string
+  emoji: string
+  attach: string
+  send: string
+  variables: string
+}
+
+export const DEFAULT_RICH_COMPOSER_TOOLTIPS: RichComposerTooltips = {
+  bold: 'Negrito',
+  italic: 'Itálico',
+  strikethrough: 'Tachado',
+  monospace: 'Monoespaçado',
+  emoji: 'Emojis',
+  attach: 'Anexar arquivo',
+  send: 'Enviar',
+  variables: 'Variáveis disponíveis',
+}
+
+/**
+ * Um valor que o operador pode inserir no texto sem digitar. `value` é o que entra no campo — pode
+ * ser o dado já resolvido ("Anderson") ou um marcador a resolver depois ("{{nome}}"): quem decide é
+ * o host, porque só ele sabe se a substituição acontece aqui ou no envio.
+ */
+export interface RichComposerVariable {
+  id: string
+  label: string
+  value: string
+  /** Prévia do que será inserido, para o operador conferir antes de tocar. */
+  tooltip?: string
+}
+
+/** Uma resposta rápida: o que o operador lê no chip e o que cai no campo ao tocar nele. */
+export interface RichComposerQuickReply {
+  id: string
+  label: string
+  text: string
+  /** Dica ao passar o mouse. Sem isto, o chip não tem `title` — rótulo curto já se explica. */
+  tooltip?: string
+}
+
+/**
+ * Cada formatação vira o elemento correspondente dentro do campo, não os asteriscos crus: o ponto
+ * do editor rico é o operador ver o negrito em negrito. A conversão para a notação do WhatsApp
+ * acontece na saída, no `htmlToWA`.
+ */
+const FORMATTING_ELEMENT = {
+  bold: 'strong',
+  italic: 'em',
+  strikethrough: 'del',
+  monospace: 'code',
+} as const
+
+const MONOSPACE_CLASS = 'bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm'
+
+/** Handle imperativo: `contentEditable` controlado pelo React perde o cursor a cada tecla. */
+export interface RichMessageComposerHandle {
+  setContent: (text: string) => void
+  clear: () => void
+  focus: () => void
+}
+
+export interface RichMessageComposerProps {
+  /** Texto na notação do WhatsApp (`*negrito*`), não HTML. */
+  value: string
+  onChange: (value: string) => void
+  onSend: () => void
+  onAttachFiles?: (files: FileList) => void
+  quickReplies?: RichComposerQuickReply[]
+  /** Variáveis que o operador pode inserir no texto. Vazio ou ausente, o botão não aparece. */
+  variables?: RichComposerVariable[]
+  /**
+   * Quais ações aparecem. Ausente, todas aparecem — menos as que não têm como funcionar (anexo sem
+   * `onAttachFiles` some sozinho, porque botão que não faz nada é pior que botão nenhum).
+   */
+  toolbar?: Partial<Record<RichComposerAction, boolean>>
+  tooltips?: Partial<RichComposerTooltips>
+  placeholder?: string
+  disabled?: boolean
+  isSending?: boolean
+  /** Ocupa o lugar do enviar enquanto não há nada para enviar — onde o WhatsApp põe o microfone. */
+  idleAction?: ReactNode
+  /** Prévia dos anexos já escolhidos, desenhada pelo host acima da barra. */
+  attachmentsPreview?: ReactNode
+  acceptedFileTypes?: string
+  className?: string
+}
+
+export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMessageComposerProps>(function RichMessageComposer({
+  value,
+  onChange,
+  onSend,
+  onAttachFiles,
+  quickReplies,
+  variables,
+  toolbar,
+  tooltips,
+  placeholder,
+  disabled = false,
+  isSending = false,
+  idleAction,
+  attachmentsPreview,
+  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  className,
+}, ref) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const variablesRef = useRef<HTMLDivElement>(null)
+  const [isVariablesOpen, setIsVariablesOpen] = useState(false)
+
+  useEffect(() => {
+    if (!isVariablesOpen) return
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!variablesRef.current?.contains(event.target as Node)) setIsVariablesOpen(false)
+    }
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    return () => document.removeEventListener('mousedown', closeOnOutsideClick)
+  }, [isVariablesOpen])
+
+  const tooltipOf = (action: keyof RichComposerTooltips): string =>
+    tooltips?.[action] ?? DEFAULT_RICH_COMPOSER_TOOLTIPS[action]
+  const shows = (action: RichComposerAction): boolean => toolbar?.[action] !== false
+
+  /** Escreve no campo sem passar pelo React: `contentEditable` controlado perde o cursor a cada tecla. */
+  const replaceContent = useCallback((text: string) => {
+    const editor = editorRef.current
+    if (!editor) return
+    editor.innerHTML = waToHTML(text)
+    onChange(htmlToWA(editor.innerHTML))
+    editor.focus()
+  }, [onChange])
+
+  useImperativeHandle(ref, () => ({
+    setContent: replaceContent,
+    clear: () => {
+      const editor = editorRef.current
+      if (!editor) return
+      editor.innerHTML = ''
+      onChange('')
+    },
+    focus: () => editorRef.current?.focus(),
+  }), [onChange, replaceContent])
+
+  /** Range vivo dentro do campo, ou `undefined` se o cursor está em outro lugar da página. */
+  const currentRange = useCallback((): Range | undefined => {
+    const editor = editorRef.current
+    if (!editor) return undefined
+    editor.focus()
+    const selection = window.getSelection()
+    if (!selection?.rangeCount || !editor.contains(selection.anchorNode)) return undefined
+    return selection.getRangeAt(0)
+  }, [])
+
+  const commitRange = useCallback((range: Range, node: Node) => {
+    const selection = window.getSelection()
+    range.setStartAfter(node)
+    range.collapse(true)
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+    onChange(htmlToWA(editorRef.current?.innerHTML ?? ''))
+  }, [onChange])
+
+  const insertAtCursor = useCallback((fragment: string) => {
+    const range = currentRange()
+    if (!range) return
+    range.deleteContents()
+    const textNode = document.createTextNode(fragment)
+    range.insertNode(textNode)
+    commitRange(range, textNode)
+  }, [commitRange, currentRange])
+
+  /**
+   * Envolve a seleção no elemento da formatação. Sem seleção não faz nada: abrir a marcação e
+   * esperar que o operador digite dentro dela é o caminho que sai com marcador sobrando quando ele
+   * clica noutro lugar antes.
+   */
+  const wrapSelection = useCallback((action: keyof typeof FORMATTING_ELEMENT) => {
+    const range = currentRange()
+    const selectedText = range?.toString()
+    if (!range || !selectedText) return
+    range.deleteContents()
+    const wrapper = document.createElement(FORMATTING_ELEMENT[action])
+    if (action === 'monospace') wrapper.className = MONOSPACE_CLASS
+    wrapper.textContent = selectedText
+    range.insertNode(wrapper)
+    commitRange(range, wrapper)
+  }, [commitRange, currentRange])
+
+  const handleInput = useCallback((event: FormEvent<HTMLDivElement>) => {
+    onChange(htmlToWA(event.currentTarget.innerHTML))
+  }, [onChange])
+
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      if (!disabled) onSend()
+    }
+  }, [disabled, onSend])
+
+  const handleFileChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files?.length) onAttachFiles?.(event.target.files)
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }, [onAttachFiles])
+
+  const canSend = value.trim().length > 0
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      {attachmentsPreview}
+
+      {quickReplies?.length ? (
+        /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
+           celular come a altura da conversa, que é o que o operador precisa ver. */
+        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {quickReplies.map((quickReply) => (
+            <button
+              key={quickReply.id}
+              type="button"
+              title={quickReply.tooltip}
+              onClick={() => replaceContent(quickReply.text)}
+              className="whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
+            >
+              {quickReply.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap items-end gap-2">
+        {/* Só no desktop: no celular não há como selecionar texto e tocar no botão sem perder a
+            seleção, e a formatação sai digitada à mão de qualquer jeito. */}
+        <div className="mb-0.5 hidden items-center gap-0.5 sm:flex">
+          {([
+            [RICH_COMPOSER_ACTION.BOLD, Bold],
+            [RICH_COMPOSER_ACTION.ITALIC, Italic],
+            [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
+            [RICH_COMPOSER_ACTION.MONOSPACE, Code],
+          ] as const)
+            .filter(([action]) => shows(action))
+            .map(([action, Icon]) => (
+              <button
+                key={action}
+                type="button"
+                onClick={() => wrapSelection(action)}
+                title={tooltipOf(action)}
+                aria-label={tooltipOf(action)}
+                className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+              >
+                <Icon size={15} />
+              </button>
+            ))}
+        </div>
+
+        {shows(RICH_COMPOSER_ACTION.EMOJI) ? (
+          <SimpleEmojiPicker onSelect={insertAtCursor} label={tooltipOf('emoji')} />
+        ) : null}
+
+        {variables?.length && shows(RICH_COMPOSER_ACTION.VARIABLES) ? (
+          <div ref={variablesRef} className="relative">
+            <button
+              type="button"
+              onClick={() => setIsVariablesOpen((open) => !open)}
+              title={tooltipOf('variables')}
+              aria-label={tooltipOf('variables')}
+              aria-expanded={isVariablesOpen}
+              className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+            >
+              <Braces size={18} />
+            </button>
+            {isVariablesOpen ? (
+              <div className="absolute bottom-full left-0 z-20 mb-2 max-h-56 w-64 overflow-y-auto rounded-xl border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+                {variables.map((variable) => (
+                  <button
+                    key={variable.id}
+                    type="button"
+                    title={variable.tooltip ?? variable.value}
+                    onClick={() => { insertAtCursor(variable.value); setIsVariablesOpen(false) }}
+                    className="flex w-full flex-col items-start px-3 py-1.5 text-left hover:bg-teal-50 dark:hover:bg-teal-950/40"
+                  >
+                    <span className="text-sm text-gray-800 dark:text-gray-100">{variable.label}</span>
+                    <span className="font-mono text-xs text-gray-400 dark:text-gray-500">{variable.value}</span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {onAttachFiles && shows(RICH_COMPOSER_ACTION.ATTACH) ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept={acceptedFileTypes}
+              onChange={handleFileChange}
+              className="hidden"
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              title={tooltipOf('attach')}
+              aria-label={tooltipOf('attach')}
+              className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+            >
+              <Paperclip size={18} />
+            </button>
+          </>
+        ) : null}
+
+        <div
+          ref={editorRef}
+          contentEditable={!disabled}
+          suppressContentEditableWarning
+          role="textbox"
+          aria-multiline="true"
+          aria-label={placeholder}
+          data-placeholder={placeholder}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          style={{ minHeight: '36px', maxHeight: '120px' }}
+          className="flex-1 min-w-[180px] overflow-y-auto rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_em]:italic [&_del]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
+        />
+
+        {!canSend && idleAction ? (
+          <div className="flex-shrink-0">{idleAction}</div>
+        ) : (
+          <button
+            type="button"
+            onClick={onSend}
+            disabled={disabled || isSending || !canSend}
+            title={tooltipOf('send')}
+            aria-label={tooltipOf('send')}
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-teal-600 text-white transition-colors hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {isSending ? <span className="text-xs">⏳</span> : <SendHorizonal size={16} />}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+})

package/src/index.ts

@@ -6,6 +6,15 @@ export { AudioPlayer } from './AudioPlayer'
 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 { RichMessageComposer, RICH_COMPOSER_ACTION, DEFAULT_RICH_COMPOSER_TOOLTIPS } from './RichMessageComposer'
+export type {
+  RichMessageComposerProps,
+  RichComposerAction,
+  RichComposerTooltips,
+  RichComposerQuickReply,
+  RichComposerVariable,
+  RichMessageComposerHandle,
+} from './RichMessageComposer'
 export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
@@ -181,3 +190,5 @@ export type { ConversationRealtimeHandler } from './hooks/useConversationRealtim
 export type { AsyncResourceState } from './hooks/useAsyncResource'
 export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
 export type { ConversationHeaderUtility } from './ConversationHeader'
+export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
+export type { QuickReply } from './MessageComposer'

package/src/preview/AudioRecorderButton.tsx

@@ -27,10 +27,28 @@ export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
 export interface AudioRecorderButtonProps {
   onRecorded: (file: File) => void | Promise<void>
   onFailure?: (message: string) => void
+  /**
+   * Avisa quando a gravação começa e termina. O botão é um interruptor — o segundo toque é que
+   * envia — e sem um aviso fora dele o operador grava, não vê nada acontecer e desiste achando
+   * que o microfone está quebrado.
+   */
+  onRecordingChange?: (isRecording: boolean) => void
+  /**
+   * Teto de duração da gravação, em milissegundos. Passado o tempo, o gravador para e envia o que
+   * tem. Produto com limite próprio sobrescreve.
+   */
+  maxDurationMilliseconds?: number
   labels?: Partial<AudioRecorderButtonLabels>
   disabled?: boolean
 }
 
+/**
+ * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
+ * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
+ * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
+ */
+export const DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1000
+
 /**
  * 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
@@ -52,11 +70,19 @@ export function resolveRecordingFormat(): RecordingFormat | undefined {
   return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
 }
 
-export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }: AudioRecorderButtonProps) {
+export function AudioRecorderButton({
+  onRecorded,
+  onFailure,
+  onRecordingChange,
+  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
+  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 autoStopRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
   const stop = useCallback(() => {
     recorderRef.current?.stop()
@@ -81,7 +107,9 @@ export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }:
         // 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())
+        clearTimeout(autoStopRef.current)
         setIsRecording(false)
+        onRecordingChange?.(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.
@@ -93,11 +121,13 @@ export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }:
 
       recorderRef.current = recorder
       recorder.start()
+      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds)
       setIsRecording(true)
+      onRecordingChange?.(true)
     } catch {
       onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
     }
-  }, [labels?.denied, labels?.unsupported, onFailure, onRecorded])
+  }, [labels?.denied, labels?.unsupported, maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange])
 
   return (
     <button
@@ -111,7 +141,7 @@ export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }:
          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'
+          ? 'animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600'
           : 'text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
       }`}
     >

package/src/preview/ConversationPreview.tsx

@@ -128,6 +128,7 @@ export function ConversationPreview({
   const [messages, setMessages] = useState<MessagePayload[]>([])
   const [failure, setFailure] = useState<string | undefined>(undefined)
   const [loadFailure, setLoadFailure] = useState<string | undefined>(undefined)
+  const [isRecording, setIsRecording] = useState(false)
   // Mensagens que o servidor ainda não devolveu. Sem isto, quem não consegue LER a conversa (sessão
   // ausente, API fora) digita, envia com sucesso e não vê absolutamente nada mudar — o preview fica
   // indistinguível de quebrado. São descartadas assim que uma leitura dá certo: aí quem manda na
@@ -300,12 +301,18 @@ export function ConversationPreview({
       <MessageComposer
         onSend={(text) => void handleSend(text)}
         onAttach={uploadMedia ? (file) => void handleAttach(file) : undefined}
-        placeholder={placeholder ?? 'Escreva como o cliente…'}
+        /* Gravando, o campo diz o que falta fazer: o botão é um interruptor e o segundo toque é
+           que envia — sem esse aviso o operador grava, não vê nada acontecer e conclui que o
+           microfone está quebrado. */
+        placeholder={
+          isRecording ? 'Gravando… toque no quadrado para enviar' : (placeholder ?? 'Escreva como o cliente…')
+        }
         idleAction={
           uploadMedia ? (
             <AudioRecorderButton
               onRecorded={(file) => void handleAttach(file)}
               onFailure={(message) => setFailure(message)}
+              onRecordingChange={setIsRecording}
             />
           ) : undefined
         }

package/src/quickReply.test.ts

@@ -0,0 +1,58 @@
+/**
+ * Guarda a interpolação das mensagens rápidas.
+ *
+ * O caso que decide o desenho: variável ausente. Deixar `{{nome}}` no texto significa o atendente
+ * mandar "Olá {{nome}}!" para o cliente — pior que a saudação sem nome.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
+
+describe('applyQuickReplyVariables', () => {
+  it('troca a variável pelo valor', () => {
+    expect(applyQuickReplyVariables('Olá {{nome}}!', { nome: 'Marina' })).toBe('Olá Marina!')
+  })
+
+  it('aceita espaço dentro das chaves', () => {
+    expect(applyQuickReplyVariables('Olá {{ nome }}!', { nome: 'Rita' })).toBe('Olá Rita!')
+  })
+
+  it('troca todas as ocorrências', () => {
+    expect(applyQuickReplyVariables('{{nome}}, confirma? Obrigado, {{nome}}.', { nome: 'Ana' })).toBe(
+      'Ana, confirma? Obrigado, Ana.',
+    )
+  })
+
+  // Nunca vaza o literal para o cliente.
+  it('apaga a variável que não foi passada', () => {
+    expect(applyQuickReplyVariables('Olá {{nome}}!', {})).toBe('Olá !')
+    expect(applyQuickReplyVariables('Olá {{nome}}!')).toBe('Olá !')
+  })
+
+  it('não mexe em texto sem variável', () => {
+    expect(applyQuickReplyVariables('Bom dia!', { nome: 'X' })).toBe('Bom dia!')
+  })
+})
+
+describe('resolveQuickReply', () => {
+  it('interpola quando o texto é string', () => {
+    const resolvido = resolveQuickReply({ key: 'g', label: '👋', text: 'Olá {{nome}}!' }, { nome: 'Rita' })
+
+    expect(resolvido).toBe('Olá Rita!')
+  })
+
+  // A função existe para o que a string não resolve: escolher copy por produto, pluralizar, formatar.
+  it('chama a função com as variáveis', () => {
+    const resolvido = resolveQuickReply(
+      { key: 's', label: '📋', text: (variables) => `Status de ${variables['produto'] ?? 'seu pedido'}` },
+      { produto: 'financiamento' },
+    )
+
+    expect(resolvido).toBe('Status de financiamento')
+  })
+
+  it('função sem variáveis não quebra', () => {
+    expect(resolveQuickReply({ key: 'c', label: '📞', text: () => 'Posso ligar?' })).toBe('Posso ligar?')
+  })
+})