@adatechnology/conversations-ui 0.1.0-rc.17 → 0.1.0-rc.19

package/dist/flows/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { NodeProps } from '@xyflow/react';
 import { LucideIcon } from 'lucide-react';
 import { FlowConditionOperator, FlowGraphData, FlowNodeData, FlowNodeType, FlowQuestionType, FlowActionKind } from '@adatechnology/meta-whatsapp-contracts';
@@ -9,6 +10,7 @@ declare const BUILT_IN_ACTION_KINDS: {
     readonly HANDOFF: "handoff";
     readonly RATE_LIMITED_HANDOFF: "rate_limited_handoff";
     readonly SEND_PRODUCT_LIST: "send_product_list";
+    readonly SEND_MEDIA: "send_media";
 };
 declare const CROSS_FLOW_PREFIX = "flow:";
 declare const isCrossFlowTarget: (target: string) => boolean;
@@ -109,6 +111,8 @@ interface FlowEditorLabels {
         conditionTrue: string;
         conditionFalse: string;
         conditionVariableMissing: string;
+        media: string;
+        mediaUnavailable: string;
     };
     palette: {
         title: string;
@@ -233,14 +237,22 @@ interface FlowNodePanelProps {
     onChange: (updated: FlowNodeData) => void;
     onDelete: (nodeId: string) => void;
     labels?: Partial<FlowEditorLabels>;
+    /**
+     * Seletor de arquivos do nó `send_media`, renderizado no lugar da mensagem direta.
+     *
+     * Slot, e não uma lista de arquivos por prop, porque a biblioteca é do host: upload, permissão e
+     * URL assinada são dele, e o painel não tem como buscar nada. Ausente, o nó continua editável —
+     * só não dá para anexar por aqui.
+     */
+    renderMediaPicker?: (node: FlowNodeData) => ReactNode;
 }
-declare function FlowNodePanel({ graph, node, issues, otherFlows, onClose, onChange, onDelete, labels: labelsOverride, }: FlowNodePanelProps): react.JSX.Element;
+declare function FlowNodePanel({ graph, node, issues, otherFlows, onClose, onChange, onDelete, labels: labelsOverride, renderMediaPicker, }: FlowNodePanelProps): react.JSX.Element;
 
 interface FlowWhatsAppPreviewProps {
     body: string;
     options?: [string, string][];
     labels?: FlowEditorLabels['nodePanel'];
 }
-declare function FlowWhatsAppPreview({ body, options, labels }: FlowWhatsAppPreviewProps): react.JSX.Element;
+declare function FlowWhatsAppPreview({ body, options, labels, }: FlowWhatsAppPreviewProps): react.JSX.Element;
 
 export { BUILT_IN_ACTION_KINDS, CONDITION_OPERATORS, CROSS_FLOW_PREFIX, type CollectionChain, DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels, FlowGroupFrame, type FlowGroupFrameData, FlowGroupHeader, type FlowGroupHeaderData, FlowMapCanvas, type FlowMapCanvasProps, FlowMapNode, type FlowMapNodeData, FlowNodeCard, type FlowNodeCardData, FlowNodePanel, type FlowNodePanelProps, FlowPalette, type FlowPaletteActionOption, type FlowPaletteProps, FlowPortalNode, type FlowPortalNodeData, FlowWhatsAppPreview, type FlowWhatsAppPreviewProps, type GraphIssue, NODE_CARD_WIDTH, type NewNodeSpec, WHATSAPP_LIMITS, computeAutoLayout, computeFlowMapLayout, crossFlowKey, crossFlowTargetsOf, estimateNodeHeight, findCollectionChains, flowGroupFrameNodeTypes, flowGroupHeaderNodeTypes, flowMapNodeTypes, flowNodeTypes, flowPortalNodeTypes, isCrossFlowTarget, mergeFlowEditorLabels, nodeLabel, rendersAsButtons, slugifyNodeId, targetsOf, validateGraph };

package/dist/flows/index.js

@@ -5,7 +5,18 @@ import {
 
 // src/flows/FlowNodeCard.tsx
 import { Handle, Position } from "@xyflow/react";
-import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag } from "lucide-react";
+import {
+  MessageCircleQuestion,
+  GitBranch,
+  Zap,
+  ListTree,
+  Diamond,
+  AlertTriangle,
+  AlertCircle,
+  Headset,
+  Clock3,
+  ShoppingBag
+} from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NODE_TYPE_COLOR = {
   question: "border-blue-300 bg-blue-50 dark:bg-blue-950/40 dark:border-blue-800",
@@ -57,7 +68,13 @@ function sourceRows(node, labels) {
 }
 function SourceRow({ label, isDefault, handleId }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3", children: [
-    /* @__PURE__ */ jsx("span", { className: `text-xs truncate flex-1 ${isDefault ? "italic text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"}`, children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `text-xs truncate flex-1 ${isDefault ? "italic text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"}`,
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsx(
       Handle,
       {
@@ -132,7 +149,8 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
   actionKindLabels: {
     handoff: "Encaminhar para atendimento",
     rate_limited_handoff: "Encaminhar (limite de simula\xE7\xF5es atingido)",
-    send_product_list: "Enviar cat\xE1logo de produtos"
+    send_product_list: "Enviar cat\xE1logo de produtos",
+    send_media: "Enviar arquivos da biblioteca"
   },
   conditionOperatorLabels: {
     ">": "maior que",
@@ -187,7 +205,9 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     conditionValue: "Valor de compara\xE7\xE3o",
     conditionTrue: "Se verdadeiro \u2192",
     conditionFalse: "Se falso \u2192",
-    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192"
+    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192",
+    media: "Arquivos enviados neste ponto",
+    mediaUnavailable: "A biblioteca de arquivos n\xE3o est\xE1 dispon\xEDvel neste painel."
   },
   palette: {
     title: "Adicionar ao fluxo",
@@ -266,12 +286,9 @@ import { ReactFlow, Background, Controls, MarkerType } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 // src/flows/flowGraph.ts
+import { FLOW_ACTION_KIND } from "@adatechnology/meta-whatsapp-contracts";
 var CONDITION_OPERATORS = [">", ">=", "<", "<=", "==", "!=", "contains"];
-var BUILT_IN_ACTION_KINDS = {
-  HANDOFF: "handoff",
-  RATE_LIMITED_HANDOFF: "rate_limited_handoff",
-  SEND_PRODUCT_LIST: "send_product_list"
-};
+var BUILT_IN_ACTION_KINDS = FLOW_ACTION_KIND;
 var CROSS_FLOW_PREFIX = "flow:";
 var isCrossFlowTarget = (target) => target.startsWith(CROSS_FLOW_PREFIX);
 var crossFlowKey = (target) => target.slice(CROSS_FLOW_PREFIX.length);
@@ -527,18 +544,20 @@ function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride })
   const isDark = useIsDarkTheme();
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
   const nodes = useMemo(
-    () => Object.values(graphs).map((g) => ({
-      id: g.key,
-      type: "flowMapNode",
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key)
-      }
-    })),
+    () => Object.values(graphs).map(
+      (g) => ({
+        id: g.key,
+        type: "flowMapNode",
+        position: positions[g.key] ?? { x: 0, y: 0 },
+        data: {
+          label: g.label,
+          nodeCount: Object.keys(g.nodes).length,
+          isRoot: g.key === rootKey,
+          labels,
+          onOpen: () => onOpenFlow(g.key)
+        }
+      })
+    ),
     [graphs, positions, rootKey, onOpenFlow, labels]
   );
   const edges = useMemo(() => {
@@ -590,8 +609,26 @@ function FlowGroupHeader({ data }) {
   const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onFocus, onClose } = data;
   return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap", children: [
     /* @__PURE__ */ jsx5("span", { children: label }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onFocus, title: labels.flowGroup.focus, className: "hover:text-blue-600 dark:hover:text-blue-400", children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, title: labels.flowGroup.close, className: "hover:text-red-600 dark:hover:text-red-400", children: /* @__PURE__ */ jsx5(X, { size: 12 }) })
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onFocus,
+        title: labels.flowGroup.focus,
+        className: "hover:text-blue-600 dark:hover:text-blue-400",
+        children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        title: labels.flowGroup.close,
+        className: "hover:text-red-600 dark:hover:text-red-400",
+        children: /* @__PURE__ */ jsx5(X, { size: 12 })
+      }
+    )
   ] });
 }
 var flowGroupHeaderNodeTypes = { flowGroupHeader: FlowGroupHeader };
@@ -753,7 +790,11 @@ import { Plus as Plus2, Trash2, Save, X as X2, AlertTriangle as AlertTriangle2,
 // src/flows/FlowWhatsAppPreview.tsx
 import { List } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel }) {
+function FlowWhatsAppPreview({
+  body,
+  options,
+  labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel
+}) {
   if (!body && (!options || options.length === 0)) {
     return /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic px-1", children: labels.previewPlaceholder });
   }
@@ -769,7 +810,14 @@ function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABEL
           labels.previewListButton
         ] }) })
       ] }),
-      hasOptions && usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx8("div", { className: "rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm", children: label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption }) }, id)) }),
+      hasOptions && usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: "rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm",
+          children: label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
+        },
+        id
+      )) }),
       hasOptions && !usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden", children: options.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100", children: [
         /* @__PURE__ */ jsx8("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" }),
         label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
@@ -831,17 +879,23 @@ function FlowNodePanel({
   onClose,
   onChange,
   onDelete,
-  labels: labelsOverride
+  labels: labelsOverride,
+  renderMediaPicker
 }) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
   const [draft, setDraft] = useState2(node);
   const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id);
   const isFixedLogic = draft.type === "entrada_choice";
   const isAction = draft.type === "action";
+  const isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA;
   const isCondition = draft.type === "condition";
   const isStart = graph.startNodeId === node.id;
   const nodeIssues = issues.filter((i) => i.nodeId === node.id);
-  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key) => !!key))];
+  const knownContextKeys = [
+    ...new Set(
+      Object.values(graph.nodes).map((n) => n.contextKey).filter((key) => !!key)
+    )
+  ];
   const conditionAnswerIds = isCondition ? ["true", "false"] : (draft.options ?? []).map(([id]) => id);
   function updateNextString(value) {
     setDraft((prev) => ({ ...prev, next: value }));
@@ -868,7 +922,10 @@ function FlowNodePanel({
     });
   }
   function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]] }));
+    setDraft((prev) => ({
+      ...prev,
+      options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]]
+    }));
   }
   function removeOption(index) {
     setDraft((prev) => ({ ...prev, options: (prev.options ?? []).filter((_, i) => i !== index) }));
@@ -891,7 +948,14 @@ function FlowNodePanel({
       isCondition && /* @__PURE__ */ jsx9("p", { className: "text-xs text-cyan-700 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-950/30 rounded-lg p-2", children: labels.nodePanel.conditionNotice }),
       draft.contextKey && /* @__PURE__ */ jsxs8("div", { children: [
         /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.contextKey }),
-        /* @__PURE__ */ jsx9("input", { value: draft.contextKey, disabled: true, className: "w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" })
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            value: draft.contextKey,
+            disabled: true,
+            className: "w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500"
+          }
+        )
       ] }),
       !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsxs8("div", { children: [
         /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.questionType }),
@@ -935,7 +999,10 @@ function FlowNodePanel({
             "select",
             {
               value: draft.conditionOperator ?? ">",
-              onChange: (e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value })),
+              onChange: (e) => setDraft((prev) => ({
+                ...prev,
+                conditionOperator: e.target.value
+              })),
               className: `w-full mt-1 ${SELECT_CLASSNAME}`,
               children: CONDITION_OPERATORS.map((operator) => /* @__PURE__ */ jsx9("option", { value: operator, children: labels.conditionOperatorLabels[operator] ?? operator }, operator))
             }
@@ -963,7 +1030,11 @@ function FlowNodePanel({
           labels
         }
       ),
-      isAction && draft.actionKind !== "send_product_list" && /* @__PURE__ */ jsx9(
+      isSendMedia && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.media }),
+        /* @__PURE__ */ jsx9("div", { className: "mt-1", children: renderMediaPicker?.(node) ?? /* @__PURE__ */ jsx9("p", { className: "text-xs text-gray-400", children: labels.nodePanel.mediaUnavailable }) })
+      ] }),
+      isAction && draft.actionKind !== "send_product_list" && !isSendMedia && /* @__PURE__ */ jsx9(
         WhatsAppTextField,
         {
           label: labels.nodePanel.directMessage,
@@ -1053,11 +1124,18 @@ function FlowNodePanel({
       ] })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
-      /* @__PURE__ */ jsxs8("button", { onClick: () => onChange(draft), className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", children: [
-        /* @__PURE__ */ jsx9(Save, { size: 14 }),
-        " ",
-        labels.nodePanel.save
-      ] }),
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          onClick: () => onChange(draft),
+          className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700",
+          children: [
+            /* @__PURE__ */ jsx9(Save, { size: 14 }),
+            " ",
+            labels.nodePanel.save
+          ]
+        }
+      ),
       !isStart && /* @__PURE__ */ jsx9(
         "button",
         {

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

@@ -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.17",
+  "version": "0.1.0-rc.19",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.6"
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.7"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/flows/FlowGroupHeader.tsx

@@ -18,10 +18,20 @@ export function FlowGroupHeader({ data }: NodeProps) {
   return (
     <div className="flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap">
       <span>{label}</span>
-      <button type="button" onClick={onFocus} title={labels.flowGroup.focus} className="hover:text-blue-600 dark:hover:text-blue-400">
+      <button
+        type="button"
+        onClick={onFocus}
+        title={labels.flowGroup.focus}
+        className="hover:text-blue-600 dark:hover:text-blue-400"
+      >
         <Maximize2 size={12} />
       </button>
-      <button type="button" onClick={onClose} title={labels.flowGroup.close} className="hover:text-red-600 dark:hover:text-red-400">
+      <button
+        type="button"
+        onClick={onClose}
+        title={labels.flowGroup.close}
+        className="hover:text-red-600 dark:hover:text-red-400"
+      >
         <X size={12} />
       </button>
     </div>

package/src/flows/FlowMapCanvas.tsx

@@ -27,18 +27,21 @@ export function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverr
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey])
 
   const nodes = useMemo<Node[]>(
-    () => Object.values(graphs).map((g): Node => ({
-      id: g.key,
-      type: 'flowMapNode',
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key),
-      } satisfies FlowMapNodeData,
-    })),
+    () =>
+      Object.values(graphs).map(
+        (g): Node => ({
+          id: g.key,
+          type: 'flowMapNode',
+          position: positions[g.key] ?? { x: 0, y: 0 },
+          data: {
+            label: g.label,
+            nodeCount: Object.keys(g.nodes).length,
+            isRoot: g.key === rootKey,
+            labels,
+            onOpen: () => onOpenFlow(g.key),
+          } satisfies FlowMapNodeData,
+        }),
+      ),
     [graphs, positions, rootKey, onOpenFlow, labels],
   )
 

package/src/flows/FlowMapNode.tsx

@@ -21,7 +21,9 @@ export function FlowMapNode({ data }: NodeProps) {
       <div className="flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300">
         <GitBranch size={14} />
         <span className="text-sm font-semibold truncate">{label}</span>
-        {isRoot && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />}
+        {isRoot && (
+          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />
+        )}
       </div>
       <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{labels.flowMap.nodeCount(nodeCount)}</p>
       <button

package/src/flows/FlowNodeCard.tsx

@@ -1,5 +1,17 @@
 import { Handle, Position, type NodeProps } from '@xyflow/react'
-import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag, type LucideIcon } from 'lucide-react'
+import {
+  MessageCircleQuestion,
+  GitBranch,
+  Zap,
+  ListTree,
+  Diamond,
+  AlertTriangle,
+  AlertCircle,
+  Headset,
+  Clock3,
+  ShoppingBag,
+  type LucideIcon,
+} from 'lucide-react'
 import type { FlowEditorLabels } from './labels'
 import type { FlowNodeData, GraphIssue } from './flowGraph'
 
@@ -83,7 +95,9 @@ function sourceRows(node: FlowNodeData, labels: FlowEditorLabels): { id: string;
 function SourceRow({ label, isDefault, handleId }: { label: string; isDefault: boolean; handleId: string }) {
   return (
     <div className="relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3">
-      <span className={`text-xs truncate flex-1 ${isDefault ? 'italic text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}>
+      <span
+        className={`text-xs truncate flex-1 ${isDefault ? 'italic text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}
+      >
         {label}
       </span>
       <Handle
@@ -98,10 +112,14 @@ function SourceRow({ label, isDefault, handleId }: { label: string; isDefault: b
 }
 
 export function FlowNodeCard({ data }: NodeProps) {
-  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data as unknown as FlowNodeCardData
+  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } =
+    data as unknown as FlowNodeCardData
   const label = nodeLabel(node, labels)
   const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons }
-  const Icon = node.type === 'action' && node.actionKind ? (iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type]) : NODE_TYPE_ICON[node.type]
+  const Icon =
+    node.type === 'action' && node.actionKind
+      ? (iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type])
+      : NODE_TYPE_ICON[node.type]
   const rows = sourceRows(node, labels)
   const hasError = issues.some((i) => i.severity === 'error')
   const hasWarning = !hasError && issues.some((i) => i.severity === 'warning')

package/src/flows/FlowNodePanel.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { Plus, Trash2, Save, X, AlertTriangle, AlertCircle } from 'lucide-react'
 import { FlowWhatsAppPreview } from './FlowWhatsAppPreview'
 import { nodeLabel } from './FlowNodeCard'
-import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS } from './flowGraph'
+import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS, BUILT_IN_ACTION_KINDS } from './flowGraph'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import type { FlowGraphData, FlowNodeData, GraphIssue } from './flowGraph'
 
@@ -73,6 +73,14 @@ export interface FlowNodePanelProps {
   onChange: (updated: FlowNodeData) => void
   onDelete: (nodeId: string) => void
   labels?: Partial<FlowEditorLabels>
+  /**
+   * Seletor de arquivos do nó `send_media`, renderizado no lugar da mensagem direta.
+   *
+   * Slot, e não uma lista de arquivos por prop, porque a biblioteca é do host: upload, permissão e
+   * URL assinada são dele, e o painel não tem como buscar nada. Ausente, o nó continua editável —
+   * só não dá para anexar por aqui.
+   */
+  renderMediaPicker?: (node: FlowNodeData) => ReactNode
 }
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/flows/FlowNodePanel.tsx —
@@ -86,18 +94,26 @@ export function FlowNodePanel({
   onChange,
   onDelete,
   labels: labelsOverride,
+  renderMediaPicker,
 }: FlowNodePanelProps) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
   const [draft, setDraft] = useState<FlowNodeData>(node)
   const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id)
   const isFixedLogic = draft.type === 'entrada_choice'
   const isAction = draft.type === 'action'
+  const isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA
   const isCondition = draft.type === 'condition'
   const isStart = graph.startNodeId === node.id
   const nodeIssues = issues.filter((i) => i.nodeId === node.id)
   // Chaves já usadas por perguntas deste fluxo — sugestão pro campo de variável da condição,
   // sem travar em texto livre (a variável pode ter vindo de outro fluxo ou de um cálculo derivado).
-  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key): key is string => !!key))]
+  const knownContextKeys = [
+    ...new Set(
+      Object.values(graph.nodes)
+        .map((n) => n.contextKey)
+        .filter((key): key is string => !!key),
+    ),
+  ]
   const conditionAnswerIds = isCondition ? ['true', 'false'] : (draft.options ?? []).map(([id]) => id)
 
   function updateNextString(value: string) {
@@ -106,7 +122,8 @@ export function FlowNodePanel({
 
   function updateNextByAnswer(answerId: string, value: string) {
     setDraft((prev) => {
-      const current = typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
+      const current =
+        typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
       return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } }
     })
   }
@@ -129,7 +146,10 @@ export function FlowNodePanel({
   }
 
   function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']] }))
+    setDraft((prev) => ({
+      ...prev,
+      options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']],
+    }))
   }
 
   function removeOption(index: number) {
@@ -140,12 +160,16 @@ export function FlowNodePanel({
     return (
       <>
         {otherNodeIds.map((id) => (
-          <option key={id} value={id}>{truncateLabel(nodeLabel(graph.nodes[id], labels))}</option>
+          <option key={id} value={id}>
+            {truncateLabel(nodeLabel(graph.nodes[id], labels))}
+          </option>
         ))}
         {otherFlows.length > 0 && (
           <optgroup label={labels.nodePanel.otherFlowsGroup}>
             {otherFlows.map((flow) => (
-              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>{flow.label}</option>
+              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>
+                {flow.label}
+              </option>
             ))}
           </optgroup>
         )}
@@ -157,13 +181,17 @@ export function FlowNodePanel({
     <div className="fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col">
       <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700">
         <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{labels.nodePanel.title}</h3>
-        <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X size={18} /></button>
+        <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <X size={18} />
+        </button>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {nodeIssues.length > 0 && (
           <div className="rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5">
-            {nodeIssues.map((issue, i) => <IssueRow key={i} issue={issue} />)}
+            {nodeIssues.map((issue, i) => (
+              <IssueRow key={i} issue={issue} />
+            ))}
           </div>
         )}
 
@@ -185,21 +213,33 @@ export function FlowNodePanel({
 
         {draft.contextKey && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.contextKey}</label>
-            <input value={draft.contextKey} disabled className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" />
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.contextKey}
+            </label>
+            <input
+              value={draft.contextKey}
+              disabled
+              className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500"
+            />
           </div>
         )}
 
         {!isFixedLogic && !isAction && !isCondition && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.questionType}</label>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.questionType}
+            </label>
             <select
               value={draft.questionType ?? 'text'}
-              onChange={(e) => setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))
+              }
               className={`w-full mt-1 ${SELECT_CLASSNAME}`}
             >
               {Object.entries(labels.questionTypeLabels).map(([key, label]) => (
-                <option key={key} value={key}>{label}</option>
+                <option key={key} value={key}>
+                  {label}
+                </option>
               ))}
             </select>
           </div>
@@ -218,7 +258,9 @@ export function FlowNodePanel({
         {isCondition && (
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionVariable}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionVariable}
+              </label>
               <input
                 value={draft.conditionContextKey ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value }))}
@@ -226,23 +268,36 @@ export function FlowNodePanel({
                 className={`w-full mt-1 ${INPUT_CLASSNAME}`}
               />
               <datalist id="condition-context-keys">
-                {knownContextKeys.map((key) => <option key={key} value={key} />)}
+                {knownContextKeys.map((key) => (
+                  <option key={key} value={key} />
+                ))}
               </datalist>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionOperator}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionOperator}
+              </label>
               <select
                 value={draft.conditionOperator ?? '>'}
-                onChange={(e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value as FlowNodeData['conditionOperator'] }))}
+                onChange={(e) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    conditionOperator: e.target.value as FlowNodeData['conditionOperator'],
+                  }))
+                }
                 className={`w-full mt-1 ${SELECT_CLASSNAME}`}
               >
                 {CONDITION_OPERATORS.map((operator) => (
-                  <option key={operator} value={operator}>{labels.conditionOperatorLabels[operator] ?? operator}</option>
+                  <option key={operator} value={operator}>
+                    {labels.conditionOperatorLabels[operator] ?? operator}
+                  </option>
                 ))}
               </select>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionValue}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionValue}
+              </label>
               <input
                 value={draft.conditionValue ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value }))}
@@ -262,7 +317,21 @@ export function FlowNodePanel({
           />
         )}
 
-        {isAction && draft.actionKind !== 'send_product_list' && (
+        {/* Os arquivos moram na biblioteca, não no grafo — trocar o material não repassa pelo editor. */}
+        {isSendMedia && (
+          <div>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.media}</label>
+            <div className="mt-1">
+              {renderMediaPicker?.(node) ?? (
+                <p className="text-xs text-gray-400">{labels.nodePanel.mediaUnavailable}</p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* `send_media` fica de fora: o handler do módulo só envia os anexos, então um campo de
+            mensagem aqui seria texto que o cliente nunca recebe. A legenda é por arquivo. */}
+        {isAction && draft.actionKind !== 'send_product_list' && !isSendMedia && (
           <WhatsAppTextField
             label={labels.nodePanel.directMessage}
             value={draft.directMessage ?? ''}
@@ -283,11 +352,21 @@ export function FlowNodePanel({
             <div className="space-y-2">
               {(draft.options ?? []).map(([id, label], i) => (
                 <div key={i} className="flex items-center gap-2">
-                  <input value={id} onChange={(e) => updateOption(i, 0, e.target.value)} placeholder={labels.nodePanel.optionId}
-                    className={`w-16 ${INPUT_CLASSNAME}`} />
-                  <input value={label} onChange={(e) => updateOption(i, 1, e.target.value)} placeholder={labels.nodePanel.optionLabel}
-                    className={`flex-1 ${INPUT_CLASSNAME}`} />
-                  <button onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600"><Trash2 size={14} /></button>
+                  <input
+                    value={id}
+                    onChange={(e) => updateOption(i, 0, e.target.value)}
+                    placeholder={labels.nodePanel.optionId}
+                    className={`w-16 ${INPUT_CLASSNAME}`}
+                  />
+                  <input
+                    value={label}
+                    onChange={(e) => updateOption(i, 1, e.target.value)}
+                    placeholder={labels.nodePanel.optionLabel}
+                    className={`flex-1 ${INPUT_CLASSNAME}`}
+                  />
+                  <button onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600">
+                    <Trash2 size={14} />
+                  </button>
                 </div>
               ))}
             </div>
@@ -299,8 +378,11 @@ export function FlowNodePanel({
             <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.next}</label>
             <p className="text-[11px] text-gray-400 dark:text-gray-500 mb-1">{labels.nodePanel.nextHint}</p>
             {typeof draft.next !== 'object' && !isCondition ? (
-              <select value={typeof draft.next === 'string' ? draft.next : ''} onChange={(e) => updateNextString(e.target.value)}
-                className={`w-full mt-1 ${SELECT_CLASSNAME}`}>
+              <select
+                value={typeof draft.next === 'string' ? draft.next : ''}
+                onChange={(e) => updateNextString(e.target.value)}
+                className={`w-full mt-1 ${SELECT_CLASSNAME}`}
+              >
                 <option value="">—</option>
                 {nextNodeOptions()}
               </select>
@@ -309,10 +391,17 @@ export function FlowNodePanel({
                 {conditionAnswerIds.map((id) => (
                   <div key={id} className="flex items-center gap-2">
                     <span className="text-xs text-gray-500 w-32 shrink-0">
-                      {isCondition ? (id === 'true' ? labels.nodePanel.conditionTrue : labels.nodePanel.conditionFalse) : labels.nodePanel.nextByAnswer(id)}
+                      {isCondition
+                        ? id === 'true'
+                          ? labels.nodePanel.conditionTrue
+                          : labels.nodePanel.conditionFalse
+                        : labels.nodePanel.nextByAnswer(id)}
                     </span>
-                    <select value={draft.next && typeof draft.next === 'object' ? draft.next.byAnswer[id] ?? '' : ''} onChange={(e) => updateNextByAnswer(id, e.target.value)}
-                      className={`flex-1 ${SELECT_CLASSNAME}`}>
+                    <select
+                      value={draft.next && typeof draft.next === 'object' ? (draft.next.byAnswer[id] ?? '') : ''}
+                      onChange={(e) => updateNextByAnswer(id, e.target.value)}
+                      className={`flex-1 ${SELECT_CLASSNAME}`}
+                    >
                       <option value="">—</option>
                       {nextNodeOptions()}
                     </select>
@@ -322,8 +411,11 @@ export function FlowNodePanel({
                   <span className="text-xs text-gray-500 w-32 shrink-0">
                     {isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault}
                   </span>
-                  <select value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''} onChange={(e) => updateNextDefault(e.target.value)}
-                    className={`flex-1 ${SELECT_CLASSNAME}`}>
+                  <select
+                    value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''}
+                    onChange={(e) => updateNextDefault(e.target.value)}
+                    className={`flex-1 ${SELECT_CLASSNAME}`}
+                  >
                     <option value="">—</option>
                     {nextNodeOptions()}
                   </select>
@@ -335,12 +427,17 @@ export function FlowNodePanel({
       </div>
 
       <div className="p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2">
-        <button onClick={() => onChange(draft)} className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+        <button
+          onClick={() => onChange(draft)}
+          className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
           <Save size={14} /> {labels.nodePanel.save}
         </button>
         {!isStart && (
           <button
-            onClick={() => { if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id) }}
+            onClick={() => {
+              if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id)
+            }}
             title={labels.nodePanel.delete}
             className="px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg"
           >

package/src/flows/FlowPalette.tsx

@@ -72,7 +72,9 @@ export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: Fl
               onClick={() => setSubmenu(submenu === 'question' ? null : 'question')}
               className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
             >
-              <span className="flex items-center gap-2"><MessageCircleQuestion size={15} className="text-blue-500" /> {labels.palette.question}</span>
+              <span className="flex items-center gap-2">
+                <MessageCircleQuestion size={15} className="text-blue-500" /> {labels.palette.question}
+              </span>
               <ChevronRight size={13} className="text-gray-400" />
             </button>
             {submenu === 'question' && (
@@ -113,7 +115,9 @@ export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: Fl
               onClick={() => setSubmenu(submenu === 'action' ? null : 'action')}
               className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
             >
-              <span className="flex items-center gap-2"><Zap size={15} className="text-orange-500" /> {labels.palette.action}</span>
+              <span className="flex items-center gap-2">
+                <Zap size={15} className="text-orange-500" /> {labels.palette.action}
+              </span>
               <ChevronRight size={13} className="text-gray-400" />
             </button>
             {submenu === 'action' && (

package/src/flows/FlowWhatsAppPreview.tsx

@@ -13,7 +13,11 @@ export interface FlowWhatsAppPreviewProps {
 // opções, botões (≤3) ou lista (4+) — para o editor mostrar exatamente o que o cliente verá.
 // Consome a mesma bolha/formatação do pacote (parseWhatsAppFormatting, T6.5) — T7.3 elimina a
 // duplicação de estilo que existia entre este preview e o MessageBubble do bot.
-export function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel }: FlowWhatsAppPreviewProps) {
+export function FlowWhatsAppPreview({
+  body,
+  options,
+  labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel,
+}: FlowWhatsAppPreviewProps) {
   if (!body && (!options || options.length === 0)) {
     return <p className="text-xs text-gray-400 dark:text-gray-500 italic px-1">{labels.previewPlaceholder}</p>
   }
@@ -25,7 +29,11 @@ export function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITO
     <div className="rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5">
       <div className="max-w-[85%]">
         <div className="rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words">
-          {body ? parseWhatsAppFormatting(body) : <span className="italic text-gray-400">{labels.previewEmptyBody}</span>}
+          {body ? (
+            parseWhatsAppFormatting(body)
+          ) : (
+            <span className="italic text-gray-400">{labels.previewEmptyBody}</span>
+          )}
           {hasOptions && !usesButtons && (
             <div className="mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600">
               <div className="flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400">
@@ -38,7 +46,10 @@ export function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITO
         {hasOptions && usesButtons && (
           <div className="mt-1 space-y-1">
             {options!.map(([id, label]) => (
-              <div key={id} className="rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm">
+              <div
+                key={id}
+                className="rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm"
+              >
                 {label || <span className="italic text-gray-400">{labels.previewEmptyOption}</span>}
               </div>
             ))}

package/src/flows/flowGraph.ts

@@ -13,6 +13,7 @@ import type {
   FlowNodeData,
   FlowGraphData,
 } from '@adatechnology/meta-whatsapp-contracts'
+import { FLOW_ACTION_KIND } from '@adatechnology/meta-whatsapp-contracts'
 
 export type {
   FlowNodeType,
@@ -28,11 +29,10 @@ export const CONDITION_OPERATORS: FlowConditionOperator[] = ['>', '>=', '<', '<=
 
 // Kinds de ação genéricos que o pacote conhece de fábrica — o host pode registrar quaisquer
 // outros via `actionKindLabels`/`actionKinds` nos componentes (ver FlowPalette, labels.ts).
-export const BUILT_IN_ACTION_KINDS = {
-  HANDOFF: 'handoff',
-  RATE_LIMITED_HANDOFF: 'rate_limited_handoff',
-  SEND_PRODUCT_LIST: 'send_product_list',
-} as const
+// Reexporta o vocabulário do contrato em vez de redeclarar os literais: o editor oferece na
+// paleta exatamente os `actionKind` que o backend sabe interpretar, e duas listas separadas
+// divergiriam em silêncio (um nó publicável que nenhum handler atende).
+export const BUILT_IN_ACTION_KINDS = FLOW_ACTION_KIND
 
 // Destinos "flow:<key>" são saltos para outro fluxo, resolvidos pelo motor do host. Duplicado
 // (em vez de importado do contracts) de propósito: são três linhas triviais e importá-las como

package/src/flows/labels.ts

@@ -47,6 +47,8 @@ export interface FlowEditorLabels {
     conditionTrue: string
     conditionFalse: string
     conditionVariableMissing: string
+    media: string
+    mediaUnavailable: string
   }
   palette: {
     title: string
@@ -87,6 +89,7 @@ export const DEFAULT_FLOW_EDITOR_LABELS: FlowEditorLabels = {
     handoff: 'Encaminhar para atendimento',
     rate_limited_handoff: 'Encaminhar (limite de simulações atingido)',
     send_product_list: 'Enviar catálogo de produtos',
+    send_media: 'Enviar arquivos da biblioteca',
   },
   conditionOperatorLabels: {
     '>': 'maior que',
@@ -143,6 +146,8 @@ export const DEFAULT_FLOW_EDITOR_LABELS: FlowEditorLabels = {
     conditionTrue: 'Se verdadeiro →',
     conditionFalse: 'Se falso →',
     conditionVariableMissing: 'Se a variável ainda não foi coletada →',
+    media: 'Arquivos enviados neste ponto',
+    mediaUnavailable: 'A biblioteca de arquivos não está disponível neste painel.',
   },
   palette: {
     title: 'Adicionar ao fluxo',

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'