@adatechnology/conversations-ui 0.1.0-rc.20 → 0.1.0-rc.21

package/dist/index.js

@@ -1,6 +1,7 @@
 import {
   AudioPlayer,
   AudioRecorderButton,
+  AudioTranscription,
   ConversationDocumentsPanel,
   ConversationLocalesProvider,
   ConversationWallpaper,
@@ -44,7 +45,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-OIDAIVCH.js";
+} from "./chunk-TV4OQRGH.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -1315,6 +1316,7 @@ function ConversationHeader({
 
 // src/ConversationContextPanel.tsx
 import { useState as useState7 } from "react";
+import { Check, ChevronDown, ChevronUp, Clock, Pencil } from "lucide-react";
 
 // src/useIsNarrow.ts
 import { useEffect as useEffect4, useState as useState6 } from "react";
@@ -1336,58 +1338,189 @@ function useIsNarrow() {
 // src/ConversationContextPanel.tsx
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_CONTEXT_LABELS = {
-  title: "\u{1F4CB} Suas Sele\xE7\xF5es",
+  title: "Suas Sele\xE7\xF5es",
   empty: "Nada coletado ainda nesta conversa.",
   collapse: "fechar",
-  expand: "abrir"
+  expand: "abrir",
+  notCollected: "a coletar"
 };
+function statusOf(entry) {
+  if (entry.status) return entry.status;
+  return entry.value ? "completed" : "pending";
+}
+var CARD_STYLE = {
+  completed: "bg-white dark:bg-gray-800 border-2 border-green-200 dark:border-green-800 shadow-sm",
+  editing: "bg-white dark:bg-gray-800 border-2 border-blue-200 dark:border-blue-800 shadow-sm",
+  pending: "border-2 border-dashed border-gray-200 bg-white/40 dark:border-gray-700 dark:bg-gray-800/30"
+};
+var GLYPH_STYLE = {
+  completed: "text-green-600 dark:text-green-400",
+  editing: "text-blue-600 dark:text-blue-400",
+  pending: "text-gray-400 dark:text-gray-500"
+};
+function StatusGlyph({ status }) {
+  const size = 11;
+  if (status === "completed") return /* @__PURE__ */ jsx13(Check, { size, "aria-hidden": true });
+  if (status === "editing") return /* @__PURE__ */ jsx13(Pencil, { size, "aria-hidden": true });
+  return /* @__PURE__ */ jsx13(Clock, { size, "aria-hidden": true });
+}
+function CountPill({
+  status,
+  count,
+  className
+}) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs11("span", { className: cn("flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", className), children: [
+    /* @__PURE__ */ jsx13(StatusGlyph, { status }),
+    count
+  ] });
+}
 function ConversationContextPanel({
   entries,
   defaultOpen,
+  flowLabel,
   labels: labelsOverride,
   className,
   classNames
 }) {
   const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride };
-  const filled = entries.filter((entry) => Boolean(entry.value));
+  const counts = { completed: 0, pending: 0, editing: 0 };
+  for (const entry of entries) counts[statusOf(entry)] += 1;
   const isNarrow = useIsNarrow();
   const [manualOpen, setManualOpen] = useState7(void 0);
-  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0);
-  return /* @__PURE__ */ jsxs11("section", { className: cn("border-b", classNames?.root, className), children: [
-    /* @__PURE__ */ jsxs11(
-      "button",
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && counts.completed > 0);
+  return (
+    // Faixa azul clara com separador, como o wrapper do financiamento: sem ela o card encostava
+    // direto no papel de parede da conversa e os dois blocos se misturavam.
+    /* @__PURE__ */ jsx13("div", { className: cn("border-b bg-blue-50/60 px-3 py-3 dark:border-gray-700 dark:bg-blue-950/20", className), children: /* @__PURE__ */ jsxs11(
+      "section",
       {
-        type: "button",
-        onClick: () => setManualOpen(!open),
-        "aria-expanded": open,
-        title: open ? labels.collapse : labels.expand,
         className: cn(
-          "flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800",
-          classNames?.toggle
+          "overflow-hidden rounded-lg border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 dark:border-blue-900 dark:from-blue-950/30 dark:to-indigo-950/30",
+          classNames?.root
         ),
         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
-          ] }),
-          /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "ml-auto text-xs text-gray-500", children: open ? labels.collapse : labels.expand })
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => setManualOpen(!open),
+              "aria-expanded": open,
+              title: open ? labels.collapse : labels.expand,
+              className: cn(
+                "flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2.5 text-left transition-colors hover:bg-blue-100/40 dark:hover:bg-blue-900/20",
+                classNames?.toggle
+              ),
+              children: [
+                /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u{1F4CB}" }),
+                  /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.title }),
+                  flowLabel ? /* @__PURE__ */ jsx13("span", { className: "truncate text-xs font-medium text-blue-600 dark:text-blue-400", children: flowLabel }) : null,
+                  /* @__PURE__ */ jsx13(
+                    "span",
+                    {
+                      className: cn(
+                        "inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-medium text-white",
+                        classNames?.counter
+                      ),
+                      children: entries.length
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs11("span", { className: "flex flex-shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "completed",
+                      count: counts.completed,
+                      className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "editing",
+                      count: counts.editing,
+                      className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    CountPill,
+                    {
+                      status: "pending",
+                      count: counts.pending,
+                      className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                    }
+                  ),
+                  open ? /* @__PURE__ */ jsx13(ChevronUp, { size: 15, className: "flex-shrink-0 text-blue-500", "aria-hidden": true }) : /* @__PURE__ */ jsx13(ChevronDown, { size: 15, className: "flex-shrink-0 text-blue-500", "aria-hidden": true })
+                ] })
+              ]
+            }
+          ),
+          open ? (
+            /**
+             * Teto de altura com rolagem interna, como no financiamento (`max-h-64 overflow-y-auto`).
+             * Sem isso o painel cresce sem limite — e cresce de verdade: o host anexa as chaves de
+             * contexto que ele não conhece ao fim da lista, então uma conversa com bastante estado
+             * empurrava a conversa inteira para fora da tela.
+             *
+             * A diferença: lá o teto envolve o cabeçalho também, então ele rola junto e sai de vista.
+             * Aqui só o corpo rola — o cabeçalho é o que fecha o painel, e perder o clique de fechar
+             * no meio da rolagem é pior do que a economia de uma linha de markup.
+             */
+            /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: cn(
+                  "cv-scrollbar-thin max-h-64 overflow-y-auto border-t border-blue-200 px-4 pb-4 pt-1 dark:border-blue-900",
+                  classNames?.body
+                ),
+                children: entries.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "pt-2 text-xs text-gray-500 dark:text-gray-400", children: labels.empty }) : (
+                  /**
+                   * Três colunas no desktop, como no financiamento — com duas, seis campos viravam uma
+                   * coluna alta que empurrava a conversa.
+                   *
+                   * O que não fizemos igual: lá o painel FILTRA o que não foi coletado, porque a fonte
+                   * só guarda o que o cliente respondeu. Aqui a lista de campos é conhecida de antemão,
+                   * e "falta endereço" é justamente o que o atendente precisa ver ao assumir. Então o
+                   * pendente aparece — tracejado e apagado, para ler como lacuna e não como dado.
+                   */
+                  /* @__PURE__ */ jsx13("dl", { className: "mt-2 grid grid-cols-2 gap-2 lg:grid-cols-3", children: entries.map((entry) => {
+                    const status = statusOf(entry);
+                    return /* @__PURE__ */ jsxs11(
+                      "div",
+                      {
+                        className: cn("min-w-0 rounded-lg p-2.5 transition-all", CARD_STYLE[status]),
+                        children: [
+                          /* @__PURE__ */ jsxs11("dt", { className: "mb-1 flex items-center justify-center gap-1", children: [
+                            entry.icon ? /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-base leading-none", children: entry.icon }) : null,
+                            /* @__PURE__ */ jsx13("span", { className: "truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500 dark:text-gray-400", children: entry.label }),
+                            /* @__PURE__ */ jsx13("span", { className: cn("flex-shrink-0 leading-none", GLYPH_STYLE[status]), children: /* @__PURE__ */ jsx13(StatusGlyph, { status }) })
+                          ] }),
+                          /* @__PURE__ */ jsx13(
+                            "dd",
+                            {
+                              className: cn(
+                                "truncate text-center text-xs font-semibold",
+                                entry.value ? "text-gray-900 dark:text-gray-100" : "italic font-normal text-gray-400 dark:text-gray-500"
+                              ),
+                              title: entry.value ?? labels.notCollected,
+                              children: entry.value ?? labels.notCollected
+                            }
+                          )
+                        ]
+                      },
+                      entry.key
+                    );
+                  }) })
+                )
+              }
+            )
+          ) : null
         ]
       }
-    ),
-    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__ */ 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" })
-    ] }, entry.key)) }) }) : null
-  ] });
+    ) })
+  );
 }
 
 // src/WindowExpiredNotice.tsx
@@ -1428,13 +1561,21 @@ function buildTranscriptText(params) {
     ""
   ];
   const lines = params.messages.map((message) => {
-    const stamp = new Date(message.timestamp).toLocaleString("pt-BR");
     const author = message.agentName ?? SENDER_LABEL[message.sender];
-    const body = message.content ?? message.caption ?? `<${message.type}>`;
-    return `[${stamp}] ${author}: ${body}`;
+    return `[${formatStamp(message.timestamp)}] ${author}: ${bodyOf(message)}`;
   });
   return [...header, ...lines].join("\n");
 }
+function bodyOf(message) {
+  const transcript = message.transcription?.text?.trim();
+  if (message.type === "audio" && transcript) return `[\xE1udio] ${transcript}`;
+  return message.content ?? message.caption ?? `<${message.type}>`;
+}
+function formatStamp(timestamp) {
+  if (!timestamp) return "data indispon\xEDvel";
+  const parsed = new Date(timestamp);
+  return Number.isNaN(parsed.getTime()) ? "data indispon\xEDvel" : parsed.toLocaleString("pt-BR");
+}
 function buildTranscriptFilename(whatsappNumber, generatedAt) {
   const stamp = generatedAt.toISOString().slice(0, 10);
   return `conversa-${whatsappNumber}-${stamp}.txt`;
@@ -2022,9 +2163,133 @@ function WelcomeFarewellForm({
   ] });
 }
 
+// src/settings/TranscriptionSettingsForm.tsx
+import { AudioLines, Save as Save3 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var DEFAULT_LABELS5 = {
+  sectionTitle: "Transcri\xE7\xE3o de \xE1udio",
+  enabled: "Transcrever notas de voz",
+  enabledHint: "Converte o \xE1udio do cliente em texto, que o atendente l\xEA e copia direto da conversa.",
+  modeTitle: "Quando transcrever",
+  modeAuto: "Automaticamente",
+  modeAutoHint: "Toda nota de voz recebida \xE9 transcrita na hora. Mais c\xF4modo, consome mais cota.",
+  modeOnDemand: "Quando o atendente pedir",
+  modeOnDemandHint: "Transcreve s\xF3 ao clicar no bot\xE3o da conversa. Consome cota apenas com \xE1udio que algu\xE9m vai ler.",
+  unavailable: "Transcri\xE7\xE3o n\xE3o est\xE1 dispon\xEDvel neste ambiente \u2014 fale com quem administra a instala\xE7\xE3o.",
+  save: "Salvar",
+  saving: "Salvando...",
+  saveSuccess: "Configura\xE7\xE3o de transcri\xE7\xE3o salva."
+};
+function TranscriptionSettingsForm({
+  enabled,
+  onEnabledChange,
+  mode,
+  onModeChange,
+  onSave,
+  isAvailable = true,
+  saving = false,
+  saveSuccess = false,
+  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__ */ jsx18("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-1.5", children: [
+      /* @__PURE__ */ jsx18(AudioLines, { size: 14, className: "text-blue-600 dark:text-blue-400" }),
+      labels.sectionTitle
+    ] }) }),
+    /* @__PURE__ */ jsxs16("form", { onSubmit: onSave, className: "p-6 space-y-5", children: [
+      !isAvailable && /* @__PURE__ */ jsx18("div", { className: "bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-xl px-4 py-3 text-sm text-amber-800 dark:text-amber-300", children: labels.unavailable }),
+      /* @__PURE__ */ jsxs16("label", { className: "flex items-start gap-3 cursor-pointer", children: [
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "checkbox",
+            checked: enabled,
+            onChange: (event) => onEnabledChange(event.target.checked),
+            disabled: !isAvailable,
+            className: "mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsxs16("span", { children: [
+          /* @__PURE__ */ jsx18("span", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.enabled }),
+          /* @__PURE__ */ jsx18("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: labels.enabledHint })
+        ] })
+      ] }),
+      enabled && /* @__PURE__ */ jsxs16("fieldset", { disabled: !isAvailable, className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsx18("legend", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: labels.modeTitle }),
+        /* @__PURE__ */ jsx18(
+          ModeOption,
+          {
+            value: "onDemand",
+            current: mode,
+            onSelect: onModeChange,
+            title: labels.modeOnDemand,
+            hint: labels.modeOnDemandHint
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          ModeOption,
+          {
+            value: "auto",
+            current: mode,
+            onSelect: onModeChange,
+            title: labels.modeAuto,
+            hint: labels.modeAutoHint
+          }
+        )
+      ] }),
+      saveSuccess && /* @__PURE__ */ jsx18("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__ */ jsx18("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs16(
+        "button",
+        {
+          type: "submit",
+          disabled: saving || !isAvailable,
+          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__ */ jsx18("span", { className: "w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx18(Save3, { size: 14 }),
+            saving ? labels.saving : labels.save
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function ModeOption({
+  value,
+  current,
+  onSelect,
+  title,
+  hint
+}) {
+  const isSelected = current === value;
+  return /* @__PURE__ */ jsxs16(
+    "label",
+    {
+      className: `flex items-start gap-3 cursor-pointer rounded-xl border px-4 py-3 transition-colors ${isSelected ? "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/30" : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"}`,
+      children: [
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "radio",
+            name: "transcription-mode",
+            value,
+            checked: isSelected,
+            onChange: () => onSelect(value),
+            className: "mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ jsxs16("span", { children: [
+          /* @__PURE__ */ jsx18("span", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: title }),
+          /* @__PURE__ */ jsx18("span", { className: "block text-xs text-gray-500 dark:text-gray-400", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/settings/WhatsAppTemplatesSettings.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var TEMPLATE_SETTINGS_TAB = {
   SELECT: "select",
   CREATE: "create"
@@ -2040,9 +2305,9 @@ function WhatsAppTemplatesSettings({
 }) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
   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(
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs17("nav", { className: "flex gap-1 border-b", role: "tablist", children: [
+      /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
@@ -2053,7 +2318,7 @@ function WhatsAppTemplatesSettings({
           children: labels.selectTab
         }
       ),
-      create ? /* @__PURE__ */ jsx18(
+      create ? /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
@@ -2065,14 +2330,14 @@ function WhatsAppTemplatesSettings({
         }
       ) : null
     ] }),
-    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx18(WhatsAppTemplateSettingsForm, { ...settingsProps }) : create ? /* @__PURE__ */ jsx18(WhatsAppCreateTemplateForm, { ...create }) : null
+    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx19(WhatsAppTemplateSettingsForm, { ...settingsProps }) : create ? /* @__PURE__ */ jsx19(WhatsAppCreateTemplateForm, { ...create }) : null
   ] });
 }
 
 // src/settings/TopicsForm.tsx
-import { Megaphone, Save as Save3 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
-var DEFAULT_LABELS5 = {
+import { Megaphone, Save as Save4 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var DEFAULT_LABELS6 = {
   sectionTitle: "T\xF3picos intermedi\xE1rios",
   sectionDescription: "Mensagens autom\xE1ticas para assuntos espec\xEDficos, disparadas quando o cliente demonstra interesse.",
   messagePlaceholder: "Digite a mensagem autom\xE1tica para este t\xF3pico...",
@@ -2088,20 +2353,20 @@ function TopicsForm({
   saveSuccess = false,
   labels: labelsOverride
 }) {
-  const labels = { ...DEFAULT_LABELS5, ...labelsOverride };
-  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" }),
+  const labels = { ...DEFAULT_LABELS6, ...labelsOverride };
+  return /* @__PURE__ */ jsxs18("section", { className: "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "px-6 py-4 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs18("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx20(Megaphone, { size: 16, className: "text-orange-600 dark:text-orange-400" }),
         labels.sectionTitle
       ] }),
-      /* @__PURE__ */ jsx19("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
+      /* @__PURE__ */ jsx20("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.sectionDescription })
     ] }),
-    /* @__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(
+    /* @__PURE__ */ jsxs18("form", { onSubmit: onSave, className: "p-6 space-y-6", children: [
+      topics.map((topic) => /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-4", children: [
+          /* @__PURE__ */ jsx20("div", { className: "flex-1", children: /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: topic.label }) }),
+          /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
@@ -2109,7 +2374,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__ */ jsx19(
+              children: /* @__PURE__ */ jsx20(
                 "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"}`
@@ -2118,7 +2383,7 @@ function TopicsForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "textarea",
           {
             value: topic.message,
@@ -2130,20 +2395,20 @@ function TopicsForm({
           }
         )
       ] }, topic.key)),
-      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs18(
           "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__ */ jsx19(Save3, { size: 14 }),
+              /* @__PURE__ */ jsx20(Save4, { size: 14 }),
               labels.saveButton
             ]
           }
         ),
-        saveSuccess && /* @__PURE__ */ jsx19("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
+        saveSuccess && /* @__PURE__ */ jsx20("span", { className: "text-sm text-green-600 dark:text-green-400", children: labels.saveSuccess })
       ] })
     ] })
   ] });
@@ -2188,6 +2453,46 @@ function useConversationMessages(conversationId, params) {
   return { messages: data ?? [], loading, error, refetch, sendMessage, sendMedia, sendTemplate, markRead };
 }
 
+// src/hooks/useScrollToLatestMessage.ts
+import { useCallback as useCallback6, useLayoutEffect, useRef as useRef5, useState as useState10 } from "react";
+var NEAR_BOTTOM_THRESHOLD_PX = 120;
+var SCROLL_BEHAVIOR = "auto";
+function useScrollToLatestMessage({
+  conversationId,
+  messageCount
+}) {
+  const containerRef = useRef5(null);
+  const [isAwayFromBottom, setIsAwayFromBottom] = useState10(false);
+  const isAwayFromBottomRef = useRef5(false);
+  const scrollToBottom = useCallback6((behavior = SCROLL_BEHAVIOR) => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTo({ top: container.scrollHeight, behavior });
+  }, []);
+  const handleScroll = useCallback6((event) => {
+    const target = event.currentTarget;
+    const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+    const away = distanceFromBottom > NEAR_BOTTOM_THRESHOLD_PX;
+    isAwayFromBottomRef.current = away;
+    setIsAwayFromBottom((current) => current === away ? current : away);
+  }, []);
+  const jumpedForConversationRef = useRef5(void 0);
+  useLayoutEffect(() => {
+    const isNewConversation = jumpedForConversationRef.current !== conversationId;
+    if (isNewConversation) {
+      isAwayFromBottomRef.current = false;
+      setIsAwayFromBottom(false);
+      if (messageCount === 0) return;
+      jumpedForConversationRef.current = conversationId;
+      scrollToBottom(SCROLL_BEHAVIOR);
+      return;
+    }
+    if (isAwayFromBottomRef.current) return;
+    scrollToBottom(SCROLL_BEHAVIOR);
+  }, [conversationId, messageCount, scrollToBottom]);
+  return { containerRef, handleScroll, isAwayFromBottom, scrollToBottom };
+}
+
 // src/hooks/useConversationList.ts
 function useConversationList(params) {
   const context = useConversations();
@@ -2218,10 +2523,10 @@ function useConversationContext(conversationId) {
 }
 
 // src/hooks/useConversationRealtime.ts
-import { useEffect as useEffect6, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 function useConversationRealtime(conversationId, onEvent) {
   const context = useConversations();
-  const onEventRef = useRef5(onEvent);
+  const onEventRef = useRef6(onEvent);
   onEventRef.current = onEvent;
   useEffect6(() => {
     if (!context || !conversationId) return;
@@ -2236,7 +2541,7 @@ function useConversationRealtime(conversationId, onEvent) {
 }
 function useGlobalRealtime(onEvent) {
   const context = useConversations();
-  const onEventRef = useRef5(onEvent);
+  const onEventRef = useRef6(onEvent);
   onEventRef.current = onEvent;
   useEffect6(() => {
     if (!context) return;
@@ -2284,6 +2589,7 @@ function useInboxActions() {
 export {
   AudioPlayer,
   AudioRecorderButton,
+  AudioTranscription,
   Avatar,
   CHANNEL_BRAND_COLOR,
   CHANNEL_CAPABILITIES,
@@ -2341,6 +2647,7 @@ export {
   TEMPLATE_SETTINGS_TAB,
   ToastProvider,
   TopicsForm,
+  TranscriptionSettingsForm,
   WINDOW_FILTERS,
   WelcomeFarewellForm,
   WhatsAppCreateTemplateForm,
@@ -2383,6 +2690,7 @@ export {
   useInboxActions,
   useIsDarkTheme,
   useIsNarrow,
+  useScrollToLatestMessage,
   useToast,
   useWaitingNotifications,
   waToHTML,