@datatechsolutions/ui 2.11.69 → 2.11.70

package/dist/{chunk-WBYNJTQN.js → chunk-ZNLDMYBS.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');
@@ -17135,26 +17135,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 +17248,13 @@ 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,
               avatarGradient: t.inputAvatar,
-              borderClass: t.inputBorder,
               cursorClass: t.inputCursor
             }
           )
@@ -17298,42 +17331,57 @@ function StageChip({ label, stageIndex, mine, activeBadge }) {
   );
 }
 function InputStage3({
-  prompt,
+  userPrompt,
+  assistantMessage,
+  phase,
+  assistantComplete,
   department,
   agents,
   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-2.5 flex flex-wrap gap-1.5", children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center rounded-full bg-white/40 dark:bg-white/[0.08] px-2.5 py-0.5 text-[10px] font-semibold text-gray-700 dark:text-gray-200",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `mr-1 h-2.5 w-2.5 ${cursorClass.replace("bg-", "text-")}` }),
+                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 +25388,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-ZNLDMYBS.js.map
+//# sourceMappingURL=chunk-ZNLDMYBS.js.map