@adatechnology/conversations-ui 0.1.0-rc.1 → 0.1.0-rc.3

package/dist/chunk-NV2RZ5KT.js

@@ -0,0 +1,56 @@
+// src/useDarkMode.ts
+import { useState, useEffect, useCallback } from "react";
+var STORAGE_KEY = "conversations-ui-dark-mode";
+function getInitialDark() {
+  if (typeof window === "undefined") return false;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored !== null) {
+    return stored === "true";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    setIsDark(root.classList.contains("dark"));
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(STORAGE_KEY, String(isDark));
+  }, [isDark]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === null) {
+        setIsDark(event.matches);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => !prev);
+  }, []);
+  return { isDark, toggle };
+}
+
+export {
+  useIsDarkTheme,
+  useDarkMode
+};

package/dist/{chunk-ZDURDZTM.js → chunk-OGRRHQQW.js}

@@ -151,49 +151,9 @@ function waToHTMLInline(text) {
   return escapeHtml(text).replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~([^~\n]+)~/g, "<del>$1</del>").replace(/`([^`\n]+)`/g, "<code>$1</code>");
 }
 
-// src/useDarkMode.ts
-import { useState, useEffect, useCallback } from "react";
-var STORAGE_KEY = "conversations-ui-dark-mode";
-function getInitialDark() {
-  if (typeof window === "undefined") return false;
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored !== null) {
-    return stored === "true";
-  }
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useDarkMode() {
-  const [isDark, setIsDark] = useState(getInitialDark);
-  useEffect(() => {
-    const root = document.documentElement;
-    if (isDark) {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-    localStorage.setItem(STORAGE_KEY, String(isDark));
-  }, [isDark]);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (event) => {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored === null) {
-        setIsDark(event.matches);
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const toggle = useCallback(() => {
-    setIsDark((prev) => !prev);
-  }, []);
-  return { isDark, toggle };
-}
-
 export {
   parseWhatsAppFormatting,
   waToHTML,
   htmlToWA,
-  waToHTMLInline,
-  useDarkMode
+  waToHTMLInline
 };

package/dist/flows/index.js

@@ -1,7 +1,9 @@
 import {
-  parseWhatsAppFormatting,
-  useDarkMode
-} from "../chunk-ZDURDZTM.js";
+  useIsDarkTheme
+} from "../chunk-NV2RZ5KT.js";
+import {
+  parseWhatsAppFormatting
+} from "../chunk-OGRRHQQW.js";
 
 // src/flows/FlowNodeCard.tsx
 import { Handle, Position } from "@xyflow/react";
@@ -524,7 +526,7 @@ var BACKGROUND_COLOR_LIGHT = "#cbd5e1";
 var BACKGROUND_COLOR_DARK = "#334155";
 function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
-  const { isDark } = useDarkMode();
+  const isDark = useIsDarkTheme();
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
   const nodes = useMemo(
     () => Object.values(graphs).map((g) => ({

package/dist/index.d.ts

@@ -1,47 +1,7 @@
 import * as react from 'react';
 import react__default, { ReactNode, FormEvent } from 'react';
-
-interface ConversationsUIConfig {
-    apiBaseUrl: string;
-    theme?: ConversationsTheme;
-    features?: ConversationsFeatures;
-}
-interface ConversationsTheme {
-    primaryColor?: string;
-    backgroundColor?: string;
-    bubbleSent?: string;
-    bubbleReceived?: string;
-    textPrimary?: string;
-    textSecondary?: string;
-}
-interface ConversationsFeatures {
-    audio?: boolean;
-    documents?: boolean;
-    emoji?: boolean;
-    darkMode?: boolean;
-}
-interface MessagePayload {
-    id: string;
-    type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template';
-    content?: string;
-    caption?: string;
-    mediaUrl?: string;
-    base64?: string;
-    uploadId?: string;
-    mediaId?: string;
-    mimeType?: string;
-    filename?: string;
-    sizeBytes?: number;
-    direction: 'inbound' | 'outbound';
-    sender: 'bot' | 'customer' | 'agent';
-    timestamp: string;
-    status?: 'sent' | 'delivered' | 'read' | 'failed';
-    readAt?: string;
-    agentName?: string | null;
-    templateName?: string;
-    isFirstInGroup?: boolean;
-    isLastInGroup?: boolean;
-}
+import { M as MessagePayload, k as ConversationsFeatures, i as ConversationSummary, f as ConversationChannel, j as ConversationsApi, S as SSEProvider, g as ConversationDocument } from './types-C0PtaO7S.js';
+export { C as CHANNEL_CAPABILITIES, a as CHANNEL_FILTER_ALL, b as CONVERSATION_CHANNEL, c as ChannelCapabilities, d as ChannelFilter, e as ChannelFilterOption, h as ConversationEventSource, l as ConversationsTheme, m as ConversationsUIConfig, D as DEFAULT_CONVERSATION_CHANNEL, F as FormatContactHandleParams, H as HANDLE_KIND, n as HandleKind, R as REOPEN_MECHANISM, o as ReopenMechanism, p as capabilitiesOf, q as channelFiltersFor, r as contactFlag, s as formatContactHandle } from './types-C0PtaO7S.js';
 
 type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
 interface MediaRendererProps {
@@ -60,8 +20,9 @@ interface MessageBubbleProps {
     isSelected?: boolean;
     onToggleSelect?: () => void;
     onResolveMediaUrl?: ResolveMediaUrl;
+    className?: string;
 }
-declare function MessageBubble({ message, isMine, senderName, isFirstInGroup, isSelecting, isSelected, onToggleSelect, onResolveMediaUrl, }: MessageBubbleProps): react.JSX.Element;
+declare function MessageBubble({ message, isMine, senderName, isFirstInGroup, isSelecting, isSelected, onToggleSelect, onResolveMediaUrl, className, }: MessageBubbleProps): react.JSX.Element;
 
 interface ConversationWallpaperProps {
     children?: ReactNode;
@@ -82,6 +43,7 @@ interface ConversationLocales {
         viewImage: string;
         listenAudio: string;
         viewVideo: string;
+        moderationFlagged: string;
     };
     selection: {
         select: string;
@@ -123,8 +85,14 @@ interface MessageComposerProps {
     maxLength?: number;
     disabled?: boolean;
     acceptedFileTypes?: string;
+    className?: string;
+    classNames?: Partial<MessageComposerClassNames>;
+}
+interface MessageComposerClassNames {
+    root: string;
+    field: string;
 }
-declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, features, placeholder, maxLength, disabled, acceptedFileTypes, }: MessageComposerProps) => react.JSX.Element;
+declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, features, placeholder, maxLength, disabled, acceptedFileTypes, className, classNames, }: MessageComposerProps) => react.JSX.Element;
 
 interface WhatsAppMessageEditorProps {
     value: string;
@@ -145,10 +113,16 @@ interface SimpleEmojiPickerProps {
 }
 declare function SimpleEmojiPicker({ onSelect, label, pickerWidth, pickerMaxHeight }: SimpleEmojiPickerProps): react.JSX.Element;
 
+interface DateDividerClassNames {
+    root: string;
+    label: string;
+}
 interface DateDividerProps {
     iso: string;
+    className?: string;
+    classNames?: Partial<DateDividerClassNames>;
 }
-declare function DateDivider({ iso }: DateDividerProps): react.JSX.Element;
+declare function DateDivider({ iso, className, classNames }: DateDividerProps): react.JSX.Element;
 
 interface AvatarProps {
     name?: string | null;
@@ -158,76 +132,25 @@ interface AvatarProps {
 }
 declare function Avatar({ name, avatarUrl, size, className }: AvatarProps): react.JSX.Element;
 
-interface ConversationsApi {
-    fetchMessages(conversationId: string, params?: {
-        limit?: number;
-        before?: string;
-    }): Promise<MessagePayload[]>;
-    fetchConversations(params?: {
-        page?: number;
-        limit?: number;
-        waitingHuman?: boolean;
-        search?: string;
-    }): Promise<ConversationSummary[]>;
-    sendMessage(conversationId: string, text: string): Promise<MessagePayload>;
-    sendMedia(conversationId: string, data: {
-        base64: string;
-        mimeType: string;
-        filename: string;
-        caption?: string;
-    }): Promise<MessagePayload>;
-    sendTemplate(conversationId: string, data: {
-        templateName: string;
-        languageCode?: string;
-        bodyParams?: string[];
-    }): Promise<void>;
-    markRead(conversationId: string): Promise<void>;
-    getContext(conversationId: string): Promise<Record<string, unknown>>;
-    getDocuments(conversationId: string, params?: {
-        search?: string;
-        page?: number;
-    }): Promise<ConversationDocument[]>;
-    getDocumentUrl(uploadId: string): Promise<string>;
-    getMediaProxyUrl(mediaId: string): Promise<{
-        mimeType: string;
-        data: string;
-    }>;
-}
-interface SSEProvider {
-    connectConversationStream(conversationId: string): EventSource;
-    connectGlobalStream(): EventSource;
-}
-interface ConversationSummary {
-    id: string;
-    whatsappNumber: string;
-    clientName?: string;
-    lastContent?: string;
-    lastDirection?: 'inbound' | 'outbound';
-    lastAt: string;
-    lastInboundAt: string | null;
-    mode: 'bot' | 'human';
-    assignedUserId: string | null;
-    waitingHuman: boolean;
-    unread: number;
-    currentState: string;
-}
-interface ConversationDocument {
-    id: string;
-    filename: string;
-    mimeType: string;
-    sizeBytes: number;
-    source: string;
-    linkedAt: string;
-}
-
 interface ConversationListItemProps {
     conversation: ConversationSummary;
     active?: boolean;
     selected?: boolean;
     onClick?: () => void;
     onSelect?: (id: string) => void;
-}
-declare const ConversationListItem: ({ conversation, active, selected, onClick, onSelect, }: ConversationListItemProps) => react.JSX.Element;
+    /**
+     * Desliga a borda inferior quando o item é composto dentro de outra linha (ver `ConversationRow`):
+     * com ela ligada, a borda corta a própria linha ao meio, separando o item do rodapé de status.
+     */
+    showDivider?: boolean;
+    /**
+     * Desliga o fundo de selecionado. Par do `showDivider`: quando o item é composto dentro de uma
+     * linha maior, quem pinta o realce é a linha — senão só o bloco do item fica cinza e o resto
+     * (checkbox, pills, barra lateral) continua branco, como se metade da linha estivesse selecionada.
+     */
+    highlightActive?: boolean;
+}
+declare const ConversationListItem: ({ conversation, active, selected, onClick, onSelect, showDivider, highlightActive, }: ConversationListItemProps) => react.JSX.Element;
 
 type ToastType = 'success' | 'error' | 'info';
 interface ToastContextValue {
@@ -279,11 +202,258 @@ interface MessageTailProps {
 }
 declare function MessageTail({ isOutbound }: MessageTailProps): react.JSX.Element;
 
+/**
+ * Janela de sessão: o intervalo em que o canal aceita mensagem livre do atendente. No WhatsApp são
+ * 24h desde o último contato do cliente; fora dela só template. Cada canal tem a sua regra — e há
+ * canal sem janela nenhuma — então a política vem de `capabilitiesOf`, não de constante fixa.
+ *
+ * Mora no SDK porque é regra de plataforma, não de produto: todo projeto que usa este pacote
+ * precisa dela para saber o que o atendente ainda consegue fazer.
+ */
+
+declare const CONVERSATION_WINDOW: {
+    readonly ALL: "all";
+    readonly FRESH: "fresh";
+    readonly WARNING: "warning";
+    readonly CRITICAL: "critical";
+    readonly EXPIRED: "expired";
+};
+type ConversationWindow = (typeof CONVERSATION_WINDOW)[keyof typeof CONVERSATION_WINDOW];
+declare const WINDOW_FILTERS: readonly [{
+    readonly value: "all";
+    readonly label: "Todas";
+    readonly dotClass: "";
+}, {
+    readonly value: "fresh";
+    readonly label: "<12h";
+    readonly dotClass: "bg-green-500";
+}, {
+    readonly value: "warning";
+    readonly label: "12-21h";
+    readonly dotClass: "bg-yellow-500";
+}, {
+    readonly value: "critical";
+    readonly label: "21-24h";
+    readonly dotClass: "bg-red-500";
+}, {
+    readonly value: "expired";
+    readonly label: ">24h";
+    readonly dotClass: "bg-gray-400";
+}];
+type WindowOfParams = {
+    readonly lastInboundAt: string | null;
+    readonly now: number;
+    /** Ausente = `whatsapp`. */
+    readonly channel?: ConversationChannel | undefined;
+};
+/**
+ * Sem `lastInboundAt` o cliente nunca escreveu, então não há janela aberta — classificar como
+ * expirada é o comportamento seguro: evita o atendente tentar texto livre e receber recusa.
+ *
+ * Canal sem janela de sessão (chat de site) é sempre `fresh`: ali nada expira, e marcar expirado
+ * bloquearia o composer inventando um limite que a plataforma não impõe.
+ */
+declare function windowOf(params: WindowOfParams): ConversationWindow;
+declare function formatStalledFor(lastAt: string, now: number): string;
+
+type ConversationRowClassNames = {
+    root: string;
+    windowBar: string;
+};
+type ConversationRowProps = {
+    conversation: ConversationSummary;
+    active: boolean;
+    selected: boolean;
+    now: number;
+    busy: boolean;
+    onOpen: () => void;
+    onToggleSelected: () => void;
+    onTakeover: () => void;
+    className?: string;
+    classNames?: Partial<ConversationRowClassNames>;
+};
+declare function ConversationRow({ conversation, active, selected, now, busy, onOpen, onToggleSelected, onTakeover, className, classNames, }: ConversationRowProps): react.JSX.Element;
+
+declare const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>>;
+interface ChannelIconProps {
+    channel?: ConversationChannel | undefined;
+    size?: number;
+    className?: string;
+}
+declare function ChannelIcon({ channel, size, className }: ChannelIconProps): react.JSX.Element;
+
+interface ConversationHeaderLabels {
+    botMode: string;
+    humanMode: string;
+    returnToBot: string;
+    finish: string;
+    takeover: string;
+    download: string;
+    documents: string;
+    back: string;
+    moreActions: string;
+}
+declare const DEFAULT_CONVERSATION_HEADER_LABELS: ConversationHeaderLabels;
+/**
+ * Partes estilizáveis do cabeçalho. Cada chave recebe classes que o `cn` funde por cima da base, e
+ * conflito de utilitário (padding, gap, borda) fica com o valor do produto.
+ */
+interface ConversationHeaderClassNames {
+    root: string;
+    identity: string;
+    name: string;
+    meta: string;
+    actions: string;
+    desktopActions: string;
+    mobileMenu: string;
+}
+interface ConversationHeaderProps {
+    conversation: ConversationSummary;
+    busy?: boolean;
+    onTakeover?: () => void;
+    onReturnToBot?: () => void;
+    onFinish?: () => void;
+    onDownload?: () => void;
+    onOpenDocuments?: () => void;
+    documentsOpen?: boolean;
+    onBack?: () => void;
+    labels?: Partial<ConversationHeaderLabels>;
+    className?: string;
+    classNames?: Partial<ConversationHeaderClassNames>;
+}
+declare function ConversationHeader({ conversation, busy, onTakeover, onReturnToBot, onFinish, onDownload, onOpenDocuments, documentsOpen, onBack, labels: labelsOverride, className, classNames, }: ConversationHeaderProps): react.JSX.Element;
+
+/**
+ * "Suas Seleções": o que o bot já coletou na conversa. Para o atendente que assume no meio, é a
+ * diferença entre ler o transcript inteiro e ver o estado em duas linhas.
+ *
+ * O pacote não interpreta o contexto — ele é `Record<string, unknown>` e cada produto nomeia as
+ * próprias chaves. O host traduz para `entries`; aqui só se decide como mostrar.
+ */
+interface ConversationContextEntry {
+    key: string;
+    label: string;
+    value?: string | undefined;
+    icon?: string;
+}
+interface ConversationContextPanelLabels {
+    title: string;
+    empty: string;
+}
+declare const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels;
+interface ConversationContextPanelClassNames {
+    root: string;
+    toggle: string;
+    counter: string;
+    body: string;
+}
+interface ConversationContextPanelProps {
+    entries: readonly ConversationContextEntry[];
+    labels?: Partial<ConversationContextPanelLabels>;
+    className?: string;
+    classNames?: Partial<ConversationContextPanelClassNames>;
+}
+declare function ConversationContextPanel({ entries, labels: labelsOverride, className, classNames, }: ConversationContextPanelProps): react.JSX.Element;
+
+interface WindowExpiredNoticeLabels {
+    title: string;
+    description: string;
+    sendTemplate: string;
+}
+declare const DEFAULT_WINDOW_EXPIRED_LABELS: WindowExpiredNoticeLabels;
+interface WindowExpiredNoticeProps {
+    onSendTemplate?: () => void;
+    disabled?: boolean;
+    labels?: Partial<WindowExpiredNoticeLabels>;
+    className?: string;
+}
+declare function WindowExpiredNotice({ onSendTemplate, disabled, labels: labelsOverride, className, }: WindowExpiredNoticeProps): react.JSX.Element;
+/**
+ * Só a faixa `expired` bloqueia: 21-24h ainda aceita texto livre e merece alerta, não impedimento.
+ */
+declare function isWindowBlocking(window: ConversationWindow): boolean;
+
+/**
+ * Arquivos trocados na conversa. Sai do transcript e vira lista própria porque anexo é o que o
+ * atendente mais precisa reencontrar depois — rolar meses de mensagens para achar um comprovante é
+ * o caso que a busca por documento existe para eliminar.
+ *
+ * Usa `useConversationDocuments`, então funciona com qualquer `ConversationsApi`. Host sem
+ * biblioteca de documentos cai no estado vazio, sem quebrar.
+ */
+interface ConversationDocumentsPanelLabels {
+    toggle: string;
+    title: string;
+    searchPlaceholder: string;
+    empty: string;
+    loading: string;
+    failure: string;
+    download: string;
+}
+declare const DEFAULT_CONVERSATION_DOCUMENTS_LABELS: ConversationDocumentsPanelLabels;
+interface ConversationDocumentsPanelClassNames {
+    root: string;
+    body: string;
+}
+interface ConversationDocumentsPanelProps {
+    conversationId: string;
+    /** Controlado de fora porque o gatilho vive no cabeçalho, junto das outras ações da conversa. */
+    open: boolean;
+    labels?: Partial<ConversationDocumentsPanelLabels>;
+    className?: string;
+    classNames?: Partial<ConversationDocumentsPanelClassNames>;
+}
+declare function ConversationDocumentsPanel({ conversationId, open, labels: labelsOverride, className, classNames, }: ConversationDocumentsPanelProps): react.JSX.Element | null;
+
+/**
+ * Serialização do transcript para download. Fica no pacote porque o formato de um histórico de
+ * WhatsApp legível não é regra de negócio de ninguém — e porque o host que já tem as mensagens em
+ * tela não deveria precisar de rota nova só para salvar um arquivo.
+ *
+ * Funções puras, separadas do disparo do download: é o que permite testá-las sem DOM.
+ */
+
+type BuildTranscriptTextParams = {
+    readonly messages: readonly MessagePayload[];
+    readonly whatsappNumber: string;
+    readonly clientName?: string | undefined;
+};
+/**
+ * Formato próximo ao export nativo do WhatsApp (`[data hora] Autor: texto`), que é o que pessoas e
+ * ferramentas de suporte já sabem ler.
+ */
+declare function buildTranscriptText(params: BuildTranscriptTextParams): string;
+declare function buildTranscriptFilename(whatsappNumber: string, generatedAt: Date): string;
+/**
+ * Dispara o download no navegador. `revokeObjectURL` no fim não é higiene opcional: sem ele cada
+ * export retém o blob inteiro em memória até a aba fechar.
+ */
+declare function downloadTextFile(filename: string, content: string): void;
+
+/**
+ * Leitura passiva do tema do host: observa a classe `dark` no `<html>` e não escreve nada.
+ *
+ * Existe porque `useDarkMode` é um controlador — ele grava a classe e persiste a preferência. Um
+ * componente que só precisa escolher cor não pode usá-lo: bastava renderizar o mapa de fluxos
+ * para o app inteiro do host trocar de tema, seguindo o `prefers-color-scheme` do sistema em vez
+ * da configuração da aplicação.
+ */
+declare function useIsDarkTheme(): boolean;
 declare function useDarkMode(): {
     isDark: boolean;
     toggle: () => void;
 };
 
+/**
+ * Detecta tela estreita para decisões que CSS não resolve — como abrir ou não um painel por padrão.
+ *
+ * O breakpoint é o mesmo das classes `cv-only-*` e `.cv-back` (1024px). Duplicado aqui porque
+ * JavaScript não lê media query do stylesheet; se um dia divergirem, o sintoma é painel abrindo
+ * numa largura onde o resto da UI já mudou de modo.
+ */
+declare const NARROW_MAX_WIDTH_PX = 1023;
+declare function useIsNarrow(): boolean;
+
 interface UseWaitingNotificationsResult {
     unreadCount: number;
     conversations: ConversationSummary[];
@@ -435,6 +605,41 @@ interface WelcomeFarewellFormProps {
 }
 declare function WelcomeFarewellForm({ welcomeMessage, onWelcomeMessageChange, farewellMessage, onFarewellMessageChange, onSave, saving, saveSuccess, welcomePlaceholders, farewellPlaceholders, labels: labelsOverride, }: WelcomeFarewellFormProps): react.JSX.Element;
 
+declare const TEMPLATE_SETTINGS_TAB: {
+    readonly SELECT: "select";
+    readonly CREATE: "create";
+};
+type TemplateSettingsTab = (typeof TEMPLATE_SETTINGS_TAB)[keyof typeof TEMPLATE_SETTINGS_TAB];
+interface WhatsAppTemplatesSettingsLabels {
+    selectTab: string;
+    createTab: string;
+}
+declare const DEFAULT_TEMPLATES_SETTINGS_LABELS: WhatsAppTemplatesSettingsLabels;
+interface WhatsAppTemplatesSettingsProps {
+    templates: WhatsAppTemplateSummary[];
+    loadingTemplates?: boolean;
+    templatesError?: boolean;
+    onRefreshTemplates?: () => void;
+    selectedTemplateName: string;
+    onSelectTemplate: (name: string, template: WhatsAppTemplateSummary | undefined) => void;
+    variables: string[];
+    onVariablesChange: (variables: string[]) => void;
+    availableVariables?: WhatsAppTemplateVariableSuggestion[];
+    saving?: boolean;
+    saveSuccess?: boolean;
+    onSave: (event: FormEvent) => void;
+    /** Ausente = host não sabe criar template; a aba de criação nem aparece. */
+    create?: {
+        value: WhatsAppCreateTemplateState;
+        onChange: (value: WhatsAppCreateTemplateState) => void;
+        onSubmit: (event: FormEvent) => void;
+        submitting?: boolean;
+        result?: WhatsAppCreateTemplateResult | null;
+    };
+    labels?: Partial<WhatsAppTemplatesSettingsLabels>;
+}
+declare function WhatsAppTemplatesSettings({ labels: labelsOverride, create, ...settingsProps }: WhatsAppTemplatesSettingsProps): react.JSX.Element;
+
 interface TopicItem {
     key: string;
     label: string;
@@ -515,7 +720,7 @@ interface UseConversationDocumentsResult {
     error: Error | undefined;
     refetch: () => Promise<void>;
 }
-declare function useConversationDocuments(conversationId: string, params?: UseConversationDocumentsParams): UseConversationDocumentsResult;
+declare function useConversationDocuments(conversationId: string | undefined, params?: UseConversationDocumentsParams): UseConversationDocumentsResult;
 
 type ConversationRealtimeHandler = (event: MessageEvent) => void;
 declare function useConversationRealtime(conversationId: string | undefined, onEvent: ConversationRealtimeHandler): void;
@@ -539,4 +744,4 @@ interface AsyncResourceState<T> {
     refetch: () => Promise<void>;
 }
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type ConversationDocument, ConversationListItem, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, type ConversationRealtimeHandler, type ConversationSummary, ConversationWallpaper, type ConversationWallpaperProps, type ConversationsApi, type ConversationsFeatures, ConversationsProvider, type ConversationsTheme, type ConversationsUIConfig, DateDivider, type DateDividerProps, EmojiPicker, type EmojiPickerProps, FileIcon, type FileIconProps, Lightbox, type LightboxProps, MediaRenderer, type MediaRendererProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, type ResolveMediaUrl, type SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, StatusTicks, type StatusTicksProps, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, formatFileSize, formatPhone, formatTimestamp, htmlToWA, parseWhatsAppFormatting, phoneInitials, toast, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useDarkMode, useGlobalRealtime, useToast, useWaitingNotifications, waToHTML, waToHTMLInline };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, type BuildTranscriptTextParams, CHANNEL_BRAND_COLOR, CONVERSATION_WINDOW, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, ConversationListItem, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsProvider, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DateDivider, type DateDividerClassNames, type DateDividerProps, EmojiPicker, type EmojiPickerProps, FileIcon, type FileIconProps, Lightbox, type LightboxProps, MediaRenderer, type MediaRendererProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, NARROW_MAX_WIDTH_PX, type ResolveMediaUrl, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, type TemplateSettingsTab, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, buildTranscriptFilename, buildTranscriptText, downloadTextFile, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, toast, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useDarkMode, useGlobalRealtime, useIsDarkTheme, useIsNarrow, useToast, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };