orcheo-canvas 0.0.1

package/src/features/workflow/lib/node-icons.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import {
+  AlertCircle,
+  BarChart,
+  Briefcase,
+  Calendar,
+  Clock,
+  Code,
+  Hand,
+  Database,
+  Filter,
+  FileText,
+  GitBranch,
+  Globe,
+  LineChart,
+  Mail,
+  MessageSquare,
+  PieChart,
+  RefreshCcw,
+  Play,
+  RotateCw,
+  Settings,
+  Sparkles,
+  Square,
+  Zap,
+  StickyNote,
+  Variable,
+} from "lucide-react";
+
+type IconFactory = () => React.ReactNode;
+
+const ICON_CLASSES = "h-4 w-4";
+
+const NODE_ICON_FACTORIES = {
+  webhook: () => <Globe className={`${ICON_CLASSES} text-amber-500`} />,
+  schedule: () => <Clock className={`${ICON_CLASSES} text-amber-500`} />,
+  calendar: () => <Calendar className={`${ICON_CLASSES} text-amber-500`} />,
+  chatTrigger: () => (
+    <MessageSquare className={`${ICON_CLASSES} text-amber-500`} />
+  ),
+  manualTrigger: () => <Hand className={`${ICON_CLASSES} text-amber-500`} />,
+  httpPolling: () => (
+    <RefreshCcw className={`${ICON_CLASSES} text-amber-500`} />
+  ),
+  http: () => <Globe className={`${ICON_CLASSES} text-blue-500`} />,
+  email: () => <Mail className={`${ICON_CLASSES} text-blue-500`} />,
+  slack: () => <MessageSquare className={`${ICON_CLASSES} text-blue-500`} />,
+  condition: () => <GitBranch className={`${ICON_CLASSES} text-purple-500`} />,
+  loop: () => <RotateCw className={`${ICON_CLASSES} text-purple-500`} />,
+  switch: () => <Filter className={`${ICON_CLASSES} text-purple-500`} />,
+  delay: () => <Clock className={`${ICON_CLASSES} text-purple-500`} />,
+  errorHandler: () => (
+    <AlertCircle className={`${ICON_CLASSES} text-purple-500`} />
+  ),
+  setVariable: () => <Variable className={`${ICON_CLASSES} text-purple-500`} />,
+  stickyNote: () => <StickyNote className={`${ICON_CLASSES} text-amber-500`} />,
+  database: () => <Database className={`${ICON_CLASSES} text-green-500`} />,
+  transform: () => <Code className={`${ICON_CLASSES} text-green-500`} />,
+  filterData: () => <Filter className={`${ICON_CLASSES} text-green-500`} />,
+  aggregate: () => <BarChart className={`${ICON_CLASSES} text-green-500`} />,
+  python: () => <Code className={`${ICON_CLASSES} text-orange-500`} />,
+  code: () => <Code className={`${ICON_CLASSES} text-purple-500`} />,
+  textGeneration: () => (
+    <FileText className={`${ICON_CLASSES} text-indigo-500`} />
+  ),
+  chatCompletion: () => (
+    <MessageSquare className={`${ICON_CLASSES} text-indigo-500`} />
+  ),
+  classification: () => (
+    <Sparkles className={`${ICON_CLASSES} text-indigo-500`} />
+  ),
+  imageGeneration: () => (
+    <Sparkles className={`${ICON_CLASSES} text-indigo-500`} />
+  ),
+  barChart: () => <BarChart className={`${ICON_CLASSES} text-orange-500`} />,
+  lineChart: () => <LineChart className={`${ICON_CLASSES} text-orange-500`} />,
+  pieChart: () => <PieChart className={`${ICON_CLASSES} text-orange-500`} />,
+  defaultTrigger: () => <Zap className={`${ICON_CLASSES} text-amber-500`} />,
+  defaultApi: () => <Globe className={`${ICON_CLASSES} text-blue-500`} />,
+  defaultFunction: () => (
+    <Settings className={`${ICON_CLASSES} text-purple-500`} />
+  ),
+  defaultData: () => <Database className={`${ICON_CLASSES} text-green-500`} />,
+  defaultAi: () => <Sparkles className={`${ICON_CLASSES} text-indigo-500`} />,
+  defaultVisualization: () => (
+    <BarChart className={`${ICON_CLASSES} text-orange-500`} />
+  ),
+  group: () => <Briefcase className={`${ICON_CLASSES} text-blue-500`} />,
+  start: () => <Play className="h-4 w-4 text-emerald-600" />,
+  end: () => <Square className="h-4 w-4 text-rose-600" />,
+} satisfies Record<string, IconFactory>;
+
+export type NodeIconKey = keyof typeof NODE_ICON_FACTORIES;
+
+const DEFAULT_TYPE_ICON_KEY: Record<string, NodeIconKey> = {
+  trigger: "defaultTrigger",
+  api: "defaultApi",
+  function: "defaultFunction",
+  data: "defaultData",
+  ai: "defaultAi",
+  visualization: "defaultVisualization",
+  python: "python",
+  chatTrigger: "chatTrigger",
+  group: "group",
+  start: "start",
+  end: "end",
+};
+
+const LABEL_ICON_MATCHERS: Array<[RegExp, NodeIconKey]> = [
+  [/webhook/i, "webhook"],
+  [/(schedule|cron)/i, "schedule"],
+  [/calendar/i, "calendar"],
+  [/manual/i, "manualTrigger"],
+  [/poll/i, "httpPolling"],
+  [/(chat trigger|chat)/i, "chatTrigger"],
+  [/http|api/i, "http"],
+  [/email/i, "email"],
+  [/slack/i, "slack"],
+  [/condition/i, "condition"],
+  [/(loop|iterate)/i, "loop"],
+  [/switch/i, "switch"],
+  [/(delay|wait)/i, "delay"],
+  [/(set variable|assign)/i, "setVariable"],
+  [/(sticky note|note)/i, "stickyNote"],
+  [/error/i, "errorHandler"],
+  [/database|sql/i, "database"],
+  [/transform/i, "transform"],
+  [/python/i, "python"],
+  [/filter/i, "filterData"],
+  [/(aggregate|group)/i, "aggregate"],
+  [/(code|script)/i, "code"],
+  [/(text generation|text)/i, "textGeneration"],
+  [/(chat completion|chat response)/i, "chatCompletion"],
+  [/classification/i, "classification"],
+  [/image/i, "imageGeneration"],
+  [/bar chart/i, "barChart"],
+  [/line chart/i, "lineChart"],
+  [/pie chart/i, "pieChart"],
+];
+
+export const isNodeIconKey = (value: string): value is NodeIconKey => {
+  return value in NODE_ICON_FACTORIES;
+};
+
+export const getNodeIcon = (
+  key?: string | null,
+): React.ReactNode | undefined => {
+  if (!key) {
+    return undefined;
+  }
+
+  const iconKey = isNodeIconKey(key) ? key : undefined;
+  const factory = iconKey ? NODE_ICON_FACTORIES[iconKey] : undefined;
+  return factory ? factory() : undefined;
+};
+
+export const inferNodeIconKey = (options: {
+  iconKey?: string;
+  label?: string;
+  type?: string;
+}): NodeIconKey | undefined => {
+  const { iconKey, label, type } = options;
+
+  if (iconKey && isNodeIconKey(iconKey)) {
+    return iconKey;
+  }
+
+  if (label) {
+    const match = LABEL_ICON_MATCHERS.find(([regex]) => regex.test(label));
+    if (match) {
+      return match[1];
+    }
+  }
+
+  if (type) {
+    const inferred = DEFAULT_TYPE_ICON_KEY[type];
+    if (inferred && isNodeIconKey(inferred)) {
+      return inferred;
+    }
+  }
+
+  return undefined;
+};

package/src/features/workflow/lib/node-schemas/ai-nodes.ts

@@ -0,0 +1,81 @@
+import { RJSFSchema } from "@rjsf/utils";
+
+import { baseNodeSchema } from "@features/workflow/lib/node-schemas/base";
+
+export const aiNodeSchemas: Record<string, RJSFSchema> = {
+  Agent: {
+    type: "object",
+    properties: {
+      ...baseNodeSchema.properties,
+      modelSettings: {
+        type: "object",
+        title: "Model Settings",
+        description: "Configuration for the AI model",
+        properties: {
+          model: {
+            type: "string",
+            title: "Model",
+            description: "Model identifier (e.g., gpt-4, claude-3-opus)",
+          },
+          temperature: {
+            type: "number",
+            title: "Temperature",
+            description: "Controls randomness in responses",
+            minimum: 0,
+            maximum: 2,
+            default: 0.7,
+          },
+          maxTokens: {
+            type: "integer",
+            title: "Max Tokens",
+            description: "Maximum number of tokens to generate",
+            minimum: 1,
+          },
+        },
+      },
+      systemPrompt: {
+        type: "string",
+        title: "System Prompt",
+        description: "System prompt for the agent",
+      },
+      checkpointer: {
+        type: "string",
+        title: "Checkpointer",
+        description: "Checkpointer used to save the agent's state",
+        enum: ["memory", "sqlite", "postgres"],
+      },
+      structuredOutput: {
+        type: "object",
+        title: "Structured Output",
+        description: "Configuration for structured output",
+        properties: {
+          schemaType: {
+            type: "string",
+            title: "Schema Type",
+            enum: ["json_schema", "json_dict", "pydantic", "typed_dict"],
+          },
+          schemaStr: {
+            type: "string",
+            title: "Schema Definition",
+            description: "The schema definition as a string",
+          },
+        },
+      },
+    },
+    required: ["modelSettings"],
+  },
+
+  PythonCode: {
+    type: "object",
+    properties: {
+      ...baseNodeSchema.properties,
+      code: {
+        type: "string",
+        title: "Python Code",
+        description: "Python code to execute",
+        default: "def run(state, config):\n    return {}\n",
+      },
+    },
+    required: ["code"],
+  },
+};

package/src/features/workflow/lib/node-schemas/base.ts

@@ -0,0 +1,154 @@
+import { RJSFSchema } from "@rjsf/utils";
+
+import { comparisonOperatorEnum } from "@features/workflow/lib/node-schemas/condition-operators";
+
+/**
+ * Schema for fields common to all nodes.
+ */
+export const baseNodeSchema: RJSFSchema = {
+  type: "object",
+  properties: {
+    label: {
+      type: "string",
+      title: "Node Name",
+      description: "Human-readable label for this node",
+    },
+    description: {
+      type: "string",
+      title: "Description",
+      description: "Optional description of what this node does",
+    },
+  },
+};
+
+/**
+ * JSON schema representing a single conditional expression.
+ */
+export const conditionSchema: RJSFSchema = {
+  type: "object",
+  title: "Condition",
+  properties: {
+    left: {
+      title: "Left Operand",
+      description: "Left-hand operand",
+      type: ["string", "number", "boolean", "null"],
+    },
+    operator: {
+      type: "string",
+      title: "Operator",
+      description: "Comparison operator to evaluate",
+      enum: comparisonOperatorEnum,
+      default: "equals",
+    },
+    right: {
+      title: "Right Operand",
+      description: "Right-hand operand (if required)",
+      type: ["string", "number", "boolean", "null"],
+    },
+    caseSensitive: {
+      type: "boolean",
+      title: "Case Sensitive",
+      description: "Apply case-sensitive comparison for string operands",
+      default: true,
+    },
+  },
+  required: ["operator"],
+};
+
+/**
+ * Schema for persisting variables via SetVariable nodes.
+ */
+export const variableSchema: RJSFSchema = {
+  type: "object",
+  title: "Variable",
+  properties: {
+    name: {
+      type: "string",
+      title: "Variable Name",
+      description: "Name of the variable (e.g., user_name, count)",
+    },
+    valueType: {
+      type: "string",
+      title: "Type",
+      description: "The type of value to store",
+      enum: ["string", "number", "boolean", "object", "array"],
+      default: "string",
+    },
+    value: {
+      title: "Value",
+      description: "Value to persist",
+    },
+  },
+  required: ["name", "valueType", "value"],
+  dependencies: {
+    valueType: {
+      oneOf: [
+        {
+          properties: {
+            valueType: { const: "string" },
+            value: { type: "string" },
+          },
+        },
+        {
+          properties: {
+            valueType: { const: "number" },
+            value: { type: "number" },
+          },
+        },
+        {
+          properties: {
+            valueType: { const: "boolean" },
+            value: { type: "boolean" },
+          },
+        },
+        {
+          properties: {
+            valueType: { const: "object" },
+            value: { type: "object" },
+          },
+        },
+        {
+          properties: {
+            valueType: { const: "array" },
+            value: { type: "array", items: {} },
+          },
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Schema describing an individual case branch for switch nodes.
+ */
+export const switchCaseSchema: RJSFSchema = {
+  type: "object",
+  title: "Switch Case",
+  properties: {
+    match: {
+      title: "Match Value",
+      description: "Value that activates this branch",
+      oneOf: [
+        { type: "string" },
+        { type: "number" },
+        { type: "boolean" },
+        { type: "null" },
+      ],
+    },
+    label: {
+      type: "string",
+      title: "Label",
+      description: "Optional label used in the canvas",
+    },
+    branchKey: {
+      type: "string",
+      title: "Branch Key",
+      description: "Identifier emitted when this branch is selected",
+    },
+    caseSensitive: {
+      type: "boolean",
+      title: "Case Sensitive",
+      description: "Override case-sensitivity for this branch",
+    },
+  },
+};

package/src/features/workflow/lib/node-schemas/condition-operators.ts

@@ -0,0 +1,111 @@
+/**
+ * Shared condition operator metadata used across schemas and UI widgets.
+ */
+export type ConditionOperatorOption = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+export type ConditionOperatorGroup = {
+  key: string;
+  label: string;
+  options: ConditionOperatorOption[];
+};
+
+export const conditionOperatorGroups: ConditionOperatorGroup[] = [
+  {
+    key: "any",
+    label: "Any",
+    options: [
+      {
+        value: "equals",
+        label: "Equals (=)",
+        description: "Left equals right",
+      },
+      {
+        value: "not_equals",
+        label: "Not Equals (≠)",
+        description: "Left does not equal right",
+      },
+    ],
+  },
+  {
+    key: "number",
+    label: "Number",
+    options: [
+      {
+        value: "greater_than",
+        label: "Greater Than (>)",
+        description: "Left is greater than right",
+      },
+      {
+        value: "greater_than_or_equal",
+        label: "Greater Than or Equal (≥)",
+        description: "Left is greater than or equal to right",
+      },
+      {
+        value: "less_than",
+        label: "Less Than (<)",
+        description: "Left is less than right",
+      },
+      {
+        value: "less_than_or_equal",
+        label: "Less Than or Equal (≤)",
+        description: "Left is less than or equal to right",
+      },
+    ],
+  },
+  {
+    key: "string",
+    label: "String",
+    options: [
+      {
+        value: "contains",
+        label: "Contains",
+        description: "Left contains right",
+      },
+      {
+        value: "not_contains",
+        label: "Does Not Contain",
+        description: "Left does not contain right",
+      },
+    ],
+  },
+  {
+    key: "collection",
+    label: "Collection",
+    options: [
+      {
+        value: "in",
+        label: "In",
+        description: "Left is a member of right",
+      },
+      {
+        value: "not_in",
+        label: "Not In",
+        description: "Left is not a member of right",
+      },
+    ],
+  },
+  {
+    key: "boolean",
+    label: "Boolean",
+    options: [
+      {
+        value: "is_truthy",
+        label: "Is Truthy",
+        description: "Left is evaluated as truthy",
+      },
+      {
+        value: "is_falsy",
+        label: "Is Falsy",
+        description: "Left is evaluated as falsy",
+      },
+    ],
+  },
+];
+
+export const comparisonOperatorEnum = conditionOperatorGroups.flatMap((group) =>
+  group.options.map((option) => option.value),
+);

package/src/features/workflow/lib/node-schemas/index.ts

@@ -0,0 +1,73 @@
+import { RJSFSchema } from "@rjsf/utils";
+
+import {
+  baseNodeSchema,
+  conditionSchema,
+  variableSchema,
+  switchCaseSchema,
+} from "@features/workflow/lib/node-schemas/base";
+import {
+  ConditionOperatorGroup,
+  ConditionOperatorOption,
+  comparisonOperatorEnum,
+  conditionOperatorGroups,
+} from "@features/workflow/lib/node-schemas/condition-operators";
+import { aiNodeSchemas } from "@features/workflow/lib/node-schemas/ai-nodes";
+import { integrationNodeSchemas } from "@features/workflow/lib/node-schemas/integration-nodes";
+import { logicNodeSchemas } from "@features/workflow/lib/node-schemas/logic-nodes";
+import { nodeUiSchemas } from "@features/workflow/lib/node-schemas/ui";
+import { stateNodeSchemas } from "@features/workflow/lib/node-schemas/state-nodes";
+import { triggerNodeSchemas } from "@features/workflow/lib/node-schemas/trigger-nodes";
+
+const nodeSchemaGroups: Record<string, RJSFSchema>[] = [
+  logicNodeSchemas,
+  stateNodeSchemas,
+  aiNodeSchemas,
+  integrationNodeSchemas,
+  triggerNodeSchemas,
+];
+
+export const nodeSchemas: Record<string, RJSFSchema> = nodeSchemaGroups.reduce(
+  (accumulator, schemaGroup) => ({
+    ...accumulator,
+    ...schemaGroup,
+  }),
+  {
+    default: {
+      ...baseNodeSchema,
+    },
+  } satisfies Record<string, RJSFSchema>,
+);
+
+export const getNodeSchema = (
+  backendType: string | null | undefined,
+): RJSFSchema => {
+  if (!backendType) {
+    return nodeSchemas.default;
+  }
+  return nodeSchemas[backendType] || nodeSchemas.default;
+};
+
+export const getNodeUiSchema = (
+  backendType: string | null | undefined,
+): Record<string, unknown> => {
+  if (!backendType) {
+    return nodeUiSchemas.default;
+  }
+
+  return {
+    ...nodeUiSchemas.default,
+    ...(nodeUiSchemas[backendType] || {}),
+  };
+};
+
+export {
+  baseNodeSchema,
+  conditionSchema,
+  variableSchema,
+  switchCaseSchema,
+  conditionOperatorGroups,
+  comparisonOperatorEnum,
+};
+export type { ConditionOperatorGroup, ConditionOperatorOption };
+export { nodeUiSchemas };