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

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

@@ -1,11 +1,22 @@
 import {
   parseWhatsAppFormatting,
-  useDarkMode
-} from "../chunk-ZDURDZTM.js";
+  useIsDarkTheme
+} from "../chunk-2AYDBWNE.js";
 
 // 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);
@@ -524,21 +541,23 @@ var BACKGROUND_COLOR_LIGHT = "#cbd5e1";
 var BACKGROUND_COLOR_DARK = "#334155";
 function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
-  const { isDark } = useDarkMode();
+  const isDark = useIsDarkTheme();
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
   const nodes = useMemo(
-    () => Object.values(graphs).map((g) => ({
-      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",
         {