@datatechsolutions/ui 2.11.69 → 2.11.71

package/dist/{chunk-WBYNJTQN.js → chunk-UOKLJT2P.js}

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
 var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
-var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
 var Headless6 = require('@headlessui/react');
 var clsx = require('clsx');
 var React12 = require('react');
@@ -16463,7 +16463,8 @@ function DepartmentWorkflowDemo({
   className,
   hideHeader = false,
   onComplete,
-  theme
+  theme,
+  nodeAvatars
 }) {
   const t = { ...DEFAULT_THEME, ...theme };
   const { graph, steps, title, description, accentBadge, completionSummary } = workflow;
@@ -16628,6 +16629,7 @@ function DepartmentWorkflowDemo({
             col.nodes.map((node2) => {
               const status = getStatus(node2);
               const meta = getNodeMeta(node2.type);
+              const avatar = nodeAvatars?.[node2.id];
               const statusClass = status === "running" ? `scale-[1.04] ring-2 ${t.activeRing}` : status === "complete" ? "ring-1 ring-emerald-500/40" : "opacity-50";
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -16635,7 +16637,14 @@ function DepartmentWorkflowDemo({
                   className: `liquid-surface rounded-xl p-2.5 transition-all duration-500 ${statusClass}`,
                   style: status === "running" ? { "--glow": meta.glow, animation: "deptGlow 1.4s ease-in-out infinite" } : void 0,
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${meta.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(meta.icon, { className: `h-4 w-4 ${meta.color}` }) }),
+                    avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: avatar,
+                        alt: "",
+                        className: `h-10 w-10 shrink-0 rounded-xl bg-white/40 dark:bg-white/[0.06] ${status === "running" ? "ring-2 ring-white/40" : ""}`
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${meta.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(meta.icon, { className: `h-5 w-5 ${meta.color}` }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[11px] font-semibold text-gray-900 dark:text-white", children: node2.data.label }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[8px] text-gray-500 dark:text-gray-500", children: [
@@ -17135,26 +17144,57 @@ function DepartmentAssistantDemo({
   const t = { ...DEFAULT_ASSISTANT_THEME, ...theme, workflow: { ...DEFAULT_ASSISTANT_THEME.workflow, ...theme?.workflow } };
   const [flowIndex, setFlowIndex] = React12.useState(initialIndex);
   const [stage, setStage] = React12.useState("input");
-  const [typed, setTyped] = React12.useState("");
+  const [userTyped, setUserTyped] = React12.useState("");
+  const [assistantTyped, setAssistantTyped] = React12.useState("");
+  const [inputPhase, setInputPhase] = React12.useState("user");
   const rotateTimerRef = React12.useRef(null);
   const flow = flows[flowIndex];
+  const assistantMessage = React12.useMemo(
+    () => `Entendi. Vou ativar ${flow.agents.length} agentes especializados e orquestrar o fluxo no Astrlabe.`,
+    [flow.agents.length]
+  );
+  React12.useEffect(() => {
+    if (stage === "input") {
+      setInputPhase("user");
+      setUserTyped("");
+      setAssistantTyped("");
+    }
+  }, [stage, flow.id]);
   React12.useEffect(() => {
-    if (stage !== "input") return void 0;
-    setTyped("");
+    if (stage !== "input" || inputPhase !== "user") return void 0;
+    setUserTyped("");
     let i = 0;
     const interval = setInterval(() => {
       i += 1;
       if (i <= flow.prompt.length) {
-        setTyped(flow.prompt.slice(0, i));
+        setUserTyped(flow.prompt.slice(0, i));
       } else {
         clearInterval(interval);
-        const timer = setTimeout(() => setStage("workflow"), 700);
+        const timer = setTimeout(() => setInputPhase("assistant"), 600);
         return () => clearTimeout(timer);
       }
       return void 0;
     }, typingSpeedMs);
     return () => clearInterval(interval);
-  }, [stage, flow.prompt, typingSpeedMs]);
+  }, [stage, inputPhase, flow.prompt, typingSpeedMs]);
+  React12.useEffect(() => {
+    if (stage !== "input" || inputPhase !== "assistant") return void 0;
+    setAssistantTyped("");
+    let i = 0;
+    const speed = Math.max(18, Math.round(typingSpeedMs * 0.55));
+    const interval = setInterval(() => {
+      i += 1;
+      if (i <= assistantMessage.length) {
+        setAssistantTyped(assistantMessage.slice(0, i));
+      } else {
+        clearInterval(interval);
+        const timer = setTimeout(() => setStage("workflow"), 800);
+        return () => clearTimeout(timer);
+      }
+      return void 0;
+    }, speed);
+    return () => clearInterval(interval);
+  }, [stage, inputPhase, assistantMessage, typingSpeedMs]);
   const handleWorkflowComplete = React12.useCallback(() => {
     const timer = setTimeout(() => setStage("dashboard"), 1200);
     rotateTimerRef.current = timer;
@@ -17217,11 +17257,14 @@ function DepartmentAssistantDemo({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             InputStage3,
             {
-              prompt: typed,
+              userPrompt: userTyped,
+              assistantMessage: assistantTyped,
+              phase: inputPhase,
+              assistantComplete: assistantTyped.length === assistantMessage.length,
               department: flow.name,
               agents: flow.agents,
+              agentAvatars: flow.agentAvatars,
               avatarGradient: t.inputAvatar,
-              borderClass: t.inputBorder,
               cursorClass: t.inputCursor
             }
           )
@@ -17244,7 +17287,8 @@ function DepartmentAssistantDemo({
               hideHeader: true,
               stepDurationMs: workflowStepMs,
               onComplete: handleWorkflowComplete,
-              theme: t.workflow
+              theme: t.workflow,
+              nodeAvatars: flow.nodeAvatars
             },
             `wf-${flow.id}`
           )
@@ -17298,42 +17342,61 @@ function StageChip({ label, stageIndex, mine, activeBadge }) {
   );
 }
 function InputStage3({
-  prompt,
+  userPrompt,
+  assistantMessage,
+  phase,
+  assistantComplete,
   department,
   agents,
+  agentAvatars,
   avatarGradient,
   cursorClass
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center px-6 py-10 sm:px-12", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-14 w-14 rounded-2xl bg-gradient-to-br ${avatarGradient} flex items-center justify-center shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-7 w-7 text-white" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: [
-          "Assistente \u2014 ",
-          department
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Como posso ajudar hoje?" })
-      ] })
+  const cursor = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-0.5 inline-block w-[2px] h-4 align-middle ${cursorClass} animate-pulse` });
+  const showAssistant = phase === "assistant";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col px-4 py-6 sm:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center justify-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1 w-1 rounded-full bg-emerald-500 animate-pulse" }),
+      "Conversa \u2014 ",
+      department
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-2xl px-6 py-6 min-h-[140px] flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xl font-medium leading-relaxed text-gray-900 dark:text-white", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mr-1 inline-block h-1.5 w-1.5 rounded-full ${cursorClass}` }),
-        prompt,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-1 inline-block w-0.5 h-6 align-middle ${cursorClass} animate-pulse` })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${cursorClass.replace("bg-", "text-")}` }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Agentes prontos:" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "liquid-surface inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold text-gray-700 dark:text-gray-200",
-            children: agent
-          },
-          agent
-        )) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-1 flex-col justify-end gap-4 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-tr-md px-5 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
+        userPrompt,
+        phase === "user" && cursor
+      ] }) }) }),
+      showAssistant && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${avatarGradient} shadow-md`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-5 w-5 text-white" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-bl-md px-5 py-3.5", children: assistantMessage.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse` }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "300ms" } })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
+            assistantMessage,
+            !assistantComplete && cursor
+          ] }),
+          assistantComplete && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: agents.map((agent) => {
+            const avatar = agentAvatars?.[agent];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1.5 rounded-full bg-white/40 dark:bg-white/[0.08] py-0.5 pl-0.5 pr-3 text-[11px] font-semibold text-gray-700 dark:text-gray-200 shadow-sm",
+                children: [
+                  avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, alt: "", className: "h-6 w-6 rounded-full bg-white/40 dark:bg-white/[0.06]" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br ${avatarGradient}`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3 w-3 text-white" }) }),
+                  agent
+                ]
+              },
+              agent
+            );
+          }) })
+        ] }) })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-5 w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface flex items-center gap-3 rounded-full px-4 py-2.5 opacity-60", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: "Mensagem para Kori AI\u2026" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500", children: "\u23CE enviar" })
+    ] }) })
   ] });
 }
 var koriDepartmentFlows = [
@@ -25340,5 +25403,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-WBYNJTQN.js.map
-//# sourceMappingURL=chunk-WBYNJTQN.js.map
+//# sourceMappingURL=chunk-UOKLJT2P.js.map
+//# sourceMappingURL=chunk-UOKLJT2P.js.map