@adatechnology/conversations-ui 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,7 +1,8 @@
 import {
   TOOLTIP_ATTRIBUTE,
-  TooltipLayer
-} from "./chunk-DKPXKQGC.js";
+  TooltipLayer,
+  WhatsAppMessagePreview
+} from "./chunk-HMCOTZAX.js";
 import {
   AudioPlayer,
   AudioRecorderButton,
@@ -52,7 +53,6 @@ import {
   applyQuickReplyVariables,
   capabilitiesOf,
   channelFiltersFor,
-  cn,
   contactFlag,
   conversationsOf,
   createMediaUrlResolver,
@@ -76,16 +76,17 @@ import {
   useConversationLocales,
   useConversations,
   useQuickRepliesPicker
-} from "./chunk-NHQDQJL2.js";
+} from "./chunk-L4OE4ORQ.js";
 import {
   ZERO_WIDTH_SPACE,
+  cn,
   htmlToWA,
   parseWhatsAppFormatting,
   useDarkMode,
   useIsDarkTheme,
   waToHTML,
   waToHTMLInline
-} from "./chunk-WCBDXZ3X.js";
+} from "./chunk-PJNR6UMN.js";
 
 // src/RichMessageComposer.tsx
 import {
@@ -122,6 +123,12 @@ var FORMATTING_ACTION = {
   STRIKETHROUGH: "strikethrough",
   MONOSPACE: "monospace"
 };
+var WHATSAPP_MARKER_BY_ACTION = {
+  [FORMATTING_ACTION.BOLD]: "*",
+  [FORMATTING_ACTION.ITALIC]: "_",
+  [FORMATTING_ACTION.STRIKETHROUGH]: "~",
+  [FORMATTING_ACTION.MONOSPACE]: "```"
+};
 var EXEC_COMMAND_BY_ACTION = {
   [FORMATTING_ACTION.BOLD]: "bold",
   [FORMATTING_ACTION.ITALIC]: "italic",
@@ -611,7 +618,7 @@ var RichMessageComposer = forwardRef(
       document.addEventListener("mousedown", handleOutsideClick);
       return () => document.removeEventListener("mousedown", handleOutsideClick);
     }, [isQuickRepliesOpen, quickRepliesMode, closeQuickRepliesAndRefocus]);
-    const wrapSelection = useCallback(
+    const wrapSelection2 = useCallback(
       (action) => {
         const range = currentRange();
         const selectedText = range?.toString();
@@ -638,17 +645,17 @@ var RichMessageComposer = forwardRef(
           } else if (code) {
             unwrapMonospace(code);
           } else {
-            wrapSelection(action);
+            wrapSelection2(action);
           }
           emitChange(editor.innerHTML);
           refreshActiveFormatting();
           return;
         }
         if (toggleFormattingCommand(action)) emitChange(editor.innerHTML);
-        else wrapSelection(action);
+        else wrapSelection2(action);
         refreshActiveFormatting();
       },
-      [currentRange, emitChange, refreshActiveFormatting, wrapSelection]
+      [currentRange, emitChange, refreshActiveFormatting, wrapSelection2]
     );
     const handleInput = useCallback(
       (event) => {
@@ -928,7 +935,7 @@ function WhatsAppMessageEditor({
 }) {
   const editorLabels = { ...DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, ...labels };
   const textareaRef = useRef3(null);
-  function wrapSelection(marker) {
+  function wrapSelection2(marker) {
     const textarea = textareaRef.current;
     if (!textarea) return;
     const start = textarea.selectionStart;
@@ -957,9 +964,9 @@ function WhatsAppMessageEditor({
   const toolbarButtonClass = "inline-flex items-center justify-center h-8 w-8 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
   return /* @__PURE__ */ jsxs3("div", { children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1.5 mb-2", children: [
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx3(Strikethrough2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection2("*"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection2("_"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection2("~"), className: toolbarButtonClass, "data-cv-tooltip": editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx3(Strikethrough2, { size: 15 }) }),
       placeholders.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx3("span", { className: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" }),
         placeholders.map((token) => /* @__PURE__ */ jsx3(
@@ -1328,7 +1335,7 @@ function MessageText({ message }) {
       onClick: handleCopy,
       className: "text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through",
       children: [
-        /* @__PURE__ */ jsx7("span", { children: parseWhatsAppFormatting(message.content ?? "") }),
+        /* @__PURE__ */ jsx7("div", { children: parseWhatsAppFormatting(message.content ?? "") }),
         copied && /* @__PURE__ */ jsx7("span", { className: "absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg", children: "Copiado!" })
       ]
     }
@@ -4341,6 +4348,7 @@ async function sendQueuedMessage(params) {
 
 // src/quickReplies/QuickRepliesWorkspace.tsx
 import { useEffect as useEffect13, useId as useId2, useRef as useRef11, useState as useState18 } from "react";
+import { Pencil as Pencil2, Plus as Plus2, Trash2 as Trash23 } from "lucide-react";
 
 // src/quickReplies/useQuickRepliesWorkspace.ts
 import { useCallback as useCallback10, useEffect as useEffect12, useState as useState17 } from "react";
@@ -4769,10 +4777,208 @@ function useQuickRepliesWorkspace({
   };
 }
 
+// src/quickReplies/quickReplyFormatting.ts
+var LEADING_WHITESPACE = /^\s*/;
+var TRAILING_WHITESPACE = /\s*$/;
+function isWrappedBy(core, marker) {
+  return core.length >= marker.length * 2 && core.startsWith(marker) && core.endsWith(marker);
+}
+function toggleLine({ line, marker, shouldUnwrap }) {
+  if (!line.trim()) return line;
+  const leading = LEADING_WHITESPACE.exec(line)?.[0] ?? "";
+  const trailing = TRAILING_WHITESPACE.exec(line)?.[0] ?? "";
+  const core = line.slice(leading.length, line.length - trailing.length);
+  const toggled = shouldUnwrap ? core.slice(marker.length, core.length - marker.length) : marker + core + marker;
+  return leading + toggled + trailing;
+}
+function wrapLines({ text, start, end, marker }) {
+  const lines = text.slice(start, end).split("\n");
+  const shouldUnwrap = lines.filter((line) => line.trim()).every((line) => isWrappedBy(line.trim(), marker));
+  const replaced = lines.map((line) => toggleLine({ line, marker, shouldUnwrap })).join("\n");
+  return {
+    text: text.slice(0, start) + replaced + text.slice(end),
+    selectionStart: start,
+    selectionEnd: start + replaced.length
+  };
+}
+function wrapSelection({ text, start, end, marker }) {
+  const selected = text.slice(start, end);
+  if (!selected.trim()) {
+    return {
+      text: text.slice(0, start) + marker + selected + marker + text.slice(end),
+      selectionStart: start + marker.length,
+      selectionEnd: end + marker.length
+    };
+  }
+  if (selected.includes("\n")) return wrapLines({ text, start, end, marker });
+  const coreStart = start + (LEADING_WHITESPACE.exec(selected)?.[0].length ?? 0);
+  const coreEnd = end - (TRAILING_WHITESPACE.exec(selected)?.[0].length ?? 0);
+  const core = text.slice(coreStart, coreEnd);
+  const before = text.slice(0, coreStart);
+  const after = text.slice(coreEnd);
+  const size = marker.length;
+  if (isWrappedBy(core, marker)) {
+    const unwrapped = core.slice(size, core.length - size);
+    return { text: before + unwrapped + after, selectionStart: coreStart, selectionEnd: coreStart + unwrapped.length };
+  }
+  if (before.endsWith(marker) && after.startsWith(marker)) {
+    return {
+      text: before.slice(0, before.length - size) + core + after.slice(size),
+      selectionStart: coreStart - size,
+      selectionEnd: coreEnd - size
+    };
+  }
+  return {
+    text: before + marker + core + marker + after,
+    selectionStart: coreStart + size,
+    selectionEnd: coreEnd + size
+  };
+}
+var QUICK_REPLY_FORMATTING_ACTION = {
+  ...FORMATTING_ACTION,
+  INLINE_CODE: "inlineCode",
+  BULLETED_LIST: "bulletedList",
+  NUMBERED_LIST: "numberedList",
+  QUOTE: "quote"
+};
+var LINE_PREFIX_PATTERN = {
+  [QUICK_REPLY_FORMATTING_ACTION.BULLETED_LIST]: /^[-*] /,
+  [QUICK_REPLY_FORMATTING_ACTION.NUMBERED_LIST]: /^\d+\. /,
+  [QUICK_REPLY_FORMATTING_ACTION.QUOTE]: /^> /
+};
+var INLINE_MARKER_BY_ACTION = {
+  ...WHATSAPP_MARKER_BY_ACTION,
+  [QUICK_REPLY_FORMATTING_ACTION.INLINE_CODE]: "`"
+};
+function isLinePrefixAction(action) {
+  return action in LINE_PREFIX_PATTERN;
+}
+function prefixFor(action, position) {
+  if (action === QUICK_REPLY_FORMATTING_ACTION.NUMBERED_LIST) return `${position}. `;
+  return action === QUICK_REPLY_FORMATTING_ACTION.QUOTE ? "> " : "- ";
+}
+function toggleLinePrefix({ text, start, end, action }) {
+  const lineStart = start === 0 ? 0 : text.lastIndexOf("\n", start - 1) + 1;
+  const searchFrom = end > start && text[end - 1] === "\n" ? end - 1 : end;
+  const nextBreak = text.indexOf("\n", searchFrom);
+  const lineEnd = nextBreak === -1 ? text.length : nextBreak;
+  const original = text.slice(lineStart, lineEnd);
+  const lines = original.split("\n");
+  const pattern = LINE_PREFIX_PATTERN[action];
+  const filledLines = lines.filter((line) => line.trim());
+  const shouldRemove = filledLines.length > 0 && filledLines.every((line) => pattern.test(line));
+  let position = 0;
+  const replaced = lines.map((line) => {
+    if (shouldRemove) return line.replace(pattern, "");
+    if (!line.trim() && lines.length > 1) return line;
+    position += 1;
+    return prefixFor(action, position) + line.replace(pattern, "");
+  }).join("\n");
+  const nextText = text.slice(0, lineStart) + replaced + text.slice(lineEnd);
+  if (start === end) {
+    const caret = Math.max(lineStart, start + replaced.length - original.length);
+    return { text: nextText, selectionStart: caret, selectionEnd: caret };
+  }
+  return { text: nextText, selectionStart: lineStart, selectionEnd: lineStart + replaced.length };
+}
+function computeFormattingEdit({
+  text,
+  selectionStart,
+  selectionEnd,
+  action,
+  maximumLength
+}) {
+  const edit = isLinePrefixAction(action) ? toggleLinePrefix({ text, start: selectionStart, end: selectionEnd, action }) : wrapSelection({ text, start: selectionStart, end: selectionEnd, marker: INLINE_MARKER_BY_ACTION[action] ?? "" });
+  return edit.text.length > maximumLength ? void 0 : edit;
+}
+var SHORTCUT_ACTION_BY_KEY = {
+  b: FORMATTING_ACTION.BOLD,
+  i: FORMATTING_ACTION.ITALIC
+};
+var FORMATTING_SHORTCUT_HINT = {
+  [FORMATTING_ACTION.BOLD]: "Ctrl/\u2318+B",
+  [FORMATTING_ACTION.ITALIC]: "Ctrl/\u2318+I"
+};
+function formattingActionForShortcut(event) {
+  if (event.isComposing || event.shiftKey || event.altKey) return void 0;
+  if (!(event.ctrlKey || event.metaKey)) return void 0;
+  return SHORTCUT_ACTION_BY_KEY[event.key.toLowerCase()];
+}
+function changedRange(previous, next) {
+  let prefix = 0;
+  const shortest = Math.min(previous.length, next.length);
+  while (prefix < shortest && previous[prefix] === next[prefix]) prefix += 1;
+  let suffix = 0;
+  while (suffix < shortest - prefix && previous[previous.length - 1 - suffix] === next[next.length - 1 - suffix]) {
+    suffix += 1;
+  }
+  return { start: prefix, end: previous.length - suffix, insertedText: next.slice(prefix, next.length - suffix) };
+}
+
+// src/quickReplies/QuickReplyFormattingToolbar.tsx
+import { Bold as Bold3, Code as Code2, Italic as Italic3, List, ListOrdered, Quote, SquareCode, Strikethrough as Strikethrough3 } from "lucide-react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function QuickReplyFormattingToolbar({ labels, onFormat }) {
+  const buttons = [
+    { action: QUICK_REPLY_FORMATTING_ACTION.BOLD, label: labels.formatBold, Icon: Bold3 },
+    { action: QUICK_REPLY_FORMATTING_ACTION.ITALIC, label: labels.formatItalic, Icon: Italic3 },
+    { action: QUICK_REPLY_FORMATTING_ACTION.STRIKETHROUGH, label: labels.formatStrikethrough, Icon: Strikethrough3 },
+    { action: QUICK_REPLY_FORMATTING_ACTION.MONOSPACE, label: labels.formatMonospace, Icon: SquareCode },
+    { action: QUICK_REPLY_FORMATTING_ACTION.INLINE_CODE, label: labels.formatInlineCode, Icon: Code2 },
+    { action: QUICK_REPLY_FORMATTING_ACTION.BULLETED_LIST, label: labels.formatBulletedList, Icon: List },
+    { action: QUICK_REPLY_FORMATTING_ACTION.NUMBERED_LIST, label: labels.formatNumberedList, Icon: ListOrdered },
+    { action: QUICK_REPLY_FORMATTING_ACTION.QUOTE, label: labels.formatQuote, Icon: Quote }
+  ];
+  return /* @__PURE__ */ jsx25("div", { role: "toolbar", "aria-label": labels.formattingToolbar, className: "flex flex-wrap gap-1", children: buttons.map(({ action, label, Icon }) => /* @__PURE__ */ jsx25(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: FORMATTING_SHORTCUT_HINT[action] ? `${label} (${FORMATTING_SHORTCUT_HINT[action]})` : label,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => onFormat(action),
+      className: cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS),
+      children: /* @__PURE__ */ jsx25(Icon, { size: 16, "aria-hidden": "true" })
+    },
+    action
+  )) });
+}
+
+// src/quickReplies/QuickReplyWhatsAppPreview.tsx
+import { Paperclip as Paperclip2 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+function resolvePreviewVariables(body, variables = []) {
+  return variables.reduce(
+    (resolved, variable) => variable.marker ? resolved.split(variable.marker).join(variable.value || variable.label) : resolved,
+    body
+  );
+}
+function QuickReplyWhatsAppPreview({ body, variables, attachments, labels }) {
+  const resolvedBody = resolvePreviewVariables(body, variables);
+  const hasAttachments = (attachments?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs23("section", { "aria-label": labels.previewTitle, className: "space-y-1", children: [
+    /* @__PURE__ */ jsx26("h3", { className: "text-sm font-medium", children: labels.previewTitle }),
+    /* @__PURE__ */ jsxs23(WhatsAppMessagePreview, { children: [
+      hasAttachments ? /* @__PURE__ */ jsx26("ul", { className: "mb-1.5 flex flex-wrap gap-1 whitespace-normal", children: attachments?.map((attachment) => /* @__PURE__ */ jsxs23(
+        "li",
+        {
+          className: "inline-flex max-w-full items-center gap-1 rounded-md bg-black/5 px-1.5 py-0.5 text-xs dark:bg-white/10",
+          children: [
+            /* @__PURE__ */ jsx26(Paperclip2, { size: 12, "aria-hidden": "true", className: "shrink-0" }),
+            /* @__PURE__ */ jsx26("span", { className: "truncate", children: attachment.filename })
+          ]
+        },
+        attachment.uploadId
+      )) }) : null,
+      resolvedBody ? parseWhatsAppFormatting(resolvedBody) : /* @__PURE__ */ jsx26("span", { className: "italic text-gray-400", children: labels.previewEmptyBody })
+    ] })
+  ] });
+}
+
 // src/quickReplies/AttachmentsFormSection.tsx
 import { useRef as useRef10 } from "react";
-import { Paperclip as Paperclip2, X as X4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Paperclip as Paperclip3, X as X4 } from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function AttachmentsFormSection({
   labels: text,
   attachments,
@@ -4786,18 +4992,18 @@ function AttachmentsFormSection({
   onDismissRejections
 }) {
   const attachmentFileInputRef = useRef10(null);
-  return /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx25("span", { className: "block text-sm font-medium", children: text.attachmentsTitle }),
-    attachments.length === 0 && pendingUploads.length === 0 ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: text.attachmentsEmpty }) : /* @__PURE__ */ jsxs23("ul", { className: "space-y-1", children: [
-      attachments.map((attachment, index) => /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx27("span", { className: "block text-sm font-medium", children: text.attachmentsTitle }),
+    attachments.length === 0 && pendingUploads.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: text.attachmentsEmpty }) : /* @__PURE__ */ jsxs24("ul", { className: "space-y-1", children: [
+      attachments.map((attachment, index) => /* @__PURE__ */ jsxs24(
         "li",
         {
           className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5 text-xs dark:border-gray-700",
           children: [
-            /* @__PURE__ */ jsx25(Paperclip2, { "aria-hidden": "true", className: "h-3.5 w-3.5 flex-none text-gray-400" }),
-            /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate", children: attachment.filename }),
-            /* @__PURE__ */ jsx25("span", { className: "flex-none text-gray-400", children: formatFileSize(attachment.sizeBytes) }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(Paperclip3, { "aria-hidden": "true", className: "h-3.5 w-3.5 flex-none text-gray-400" }),
+            /* @__PURE__ */ jsx27("span", { className: "min-w-0 flex-1 truncate", children: attachment.filename }),
+            /* @__PURE__ */ jsx27("span", { className: "flex-none text-gray-400", children: formatFileSize(attachment.sizeBytes) }),
+            /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
@@ -4808,7 +5014,7 @@ function AttachmentsFormSection({
                 children: "\u2191"
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
@@ -4819,32 +5025,32 @@ function AttachmentsFormSection({
                 children: "\u2193"
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
                 "aria-label": text.attachmentRemove,
                 onClick: () => onRemoveAttachment(attachment.uploadId),
                 className: "flex-none text-red-600 dark:text-red-400",
-                children: /* @__PURE__ */ jsx25(X4, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx27(X4, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
               }
             )
           ]
         },
         attachment.uploadId
       )),
-      pendingUploads.map((pending) => /* @__PURE__ */ jsxs23(
+      pendingUploads.map((pending) => /* @__PURE__ */ jsxs24(
         "li",
         {
           className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5 text-xs dark:border-gray-700",
           "aria-busy": pending.status === "uploading",
           "aria-live": "polite",
           children: [
-            /* @__PURE__ */ jsx25(Paperclip2, { "aria-hidden": "true", className: "h-3.5 w-3.5 flex-none text-gray-400" }),
-            /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate", children: pending.file.name }),
-            pending.status === "uploading" ? /* @__PURE__ */ jsx25("span", { className: "flex-none text-gray-500 dark:text-gray-400", children: text.attachmentUploading(Math.round(pending.progress * 100)) }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
-              /* @__PURE__ */ jsx25("span", { role: "alert", className: "flex-none text-red-600 dark:text-red-400", children: pending.error }),
-              /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(Paperclip3, { "aria-hidden": "true", className: "h-3.5 w-3.5 flex-none text-gray-400" }),
+            /* @__PURE__ */ jsx27("span", { className: "min-w-0 flex-1 truncate", children: pending.file.name }),
+            pending.status === "uploading" ? /* @__PURE__ */ jsx27("span", { className: "flex-none text-gray-500 dark:text-gray-400", children: text.attachmentUploading(Math.round(pending.progress * 100)) }) : /* @__PURE__ */ jsxs24(Fragment7, { children: [
+              /* @__PURE__ */ jsx27("span", { role: "alert", className: "flex-none text-red-600 dark:text-red-400", children: pending.error }),
+              /* @__PURE__ */ jsx27(
                 "button",
                 {
                   type: "button",
@@ -4854,14 +5060,14 @@ function AttachmentsFormSection({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
                 "aria-label": text.attachmentCancel,
                 onClick: () => onCancelUpload(pending.localId),
                 className: "flex-none text-gray-400",
-                children: /* @__PURE__ */ jsx25(X4, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx27(X4, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
               }
             )
           ]
@@ -4869,11 +5075,11 @@ function AttachmentsFormSection({
         pending.localId
       ))
     ] }),
-    attachmentRejections.length > 0 ? /* @__PURE__ */ jsxs23("div", { role: "alert", className: "space-y-0.5 text-xs text-red-600 dark:text-red-400", children: [
-      attachmentRejections.map((rejection, index) => /* @__PURE__ */ jsx25("p", { children: rejection.reason === "limit" ? text.attachmentLimitReached : text.attachmentTooLarge(rejection.file.name) }, index)),
-      /* @__PURE__ */ jsx25("button", { type: "button", onClick: onDismissRejections, className: "hover:underline", children: text.cancel })
+    attachmentRejections.length > 0 ? /* @__PURE__ */ jsxs24("div", { role: "alert", className: "space-y-0.5 text-xs text-red-600 dark:text-red-400", children: [
+      attachmentRejections.map((rejection, index) => /* @__PURE__ */ jsx27("p", { children: rejection.reason === "limit" ? text.attachmentLimitReached : text.attachmentTooLarge(rejection.file.name) }, index)),
+      /* @__PURE__ */ jsx27("button", { type: "button", onClick: onDismissRejections, className: "hover:underline", children: text.cancel })
     ] }) : null,
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27(
       "input",
       {
         ref: attachmentFileInputRef,
@@ -4886,7 +5092,7 @@ function AttachmentsFormSection({
         }
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -4899,8 +5105,19 @@ function AttachmentsFormSection({
 }
 
 // src/quickReplies/QuickRepliesWorkspace.tsx
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var TABLE_SKELETON_ROWS = 3;
+function replaceWithNativeUndo(field, previous, next) {
+  if (!canExecuteFormattingCommand()) return false;
+  const range = changedRange(previous, next);
+  field.focus();
+  field.setSelectionRange(range.start, range.end);
+  try {
+    return range.insertedText ? document.execCommand("insertText", false, range.insertedText) : document.execCommand("delete");
+  } catch {
+    return false;
+  }
+}
 function QuickRepliesWorkspace({
   api,
   variables,
@@ -4972,14 +5189,46 @@ function QuickRepliesWorkspace({
       field.setSelectionRange(caret, caret);
     });
   };
-  return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs24("header", { className: "space-y-0.5", children: [
-      /* @__PURE__ */ jsx26("h2", { className: "text-lg font-semibold", children: text.title }),
-      /* @__PURE__ */ jsx26("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: text.subtitle(quickReplies.length) })
+  const applyFormatting = (action) => {
+    const field = bodyFieldRef.current;
+    if (!field || !editing) return;
+    const next = computeFormattingEdit({
+      text: editing.body,
+      selectionStart: field.selectionStart,
+      selectionEnd: field.selectionEnd,
+      action,
+      maximumLength: BODY_MAX_LENGTH
+    });
+    if (!next) return;
+    if (!replaceWithNativeUndo(field, editing.body, next.text) || field.value !== next.text) {
+      updateField("body", next.text);
+    }
+    requestAnimationFrame(() => {
+      field.focus();
+      field.setSelectionRange(next.selectionStart, next.selectionEnd);
+    });
+  };
+  const handleBodyKeyDown = (event) => {
+    const action = formattingActionForShortcut({
+      key: event.key,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      isComposing: event.nativeEvent.isComposing
+    });
+    if (!action) return;
+    event.preventDefault();
+    applyFormatting(action);
+  };
+  return /* @__PURE__ */ jsxs25("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs25("header", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx28("h2", { className: "text-lg font-semibold", children: text.title }),
+      /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: text.subtitle(quickReplies.length) })
     ] }),
-    readOnly ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: text.readOnlyNotice }) : null,
-    /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx26(
+    readOnly ? /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: text.readOnlyNotice }) : null,
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx28(
         "input",
         {
           type: "search",
@@ -4990,158 +5239,176 @@ function QuickRepliesWorkspace({
           className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
         }
       ),
-      !readOnly ? /* @__PURE__ */ jsx26(
+      !readOnly ? /* @__PURE__ */ jsxs25(
         "button",
         {
           type: "button",
           onClick: startCreate,
-          className: "cv-header-action ml-auto inline-flex items-center gap-1",
-          children: text.create
+          className: "cv-header-action cv-header-action--primary ml-auto inline-flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsx28(Plus2, { size: 14, "aria-hidden": "true" }),
+            text.create
+          ]
         }
       ) : null
     ] }),
-    isLoading ? /* @__PURE__ */ jsx26("span", { className: "sr-only", "aria-live": "polite", children: text.loading }) : null,
-    loadError ? /* @__PURE__ */ jsx26("p", { role: "alert", className: "text-sm text-red-600 dark:text-red-400", children: loadError || text.failure }) : null,
-    editing ? /* @__PURE__ */ jsxs24(
+    isLoading ? /* @__PURE__ */ jsx28("span", { className: "sr-only", "aria-live": "polite", children: text.loading }) : null,
+    loadError ? /* @__PURE__ */ jsx28("p", { role: "alert", className: "text-sm text-red-600 dark:text-red-400", children: loadError || text.failure }) : null,
+    editing ? /* @__PURE__ */ jsxs25(
       "form",
       {
-        className: "space-y-3 rounded-lg border border-gray-200 p-4 dark:border-gray-700",
+        className: "grid gap-4 rounded-lg border border-gray-200 p-4 dark:border-gray-700 lg:grid-cols-[minmax(0,1fr)_minmax(0,22rem)]",
         onSubmit: (event) => {
           event.preventDefault();
           void submit();
         },
         children: [
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx26("label", { className: "block text-sm font-medium", htmlFor: titleFieldId, children: text.fieldTitle }),
-            /* @__PURE__ */ jsx26(
-              "input",
-              {
-                id: titleFieldId,
-                type: "text",
-                maxLength: 40,
-                value: editing.title,
-                onChange: (event) => updateField("title", event.target.value),
-                "aria-invalid": Boolean(fieldErrors.title),
-                "aria-describedby": fieldErrors.title ? `${titleFieldId}-error` : void 0,
-                className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
-              }
-            ),
-            fieldErrors.title ? /* @__PURE__ */ jsx26("p", { id: `${titleFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.title }) : null
-          ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx26("label", { className: "block text-sm font-medium", htmlFor: shortcutFieldId, children: text.fieldShortcut }),
-            /* @__PURE__ */ jsx26(
-              "input",
-              {
-                id: shortcutFieldId,
-                type: "text",
-                maxLength: 20,
-                value: editing.shortcut,
-                onChange: (event) => updateField("shortcut", event.target.value),
-                "aria-invalid": Boolean(fieldErrors.shortcut),
-                "aria-describedby": fieldErrors.shortcut ? `${shortcutFieldId}-error` : `${shortcutFieldId}-hint`,
-                className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm font-mono dark:border-gray-700 dark:bg-gray-900"
-              }
-            ),
-            fieldErrors.shortcut ? /* @__PURE__ */ jsx26("p", { id: `${shortcutFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.shortcut }) : /* @__PURE__ */ jsx26("p", { id: `${shortcutFieldId}-hint`, className: "text-xs text-gray-400", children: text.fieldShortcutHint })
-          ] }),
-          /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx26("label", { className: "block text-sm font-medium", htmlFor: bodyFieldId, children: text.fieldBody }),
-            /* @__PURE__ */ jsx26(
-              "textarea",
+          /* @__PURE__ */ jsxs25("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx28("label", { className: "block text-sm font-medium", htmlFor: titleFieldId, children: text.fieldTitle }),
+              /* @__PURE__ */ jsx28(
+                "input",
+                {
+                  id: titleFieldId,
+                  type: "text",
+                  maxLength: 40,
+                  value: editing.title,
+                  onChange: (event) => updateField("title", event.target.value),
+                  "aria-invalid": Boolean(fieldErrors.title),
+                  "aria-describedby": fieldErrors.title ? `${titleFieldId}-error` : void 0,
+                  className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+                }
+              ),
+              fieldErrors.title ? /* @__PURE__ */ jsx28("p", { id: `${titleFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.title }) : null
+            ] }),
+            /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx28("label", { className: "block text-sm font-medium", htmlFor: shortcutFieldId, children: text.fieldShortcut }),
+              /* @__PURE__ */ jsx28(
+                "input",
+                {
+                  id: shortcutFieldId,
+                  type: "text",
+                  maxLength: 20,
+                  value: editing.shortcut,
+                  onChange: (event) => updateField("shortcut", event.target.value),
+                  "aria-invalid": Boolean(fieldErrors.shortcut),
+                  "aria-describedby": fieldErrors.shortcut ? `${shortcutFieldId}-error` : `${shortcutFieldId}-hint`,
+                  className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm font-mono dark:border-gray-700 dark:bg-gray-900"
+                }
+              ),
+              fieldErrors.shortcut ? /* @__PURE__ */ jsx28("p", { id: `${shortcutFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.shortcut }) : /* @__PURE__ */ jsx28("p", { id: `${shortcutFieldId}-hint`, className: "text-xs text-gray-400", children: text.fieldShortcutHint })
+            ] }),
+            /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx28("label", { className: "block text-sm font-medium", htmlFor: bodyFieldId, children: text.fieldBody }),
+              /* @__PURE__ */ jsx28(QuickReplyFormattingToolbar, { labels: text, onFormat: applyFormatting }),
+              /* @__PURE__ */ jsx28(
+                "textarea",
+                {
+                  id: bodyFieldId,
+                  ref: bodyFieldRef,
+                  maxLength: BODY_MAX_LENGTH,
+                  rows: 4,
+                  value: editing.body,
+                  onChange: (event) => updateField("body", event.target.value),
+                  onKeyDown: handleBodyKeyDown,
+                  "aria-invalid": Boolean(fieldErrors.body),
+                  "aria-describedby": fieldErrors.body ? `${bodyFieldId}-error` : void 0,
+                  className: "w-full resize-none rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+                }
+              ),
+              fieldErrors.body ? /* @__PURE__ */ jsx28("p", { id: `${bodyFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.body }) : null,
+              variables && variables.length > 0 ? /* @__PURE__ */ jsx28("div", { className: "flex flex-wrap gap-1 pt-1", children: variables.map((variable) => /* @__PURE__ */ jsx28(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => insertVariableAtCursor(variable.marker),
+                  "aria-label": `${text.insertVariable}: ${variable.label}`,
+                  className: "rounded-full border border-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800",
+                  children: variable.label
+                },
+                variable.id
+              )) }) : null
+            ] }),
+            hasAttachmentsCapability ? /* @__PURE__ */ jsx28(
+              AttachmentsFormSection,
               {
-                id: bodyFieldId,
-                ref: bodyFieldRef,
-                maxLength: 1e3,
-                rows: 4,
-                value: editing.body,
-                onChange: (event) => updateField("body", event.target.value),
-                "aria-invalid": Boolean(fieldErrors.body),
-                "aria-describedby": fieldErrors.body ? `${bodyFieldId}-error` : void 0,
-                className: "w-full resize-none rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+                labels: text,
+                attachments: editing.attachments,
+                pendingUploads,
+                attachmentRejections,
+                onAddFiles: addAttachmentFiles,
+                onRetryUpload: retryAttachmentUpload,
+                onCancelUpload: cancelAttachmentUpload,
+                onRemoveAttachment: removeAttachment,
+                onMoveAttachment: moveAttachmentAt,
+                onDismissRejections: dismissAttachmentRejections
               }
-            ),
-            fieldErrors.body ? /* @__PURE__ */ jsx26("p", { id: `${bodyFieldId}-error`, role: "alert", className: "text-xs text-red-600 dark:text-red-400", children: fieldErrors.body }) : null,
-            variables && variables.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1 pt-1", children: variables.map((variable) => /* @__PURE__ */ jsx26(
-              "button",
-              {
-                type: "button",
-                onClick: () => insertVariableAtCursor(variable.marker),
-                "aria-label": `${text.insertVariable}: ${variable.label}`,
-                className: "rounded-full border border-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800",
-                children: variable.label
-              },
-              variable.id
-            )) }) : null
+            ) : null,
+            saveError ? /* @__PURE__ */ jsx28("p", { role: "alert", className: "text-sm text-red-600 dark:text-red-400", children: saveError }) : null,
+            /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx28(
+                "button",
+                {
+                  type: "submit",
+                  disabled: isSaving || hasPendingUploads,
+                  "aria-busy": isSaving,
+                  title: hasPendingUploads ? text.saveBlockedUploading : void 0,
+                  className: "cv-header-action inline-flex items-center gap-1 disabled:opacity-40",
+                  children: isSaving ? text.saving : hasPendingUploads ? text.saveBlockedUploading : text.save
+                }
+              ),
+              /* @__PURE__ */ jsx28("button", { type: "button", onClick: cancelEdit, className: "text-sm text-gray-500 hover:underline", children: text.cancel })
+            ] })
           ] }),
-          hasAttachmentsCapability ? /* @__PURE__ */ jsx26(
-            AttachmentsFormSection,
+          /* @__PURE__ */ jsx28(
+            QuickReplyWhatsAppPreview,
             {
-              labels: text,
+              body: editing.body,
+              ...variables ? { variables } : {},
               attachments: editing.attachments,
-              pendingUploads,
-              attachmentRejections,
-              onAddFiles: addAttachmentFiles,
-              onRetryUpload: retryAttachmentUpload,
-              onCancelUpload: cancelAttachmentUpload,
-              onRemoveAttachment: removeAttachment,
-              onMoveAttachment: moveAttachmentAt,
-              onDismissRejections: dismissAttachmentRejections
+              labels: text
             }
-          ) : null,
-          saveError ? /* @__PURE__ */ jsx26("p", { role: "alert", className: "text-sm text-red-600 dark:text-red-400", children: saveError }) : null,
-          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx26(
-              "button",
-              {
-                type: "submit",
-                disabled: isSaving || hasPendingUploads,
-                "aria-busy": isSaving,
-                title: hasPendingUploads ? text.saveBlockedUploading : void 0,
-                className: "cv-header-action inline-flex items-center gap-1 disabled:opacity-40",
-                children: isSaving ? text.saving : hasPendingUploads ? text.saveBlockedUploading : text.save
-              }
-            ),
-            /* @__PURE__ */ jsx26("button", { type: "button", onClick: cancelEdit, className: "text-sm text-gray-500 hover:underline", children: text.cancel })
-          ] })
+          )
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx26("div", { className: "cv-table-card", children: /* @__PURE__ */ jsxs24("table", { className: "cv-table", children: [
-      /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsxs24("tr", { children: [
-        /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnTitle }),
-        /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnShortcut }),
-        /* @__PURE__ */ jsx26("th", { scope: "col", className: "hidden px-3 py-2 text-left text-xs font-medium sm:table-cell", children: text.columnBody }),
-        !readOnly ? /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnActions }) : null
+    /* @__PURE__ */ jsx28("div", { className: "cv-table-card", children: /* @__PURE__ */ jsxs25("table", { className: "cv-table", children: [
+      /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs25("tr", { children: [
+        /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnTitle }),
+        /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnShortcut }),
+        /* @__PURE__ */ jsx28("th", { scope: "col", className: "hidden px-3 py-2 text-left text-xs font-medium sm:table-cell", children: text.columnBody }),
+        !readOnly ? /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-3 py-2 text-left text-xs font-medium", children: text.columnActions }) : null
       ] }) }),
-      /* @__PURE__ */ jsxs24("tbody", { children: [
-        isLoading ? Array.from({ length: TABLE_SKELETON_ROWS }).map((_, index) => /* @__PURE__ */ jsxs24("tr", { "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx26("td", { className: "px-3 py-3", children: /* @__PURE__ */ jsx26("span", { className: "cv-skeleton-line cv-skeleton-line--title block" }) }),
-          /* @__PURE__ */ jsx26("td", { className: "px-3 py-3", children: /* @__PURE__ */ jsx26("span", { className: "cv-skeleton-line cv-skeleton-line--shortcut block" }) }),
-          /* @__PURE__ */ jsx26("td", { className: "hidden px-3 py-3 sm:table-cell", children: /* @__PURE__ */ jsx26("span", { className: "cv-skeleton-line cv-skeleton-line--body block" }) }),
-          !readOnly ? /* @__PURE__ */ jsx26("td", { className: "px-3 py-3" }) : null
-        ] }, index)) : filtered.length === 0 ? /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26("td", { colSpan: 4, className: "px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400", children: search.trim() ? text.noResults : text.empty }) }) : null,
-        !isLoading && filtered.map((quickReply) => /* @__PURE__ */ jsxs24("tr", { className: cn(deletingId === quickReply.id ? "cv-row-departing" : void 0), children: [
-          /* @__PURE__ */ jsx26("td", { className: "px-3 py-2 font-medium", children: quickReply.title }),
-          /* @__PURE__ */ jsxs24("td", { className: "px-3 py-2 font-mono text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsxs25("tbody", { children: [
+        isLoading ? Array.from({ length: TABLE_SKELETON_ROWS }).map((_, index) => /* @__PURE__ */ jsxs25("tr", { "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx28("td", { className: "px-3 py-3", children: /* @__PURE__ */ jsx28("span", { className: "cv-skeleton-line cv-skeleton-line--title block" }) }),
+          /* @__PURE__ */ jsx28("td", { className: "px-3 py-3", children: /* @__PURE__ */ jsx28("span", { className: "cv-skeleton-line cv-skeleton-line--shortcut block" }) }),
+          /* @__PURE__ */ jsx28("td", { className: "hidden px-3 py-3 sm:table-cell", children: /* @__PURE__ */ jsx28("span", { className: "cv-skeleton-line cv-skeleton-line--body block" }) }),
+          !readOnly ? /* @__PURE__ */ jsx28("td", { className: "px-3 py-3" }) : null
+        ] }, index)) : filtered.length === 0 ? /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: 4, className: "px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400", children: search.trim() ? text.noResults : text.empty }) }) : null,
+        !isLoading && filtered.map((quickReply) => /* @__PURE__ */ jsxs25("tr", { className: cn(deletingId === quickReply.id ? "cv-row-departing" : void 0), children: [
+          /* @__PURE__ */ jsx28("td", { className: "px-3 py-2 font-medium", children: quickReply.title }),
+          /* @__PURE__ */ jsxs25("td", { className: "px-3 py-2 font-mono text-xs text-gray-500", children: [
             "/",
             quickReply.shortcut
           ] }),
-          /* @__PURE__ */ jsx26("td", { className: "hidden max-w-sm truncate px-3 py-2 text-gray-500 sm:table-cell", children: quickReply.body }),
-          !readOnly ? /* @__PURE__ */ jsxs24("td", { className: "flex gap-2 px-3 py-2", children: [
-            canEdit ? /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28("td", { className: "hidden max-w-sm truncate px-3 py-2 text-gray-500 sm:table-cell", children: quickReply.body }),
+          !readOnly ? /* @__PURE__ */ jsx28("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1", children: [
+            canEdit ? /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
                 onClick: () => startEdit(quickReply),
-                className: "text-xs text-blue-600 hover:underline dark:text-blue-400",
-                children: text.edit
+                "data-cv-tooltip": text.edit,
+                "aria-label": `${text.edit}: ${quickReply.title}`,
+                className: "cv-header-icon",
+                children: /* @__PURE__ */ jsx28(Pencil2, { size: 14, "aria-hidden": "true" })
               }
             ) : null,
             canDelete ? confirmingDeleteId === quickReply.id ? (
               // Linha de confirmação inline em vez de `window.confirm`: trava a aba
               // inteira e não segue os tokens visuais do pacote (`web.md` §14).
-              /* @__PURE__ */ jsxs24(
+              /* @__PURE__ */ jsxs25(
                 "span",
                 {
                   role: "group",
@@ -5150,7 +5417,7 @@ function QuickRepliesWorkspace({
                   className: "flex items-center gap-2 text-xs",
                   children: [
                     text.removeConfirm(quickReply.title),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsxs25(
                       "button",
                       {
                         ref: confirmButtonRef,
@@ -5159,23 +5426,26 @@ function QuickRepliesWorkspace({
                           setConfirmingDeleteId(null);
                           void remove(quickReply.id);
                         },
-                        className: "font-medium text-red-600 hover:underline dark:text-red-400",
-                        children: text.remove
+                        className: "cv-header-action cv-header-action--danger inline-flex items-center gap-1",
+                        children: [
+                          /* @__PURE__ */ jsx28(Trash23, { size: 12, "aria-hidden": "true" }),
+                          text.remove
+                        ]
                       }
                     ),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx28(
                       "button",
                       {
                         type: "button",
                         onClick: () => cancelDeleteConfirm(quickReply.id),
-                        className: "text-gray-500 hover:underline dark:text-gray-400",
+                        className: "cv-header-action",
                         children: text.cancel
                       }
                     )
                   ]
                 }
               )
-            ) : /* @__PURE__ */ jsx26(
+            ) : /* @__PURE__ */ jsx28(
               "button",
               {
                 ref: (node) => {
@@ -5185,11 +5455,13 @@ function QuickRepliesWorkspace({
                 disabled: deletingId === quickReply.id,
                 "aria-busy": deletingId === quickReply.id,
                 onClick: () => setConfirmingDeleteId(quickReply.id),
-                className: "text-xs text-red-600 hover:underline disabled:opacity-50 dark:text-red-400",
-                children: deletingId === quickReply.id ? text.deleting : text.remove
+                "data-cv-tooltip": deletingId === quickReply.id ? text.deleting : text.remove,
+                "aria-label": `${deletingId === quickReply.id ? text.deleting : text.remove}: ${quickReply.title}`,
+                className: "cv-header-icon disabled:opacity-40",
+                children: /* @__PURE__ */ jsx28(Trash23, { size: 14, "aria-hidden": "true", className: "text-red-500" })
               }
             ) : null
-          ] }) : null
+          ] }) }) : null
         ] }, quickReply.id))
       ] })
     ] }) })
@@ -5202,7 +5474,7 @@ import { Check as Check2, CheckCheck, FlaskConical, Hourglass as Hourglass2, Mai
 
 // src/workspace/BulkTemplateModal.tsx
 import { useEffect as useEffect14, useMemo as useMemo4, useState as useState19 } from "react";
-import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function BulkTemplateModal({
   labels,
   expiredCount,
@@ -5233,15 +5505,15 @@ function BulkTemplateModal({
     if (!term) return templates;
     return templates.filter((template) => template.name.toLowerCase().includes(term));
   }, [templates, search]);
-  return /* @__PURE__ */ jsx27("div", { className: "cv-workspace-modal", role: "dialog", "aria-modal": "true", "aria-label": labels.templateModalTitle, children: /* @__PURE__ */ jsxs25("div", { className: "cv-workspace-modal__box", children: [
-    /* @__PURE__ */ jsxs25("header", { className: "cv-workspace-modal__header", children: [
-      /* @__PURE__ */ jsxs25("div", { children: [
-        /* @__PURE__ */ jsx27("h3", { children: labels.templateModalTitle }),
-        /* @__PURE__ */ jsx27("p", { children: labels.templateModalAvailable(templates.length) })
+  return /* @__PURE__ */ jsx29("div", { className: "cv-workspace-modal", role: "dialog", "aria-modal": "true", "aria-label": labels.templateModalTitle, children: /* @__PURE__ */ jsxs26("div", { className: "cv-workspace-modal__box", children: [
+    /* @__PURE__ */ jsxs26("header", { className: "cv-workspace-modal__header", children: [
+      /* @__PURE__ */ jsxs26("div", { children: [
+        /* @__PURE__ */ jsx29("h3", { children: labels.templateModalTitle }),
+        /* @__PURE__ */ jsx29("p", { children: labels.templateModalAvailable(templates.length) })
       ] }),
-      /* @__PURE__ */ jsx27("button", { "data-cv-tooltip": labels.templateModalCancel, type: "button", onClick: onClose, "aria-label": labels.templateModalCancel, children: "\u2715" })
+      /* @__PURE__ */ jsx29("button", { "data-cv-tooltip": labels.templateModalCancel, type: "button", onClick: onClose, "aria-label": labels.templateModalCancel, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "cv-workspace-modal__search", children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx29("div", { className: "cv-workspace-modal__search", children: /* @__PURE__ */ jsx29(
       "input",
       {
         type: "search",
@@ -5251,9 +5523,9 @@ function BulkTemplateModal({
         autoFocus: true
       }
     ) }),
-    /* @__PURE__ */ jsxs25("div", { className: "cv-workspace-modal__list", children: [
-      filtered.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "cv-workspace-empty", children: labels.templateModalEmpty }) : null,
-      filtered.map((template) => /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs26("div", { className: "cv-workspace-modal__list", children: [
+      filtered.length === 0 ? /* @__PURE__ */ jsx29("p", { className: "cv-workspace-empty", children: labels.templateModalEmpty }) : null,
+      filtered.map((template) => /* @__PURE__ */ jsxs26(
         "button",
         {
           "data-cv-tooltip": template.name,
@@ -5263,8 +5535,8 @@ function BulkTemplateModal({
           "aria-pressed": template.name === selected,
           className: `cv-workspace-modal__item${template.name === selected ? " cv-workspace-modal__item--on" : ""}`,
           children: [
-            /* @__PURE__ */ jsx27("span", { className: "cv-workspace-modal__item-name", children: template.name }),
-            /* @__PURE__ */ jsxs25("span", { className: "cv-workspace-modal__item-meta", children: [
+            /* @__PURE__ */ jsx29("span", { className: "cv-workspace-modal__item-name", children: template.name }),
+            /* @__PURE__ */ jsxs26("span", { className: "cv-workspace-modal__item-meta", children: [
               template.language,
               template.category ? ` \xB7 ${template.category.toLowerCase()}` : ""
             ] })
@@ -5273,10 +5545,10 @@ function BulkTemplateModal({
         template.name
       ))
     ] }),
-    expiredCount === 0 ? /* @__PURE__ */ jsx27("p", { className: "cv-workspace-modal__warning", children: labels.templateModalNoneExpired }) : null,
-    /* @__PURE__ */ jsxs25("footer", { className: "cv-workspace-modal__footer", children: [
-      /* @__PURE__ */ jsx27("button", { "data-cv-tooltip": labels.templateModalCancel, "aria-label": labels.templateModalCancel, type: "button", onClick: onClose, children: labels.templateModalCancel }),
-      /* @__PURE__ */ jsx27(
+    expiredCount === 0 ? /* @__PURE__ */ jsx29("p", { className: "cv-workspace-modal__warning", children: labels.templateModalNoneExpired }) : null,
+    /* @__PURE__ */ jsxs26("footer", { className: "cv-workspace-modal__footer", children: [
+      /* @__PURE__ */ jsx29("button", { "data-cv-tooltip": labels.templateModalCancel, "aria-label": labels.templateModalCancel, type: "button", onClick: onClose, children: labels.templateModalCancel }),
+      /* @__PURE__ */ jsx29(
         "button",
         {
           "data-cv-tooltip": sending ? labels.templateModalSending : labels.templateModalSend(expiredCount),
@@ -5314,7 +5586,7 @@ function resolveConversationVariables({
 
 // src/workspace/QueuedAttachmentsList.tsx
 import { useEffect as useEffect15, useRef as useRef12, useState as useState20 } from "react";
-import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function nameOf(item) {
   return item.kind === "local" ? item.file.name : item.filename;
 }
@@ -5349,7 +5621,7 @@ function AttachmentThumbnail({
     };
   }, [isImage, uploadId, getThumbnailUrl]);
   if (!isImage) return null;
-  return /* @__PURE__ */ jsx28("span", { className: "cv-attachment-item__thumbnail", "aria-hidden": "true", children: url ? /* @__PURE__ */ jsx28("img", { src: url, alt: "" }) : null });
+  return /* @__PURE__ */ jsx30("span", { className: "cv-attachment-item__thumbnail", "aria-hidden": "true", children: url ? /* @__PURE__ */ jsx30("img", { src: url, alt: "" }) : null });
 }
 function departedItemsOf(previouslyRendered, items) {
   const currentKeys = new Set(items.map(attachmentKey));
@@ -5396,25 +5668,25 @@ function QueuedAttachmentsList({
     if (status === "skipped") return labels.skipped;
     return labels.waiting;
   };
-  return /* @__PURE__ */ jsx28("ul", { className: "cv-workspace-attachments", "aria-busy": busy, "aria-live": "polite", children: rendered.map((item) => {
+  return /* @__PURE__ */ jsx30("ul", { className: "cv-workspace-attachments", "aria-busy": busy, "aria-live": "polite", children: rendered.map((item) => {
     const key = attachmentKey(item);
     const status = statusOf2(key);
     const isDeparting = departingKeys.has(key);
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       "li",
       {
         className: `cv-attachment-item cv-attachment-item--${status}${isDeparting ? " cv-attachment-item--departing" : ""}`,
         children: [
-          /* @__PURE__ */ jsx28(AttachmentThumbnail, { item, getThumbnailUrl }),
-          /* @__PURE__ */ jsxs26("span", { className: "cv-attachment-item__info", children: [
-            /* @__PURE__ */ jsx28("span", { className: "cv-attachment-item__name", children: nameOf(item) }),
-            /* @__PURE__ */ jsxs26("span", { className: "cv-attachment-item__meta", children: [
+          /* @__PURE__ */ jsx30(AttachmentThumbnail, { item, getThumbnailUrl }),
+          /* @__PURE__ */ jsxs27("span", { className: "cv-attachment-item__info", children: [
+            /* @__PURE__ */ jsx30("span", { className: "cv-attachment-item__name", children: nameOf(item) }),
+            /* @__PURE__ */ jsxs27("span", { className: "cv-attachment-item__meta", children: [
               formatFileSize(sizeOf(item)),
               " \xB7 ",
               statusLabelOf(status)
             ] })
           ] }),
-          (status === "failed" || status === "skipped") && onRetry ? /* @__PURE__ */ jsx28(
+          (status === "failed" || status === "skipped") && onRetry ? /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -5425,7 +5697,7 @@ function QueuedAttachmentsList({
               children: labels.retry
             }
           ) : null,
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               "data-cv-tooltip": labels.remove,
@@ -5687,7 +5959,7 @@ function useComposerQueue(params) {
 }
 
 // src/workspace/ConversationPane.tsx
-import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 function ConversationPane({
   conversation,
   now,
@@ -5840,8 +6112,8 @@ function ConversationPane({
     }
   } : void 0;
   const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== "human";
-  return /* @__PURE__ */ jsxs27("div", { className: "cv-workspace-pane", children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-pane", children: [
+    /* @__PURE__ */ jsx31(
       ConversationHeader,
       {
         conversation,
@@ -5856,10 +6128,10 @@ function ConversationPane({
         ...extraUtilities ? { extraUtilities } : {}
       }
     ),
-    contextEntries && contextEntries.length > 0 || flowLabel ? /* @__PURE__ */ jsx29(ConversationContextPanel, { entries: contextEntries ?? [], ...flowLabel ? { flowLabel } : {} }) : null,
-    /* @__PURE__ */ jsx29(ConversationDocumentsPanel, { conversationId: conversation.id, open: documentsOpen }),
+    contextEntries && contextEntries.length > 0 || flowLabel ? /* @__PURE__ */ jsx31(ConversationContextPanel, { entries: contextEntries ?? [], ...flowLabel ? { flowLabel } : {} }) : null,
+    /* @__PURE__ */ jsx31(ConversationDocumentsPanel, { conversationId: conversation.id, open: documentsOpen }),
     renderAboveTranscript?.(conversation, conversationContext),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx31(
       ConversationWallpaper,
       {
         ref: scroll.containerRef,
@@ -5868,9 +6140,9 @@ function ConversationPane({
         children: messages.map((message, index) => {
           const previous = index > 0 ? messages[index - 1] : void 0;
           const startsNewDay = !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString();
-          return /* @__PURE__ */ jsxs27("div", { children: [
-            startsNewDay ? /* @__PURE__ */ jsx29(DateDivider, { iso: message.timestamp }) : null,
-            /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsxs28("div", { children: [
+            startsNewDay ? /* @__PURE__ */ jsx31(DateDivider, { iso: message.timestamp }) : null,
+            /* @__PURE__ */ jsx31(
               MessageBubble,
               {
                 message,
@@ -5887,10 +6159,10 @@ function ConversationPane({
         })
       }
     ),
-    messageSelection && selectedMessageIds.size > 0 ? /* @__PURE__ */ jsxs27("div", { className: "cv-workspace-selection", children: [
-      /* @__PURE__ */ jsx29("span", { children: labels.messagesSelected(selectedMessageIds.size) }),
-      /* @__PURE__ */ jsxs27("div", { className: "cv-workspace-selection__actions", children: [
-        /* @__PURE__ */ jsx29(
+    messageSelection && selectedMessageIds.size > 0 ? /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-selection", children: [
+      /* @__PURE__ */ jsx31("span", { children: labels.messagesSelected(selectedMessageIds.size) }),
+      /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-selection__actions", children: [
+        /* @__PURE__ */ jsx31(
           "button",
           {
             "data-cv-tooltip": labels.bulkClear,
@@ -5900,7 +6172,7 @@ function ConversationPane({
             children: labels.bulkClear
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx31(
           "button",
           {
             "data-cv-tooltip": labels.copySelected,
@@ -5912,11 +6184,11 @@ function ConversationPane({
         )
       ] })
     ] }) : null,
-    sendFailure ? /* @__PURE__ */ jsx29("p", { role: "alert", className: "cv-workspace-alert", children: sendFailure }) : null,
-    blocked ? /* @__PURE__ */ jsx29(WindowExpiredNotice, { disabled: busy, onSendTemplate: () => void handleSendTemplate() }) : botOwnsConversation ? (
+    sendFailure ? /* @__PURE__ */ jsx31("p", { role: "alert", className: "cv-workspace-alert", children: sendFailure }) : null,
+    blocked ? /* @__PURE__ */ jsx31(WindowExpiredNotice, { disabled: busy, onSendTemplate: () => void handleSendTemplate() }) : botOwnsConversation ? (
       // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
-      /* @__PURE__ */ jsx29("p", { className: "cv-workspace-notice", children: labels.takeoverToReply })
-    ) : composer === "rich" ? /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx31("p", { className: "cv-workspace-notice", children: labels.takeoverToReply })
+    ) : composer === "rich" ? /* @__PURE__ */ jsx31(
       RichMessageComposer,
       {
         value: draft,
@@ -5937,7 +6209,7 @@ function ConversationPane({
         isSending: busy || isSendingDraft,
         hasQueuedAttachments: queue.length > 0,
         ...onRecordAudio ? {
-          idleAction: /* @__PURE__ */ jsx29(
+          idleAction: /* @__PURE__ */ jsx31(
             AudioRecorderButton,
             {
               onRecorded: (file) => void runSend(() => onRecordAudio(file), labels.recordFailure),
@@ -5946,7 +6218,7 @@ function ConversationPane({
           )
         } : {},
         ...queue.length > 0 ? {
-          attachmentsPreview: /* @__PURE__ */ jsx29(
+          attachmentsPreview: /* @__PURE__ */ jsx31(
             QueuedAttachmentsList,
             {
               items: queue,
@@ -5972,7 +6244,7 @@ function ConversationPane({
         ...composerVariables ? { variables: [...composerVariables] } : {},
         ...savedQuickReplies ? { savedQuickReplies } : {}
       }
-    ) : /* @__PURE__ */ jsx29(
+    ) : /* @__PURE__ */ jsx31(
       MessageComposer,
       {
         value: draft,
@@ -5989,7 +6261,7 @@ function ConversationPane({
 }
 
 // src/workspace/ConversationsInboxList.tsx
-import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 function ConversationsInboxList({
   inbox,
   labels,
@@ -6000,13 +6272,13 @@ function ConversationsInboxList({
   onSendTemplateToSelected
 }) {
   const hasSelection = inbox.selectedIds.size > 0;
-  return /* @__PURE__ */ jsxs28("aside", { className, children: [
-    hasSelection ? /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-bulk", children: [
-      /* @__PURE__ */ jsx30("span", { className: "cv-workspace-bulk__count", children: labels.bulkSelected(inbox.selectedIds.size) }),
-      /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-bulk__actions", children: [
-        /* @__PURE__ */ jsx30("button", { "data-cv-tooltip": labels.bulkClear, "aria-label": labels.bulkClear, type: "button", onClick: inbox.clearBulkSelection, children: labels.bulkClear }),
-        onSendTemplateToSelected ? /* @__PURE__ */ jsx30("button", { "data-cv-tooltip": labels.bulkTemplate, "aria-label": labels.bulkTemplate, type: "button", onClick: onSendTemplateToSelected, disabled: inbox.busy, children: labels.bulkTemplate }) : null,
-        inbox.canFinalize ? /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs29("aside", { className, children: [
+    hasSelection ? /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-bulk", children: [
+      /* @__PURE__ */ jsx32("span", { className: "cv-workspace-bulk__count", children: labels.bulkSelected(inbox.selectedIds.size) }),
+      /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-bulk__actions", children: [
+        /* @__PURE__ */ jsx32("button", { "data-cv-tooltip": labels.bulkClear, "aria-label": labels.bulkClear, type: "button", onClick: inbox.clearBulkSelection, children: labels.bulkClear }),
+        onSendTemplateToSelected ? /* @__PURE__ */ jsx32("button", { "data-cv-tooltip": labels.bulkTemplate, "aria-label": labels.bulkTemplate, type: "button", onClick: onSendTemplateToSelected, disabled: inbox.busy, children: labels.bulkTemplate }) : null,
+        inbox.canFinalize ? /* @__PURE__ */ jsx32(
           "button",
           {
             "data-cv-tooltip": labels.bulkFinalize,
@@ -6024,8 +6296,8 @@ function ConversationsInboxList({
         renderBulkActions?.(inbox)
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-filters", children: [
-      /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-filters", children: [
+      /* @__PURE__ */ jsx32(
         "input",
         {
           type: "search",
@@ -6035,9 +6307,9 @@ function ConversationsInboxList({
           className: "cv-workspace-search"
         }
       ),
-      /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-chips", children: [
-        /* @__PURE__ */ jsx30("span", { className: "cv-workspace-chips__legend", children: labels.windowLegend }),
-        WINDOW_FILTERS.map((filter) => /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-chips", children: [
+        /* @__PURE__ */ jsx32("span", { className: "cv-workspace-chips__legend", children: labels.windowLegend }),
+        WINDOW_FILTERS.map((filter) => /* @__PURE__ */ jsx32(
           "button",
           {
             type: "button",
@@ -6055,9 +6327,9 @@ function ConversationsInboxList({
           filter.value
         ))
       ] }),
-      inbox.channelFilters.length > 0 ? /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-chips", children: [
-        /* @__PURE__ */ jsx30("span", { className: "cv-workspace-chips__legend", children: labels.channelLegend }),
-        inbox.channelFilters.map((filter) => /* @__PURE__ */ jsxs28(
+      inbox.channelFilters.length > 0 ? /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-chips", children: [
+        /* @__PURE__ */ jsx32("span", { className: "cv-workspace-chips__legend", children: labels.channelLegend }),
+        inbox.channelFilters.map((filter) => /* @__PURE__ */ jsxs29(
           "button",
           {
             "data-cv-tooltip": filter.label,
@@ -6067,7 +6339,7 @@ function ConversationsInboxList({
             "aria-pressed": inbox.channelFilter === filter.value,
             className: `cv-workspace-chip${inbox.channelFilter === filter.value ? " cv-workspace-chip--on" : ""}`,
             children: [
-              filter.value === CHANNEL_FILTER_ALL ? null : /* @__PURE__ */ jsx30(ChannelIcon, { channel: filter.value }),
+              filter.value === CHANNEL_FILTER_ALL ? null : /* @__PURE__ */ jsx32(ChannelIcon, { channel: filter.value }),
               filter.label
             ]
           },
@@ -6075,14 +6347,14 @@ function ConversationsInboxList({
         ))
       ] }) : null,
       renderFilters?.(inbox),
-      /* @__PURE__ */ jsxs28("label", { className: "cv-workspace-selectall", children: [
-        /* @__PURE__ */ jsx30("input", { type: "checkbox", checked: inbox.allOnPageSelected, onChange: inbox.toggleSelectAllOnPage }),
+      /* @__PURE__ */ jsxs29("label", { className: "cv-workspace-selectall", children: [
+        /* @__PURE__ */ jsx32("input", { type: "checkbox", checked: inbox.allOnPageSelected, onChange: inbox.toggleSelectAllOnPage }),
         labels.selectAll
       ] })
     ] }),
-    /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-rows", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-rows", children: [
       inbox.pageConversations.map(
-        (conversation) => renderRow ? /* @__PURE__ */ jsx30("div", { children: renderRow(conversation) }, conversation.id) : /* @__PURE__ */ jsx30(
+        (conversation) => renderRow ? /* @__PURE__ */ jsx32("div", { children: renderRow(conversation) }, conversation.id) : /* @__PURE__ */ jsx32(
           ConversationRow,
           {
             conversation,
@@ -6097,13 +6369,13 @@ function ConversationsInboxList({
           conversation.id
         )
       ),
-      !inbox.loading && inbox.filteredCount === 0 ? /* @__PURE__ */ jsx30("p", { className: "cv-workspace-empty", children: labels.emptyList }) : null
+      !inbox.loading && inbox.filteredCount === 0 ? /* @__PURE__ */ jsx32("p", { className: "cv-workspace-empty", children: labels.emptyList }) : null
     ] }),
-    /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-pager", children: [
-      /* @__PURE__ */ jsx30("span", { children: labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount) }),
-      /* @__PURE__ */ jsxs28("div", { className: "cv-workspace-pager__buttons", children: [
-        /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => inbox.goToPage(1), disabled: inbox.page === 1, "aria-label": PAGINATION_LABELS.first, "data-cv-tooltip": PAGINATION_LABELS.first, children: "\xAB" }),
-        /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-pager", children: [
+      /* @__PURE__ */ jsx32("span", { children: labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount) }),
+      /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-pager__buttons", children: [
+        /* @__PURE__ */ jsx32("button", { type: "button", onClick: () => inbox.goToPage(1), disabled: inbox.page === 1, "aria-label": PAGINATION_LABELS.first, "data-cv-tooltip": PAGINATION_LABELS.first, children: "\xAB" }),
+        /* @__PURE__ */ jsx32(
           "button",
           {
             type: "button",
@@ -6114,8 +6386,8 @@ function ConversationsInboxList({
             children: "\u2039"
           }
         ),
-        /* @__PURE__ */ jsx30("span", { children: labels.pageOf(inbox.page, inbox.pageCount) }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32("span", { children: labels.pageOf(inbox.page, inbox.pageCount) }),
+        /* @__PURE__ */ jsx32(
           "button",
           {
             type: "button",
@@ -6126,7 +6398,7 @@ function ConversationsInboxList({
             children: "\u203A"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           "button",
           {
             type: "button",
@@ -6372,7 +6644,7 @@ function useConversationsInbox(params = {}) {
 }
 
 // src/workspace/ConversationsWorkspace.tsx
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function ConversationsWorkspace({
   labels: labelsOverride,
   filters,
@@ -6448,50 +6720,50 @@ function ConversationsWorkspace({
       ...fromProduct,
       {
         key: "simulator",
-        icon: simulator?.icon ?? /* @__PURE__ */ jsx31(FlaskConical, { size: ICON_SIZE_ACTION }),
+        icon: simulator?.icon ?? /* @__PURE__ */ jsx33(FlaskConical, { size: ICON_SIZE_ACTION }),
         label: simulator?.label ?? "Simular cliente",
         active: simulatorOpen,
         run: () => setSimulatorOpen((open) => !open)
       }
     ];
   }, [selected, extraUtilitiesFor, simulatorEnabled, simulator, simulatorOpen]);
-  return /* @__PURE__ */ jsxs29("div", { className: `cv-workspace${className ? ` ${className}` : ""}`, children: [
-    /* @__PURE__ */ jsx31(TooltipLayer, {}),
-    /* @__PURE__ */ jsxs29("header", { className: "cv-workspace-header", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-header__titles", children: [
-        /* @__PURE__ */ jsx31("h1", { children: labels.title }),
-        /* @__PURE__ */ jsxs29("p", { children: [
-          /* @__PURE__ */ jsxs29("span", { "data-cv-tooltip": labels.conversations, className: "cv-stat", children: [
-            /* @__PURE__ */ jsx31(MessagesSquare, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs30("div", { className: `cv-workspace${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx33(TooltipLayer, {}),
+    /* @__PURE__ */ jsxs30("header", { className: "cv-workspace-header", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "cv-workspace-header__titles", children: [
+        /* @__PURE__ */ jsx33("h1", { children: labels.title }),
+        /* @__PURE__ */ jsxs30("p", { children: [
+          /* @__PURE__ */ jsxs30("span", { "data-cv-tooltip": labels.conversations, className: "cv-stat", children: [
+            /* @__PURE__ */ jsx33(MessagesSquare, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
             " ",
             inbox.totalCount,
-            /* @__PURE__ */ jsxs29("span", { className: "cv-only-wide", children: [
+            /* @__PURE__ */ jsxs30("span", { className: "cv-only-wide", children: [
               " ",
               labels.conversations
             ] })
           ] }),
-          /* @__PURE__ */ jsxs29("span", { "data-cv-tooltip": labels.waiting, className: "cv-stat cv-workspace-header__waiting", children: [
-            /* @__PURE__ */ jsx31(Hourglass2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs30("span", { "data-cv-tooltip": labels.waiting, className: "cv-stat cv-workspace-header__waiting", children: [
+            /* @__PURE__ */ jsx33(Hourglass2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
             " ",
             inbox.waitingCount,
-            /* @__PURE__ */ jsxs29("span", { className: "cv-only-wide", children: [
+            /* @__PURE__ */ jsxs30("span", { className: "cv-only-wide", children: [
               " ",
               labels.waiting
             ] })
           ] }),
-          /* @__PURE__ */ jsxs29("span", { "data-cv-tooltip": labels.unread, className: "cv-stat", children: [
-            /* @__PURE__ */ jsx31(Mail2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs30("span", { "data-cv-tooltip": labels.unread, className: "cv-stat", children: [
+            /* @__PURE__ */ jsx33(Mail2, { size: ICON_SIZE_INLINE, "aria-hidden": "true" }),
             " ",
             inbox.unreadCount,
-            /* @__PURE__ */ jsxs29("span", { className: "cv-only-wide", children: [
+            /* @__PURE__ */ jsxs30("span", { className: "cv-only-wide", children: [
               " ",
               labels.unread
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs29("div", { className: "cv-workspace-header__actions", children: [
-        /* @__PURE__ */ jsxs29(
+      /* @__PURE__ */ jsxs30("div", { className: "cv-workspace-header__actions", children: [
+        /* @__PURE__ */ jsxs30(
           "button",
           {
             type: "button",
@@ -6501,12 +6773,12 @@ function ConversationsWorkspace({
             "aria-label": labels.waitingOnly,
             className: inbox.waitingOnly ? "cv-workspace-toggle cv-workspace-toggle--on" : "cv-workspace-toggle",
             children: [
-              /* @__PURE__ */ jsx31(Hourglass2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx31("span", { className: "cv-only-wide", children: labels.waitingOnly })
+              /* @__PURE__ */ jsx33(Hourglass2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx33("span", { className: "cv-only-wide", children: labels.waitingOnly })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs30(
           "button",
           {
             type: "button",
@@ -6516,9 +6788,9 @@ function ConversationsWorkspace({
             "aria-label": labels.markSelectedAsRead,
             className: "cv-workspace-toggle",
             children: [
-              /* @__PURE__ */ jsx31(Check2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx31("span", { className: "cv-only-wide", children: labels.markSelectedAsRead }),
-              inbox.selectedIds.size > 0 ? /* @__PURE__ */ jsxs29("span", { children: [
+              /* @__PURE__ */ jsx33(Check2, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx33("span", { className: "cv-only-wide", children: labels.markSelectedAsRead }),
+              inbox.selectedIds.size > 0 ? /* @__PURE__ */ jsxs30("span", { children: [
                 "(",
                 inbox.selectedIds.size,
                 ")"
@@ -6526,7 +6798,7 @@ function ConversationsWorkspace({
             ]
           }
         ),
-        inbox.canMarkAllRead && inbox.unreadCount > 0 ? /* @__PURE__ */ jsxs29(
+        inbox.canMarkAllRead && inbox.unreadCount > 0 ? /* @__PURE__ */ jsxs30(
           "button",
           {
             type: "button",
@@ -6536,28 +6808,28 @@ function ConversationsWorkspace({
             "aria-label": labels.markAllAsRead,
             className: "cv-workspace-toggle",
             children: [
-              /* @__PURE__ */ jsx31(CheckCheck, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx31("span", { className: "cv-only-wide", children: labels.markAllAsRead })
+              /* @__PURE__ */ jsx33(CheckCheck, { size: ICON_SIZE_ACTION, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx33("span", { className: "cv-only-wide", children: labels.markAllAsRead })
             ]
           }
         ) : null,
         renderHeaderActions?.(inbox)
       ] })
     ] }),
-    inbox.loadFailure ? /* @__PURE__ */ jsxs29("p", { role: "alert", className: "cv-workspace-failure", children: [
+    inbox.loadFailure ? /* @__PURE__ */ jsxs30("p", { role: "alert", className: "cv-workspace-failure", children: [
       inbox.loadFailure,
-      signInHref ? /* @__PURE__ */ jsxs29(Fragment8, { children: [
+      signInHref ? /* @__PURE__ */ jsxs30(Fragment8, { children: [
         " ",
-        /* @__PURE__ */ jsx31("a", { href: signInHref, className: "cv-workspace-failure__link", children: labels.signIn })
+        /* @__PURE__ */ jsx33("a", { href: signInHref, className: "cv-workspace-failure__link", children: labels.signIn })
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsxs30(
       "div",
       {
         className: `cv-workspace-grid${showSimulator ? " cv-workspace-grid--with-simulator" : ""}`,
         "data-detail": selected ? "open" : "closed",
         children: [
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx33(
             ConversationsInboxList,
             {
               inbox,
@@ -6569,7 +6841,7 @@ function ConversationsWorkspace({
               ...onSendTemplateToSelected ? { onSendTemplateToSelected: () => onSendTemplateToSelected(inbox) } : inbox.canListTemplates ? { onSendTemplateToSelected: () => setTemplateModalOpen(true) } : {}
             }
           ),
-          /* @__PURE__ */ jsx31("section", { className: "cv-workspace-detail", children: selected ? /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx33("section", { className: "cv-workspace-detail", children: selected ? /* @__PURE__ */ jsx33(
             ConversationPane,
             {
               conversation: selected,
@@ -6599,14 +6871,14 @@ function ConversationsWorkspace({
               ...renderAboveTranscript ? { renderAboveTranscript } : {},
               ...onAttach ? { onAttach: (file) => onAttach(selected, file) } : {}
             }
-          ) : /* @__PURE__ */ jsx31("p", { className: "cv-workspace-empty", children: labels.emptyDetail }) }),
+          ) : /* @__PURE__ */ jsx33("p", { className: "cv-workspace-empty", children: labels.emptyDetail }) }),
           showSimulator && selected ? (
             // `min-height:0` junto do `min-width:0`: sem isso a linha do grid cresce com o conteúdo do
             // painel, o scroll interno nunca ativa e quem rola passa a ser a página inteira.
-            /* @__PURE__ */ jsx31("div", { className: "cv-workspace-simulator", children: simulator?.render ? simulator.render({ conversationId: selected.id, channel, close: () => setSimulatorOpen(false) }) : simulatorClient && conversations ? (
+            /* @__PURE__ */ jsx33("div", { className: "cv-workspace-simulator", children: simulator?.render ? simulator.render({ conversationId: selected.id, channel, close: () => setSimulatorOpen(false) }) : simulatorClient && conversations ? (
               // `key` pela conversa: trocar de contato sem remontar deixaria o transcript e o campo
               // de texto do contato anterior na tela.
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx33(
                 ConversationSimulatorPanel,
                 {
                   client: simulatorClient,
@@ -6627,7 +6899,7 @@ function ConversationsWorkspace({
         ]
       }
     ),
-    templateModalOpen ? /* @__PURE__ */ jsx31(
+    templateModalOpen ? /* @__PURE__ */ jsx33(
       BulkTemplateModal,
       {
         labels,
@@ -6729,10 +7001,12 @@ export {
   TooltipLayer,
   TopicsForm,
   TranscriptionSettingsForm,
+  WHATSAPP_MARKER_BY_ACTION,
   WINDOW_FILTERS,
   WelcomeFarewellForm,
   WhatsAppCreateTemplateForm,
   WhatsAppMessageEditor,
+  WhatsAppMessagePreview,
   WhatsAppTemplateSettingsForm,
   WhatsAppTemplatesSettings,
   WindowExpiredNotice,