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

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,83 @@ 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;
+
+/** Cada ação que a barra sabe oferecer. `toolbar` decide quais delas aparecem. */
+declare const RICH_COMPOSER_ACTION: {
+    readonly BOLD: "bold";
+    readonly ITALIC: "italic";
+    readonly STRIKETHROUGH: "strikethrough";
+    readonly MONOSPACE: "monospace";
+    readonly EMOJI: "emoji";
+    readonly ATTACH: "attach";
+    readonly VARIABLES: "variables";
+};
+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. */
+interface RichComposerTooltips {
+    bold: string;
+    italic: string;
+    strikethrough: string;
+    monospace: string;
+    emoji: string;
+    attach: string;
+    send: string;
+    variables: string;
+}
+declare const DEFAULT_RICH_COMPOSER_TOOLTIPS: RichComposerTooltips;
+/**
+ * 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.
+ */
+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. */
+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;
+}
+/** Handle imperativo: `contentEditable` controlado pelo React perde o cursor a cada tecla. */
+interface RichMessageComposerHandle {
+    setContent: (text: string) => void;
+    clear: () => void;
+    focus: () => void;
+}
+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;
+}
+declare const RichMessageComposer: react.ForwardRefExoticComponent<RichMessageComposerProps & react.RefAttributes<RichMessageComposerHandle>>;
 
 interface WhatsAppMessageEditorLabels {
     bold: string;
@@ -1022,4 +1123,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_RICH_COMPOSER_TOOLTIPS, 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, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, 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 };