@decido/discovery-studio 0.1.0 → 4.0.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React8, { memo, useState, useEffect, useRef, useCallback } from 'react';
+import React9, { memo, useState, useEffect, useRef, useCallback } from 'react';
 import { io } from 'socket.io-client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { kernel } from '@decido/kernel-bridge';
@@ -123,10 +123,7 @@ var SideExplorer = ({ selectedContact, onSelectContact }) => {
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold truncate", style: { color: "var(--text-primary)" }, children: [
-                    "+",
-                    conv.phone
-                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold truncate", style: { color: "var(--text-primary)" }, children: conv.profile_name || "+" + conv.phone }),
                   /* @__PURE__ */ jsx("span", { className: "text-[9px] shrink-0 ml-1", style: { color: "var(--text-secondary)" }, children: conv.last_activity.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "text-[10px] truncate mt-0.5", style: { color: "var(--text-secondary)" }, children: conv.last_message || "Media" })
@@ -183,9 +180,9 @@ var CONTACT_DETAILS = {
     tags: ["VIP", "Frecuente", "Muebler\xEDa"],
     timeline: [
       { time: "2m", event: "Pregunt\xF3 por estado de pedido", icon: "fas fa-comment" },
-      { time: "1d", event: "Pedido PED-1847 en PRODUCCI\xD3N", icon: "fas fa-industry" },
-      { time: "3d", event: "Confirm\xF3 cotizaci\xF3n mesa roble", icon: "fas fa-check" },
-      { time: "1w", event: "Solicit\xF3 cat\xE1logo digital", icon: "fas fa-book" }
+      { time: "1d", event: "Pedido PED-1847 en PRODUCTION", icon: "fas fa-industry" },
+      { time: "3d", event: "Transici\xF3n a IN_CUTTING (Control)", icon: "fas fa-check-circle" },
+      { time: "1w", event: "Tracking Link Generado", icon: "fas fa-link" }
     ]
   },
   c2: {
@@ -200,7 +197,7 @@ var CONTACT_DETAILS = {
     tags: ["Empresa", "Nuevo"],
     timeline: [
       { time: "15m", event: "Solicit\xF3 cotizaci\xF3n de mesa", icon: "fas fa-comment" },
-      { time: "2d", event: "Primer contacto v\xEDa WhatsApp", icon: "fas fa-phone" }
+      { time: "2d", event: "RuleEngine Trigger: NEW Order", icon: "fas fa-bolt" }
     ]
   }
 };
@@ -318,7 +315,46 @@ var AgentPanel = () => {
         setIsTyping(false);
       }
     });
-    return () => unsubscribe();
+    let es = null;
+    try {
+      es = new EventSource("http://localhost:3001/api/events");
+      es.addEventListener("whatsapp:message_received", (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          setMessages((prev) => [...prev, {
+            id: Date.now().toString(),
+            text: `\u{1F4F1} [WA] ${data.profileName || data.from}: ${data.text || "Archivo Adjunto"}`,
+            type: "user"
+          }]);
+          setIsTyping(true);
+          setTimeout(() => {
+            setMessages((p) => [...p, { id: Date.now().toString(), text: "Regla disparada: Mensaje recibido. Evaluando intenci\xF3n...", type: "system" }]);
+            setIsTyping(false);
+          }, 1e3);
+        } catch (e2) {
+        }
+      });
+      es.addEventListener("whatsapp:status_update", (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          setMessages((prev) => [...prev, {
+            id: Date.now().toString(),
+            text: `\u2714\uFE0F [Estado WA] ${data.status} a ${data.recipient_id}`,
+            type: "system"
+          }]);
+        } catch (e2) {
+        }
+      });
+      es.onerror = () => {
+        es?.close();
+      };
+    } catch (e) {
+      console.log("SSE Error, falling back to local kernel");
+    }
+    return () => {
+      unsubscribe();
+      if (es) es.close();
+    };
   }, []);
   const handleSend = async () => {
     if (!input.trim()) return;
@@ -719,6 +755,56 @@ var BotActionNode = memo(({ id, data, selected }) => {
   );
 });
 BotActionNode.displayName = "BotActionNode";
+var TrackingPreview = ({ token = "demo-token-123", onClose }) => {
+  const trackingUrl = `http://localhost:3001/track/${token}`;
+  const [isLoading, setIsLoading] = useState(true);
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[400px] bg-[#0E1525] rounded-[24px] overflow-hidden border border-white/10 shadow-2xl flex flex-col h-[700px] max-h-[90vh] relative animate-in zoom-in-95", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-4 z-10 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => window.open(trackingUrl, "_blank"),
+          className: "w-8 h-8 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-colors",
+          title: "Abrir en nueva pesta\xF1a",
+          children: /* @__PURE__ */ jsx("i", { className: "fas fa-external-link-alt text-xs" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "w-8 h-8 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-colors",
+          title: "Cerrar vista previa",
+          children: /* @__PURE__ */ jsx("i", { className: "fas fa-times text-xs" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-7 w-full bg-black flex justify-center items-start shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-[120px] h-5 bg-black rounded-b-xl" }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-black/50 border-b border-white/5 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "bg-white/5 rounded-lg px-3 py-1 flex items-center gap-2 text-[10px] text-white/40 w-fit", children: [
+      /* @__PURE__ */ jsx("i", { className: "fas fa-lock text-[8px]" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "decido.com/track/",
+        token
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 relative bg-black", children: [
+      isLoading && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-[#0E1525] text-white/50", children: [
+        /* @__PURE__ */ jsx("i", { className: "fas fa-circle-notch fa-spin text-2xl text-emerald-500 mb-3" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Cargando vista m\xF3vil..." })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: trackingUrl,
+          className: `w-full h-full border-none transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`,
+          onLoad: () => setIsLoading(false),
+          title: "Tracking Portal Preview"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-6 w-full bg-black flex justify-center items-center shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-[120px] h-1 bg-white/20 rounded-full" }) })
+  ] }) });
+};
 var nodeTypes = {
   messageNode: MessageNode,
   botAction: BotActionNode
@@ -736,14 +822,14 @@ var initialNodes = [
     id: "ai-intent",
     type: "botAction",
     position: { x: 400, y: 280 },
-    data: { label: "Agente IA: Reconocimiento", actionType: "analyze", description: 'Detectar Intenci\xF3n: "Estado de Pedido"' }
+    data: { label: "Reconocimiento Intenci\xF3n IA", actionType: "analyze", description: 'Detectar Intenci\xF3n: "Estado de Pedido"' }
   },
   // Database Check
   {
     id: "db-check",
     type: "botAction",
     position: { x: 750, y: 150 },
-    data: { label: "Consultar ERP", actionType: "decision", description: "API REST: /orders/XJ-901" }
+    data: { label: "Acci\xF3n Ejecutada", actionType: "decision", description: "Action: GENERATE_TRACKING_LINK" }
   },
   {
     id: "escalate-human",
@@ -756,13 +842,13 @@ var initialNodes = [
     id: "reply-status",
     type: "messageNode",
     position: { x: 1050, y: 150 },
-    data: { label: "Respuesta Autom\xE1tica WhatsApp", type: "outgoing", text: 'Tu pedido XJ-901 est\xE1 "En Producci\xF3n" y se entregar\xE1 el Viernes.', time: "10:06 AM" }
+    data: { label: "Regla: SEND_WA_TEMPLATE", type: "outgoing", text: "Template: pedido_produccion\nPar\xE1metros: [legacyId, trackUrl]", time: "10:06 AM" }
   },
   {
     id: "assign-agent",
     type: "messageNode",
     position: { x: 1050, y: 400 },
-    data: { label: "Soporte Asignado", type: "system", text: "Asignando Chat #3421 al Asesor de Ventas: Carlos" }
+    data: { label: "Soporte Asignado", type: "system", text: "Asignando Chat #3421 (Humano en la ruta)" }
   }
 ];
 var initialEdges = [
@@ -776,6 +862,7 @@ var initialEdges = [
 var FlowCanvasTab = () => {
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
+  const [previewOpen, setPreviewOpen] = useState(false);
   const onNodesChange = useCallback((changes) => {
   }, []);
   const onEdgesChange = useCallback((changes) => {
@@ -783,6 +870,11 @@ var FlowCanvasTab = () => {
   const onConnect = useCallback((params) => {
     setEdges((eds) => [...eds, { ...params, id: `e-${Date.now()}`, animated: true }]);
   }, [setEdges]);
+  const onNodeClick = useCallback((event, node) => {
+    if (node.data?.description?.includes("GENERATE_TRACKING_LINK") || node.data?.text?.includes("trackUrl")) {
+      setPreviewOpen(true);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -834,9 +926,11 @@ var FlowCanvasTab = () => {
         onNodesChange,
         onEdgesChange,
         onConnect,
+        onNodeClick,
         nodeTypes
       }
-    ) })
+    ) }),
+    previewOpen && /* @__PURE__ */ jsx(TrackingPreview, { onClose: () => setPreviewOpen(false) })
   ] });
 };
 var HOURLY_DATA = [
@@ -993,7 +1087,7 @@ var AnalyticsTab = () => {
       /* @__PURE__ */ jsxs("div", { className: "grid gap-1", style: { gridTemplateColumns: "auto repeat(24, 1fr)" }, children: [
         /* @__PURE__ */ jsx("div", {}),
         Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsx("div", { className: "text-[7px] text-center font-bold", style: { color: "var(--text-secondary)" }, children: i }, i)),
-        ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day, di) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+        ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day, di) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "text-[9px] font-bold pr-2 flex items-center", style: { color: "var(--text-secondary)" }, children: day }),
           Array.from({ length: 24 }, (_, hi) => {
             const intensity = Math.random();
@@ -1031,7 +1125,7 @@ var ApiTesterTab = () => {
   const [templateVariables, setTemplateVariables] = useState([]);
   const [templates, setTemplates] = useState([]);
   const [fetchingTemplates, setFetchingTemplates] = useState(false);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const saved = localStorage.getItem("wa_api_tester_phones");
     if (saved) {
       try {
@@ -1041,7 +1135,7 @@ var ApiTesterTab = () => {
     }
     fetchTemplates();
   }, []);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const selected = templates.find((t) => t.name === templateName && t.language === templateLanguage);
     if (selected) {
       const bodyComponent = selected.components?.find((c) => c.type === "BODY" || c.type === "body");
@@ -1687,6 +1781,103 @@ var TemplateManagerTab = () => {
     ] })
   ] }) });
 };
+var SUGGESTIONS = [
+  { icon: "fas fa-comment-dots", color: "text-indigo-400", bg: "bg-indigo-500/10", text: "Saluda al cliente cuando se cree un pedido" },
+  { icon: "fas fa-camera", color: "text-amber-400", bg: "bg-amber-500/10", text: "Detecta pagos en fotos de comprobante" },
+  { icon: "fas fa-industry", color: "text-emerald-400", bg: "bg-emerald-500/10", text: "Avisa por WhatsApp al pasar a Producci\xF3n" },
+  { icon: "fas fa-truck", color: "text-cyan-400", bg: "bg-cyan-500/10", text: "Pedido listo: avisa si >$1M" }
+];
+var RulesArchitectTab = () => {
+  const [prompt, setPrompt] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const generateRule = async (textToUse) => {
+    const text = textToUse || prompt;
+    if (!text.trim()) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch("http://localhost:3001/api/whatsapp/rules/generate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          // Note: Mocking tenant matching local dev
+          "x-tenant-id": "dev-tenant"
+        },
+        body: JSON.stringify({ prompt: text })
+      });
+      if (!res.ok) throw new Error("Error al generar regla IA");
+      const data = await res.json();
+      setResult(JSON.stringify(data.rule || data, null, 2));
+    } catch (err) {
+      setError(err.message || "Error de conexi\xF3n con el AI Service");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 h-full flex flex-col items-center justify-center p-8 bg-black/20 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-10 text-white", children: [
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-500/20 text-indigo-400 mb-6 border border-indigo-500/30 shadow-[0_0_30px_rgba(99,102,241,0.2)]", children: /* @__PURE__ */ jsx("i", { className: "fas fa-wand-magic-sparkles text-2xl" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-black tracking-tight mb-3", children: "Workflow Architect" }),
+      /* @__PURE__ */ jsx("p", { className: "text-zinc-400 max-w-lg mx-auto leading-relaxed", children: "Escribe una instrucci\xF3n en lenguaje natural y Sentinal AI generar\xE1 la regla JSON requerida para la automatizaci\xF3n de WhatsApp." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mb-8", children: SUGGESTIONS.map((s, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          setPrompt(s.text);
+          generateRule(s.text);
+        },
+        className: `flex items-center gap-3 p-4 text-left rounded-xl transition-all border border-white/5 bg-zinc-900/50 hover:bg-zinc-800/80 hover:border-white/10 group`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `w-8 h-8 shrink-0 flex items-center justify-center rounded-lg ${s.bg} ${s.color}`, children: /* @__PURE__ */ jsx("i", { className: s.icon }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300 group-hover:text-white leading-tight", children: s.text })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx("i", { className: "fas fa-terminal text-zinc-500" }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && generateRule(),
+            placeholder: "Ej: Cuando un pedido pase de Producci\xF3n a Dispatch, env\xEDa una plantilla...",
+            className: "block w-full pl-11 pr-32 py-4 bg-zinc-950/80 border-2 border-zinc-800 rounded-xl text-sm outline-none text-zinc-200 placeholder-zinc-600 focus:border-indigo-500/50 focus:bg-zinc-950 transition-all shadow-inner"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => generateRule(),
+            disabled: loading || !prompt.trim(),
+            className: "absolute right-2 top-2 bottom-2 px-6 bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white font-bold rounded-lg text-sm transition-all shadow-lg active:scale-95 flex items-center gap-2",
+            children: loading ? /* @__PURE__ */ jsx("i", { className: "fas fa-circle-notch fa-spin" }) : "Generar"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-3 animate-in fade-in slide-in-from-top-2", children: [
+        /* @__PURE__ */ jsx("i", { className: "fas fa-exclamation-circle mt-0.5" }),
+        /* @__PURE__ */ jsx("div", { children: error })
+      ] }),
+      result && /* @__PURE__ */ jsxs("div", { className: "rounded-xl overflow-hidden border border-zinc-800 bg-[#0d1117] relative animate-in zoom-in-95 fade-in duration-300 shadow-2xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 border-b border-zinc-800 bg-[#161b22] flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("i", { className: "fab fa-js text-yellow-400/80 text-xs" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-zinc-400", children: "generated_rule.json" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase font-bold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded", children: "V\xE1lido" })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "p-5 text-xs font-mono leading-relaxed text-[#c9d1d9] overflow-x-auto whitespace-pre-wrap max-h-[300px] overflow-y-auto custom-scrollbar", children: result })
+      ] })
+    ] })
+  ] }) });
+};
 var useStatusMetrics = () => {
   const [metrics, setMetrics] = useState({
     activeChats: 12,
@@ -1708,7 +1899,7 @@ var useStatusMetrics = () => {
   }, []);
   return metrics;
 };
-var StatusBarMetrics = React8.memo(() => {
+var StatusBarMetrics = React9.memo(() => {
   const metrics = useStatusMetrics();
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1756,6 +1947,7 @@ var StatusBarMetrics = React8.memo(() => {
 var TABS = [
   { id: "chat", label: "Live Chat", icon: "fas fa-comments" },
   { id: "flow", label: "Flow Canvas", icon: "fas fa-project-diagram" },
+  { id: "architect", label: "Workflow Architect", icon: "fas fa-wand-magic-sparkles" },
   { id: "analytics", label: "Analytics", icon: "fas fa-chart-bar" },
   { id: "api_tester", label: "API Tester", icon: "fas fa-vial" },
   { id: "templates", label: "Templates", icon: "fas fa-layer-group" }
@@ -1789,6 +1981,7 @@ var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Clo
   const commands = [
     { id: "chat", label: "Abrir Chat en Vivo", icon: "fas fa-comments", action: () => setActiveTab("chat") },
     { id: "flow", label: "Abrir Flow Canvas", icon: "fas fa-project-diagram", action: () => setActiveTab("flow") },
+    { id: "architect", label: "Abrir Workflow Architect (IA)", icon: "fas fa-wand-magic-sparkles", action: () => setActiveTab("architect") },
     { id: "analytics", label: "Abrir Analytics", icon: "fas fa-chart-bar", action: () => setActiveTab("analytics") },
     { id: "explorer", label: explorerOpen ? "Cerrar Explorer" : "Abrir Explorer", icon: "fas fa-folder-tree", action: () => setExplorerOpen((p) => !p) },
     { id: "inspector", label: inspectorOpen ? "Cerrar Inspector" : "Abrir Inspector", icon: "fas fa-info-circle", action: () => setInspectorOpen((p) => !p) },
@@ -1946,6 +2139,7 @@ var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Clo
       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-hidden", children: [
         activeTab === "chat" && /* @__PURE__ */ jsx(ChatTab, { selectedContact }),
         activeTab === "flow" && /* @__PURE__ */ jsx(FlowCanvasTab, {}),
+        activeTab === "architect" && /* @__PURE__ */ jsx(RulesArchitectTab, {}),
         activeTab === "analytics" && /* @__PURE__ */ jsx(AnalyticsTab, {}),
         activeTab === "api_tester" && /* @__PURE__ */ jsx(ApiTesterTab, {}),
         activeTab === "templates" && /* @__PURE__ */ jsx(TemplateManagerTab, {})