@datatechsolutions/ui 2.11.75 → 2.11.77

package/dist/{chunk-4VUNR53L.js → chunk-TUEYBNWL.js}

@@ -16464,7 +16464,8 @@ function DepartmentWorkflowDemo({
   hideHeader = false,
   onComplete,
   theme,
-  nodeAvatars
+  nodeAvatars,
+  onStepChange
 }) {
   const t = { ...DEFAULT_THEME, ...theme };
   const { graph, steps, title, description, accentBadge, completionSummary, nodeSubtitles } = workflow;
@@ -16538,6 +16539,11 @@ function DepartmentWorkflowDemo({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [autoPlay, handleRun]);
+  React12.useEffect(() => {
+    if (stepIndex >= 0 && onStepChange) {
+      onStepChange(stepIndex, steps[stepIndex]?.label ?? "");
+    }
+  }, [stepIndex, steps, onStepChange]);
   const currentStepLabel = stepIndex >= 0 ? steps[stepIndex]?.label : "Ready to run";
   const Shell = hideHeader ? ({ children: c }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: c }) : ({ children: c }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `liquid-surface rounded-2xl overflow-hidden ${className ?? ""}`, children: c });
   return /* @__PURE__ */ jsxRuntime.jsxs(Shell, { children: [
@@ -17238,6 +17244,20 @@ var koriAssistantTheme = {
     badge: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
   }
 };
+var DEFAULT_LABELS = {
+  conversation: (persona, department) => `Conversa \u2014 ${persona} \xB7 ${department}`,
+  composerHint: "Mensagem para Kori AI\u2026",
+  composerEnter: "\u23CE enviar",
+  personaTag: (persona) => persona.toUpperCase(),
+  assistantResponse: (count) => `Entendi. Vou ativar ${count} agentes especializados e orquestrar o fluxo no Astrlabe.`,
+  stageAsk: "Ask",
+  stageOrchestrate: "Orchestrate",
+  stageDeliver: "Deliver",
+  footerInput: "Usu\xE1rio envia um pedido ao assistente\u2026",
+  footerWorkflow: "Astrlabe orquestrando agentes e datasources\u2026",
+  footerDashboard: "Pronto \u2014 dashboard do ERP atualizado.",
+  workflowStep: (current, total) => `Etapa ${current} de ${total}`
+};
 function DepartmentAssistantDemo({
   flows,
   initialIndex = 0,
@@ -17247,20 +17267,29 @@ function DepartmentAssistantDemo({
   workflowStepMs = 1050,
   theme,
   brandName = "Kori AI Assistant",
+  labels,
   className
 }) {
   const t = { ...DEFAULT_ASSISTANT_THEME, ...theme, workflow: { ...DEFAULT_ASSISTANT_THEME.workflow, ...theme?.workflow } };
+  const L = { ...DEFAULT_LABELS, ...labels };
   const [flowIndex, setFlowIndex] = React12.useState(initialIndex);
   const [stage, setStage] = React12.useState("input");
   const [userTyped, setUserTyped] = React12.useState("");
   const [assistantTyped, setAssistantTyped] = React12.useState("");
   const [inputPhase, setInputPhase] = React12.useState("user");
+  const [workflowStepIndex, setWorkflowStepIndex] = React12.useState(-1);
+  const [workflowStepLabel, setWorkflowStepLabel] = React12.useState("");
   const rotateTimerRef = React12.useRef(null);
   const flow = flows[flowIndex];
+  const totalSteps = flow.workflow.steps.length;
   const assistantMessage = React12.useMemo(
-    () => `Entendi. Vou ativar ${flow.agents.length} agentes especializados e orquestrar o fluxo no Astrlabe.`,
-    [flow.agents.length]
+    () => L.assistantResponse(flow.agents.length),
+    [flow.agents.length, L]
   );
+  React12.useEffect(() => {
+    setWorkflowStepIndex(-1);
+    setWorkflowStepLabel("");
+  }, [flow.id]);
   React12.useEffect(() => {
     if (stage === "input") {
       setInputPhase("user");
@@ -17347,11 +17376,22 @@ function DepartmentAssistantDemo({
       }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/5 px-6 py-3 flex items-center gap-3 text-[11px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Ask", stageIndex, mine: 0, activeBadge: t.stageActiveBadge }),
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: L.stageAsk, stageIndex, mine: 0, activeBadge: t.stageActiveBadge }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-white/10 to-white/5" }),
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Orchestrate", stageIndex, mine: 1, activeBadge: t.stageActiveBadge }),
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: L.stageOrchestrate, stageIndex, mine: 1, activeBadge: t.stageActiveBadge }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-white/5 to-white/10" }),
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Deliver", stageIndex, mine: 2, activeBadge: t.stageActiveBadge })
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: L.stageDeliver, stageIndex, mine: 2, activeBadge: t.stageActiveBadge })
+    ] }),
+    stage === "workflow" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/5 px-6 py-2.5 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: flow.workflow.steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `h-1 w-3.5 rounded-full transition-all duration-500 ${workflowStepIndex < 0 ? "bg-white/10" : index < workflowStepIndex ? "bg-emerald-500" : index === workflowStepIndex ? `${t.progressActiveBar} animate-pulse` : "bg-white/10"}`
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: L.workflowStep(workflowStepIndex + 1, totalSteps) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] text-gray-700 dark:text-gray-200 flex-1", children: workflowStepLabel || flow.workflow.steps[0]?.label })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", style: { height: 620 }, children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
       stage === "input" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -17375,7 +17415,11 @@ function DepartmentAssistantDemo({
               agents: flow.agents,
               agentAvatars: flow.agentAvatars,
               avatarGradient: t.inputAvatar,
-              cursorClass: t.inputCursor
+              cursorClass: t.inputCursor,
+              conversationLabel: L.conversation,
+              personaTagFn: L.personaTag,
+              composerHint: L.composerHint,
+              composerEnter: L.composerEnter
             }
           )
         },
@@ -17397,6 +17441,10 @@ function DepartmentAssistantDemo({
               hideHeader: true,
               stepDurationMs: workflowStepMs,
               onComplete: handleWorkflowComplete,
+              onStepChange: (idx, label) => {
+                setWorkflowStepIndex(idx);
+                setWorkflowStepLabel(label);
+              },
               theme: t.workflow,
               nodeAvatars: flow.nodeAvatars
             },
@@ -17422,9 +17470,9 @@ function DepartmentAssistantDemo({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400", children: [
         /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${t.progressActiveBar.replace("bg-", "text-")}` }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-          stage === "input" && "Usu\xE1rio envia um pedido ao assistente\u2026",
-          stage === "workflow" && "Astrlabe orquestrando agentes e datasources\u2026",
-          stage === "dashboard" && "Pronto \u2014 dashboard do ERP atualizado."
+          stage === "input" && L.footerInput,
+          stage === "workflow" && L.footerWorkflow,
+          stage === "dashboard" && L.footerDashboard
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: flows.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -17462,7 +17510,11 @@ function InputStage3({
   agents,
   agentAvatars,
   avatarGradient,
-  cursorClass
+  cursorClass,
+  conversationLabel,
+  personaTagFn,
+  composerHint,
+  composerEnter
 }) {
   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";
@@ -17470,10 +17522,7 @@ function InputStage3({
   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 ",
-      personaName,
-      " \xB7 ",
-      department
+      conversationLabel(personaName, 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: [
@@ -17490,7 +17539,7 @@ function InputStage3({
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${avatarGradient} shadow-md`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-5 w-5 text-white" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-bl-md px-5 py-3.5", children: [
-          assistantMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: personaName }),
+          assistantMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: personaTagFn(personaName) }),
           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" } }),
@@ -17519,8 +17568,8 @@ function InputStage3({
       ] })
     ] }),
     /* @__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" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: composerHint }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500", children: composerEnter })
     ] }) })
   ] });
 }
@@ -25528,5 +25577,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-4VUNR53L.js.map
-//# sourceMappingURL=chunk-4VUNR53L.js.map
+//# sourceMappingURL=chunk-TUEYBNWL.js.map
+//# sourceMappingURL=chunk-TUEYBNWL.js.map