@adatechnology/conversations-ui 0.1.0-rc.16 → 0.1.0-rc.18

package/dist/{chunk-RNCZO2FM.js → chunk-OIDAIVCH.js}

@@ -321,12 +321,35 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
   const lazy = useLazyMediaUrl(message, onResolveUrl);
   const src = eagerSrc ?? lazy.url;
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl);
-  const lazyButtonClass = "text-xs text-blue-600 underline flex items-center gap-1";
+  function LazyMediaButton({ icon, label }) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: lazy.load,
+        disabled: lazy.loading,
+        className: "flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white", children: icon }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-gray-600 dark:text-gray-300", children: label })
+        ]
+      }
+    );
+  }
   switch (message.type) {
     case "image":
     case "sticker": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+              /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
+            ] }),
+            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage
+          }
+        );
       }
       return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
         /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
@@ -336,7 +359,16 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
     }
     case "video": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
+              /* @__PURE__ */ jsx5("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+            ] }),
+            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo
+          }
+        );
       }
       return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("video", { src, className: "w-full max-h-80 rounded-lg", controls: true, preload: "metadata", children: /* @__PURE__ */ jsx5("track", { kind: "captions" }) }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
         /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
@@ -345,7 +377,13 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
     }
     case "audio": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "translate-x-0.5", children: /* @__PURE__ */ jsx5("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
+            label: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio
+          }
+        );
       }
       return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5(AudioPlayer, { src, isMine: message.direction === "outbound" }) : /* @__PURE__ */ jsx5("div", { className: "h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs", children: bubble.mediaUnavailable }) });
     }

package/dist/index.d.ts

@@ -560,6 +560,8 @@ interface ConversationContextEntry {
 interface ConversationContextPanelLabels {
     title: string;
     empty: string;
+    collapse: string;
+    expand: string;
 }
 declare const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels;
 interface ConversationContextPanelClassNames {
@@ -570,11 +572,18 @@ interface ConversationContextPanelClassNames {
 }
 interface ConversationContextPanelProps {
     entries: readonly ConversationContextEntry[];
+    /**
+     * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+     *
+     * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+     * painel ocupa altura mostrando quase só travessões, e empurra a conversa — que é o que se veio ver.
+     */
+    defaultOpen?: boolean;
     labels?: Partial<ConversationContextPanelLabels>;
     className?: string;
     classNames?: Partial<ConversationContextPanelClassNames>;
 }
-declare function ConversationContextPanel({ entries, labels: labelsOverride, className, classNames, }: ConversationContextPanelProps): react.JSX.Element;
+declare function ConversationContextPanel({ entries, defaultOpen, labels: labelsOverride, className, classNames, }: ConversationContextPanelProps): react.JSX.Element;
 
 interface WindowExpiredNoticeLabels {
     title: string;

package/dist/index.js

@@ -44,7 +44,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-RNCZO2FM.js";
+} from "./chunk-OIDAIVCH.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -1337,10 +1337,13 @@ function useIsNarrow() {
 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."
+  empty: "Nada coletado ainda nesta conversa.",
+  collapse: "fechar",
+  expand: "abrir"
 };
 function ConversationContextPanel({
   entries,
+  defaultOpen,
   labels: labelsOverride,
   className,
   classNames
@@ -1349,7 +1352,7 @@ function ConversationContextPanel({
   const filled = entries.filter((entry) => Boolean(entry.value));
   const isNarrow = useIsNarrow();
   const [manualOpen, setManualOpen] = useState7(void 0);
-  const open = manualOpen ?? (!isNarrow && filled.length > 0);
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0);
   return /* @__PURE__ */ jsxs11("section", { className: cn("border-b", classNames?.root, className), children: [
     /* @__PURE__ */ jsxs11(
       "button",
@@ -1357,7 +1360,11 @@ function ConversationContextPanel({
         type: "button",
         onClick: () => setManualOpen(!open),
         "aria-expanded": open,
-        className: cn("flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium", classNames?.toggle),
+        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
+        ),
         children: [
           /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-xs", children: open ? "\u25BE" : "\u25B8" }),
           /* @__PURE__ */ jsx13("span", { children: labels.title }),
@@ -1365,7 +1372,8 @@ function ConversationContextPanel({
             filled.length,
             "/",
             entries.length
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "ml-auto text-xs text-gray-500", children: open ? labels.collapse : labels.expand })
         ]
       }
     ),

package/dist/preview/index.d.ts

@@ -120,9 +120,14 @@ declare const PREVIEW_DOCUMENTS: Readonly<Record<string, readonly ConversationDo
  * Assina com WebCrypto porque `node:crypto` não existe no navegador. Os builders vêm dos contratos
  * (isomórficos) justamente para que o mesmo payload seja montado nos dois runtimes.
  *
- * ⚠️ Isto carrega o app secret de DESENVOLVIMENTO no bundle. Só existe para o docker local, e
- * `assertPreviewEnvironment` recusa rodar em produção — um segredo de dev vazado é irrelevante,
- * mas o hábito de embarcar segredo em frontend não é.
+ * ⚠️ SOMENTE EXECUÇÃO LOCAL. Isto carrega o app secret no bundle, e bundle é público onde quer que
+ * seja servido — em qualquer ambiente com URL acessível (homologação inclusive) usar esta fábrica
+ * equivale a publicar o segredo, e quem o tiver forja webhooks válidos daquele app da Meta: injeta
+ * mensagem de qualquer número e dispara os fluxos. `assertPreviewEnvironment` barra produção, mas
+ * homologação passaria, então a barreira não basta.
+ *
+ * Para qualquer ambiente publicado use `createPreviewBridgeClient`: o navegador manda a intenção e
+ * o servidor assina com o segredo que ele já tem.
  */
 
 type PreviewWebhookClient = {
@@ -206,6 +211,67 @@ type PreviewUploadedMedia = {
 declare function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'];
 declare function ConversationPreview({ client, sse, conversationId, loadMessages, placeholder, pollIntervalMs, uploadMedia, }: ConversationPreviewProps): react.JSX.Element;
 
+/**
+ * Cliente do preview que NÃO carrega segredo: em vez de montar e assinar o payload da Meta no
+ * navegador, manda um comando semântico (`{ kind: 'text', text }`) para uma rota do próprio host,
+ * autenticada pela sessão que o painel já tem. Quem monta o payload e assina é o servidor, com o
+ * app secret que nunca sai de lá.
+ *
+ * Por que esta fábrica existe ao lado de `createPreviewWebhookClient`: assinar no navegador exige o
+ * app secret dentro do bundle, e bundle é público por definição — em qualquer ambiente com URL
+ * acessível isso é o mesmo que publicar o segredo. Com o segredo vazado, qualquer um forja webhooks
+ * válidos daquele app: injeta mensagens de qualquer número e dispara os fluxos. `createPreviewWebhook
+ * Client` continua servindo para execução puramente local (docker de dev, onde o bundle não é
+ * servido para ninguém); para qualquer ambiente publicado, a ponte é o caminho.
+ *
+ * O pacote não decide autenticação: o host injeta `sendCommand` (ou `headers` + `fetchImplementation`),
+ * porque token, cookie e cabeçalho de sessão são do produto, não da biblioteca.
+ */
+
+/**
+ * Comando semântico entregue ao host. É deliberadamente o QUE o cliente fez, não o payload da Meta:
+ * se o navegador mandasse o payload pronto, a rota viraria um injetor de webhook arbitrário para
+ * quem tivesse sessão. Mandando a intenção, o servidor é quem escolhe a forma.
+ */
+type PreviewInboundCommand = {
+    readonly kind: 'text';
+    readonly from: string;
+    readonly text: string;
+} | {
+    readonly kind: 'buttonReply';
+    readonly from: string;
+    readonly reply: InteractiveReplyOption;
+} | {
+    readonly kind: 'listReply';
+    readonly from: string;
+    readonly reply: InteractiveReplyOption;
+} | {
+    readonly kind: 'audio';
+    readonly from: string;
+    readonly mediaId: string;
+} | ({
+    readonly kind: 'media';
+    readonly from: string;
+} & SendPreviewMediaParams);
+type SendPreviewInboundCommand = (command: PreviewInboundCommand) => Promise<void>;
+declare class PreviewBridgeRejectedError extends Error {
+    readonly status: number;
+    constructor(status: number);
+}
+type CreatePreviewBridgeClientParams = {
+    readonly from: string;
+    /**
+     * Entrega o comando. Use quando o host já tem um cliente HTTP com sessão, interceptors e refresh
+     * de token — reimplementar isso aqui só duplicaria a autenticação do produto.
+     */
+    readonly sendCommand?: SendPreviewInboundCommand;
+    /** Alternativa a `sendCommand` para hosts sem cliente HTTP próprio. */
+    readonly endpointUrl?: string;
+    readonly headers?: Readonly<Record<string, string>>;
+    readonly fetchImplementation?: typeof fetch;
+};
+declare function createPreviewBridgeClient(params: CreatePreviewBridgeClientParams): PreviewWebhookClient;
+
 /**
  * Roteiro que mantém o preview vivo: sem tráfego chegando, a inbox é uma tela estática e as
  * transições que o atendente precisa testar (fila de espera enchendo, handoff, devolução ao bot)
@@ -304,4 +370,4 @@ type MediaTypesPreviewProps = {
 };
 declare function MediaTypesPreview({ conversationId, className, }: MediaTypesPreviewProps): react.JSX.Element;
 
-export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, type PreviewEmission, PreviewInProductionError, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };
+export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, PreviewBridgeRejectedError, type PreviewEmission, PreviewInProductionError, type PreviewInboundCommand, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewInboundCommand, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewBridgeClient, createPreviewMediaResolver, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-RNCZO2FM.js";
+} from "../chunk-OIDAIVCH.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -938,7 +938,7 @@ function ConversationPreview({
     return () => clearInterval(timer);
   }, [pollIntervalMs, refresh]);
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [messages]);
   const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal]);
   async function refreshWithFollowUps() {
@@ -1092,6 +1092,43 @@ function createPreviewWebhookClient(params) {
   };
 }
 
+// src/preview/createPreviewBridgeClient.ts
+var PreviewBridgeRejectedError = class extends Error {
+  constructor(status) {
+    super(`A rota de preview do host recusou a entrega (HTTP ${status}).`);
+    this.status = status;
+    this.name = "PreviewBridgeRejectedError";
+  }
+};
+function buildFetchSender(params) {
+  const endpointUrl = params.endpointUrl;
+  if (!endpointUrl) {
+    throw new Error("createPreviewBridgeClient exige `sendCommand` ou `endpointUrl`.");
+  }
+  return async (command) => {
+    const performRequest = params.fetchImplementation ?? fetch;
+    const response = await performRequest(endpointUrl, {
+      method: "POST",
+      // `credentials` fica com o host via `headers`/`fetchImplementation`: sessão por cookie e por
+      // bearer não convivem numa escolha default sem quebrar um dos dois.
+      headers: { "content-type": "application/json", ...params.headers },
+      body: JSON.stringify(command)
+    });
+    if (!response.ok) throw new PreviewBridgeRejectedError(response.status);
+  };
+}
+function createPreviewBridgeClient(params) {
+  const send = params.sendCommand ?? buildFetchSender(params);
+  const from = params.from;
+  return {
+    sendText: (text) => send({ kind: "text", from, text }),
+    sendButtonReply: (reply) => send({ kind: "buttonReply", from, reply }),
+    sendListReply: (reply) => send({ kind: "listReply", from, reply }),
+    sendAudio: (mediaId) => send({ kind: "audio", from, mediaId }),
+    sendMedia: (media) => send({ kind: "media", from, ...media })
+  };
+}
+
 // src/preview/startPreviewScript.ts
 var DEFAULT_PREVIEW_SCRIPT = [
   (store) => store.appendMessage({
@@ -1189,6 +1226,7 @@ export {
   PREVIEW_DOCUMENTS,
   PREVIEW_FILE_SAMPLES,
   PREVIEW_MESSAGES,
+  PreviewBridgeRejectedError,
   PreviewInProductionError,
   PreviewWebhookRejectedError,
   assertPreviewEnvironment,
@@ -1196,6 +1234,7 @@ export {
   createMockConversationsApi,
   createMockEventSource,
   createMockSSEProvider,
+  createPreviewBridgeClient,
   createPreviewMediaResolver,
   createPreviewStore,
   createPreviewWebhookClient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.16",
+  "version": "0.1.0-rc.18",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/ConversationContextPanel.tsx

@@ -21,11 +21,15 @@ export interface ConversationContextEntry {
 export interface ConversationContextPanelLabels {
   title: string
   empty: string
+  collapse: string
+  expand: string
 }
 
 export const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels = {
   title: '📋 Suas Seleções',
   empty: 'Nada coletado ainda nesta conversa.',
+  collapse: 'fechar',
+  expand: 'abrir',
 }
 
 export interface ConversationContextPanelClassNames {
@@ -37,6 +41,13 @@ export interface ConversationContextPanelClassNames {
 
 export interface ConversationContextPanelProps {
   entries: readonly ConversationContextEntry[]
+  /**
+   * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+   *
+   * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+   * painel ocupa altura mostrando quase só travessões, e empurra a conversa — que é o que se veio ver.
+   */
+  defaultOpen?: boolean
   labels?: Partial<ConversationContextPanelLabels>
   className?: string
   classNames?: Partial<ConversationContextPanelClassNames>
@@ -44,6 +55,7 @@ export interface ConversationContextPanelProps {
 
 export function ConversationContextPanel({
   entries,
+  defaultOpen,
   labels: labelsOverride,
   className,
   classNames,
@@ -61,7 +73,7 @@ export function ConversationContextPanel({
   const [manualOpen, setManualOpen] = useState<boolean | undefined>(undefined)
   // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa. O
   // contador no cabeçalho já entrega a informação de relance.
-  const open = manualOpen ?? (!isNarrow && filled.length > 0)
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0)
 
   return (
     <section className={cn('border-b', classNames?.root, className)}>
@@ -69,7 +81,11 @@ export function ConversationContextPanel({
         type="button"
         onClick={() => setManualOpen(!open)}
         aria-expanded={open}
-        className={cn('flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium', classNames?.toggle)}
+        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,
+        )}
       >
         <span aria-hidden className="text-xs">
           {open ? '▾' : '▸'}
@@ -78,6 +94,11 @@ export function ConversationContextPanel({
         <span className={cn('rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700', classNames?.counter)}>
           {filled.length}/{entries.length}
         </span>
+        {/* Rótulo escrito na ponta direita: o caret sozinho não dizia que a linha inteira fecha o
+            painel — a pergunta "cadê o botão de fechar?" veio daí. */}
+        <span aria-hidden className="ml-auto text-xs text-gray-500">
+          {open ? labels.collapse : labels.expand}
+        </span>
       </button>
 
       {open ? (

package/src/MediaRenderer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { AudioPlayer } from './AudioPlayer'
 import { FileIcon } from './FileIcon'
 import { useConversationLocales } from './ConversationLocalesProvider'
@@ -84,16 +84,35 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
   const src = eagerSrc ?? lazy.url
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl)
 
-  const lazyButtonClass = 'text-xs text-blue-600 underline flex items-center gap-1'
+  /**
+   * O carregamento sob demanda continua sendo um botão, mas com a forma da mídia que ele vai virar
+   * — um link sublinhado no meio da conversa lê como texto da mensagem, não como controle, e é a
+   * única bolha que não se parece com o que contém.
+   */
+  function LazyMediaButton({ icon, label }: { icon: ReactNode; label: string }) {
+    return (
+      <button
+        onClick={lazy.load}
+        disabled={lazy.loading}
+        className="flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15"
+      >
+        <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white">
+          {icon}
+        </span>
+        <span className="truncate text-xs text-gray-600 dark:text-gray-300">{label}</span>
+      </button>
+    )
+  }
 
   switch (message.type) {
     case 'image':
     case 'sticker': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
+          />
         )
       }
       return (
@@ -111,9 +130,10 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
     case 'video': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
+          />
         )
       }
       return (
@@ -131,9 +151,10 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
     case 'audio': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="translate-x-0.5"><polygon points="5 3 19 12 5 21 5 3" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
+          />
         )
       }
       return (

package/src/preview/ConversationPreview.tsx

@@ -188,7 +188,10 @@ export function ConversationPreview({
   }, [pollIntervalMs, refresh])
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+    // `block: 'nearest'` e não o padrão ('start'): o padrão alinha o elemento ao topo da área
+    // visível MAIS PRÓXIMA que role — e quando o container do preview não tem altura limitada, essa
+    // área é a PÁGINA. O efeito era a tela inteira saltar para baixo ao abrir/usar o simulador.
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
   }, [messages])
 
   const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal])

package/src/preview/createPreviewBridgeClient.test.ts

@@ -0,0 +1,92 @@
+/**
+ * O que estes testes protegem é a propriedade de segurança da ponte: nenhum caminho pode voltar a
+ * exigir segredo no navegador, e o corpo enviado tem que ser a INTENÇÃO — se um refactor passar a
+ * mandar payload da Meta montado no cliente, a rota do host vira injetor de webhook arbitrário.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { createPreviewBridgeClient, PreviewBridgeRejectedError } from './createPreviewBridgeClient'
+import type { PreviewInboundCommand } from './createPreviewBridgeClient'
+
+const FROM = '5511999999999'
+
+function createRecordingClient() {
+  const commands: PreviewInboundCommand[] = []
+  const client = createPreviewBridgeClient({
+    from: FROM,
+    sendCommand: async (command) => {
+      commands.push(command)
+    },
+  })
+  return { client, commands }
+}
+
+describe('createPreviewBridgeClient', () => {
+  it('entrega a intenção do cliente, carimbando o remetente em cada comando', async () => {
+    const { client, commands } = createRecordingClient()
+
+    await client.sendText('quero simular')
+    await client.sendButtonReply({ id: 'hab_pronto', title: 'Imóvel pronto' })
+    await client.sendListReply({ id: 'faixa_2', title: 'Faixa 2' })
+    await client.sendAudio('media-1')
+    await client.sendMedia({ mediaType: 'document', mediaId: 'media-2', filename: 'rg.pdf' })
+
+    expect(commands).toEqual([
+      { kind: 'text', from: FROM, text: 'quero simular' },
+      { kind: 'buttonReply', from: FROM, reply: { id: 'hab_pronto', title: 'Imóvel pronto' } },
+      { kind: 'listReply', from: FROM, reply: { id: 'faixa_2', title: 'Faixa 2' } },
+      { kind: 'audio', from: FROM, mediaId: 'media-1' },
+      { kind: 'media', from: FROM, mediaType: 'document', mediaId: 'media-2', filename: 'rg.pdf' },
+    ])
+  })
+
+  it('nunca embute assinatura nem segredo no que sai do navegador', async () => {
+    const { client, commands } = createRecordingClient()
+
+    await client.sendText('oi')
+
+    const serialized = JSON.stringify(commands[0])
+    expect(serialized).not.toMatch(/sha256=/)
+    expect(serialized).not.toMatch(/secret/i)
+    expect(commands[0]).not.toHaveProperty('entry')
+  })
+
+  it('posta no endpoint do host com os headers de sessão que o host injeta', async () => {
+    const calls: Array<{ url: string; init: RequestInit }> = []
+    const client = createPreviewBridgeClient({
+      from: FROM,
+      endpointUrl: 'https://host.test/api/conversations/preview/inbound',
+      headers: { authorization: 'Bearer token-do-painel' },
+      fetchImplementation: (async (url: string, init: RequestInit) => {
+        calls.push({ url, init })
+        return { ok: true } as Response
+      }) as unknown as typeof fetch,
+    })
+
+    await client.sendText('oi')
+
+    expect(calls[0]?.url).toBe('https://host.test/api/conversations/preview/inbound')
+    expect(calls[0]?.init.method).toBe('POST')
+    expect(calls[0]?.init.headers).toMatchObject({
+      'content-type': 'application/json',
+      authorization: 'Bearer token-do-painel',
+    })
+    expect(JSON.parse(String(calls[0]?.init.body))).toEqual({ kind: 'text', from: FROM, text: 'oi' })
+  })
+
+  it('converte recusa do host em erro tipado, para o painel poder mostrar o motivo', async () => {
+    const client = createPreviewBridgeClient({
+      from: FROM,
+      endpointUrl: 'https://host.test/preview',
+      fetchImplementation: (async () => ({ ok: false, status: 403 }) as Response) as unknown as typeof fetch,
+    })
+
+    await expect(client.sendText('oi')).rejects.toBeInstanceOf(PreviewBridgeRejectedError)
+    await expect(client.sendText('oi')).rejects.toThrow(/403/)
+  })
+
+  it('recusa configuração sem forma de entregar, em vez de falhar só no primeiro envio', () => {
+    expect(() => createPreviewBridgeClient({ from: FROM })).toThrow(/sendCommand.*endpointUrl/)
+  })
+})

package/src/preview/createPreviewBridgeClient.ts

@@ -0,0 +1,88 @@
+/**
+ * Cliente do preview que NÃO carrega segredo: em vez de montar e assinar o payload da Meta no
+ * navegador, manda um comando semântico (`{ kind: 'text', text }`) para uma rota do próprio host,
+ * autenticada pela sessão que o painel já tem. Quem monta o payload e assina é o servidor, com o
+ * app secret que nunca sai de lá.
+ *
+ * Por que esta fábrica existe ao lado de `createPreviewWebhookClient`: assinar no navegador exige o
+ * app secret dentro do bundle, e bundle é público por definição — em qualquer ambiente com URL
+ * acessível isso é o mesmo que publicar o segredo. Com o segredo vazado, qualquer um forja webhooks
+ * válidos daquele app: injeta mensagens de qualquer número e dispara os fluxos. `createPreviewWebhook
+ * Client` continua servindo para execução puramente local (docker de dev, onde o bundle não é
+ * servido para ninguém); para qualquer ambiente publicado, a ponte é o caminho.
+ *
+ * O pacote não decide autenticação: o host injeta `sendCommand` (ou `headers` + `fetchImplementation`),
+ * porque token, cookie e cabeçalho de sessão são do produto, não da biblioteca.
+ */
+
+import type { InboundMediaType, InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing'
+import type { PreviewWebhookClient, SendPreviewMediaParams } from './createPreviewWebhookClient'
+
+/**
+ * Comando semântico entregue ao host. É deliberadamente o QUE o cliente fez, não o payload da Meta:
+ * se o navegador mandasse o payload pronto, a rota viraria um injetor de webhook arbitrário para
+ * quem tivesse sessão. Mandando a intenção, o servidor é quem escolhe a forma.
+ */
+export type PreviewInboundCommand =
+  | { readonly kind: 'text'; readonly from: string; readonly text: string }
+  | { readonly kind: 'buttonReply'; readonly from: string; readonly reply: InteractiveReplyOption }
+  | { readonly kind: 'listReply'; readonly from: string; readonly reply: InteractiveReplyOption }
+  | { readonly kind: 'audio'; readonly from: string; readonly mediaId: string }
+  | ({ readonly kind: 'media'; readonly from: string } & SendPreviewMediaParams)
+
+export type SendPreviewInboundCommand = (command: PreviewInboundCommand) => Promise<void>
+
+export class PreviewBridgeRejectedError extends Error {
+  constructor(readonly status: number) {
+    super(`A rota de preview do host recusou a entrega (HTTP ${status}).`)
+    this.name = 'PreviewBridgeRejectedError'
+  }
+}
+
+export type CreatePreviewBridgeClientParams = {
+  readonly from: string
+  /**
+   * Entrega o comando. Use quando o host já tem um cliente HTTP com sessão, interceptors e refresh
+   * de token — reimplementar isso aqui só duplicaria a autenticação do produto.
+   */
+  readonly sendCommand?: SendPreviewInboundCommand
+  /** Alternativa a `sendCommand` para hosts sem cliente HTTP próprio. */
+  readonly endpointUrl?: string
+  readonly headers?: Readonly<Record<string, string>>
+  readonly fetchImplementation?: typeof fetch
+}
+
+function buildFetchSender(params: CreatePreviewBridgeClientParams): SendPreviewInboundCommand {
+  const endpointUrl = params.endpointUrl
+  if (!endpointUrl) {
+    throw new Error('createPreviewBridgeClient exige `sendCommand` ou `endpointUrl`.')
+  }
+
+  return async (command) => {
+    const performRequest = params.fetchImplementation ?? fetch
+    const response = await performRequest(endpointUrl, {
+      method: 'POST',
+      // `credentials` fica com o host via `headers`/`fetchImplementation`: sessão por cookie e por
+      // bearer não convivem numa escolha default sem quebrar um dos dois.
+      headers: { 'content-type': 'application/json', ...params.headers },
+      body: JSON.stringify(command),
+    })
+
+    if (!response.ok) throw new PreviewBridgeRejectedError(response.status)
+  }
+}
+
+export function createPreviewBridgeClient(params: CreatePreviewBridgeClientParams): PreviewWebhookClient {
+  const send = params.sendCommand ?? buildFetchSender(params)
+  const from = params.from
+
+  return {
+    sendText: (text) => send({ kind: 'text', from, text }),
+    sendButtonReply: (reply) => send({ kind: 'buttonReply', from, reply }),
+    sendListReply: (reply) => send({ kind: 'listReply', from, reply }),
+    sendAudio: (mediaId) => send({ kind: 'audio', from, mediaId }),
+    sendMedia: (media) => send({ kind: 'media', from, ...media }),
+  }
+}
+
+export type { InboundMediaType }

package/src/preview/createPreviewWebhookClient.ts

@@ -6,9 +6,14 @@
  * Assina com WebCrypto porque `node:crypto` não existe no navegador. Os builders vêm dos contratos
  * (isomórficos) justamente para que o mesmo payload seja montado nos dois runtimes.
  *
- * ⚠️ Isto carrega o app secret de DESENVOLVIMENTO no bundle. Só existe para o docker local, e
- * `assertPreviewEnvironment` recusa rodar em produção — um segredo de dev vazado é irrelevante,
- * mas o hábito de embarcar segredo em frontend não é.
+ * ⚠️ SOMENTE EXECUÇÃO LOCAL. Isto carrega o app secret no bundle, e bundle é público onde quer que
+ * seja servido — em qualquer ambiente com URL acessível (homologação inclusive) usar esta fábrica
+ * equivale a publicar o segredo, e quem o tiver forja webhooks válidos daquele app da Meta: injeta
+ * mensagem de qualquer número e dispara os fluxos. `assertPreviewEnvironment` barra produção, mas
+ * homologação passaria, então a barreira não basta.
+ *
+ * Para qualquer ambiente publicado use `createPreviewBridgeClient`: o navegador manda a intenção e
+ * o servidor assina com o segredo que ele já tem.
  */
 
 import {

package/src/preview/index.ts

@@ -45,6 +45,13 @@ export type {
   SendPreviewMediaParams,
 } from './createPreviewWebhookClient'
 
+export { createPreviewBridgeClient, PreviewBridgeRejectedError } from './createPreviewBridgeClient'
+export type {
+  CreatePreviewBridgeClientParams,
+  PreviewInboundCommand,
+  SendPreviewInboundCommand,
+} from './createPreviewBridgeClient'
+
 export { startPreviewScript, DEFAULT_PREVIEW_SCRIPT } from './startPreviewScript'
 export type { PreviewScriptStep, StartPreviewScriptParams } from './startPreviewScript'
 export { PREVIEW_FILE_SAMPLES, resolvePreviewFileSample } from './previewFileSamples'