@datatechsolutions/ui 2.11.9 → 2.11.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ import { getAgentTier, createDefaultLogicNodeConfig } from '../chunk-TLPPVL3W.mj
11
11
  export { applyDagreLayout, createDefaultLogicNodeConfig, getAgentTier } from '../chunk-TLPPVL3W.mjs';
12
12
  import { useTranslations } from '../chunk-7VJ7CMMT.mjs';
13
13
  import { memo, useCallback, useState, useEffect, useMemo, useRef, Children } from 'react';
14
- 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';
14
+ 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';
15
15
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
16
16
  import { create } from 'zustand';
17
17
 
@@ -1189,7 +1189,7 @@ function LogicNodeItemCard({ item, translationFunction }) {
1189
1189
  }
1190
1190
  );
1191
1191
  }
1192
- function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onCreateAgent, onCreateTool, onCreateAgentTool, onCreateRule, onCreateDatasource }) {
1192
+ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], modelProviders = [], onCreateAgent, onCreateTool, onCreateAgentTool, onCreateRule, onCreateDatasource, onConfigureProvider }) {
1193
1193
  const t = useTranslations("agents.workflow");
1194
1194
  const [searchQuery, setSearchQuery] = useState("");
1195
1195
  const normalizedQuery = searchQuery.toLowerCase().trim();
@@ -1217,6 +1217,12 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
1217
1217
  ) : rules,
1218
1218
  [rules, normalizedQuery]
1219
1219
  );
1220
+ const filteredProviders = useMemo(
1221
+ () => normalizedQuery ? modelProviders.filter(
1222
+ (provider) => provider.name.toLowerCase().includes(normalizedQuery) || provider.provider.toLowerCase().includes(normalizedQuery)
1223
+ ) : modelProviders,
1224
+ [modelProviders, normalizedQuery]
1225
+ );
1220
1226
  const entityTypes = useMemo(
1221
1227
  () => entities.map((entity) => ({
1222
1228
  id: entity.id,
@@ -1281,58 +1287,55 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
1281
1287
  colorClass: "text-indigo-600 dark:text-indigo-400",
1282
1288
  onAdd: onCreateAgent,
1283
1289
  addLabel: t("newAgent"),
1284
- 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(
1285
- "div",
1286
- {
1287
- draggable: true,
1288
- onDragStart: (event) => onDragStart(event, "agent", agent.agentId, agent.name),
1289
- 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",
1290
- children: [
1291
- /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
1292
- 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" }) }),
1293
- /* @__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" }) })
1294
- ] }),
1295
- /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1296
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1297
- /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
1298
- (() => {
1299
- const tier = getAgentTier(Number(agent.elo ?? 0));
1300
- 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)}`) });
1301
- })()
1290
+ count: filteredAgents.length + filteredAgentTools.length,
1291
+ 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: [
1292
+ filteredAgents.map((agent) => /* @__PURE__ */ jsxs(
1293
+ "div",
1294
+ {
1295
+ draggable: true,
1296
+ onDragStart: (event) => onDragStart(event, "agent", agent.agentId, agent.name),
1297
+ 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",
1298
+ children: [
1299
+ /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
1300
+ 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" }) }),
1301
+ /* @__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" }) })
1302
1302
  ] }),
1303
- /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
1304
- ] })
1305
- ]
1306
- },
1307
- agent.agentId
1308
- ))
1309
- }
1310
- ),
1311
- /* @__PURE__ */ jsx(
1312
- CollapsibleSection,
1313
- {
1314
- title: t("agentToolsSection"),
1315
- icon: /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3" }),
1316
- colorClass: "text-amber-600 dark:text-amber-400",
1317
- onAdd: onCreateAgentTool,
1318
- addLabel: t("newAgentTool"),
1319
- 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(
1320
- "div",
1321
- {
1322
- draggable: true,
1323
- onDragStart: (event) => onDragStart(event, "agent_tool", agentTool.agentToolId, agentTool.name),
1324
- 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",
1325
- children: [
1326
- /* @__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" }) }),
1327
- /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1328
- /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agentTool.name }),
1329
- /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agentTool.category ?? "custom" })
1330
- ] }),
1331
- !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" })
1332
- ]
1333
- },
1334
- agentTool.agentToolId
1335
- ))
1303
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1304
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1305
+ /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
1306
+ (() => {
1307
+ const tier = getAgentTier(Number(agent.elo ?? 0));
1308
+ 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)}`) });
1309
+ })()
1310
+ ] }),
1311
+ /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
1312
+ ] })
1313
+ ]
1314
+ },
1315
+ agent.agentId
1316
+ )),
1317
+ filteredAgentTools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
1318
+ /* @__PURE__ */ jsxs("div", { className: "mt-2 mb-1 flex items-center gap-1.5 px-1", children: [
1319
+ /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-2.5 w-2.5 text-amber-500 dark:text-amber-400" }),
1320
+ /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400", children: t("agentToolsSection") }),
1321
+ 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" }) })
1322
+ ] }),
1323
+ filteredAgentTools.map((agentTool) => /* @__PURE__ */ jsxs(
1324
+ "div",
1325
+ {
1326
+ draggable: true,
1327
+ onDragStart: (event) => onDragStart(event, "agent_tool", agentTool.agentToolId, agentTool.name),
1328
+ 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",
1329
+ children: [
1330
+ /* @__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" }) }),
1331
+ /* @__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 }) }),
1332
+ !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" })
1333
+ ]
1334
+ },
1335
+ agentTool.agentToolId
1336
+ ))
1337
+ ] })
1338
+ ] })
1336
1339
  }
1337
1340
  ),
1338
1341
  /* @__PURE__ */ jsx(
@@ -1435,6 +1438,36 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], onC
1435
1438
  })
1436
1439
  }
1437
1440
  ),
1441
+ filteredProviders.length > 0 && /* @__PURE__ */ jsx(
1442
+ CollapsibleSection,
1443
+ {
1444
+ title: t("modelProvidersSection"),
1445
+ icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3" }),
1446
+ colorClass: "text-rose-600 dark:text-rose-400",
1447
+ count: filteredProviders.length,
1448
+ children: filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
1449
+ "div",
1450
+ {
1451
+ className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-pointer hover:shadow-md",
1452
+ onClick: () => onConfigureProvider?.(provider.id),
1453
+ role: "button",
1454
+ tabIndex: 0,
1455
+ children: [
1456
+ /* @__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" }) }),
1457
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1458
+ /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: provider.name }),
1459
+ /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
1460
+ provider.modelCount,
1461
+ " models"
1462
+ ] })
1463
+ ] }),
1464
+ 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") })
1465
+ ]
1466
+ },
1467
+ provider.id
1468
+ ))
1469
+ }
1470
+ ),
1438
1471
  /* @__PURE__ */ jsxs(
1439
1472
  CollapsibleSection,
1440
1473
  {