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

package/dist/preview/index.d.ts

@@ -224,10 +224,21 @@ declare const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels;
 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;
 }
-declare function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }: AudioRecorderButtonProps): react.JSX.Element;
+declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
 
 /**
  * Roteiro que mantém o preview vivo: sem tráfego chegando, a inbox é uma tela estática e as

package/dist/preview/index.js

@@ -6,7 +6,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-FWNAWAJP.js";
+} from "../chunk-3RKFU46R.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -856,6 +856,7 @@ var DEFAULT_AUDIO_RECORDER_BUTTON_LABELS = {
   unsupported: "Este navegador n\xE3o grava \xE1udio.",
   denied: "Sem permiss\xE3o para usar o microfone."
 };
+var DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1e3;
 var RECORDING_FORMATS = [
   { mimeType: "audio/ogg;codecs=opus", uploadMimeType: "audio/ogg", extension: "ogg" },
   { mimeType: "audio/mp4", uploadMimeType: "audio/mp4", extension: "m4a" },
@@ -866,11 +867,19 @@ function resolveRecordingFormat() {
   if (typeof MediaRecorder.isTypeSupported !== "function") return RECORDING_FORMATS[0];
   return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType));
 }
-function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }) {
+function AudioRecorderButton({
+  onRecorded,
+  onFailure,
+  onRecordingChange,
+  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
+  labels,
+  disabled
+}) {
   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(null);
+  const autoStopRef = useRef(void 0);
   const stop = useCallback(() => {
     recorderRef.current?.stop();
   }, []);
@@ -889,7 +898,9 @@ function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }) {
       });
       recorder.addEventListener("stop", () => {
         stream.getTracks().forEach((track) => track.stop());
+        clearTimeout(autoStopRef.current);
         setIsRecording(false);
+        onRecordingChange?.(false);
         recorderRef.current = null;
         const blob = new Blob(chunks, { type: format.uploadMimeType });
         void onRecorded(
@@ -898,11 +909,13 @@ 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 /* @__PURE__ */ jsx(
     "button",
     {
@@ -912,7 +925,7 @@ function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }) {
       title: isRecording ? stopLabel : startLabel,
       "aria-label": isRecording ? stopLabel : startLabel,
       "aria-pressed": isRecording,
-      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"}`,
+      className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-colors ${isRecording ? "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"}`,
       children: isRecording ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
         /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
         /* @__PURE__ */ jsx("path", { d: "M19 11a7 7 0 0 1-14 0" }),
@@ -973,6 +986,7 @@ function ConversationPreview({
   const [messages, setMessages] = useState2([]);
   const [failure, setFailure] = useState2(void 0);
   const [loadFailure, setLoadFailure] = useState2(void 0);
+  const [isRecording, setIsRecording] = useState2(false);
   const [pendingLocal, setPendingLocal] = useState2([]);
   const loadMessagesRef = useRef2(loadMessages);
   const bottomRef = useRef2(null);
@@ -1093,12 +1107,13 @@ function ConversationPreview({
       {
         onSend: (text) => void handleSend(text),
         onAttach: uploadMedia ? (file) => void handleAttach(file) : void 0,
-        placeholder: placeholder ?? "Escreva como o cliente\u2026",
+        placeholder: isRecording ? "Gravando\u2026 toque no quadrado para enviar" : placeholder ?? "Escreva como o cliente\u2026",
         idleAction: uploadMedia ? /* @__PURE__ */ jsx2(
           AudioRecorderButton,
           {
             onRecorded: (file) => void handleAttach(file),
-            onFailure: (message) => setFailure(message)
+            onFailure: (message) => setFailure(message),
+            onRecordingChange: setIsRecording
           }
         ) : void 0
       }

package/package.json

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

package/src/MessageComposer.tsx

@@ -3,6 +3,40 @@ import type { ConversationsFeatures } from './types'
 import { cn } from './lib/cn'
 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
@@ -31,12 +65,18 @@ export interface MessageComposerProps {
    * 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
 }
 
@@ -67,6 +107,8 @@ export const MessageComposer = ({
   onAttach,
   value: externalValue,
   onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
   features,
   placeholder = 'Digite uma mensagem...',
   maxLength,
@@ -185,6 +227,37 @@ export const MessageComposer = ({
        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)}>
+      {/* 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
+              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(
+                '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',
+                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) => (

package/src/RichMessageComposer.test.tsx

@@ -0,0 +1,83 @@
+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(`title="${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('title="Deixar em negrito"')
+    expect(markup).not.toContain('title="Negrito"')
+    expect(markup).toContain('title="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('title="Monoespaçado"')
+    expect(markup).toContain('title="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('title="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('title="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('title="Variáveis disponíveis"')
+    expect(comVariaveis).toContain('title="Variáveis disponíveis"')
+  })
+
+  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('title="Enviar"')
+    expect(comTexto).toContain('title="Enviar"')
+  })
+})