@adatechnology/conversations-ui 0.1.0-rc.26 → 0.1.0-rc.27

package/dist/{chunk-TV4OQRGH.js → chunk-UZJBYD5O.js}

@@ -1,7 +1,7 @@
 import {
   parseWhatsAppFormatting,
   useIsDarkTheme
-} from "./chunk-2AYDBWNE.js";
+} from "./chunk-WCBDXZ3X.js";
 
 // src/ConversationLocalesProvider.tsx
 import { createContext, useContext } from "react";
@@ -89,7 +89,7 @@ function Ticks({ double }) {
 }
 function StatusTicks({ status, title }) {
   const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent;
-  return /* @__PURE__ */ jsx2("span", { className: `cursor-help leading-none flex items-center ${colorClass}`, title, children: status === "failed" ? /* @__PURE__ */ jsx2(AlertTriangle, { size: 11 }) : /* @__PURE__ */ jsx2(Ticks, { double: status !== "sent" }) });
+  return /* @__PURE__ */ jsx2("span", { className: `cursor-help leading-none flex items-center ${colorClass}`, "data-cv-tooltip": title, children: status === "failed" ? /* @__PURE__ */ jsx2(AlertTriangle, { size: 11 }) : /* @__PURE__ */ jsx2(Ticks, { double: status !== "sent" }) });
 }
 
 // src/AudioPlayer.tsx
@@ -100,6 +100,10 @@ var BARS = Array.from({ length: 30 }, (_, i) => {
   const heights = [3, 5, 8, 12, 7, 10, 14, 9, 6, 11, 15, 8, 4, 13, 7, 10, 6, 12, 9, 5, 14, 8, 11, 6, 13, 7, 10, 5, 9, 4];
   return heights[i % heights.length];
 });
+var AUDIO_PLAYER_LABELS = {
+  play: "Reproduzir",
+  pause: "Pausar"
+};
 function fmt(sec) {
   if (!isFinite(sec)) return "0:00";
   const m = Math.floor(sec / 60);
@@ -161,6 +165,8 @@ function AudioPlayer({ src, isMine = false }) {
     /* @__PURE__ */ jsx3(
       "button",
       {
+        "data-cv-tooltip": playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play,
+        "aria-label": playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play,
         onClick: toggle,
         className: `flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors ${playBtn}`,
         children: playing ? /* @__PURE__ */ jsx3(Pause, { size: 16 }) : /* @__PURE__ */ jsx3(Play, { size: 16, className: "translate-x-0.5" })
@@ -257,7 +263,7 @@ function AudioTranscription({ transcription, onTranscribe, isMine = false }) {
         "button",
         {
           onClick: handleCopy,
-          title: locales.copy,
+          "data-cv-tooltip": locales.copy,
           "aria-label": hasCopied ? locales.copied : locales.copy,
           className: "ml-auto flex flex-shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200",
           children: hasCopied ? /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -289,6 +295,8 @@ function AudioTranscription({ transcription, onTranscribe, isMine = false }) {
       isLong && /* @__PURE__ */ jsx4(
         "button",
         {
+          "data-cv-tooltip": isExpanded ? locales.showLess : locales.showMore,
+          "aria-label": isExpanded ? locales.showLess : locales.showMore,
           onClick: () => setIsExpanded((current) => !current),
           className: "mt-1 text-[11px] font-medium text-gray-500 underline decoration-dotted hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
           children: isExpanded ? locales.showLess : locales.showMore
@@ -298,6 +306,8 @@ function AudioTranscription({ transcription, onTranscribe, isMine = false }) {
     onTranscribe && /* @__PURE__ */ jsxs3(
       "button",
       {
+        "data-cv-tooltip": isTranscribing ? locales.transcribing : locales.retry,
+        "aria-label": isTranscribing ? locales.transcribing : locales.retry,
         onClick: handleTranscribe,
         disabled: isTranscribing,
         className: "mt-1 flex items-center gap-1 text-[11px] text-gray-400 opacity-0 transition-opacity hover:text-gray-600 focus:opacity-100 group-hover:opacity-100 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-300",
@@ -325,6 +335,8 @@ function TranscribeButton({
   return /* @__PURE__ */ jsxs3(
     "button",
     {
+      "data-cv-tooltip": label,
+      "aria-label": label,
       onClick,
       disabled: isBusy || isDisabled,
       className: "flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200",
@@ -492,6 +504,8 @@ function MediaRenderer({
     return /* @__PURE__ */ jsxs4(
       "button",
       {
+        "data-cv-tooltip": label,
+        "aria-label": label,
         onClick: lazy.load,
         disabled: lazy.loading,
         className: "flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15",
@@ -584,6 +598,7 @@ function MediaRenderer({
         ] }) }) : canLazyLoad ? /* @__PURE__ */ jsx6(
           "button",
           {
+            "data-cv-tooltip": bubble.downloadFile,
             onClick: lazy.load,
             disabled: lazy.loading,
             className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50",
@@ -615,7 +630,7 @@ function Lightbox({ imageUrl, caption, onClose, labels }) {
   return /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4", onClick: onClose, children: /* @__PURE__ */ jsxs5("div", { className: "max-w-[90vw] max-h-[90vh] flex flex-col items-center", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsx7("img", { src: imageUrl, alt: caption ?? imageAltLabel, className: "max-w-full max-h-[80vh] object-contain rounded-lg" }),
     caption && /* @__PURE__ */ jsx7("p", { className: "text-white text-sm mt-3 text-center", children: caption }),
-    /* @__PURE__ */ jsx7("button", { onClick: onClose, className: "mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors", children: closeLabel })
+    /* @__PURE__ */ jsx7("button", { "data-cv-tooltip": closeLabel, "aria-label": closeLabel, onClick: onClose, className: "mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors", children: closeLabel })
   ] }) });
 }
 
@@ -655,6 +670,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
     buttons.length > 0 ? /* @__PURE__ */ jsx8("div", { className: "mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: buttons.map((button) => /* @__PURE__ */ jsx8(
       "button",
       {
+        "data-cv-tooltip": button.title,
+        "aria-label": button.title,
         type: "button",
         disabled: !isInteractable,
         onClick: () => onSelect?.({ kind: "button", option: button }),
@@ -667,6 +684,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
       /* @__PURE__ */ jsxs6(
         "button",
         {
+          "data-cv-tooltip": payload.action?.button ?? openListLabel,
+          "aria-label": payload.action?.button ?? openListLabel,
           type: "button",
           onClick: () => setIsListOpen((open) => !open),
           "aria-expanded": isListOpen,
@@ -682,6 +701,8 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
         (section.rows ?? []).map((row) => /* @__PURE__ */ jsxs6(
           "button",
           {
+            "data-cv-tooltip": row.title,
+            "aria-label": row.title,
             type: "button",
             disabled: !isInteractable,
             onClick: () => onSelect?.({ kind: "list", option: row }),
@@ -711,7 +732,7 @@ function createMediaUrlResolver(api) {
 }
 
 // src/providers/ConversationsProvider.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var ConversationsContext = createContext2(null);
 function ConversationsProvider({
@@ -719,14 +740,15 @@ function ConversationsProvider({
   sse,
   children
 }) {
-  return /* @__PURE__ */ jsx9(ConversationsContext.Provider, { value: { api, sse }, children });
+  const value = useMemo(() => ({ api, sse }), [api, sse]);
+  return /* @__PURE__ */ jsx9(ConversationsContext.Provider, { value, children });
 }
 function useConversations() {
   return useContext2(ConversationsContext);
 }
 
 // src/MessageBubble.tsx
-import { useMemo, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 import { Check as Check2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var BUBBLE_COLOR = {
@@ -751,11 +773,11 @@ function MessageBubble({
   const { bubble, selection } = useConversationLocales();
   const [lightboxSrc, setLightboxSrc] = useState5(null);
   const context = useConversations();
-  const resolveMediaUrl = useMemo(
+  const resolveMediaUrl = useMemo2(
     () => onResolveMediaUrl ?? (context?.api ? createMediaUrlResolver(context.api) : void 0),
     [onResolveMediaUrl, context?.api]
   );
-  const requestTranscription = useMemo(() => {
+  const requestTranscription = useMemo2(() => {
     const transcribe = onTranscribeAudio ?? context?.api?.transcribeAudio?.bind(context.api);
     if (!transcribe) return void 0;
     return () => transcribe(message.id);
@@ -765,6 +787,10 @@ function MessageBubble({
   const isMedia = MEDIA_TYPES.has(message.type);
   const isTemplate = message.type === "template";
   const isInteractive = message.type === "interactive";
+  const mediaCaption = isMedia ? [message.caption, message.content].find((text) => {
+    const trimmed = text?.trim();
+    return trimmed && trimmed !== message.filename;
+  }) : void 0;
   const displayName = message.sender === "agent" && senderName ? senderName : bubble[message.sender] ?? message.sender;
   const tooltipText = message.status === "read" && message.readAt ? `${bubble.readAt}${formatDateTime(message.readAt)}` : message.status === "failed" ? bubble.windowExpired : void 0;
   const tailCornerClass = isFirstInGroup ? isMine ? "rounded-tr-md" : "rounded-tl-md" : "";
@@ -775,7 +801,8 @@ function MessageBubble({
         e.stopPropagation();
         onToggleSelect?.();
       },
-      title: selection.select,
+      "data-cv-tooltip": selection.select,
+      "aria-label": selection.select,
       className: `
         flex-shrink-0 self-end mb-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
         ${isSelected ? "bg-teal-600 border-teal-600" : "bg-white/80 dark:bg-black/40 border-black/20 dark:border-white/30"}
@@ -813,22 +840,25 @@ function MessageBubble({
                 "div",
                 {
                   className: "mb-1 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950/60 dark:text-amber-300",
-                  title: message.moderation.terms.length > 0 ? message.moderation.terms.join(", ") : void 0,
+                  "data-cv-tooltip": message.moderation.terms.length > 0 ? message.moderation.terms.join(", ") : void 0,
                   children: [
                     /* @__PURE__ */ jsx10("span", { "aria-hidden": true, children: "\u26A0\uFE0F" }),
                     /* @__PURE__ */ jsx10("span", { children: bubble.moderationFlagged })
                   ]
                 }
               ),
-              isMedia ? /* @__PURE__ */ jsx10(
-                MediaRenderer,
-                {
-                  message,
-                  onLightbox: setLightboxSrc,
-                  onResolveUrl: resolveMediaUrl,
-                  ...requestTranscription ? { onTranscribeAudio: requestTranscription } : {}
-                }
-              ) : isInteractive && message.payload ? (
+              isMedia ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                /* @__PURE__ */ jsx10(
+                  MediaRenderer,
+                  {
+                    message,
+                    onLightbox: setLightboxSrc,
+                    onResolveUrl: resolveMediaUrl,
+                    ...requestTranscription ? { onTranscribeAudio: requestTranscription } : {}
+                  }
+                ),
+                mediaCaption ? /* @__PURE__ */ jsx10("div", { className: "mt-1 text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]", children: parseWhatsAppFormatting(mediaCaption) }) : null
+              ] }) : isInteractive && message.payload ? (
                 // O texto da mensagem interativa mora dentro do payload (`body.text`), e `content` guarda
                 // só uma cópia achatada para busca — renderizar `content` aqui duplicaria o corpo.
                 /* @__PURE__ */ jsx10(InteractiveMessage, { payload: message.payload, onSelect: onInteractiveSelect })
@@ -1046,7 +1076,7 @@ function searchEmojis(query) {
 }
 
 // src/EmojiPicker.tsx
-import { useState as useState6, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { useState as useState6, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_EMOJI_PICKER_LABELS = {
   search: "Buscar emoji",
@@ -1064,7 +1094,7 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
     [onSelect]
   );
   const isSearching = query.trim().length > 0;
-  const visibleEntries = useMemo2(
+  const visibleEntries = useMemo3(
     () => isSearching ? searchEmojis(query) : EMOJI_CATEGORIES[activeCategory].entries,
     [isSearching, query, activeCategory]
   );
@@ -1083,6 +1113,8 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
     isSearching ? null : /* @__PURE__ */ jsx12("div", { className: "flex border-b border-gray-200 overflow-x-auto", children: EMOJI_CATEGORIES.map((category, index) => /* @__PURE__ */ jsxs8(
       "button",
       {
+        "data-cv-tooltip": category.name,
+        "aria-label": category.name,
         onClick: () => setActiveCategory(index),
         className: `px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${activeCategory === index ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"}`,
         children: [
@@ -1099,7 +1131,7 @@ var EmojiPicker = ({ onSelect, labels, className = "" }) => {
         onClick: () => handleSelect(entry.emoji),
         className: "w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer",
         "aria-label": entry.emoji,
-        title: entry.keywords[0],
+        "data-cv-tooltip": entry.keywords[0],
         children: entry.emoji
       },
       entry.emoji
@@ -1221,7 +1253,7 @@ function AudioRecorderButton({
               {
                 type: "button",
                 onClick: discard,
-                title: labelOf("discard"),
+                "data-cv-tooltip": labelOf("discard"),
                 "aria-label": labelOf("discard"),
                 className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700",
                 children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
@@ -1235,7 +1267,7 @@ function AudioRecorderButton({
               {
                 type: "button",
                 onClick: confirm,
-                title: labelOf("send"),
+                "data-cv-tooltip": labelOf("send"),
                 "aria-label": labelOf("send"),
                 className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600",
                 children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
@@ -1250,7 +1282,7 @@ function AudioRecorderButton({
           type: "button",
           disabled: disabled || pending !== void 0,
           onClick: () => isRecording ? stop() : void start(),
-          title: toggleLabel,
+          "data-cv-tooltip": toggleLabel,
           "aria-label": toggleLabel,
           "aria-pressed": isRecording,
           className: `flex h-10 w-10 items-center justify-center rounded-full transition-colors disabled:opacity-50 ${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"}`,
@@ -1267,6 +1299,17 @@ function AudioRecorderButton({
 
 // src/MessageComposer.tsx
 import { useState as useState8, useRef as useRef3, useCallback as useCallback4 } from "react";
+
+// src/composer.constant.ts
+var COMPOSER_BAR_CLASS = "cv-composer-bar";
+var COMPOSER_TOOL_BUTTON_CLASS = "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-teal-50 hover:text-teal-600 dark:hover:bg-teal-900/30 dark:hover:text-teal-400";
+var COMPOSER_TOOL_BUTTON_ACTIVE_CLASS = "bg-teal-50 text-teal-600 dark:bg-teal-900/40 dark:text-teal-400";
+var COMPOSER_TOOL_BUTTON_IDLE_CLASS = "text-gray-400 dark:text-gray-500";
+var COMPOSER_MONOSPACE_CLASS = "bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm";
+var COMPOSER_COMPACT_WIDTH = 480;
+var QUICK_REPLY_PILL_CLASS = "whitespace-nowrap rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-sm 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";
+
+// src/MessageComposer.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function applyQuickReplyVariables(template, variables = {}) {
   return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_, chave) => variables[chave] ?? "");
@@ -1277,7 +1320,8 @@ function resolveQuickReply(quickReply, variables = {}) {
 var DEFAULT_MESSAGE_COMPOSER_LABELS = {
   emoji: "Emoji",
   attach: "Anexar",
-  send: "Enviar"
+  send: "Enviar",
+  removeAttachment: "Remover anexo"
 };
 var DEFAULT_ACCEPTED_FILE_TYPES = [
   "image/jpeg,image/png,image/webp",
@@ -1309,6 +1353,7 @@ var 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] = useState8("");
   const [showEmoji, setShowEmoji] = useState8(false);
   const [attachments, setAttachments] = useState8([]);
@@ -1406,7 +1451,7 @@ var 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. */
-    /* @__PURE__ */ jsxs10("div", { className: cn("bg-[#f0f2f5] px-2 py-2", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: cn(COMPOSER_BAR_CLASS, className), children: [
       quickReplies && quickReplies.length > 0 && /* @__PURE__ */ jsx14(
         "div",
         {
@@ -1417,15 +1462,14 @@ var MessageComposer = ({
           children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx14(
             "button",
             {
+              "data-cv-tooltip": quickReply.label,
+              "aria-label": quickReply.label,
               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
-              ),
+              className: cn(QUICK_REPLY_PILL_CLASS, classNames?.quickReply),
               children: quickReply.label
             },
             quickReply.key
@@ -1437,11 +1481,11 @@ var MessageComposer = ({
           /* @__PURE__ */ jsx14("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
           /* @__PURE__ */ jsx14("polyline", { points: "14 2 14 8 20 8" })
         ] }) }),
-        /* @__PURE__ */ jsx14("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", children: "\u2715" })
+        /* @__PURE__ */ jsx14("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", children: "\u2715" })
       ] }, i)) }),
       /* @__PURE__ */ jsxs10("div", { className: cn("flex items-end gap-1.5 rounded-xl bg-white px-3 py-2", classNames?.field), children: [
         showEmojiButton && /* @__PURE__ */ jsxs10("div", { className: "relative flex-shrink-0", children: [
-          /* @__PURE__ */ jsx14("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, children: /* @__PURE__ */ jsxs10("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsx14("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, children: /* @__PURE__ */ jsxs10("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
             /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "10" }),
             /* @__PURE__ */ jsx14("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
             /* @__PURE__ */ jsx14("circle", { cx: "9", cy: "9", r: "0.5", fill: "currentColor" }),
@@ -1468,11 +1512,12 @@ var MessageComposer = ({
         ),
         showAttachButton && /* @__PURE__ */ jsxs10(Fragment3, { children: [
           /* @__PURE__ */ jsx14("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileChange, className: "hidden" }),
-          /* @__PURE__ */ jsx14("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, children: /* @__PURE__ */ jsx14("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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" }) }) })
+          /* @__PURE__ */ jsx14("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, children: /* @__PURE__ */ jsx14("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("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" }) }) })
         ] }),
         !canSend && effectiveIdleAction ? /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0", children: effectiveIdleAction }) : /* @__PURE__ */ jsx14(
           "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"}`,
@@ -1613,6 +1658,16 @@ function useConversationDocuments(conversationId, params) {
 // src/ConversationDocumentsPanel.tsx
 import { useState as useState10 } from "react";
 import { ArrowUpDown, Bot, Download, Eye, Users } from "lucide-react";
+
+// src/pagination.constant.ts
+var PAGINATION_LABELS = {
+  first: "Primeira p\xE1gina",
+  previous: "P\xE1gina anterior",
+  next: "Pr\xF3xima p\xE1gina",
+  last: "\xDAltima p\xE1gina"
+};
+
+// src/ConversationDocumentsPanel.tsx
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var DOCUMENT_SOURCE_FILTER = {
   ALL: "all",
@@ -1740,6 +1795,8 @@ function ConversationDocumentsPanel({
       /* @__PURE__ */ jsxs11(
         "button",
         {
+          "data-cv-tooltip": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
+          "aria-label": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
@@ -1752,6 +1809,8 @@ function ConversationDocumentsPanel({
       hasFilters ? /* @__PURE__ */ jsx16(
         "button",
         {
+          "data-cv-tooltip": labels.clearFilters,
+          "aria-label": labels.clearFilters,
           type: "button",
           onClick: () => applyFilter(() => {
             setSearch("");
@@ -1779,7 +1838,7 @@ function ConversationDocumentsPanel({
         ),
         labels.selectAll
       ] }),
-      selectedIds.length > 0 ? /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
+      selectedIds.length > 0 ? /* @__PURE__ */ jsx16("button", { "data-cv-tooltip": labels.downloadSelected(selectedIds.length), "aria-label": labels.downloadSelected(selectedIds.length), type: "button", onClick: () => void handleDownloadSelected(), className: "cv-header-action", children: labels.downloadSelected(selectedIds.length) }) : null,
       archiveError ? /* @__PURE__ */ jsx16("span", { role: "alert", className: "text-red-600 dark:text-red-400", children: labels.archiveFailed }) : null
     ] }) : null,
     /* @__PURE__ */ jsx16("ul", { className: cn("space-y-2", classNames?.list), children: documents.map((document2) => {
@@ -1824,7 +1883,7 @@ function ConversationDocumentsPanel({
                   "div",
                   {
                     className: cn("truncate text-sm font-medium", classNames?.filename),
-                    title: document2.filename,
+                    "data-cv-tooltip": document2.filename,
                     children: document2.filename
                   }
                 ),
@@ -1841,7 +1900,7 @@ function ConversationDocumentsPanel({
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "inline"),
-                  title: labels.view,
+                  "data-cv-tooltip": labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.viewButton),
                   children: /* @__PURE__ */ jsx16(Eye, { size: 14 })
@@ -1852,7 +1911,7 @@ function ConversationDocumentsPanel({
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "attachment"),
-                  title: labels.download,
+                  "data-cv-tooltip": labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: cn("cv-header-icon", classNames?.downloadButton),
                   children: /* @__PURE__ */ jsx16(Download, { size: 14 })
@@ -1880,7 +1939,8 @@ function ConversationDocumentsPanel({
                 type: "button",
                 onClick: () => setPage(page - 1),
                 disabled: page <= 1,
-                "aria-label": labels.sortOldest,
+                "aria-label": PAGINATION_LABELS.previous,
+                "data-cv-tooltip": PAGINATION_LABELS.previous,
                 className: "cv-header-icon disabled:opacity-40",
                 children: "\u2039"
               }
@@ -1892,7 +1952,8 @@ function ConversationDocumentsPanel({
                 type: "button",
                 onClick: () => setPage(page + 1),
                 disabled: page >= lastPage,
-                "aria-label": labels.sortMostRecent,
+                "aria-label": PAGINATION_LABELS.next,
+                "data-cv-tooltip": PAGINATION_LABELS.next,
                 className: "cv-header-icon disabled:opacity-40",
                 children: "\u203A"
               }
@@ -2013,6 +2074,8 @@ function DocumentsLibrary({
       /* @__PURE__ */ jsxs12(
         "button",
         {
+          "data-cv-tooltip": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
+          "aria-label": sortDirection === "desc" ? labels.sortMostRecent : labels.sortOldest,
           type: "button",
           onClick: () => applyFilter(() => setSortDirection(sortDirection === "desc" ? "asc" : "desc")),
           className: cn("cv-header-action inline-flex items-center gap-1", classNames?.sortButton),
@@ -2025,6 +2088,8 @@ function DocumentsLibrary({
       hasFilters ? /* @__PURE__ */ jsx17(
         "button",
         {
+          "data-cv-tooltip": labels.clearFilters,
+          "aria-label": labels.clearFilters,
           type: "button",
           onClick: () => applyFilter(() => {
             setSearch("");
@@ -2053,7 +2118,7 @@ function DocumentsLibrary({
             /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ jsx17(FileIcon, { filename: document2.filename, mimeType: document2.mimeType }),
               /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx17("div", { className: cn("truncate text-sm font-medium", classNames?.filename), title: document2.filename, children: document2.filename }),
+                /* @__PURE__ */ jsx17("div", { className: cn("truncate text-sm font-medium", classNames?.filename), "data-cv-tooltip": document2.filename, children: document2.filename }),
                 /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-wrap items-center gap-x-2 text-xs text-gray-500", classNames?.meta), children: [
                   /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx17(SourceIcon, { size: 11 }),
@@ -2071,7 +2136,8 @@ function DocumentsLibrary({
               {
                 type: "button",
                 onClick: () => onOpenConversation(document2.conversationId),
-                title: labels.openConversation,
+                "data-cv-tooltip": labels.openConversation,
+                "aria-label": labels.openConversation,
                 className: cn("cv-header-action inline-flex shrink-0 items-center gap-1", classNames?.conversationLink),
                 children: [
                   /* @__PURE__ */ jsx17(MessageSquare, { size: 12 }),
@@ -2085,7 +2151,7 @@ function DocumentsLibrary({
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "inline"),
-                  title: labels.view,
+                  "data-cv-tooltip": labels.view,
                   "aria-label": `${labels.view}: ${document2.filename}`,
                   className: "cv-header-icon",
                   children: /* @__PURE__ */ jsx17(Eye2, { size: 14 })
@@ -2096,7 +2162,7 @@ function DocumentsLibrary({
                 {
                   type: "button",
                   onClick: () => void handleOpen(document2.id, "attachment"),
-                  title: labels.download,
+                  "data-cv-tooltip": labels.download,
                   "aria-label": `${labels.download}: ${document2.filename}`,
                   className: "cv-header-icon",
                   children: /* @__PURE__ */ jsx17(Download2, { size: 14 })
@@ -2114,6 +2180,8 @@ function DocumentsLibrary({
         /* @__PURE__ */ jsx17(
           "button",
           {
+            "data-cv-tooltip": PAGINATION_LABELS.previous,
+            "aria-label": PAGINATION_LABELS.previous,
             type: "button",
             onClick: () => setPage(page - 1),
             disabled: page <= 1,
@@ -2125,6 +2193,8 @@ function DocumentsLibrary({
         /* @__PURE__ */ jsx17(
           "button",
           {
+            "data-cv-tooltip": PAGINATION_LABELS.next,
+            "aria-label": PAGINATION_LABELS.next,
             type: "button",
             onClick: () => setPage(page + 1),
             disabled: page >= lastPage,
@@ -2166,6 +2236,13 @@ export {
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
   DEFAULT_MAX_RECORDING_MILLISECONDS,
   AudioRecorderButton,
+  COMPOSER_BAR_CLASS,
+  COMPOSER_TOOL_BUTTON_CLASS,
+  COMPOSER_TOOL_BUTTON_ACTIVE_CLASS,
+  COMPOSER_TOOL_BUTTON_IDLE_CLASS,
+  COMPOSER_MONOSPACE_CLASS,
+  COMPOSER_COMPACT_WIDTH,
+  QUICK_REPLY_PILL_CLASS,
   applyQuickReplyVariables,
   resolveQuickReply,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
@@ -2179,6 +2256,7 @@ export {
   conversationsOf,
   totalOf,
   useConversationDocuments,
+  PAGINATION_LABELS,
   DOCUMENT_SOURCE_FILTER,
   DEFAULT_CONVERSATION_DOCUMENTS_LABELS,
   ConversationDocumentsPanel,

package/dist/{chunk-2AYDBWNE.js → chunk-WCBDXZ3X.js}

@@ -69,9 +69,12 @@ function parseInlineTokens(text) {
       if (remaining) result.push({ type: "text", content: remaining });
       break;
     }
-    if (nextSpecial > 0) {
-      result.push({ type: "text", content: remaining.slice(0, nextSpecial) });
+    if (nextSpecial === 0) {
+      result.push({ type: "text", content: remaining.slice(0, 1) });
+      remaining = remaining.slice(1);
+      continue;
     }
+    result.push({ type: "text", content: remaining.slice(0, nextSpecial) });
     remaining = remaining.slice(nextSpecial);
   }
   return result;
@@ -103,6 +106,9 @@ function unescapeHtml(text) {
 }
 var CODE_TOKEN_MARK = String.fromCharCode(57344);
 var CODE_TOKEN_REGEX = new RegExp(`${CODE_TOKEN_MARK}(\\d+)${CODE_TOKEN_MARK}`, "g");
+var ZERO_WIDTH_SPACE = String.fromCharCode(8203);
+var EMPTY_CODE_REGEX = new RegExp(`<code[^>]*>[${ZERO_WIDTH_SPACE}\\s]*</code>`, "gi");
+var ZERO_WIDTH_SPACE_REGEX = new RegExp(ZERO_WIDTH_SPACE, "g");
 function waToHTML(text) {
   if (!text) return "";
   const codeTokens = [];
@@ -117,7 +123,7 @@ function waToHTML(text) {
   let html = escapeHtml(working);
   html = html.replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>");
   html = html.replace(/_([^_\n]+)_/g, "<em>$1</em>");
-  html = html.replace(/~([^~\n]+)~/g, "<del>$1</del>");
+  html = html.replace(/~([^~\n]+)~/g, "<s>$1</s>");
   html = html.replace(/\n/g, "<br>");
   html = html.replace(CODE_TOKEN_REGEX, (_match, indexStr) => {
     const token = codeTokens[Number(indexStr)];
@@ -132,6 +138,7 @@ function waToHTML(text) {
 function htmlToWA(html) {
   if (!html) return "";
   let text = html;
+  text = text.replace(EMPTY_CODE_REGEX, "");
   text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, "\n"))}\`\`\``);
   text = text.replace(/<code data-wa="inline"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`${unescapeHtml(inner)}\``);
   text = text.replace(/<br\s*\/?>/gi, "\n").replace(/<div>/gi, "\n").replace(/<\/div>/gi, "").replace(/<\/p>/gi, "\n").replace(/<p[^>]*>/gi, "");
@@ -141,9 +148,11 @@ function htmlToWA(html) {
   text = text.replace(/<i>(.*?)<\/i>/gi, "_$1_");
   text = text.replace(/<del>(.*?)<\/del>/gi, "~$1~");
   text = text.replace(/<s>(.*?)<\/s>/gi, "~$1~");
+  text = text.replace(/<strike>(.*?)<\/strike>/gi, "~$1~");
   text = text.replace(/<code[^>]*>(.*?)<\/code>/gi, "`$1`");
   text = text.replace(/<[^>]+>/g, "");
   text = unescapeHtml(text);
+  text = text.replace(ZERO_WIDTH_SPACE_REGEX, "");
   return text.trim();
 }
 function waToHTMLInline(text) {
@@ -205,6 +214,7 @@ function useDarkMode() {
 
 export {
   parseWhatsAppFormatting,
+  ZERO_WIDTH_SPACE,
   waToHTML,
   htmlToWA,
   waToHTMLInline,

package/dist/flows/index.d.ts

@@ -85,6 +85,8 @@ interface FlowEditorLabels {
         question: string;
         options: string;
         addOption: string;
+        removeOption: string;
+        close: string;
         optionId: string;
         optionLabel: string;
         next: string;