@datatechsolutions/ui 3.8.0 → 3.8.1

package/dist/platform/pages/index.mjs

@@ -2785,6 +2785,84 @@ var DIFFICULTY_OPTIONS = [
   { id: "expert", emoji: "\u{1F9E0}", accent: "from-rose-500 to-purple-600" }
 ];
 var EMOJI_PALETTE = ["\u{1F4BC}", "\u{1F3A7}", "\u{1F4CA}", "\u{1F6E1}\uFE0F", "\u{1F52C}", "\u2728", "\u{1F916}", "\u26A1", "\u{1F3AF}", "\u{1F680}", "\u{1F9E0}", "\u{1F9BE}", "\u{1F4E1}", "\u{1F52E}", "\u{1F310}", "\u{1F5C2}\uFE0F"];
+function RangeSliderField({
+  sliderId,
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  zones,
+  trackGradient,
+  formatValue,
+  ariaLabel
+}) {
+  const percent = (value - min) / (max - min) * 100;
+  const activeZone = zones?.find((z) => value <= z.max) ?? zones?.[zones.length - 1];
+  const thumbColor = activeZone?.thumbColor ?? "#6366f1";
+  const glow = hexToGlow(thumbColor);
+  const displayValue = formatValue ? formatValue(value) : value.toString();
+  const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(0, Math.min(100, percent))}%`,
+            background: trackGradient ?? `linear-gradient(90deg, ${thumbColor}, ${thumbColor})`
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: sliderId,
+          "data-slider-id": sliderId,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => onChange(parseFloat(e.target.value)),
+          "aria-label": ariaLabel ?? label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-valuetext": ariaText,
+          className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
+    ] }),
+    zones && zones.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center justify-between", children: zones.map((z) => {
+      const isActive = z.label === activeZone?.label;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          children: z.label
+        },
+        z.label
+      );
+    }) })
+  ] });
+}
+function hexToGlow(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return "rgba(99,102,241,0.5)";
+  const int = parseInt(m[1], 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `rgba(${r},${g},${b},0.5)`;
+}
 function CreateAgentDialog({
   labels,
   models,
@@ -3054,75 +3132,136 @@ function CreateAgentDialog({
               subtitle: labels.behaviorSubtitle ?? "System prompt shapes how the agent thinks"
             },
             children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-system-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.promptSystemPrompt ?? "System prompt" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    systemPrompt.length,
+                    " chars"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    id: "create-agent-system-prompt",
+                    value: systemPrompt,
+                    onChange: (e) => setSystemPrompt(e.target.value),
+                    rows: 8,
+                    className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                    placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-user-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.userPromptLabel ?? "User prompt template" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    userPrompt.length,
+                    " chars"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    id: "create-agent-user-prompt",
+                    value: userPrompt,
+                    onChange: (e) => setUserPrompt(e.target.value),
+                    rows: 5,
+                    className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                    placeholder: labels.userPromptPlaceholder ?? "Analyze {{ nodeId.path }} and produce a summary."
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx(
-                FormTextarea,
+                RangeSliderField,
                 {
-                  label: labels.promptSystemPrompt ?? "System prompt",
-                  value: systemPrompt,
-                  onValueChange: setSystemPrompt,
-                  rows: 5,
-                  placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
+                  sliderId: "create-agent-temperature",
+                  label: labels.temperature,
+                  value: temperature,
+                  onChange: setTemperature,
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  trackGradient: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)",
+                  formatValue: (v) => v.toFixed(2),
+                  zones: [
+                    { label: "Precise", max: 0.3, color: "text-blue-500", thumbColor: "#3b82f6" },
+                    { label: "Balanced", max: 0.7, color: "text-purple-500", thumbColor: "#8b5cf6" },
+                    { label: "Creative", max: 1, color: "text-pink-500", thumbColor: "#ec4899" }
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx(
-                FormTextarea,
+                RangeSliderField,
                 {
-                  label: labels.userPromptLabel ?? "User prompt template",
-                  value: userPrompt,
-                  onValueChange: setUserPrompt,
-                  rows: 4,
-                  placeholder: labels.userPromptPlaceholder ?? "Analyze {{ nodeId.path }} and produce a summary."
+                  sliderId: "create-agent-top-p",
+                  label: labels.topPLabel ?? "Top-P",
+                  value: topP,
+                  onChange: setTopP,
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  trackGradient: "linear-gradient(90deg, #6366f1, #8b5cf6)",
+                  formatValue: (v) => v.toFixed(2),
+                  zones: [
+                    { label: "Top-P", max: 1, color: "text-violet-500", thumbColor: "#8b5cf6" }
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxs(FormGrid, { children: [
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: `${labels.temperature} (${temperature.toFixed(2)})`,
-                    type: "number",
-                    value: String(temperature),
-                    onValueChange: (v) => setTemperature(Number(v) || 0),
-                    step: 0.1,
-                    min: 0,
-                    max: 2
-                  }
-                ),
+              /* @__PURE__ */ jsx(
+                RangeSliderField,
+                {
+                  sliderId: "create-agent-top-k",
+                  label: labels.topKLabel ?? "Top-K",
+                  value: topK,
+                  onChange: (v) => setTopK(Math.max(0, Math.floor(v))),
+                  min: 0,
+                  max: 500,
+                  step: 1,
+                  trackGradient: "linear-gradient(90deg, #10b981, #14b8a6)",
+                  formatValue: (v) => v.toString(),
+                  zones: [
+                    { label: "Top-K", max: 500, color: "text-emerald-500", thumbColor: "#10b981" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-max-tokens", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.maxTokens }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  FormInput,
+                  "input",
                   {
-                    label: labels.maxTokens,
+                    id: "create-agent-max-tokens",
                     type: "number",
-                    value: String(maxTokens),
-                    onValueChange: (v) => setMaxTokens(Number(v) || 0),
+                    value: maxTokens,
+                    onChange: (e) => setMaxTokens(Math.max(1, Math.floor(Number(e.target.value) || 0))),
                     min: 1,
-                    max: 32e3
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: `${labels.topPLabel ?? "Top-P"} (${topP.toFixed(2)})`,
-                    type: "number",
-                    value: String(topP),
-                    onValueChange: (v) => setTopP(Number(v) || 0),
-                    step: 0.05,
-                    min: 0,
-                    max: 1
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: labels.topKLabel ?? "Top-K",
-                    type: "number",
-                    value: String(topK),
-                    onValueChange: (v) => setTopK(Math.max(0, Math.floor(Number(v) || 0))),
+                    max: 32e3,
                     step: 1,
-                    min: 0,
-                    max: 500
+                    className: "w-full rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 text-sm tabular-nums text-gray-700 outline-none transition-colors focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20"
                   }
                 )
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-gray-200/30 dark:bg-white/10", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.model }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: matchingModels.find((m) => m.id === modelId)?.name ?? labels.modelEmpty })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.maxTokens }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.temperature }),
+                  /* @__PURE__ */ jsxs("p", { className: `text-xs font-semibold ${temperature <= 0.3 ? "text-blue-500" : temperature <= 0.7 ? "text-purple-500" : "text-pink-500"}`, children: [
+                    temperature.toFixed(2),
+                    " \xB7 ",
+                    temperature <= 0.3 ? "Precise" : temperature <= 0.7 ? "Balanced" : "Creative"
+                  ] })
+                ] })
+              ] }) })
             ] })
           }
         ),