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

package/dist/index.js

@@ -51,128 +51,14 @@ import {
   waToHTMLInline
 } from "./chunk-2AYDBWNE.js";
 
-// src/WhatsAppMessageEditor.tsx
-import { useRef } from "react";
-import { Bold, Italic, Strikethrough } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS = {
-  bold: "Negrito",
-  boldHint: "Negrito (*texto*)",
-  italic: "It\xE1lico",
-  italicHint: "It\xE1lico (_texto_)",
-  strikethrough: "Tachado",
-  strikethroughHint: "Tachado (~texto~)",
-  insertPlaceholder: (token) => `Inserir ${token}`
-};
-var INLINE_TOKEN = /(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|\{[a-zA-Z_]+\})/g;
-function renderLine(line, lineKey) {
-  const nodes = [];
-  let lastIndex = 0;
-  let match;
-  let tokenIndex = 0;
-  INLINE_TOKEN.lastIndex = 0;
-  while ((match = INLINE_TOKEN.exec(line)) !== null) {
-    if (match.index > lastIndex) nodes.push(line.slice(lastIndex, match.index));
-    const token = match[0];
-    const key = `${lineKey}-${tokenIndex++}`;
-    if (token.startsWith("*")) nodes.push(/* @__PURE__ */ jsx("strong", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("_")) nodes.push(/* @__PURE__ */ jsx("em", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("~")) nodes.push(/* @__PURE__ */ jsx("s", { children: token.slice(1, -1) }, key));
-    else if (token.startsWith("`")) nodes.push(/* @__PURE__ */ jsx("code", { className: "font-mono text-[0.85em]", children: token.slice(1, -1) }, key));
-    else nodes.push(/* @__PURE__ */ jsx("span", { className: "rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1", children: token }, key));
-    lastIndex = INLINE_TOKEN.lastIndex;
-  }
-  if (lastIndex < line.length) nodes.push(line.slice(lastIndex));
-  return nodes;
-}
-function renderWhatsApp(text) {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs("span", { children: [
-    renderLine(line, `ln-${index}`),
-    index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-  ] }, `ln-${index}`));
-}
-function WhatsAppMessageEditor({
-  value,
-  onChange,
-  placeholder,
-  placeholders = [],
-  rows = 4,
-  previewLabel = "Pr\xE9via (como aparece no WhatsApp)",
-  emptyPreviewText = "Sua mensagem aparecer\xE1 aqui\u2026",
-  labels
-}) {
-  const editorLabels = { ...DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, ...labels };
-  const textareaRef = useRef(null);
-  function wrapSelection(marker) {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selected = value.slice(start, end) || "texto";
-    const next = value.slice(0, start) + marker + selected + marker + value.slice(end);
-    onChange(next);
-    requestAnimationFrame(() => {
-      textarea.focus();
-      textarea.setSelectionRange(start + marker.length, start + marker.length + selected.length);
-    });
-  }
-  function insertAtCursor(snippet) {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const next = value.slice(0, start) + snippet + value.slice(end);
-    onChange(next);
-    requestAnimationFrame(() => {
-      textarea.focus();
-      const caret = start + snippet.length;
-      textarea.setSelectionRange(caret, caret);
-    });
-  }
-  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__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 mb-2", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wrapSelection("*"), className: toolbarButtonClass, title: editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, title: editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, title: editorLabels.strikethroughHint, "aria-label": editorLabels.strikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) }),
-      placeholders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" }),
-        placeholders.map((token) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => insertAtCursor(token),
-            className: "inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors",
-            title: editorLabels.insertPlaceholder(token),
-            children: token
-          },
-          token
-        ))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: textareaRef,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        placeholder,
-        rows,
-        className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-y"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: previewLabel }),
-      /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsx("div", { className: "inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }) }) })
-    ] })
-  ] });
-}
+// src/RichMessageComposer.tsx
+import { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
+import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces } from "lucide-react";
 
 // src/SimpleEmojiPicker.tsx
-import { useEffect, useRef as useRef2, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Smile } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var EMOJIS = [
   "\u{1F600}",
   "\u{1F602}",
@@ -257,7 +143,7 @@ var EMOJIS = [
 ];
 function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px", pickerMaxHeight = "220px" }) {
   const [open, setOpen] = useState(false);
-  const containerRef = useRef2(null);
+  const containerRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -268,23 +154,23 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative flex-shrink-0", children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex-shrink-0", children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
         className: "w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors",
         title: label,
-        children: /* @__PURE__ */ jsx2(Smile, { size: 15 })
+        children: /* @__PURE__ */ jsx(Smile, { size: 15 })
       }
     ),
-    open && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50", children: /* @__PURE__ */ jsx2(
+    open && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "grid grid-cols-10 gap-0.5 overflow-y-auto",
         style: { width: pickerWidth, maxHeight: pickerMaxHeight },
-        children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx2(
+        children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -302,8 +188,374 @@ function SimpleEmojiPicker({ onSelect, label = "Emojis", pickerWidth = "280px",
   ] });
 }
 
+// src/RichMessageComposer.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RICH_COMPOSER_ACTION = {
+  BOLD: "bold",
+  ITALIC: "italic",
+  STRIKETHROUGH: "strikethrough",
+  MONOSPACE: "monospace",
+  EMOJI: "emoji",
+  ATTACH: "attach",
+  VARIABLES: "variables"
+};
+var DEFAULT_RICH_COMPOSER_TOOLTIPS = {
+  bold: "Negrito",
+  italic: "It\xE1lico",
+  strikethrough: "Tachado",
+  monospace: "Monoespa\xE7ado",
+  emoji: "Emojis",
+  attach: "Anexar arquivo",
+  send: "Enviar",
+  variables: "Vari\xE1veis dispon\xEDveis"
+};
+var FORMATTING_ELEMENT = {
+  bold: "strong",
+  italic: "em",
+  strikethrough: "del",
+  monospace: "code"
+};
+var MONOSPACE_CLASS = "bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm";
+var RichMessageComposer = forwardRef(function RichMessageComposer2({
+  value,
+  onChange,
+  onSend,
+  onAttachFiles,
+  quickReplies,
+  variables,
+  toolbar,
+  tooltips,
+  placeholder,
+  disabled = false,
+  isSending = false,
+  idleAction,
+  attachmentsPreview,
+  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+  className
+}, ref) {
+  const editorRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const variablesRef = useRef2(null);
+  const [isVariablesOpen, setIsVariablesOpen] = useState2(false);
+  useEffect2(() => {
+    if (!isVariablesOpen) return;
+    const closeOnOutsideClick = (event) => {
+      if (!variablesRef.current?.contains(event.target)) setIsVariablesOpen(false);
+    };
+    document.addEventListener("mousedown", closeOnOutsideClick);
+    return () => document.removeEventListener("mousedown", closeOnOutsideClick);
+  }, [isVariablesOpen]);
+  const tooltipOf = (action) => tooltips?.[action] ?? DEFAULT_RICH_COMPOSER_TOOLTIPS[action];
+  const shows = (action) => toolbar?.[action] !== false;
+  const replaceContent = useCallback((text) => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.innerHTML = waToHTML(text);
+    onChange(htmlToWA(editor.innerHTML));
+    editor.focus();
+  }, [onChange]);
+  useImperativeHandle(ref, () => ({
+    setContent: replaceContent,
+    clear: () => {
+      const editor = editorRef.current;
+      if (!editor) return;
+      editor.innerHTML = "";
+      onChange("");
+    },
+    focus: () => editorRef.current?.focus()
+  }), [onChange, replaceContent]);
+  const currentRange = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return void 0;
+    editor.focus();
+    const selection = window.getSelection();
+    if (!selection?.rangeCount || !editor.contains(selection.anchorNode)) return void 0;
+    return selection.getRangeAt(0);
+  }, []);
+  const commitRange = useCallback((range, node) => {
+    const selection = window.getSelection();
+    range.setStartAfter(node);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    onChange(htmlToWA(editorRef.current?.innerHTML ?? ""));
+  }, [onChange]);
+  const insertAtCursor = useCallback((fragment) => {
+    const range = currentRange();
+    if (!range) return;
+    range.deleteContents();
+    const textNode = document.createTextNode(fragment);
+    range.insertNode(textNode);
+    commitRange(range, textNode);
+  }, [commitRange, currentRange]);
+  const wrapSelection = useCallback((action) => {
+    const range = currentRange();
+    const selectedText = range?.toString();
+    if (!range || !selectedText) return;
+    range.deleteContents();
+    const wrapper = document.createElement(FORMATTING_ELEMENT[action]);
+    if (action === "monospace") wrapper.className = MONOSPACE_CLASS;
+    wrapper.textContent = selectedText;
+    range.insertNode(wrapper);
+    commitRange(range, wrapper);
+  }, [commitRange, currentRange]);
+  const handleInput = useCallback((event) => {
+    onChange(htmlToWA(event.currentTarget.innerHTML));
+  }, [onChange]);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (!disabled) onSend();
+    }
+  }, [disabled, onSend]);
+  const handleFileChange = useCallback((event) => {
+    if (event.target.files?.length) onAttachFiles?.(event.target.files);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [onAttachFiles]);
+  const canSend = value.trim().length > 0;
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
+    attachmentsPreview,
+    quickReplies?.length ? (
+      /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
+         celular come a altura da conversa, que é o que o operador precisa ver. */
+      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          title: quickReply.tooltip,
+          onClick: () => replaceContent(quickReply.text),
+          className: "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 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          children: quickReply.label
+        },
+        quickReply.id
+      )) })
+    ) : null,
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-end gap-2", children: [
+      /* @__PURE__ */ jsx2("div", { className: "mb-0.5 hidden items-center gap-0.5 sm:flex", children: [
+        [RICH_COMPOSER_ACTION.BOLD, Bold],
+        [RICH_COMPOSER_ACTION.ITALIC, Italic],
+        [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
+        [RICH_COMPOSER_ACTION.MONOSPACE, Code]
+      ].filter(([action]) => shows(action)).map(([action, Icon]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => wrapSelection(action),
+          title: tooltipOf(action),
+          "aria-label": tooltipOf(action),
+          className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+          children: /* @__PURE__ */ jsx2(Icon, { size: 15 })
+        },
+        action
+      )) }),
+      shows(RICH_COMPOSER_ACTION.EMOJI) ? /* @__PURE__ */ jsx2(SimpleEmojiPicker, { onSelect: insertAtCursor, label: tooltipOf("emoji") }) : null,
+      variables?.length && shows(RICH_COMPOSER_ACTION.VARIABLES) ? /* @__PURE__ */ jsxs2("div", { ref: variablesRef, className: "relative", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsVariablesOpen((open) => !open),
+            title: tooltipOf("variables"),
+            "aria-label": tooltipOf("variables"),
+            "aria-expanded": isVariablesOpen,
+            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            children: /* @__PURE__ */ jsx2(Braces, { size: 18 })
+          }
+        ),
+        isVariablesOpen ? /* @__PURE__ */ jsx2("div", { className: "absolute bottom-full left-0 z-20 mb-2 max-h-56 w-64 overflow-y-auto rounded-xl border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800", children: variables.map((variable) => /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            title: variable.tooltip ?? variable.value,
+            onClick: () => {
+              insertAtCursor(variable.value);
+              setIsVariablesOpen(false);
+            },
+            className: "flex w-full flex-col items-start px-3 py-1.5 text-left hover:bg-teal-50 dark:hover:bg-teal-950/40",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-sm text-gray-800 dark:text-gray-100", children: variable.label }),
+              /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-gray-400 dark:text-gray-500", children: variable.value })
+            ]
+          },
+          variable.id
+        )) }) : null
+      ] }) : null,
+      onAttachFiles && shows(RICH_COMPOSER_ACTION.ATTACH) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            accept: acceptedFileTypes,
+            onChange: handleFileChange,
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => fileInputRef.current?.click(),
+            title: tooltipOf("attach"),
+            "aria-label": tooltipOf("attach"),
+            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400",
+            children: /* @__PURE__ */ jsx2(Paperclip, { size: 18 })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": placeholder,
+          "data-placeholder": placeholder,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          style: { minHeight: "36px", maxHeight: "120px" },
+          className: "flex-1 min-w-[180px] overflow-y-auto rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_em]:italic [&_del]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
+        }
+      ),
+      !canSend && idleAction ? /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", children: idleAction }) : /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onSend,
+          disabled: disabled || isSending || !canSend,
+          title: tooltipOf("send"),
+          "aria-label": tooltipOf("send"),
+          className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-teal-600 text-white transition-colors hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-40",
+          children: isSending ? /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u23F3" }) : /* @__PURE__ */ jsx2(SendHorizonal, { size: 16 })
+        }
+      )
+    ] })
+  ] });
+});
+
+// src/WhatsAppMessageEditor.tsx
+import { useRef as useRef3 } from "react";
+import { Bold as Bold2, Italic as Italic2, Strikethrough as Strikethrough2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS = {
+  bold: "Negrito",
+  boldHint: "Negrito (*texto*)",
+  italic: "It\xE1lico",
+  italicHint: "It\xE1lico (_texto_)",
+  strikethrough: "Tachado",
+  strikethroughHint: "Tachado (~texto~)",
+  insertPlaceholder: (token) => `Inserir ${token}`
+};
+var INLINE_TOKEN = /(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|\{[a-zA-Z_]+\})/g;
+function renderLine(line, lineKey) {
+  const nodes = [];
+  let lastIndex = 0;
+  let match;
+  let tokenIndex = 0;
+  INLINE_TOKEN.lastIndex = 0;
+  while ((match = INLINE_TOKEN.exec(line)) !== null) {
+    if (match.index > lastIndex) nodes.push(line.slice(lastIndex, match.index));
+    const token = match[0];
+    const key = `${lineKey}-${tokenIndex++}`;
+    if (token.startsWith("*")) nodes.push(/* @__PURE__ */ jsx3("strong", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("_")) nodes.push(/* @__PURE__ */ jsx3("em", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("~")) nodes.push(/* @__PURE__ */ jsx3("s", { children: token.slice(1, -1) }, key));
+    else if (token.startsWith("`")) nodes.push(/* @__PURE__ */ jsx3("code", { className: "font-mono text-[0.85em]", children: token.slice(1, -1) }, key));
+    else nodes.push(/* @__PURE__ */ jsx3("span", { className: "rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1", children: token }, key));
+    lastIndex = INLINE_TOKEN.lastIndex;
+  }
+  if (lastIndex < line.length) nodes.push(line.slice(lastIndex));
+  return nodes;
+}
+function renderWhatsApp(text) {
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs3("span", { children: [
+    renderLine(line, `ln-${index}`),
+    index < lines.length - 1 ? /* @__PURE__ */ jsx3("br", {}) : null
+  ] }, `ln-${index}`));
+}
+function WhatsAppMessageEditor({
+  value,
+  onChange,
+  placeholder,
+  placeholders = [],
+  rows = 4,
+  previewLabel = "Pr\xE9via (como aparece no WhatsApp)",
+  emptyPreviewText = "Sua mensagem aparecer\xE1 aqui\u2026",
+  labels
+}) {
+  const editorLabels = { ...DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, ...labels };
+  const textareaRef = useRef3(null);
+  function wrapSelection(marker) {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selected = value.slice(start, end) || "texto";
+    const next = value.slice(0, start) + marker + selected + marker + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + marker.length, start + marker.length + selected.length);
+    });
+  }
+  function insertAtCursor(snippet) {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const next = value.slice(0, start) + snippet + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      const caret = start + snippet.length;
+      textarea.setSelectionRange(caret, caret);
+    });
+  }
+  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, title: editorLabels.boldHint, "aria-label": editorLabels.bold, children: /* @__PURE__ */ jsx3(Bold2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("_"), className: toolbarButtonClass, title: editorLabels.italicHint, "aria-label": editorLabels.italic, children: /* @__PURE__ */ jsx3(Italic2, { size: 15 }) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => wrapSelection("~"), className: toolbarButtonClass, title: 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(
+          "button",
+          {
+            type: "button",
+            onClick: () => insertAtCursor(token),
+            className: "inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors",
+            title: editorLabels.insertPlaceholder(token),
+            children: token
+          },
+          token
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        rows,
+        className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-y"
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: previewLabel }),
+      /* @__PURE__ */ jsx3("div", { className: "rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsx3("div", { className: "inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words", children: value.trim() ? renderWhatsApp(value) : /* @__PURE__ */ jsx3("span", { className: "text-gray-400 dark:text-gray-500", children: emptyPreviewText }) }) })
+    ] })
+  ] });
+}
+
 // src/Avatar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DEFAULT_AVATAR_LABELS = {
   unnamedContact: "Contato sem nome"
 };
@@ -336,7 +588,7 @@ function Avatar({ name, avatarUrl, size = "md", className = "", labels }) {
   const sizeClass = sizeClasses[size];
   const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact;
   if (avatarUrl) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "img",
       {
         src: avatarUrl,
@@ -347,17 +599,17 @@ function Avatar({ name, avatarUrl, size = "md", className = "", labels }) {
   }
   const bgColor = getBgColor(name);
   if (!name) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "div",
       {
         className: `${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`,
         role: "img",
         "aria-label": unnamedContactLabel,
-        children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-[60%] w-[60%]", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" }) })
+        children: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-[60%] w-[60%]", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" }) })
       }
     );
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: `${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`,
@@ -450,7 +702,7 @@ function contactFlag(params) {
 }
 
 // src/ConversationListItem.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_LIST_ITEM_LABELS = {
   expiredWindow: "Janela expirada",
   warningWindow: "Janela pr\xF3xima do fim"
@@ -533,7 +785,7 @@ var ConversationListItem = ({
     onClick?.();
     onSelect?.(conversation.id);
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       onClick: handleClick,
@@ -542,34 +794,34 @@ var ConversationListItem = ({
         backgroundColor: isActive && highlightActive ? "#f0f2f5" : "transparent"
       },
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "relative flex-shrink-0", children: [
-          /* @__PURE__ */ jsx4(Avatar, { name: conversation.clientName, size: "lg" }),
-          conversation.waitingHuman && /* @__PURE__ */ jsx4("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" })
+        /* @__PURE__ */ jsxs4("div", { className: "relative flex-shrink-0", children: [
+          /* @__PURE__ */ jsx5(Avatar, { name: conversation.clientName, size: "lg" }),
+          conversation.waitingHuman && /* @__PURE__ */ jsx5("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-              !conversation.clientName && flag ? /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: flag }) : null,
-              /* @__PURE__ */ jsx4("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
-              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx4("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", title: expiredWindowLabel }),
-              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx4("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", title: warningWindowLabel })
+        /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+              !conversation.clientName && flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
+              /* @__PURE__ */ jsx5("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
+              windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", title: expiredWindowLabel }),
+              windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", title: warningWindowLabel })
             ] }),
-            timestamp && /* @__PURE__ */ jsx4("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
+            timestamp && /* @__PURE__ */ jsx5("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
           ] }),
-          conversation.clientName ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 text-xs text-[#667781]", children: [
-            flag ? /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: flag }) : null,
-            /* @__PURE__ */ jsx4("span", { className: "truncate", children: displayHandle })
+          conversation.clientName ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 text-xs text-[#667781]", children: [
+            flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
+            /* @__PURE__ */ jsx5("span", { className: "truncate", children: displayHandle })
           ] }) : null,
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mt-0.5", children: [
-            /* @__PURE__ */ jsxs3("span", { className: "text-sm text-[#667781] truncate max-w-[180px]", children: [
-              preview.icon && /* @__PURE__ */ jsx4("span", { className: "mr-1", children: preview.icon }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mt-0.5", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "text-sm text-[#667781] truncate max-w-[180px]", children: [
+              preview.icon && /* @__PURE__ */ jsx5("span", { className: "mr-1", children: preview.icon }),
               preview.preview || "Sem mensagens"
             ] }),
-            conversation.unread > 0 && /* @__PURE__ */ jsx4("span", { className: "bg-[#25d366] text-white text-xs font-semibold rounded-full min-w-[20px] h-5 px-1.5 flex items-center justify-center flex-shrink-0 ml-2", children: conversation.unread > 99 ? "99+" : conversation.unread })
+            conversation.unread > 0 && /* @__PURE__ */ jsx5("span", { className: "bg-[#25d366] text-white text-xs font-semibold rounded-full min-w-[20px] h-5 px-1.5 flex items-center justify-center flex-shrink-0 ml-2", children: conversation.unread > 99 ? "99+" : conversation.unread })
           ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5 mt-1", children: [
-            conversation.mode === "human" && /* @__PURE__ */ jsx4("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 text-purple-700", children: "Humano" }),
-            conversation.mode === "bot" && conversation.waitingHuman && /* @__PURE__ */ jsx4("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700", children: "Aguardando" })
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 mt-1", children: [
+            conversation.mode === "human" && /* @__PURE__ */ jsx5("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 text-purple-700", children: "Humano" }),
+            conversation.mode === "bot" && conversation.waitingHuman && /* @__PURE__ */ jsx5("span", { className: "text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700", children: "Aguardando" })
           ] })
         ] })
       ]
@@ -578,8 +830,8 @@ var ConversationListItem = ({
 };
 
 // src/Toast.tsx
-import { createContext, useContext, useState as useState2, useCallback, useEffect as useEffect2 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createContext, useContext, useState as useState3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var nextId = 0;
 var singletonShow = null;
@@ -596,34 +848,34 @@ var typeStyles = {
   info: "bg-blue-600"
 };
 var typeIcons = {
-  success: /* @__PURE__ */ jsx5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" }) }),
-  error: /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  success: /* @__PURE__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx6("polyline", { points: "20 6 9 17 4 12" }) }),
+  error: /* @__PURE__ */ jsxs5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] }),
-  info: /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  info: /* @__PURE__ */ jsxs5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] })
 };
 function ToastItemComponent({ item, onRemove }) {
-  const [exiting, setExiting] = useState2(false);
-  useEffect2(() => {
+  const [exiting, setExiting] = useState3(false);
+  useEffect3(() => {
     const timer = setTimeout(() => {
       setExiting(true);
       setTimeout(() => onRemove(item.id), 300);
     }, 5e3);
     return () => clearTimeout(timer);
   }, [item.id, onRemove]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-white text-sm min-w-[280px] max-w-[400px] ${typeStyles[item.type]} ${exiting ? "animate-slide-out" : "animate-slide-in"}`,
       children: [
-        /* @__PURE__ */ jsx5("span", { className: "flex-shrink-0", children: typeIcons[item.type] }),
-        /* @__PURE__ */ jsx5("span", { className: "flex-1", children: item.message }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("span", { className: "flex-shrink-0", children: typeIcons[item.type] }),
+        /* @__PURE__ */ jsx6("span", { className: "flex-1", children: item.message }),
+        /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: () => {
@@ -631,9 +883,9 @@ function ToastItemComponent({ item, onRemove }) {
               setTimeout(() => onRemove(item.id), 300);
             },
             className: "flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ] })
           }
         )
@@ -642,24 +894,24 @@ function ToastItemComponent({ item, onRemove }) {
   );
 }
 function ToastProvider({ children }) {
-  const [items, setItems] = useState2([]);
-  const show = useCallback((type, message) => {
+  const [items, setItems] = useState3([]);
+  const show = useCallback2((type, message) => {
     const id = ++nextId;
     setItems((prev) => [...prev, { id, type, message }]);
   }, []);
-  const remove = useCallback((id) => {
+  const remove = useCallback2((id) => {
     setItems((prev) => prev.filter((item) => item.id !== id));
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     singletonShow = show;
     return () => {
       singletonShow = null;
     };
   }, [show]);
-  return /* @__PURE__ */ jsxs4(ToastContext.Provider, { value: { show }, children: [
+  return /* @__PURE__ */ jsxs5(ToastContext.Provider, { value: { show }, children: [
     children,
-    /* @__PURE__ */ jsx5("div", { className: "fixed top-4 right-4 z-[100] flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx5(ToastItemComponent, { item, onRemove: remove }, item.id)) }),
-    /* @__PURE__ */ jsx5("style", { children: `
+    /* @__PURE__ */ jsx6("div", { className: "fixed top-4 right-4 z-[100] flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsx6(ToastItemComponent, { item, onRemove: remove }, item.id)) }),
+    /* @__PURE__ */ jsx6("style", { children: `
         @keyframes slide-in {
           from { transform: translateX(100%); opacity: 0; }
           to { transform: translateX(0); opacity: 1; }
@@ -682,11 +934,11 @@ function useToast() {
 }
 
 // src/MessageText.tsx
-import { useCallback as useCallback2, useState as useState3 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageText({ message }) {
-  const [copied, setCopied] = useState3(false);
-  const handleCopy = useCallback2(async () => {
+  const [copied, setCopied] = useState4(false);
+  const handleCopy = useCallback3(async () => {
     if (!message.content) return;
     try {
       await navigator.clipboard.writeText(message.content);
@@ -696,35 +948,35 @@ function MessageText({ message }) {
     }
   }, [message.content]);
   if (message.type === "template")
-    return /* @__PURE__ */ jsx6("p", { className: "text-sm italic text-[#667781]", children: message.content ?? "Template message" });
-  return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx7("p", { className: "text-sm italic text-[#667781]", children: message.content ?? "Template message" });
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       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__ */ jsx6("span", { children: parseWhatsAppFormatting(message.content ?? "") }),
-        copied && /* @__PURE__ */ jsx6("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!" })
+        /* @__PURE__ */ jsx7("span", { 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!" })
       ]
     }
   );
 }
 
 // src/MessageTimestamp.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function MessageTimestamp({ timestamp, status, isOutbound }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-[3px]", children: [
-    /* @__PURE__ */ jsx7("span", { className: "text-[11px] text-[#667781] leading-[15px] select-none", children: timestamp }),
-    isOutbound && status && /* @__PURE__ */ jsx7("span", { className: "flex items-center -mr-[2px]", children: /* @__PURE__ */ jsx7(StatusTicks, { status }) })
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-[3px]", children: [
+    /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-[#667781] leading-[15px] select-none", children: timestamp }),
+    isOutbound && status && /* @__PURE__ */ jsx8("span", { className: "flex items-center -mr-[2px]", children: /* @__PURE__ */ jsx8(StatusTicks, { status }) })
   ] });
 }
 
 // src/MessageTail.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function MessageTail({ isOutbound }) {
   if (isOutbound)
-    return /* @__PURE__ */ jsx8("svg", { className: "absolute top-0 -right-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "#d9fdd3", children: /* @__PURE__ */ jsx8("path", { d: "M5 0H0v11c1.5-2 4.5-2 5-4V0z" }) });
-  return /* @__PURE__ */ jsx8("svg", { className: "absolute top-0 -left-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "white", children: /* @__PURE__ */ jsx8("path", { d: "M0 0h5v11C3.5 9 .5 9 0 7V0z" }) });
+    return /* @__PURE__ */ jsx9("svg", { className: "absolute top-0 -right-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "#d9fdd3", children: /* @__PURE__ */ jsx9("path", { d: "M5 0H0v11c1.5-2 4.5-2 5-4V0z" }) });
+  return /* @__PURE__ */ jsx9("svg", { className: "absolute top-0 -left-[5px] w-[5px] h-[11px]", viewBox: "0 0 5 11", fill: "white", children: /* @__PURE__ */ jsx9("path", { d: "M0 0h5v11C3.5 9 .5 9 0 7V0z" }) });
 }
 
 // src/conversationWindow.ts
@@ -769,7 +1021,7 @@ function formatStalledFor(lastAt, now) {
 }
 
 // src/ChannelIcon.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var CHANNEL_BRAND_COLOR = {
   [CONVERSATION_CHANNEL.WHATSAPP]: "#25D366",
   [CONVERSATION_CHANNEL.MESSENGER]: "#0084FF",
@@ -779,9 +1031,9 @@ var CHANNEL_BRAND_COLOR = {
 function Glyph({ channel }) {
   const color = CHANNEL_BRAND_COLOR[channel];
   if (channel === CONVERSATION_CHANNEL.WHATSAPP) {
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "11", fill: color }),
-      /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+      /* @__PURE__ */ jsx10(
         "path",
         {
           d: "M8.6 7.2c.3-.1.7 0 .9.3l1 1.6c.2.3.1.7-.1.9l-.7.7c.6 1.3 1.6 2.3 2.9 2.9l.7-.7c.2-.2.6-.3.9-.1l1.6 1c.3.2.4.6.3.9-.4 1-1.4 1.6-2.4 1.4-3-.5-5.4-2.9-5.9-5.9-.2-1 .4-2 1.4-2.4Z",
@@ -791,28 +1043,28 @@ function Glyph({ channel }) {
     ] });
   }
   if (channel === CONVERSATION_CHANNEL.MESSENGER) {
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "11", fill: color }),
-      /* @__PURE__ */ jsx9("path", { d: "M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z", fill: "#fff", stroke: "#fff", strokeWidth: "1.4", strokeLinejoin: "round" })
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+      /* @__PURE__ */ jsx10("path", { d: "M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z", fill: "#fff", stroke: "#fff", strokeWidth: "1.4", strokeLinejoin: "round" })
     ] });
   }
   if (channel === CONVERSATION_CHANNEL.INSTAGRAM) {
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx9("rect", { x: "2", y: "2", width: "20", height: "20", rx: "6", fill: color }),
-      /* @__PURE__ */ jsx9("rect", { x: "6.5", y: "6.5", width: "11", height: "11", rx: "3.5", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
-      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "2.6", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
-      /* @__PURE__ */ jsx9("circle", { cx: "16.4", cy: "7.6", r: "1", fill: "#fff" })
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx10("rect", { x: "2", y: "2", width: "20", height: "20", rx: "6", fill: color }),
+      /* @__PURE__ */ jsx10("rect", { x: "6.5", y: "6.5", width: "11", height: "11", rx: "3.5", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
+      /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "2.6", fill: "none", stroke: "#fff", strokeWidth: "1.6" }),
+      /* @__PURE__ */ jsx10("circle", { cx: "16.4", cy: "7.6", r: "1", fill: "#fff" })
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "11", fill: color }),
-    /* @__PURE__ */ jsx9("path", { d: "M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z", fill: "#fff" })
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "11", fill: color }),
+    /* @__PURE__ */ jsx10("path", { d: "M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z", fill: "#fff" })
   ] });
 }
 function ChannelIcon({ channel, size = 14, className = "" }) {
   const resolved = channel ?? CONVERSATION_CHANNEL.WHATSAPP;
   const { label } = capabilitiesOf(resolved);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -821,13 +1073,13 @@ function ChannelIcon({ channel, size = 14, className = "" }) {
       className: `inline-block shrink-0 ${className}`.trim(),
       role: "img",
       "aria-label": label,
-      children: /* @__PURE__ */ jsx9(Glyph, { channel: resolved })
+      children: /* @__PURE__ */ jsx10(Glyph, { channel: resolved })
     }
   );
 }
 
 // src/ConversationRow.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var WINDOW_TITLE = {
   [CONVERSATION_WINDOW.ALL]: "",
   [CONVERSATION_WINDOW.FRESH]: "Janela de 24h aberta (menos de 12h)",
@@ -860,8 +1112,8 @@ function ConversationRow({
   const stalledMs = now - new Date(conversation.lastAt).getTime();
   const isStalled = stalledMs > STALLED_THRESHOLD_MS;
   const isWaiting = conversation.mode === "bot" && conversation.waitingHuman;
-  return /* @__PURE__ */ jsxs8("div", { className: cn("cv-row flex border-b", active && "cv-row--active", classNames?.root, className), children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9("div", { className: cn("cv-row flex border-b", active && "cv-row--active", classNames?.root, className), children: [
+    /* @__PURE__ */ jsx11(
       "span",
       {
         className: cn("w-1 shrink-0", WINDOW_BAR_CLASS[window2], classNames?.windowBar),
@@ -869,9 +1121,9 @@ function ConversationRow({
         "aria-label": WINDOW_TITLE[window2]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-2 px-2 pt-2", children: [
-        /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-2 px-2 pt-2", children: [
+        /* @__PURE__ */ jsx11(
           "input",
           {
             type: "checkbox",
@@ -881,7 +1133,7 @@ function ConversationRow({
             className: "mt-3"
           }
         ),
-        /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11(
           ConversationListItem,
           {
             conversation,
@@ -892,28 +1144,28 @@ function ConversationRow({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1.5 px-4 pb-2 pl-8", children: [
-        /* @__PURE__ */ jsxs8("span", { className: "cv-pill", children: [
-          /* @__PURE__ */ jsx10(ChannelIcon, { channel: conversation.channel }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-1.5 px-4 pb-2 pl-8", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "cv-pill", children: [
+          /* @__PURE__ */ jsx11(ChannelIcon, { channel: conversation.channel }),
           " ",
           capabilities.label
         ] }),
-        conversation.mode === "human" ? /* @__PURE__ */ jsx10("span", { className: "cv-pill cv-pill--success", children: "\u{1F9D1}\u200D\u{1F4BC} em atendimento" }) : null,
-        isWaiting ? /* @__PURE__ */ jsx10("span", { className: "cv-pill cv-pill--warning", children: "\u23F3 aguardando atendimento" }) : null,
-        !isWaiting && conversation.mode === "bot" ? /* @__PURE__ */ jsx10("span", { className: "cv-pill", children: "\u{1F916} bot ativo" }) : null,
-        isStalled ? /* @__PURE__ */ jsxs8("span", { className: "cv-pill cv-pill--danger", children: [
+        conversation.mode === "human" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--success", children: "\u{1F9D1}\u200D\u{1F4BC} em atendimento" }) : null,
+        isWaiting ? /* @__PURE__ */ jsx11("span", { className: "cv-pill cv-pill--warning", children: "\u23F3 aguardando atendimento" }) : null,
+        !isWaiting && conversation.mode === "bot" ? /* @__PURE__ */ jsx11("span", { className: "cv-pill", children: "\u{1F916} bot ativo" }) : null,
+        isStalled ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--danger", children: [
           "\u23F1\uFE0F parada h\xE1 ",
           formatStalledFor(conversation.lastAt, now)
         ] }) : null,
-        isWaiting ? /* @__PURE__ */ jsx10("button", { type: "button", onClick: onTakeover, disabled: busy, className: "cv-header-action", children: "\u25B6\uFE0F Continuar Atendimento" }) : null
+        isWaiting ? /* @__PURE__ */ jsx11("button", { type: "button", onClick: onTakeover, disabled: busy, className: "cv-header-action", children: "\u25B6\uFE0F Continuar Atendimento" }) : null
       ] })
     ] })
   ] });
 }
 
 // src/ConversationHeader.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_HEADER_LABELS = {
   botMode: "\u{1F916} atendimento autom\xE1tico",
   humanMode: "\u{1F9D1}\u200D\u{1F4BC} atendimento humano",
@@ -946,7 +1198,7 @@ function ConversationHeader({
   const displayHandle = formatContactHandle({ handle, channel: conversation.channel });
   const flag = contactFlag({ handle, channel: conversation.channel });
   const capabilities = capabilitiesOf(conversation.channel);
-  const [menuOpen, setMenuOpen] = useState4(false);
+  const [menuOpen, setMenuOpen] = useState5(false);
   const utilities = [
     onOpenDocuments ? { key: "documents", icon: "\u{1F4C4}", label: labels.documents, run: onOpenDocuments, active: documentsOpen } : void 0,
     onDownload ? { key: "download", icon: "\u2B07\uFE0F", label: labels.download, run: onDownload, active: false } : void 0,
@@ -968,7 +1220,7 @@ function ConversationHeader({
     })),
     ...actions
   ];
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "header",
     {
       className: cn(
@@ -977,26 +1229,26 @@ function ConversationHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: cn("flex min-w-0 flex-1 items-center gap-3", classNames?.identity), children: [
-          onBack ? /* @__PURE__ */ jsx11("button", { type: "button", onClick: onBack, className: "cv-back cv-touch", "aria-label": labels.back, title: labels.back, children: "\u2190" }) : null,
-          /* @__PURE__ */ jsx11(Avatar, { name: conversation.clientName, size: "md" }),
-          /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("p", { className: cn("truncate font-medium", classNames?.name), children: conversation.clientName ?? displayHandle }),
-            /* @__PURE__ */ jsxs9("p", { className: cn("truncate text-xs text-gray-500", classNames?.meta), children: [
+        /* @__PURE__ */ jsxs10("div", { className: cn("flex min-w-0 flex-1 items-center gap-3", classNames?.identity), children: [
+          onBack ? /* @__PURE__ */ jsx12("button", { type: "button", onClick: onBack, className: "cv-back cv-touch", "aria-label": labels.back, title: labels.back, children: "\u2190" }) : null,
+          /* @__PURE__ */ jsx12(Avatar, { name: conversation.clientName, size: "md" }),
+          /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx12("p", { className: cn("truncate font-medium", classNames?.name), children: conversation.clientName ?? displayHandle }),
+            /* @__PURE__ */ jsxs10("p", { className: cn("truncate text-xs text-gray-500", classNames?.meta), children: [
               flag ? `${flag} ` : "",
               displayHandle,
-              /* @__PURE__ */ jsxs9("span", { className: "ml-2 inline-flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx11(ChannelIcon, { channel: conversation.channel }),
-                /* @__PURE__ */ jsx11("span", { className: "cv-only-wide", children: capabilities.label })
+              /* @__PURE__ */ jsxs10("span", { className: "ml-2 inline-flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx12(ChannelIcon, { channel: conversation.channel }),
+                /* @__PURE__ */ jsx12("span", { className: "cv-only-wide", children: capabilities.label })
               ] }),
-              /* @__PURE__ */ jsx11("span", { className: "ml-2 cv-only-wide", children: isHuman ? labels.humanMode : labels.botMode }),
-              /* @__PURE__ */ jsx11("span", { className: "ml-1 cv-only-narrow", title: isHuman ? labels.humanMode : labels.botMode, children: isHuman ? "\u{1F9D1}\u200D\u{1F4BC}" : "\u{1F916}" })
+              /* @__PURE__ */ jsx12("span", { className: "ml-2 cv-only-wide", children: isHuman ? labels.humanMode : labels.botMode }),
+              /* @__PURE__ */ jsx12("span", { className: "ml-1 cv-only-narrow", title: isHuman ? labels.humanMode : labels.botMode, children: isHuman ? "\u{1F9D1}\u200D\u{1F4BC}" : "\u{1F916}" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: cn("flex shrink-0 items-center gap-2", classNames?.actions), children: [
-          /* @__PURE__ */ jsxs9("div", { className: cn("hidden items-center gap-2 lg:flex", classNames?.desktopActions), children: [
-            utilities.map((utility) => /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs10("div", { className: cn("flex shrink-0 items-center gap-2", classNames?.actions), children: [
+          /* @__PURE__ */ jsxs10("div", { className: cn("hidden items-center gap-2 lg:flex", classNames?.desktopActions), children: [
+            utilities.map((utility) => /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1010,7 +1262,7 @@ function ConversationHeader({
               },
               utility.key
             )),
-            actions.map((action) => /* @__PURE__ */ jsx11(
+            actions.map((action) => /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1022,8 +1274,8 @@ function ConversationHeader({
               action.key
             ))
           ] }),
-          menuItems.length > 0 ? /* @__PURE__ */ jsxs9("div", { className: cn("cv-menu lg:hidden", classNames?.mobileMenu), children: [
-            /* @__PURE__ */ jsx11(
+          menuItems.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: cn("cv-menu lg:hidden", classNames?.mobileMenu), children: [
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1035,7 +1287,7 @@ function ConversationHeader({
                 children: "\u22EE"
               }
             ),
-            menuOpen ? /* @__PURE__ */ jsx11("div", { className: "cv-menu-panel", role: "menu", children: menuItems.map((item) => /* @__PURE__ */ jsx11(
+            menuOpen ? /* @__PURE__ */ jsx12("div", { className: "cv-menu-panel", role: "menu", children: menuItems.map((item) => /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1058,16 +1310,16 @@ function ConversationHeader({
 }
 
 // src/ConversationContextPanel.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/useIsNarrow.ts
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 var NARROW_MAX_WIDTH_PX = 1023;
 function useIsNarrow() {
-  const [isNarrow, setIsNarrow] = useState5(
+  const [isNarrow, setIsNarrow] = useState6(
     () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`).matches
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const query = window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`);
     const handleChange = (event) => setIsNarrow(event.matches);
     query.addEventListener("change", handleChange);
@@ -1078,7 +1330,7 @@ function useIsNarrow() {
 }
 
 // src/ConversationContextPanel.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_CONTEXT_LABELS = {
   title: "\u{1F4CB} Suas Sele\xE7\xF5es",
   empty: "Nada coletado ainda nesta conversa."
@@ -1092,10 +1344,10 @@ function ConversationContextPanel({
   const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride };
   const filled = entries.filter((entry) => Boolean(entry.value));
   const isNarrow = useIsNarrow();
-  const [manualOpen, setManualOpen] = useState6(void 0);
+  const [manualOpen, setManualOpen] = useState7(void 0);
   const open = manualOpen ?? (!isNarrow && filled.length > 0);
-  return /* @__PURE__ */ jsxs10("section", { className: cn("border-b", classNames?.root, className), children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("section", { className: cn("border-b", classNames?.root, className), children: [
+    /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
@@ -1103,9 +1355,9 @@ function ConversationContextPanel({
         "aria-expanded": open,
         className: cn("flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium", classNames?.toggle),
         children: [
-          /* @__PURE__ */ jsx12("span", { "aria-hidden": true, className: "text-xs", children: open ? "\u25BE" : "\u25B8" }),
-          /* @__PURE__ */ jsx12("span", { children: labels.title }),
-          /* @__PURE__ */ jsxs10("span", { className: cn("rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700", classNames?.counter), children: [
+          /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-xs", children: open ? "\u25BE" : "\u25B8" }),
+          /* @__PURE__ */ jsx13("span", { children: labels.title }),
+          /* @__PURE__ */ jsxs11("span", { className: cn("rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700", classNames?.counter), children: [
             filled.length,
             "/",
             entries.length
@@ -1113,12 +1365,12 @@ function ConversationContextPanel({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx12("div", { className: cn("px-4 pb-3", classNames?.body), children: entries.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-xs text-gray-500", children: labels.empty }) : /* @__PURE__ */ jsx12("dl", { className: "grid grid-cols-2 gap-2 text-xs", children: entries.map((entry) => /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsxs10("dt", { className: "truncate text-gray-500", children: [
+    open ? /* @__PURE__ */ jsx13("div", { className: cn("px-4 pb-3", classNames?.body), children: entries.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-500", children: labels.empty }) : /* @__PURE__ */ jsx13("dl", { className: "grid grid-cols-2 gap-2 text-xs", children: entries.map((entry) => /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs11("dt", { className: "truncate text-gray-500", children: [
         entry.icon ? `${entry.icon} ` : "",
         entry.label
       ] }),
-      /* @__PURE__ */ jsx12("dd", { className: "truncate font-medium", children: entry.value ? /* @__PURE__ */ jsxs10("span", { className: "text-green-700 dark:text-green-400", children: [
+      /* @__PURE__ */ jsx13("dd", { className: "truncate font-medium", children: entry.value ? /* @__PURE__ */ jsxs11("span", { className: "text-green-700 dark:text-green-400", children: [
         "\u2713 ",
         entry.value
       ] }) : "\u2014" })
@@ -1127,7 +1379,7 @@ function ConversationContextPanel({
 }
 
 // src/WindowExpiredNotice.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_WINDOW_EXPIRED_LABELS = {
   title: "\u23F0 Janela de 24h expirada \u2014 o WhatsApp n\xE3o aceita mensagens livres.",
   description: "Envie uma mensagem de template para reabrir a conversa com o cliente.",
@@ -1140,10 +1392,10 @@ function WindowExpiredNotice({
   className
 }) {
   const labels = { ...DEFAULT_WINDOW_EXPIRED_LABELS, ...labelsOverride };
-  return /* @__PURE__ */ jsxs11("div", { role: "status", className: cn("border-t bg-yellow-50 px-4 py-3 text-sm dark:bg-yellow-950", className), children: [
-    /* @__PURE__ */ jsx13("p", { className: "font-medium text-yellow-900 dark:text-yellow-200", children: labels.title }),
-    /* @__PURE__ */ jsx13("p", { className: "text-yellow-800 dark:text-yellow-300", children: labels.description }),
-    onSendTemplate ? /* @__PURE__ */ jsx13("button", { type: "button", onClick: onSendTemplate, disabled, className: "cv-header-action mt-2", children: labels.sendTemplate }) : null
+  return /* @__PURE__ */ jsxs12("div", { role: "status", className: cn("border-t bg-yellow-50 px-4 py-3 text-sm dark:bg-yellow-950", className), children: [
+    /* @__PURE__ */ jsx14("p", { className: "font-medium text-yellow-900 dark:text-yellow-200", children: labels.title }),
+    /* @__PURE__ */ jsx14("p", { className: "text-yellow-800 dark:text-yellow-300", children: labels.description }),
+    onSendTemplate ? /* @__PURE__ */ jsx14("button", { type: "button", onClick: onSendTemplate, disabled, className: "cv-header-action mt-2", children: labels.sendTemplate }) : null
   ] });
 }
 function isWindowBlocking(window2) {
@@ -1186,7 +1438,7 @@ function downloadTextFile(filename, content) {
 }
 
 // src/useWaitingNotifications.ts
-import { useState as useState7, useEffect as useEffect4, useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useState as useState8, useEffect as useEffect5, useRef as useRef4, useCallback as useCallback4 } from "react";
 var DEFAULT_POLL_INTERVAL_MS = 1e4;
 var DEFAULT_LIMIT = 50;
 var DEFAULT_LABELS = {
@@ -1195,17 +1447,17 @@ var DEFAULT_LABELS = {
 };
 function useWaitingNotifications(params) {
   const conversationsContext = useConversations();
-  const [conversations, setConversations] = useState7([]);
-  const previousUnreadMap = useRef3(/* @__PURE__ */ new Map());
-  const notifiedIds = useRef3(/* @__PURE__ */ new Set());
-  const isPollingRef = useRef3(false);
+  const [conversations, setConversations] = useState8([]);
+  const previousUnreadMap = useRef4(/* @__PURE__ */ new Map());
+  const notifiedIds = useRef4(/* @__PURE__ */ new Set());
+  const isPollingRef = useRef4(false);
   const isEnabled = params?.enabled ?? true;
   const intervalMs = params?.intervalMs ?? DEFAULT_POLL_INTERVAL_MS;
   const icon = params?.icon;
   const listParams = params?.params;
   const labelTitle = params?.labels?.title ?? DEFAULT_LABELS.title;
   const labelBody = params?.labels?.body ?? DEFAULT_LABELS.body;
-  const refresh = useCallback3(async () => {
+  const refresh = useCallback4(async () => {
     if (!conversationsContext || isPollingRef.current) return;
     isPollingRef.current = true;
     try {
@@ -1230,7 +1482,7 @@ function useWaitingNotifications(params) {
       isPollingRef.current = false;
     }
   }, [conversationsContext, listParams, icon, labelTitle, labelBody]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isEnabled) return;
     if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {
       Notification.requestPermission();
@@ -1245,7 +1497,7 @@ function useWaitingNotifications(params) {
 
 // src/settings/WhatsAppTemplateSettingsForm.tsx
 import { Plus, RefreshCw, Save, Trash2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_LABELS2 = {
   sectionTitle: "WhatsApp",
   sectionDescription: "Template usado para reabrir a janela de 24h com o cliente.",
@@ -1304,16 +1556,16 @@ function WhatsAppTemplateSettingsForm({
     }
     onVariablesChange([...variables, token]);
   }
-  return /* @__PURE__ */ jsxs12("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx14("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
-      /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+  return /* @__PURE__ */ jsxs13("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
+      /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs12("form", { onSubmit: onSave, className: "p-6 space-y-4", children: [
-      /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ jsx14("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.templateLabel }),
-          /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs13("form", { onSubmit: onSave, className: "p-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.templateLabel }),
+          /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -1321,31 +1573,31 @@ function WhatsAppTemplateSettingsForm({
               disabled: loadingTemplates,
               className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50",
               children: [
-                /* @__PURE__ */ jsx14(RefreshCw, { size: 11, className: loadingTemplates ? "animate-spin" : "" }),
+                /* @__PURE__ */ jsx15(RefreshCw, { size: 11, className: loadingTemplates ? "animate-spin" : "" }),
                 labels.refreshList
               ]
             }
           )
         ] }),
-        templatesError && /* @__PURE__ */ jsxs12("div", { className: "mb-2 rounded-lg bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 px-3 py-2 text-xs text-amber-700 dark:text-amber-400", children: [
+        templatesError && /* @__PURE__ */ jsxs13("div", { className: "mb-2 rounded-lg bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 px-3 py-2 text-xs text-amber-700 dark:text-amber-400", children: [
           labels.errorLoading,
-          /* @__PURE__ */ jsx14("br", {}),
-          /* @__PURE__ */ jsxs12("span", { className: "text-gray-500 dark:text-gray-400 mt-0.5 block", children: [
+          /* @__PURE__ */ jsx15("br", {}),
+          /* @__PURE__ */ jsxs13("span", { className: "text-gray-500 dark:text-gray-400 mt-0.5 block", children: [
             labels.currentNameSaved,
             " ",
-            /* @__PURE__ */ jsx14("strong", { children: selectedTemplateName || "\u2014" })
+            /* @__PURE__ */ jsx15("strong", { children: selectedTemplateName || "\u2014" })
           ] })
         ] }),
-        loadingTemplates && /* @__PURE__ */ jsx14("div", { className: "h-10 rounded-xl bg-gray-100 dark:bg-gray-700 animate-pulse" }),
-        !loadingTemplates && !templatesError && /* @__PURE__ */ jsxs12(
+        loadingTemplates && /* @__PURE__ */ jsx15("div", { className: "h-10 rounded-xl bg-gray-100 dark:bg-gray-700 animate-pulse" }),
+        !loadingTemplates && !templatesError && /* @__PURE__ */ jsxs13(
           "select",
           {
             value: selectedTemplateName,
             onChange: (e) => handleSelect(e.target.value),
             className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
             children: [
-              /* @__PURE__ */ jsx14("option", { value: "", children: labels.selectPlaceholder }),
-              templates.map((template) => /* @__PURE__ */ jsxs12("option", { value: template.name, disabled: template.status !== "APPROVED", children: [
+              /* @__PURE__ */ jsx15("option", { value: "", children: labels.selectPlaceholder }),
+              templates.map((template) => /* @__PURE__ */ jsxs13("option", { value: template.name, disabled: template.status !== "APPROVED", children: [
                 template.displayName,
                 " \xB7 ",
                 template.shortId,
@@ -1357,27 +1609,27 @@ function WhatsAppTemplateSettingsForm({
             ]
           }
         ),
-        selected?.bodyText && /* @__PURE__ */ jsx14("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2 text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap", children: selected.bodyText })
+        selected?.bodyText && /* @__PURE__ */ jsx15("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2 text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap", children: selected.bodyText })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ jsx14("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.variablesLabel }),
-          /* @__PURE__ */ jsxs12(
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.variablesLabel }),
+          /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
               onClick: () => onVariablesChange([...variables, ""]),
               className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline",
               children: [
-                /* @__PURE__ */ jsx14(Plus, { size: 12 }),
+                /* @__PURE__ */ jsx15(Plus, { size: 12 }),
                 labels.addVariable
               ]
             }
           )
         ] }),
-        availableVariables.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "mb-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/40 p-2.5", children: [
-          /* @__PURE__ */ jsx14("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-300 mb-1.5", children: labels.variablesAvailableTitle }),
-          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-1.5", children: availableVariables.map((available) => /* @__PURE__ */ jsxs12(
+        availableVariables.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "mb-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/40 p-2.5", children: [
+          /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-300 mb-1.5", children: labels.variablesAvailableTitle }),
+          /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap gap-1.5", children: availableVariables.map((available) => /* @__PURE__ */ jsxs13(
             "button",
             {
               type: "button",
@@ -1385,8 +1637,8 @@ function WhatsAppTemplateSettingsForm({
               title: `Inserir ${available.token}`,
               className: "inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors",
               children: [
-                /* @__PURE__ */ jsx14("code", { className: "text-blue-600 dark:text-blue-300", children: available.token }),
-                /* @__PURE__ */ jsxs12("span", { className: "text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsx15("code", { className: "text-blue-600 dark:text-blue-300", children: available.token }),
+                /* @__PURE__ */ jsxs13("span", { className: "text-gray-400 dark:text-gray-500", children: [
                   "\xB7 ",
                   available.label
                 ] })
@@ -1394,13 +1646,13 @@ function WhatsAppTemplateSettingsForm({
             },
             available.token
           )) }),
-          /* @__PURE__ */ jsx14("p", { className: "mt-1.5 text-[11px] text-gray-400 dark:text-gray-500", children: labels.variablesAvailableHint })
+          /* @__PURE__ */ jsx15("p", { className: "mt-1.5 text-[11px] text-gray-400 dark:text-gray-500", children: labels.variablesAvailableHint })
         ] }),
-        /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-2", children: labels.variablesMappingHint }),
-        variables.length === 0 && /* @__PURE__ */ jsx14("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic", children: labels.noVariables }),
-        /* @__PURE__ */ jsx14("div", { className: "space-y-2", children: variables.map((variable, index) => /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx14("span", { className: "text-xs text-gray-400 dark:text-gray-500 w-6 text-right flex-shrink-0", children: `{{${index + 1}}}` }),
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 dark:text-gray-500 mb-2", children: labels.variablesMappingHint }),
+        variables.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic", children: labels.noVariables }),
+        /* @__PURE__ */ jsx15("div", { className: "space-y-2", children: variables.map((variable, index) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx15("span", { className: "text-xs text-gray-400 dark:text-gray-500 w-6 text-right flex-shrink-0", children: `{{${index + 1}}}` }),
+          /* @__PURE__ */ jsx15(
             "input",
             {
               type: "text",
@@ -1410,27 +1662,27 @@ function WhatsAppTemplateSettingsForm({
               className: "flex-1 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
               onClick: () => removeVariable(index),
               className: "text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0",
               title: labels.removeVariable,
-              children: /* @__PURE__ */ jsx14(Trash2, { size: 14 })
+              children: /* @__PURE__ */ jsx15(Trash2, { size: 14 })
             }
           )
         ] }, index)) })
       ] }),
-      saveSuccess && /* @__PURE__ */ jsx14("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
-      /* @__PURE__ */ jsx14("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs12(
+      saveSuccess && /* @__PURE__ */ jsx15("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
+      /* @__PURE__ */ jsx15("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "submit",
           disabled: saving || !selectedTemplateName.trim(),
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            saving ? /* @__PURE__ */ jsx14("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx14(Save, { size: 14 }),
+            saving ? /* @__PURE__ */ jsx15("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx15(Save, { size: 14 }),
             saving ? labels.saving : labels.save
           ]
         }
@@ -1440,8 +1692,8 @@ function WhatsAppTemplateSettingsForm({
 }
 
 // src/settings/WhatsAppCreateTemplateForm.tsx
-import { SendHorizonal } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { SendHorizonal as SendHorizonal2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_LABELS3 = {
   sectionTitle: "Criar novo template",
   sectionDescription: "Envia um template para aprova\xE7\xE3o da Meta.",
@@ -1498,16 +1750,16 @@ function WhatsAppCreateTemplateForm({
   function set(key, next) {
     onChange({ ...value, [key]: next });
   }
-  return /* @__PURE__ */ jsxs13("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx15("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
-      /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+  return /* @__PURE__ */ jsxs14("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx16("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }),
+      /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs13("form", { onSubmit, className: "p-6 space-y-4", children: [
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.nameLabel }),
-        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.nameHint }),
-        /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsxs14("form", { onSubmit, className: "p-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.nameLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.nameHint }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "text",
@@ -1519,56 +1771,56 @@ function WhatsAppCreateTemplateForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.categoryLabel }),
-          /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.categoryLabel }),
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.category,
               onChange: (e) => set("category", e.target.value),
               className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
               children: [
-                /* @__PURE__ */ jsx15("option", { value: "UTILITY", children: "UTILITY (Transacional)" }),
-                /* @__PURE__ */ jsx15("option", { value: "MARKETING", children: "MARKETING (Promocional)" })
+                /* @__PURE__ */ jsx16("option", { value: "UTILITY", children: "UTILITY (Transacional)" }),
+                /* @__PURE__ */ jsx16("option", { value: "MARKETING", children: "MARKETING (Promocional)" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.languageLabel }),
-          /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.languageLabel }),
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.language,
               onChange: (e) => set("language", e.target.value),
               className: "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all",
               children: [
-                /* @__PURE__ */ jsx15("option", { value: "pt_BR", children: "Portugu\xEAs (Brasil)" }),
-                /* @__PURE__ */ jsx15("option", { value: "en_US", children: "Ingl\xEAs (EUA)" }),
-                /* @__PURE__ */ jsx15("option", { value: "es_ES", children: "Espanhol" })
+                /* @__PURE__ */ jsx16("option", { value: "pt_BR", children: "Portugu\xEAs (Brasil)" }),
+                /* @__PURE__ */ jsx16("option", { value: "en_US", children: "Ingl\xEAs (EUA)" }),
+                /* @__PURE__ */ jsx16("option", { value: "es_ES", children: "Espanhol" })
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.headerLabel }),
-        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.headerHint }),
-        /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.headerLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.headerHint }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs14(
             "select",
             {
               value: value.headerType,
               onChange: (e) => set("headerType", e.target.value),
               className: "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all",
               children: [
-                /* @__PURE__ */ jsx15("option", { value: "NONE", children: labels.headerNone }),
-                /* @__PURE__ */ jsx15("option", { value: "TEXT", children: labels.headerText })
+                /* @__PURE__ */ jsx16("option", { value: "NONE", children: labels.headerNone }),
+                /* @__PURE__ */ jsx16("option", { value: "TEXT", children: labels.headerText })
               ]
             }
           ),
-          value.headerType === "TEXT" && /* @__PURE__ */ jsx15(
+          value.headerType === "TEXT" && /* @__PURE__ */ jsx16(
             "input",
             {
               type: "text",
@@ -1581,10 +1833,10 @@ function WhatsAppCreateTemplateForm({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.bodyLabel }),
-        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.bodyHint }),
-        /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.bodyLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.bodyHint }),
+        /* @__PURE__ */ jsx16(
           "textarea",
           {
             value: value.bodyText,
@@ -1595,26 +1847,26 @@ function WhatsAppCreateTemplateForm({
             required: true
           }
         ),
-        detectedVariables.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2", children: [
-          /* @__PURE__ */ jsx15("p", { className: "font-medium text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide text-xs", children: labels.detectedVariables }),
-          /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap gap-2", children: detectedVariables.map((num) => /* @__PURE__ */ jsxs13("span", { className: "inline-flex items-center gap-1 text-xs", children: [
-            /* @__PURE__ */ jsx15("code", { className: "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono", children: `{{${num}}}` }),
-            /* @__PURE__ */ jsxs13("span", { className: "text-gray-400 dark:text-gray-500", children: [
+        detectedVariables.length > 0 && /* @__PURE__ */ jsxs14("div", { className: "mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 px-3 py-2", children: [
+          /* @__PURE__ */ jsx16("p", { className: "font-medium text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide text-xs", children: labels.detectedVariables }),
+          /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2", children: detectedVariables.map((num) => /* @__PURE__ */ jsxs14("span", { className: "inline-flex items-center gap-1 text-xs", children: [
+            /* @__PURE__ */ jsx16("code", { className: "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono", children: `{{${num}}}` }),
+            /* @__PURE__ */ jsxs14("span", { className: "text-gray-400 dark:text-gray-500", children: [
               "= ",
               variableExamples[Number(num) - 1] ?? labels.variableLabel(Number(num))
             ] })
           ] }, num)) }),
-          /* @__PURE__ */ jsxs13("p", { className: "text-gray-400 dark:text-gray-500 mt-1.5 text-xs", children: [
+          /* @__PURE__ */ jsxs14("p", { className: "text-gray-400 dark:text-gray-500 mt-1.5 text-xs", children: [
             labels.configureHintPrefix,
-            /* @__PURE__ */ jsx15("strong", { children: labels.configureHintLink }),
+            /* @__PURE__ */ jsx16("strong", { children: labels.configureHintLink }),
             labels.configureHintSuffix
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.footerLabel }),
-        /* @__PURE__ */ jsx15("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.footerHint }),
-        /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.footerLabel }),
+        /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-400 mb-1.5", children: labels.footerHint }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             type: "text",
@@ -1626,48 +1878,48 @@ function WhatsAppCreateTemplateForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx15("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block", children: labels.previewLabel }),
-        /* @__PURE__ */ jsxs13("div", { className: "rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] border border-gray-300 dark:border-gray-600 overflow-hidden shadow-inner", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "bg-[#075e54] px-4 py-2.5 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx15("div", { className: "w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-xs font-bold", children: previewCompanyName.slice(0, 2).toUpperCase() }),
-            /* @__PURE__ */ jsxs13("div", { children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-white text-xs font-semibold leading-tight", children: previewCompanyName }),
-              /* @__PURE__ */ jsx15("p", { className: "text-white/60 text-xs", children: labels.previewOnline })
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx16("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block", children: labels.previewLabel }),
+        /* @__PURE__ */ jsxs14("div", { className: "rounded-2xl bg-[#e5ddd5] dark:bg-[#1a1a2e] border border-gray-300 dark:border-gray-600 overflow-hidden shadow-inner", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "bg-[#075e54] px-4 py-2.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx16("div", { className: "w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-white text-xs font-bold", children: previewCompanyName.slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsxs14("div", { children: [
+              /* @__PURE__ */ jsx16("p", { className: "text-white text-xs font-semibold leading-tight", children: previewCompanyName }),
+              /* @__PURE__ */ jsx16("p", { className: "text-white/60 text-xs", children: labels.previewOnline })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs13("div", { className: "px-3 py-4 space-y-3", style: { minHeight: "120px" }, children: [
-            /* @__PURE__ */ jsx15("div", { className: "flex justify-start", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs13("div", { className: "bg-white dark:bg-gray-700 rounded-lg rounded-tl-none px-3 py-2 shadow-sm", children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-gray-500 dark:text-gray-400 leading-tight text-sm", children: labels.previewDescription }),
-              /* @__PURE__ */ jsx15("p", { className: "text-gray-400 dark:text-gray-500 mt-1 text-right text-[9px]", children: "12:00" })
+          /* @__PURE__ */ jsxs14("div", { className: "px-3 py-4 space-y-3", style: { minHeight: "120px" }, children: [
+            /* @__PURE__ */ jsx16("div", { className: "flex justify-start", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs14("div", { className: "bg-white dark:bg-gray-700 rounded-lg rounded-tl-none px-3 py-2 shadow-sm", children: [
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-500 dark:text-gray-400 leading-tight text-sm", children: labels.previewDescription }),
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-500 mt-1 text-right text-[9px]", children: "12:00" })
             ] }) }),
-            /* @__PURE__ */ jsx15("div", { className: "flex justify-end ml-auto", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs13("div", { className: "bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none px-3 py-2 shadow-sm", children: [
-              value.headerType === "TEXT" && value.headerText && /* @__PURE__ */ jsx15("p", { className: "text-xs font-bold text-gray-700 dark:text-gray-200 mb-1", children: fillPreviewTokens(value.headerText) || labels.previewHeaderFallback }),
-              /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-800 dark:text-gray-100 leading-relaxed", children: value.bodyText ? fillPreviewTokens(value.bodyText) : /* @__PURE__ */ jsx15("span", { className: "text-gray-400 italic", children: labels.previewBodyPlaceholder }) }),
-              value.footerText && /* @__PURE__ */ jsx15("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-xs", children: value.footerText }),
-              /* @__PURE__ */ jsx15("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]", children: "12:01 \u2713" })
+            /* @__PURE__ */ jsx16("div", { className: "flex justify-end ml-auto", style: { maxWidth: "85%" }, children: /* @__PURE__ */ jsxs14("div", { className: "bg-[#dcf8c6] dark:bg-[#1b5e20] rounded-lg rounded-tr-none px-3 py-2 shadow-sm", children: [
+              value.headerType === "TEXT" && value.headerText && /* @__PURE__ */ jsx16("p", { className: "text-xs font-bold text-gray-700 dark:text-gray-200 mb-1", children: fillPreviewTokens(value.headerText) || labels.previewHeaderFallback }),
+              /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-800 dark:text-gray-100 leading-relaxed", children: value.bodyText ? fillPreviewTokens(value.bodyText) : /* @__PURE__ */ jsx16("span", { className: "text-gray-400 italic", children: labels.previewBodyPlaceholder }) }),
+              value.footerText && /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-xs", children: value.footerText }),
+              /* @__PURE__ */ jsx16("p", { className: "text-gray-400 dark:text-gray-400 mt-1 text-right text-[9px]", children: "12:01 \u2713" })
             ] }) })
           ] })
         ] })
       ] }),
-      result && /* @__PURE__ */ jsxs13(
+      result && /* @__PURE__ */ jsxs14(
         "div",
         {
           className: `rounded-xl px-4 py-3 text-sm ${result.ok ? "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400"}`,
           children: [
             result.message,
-            result.ok && result.status && /* @__PURE__ */ jsx15("p", { className: "text-xs mt-1 opacity-75", children: labels.successStatus(result.status) })
+            result.ok && result.status && /* @__PURE__ */ jsx16("p", { className: "text-xs mt-1 opacity-75", children: labels.successStatus(result.status) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx15("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsx16("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "submit",
           disabled: submitting || !value.name || !value.bodyText,
           className: "flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            submitting ? /* @__PURE__ */ jsx15("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx15(SendHorizonal, { size: 14 }),
+            submitting ? /* @__PURE__ */ jsx16("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx16(SendHorizonal2, { size: 14 }),
             submitting ? labels.sending : labels.sendForApproval
           ]
         }
@@ -1678,7 +1930,7 @@ function WhatsAppCreateTemplateForm({
 
 // src/settings/WelcomeFarewellForm.tsx
 import { LogOut, Mail, Save as Save2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_LABELS4 = {
   sectionTitle: "Boas-vindas e encerramento",
   welcomeMessage: "Mensagem de boas-vindas",
@@ -1706,15 +1958,15 @@ function WelcomeFarewellForm({
   labels: labelsOverride
 }) {
   const labels = { ...DEFAULT_LABELS4, ...labelsOverride };
-  return /* @__PURE__ */ jsxs14("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsx16("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ jsx16("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }) }),
-    /* @__PURE__ */ jsxs14("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsxs14("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx16(Mail, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
+  return /* @__PURE__ */ jsxs15("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsx17("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ jsx17("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.sectionTitle }) }),
+    /* @__PURE__ */ jsxs15("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsxs15("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx17(Mail, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
           labels.welcomeMessage
         ] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           WhatsAppMessageEditor,
           {
             value: welcomeMessage,
@@ -1723,14 +1975,14 @@ function WelcomeFarewellForm({
             placeholders: welcomePlaceholders
           }
         ),
-        /* @__PURE__ */ jsx16("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.welcomeMessageHint })
+        /* @__PURE__ */ jsx17("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.welcomeMessageHint })
       ] }),
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsxs14("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx16(LogOut, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsxs15("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx17(LogOut, { size: 13, className: "text-blue-600 dark:text-blue-400" }),
           labels.farewellMessage
         ] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           WhatsAppMessageEditor,
           {
             value: farewellMessage,
@@ -1739,17 +1991,17 @@ function WelcomeFarewellForm({
             placeholders: farewellPlaceholders
           }
         ),
-        /* @__PURE__ */ jsx16("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.farewellMessageHint })
+        /* @__PURE__ */ jsx17("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: labels.farewellMessageHint })
       ] }),
-      saveSuccess && /* @__PURE__ */ jsx16("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
-      /* @__PURE__ */ jsx16("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs14(
+      saveSuccess && /* @__PURE__ */ jsx17("div", { className: "bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400", children: labels.saveSuccess }),
+      /* @__PURE__ */ jsx17("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs15(
         "button",
         {
           type: "submit",
           disabled: saving,
           className: "flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm",
           children: [
-            saving ? /* @__PURE__ */ jsx16("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx16(Save2, { size: 14 }),
+            saving ? /* @__PURE__ */ jsx17("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx17(Save2, { size: 14 }),
             saving ? labels.saving : labels.save
           ]
         }
@@ -1759,8 +2011,8 @@ function WelcomeFarewellForm({
 }
 
 // src/settings/WhatsAppTemplatesSettings.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var TEMPLATE_SETTINGS_TAB = {
   SELECT: "select",
   CREATE: "create"
@@ -1775,10 +2027,10 @@ function WhatsAppTemplatesSettings({
   ...settingsProps
 }) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
-  const [tab, setTab] = useState8(TEMPLATE_SETTINGS_TAB.SELECT);
-  return /* @__PURE__ */ jsxs15("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs15("nav", { className: "flex gap-1 border-b", role: "tablist", children: [
-      /* @__PURE__ */ jsx17(
+  const [tab, setTab] = useState9(TEMPLATE_SETTINGS_TAB.SELECT);
+  return /* @__PURE__ */ jsxs16("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs16("nav", { className: "flex gap-1 border-b", role: "tablist", children: [
+      /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1789,7 +2041,7 @@ function WhatsAppTemplatesSettings({
           children: labels.selectTab
         }
       ),
-      create ? /* @__PURE__ */ jsx17(
+      create ? /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1801,13 +2053,13 @@ function WhatsAppTemplatesSettings({
         }
       ) : null
     ] }),
-    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx17(WhatsAppTemplateSettingsForm, { ...settingsProps }) : create ? /* @__PURE__ */ jsx17(WhatsAppCreateTemplateForm, { ...create }) : null
+    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx18(WhatsAppTemplateSettingsForm, { ...settingsProps }) : create ? /* @__PURE__ */ jsx18(WhatsAppCreateTemplateForm, { ...create }) : null
   ] });
 }
 
 // src/settings/TopicsForm.tsx
 import { Megaphone, Save as Save3 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_LABELS5 = {
   sectionTitle: "T\xF3picos intermedi\xE1rios",
   sectionDescription: "Mensagens autom\xE1ticas para assuntos espec\xEDficos, disparadas quando o cliente demonstra interesse.",
@@ -1825,19 +2077,19 @@ function TopicsForm({
   labels: labelsOverride
 }) {
   const labels = { ...DEFAULT_LABELS5, ...labelsOverride };
-  return /* @__PURE__ */ jsxs16("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxs16("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx18(Megaphone, { size: 16, className: "text-orange-600 dark:text-orange-400" }),
+  return /* @__PURE__ */ jsxs17("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs17("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx19(Megaphone, { size: 16, className: "text-orange-600 dark:text-orange-400" }),
         labels.sectionTitle
       ] }),
-      /* @__PURE__ */ jsx18("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+      /* @__PURE__ */ jsx19("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__PURE__ */ jsxs16("form", { onSubmit: onSave, className: "p-6 space-y-6", children: [
-      topics.map((topic) => /* @__PURE__ */ jsxs16("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-4", children: [
-          /* @__PURE__ */ jsx18("div", { className: "flex-1", children: /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: topic.label }) }),
-          /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs17("form", { onSubmit: onSave, className: "p-6 space-y-6", children: [
+      topics.map((topic) => /* @__PURE__ */ jsxs17("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-4", children: [
+          /* @__PURE__ */ jsx19("div", { className: "flex-1", children: /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: topic.label }) }),
+          /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -1845,7 +2097,7 @@ function TopicsForm({
               className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${topic.enabled ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"}`,
               role: "switch",
               "aria-checked": topic.enabled,
-              children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx19(
                 "span",
                 {
                   className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${topic.enabled ? "translate-x-5" : "translate-x-0"}`
@@ -1854,7 +2106,7 @@ function TopicsForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "textarea",
           {
             value: topic.message,
@@ -1866,27 +2118,27 @@ function TopicsForm({
           }
         )
       ] }, topic.key)),
-      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "submit",
             disabled: saving,
             className: "inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50",
             children: [
-              /* @__PURE__ */ jsx18(Save3, { size: 14 }),
+              /* @__PURE__ */ jsx19(Save3, { size: 14 }),
               labels.saveButton
             ]
           }
         ),
-        saveSuccess && /* @__PURE__ */ jsx18("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
+        saveSuccess && /* @__PURE__ */ jsx19("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
       ] })
     ] })
   ] });
 }
 
 // src/hooks/useConversationMessages.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 function useConversationMessages(conversationId, params) {
   const context = useConversations();
   if (!context) {
@@ -1897,7 +2149,7 @@ function useConversationMessages(conversationId, params) {
     () => api.fetchMessages(conversationId, params),
     [conversationId, params?.limit, params?.before]
   );
-  const sendMessage = useCallback4(
+  const sendMessage = useCallback5(
     async (text) => {
       const message = await api.sendMessage(conversationId, text);
       await refetch();
@@ -1905,7 +2157,7 @@ function useConversationMessages(conversationId, params) {
     },
     [api, conversationId, refetch]
   );
-  const sendMedia = useCallback4(
+  const sendMedia = useCallback5(
     async (mediaData) => {
       const message = await api.sendMedia(conversationId, mediaData);
       await refetch();
@@ -1913,14 +2165,14 @@ function useConversationMessages(conversationId, params) {
     },
     [api, conversationId, refetch]
   );
-  const sendTemplate = useCallback4(
+  const sendTemplate = useCallback5(
     async (templateData) => {
       await api.sendTemplate(conversationId, templateData);
       await refetch();
     },
     [api, conversationId, refetch]
   );
-  const markRead = useCallback4(() => api.markRead(conversationId), [api, conversationId]);
+  const markRead = useCallback5(() => api.markRead(conversationId), [api, conversationId]);
   return { messages: data ?? [], loading, error, refetch, sendMessage, sendMedia, sendTemplate, markRead };
 }
 
@@ -1954,12 +2206,12 @@ function useConversationContext(conversationId) {
 }
 
 // src/hooks/useConversationRealtime.ts
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
 function useConversationRealtime(conversationId, onEvent) {
   const context = useConversations();
-  const onEventRef = useRef4(onEvent);
+  const onEventRef = useRef5(onEvent);
   onEventRef.current = onEvent;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!context || !conversationId) return;
     const source = context.sse.connectConversationStream(conversationId);
     const handler = (event) => onEventRef.current(event);
@@ -1972,9 +2224,9 @@ function useConversationRealtime(conversationId, onEvent) {
 }
 function useGlobalRealtime(onEvent) {
   const context = useConversations();
-  const onEventRef = useRef4(onEvent);
+  const onEventRef = useRef5(onEvent);
   onEventRef.current = onEvent;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!context) return;
     const source = context.sse.connectGlobalStream();
     const handler = (event) => onEventRef.current(event);
@@ -2046,6 +2298,7 @@ export {
   DEFAULT_INTERACTIVE_MESSAGE_LABELS,
   DEFAULT_LIGHTBOX_LABELS,
   DEFAULT_MESSAGE_COMPOSER_LABELS,
+  DEFAULT_RICH_COMPOSER_TOOLTIPS,
   DEFAULT_TEMPLATES_SETTINGS_LABELS,
   DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS,
   DEFAULT_WINDOW_EXPIRED_LABELS,
@@ -2066,6 +2319,8 @@ export {
   MessageTimestamp,
   NARROW_MAX_WIDTH_PX,
   REOPEN_MECHANISM,
+  RICH_COMPOSER_ACTION,
+  RichMessageComposer,
   SimpleEmojiPicker,
   StatusTicks,
   TEMPLATE_SETTINGS_TAB,