@adatechnology/conversations-ui 0.1.0-rc.18 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.18",
+  "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',