@datatechsolutions/ui 2.8.7 → 2.8.9

package/dist/{chunk-D3INPADN.mjs → chunk-EOU3POSF.mjs}

@@ -1,14 +1,14 @@
 "use client";
-import { EntityDrawer, ContextMenu, FormInput, FormTextarea, FormSelect, Button, Card, CardContent, IconButton, Input } from './chunk-SHKRLL36.mjs';
+import { EntityDrawer, ContextMenu, FormInput, FormTextarea, FormSelect, Button, Card, CardContent, IconButton, Input } from './chunk-2X3BZNSE.mjs';
+import { GraphNodeHeader, GraphNodeMeta, GraphNodeBadge, GraphNodeIconBubble } from './chunk-OZNTQROP.mjs';
+import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-AM2TTPYM.mjs';
 import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-7VJ7CMMT.mjs';
-import { GraphNodeHeader, GraphNodeMeta, GraphNodeBadge, GraphNodeIconBubble } from './chunk-UBCSCLUW.mjs';
-import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-BTJP5QCD.mjs';
 import { memo, useState, useRef, useCallback, useEffect, lazy, createContext, useMemo, useContext } from 'react';
 import { Position, NodeResizer, MarkerType, useReactFlow, getBezierPath, BaseEdge, EdgeLabelRenderer, Handle, ReactFlowProvider, useNodesState, useEdgesState, addEdge, BackgroundVariant } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { create } from 'zustand';
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { Bars2Icon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, ArrowsPointingInIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, MapIcon, Squares2X2Icon, ArrowsRightLeftIcon, CommandLineIcon, ExclamationTriangleIcon, CpuChipIcon, TrashIcon, WrenchScrewdriverIcon, NewspaperIcon, ChartBarIcon, CloudIcon, ScaleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, PlayIcon, StopIcon, ArrowsPointingOutIcon, CodeBracketIcon, GlobeAltIcon, DocumentTextIcon, ArrowPathIcon, BookOpenIcon, ChatBubbleLeftRightIcon, QuestionMarkCircleIcon, AdjustmentsVerticalIcon, Square3Stack3DIcon, DocumentMagnifyingGlassIcon, ListBulletIcon, PlayCircleIcon, PencilSquareIcon, RectangleGroupIcon, ChevronDownIcon, ChevronUpIcon, ServerStackIcon, PresentationChartBarIcon, ChartPieIcon, ChartBarSquareIcon, CurrencyDollarIcon, ShieldCheckIcon, ClipboardDocumentCheckIcon, FireIcon, ShoppingBagIcon, UsersIcon, BuildingStorefrontIcon, PencilIcon, DocumentDuplicateIcon, ClipboardDocumentIcon, ClipboardIcon, PlusIcon as PlusIcon$1, XMarkIcon as XMarkIcon$1 } from '@heroicons/react/24/outline';
+import { Bars2Icon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, ArrowsPointingInIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, MapIcon, Squares2X2Icon, ArrowsRightLeftIcon, CommandLineIcon, ExclamationTriangleIcon, CpuChipIcon, TrashIcon, WrenchScrewdriverIcon, NewspaperIcon, ChartBarIcon, CloudIcon, ScaleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, PlayIcon, StopIcon, ArrowsPointingOutIcon, CodeBracketIcon, GlobeAltIcon, DocumentTextIcon, ArrowPathIcon, BookOpenIcon, ChatBubbleLeftRightIcon, QuestionMarkCircleIcon, AdjustmentsVerticalIcon, Square3Stack3DIcon, DocumentMagnifyingGlassIcon, ListBulletIcon, PlayCircleIcon, PencilSquareIcon, ServerStackIcon, RectangleGroupIcon, ChevronDownIcon, ChevronUpIcon, PresentationChartBarIcon, ChartPieIcon, ChartBarSquareIcon, CurrencyDollarIcon, ShieldCheckIcon, ClipboardDocumentCheckIcon, FireIcon, ShoppingBagIcon, UsersIcon, BuildingStorefrontIcon, PencilIcon, DocumentDuplicateIcon, ClipboardDocumentIcon, ClipboardIcon, PlusIcon as PlusIcon$1, XMarkIcon as XMarkIcon$1 } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_PASTE_OFFSET = 40;
@@ -2633,6 +2633,83 @@ var NoteFlowNode = memo(function NoteFlowNode2({ data, selected }) {
     }
   );
 });
+var DatasourceFlowNode = memo(function DatasourceFlowNode2({ id, data, selected }) {
+  const t = useTranslations("agents.workflow");
+  const { config, label, onEdit, onRemoveFromCanvas } = data;
+  const isCompact = data.displayMode === "compact";
+  if (!config || config.type !== "datasource") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-cyan-400" }),
+      /* @__PURE__ */ jsx(NodeCard, { variant: "error", nodeType: "datasource", children: /* @__PURE__ */ jsx(
+        NodeCardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-5 w-5 text-white" }),
+          title: label || t("datasourceNodeType"),
+          description: t("datasourceNotConfigured"),
+          iconClassName: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-cyan-400" })
+    ] });
+  }
+  const columnCount = config.selectedColumns?.length ?? 0;
+  const filterCount = config.filterVariables ? Object.keys(config.filterVariables).length : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-cyan-400" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onEdit?.(id),
+        className: "w-full text-left",
+        children: /* @__PURE__ */ jsxs(NodeCard, { compact: isCompact, selected, nodeType: "datasource", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg", children: /* @__PURE__ */ jsx(ServerStackIcon, { className: "h-5 w-5 text-white" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: label }),
+              !isCompact && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: config.table ?? config.datasourceId })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(NodeCardMeta, { compact: isCompact, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              config.dialect && /* @__PURE__ */ jsx(NodeCardBadge, { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300", children: config.dialect }),
+              config.table && /* @__PURE__ */ jsx(NodeCardBadge, { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300", children: config.table }),
+              columnCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                columnCount,
+                " ",
+                t("datasourceColumns")
+              ] }),
+              config.limit > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("datasourceLimit", { count: config.limit }) }),
+              filterCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                filterCount,
+                " ",
+                t("datasourceFilters")
+              ] })
+            ] }),
+            onRemoveFromCanvas && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                  onRemoveFromCanvas(id);
+                },
+                className: "nodrag nopan cursor-pointer rounded-lg p-1 opacity-0 transition hover:bg-red-50 group-hover:opacity-100 dark:hover:bg-red-900/20",
+                "aria-label": t("removeFromCanvas"),
+                children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-3.5 w-3.5 text-red-600 dark:text-red-400" })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-cyan-400" })
+  ] });
+});
 var GROUP_COLORS = {
   indigo: {
     border: "border-indigo-300/50 dark:border-indigo-600/50",
@@ -4555,6 +4632,328 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
     ] })
   ] });
 }
+var COLUMN_TYPE_BADGE_COLORS = {
+  string: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
+  varchar: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
+  text: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
+  integer: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  int: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  bigint: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  number: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  decimal: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  float: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
+  boolean: "bg-green-100 text-green-600 dark:bg-green-500/20 dark:text-green-300",
+  date: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
+  timestamp: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
+  datetime: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
+  json: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
+  jsonb: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
+  uuid: "bg-teal-100 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300"
+};
+function DatasourceNodeConfigForm({
+  nodeId,
+  config,
+  onSave,
+  onCancel,
+  datasources,
+  onLoadTables,
+  onLoadSchema
+}) {
+  const t = useTranslations("agents.workflow.datasourceNodeConfig");
+  const [selectedDatasourceId, setSelectedDatasourceId] = useState(config.datasourceId ?? "");
+  const [selectedTable, setSelectedTable] = useState(config.table ?? "");
+  const [availableTables, setAvailableTables] = useState([]);
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const [selectedColumns, setSelectedColumns] = useState([...config.selectedColumns]);
+  const [outputVariable, setOutputVariable] = useState(config.outputVariable);
+  const [limit, setLimit] = useState(config.limit);
+  const [filterVariables, setFilterVariables] = useState({ ...config.filterVariables });
+  const allColumnNames = availableColumns.map((column) => column.name);
+  const allSelected = selectedColumns.length > 0 && selectedColumns.length === allColumnNames.length;
+  const selectedDatasource = datasources.find((datasource) => datasource.id === selectedDatasourceId);
+  const loadTables = useCallback(async (datasourceId) => {
+    if (!datasourceId) {
+      setAvailableTables([]);
+      return;
+    }
+    const tables = await onLoadTables(datasourceId);
+    setAvailableTables(tables);
+  }, [onLoadTables]);
+  const loadSchema = useCallback(async (datasourceId, table) => {
+    if (!datasourceId || !table) {
+      setAvailableColumns([]);
+      return;
+    }
+    const columns = await onLoadSchema(datasourceId, table);
+    setAvailableColumns(columns);
+  }, [onLoadSchema]);
+  useEffect(() => {
+    if (selectedDatasourceId) {
+      loadTables(selectedDatasourceId);
+    }
+  }, [selectedDatasourceId, loadTables]);
+  useEffect(() => {
+    if (selectedDatasourceId && selectedTable) {
+      loadSchema(selectedDatasourceId, selectedTable);
+    }
+  }, [selectedDatasourceId, selectedTable, loadSchema]);
+  const handleDatasourceChange = (datasourceId) => {
+    setSelectedDatasourceId(datasourceId);
+    setSelectedTable("");
+    setAvailableTables([]);
+    setAvailableColumns([]);
+    setSelectedColumns([]);
+    setFilterVariables({});
+  };
+  const handleTableChange = (table) => {
+    setSelectedTable(table);
+    setAvailableColumns([]);
+    setSelectedColumns([]);
+    setFilterVariables({});
+  };
+  const handleToggleSelectAll = () => {
+    if (allSelected) {
+      setSelectedColumns([]);
+    } else {
+      setSelectedColumns([...allColumnNames]);
+    }
+  };
+  const handleToggleColumn = (columnName) => {
+    setSelectedColumns(
+      (previous) => previous.includes(columnName) ? previous.filter((name) => name !== columnName) : [...previous, columnName]
+    );
+  };
+  const handleAddFilter = () => {
+    setFilterVariables((previous) => ({ ...previous, "": "" }));
+  };
+  const handleUpdateFilterVariable = (oldKey, newKey) => {
+    setFilterVariables((previous) => {
+      const updated = { ...previous };
+      const value = updated[oldKey] ?? "";
+      delete updated[oldKey];
+      updated[newKey] = value;
+      return updated;
+    });
+  };
+  const handleUpdateFilterField = (key, newValue) => {
+    setFilterVariables((previous) => ({ ...previous, [key]: newValue }));
+  };
+  const handleRemoveFilter = (key) => {
+    setFilterVariables((previous) => {
+      const updated = { ...previous };
+      delete updated[key];
+      return updated;
+    });
+  };
+  const handleSave = () => {
+    const cleanedFilters = {};
+    for (const [key, value] of Object.entries(filterVariables)) {
+      if (key.trim() && value.trim()) {
+        cleanedFilters[key.trim()] = value.trim();
+      }
+    }
+    onSave({
+      ...config,
+      datasourceId: selectedDatasourceId,
+      dialect: selectedDatasource?.dialect ?? "",
+      table: selectedTable,
+      selectedColumns,
+      outputVariable: outputVariable.trim(),
+      limit,
+      filterVariables: cleanedFilters
+    });
+  };
+  const filterEntries = Object.entries(filterVariables);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("datasourceLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: selectedDatasourceId,
+          onChange: (event) => handleDatasourceChange(event.target.value),
+          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("selectDatasource") }),
+            datasources.map((datasource) => /* @__PURE__ */ jsxs("option", { value: datasource.id, children: [
+              datasource.name,
+              " (",
+              datasource.dialect,
+              ")"
+            ] }, datasource.id))
+          ]
+        }
+      ),
+      selectedDatasource && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300", children: selectedDatasource.dialect }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("tableLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: selectedTable,
+          onChange: (event) => handleTableChange(event.target.value),
+          disabled: !selectedDatasourceId,
+          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("selectTable") }),
+            availableTables.map((table) => /* @__PURE__ */ jsx("option", { value: table, children: table }, table))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: outputVariable,
+          onChange: (event) => setOutputVariable(event.target.value),
+          placeholder: "datasourceResult",
+          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: limit,
+          onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
+          min: 1,
+          max: 1e4,
+          className: "w-32 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("columnsLabel") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggleSelectAll,
+            disabled: availableColumns.length === 0,
+            className: "text-xs font-medium text-indigo-600 hover:text-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:text-indigo-400 dark:hover:text-indigo-300",
+            children: allSelected ? t("deselectAll") : t("selectAll")
+          }
+        )
+      ] }),
+      selectedColumns.length === 0 && availableColumns.length > 0 && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: t("noColumnsSelected") }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto rounded-lg border border-gray-200 p-2 dark:border-gray-700", children: [
+        availableColumns.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-xs text-gray-500 dark:text-gray-400", children: t("noColumnsAvailable") }),
+        availableColumns.map((column) => {
+          const isSelected = selectedColumns.includes(column.name);
+          const typeBadgeColor = COLUMN_TYPE_BADGE_COLORS[column.type.toLowerCase()] ?? COLUMN_TYPE_BADGE_COLORS.string;
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isSelected ? "bg-indigo-50 dark:bg-indigo-500/10" : "hover:bg-gray-50 dark:hover:bg-gray-800"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isSelected,
+                    onChange: () => handleToggleColumn(column.name),
+                    className: "h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "flex-1 text-xs font-medium text-gray-900 dark:text-white", children: [
+                  column.name,
+                  column.nullable && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[9px] text-gray-400 dark:text-gray-500", children: "?" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeBadgeColor}`, children: column.type })
+              ]
+            },
+            column.name
+          );
+        })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("filtersLabel") }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddFilter,
+            className: "flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
+              t("addFilter")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+      filterEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, columnName], index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: columnName,
+            onChange: (event) => handleUpdateFilterField(variableName, event.target.value),
+            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("columnName") }),
+              availableColumns.map((column) => /* @__PURE__ */ jsx("option", { value: column.name, children: column.name }, column.name))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "=" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: variableName,
+            onChange: (event) => handleUpdateFilterVariable(variableName, event.target.value),
+            placeholder: t("variableReference"),
+            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveFilter(variableName),
+            className: "rounded-md p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20",
+            children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
+          children: t("cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleSave,
+          disabled: !selectedDatasourceId || !selectedTable || selectedColumns.length === 0,
+          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600",
+          children: t("save")
+        }
+      )
+    ] })
+  ] });
+}
 var GROUP_COLOR_OPTIONS = [
   { value: "indigo", ring: "ring-indigo-500", fill: "bg-indigo-500" },
   { value: "teal", ring: "ring-teal-500", fill: "bg-teal-500" },
@@ -4641,9 +5040,10 @@ var NODE_TITLE_KEYS = {
   list_operator: "listOperatorNodeConfig",
   iteration_start: "iterationStartNodeConfig",
   entity: "entityNodeConfig",
+  datasource: "datasourceNodeConfig",
   group: "groupNodeConfig"
 };
-function LogicNodeDrawer({ onSave, entities = [] }) {
+function LogicNodeDrawer({ onSave, entities = [], datasources = [], onLoadTables, onLoadSchema }) {
   const t = useTranslations("agents.workflow");
   const activeDrawer = useDrawerStore((s) => s.activeDrawer);
   const logicNodeData = useDrawerStore((s) => s.logicNodeData);
@@ -4695,6 +5095,19 @@ function LogicNodeDrawer({ onSave, entities = [] }) {
         return /* @__PURE__ */ jsx(ListOperatorNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
       case "iteration_start":
         return /* @__PURE__ */ jsx(IterationStartNodeConfigForm, { config, onSave: handleSave, onCancel: closeDrawer });
+      case "datasource":
+        return /* @__PURE__ */ jsx(
+          DatasourceNodeConfigForm,
+          {
+            nodeId,
+            config,
+            onSave: handleSave,
+            onCancel: closeDrawer,
+            datasources,
+            onLoadTables: onLoadTables ?? (async () => []),
+            onLoadSchema: onLoadSchema ?? (async () => [])
+          }
+        );
       case "entity":
         return /* @__PURE__ */ jsx(EntityNodeConfigForm, { config, entities, onSave: handleSave, onCancel: closeDrawer });
       case "group":
@@ -5066,6 +5479,7 @@ var BUILT_IN_NODE_TYPES = {
   list_operator: ListOperatorFlowNode,
   iteration_start: IterationStartFlowNode,
   note: NoteFlowNode,
+  datasource: DatasourceFlowNode,
   group: GroupFlowNode
 };
 var ALL_LOGIC_NODE_TYPES = [
@@ -5090,6 +5504,7 @@ var ALL_LOGIC_NODE_TYPES = [
   "tool",
   "rule",
   "entity",
+  "datasource",
   "group"
 ];
 function isLogicNodeType(nodeType) {
@@ -6748,5 +7163,5 @@ function Workspace({
 }
 
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CATEGORY_COLORS, CATEGORY_PILL_COLORS, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, ICON_MAP, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeDrawer, MINIMAP_NODE_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, WorkflowCanvas, Workspace, WorkspaceDrawer, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useDrawerStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore };
-//# sourceMappingURL=chunk-D3INPADN.mjs.map
-//# sourceMappingURL=chunk-D3INPADN.mjs.map
+//# sourceMappingURL=chunk-EOU3POSF.mjs.map
+//# sourceMappingURL=chunk-EOU3POSF.mjs.map