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

package/src/MessageComposer.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageComposer } from './MessageComposer'
+
+describe('MessageComposer', () => {
+  it('mostra a ação ociosa no lugar do enviar quando não há nada para enviar', () => {
+    const markup = renderToStaticMarkup(
+      <MessageComposer onSend={() => {}} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+
+    expect(markup).toContain('aria-label="Gravar áudio"')
+    expect(markup).not.toContain('aria-label="Enviar"')
+  })
+
+  it('mantém o botão de enviar quando não há ação ociosa', () => {
+    const markup = renderToStaticMarkup(<MessageComposer onSend={() => {}} />)
+
+    expect(markup).toContain('aria-label="Enviar"')
+  })
+
+  it('mostra o enviar assim que há texto, mesmo com ação ociosa configurada', () => {
+    const markup = renderToStaticMarkup(
+      <MessageComposer
+        onSend={() => {}}
+        value="oi"
+        onChange={() => {}}
+        idleAction={<button aria-label="Gravar áudio" />}
+      />,
+    )
+
+    expect(markup).toContain('aria-label="Enviar"')
+    expect(markup).not.toContain('aria-label="Gravar áudio"')
+  })
+})

package/src/MessageComposer.tsx

@@ -1,18 +1,56 @@
-import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent } from 'react'
+import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent, type ReactNode } from 'react'
+import { AudioRecorderButton } from './AudioRecorderButton'
 import type { ConversationsFeatures } from './types'
 import { cn } from './lib/cn'
+import { COMPOSER_BAR_CLASS, QUICK_REPLY_PILL_CLASS } from './composer.constant'
 import { EmojiPicker } from './EmojiPicker'
 
+/**
+ * Mensagem pronta que o atendente cola no campo com um clique.
+ *
+ * `text` aceita string com `{{variavel}}` ou função: a string cobre o caso comum (copy fixa com o
+ * nome do cliente no meio) sem o host escrever código, e a função cobre o que precisa de lógica —
+ * escolher texto por produto, pluralizar, formatar moeda.
+ */
+export interface QuickReply {
+  key: string
+  /** O que aparece no chip, emoji incluso: `👋 Saudação`. */
+  label: string
+  text: string | ((variables: Readonly<Record<string, string>>) => string)
+}
+
+/**
+ * Troca `{{nome}}` pelos valores passados. Variável ausente vira string vazia, e não o literal
+ * `{{nome}}`: mandar "Olá {{nome}}!" para o cliente é pior que mandar "Olá !".
+ */
+export function applyQuickReplyVariables(
+  template: string,
+  variables: Readonly<Record<string, string>> = {},
+): string {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave: string) => variables[chave] ?? '')
+}
+
+export function resolveQuickReply(
+  quickReply: QuickReply,
+  variables: Readonly<Record<string, string>> = {},
+): string {
+  return typeof quickReply.text === 'function'
+    ? quickReply.text(variables)
+    : applyQuickReplyVariables(quickReply.text, variables)
+}
+
 export interface MessageComposerLabels {
   emoji: string
   attach: string
   send: string
+  removeAttachment: string
 }
 
 export const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels = {
   emoji: 'Emoji',
   attach: 'Anexar',
   send: 'Enviar',
+  removeAttachment: 'Remover anexo',
 }
 
 export interface MessageComposerProps {
@@ -26,12 +64,23 @@ export interface MessageComposerProps {
   maxLength?: number
   disabled?: boolean
   acceptedFileTypes?: string
+  /**
+   * Ocupa o lugar do botão de enviar enquanto não há nada para enviar — é onde o WhatsApp põe o
+   * microfone. Fora do campo, o botão vira um bloco solto ao lado do pill e quebra a barra.
+   */
+  idleAction?: ReactNode
+  /** Mensagens prontas exibidas acima do campo. Vazio ou ausente, a faixa não é renderizada. */
+  quickReplies?: readonly QuickReply[]
+  /** Valores para `{{variavel}}` — tipicamente nome do cliente, produto, protocolo. */
+  quickReplyVariables?: Readonly<Record<string, string>>
   className?: string
   classNames?: Partial<MessageComposerClassNames>
 }
 
 export interface MessageComposerClassNames {
   root: string
+  quickReplies: string
+  quickReply: string
   field: string
 }
 
@@ -62,11 +111,14 @@ export const MessageComposer = ({
   onAttach,
   value: externalValue,
   onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
   features,
   placeholder = 'Digite uma mensagem...',
   maxLength,
   disabled = false,
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  idleAction,
   className,
   classNames,
   labels,
@@ -74,6 +126,7 @@ export const MessageComposer = ({
   const emojiLabel = labels?.emoji ?? DEFAULT_MESSAGE_COMPOSER_LABELS.emoji
   const attachLabel = labels?.attach ?? DEFAULT_MESSAGE_COMPOSER_LABELS.attach
   const sendLabel = labels?.send ?? DEFAULT_MESSAGE_COMPOSER_LABELS.send
+  const removeAttachmentLabel = labels?.removeAttachment ?? DEFAULT_MESSAGE_COMPOSER_LABELS.removeAttachment
   const [internalText, setInternalText] = useState('')
   const [showEmoji, setShowEmoji] = useState(false)
   const [attachments, setAttachments] = useState<FilePreview[]>([])
@@ -171,6 +224,24 @@ export const MessageComposer = ({
     }
   }, [text, setText])
 
+  /**
+   * Microfone por padrão, sem o host precisar compor nada.
+   *
+   * Antes o gravador era só um componente exportado e um slot vazio: cada inbox tinha que lembrar de
+   * juntar os dois. Dois produtos, dois resultados — um ligou, o outro não, e a ausência não dava
+   * erro nenhum. Um composer de WhatsApp sem microfone está incompleto, então o default certo é ter.
+   *
+   * Depende de `onAttach` porque áudio gravado é um arquivo para entregar, e microfone que grava sem
+   * ter para onde mandar é pior que microfone nenhum — o operador fala e o áudio evapora. É a mesma
+   * regra de capacidade usada no resto do pacote: sem a porta, a afordância não aparece.
+   *
+   * `idleAction` continua vencendo: quem já compunha o próprio gravador (com rótulos, limite de
+   * duração ou revisão diferentes) não muda de comportamento ao atualizar.
+   */
+  const effectiveIdleAction =
+    idleAction ??
+    (onAttach ? <AudioRecorderButton onRecorded={(file) => onAttach(file)} /> : undefined)
+
   const canSend = text.trim().length > 0 || attachments.length > 0
   const remaining = maxLength ? maxLength - text.length : null
 
@@ -178,7 +249,36 @@ export const MessageComposer = ({
     /* A barra é a superfície (cinza, largura cheia, sem raio) e o campo dentro é que arredonda —
        ordem do WhatsApp. Invertido, o pill arredondado ia até a borda da tela e os cantos
        descobriam o fundo branco da página, que lia como defeito. */
-    <div className={cn('bg-[#f0f2f5] px-2 py-2', className)}>
+    <div className={cn(COMPOSER_BAR_CLASS, className)}>
+      {/* Uma linha com scroll no celular e wrap no desktop: em 375px seis chips em wrap empurrariam
+          o campo para fora da tela, e o campo é a razão de a barra existir. */}
+      {quickReplies && quickReplies.length > 0 && (
+        <div
+          className={cn(
+            'mb-2 flex flex-nowrap gap-1 overflow-x-auto px-1 sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            classNames?.quickReplies,
+          )}
+        >
+          {quickReplies.map((quickReply) => (
+            <button
+              data-cv-tooltip={quickReply.label} aria-label={quickReply.label}
+              key={quickReply.key}
+              type="button"
+              // Preenche o campo em vez de enviar: mensagem pronta é ponto de partida, e quem
+              // atende quase sempre ajusta uma palavra antes de mandar. Enviar direto no clique
+              // transformaria um toque errado em mensagem entregue ao cliente.
+              onClick={() => {
+                setText(resolveQuickReply(quickReply, quickReplyVariables))
+                textareaRef.current?.focus()
+              }}
+              className={cn(QUICK_REPLY_PILL_CLASS, classNames?.quickReply)}
+            >
+              {quickReply.label}
+            </button>
+          ))}
+        </div>
+      )}
+
       {attachments.length > 0 && (
         <div className="flex gap-2 px-1 pb-2 overflow-x-auto">
           {attachments.map((a, i) => (
@@ -190,7 +290,7 @@ export const MessageComposer = ({
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                 </div>
               )}
-              <button onClick={() => removeAttachment(i)} className="absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs">✕</button>
+              <button data-cv-tooltip={removeAttachmentLabel} aria-label={removeAttachmentLabel} onClick={() => removeAttachment(i)} className="absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs">✕</button>
             </div>
           ))}
         </div>
@@ -199,7 +299,7 @@ export const MessageComposer = ({
       <div className={cn('flex items-end gap-1.5 rounded-xl bg-white px-3 py-2', classNames?.field)}>
         {showEmojiButton && (
           <div className="relative flex-shrink-0">
-            <button onClick={() => setShowEmoji(v => !v)} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors" aria-label={emojiLabel}>
+            <button data-cv-tooltip={emojiLabel} onClick={() => setShowEmoji(v => !v)} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors" aria-label={emojiLabel}>
               <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><circle cx="9" cy="9" r="0.5" fill="currentColor"/><circle cx="15" cy="9" r="0.5" fill="currentColor"/></svg>
             </button>
             {showEmoji && (
@@ -225,24 +325,29 @@ export const MessageComposer = ({
         {showAttachButton && (
           <>
             <input ref={fileInputRef} type="file" multiple accept={acceptedFileTypes} onChange={handleFileChange} className="hidden" />
-            <button onClick={() => fileInputRef.current?.click()} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors" aria-label={attachLabel}>
+            <button data-cv-tooltip={attachLabel} onClick={() => fileInputRef.current?.click()} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors" aria-label={attachLabel}>
               <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
             </button>
           </>
         )}
 
-        <button
-          onClick={sendMessage}
-          disabled={!canSend || disabled}
-          className={`w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${
-            canSend && !disabled
-              ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-          aria-label={sendLabel}
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-        </button>
+        {!canSend && effectiveIdleAction ? (
+          <div className="flex-shrink-0">{effectiveIdleAction}</div>
+        ) : (
+          <button
+            data-cv-tooltip={sendLabel}
+            onClick={sendMessage}
+            disabled={!canSend || disabled}
+            className={`w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${
+              canSend && !disabled
+                ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
+                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+            aria-label={sendLabel}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+          </button>
+        )}
       </div>
 
       {remaining !== null && (

package/src/MessageText.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import type { MessagePayload } from './types'
 import { useConversations } from './providers/ConversationsProvider'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
@@ -22,7 +23,7 @@ export function MessageText({ message }: MessageTextProps) {
   }, [message.content])
 
   if (message.type === 'template')
-    return <p className="text-sm italic text-[#667781]">{message.content ?? 'Template message'}</p>
+    return <p className={`text-sm italic ${CHAT_TEXT_SECONDARY_CLASS}`}>{message.content ?? 'Template message'}</p>
 
   return (
     <div

package/src/MessageTimestamp.tsx

@@ -1,4 +1,5 @@
 import { StatusTicks } from './StatusTicks'
+import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 
 export interface MessageTimestampProps {
   timestamp: string
@@ -9,7 +10,7 @@ export interface MessageTimestampProps {
 export function MessageTimestamp({ timestamp, status, isOutbound }: MessageTimestampProps) {
   return (
     <div className="flex items-center justify-end gap-[3px]">
-      <span className="text-[11px] text-[#667781] leading-[15px] select-none">
+      <span className={`text-[11px] ${CHAT_TEXT_SECONDARY_CLASS} leading-[15px] select-none`}>
         {timestamp}
       </span>
       {isOutbound && status && (

package/src/RichMessageComposer.test.tsx

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { RichMessageComposer, type RichComposerQuickReply, type RichComposerVariable } from './RichMessageComposer'
+
+const noop = () => {}
+
+const QUICK_REPLIES: RichComposerQuickReply[] = [
+  { id: 'greeting', label: 'Saudação', text: 'Olá!', tooltip: 'Abre o atendimento' },
+]
+
+const VARIABLES: RichComposerVariable[] = [
+  { id: 'name', label: 'Nome do cliente', value: '{{nome}}' },
+]
+
+describe('RichMessageComposer', () => {
+  it('mostra as dicas padrão em todas as ações da barra', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} onAttachFiles={noop} />,
+    )
+
+    for (const tooltip of ['Negrito', 'Itálico', 'Tachado', 'Monoespaçado', 'Anexar arquivo', 'Enviar']) {
+      expect(markup).toContain(`data-cv-tooltip="${tooltip}"`)
+    }
+  })
+
+  it('deixa o host trocar o texto de uma dica sem mexer nas outras', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} tooltips={{ bold: 'Deixar em negrito' }} />,
+    )
+
+    expect(markup).toContain('data-cv-tooltip="Deixar em negrito"')
+    expect(markup).not.toContain('data-cv-tooltip="Negrito"')
+    expect(markup).toContain('data-cv-tooltip="Itálico"')
+  })
+
+  it('esconde só a ação que o host desligou', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} toolbar={{ monospace: false }} />,
+    )
+
+    expect(markup).not.toContain('data-cv-tooltip="Monoespaçado"')
+    expect(markup).toContain('data-cv-tooltip="Negrito"')
+  })
+
+  it('não desenha o anexo quando não há como anexar', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).not.toContain('data-cv-tooltip="Anexar arquivo"')
+  })
+
+  it('desenha os chips de resposta rápida com o rótulo e a dica do host', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} quickReplies={QUICK_REPLIES} />,
+    )
+
+    expect(markup).toContain('Saudação')
+    expect(markup).toContain('data-cv-tooltip="Abre o atendimento"')
+  })
+
+  it('só oferece variáveis quando o host manda alguma', () => {
+    const semVariaveis = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+    const comVariaveis = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} variables={VARIABLES} />,
+    )
+
+    expect(semVariaveis).not.toContain('data-cv-tooltip="Variáveis disponíveis"')
+    expect(comVariaveis).toContain('data-cv-tooltip="Variáveis disponíveis"')
+  })
+
+  it('nasce com toda formatação apagada, e diz isso ao leitor de tela', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).toContain('aria-pressed="false"')
+    expect(markup).not.toContain('aria-pressed="true"')
+  })
+
+  it('cede o lugar do enviar à ação ociosa enquanto não há texto', () => {
+    const vazio = renderToStaticMarkup(
+      <RichMessageComposer value="" onChange={noop} onSend={noop} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+    const comTexto = renderToStaticMarkup(
+      <RichMessageComposer value="oi" onChange={noop} onSend={noop} idleAction={<button aria-label="Gravar áudio" />} />,
+    )
+
+    expect(vazio).toContain('aria-label="Gravar áudio"')
+    expect(vazio).not.toContain('data-cv-tooltip="Enviar"')
+    expect(comTexto).toContain('data-cv-tooltip="Enviar"')
+  })
+
+  it('desenha as quatro formatações abertas enquanto a barra não foi medida', () => {
+    const markup = renderToStaticMarkup(<RichMessageComposer value="" onChange={noop} onSend={noop} />)
+
+    expect(markup).toContain('data-cv-tooltip="Negrito"')
+    // O botão que recolhe as quatro só aparece com a barra medida e estreita.
+    expect(markup).not.toContain('data-cv-tooltip="Formatação"')
+  })
+
+  it('mostra o enviar com anexo na fila e nenhum texto, senão a imagem fica presa', () => {
+    const markup = renderToStaticMarkup(
+      <RichMessageComposer
+        value=""
+        onChange={noop}
+        onSend={noop}
+        hasQueuedAttachments
+        idleAction={<button aria-label="Gravar áudio" />}
+      />,
+    )
+
+    expect(markup).toContain('data-cv-tooltip="Enviar"')
+    expect(markup).not.toContain('aria-label="Gravar áudio"')
+  })
+})