@datatechsolutions/ui 2.11.8 → 2.11.10

package/dist/astrlabe/index.mjs

@@ -11,7 +11,7 @@ import { getAgentTier, createDefaultLogicNodeConfig } from '../chunk-TLPPVL3W.mj
 export { applyDagreLayout, createDefaultLogicNodeConfig, getAgentTier } from '../chunk-TLPPVL3W.mjs';
 import { useTranslations } from '../chunk-7VJ7CMMT.mjs';
 import { memo, useCallback, useState, useEffect, useMemo, useRef, Children } from 'react';
-import { CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, Cog6ToothIcon, CommandLineIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, Cog6ToothIcon, CommandLineIcon, PlusIcon, AdjustmentsHorizontalIcon, CircleStackIcon, KeyIcon, TrashIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { create } from 'zustand';
 
@@ -952,9 +952,12 @@ function WorkspaceModal({
   onClose,
   title,
   subtitle,
+  label,
   icon,
   gradient = "from-gray-400 to-gray-500",
   maxWidth = "2xl",
+  headerActions,
+  footer,
   tabs,
   children
 }) {
@@ -966,9 +969,12 @@ function WorkspaceModal({
       onClose,
       title,
       subtitle,
+      label,
       icon,
       gradient,
       maxWidth: resolvedSize,
+      headerActions,
+      footer,
       children: [
         tabs,
         children
@@ -1183,7 +1189,7 @@ function LogicNodeItemCard({ item, translationFunction }) {
     }
   );
 }
-function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onCreateAgent, onCreateTool, onCreateAgentTool, onCreateRule, onCreateDatasource }) {
+function NodePalette({ agents, tools, agentTools = [], rules, entities = [], modelProviders = [], onCreateAgent, onCreateTool, onCreateAgentTool, onCreateRule, onCreateDatasource, onConfigureProvider }) {
   const t = useTranslations("agents.workflow");
   const [searchQuery, setSearchQuery] = useState("");
   const normalizedQuery = searchQuery.toLowerCase().trim();
@@ -1211,6 +1217,12 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
     ) : rules,
     [rules, normalizedQuery]
   );
+  const filteredProviders = useMemo(
+    () => normalizedQuery ? modelProviders.filter(
+      (provider) => provider.name.toLowerCase().includes(normalizedQuery) || provider.provider.toLowerCase().includes(normalizedQuery)
+    ) : modelProviders,
+    [modelProviders, normalizedQuery]
+  );
   const entityTypes = useMemo(
     () => entities.map((entity) => ({
       id: entity.id,
@@ -1275,58 +1287,55 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
         colorClass: "text-indigo-600 dark:text-indigo-400",
         onAdd: onCreateAgent,
         addLabel: t("newAgent"),
-        children: filteredAgents.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : filteredAgents.map((agent) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            draggable: true,
-            onDragStart: (event) => onDragStart(event, "agent", agent.agentId, agent.name),
-            className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-                agent.avatar ? /* @__PURE__ */ jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 rounded-full bg-white shadow-sm ring-1 ring-gray-200/50 dark:bg-gray-800 dark:ring-white/10" }) : /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
-                /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-2 w-2 text-white" }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
-                  (() => {
-                    const tier = getAgentTier(Number(agent.elo ?? 0));
-                    return /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-px text-[8px] font-bold ${tier.pillColor}`, children: t(`agentDrawer.tier${tier.key.charAt(0).toUpperCase()}${tier.key.slice(1)}`) });
-                  })()
+        count: filteredAgents.length + filteredAgentTools.length,
+        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          filteredAgents.map((agent) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (event) => onDragStart(event, "agent", agent.agentId, agent.name),
+              className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+                  agent.avatar ? /* @__PURE__ */ jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 rounded-full bg-white shadow-sm ring-1 ring-gray-200/50 dark:bg-gray-800 dark:ring-white/10" }) : /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-2 w-2 text-white" }) })
                 ] }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
-              ] })
-            ]
-          },
-          agent.agentId
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CollapsibleSection,
-      {
-        title: t("agentToolsSection"),
-        icon: /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3" }),
-        colorClass: "text-amber-600 dark:text-amber-400",
-        onAdd: onCreateAgentTool,
-        addLabel: t("newAgentTool"),
-        children: filteredAgentTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgentTools") }) : filteredAgentTools.map((agentTool) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            draggable: true,
-            onDragStart: (event) => onDragStart(event, "agent_tool", agentTool.agentToolId, agentTool.name),
-            className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-amber-400 to-orange-500 shadow-sm", children: /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3.5 w-3.5 text-white" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agentTool.name }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agentTool.category ?? "custom" })
-              ] }),
-              !agentTool.enabled && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-1.5 py-0.5 text-[9px] font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400", children: "off" })
-            ]
-          },
-          agentTool.agentToolId
-        ))
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
+                    (() => {
+                      const tier = getAgentTier(Number(agent.elo ?? 0));
+                      return /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-px text-[8px] font-bold ${tier.pillColor}`, children: t(`agentDrawer.tier${tier.key.charAt(0).toUpperCase()}${tier.key.slice(1)}`) });
+                    })()
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
+                ] })
+              ]
+            },
+            agent.agentId
+          )),
+          filteredAgentTools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 mb-1 flex items-center gap-1.5 px-1", children: [
+              /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-2.5 w-2.5 text-amber-500 dark:text-amber-400" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400", children: t("agentToolsSection") }),
+              onCreateAgentTool && /* @__PURE__ */ jsx("button", { type: "button", onClick: onCreateAgentTool, className: "ml-auto text-[9px] font-medium text-amber-500 hover:text-amber-600 dark:text-amber-400", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" }) })
+            ] }),
+            filteredAgentTools.map((agentTool) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                draggable: true,
+                onDragStart: (event) => onDragStart(event, "agent_tool", agentTool.agentToolId, agentTool.name),
+                className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-1.5 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-gradient-to-br from-amber-400 to-orange-500 shadow-sm", children: /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3 text-white" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] font-medium text-gray-900 dark:text-white", children: agentTool.name }) }),
+                  !agentTool.enabled && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-1.5 py-0.5 text-[8px] font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400", children: "off" })
+                ]
+              },
+              agentTool.agentToolId
+            ))
+          ] })
+        ] })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1429,6 +1438,36 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
         })
       }
     ),
+    filteredProviders.length > 0 && /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("modelProvidersSection"),
+        icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3" }),
+        colorClass: "text-rose-600 dark:text-rose-400",
+        count: filteredProviders.length,
+        children: filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-pointer hover:shadow-md",
+            onClick: () => onConfigureProvider?.(provider.id),
+            role: "button",
+            tabIndex: 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-rose-400 to-pink-500 shadow-sm", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: provider.name }),
+                /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  provider.modelCount,
+                  " models"
+                ] })
+              ] }),
+              provider.configured ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-green-100 px-1.5 py-0.5 text-[9px] font-medium text-green-600 dark:bg-green-500/10 dark:text-green-400", children: t("configured") }) : /* @__PURE__ */ jsx("span", { className: "rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-600 dark:bg-amber-500/10 dark:text-amber-400", children: t("setup") })
+            ]
+          },
+          provider.id
+        ))
+      }
+    ),
     /* @__PURE__ */ jsxs(
       CollapsibleSection,
       {
@@ -2514,7 +2553,7 @@ function DslExportModal({ open, onClose, workflow, graph }) {
               "data-testid": "export-copy-button",
               children: isCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-green-500" }),
-                translations("copied")
+                /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: translations("copied") })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(ClipboardDocumentIcon, { className: "h-4 w-4" }),
                 translations("copyToClipboard")
@@ -2699,6 +2738,9 @@ function DslImportModal({ open, onClose, onImport }) {
             onClick: handleClickUpload,
             className: `cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors duration-200 ${isDragActive ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-500/10" : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"}`,
             "data-testid": "import-dropzone",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": translations("dropzone"),
             children: [
               /* @__PURE__ */ jsx(ArrowUpTrayIcon, { className: "mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" }),
               /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-700 dark:text-gray-300", children: translations("dropzone") }),
@@ -2738,7 +2780,7 @@ function DslImportModal({ open, onClose, onImport }) {
                 validationResult.edgeCount
               ] })
             ] })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20", children: [
+          ] }) : /* @__PURE__ */ jsxs("div", { role: "alert", className: "rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-5 w-5 text-red-500" }),
               /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: translations("validationFailed") })