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

package/dist/{chunk-FWNAWAJP.js → chunk-3RKFU46R.js}

@@ -864,6 +864,12 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
 // src/MessageComposer.tsx
 import { useState as useState6, useRef as useRef2, useCallback as useCallback2 } from "react";
 import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function applyQuickReplyVariables(template, variables = {}) {
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave) => variables[chave] ?? "");
+}
+function resolveQuickReply(quickReply, variables = {}) {
+  return typeof quickReply.text === "function" ? quickReply.text(variables) : applyQuickReplyVariables(quickReply.text, variables);
+}
 var DEFAULT_MESSAGE_COMPOSER_LABELS = {
   emoji: "Emoji",
   attach: "Anexar",
@@ -884,6 +890,8 @@ var MessageComposer = ({
   onAttach,
   value: externalValue,
   onChange: externalOnChange,
+  quickReplies,
+  quickReplyVariables,
   features,
   placeholder = "Digite uma mensagem...",
   maxLength,
@@ -994,6 +1002,31 @@ var 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. */
     /* @__PURE__ */ jsxs8("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), children: [
+      quickReplies && quickReplies.length > 0 && /* @__PURE__ */ jsx12(
+        "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
+          ),
+          children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              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
+              ),
+              children: quickReply.label
+            },
+            quickReply.key
+          ))
+        }
+      ),
       attachments.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex gap-2 px-1 pb-2 overflow-x-auto", children: attachments.map((a, i) => /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
         a.previewUrl ? /* @__PURE__ */ jsx12("img", { src: a.previewUrl, alt: "", className: "w-16 h-16 object-cover rounded-lg border border-gray-200" }) : /* @__PURE__ */ jsx12("div", { className: "w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5", children: [
           /* @__PURE__ */ jsx12("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
@@ -1724,6 +1757,8 @@ export {
   searchEmojis,
   DEFAULT_EMOJI_PICKER_LABELS,
   EmojiPicker,
+  applyQuickReplyVariables,
+  resolveQuickReply,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
   DEFAULT_ACCEPTED_FILE_TYPES,
   MessageComposer,

package/dist/index.d.ts

@@ -128,6 +128,25 @@ declare const EMOJI_CATEGORIES: readonly EmojiCategory[];
  */
 declare function searchEmojis(query: string): readonly EmojiEntry[];
 
+/**
+ * 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.
+ */
+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á !".
+ */
+declare function applyQuickReplyVariables(template: string, variables?: Readonly<Record<string, string>>): string;
+declare function resolveQuickReply(quickReply: QuickReply, variables?: Readonly<Record<string, string>>): string;
 interface MessageComposerLabels {
     emoji: string;
     attach: string;
@@ -150,11 +169,17 @@ 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>;
 }
 interface MessageComposerClassNames {
     root: string;
+    quickReplies: string;
+    quickReply: string;
     field: string;
 }
 /**
@@ -164,7 +189,7 @@ interface MessageComposerClassNames {
  * Produto com regra própria passa `acceptedFileTypes`.
  */
 declare const DEFAULT_ACCEPTED_FILE_TYPES: string;
-declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, features, placeholder, maxLength, disabled, acceptedFileTypes, idleAction, className, classNames, labels, }: MessageComposerProps) => react.JSX.Element;
+declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, quickReplies, quickReplyVariables, features, placeholder, maxLength, disabled, acceptedFileTypes, idleAction, className, classNames, labels, }: MessageComposerProps) => react.JSX.Element;
 
 interface WhatsAppMessageEditorLabels {
     bold: string;
@@ -1022,4 +1047,4 @@ interface AsyncResourceState<T> {
 
 declare function createMediaUrlResolver(api: Pick<ConversationsApi, 'getDocumentUrl' | 'getMediaProxyUrl'>): ResolveMediaUrl;
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarLabels, type AvatarProps, type BuildTranscriptTextParams, CHANNEL_BRAND_COLOR, CONVERSATION_WINDOW, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsProvider, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, NARROW_MAX_WIDTH_PX, ResolveMediaUrl, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, type TemplateSettingsTab, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseInboxActionsResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useDarkMode, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useToast, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarLabels, type AvatarProps, type BuildTranscriptTextParams, CHANNEL_BRAND_COLOR, CONVERSATION_WINDOW, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsProvider, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, NARROW_MAX_WIDTH_PX, type QuickReply, ResolveMediaUrl, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, type TemplateSettingsTab, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseInboxActionsResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useDarkMode, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useToast, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };

package/dist/index.js

@@ -23,6 +23,7 @@ import {
   MessageBubble,
   MessageComposer,
   StatusTicks,
+  applyQuickReplyVariables,
   cn,
   conversationsOf,
   createMediaUrlResolver,
@@ -33,13 +34,14 @@ import {
   isSameDay,
   phoneCountryFlag,
   phoneInitials,
+  resolveQuickReply,
   searchEmojis,
   totalOf,
   useAsyncResource,
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-FWNAWAJP.js";
+} from "./chunk-3RKFU46R.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -2076,6 +2078,7 @@ export {
   WhatsAppTemplateSettingsForm,
   WhatsAppTemplatesSettings,
   WindowExpiredNotice,
+  applyQuickReplyVariables,
   buildTranscriptFilename,
   buildTranscriptText,
   capabilitiesOf,
@@ -2094,6 +2097,7 @@ export {
   isWindowBlocking,
   parseWhatsAppFormatting,
   phoneInitials,
+  resolveQuickReply,
   searchEmojis,
   toast,
   useConversationActions,

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.11",
   "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/index.ts

@@ -181,3 +181,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?')
+  })
+})