@datatechsolutions/ui 2.11.68 → 2.11.70

package/dist/{chunk-SSB6DU5G.js → chunk-ZNLDMYBS.js}

@@ -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;
@@ -17213,15 +17244,17 @@ function DepartmentAssistantDemo({
           animate: { opacity: 1, y: 0 },
           exit: { opacity: 0, y: -12 },
           transition: { duration: 0.45 },
-          className: "flex items-center justify-center p-10",
+          className: "h-full",
           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,41 +17331,58 @@ function StageChip({ label, stageIndex, mine, activeBadge }) {
   );
 }
 function InputStage3({
-  prompt,
+  userPrompt,
+  assistantMessage,
+  phase,
+  assistantComplete,
   department,
   agents,
   avatarGradient,
-  borderClass,
   cursorClass
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-white/10 bg-white/70 dark:bg-zinc-900/70 p-8 shadow-2xl backdrop-blur-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-12 w-12 rounded-xl bg-gradient-to-br ${avatarGradient} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-6 w-6 text-white" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-base font-bold text-gray-900 dark:text-white", children: [
-          "Assistente \u2014 ",
-          department
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Digite um pedido e veja os agentes atuarem." })
+  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: "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: `rounded-xl border-2 ${borderClass} bg-white/40 dark:bg-white/[0.02] p-4 min-h-[120px]`, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base font-medium text-gray-900 dark:text-white", children: [
-      prompt,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-1 inline-block w-0.5 h-5 ${cursorClass} animate-pulse` })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-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-")}` }),
-      "Agentes prontos:",
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "inline-flex items-center rounded-full border border-white/10 bg-white/60 dark:bg-white/[0.04] px-2 py-0.5 text-[10px] font-semibold text-gray-700 dark:text-gray-200",
-          children: 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 = [
   {
@@ -25338,5 +25388,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-SSB6DU5G.js.map
-//# sourceMappingURL=chunk-SSB6DU5G.js.map
+//# sourceMappingURL=chunk-ZNLDMYBS.js.map
+//# sourceMappingURL=chunk-ZNLDMYBS.js.map