@datatechsolutions/ui 2.11.9 → 2.11.11

package/dist/astrlabe/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import '../chunk-JB6RNAD2.mjs';
 export { topologicalSortAgents, validateWorkflowGraph } from '../chunk-BLNXRUC4.mjs';
-import { Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META } from '../chunk-VWKBMTTC.mjs';
+import { Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, getEntityIcon, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, getEntityGradient } from '../chunk-VWKBMTTC.mjs';
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore } from '../chunk-VWKBMTTC.mjs';
 import { GlassModalShell, Button, FormInput, FormTextarea, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-46ZM5VJJ.mjs';
 import '../chunk-QWG2FMUN.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';
 
@@ -1073,6 +1073,31 @@ function PipelineSettingsModal({ onSave }) {
     }
   );
 }
+var DATASOURCE_GRADIENTS = {
+  bigquery: "from-blue-500 to-indigo-600",
+  postgres: "from-sky-500 to-blue-600",
+  snowflake: "from-cyan-400 to-blue-500",
+  mongodb: "from-green-500 to-emerald-600",
+  redis: "from-red-500 to-rose-600",
+  mysql: "from-blue-600 to-indigo-700",
+  clickhouse: "from-amber-500 to-yellow-600",
+  elasticsearch: "from-teal-500 to-cyan-600",
+  duckdb: "from-yellow-500 to-amber-600"
+};
+function getDatasourceGradient(entityId) {
+  const lower = entityId.toLowerCase();
+  for (const [key, gradient] of Object.entries(DATASOURCE_GRADIENTS)) {
+    if (lower.includes(key)) return gradient;
+  }
+  return getEntityGradient(entityId);
+}
+var PROVIDER_GRADIENTS = {
+  anthropic: "from-amber-500 to-orange-600",
+  amazon: "from-orange-500 to-amber-600",
+  google: "from-blue-500 to-cyan-600",
+  openai: "from-emerald-500 to-teal-600",
+  meta: "from-blue-600 to-indigo-700"
+};
 function onDragStart(event, nodeType, entityId, label, config) {
   event.dataTransfer.setData("nodeType", nodeType);
   event.dataTransfer.setData("entityId", entityId);
@@ -1189,7 +1214,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();
@@ -1217,6 +1242,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,
@@ -1281,58 +1312,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(
@@ -1411,7 +1439,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
             limit: entity.defaultLimit
           });
           const EntityIcon = getEntityIcon(entity.id);
-          const entityGradient = getEntityGradient(entity.id);
+          const entityGradient = getDatasourceGradient(entity.id);
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1435,6 +1463,41 @@ 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) => {
+          const providerIcon = getModelIcon(`${provider.provider}.placeholder`);
+          const ProviderIcon = providerIcon.IconComponent;
+          const providerGradient = PROVIDER_GRADIENTS[provider.provider] ?? "from-rose-400 to-pink-500";
+          return /* @__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 ${providerGradient} shadow-sm`, children: /* @__PURE__ */ jsx(ProviderIcon, { 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,
       {