@datatechsolutions/ui 3.7.3 → 3.7.5

package/dist/platform/pages/index.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-5W6LMDXV.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-5W6LMDXV.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-A4A3SQTV.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-A4A3SQTV.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-5YVOLHSW.mjs';
+import { WorkflowWorkspace } from '../../chunk-4HP7XS5I.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-4HP7XS5I.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-DCBRGVD3.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-DCBRGVD3.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-EIZM2EQA.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-57E4TCB2.mjs';
-import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, ManagementPageLayout, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent } from '../../chunk-E6C7MFHJ.mjs';
-import '../../chunk-7VJ7CMMT.mjs';
+import '../../chunk-N5365CGD.mjs';
+import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, ManagementPageLayout, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent } from '../../chunk-Z3BMHKKH.mjs';
 import '../../chunk-RHRJXK5R.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
+import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-PLTLRL2V.mjs';
 import { Badge, Button } from '../../chunk-WR55H7DH.mjs';
 import '../../chunk-D2JF6C3E.mjs';
@@ -2769,6 +2769,15 @@ function ModelTab({
     }
   );
 }
+var AGENT_PRESETS = [
+  { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600" },
+  { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600" },
+  { id: "finance", emoji: "\u{1F4CA}", name: "Financial Analyst", role: "Revenue, margins, reports", systemPrompt: "You are a financial analyst. Analyze revenue, calculate margins, generate performance reports, and identify trends. Use data-driven insights for recommendations.", temperature: 0.4, maxTokens: 4096, accent: "from-amber-500 to-orange-600" },
+  { id: "security", emoji: "\u{1F6E1}\uFE0F", name: "Security Analyst", role: "Threat monitoring & compliance", systemPrompt: "You are a security analyst. Monitor for threats, audit data access, ensure compliance with privacy regulations, and manage incident response.", temperature: 0.3, maxTokens: 2048, accent: "from-rose-500 to-red-600" },
+  { id: "data", emoji: "\u{1F52C}", name: "Data Analyst", role: "Pattern detection & cleaning", systemPrompt: "You are a data analyst. Process raw data inputs, identify patterns, clean datasets, and prepare structured analysis for downstream agents.", temperature: 0.5, maxTokens: 4096, accent: "from-violet-500 to-purple-600" },
+  { id: "custom", emoji: "\u2728", name: "", role: "", systemPrompt: "", temperature: 0.2, maxTokens: 2048, accent: "from-slate-500 to-slate-700" }
+];
+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 CreateAgentDialog({
   labels,
   models,
@@ -2776,47 +2785,200 @@ function CreateAgentDialog({
   onSubmit
 }) {
   const modelOptions = models.map((m) => ({ value: m.id, label: `${m.name} (${m.provider})` }));
+  const [presetId, setPresetId] = useState("custom");
+  const [emoji, setEmoji] = useState("\u2728");
+  const [name, setName] = useState("");
+  const [role, setRole] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [temperature, setTemperature] = useState(0.2);
+  const [maxTokens, setMaxTokens] = useState(2048);
+  const [modelId, setModelId] = useState(modelOptions[0]?.value ?? "");
+  const activePreset = AGENT_PRESETS.find((p) => p.id === presetId) ?? AGENT_PRESETS[AGENT_PRESETS.length - 1];
+  function applyPreset(preset) {
+    setPresetId(preset.id);
+    setEmoji(preset.emoji);
+    if (preset.id !== "custom") {
+      setName(preset.name);
+      setRole(preset.role);
+      setSystemPrompt(preset.systemPrompt);
+      setTemperature(preset.temperature);
+      setMaxTokens(preset.maxTokens);
+    }
+  }
   return /* @__PURE__ */ jsx(
     GlassModal,
     {
       open: true,
       onClose,
       title: labels.createAgentTitle,
-      maxWidth: "lg",
+      label: labels.createAgentEyebrow ?? "NEW AGENT",
+      icon: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br ${activePreset.accent} text-lg shadow-sm`,
+          "aria-hidden": "true",
+          children: emoji
+        }
+      ),
+      maxWidth: "2xl",
+      gradient: activePreset.accent,
       showFormFooter: true,
       submitLabel: labels.save,
       onSubmit: async (event) => {
-        const form = new FormData(event.currentTarget);
+        event.preventDefault();
         await onSubmit({
-          name: String(form.get("name") ?? "").trim(),
-          modelId: String(form.get("modelId") ?? modelOptions[0]?.value ?? ""),
-          systemPrompt: "",
-          maxTokens: Number(form.get("maxTokens") ?? 2048),
-          temperature: Number(form.get("temperature") ?? 0.2)
+          name: name.trim() || activePreset.name || "Untitled Agent",
+          modelId,
+          systemPrompt,
+          maxTokens,
+          temperature
         });
       },
-      children: /* @__PURE__ */ jsxs(FormGrid, { children: [
-        /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.name, required: true }),
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
         /* @__PURE__ */ jsx(
-          FormSelect,
+          SectionCard,
+          {
+            variant: "glass",
+            padded: false,
+            header: {
+              title: labels.presetTitle ?? "Start from a template",
+              subtitle: labels.presetSubtitle ?? "Pick a role or build a custom agent"
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 px-4 pb-4 sm:grid-cols-3", children: AGENT_PRESETS.map((preset) => {
+              const selected = preset.id === presetId;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => applyPreset(preset),
+                  className: [
+                    "liquid-surface group flex items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-all",
+                    selected ? "ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent" : "hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${preset.accent} text-base shadow-sm`,
+                        children: preset.emoji
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-slate-900 dark:text-white", children: preset.id === "custom" ? labels.presetCustom ?? "Custom" : preset.name }),
+                      /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: preset.role || (labels.presetCustomHint ?? "Start from scratch") })
+                    ] })
+                  ]
+                },
+                preset.id
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SectionCard,
           {
-            name: "modelId",
-            label: labels.model,
-            options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }],
-            defaultValue: modelOptions[0]?.value ?? ""
+            variant: "glass",
+            header: {
+              title: labels.identitySection ?? "Identity",
+              subtitle: labels.identitySubtitle ?? "How your agent shows up across workflows"
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.avatarLabel ?? "Avatar" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: EMOJI_PALETTE.map((e) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setEmoji(e),
+                    "aria-pressed": emoji === e,
+                    className: [
+                      "flex h-9 w-9 items-center justify-center rounded-lg text-base transition-all",
+                      emoji === e ? `bg-gradient-to-br ${activePreset.accent} shadow-sm ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent` : "liquid-surface hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
+                    ].join(" "),
+                    children: e
+                  },
+                  e
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs(FormGrid, { children: [
+                /* @__PURE__ */ jsx(
+                  FormInput,
+                  {
+                    label: labels.name,
+                    value: name,
+                    onValueChange: setName,
+                    required: true,
+                    placeholder: labels.namePlaceholder ?? "Sales Specialist"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FormInput,
+                  {
+                    label: labels.role,
+                    value: role,
+                    onValueChange: setRole,
+                    placeholder: labels.rolePlaceholder
+                  }
+                )
+              ] })
+            ] })
           }
         ),
-        /* @__PURE__ */ jsx(FormInput, { name: "maxTokens", label: labels.maxTokens, type: "number", defaultValue: "2048" }),
         /* @__PURE__ */ jsx(
-          FormInput,
+          SectionCard,
           {
-            name: "temperature",
-            label: labels.temperature,
-            type: "number",
-            step: 0.1,
-            min: 0,
-            max: 2,
-            defaultValue: "0.2"
+            variant: "glass",
+            header: {
+              title: labels.behaviorSection ?? "Behavior",
+              subtitle: labels.behaviorSubtitle ?? "System prompt shapes how the agent thinks"
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx(
+                FormTextarea,
+                {
+                  label: labels.promptSystemPrompt ?? "System prompt",
+                  value: systemPrompt,
+                  onValueChange: setSystemPrompt,
+                  rows: 5,
+                  placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
+                }
+              ),
+              /* @__PURE__ */ jsxs(FormGrid, { children: [
+                /* @__PURE__ */ jsx(
+                  FormSelect,
+                  {
+                    label: labels.model,
+                    value: modelId,
+                    onValueChange: setModelId,
+                    options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FormInput,
+                  {
+                    label: labels.maxTokens,
+                    type: "number",
+                    value: String(maxTokens),
+                    onValueChange: (v) => setMaxTokens(Number(v) || 0),
+                    min: 1,
+                    max: 32e3
+                  }
+                ),
+                /* @__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
+                  }
+                )
+              ] })
+            ] })
           }
         )
       ] })