Simplified block types and changed conditional to function

app/w/[id]/workflow.tsx

@@ -21,7 +21,6 @@ import 'reactflow/dist/style.css'
 import { getBlock } from '../../../blocks/configs'
 import { WorkflowBlock } from '../components/workflow-block/workflow-block'
 import { BlockConfig } from '../../../blocks/types/block'
-import { BlockType } from '../../../blocks/types/block'
 import { useWorkflowStore } from '@/stores/workflow/workflow-store'
 import { initializeStateLogger } from '@/stores/workflow/state-logger'
 
@@ -29,7 +28,7 @@ import { initializeStateLogger } from '@/stores/workflow/state-logger'
  * Represents the data structure for a workflow node
  */
 interface WorkflowNodeData {
-  type: BlockType
+  type: string
   config: BlockConfig
   name: string
 }

blocks/configs/conditional.ts

@@ -1,37 +0,0 @@
-import { ConditionalIcon } from '@/components/icons'
-import { BlockConfig } from '../types/block'
-
-export const ConditionalBlock: BlockConfig = {
-  type: 'conditional',
-  toolbar: {
-    title: 'Conditional',
-    description: 'Add branching logic',
-    bgColor: '#FF972F',
-    icon: ConditionalIcon,
-    category: 'basic',
-  },
-  workflow: {
-    outputType: 'boolean',
-    subBlocks: [
-      {
-        id: 'conditionType',
-        title: 'Condition Type',
-        type: 'dropdown',
-        layout: 'full',
-        options: [
-          'Equals',
-          'Contains',
-          'Greater Than',
-          'Less Than',
-          'Regular Expression',
-        ],
-      },
-      {
-        id: 'value',
-        title: 'Value',
-        type: 'short-input',
-        layout: 'full',
-      },
-    ],
-  },
-}

blocks/configs/function.ts

@@ -0,0 +1,24 @@
+import { CodeIcon } from '@/components/icons'
+import { BlockConfig } from '../types/block'
+  
+export const FunctionBlock: BlockConfig = {
+  type: 'function',
+  toolbar: {
+    title: 'Function',
+    description: 'Add custom logic',
+    bgColor: '#FF8D2F',
+    icon: CodeIcon,
+    category: 'basic',
+  },
+  workflow: {
+    outputType: 'json',
+    subBlocks: [
+      {
+        id: 'code',
+        title: 'Code',
+        type: 'code',
+        layout: 'full',
+      },  
+    ],
+  },
+}

blocks/configs/index.ts

@@ -1,27 +1,29 @@
-import { BlockConfig, BlockType } from '../types/block'
+import { BlockConfig } from '../types/block'
+
+// Import blocks
 import { AgentBlock } from './agent'
 import { ApiBlock } from './api'
-import { ConditionalBlock } from './conditional'
+import { FunctionBlock } from './function'
 
-// Export individual blocks
-export { AgentBlock, ApiBlock, ConditionalBlock }
+// Export blocks for ease of use
+export { AgentBlock, ApiBlock, FunctionBlock }
 
 // Combined blocks registry
 export const BLOCKS: BlockConfig[] = [
   AgentBlock,
   ApiBlock,
-  ConditionalBlock,
+  FunctionBlock,
 ]
 
 // Helper functions
-export const getBlock = (type: BlockType): BlockConfig | undefined =>
+export const getBlock = (type: string): BlockConfig | undefined =>
   BLOCKS.find(block => block.type === type)
 
 export const getBlocksByCategory = (category: 'basic' | 'advanced'): BlockConfig[] =>
   BLOCKS.filter(block => block.toolbar.category === category)
 
-export const getAllBlockTypes = (): BlockType[] =>
+export const getAllBlockTypes = (): string[] =>
   BLOCKS.map(block => block.type)
 
-export const isValidBlockType = (type: string): type is BlockType =>
+export const isValidBlockType = (type: string): type is string =>
   BLOCKS.some(block => block.type === type)

blocks/types/block.ts

@@ -1,7 +1,6 @@
 import type { SVGProps } from 'react'
 import type { JSX } from 'react'
 
-export type BlockType = 'agent' | 'api' | 'conditional'
 export type BlockIcon = (props: SVGProps<SVGSVGElement>) => JSX.Element
 export type BlockCategory = 'basic' | 'advanced'
 export type OutputType = 'string' | 'number' | 'json' | 'boolean'
@@ -34,7 +33,7 @@ export type OutputTypeConfig = OutputType | {
 }
 
 export interface BlockConfig {
-  type: BlockType
+  type: string
   toolbar: {
     title: string
     description: string

components/icons.tsx

@@ -598,7 +598,7 @@ export function CodeIcon(props: SVGProps<SVGSVGElement>) {
       <path
         d="M23.2639 6.83064L23.6375 7.20422C26.5433 10.1117 27.9971 11.5638 27.9971 13.37C27.9971 15.1762 26.5433 16.63 23.6375 19.5358L23.2639 19.9094M18.0434 2L11.9507 24.7401M6.72863 6.83064L6.35504 7.20422C3.45081 10.1117 1.99707 11.5638 1.99707 13.37C1.99707 15.1762 3.45081 16.63 6.35829 19.5358L6.73187 19.9094"
         stroke="currentColor"
-        strokeWidth="2.5"
+        strokeWidth="2.6"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

stores/workflow/types.ts

@@ -1,5 +1,5 @@
 import { Node, Edge } from 'reactflow'
-import { BlockType, OutputType, SubBlockType } from '@/blocks/types/block'
+import { OutputType, SubBlockType } from '@/blocks/types/block'
 
 export interface Position {
   x: number
@@ -8,7 +8,7 @@ export interface Position {
 
 export interface BlockState {
   id: string
-  type: BlockType
+  type: string
   name: string
   position: Position
   subBlocks: Record<string, SubBlockState>
@@ -30,7 +30,7 @@ export interface WorkflowState {
 export interface WorkflowActions {
   addBlock: (
     id: string,
-    type: BlockType,
+    type: string,
     name: string,
     position: Position
   ) => void

stores/workflow/workflow-store.ts

@@ -1,7 +1,6 @@
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 import { Edge } from 'reactflow'
-import { BlockType } from '@/blocks/types/block'
 import { Position, WorkflowStore } from './types'
 import { getBlock } from '@/blocks/configs'
 
@@ -16,7 +15,7 @@ export const useWorkflowStore = create<WorkflowStore>()(
     (set, get) => ({
       ...initialState,
 
-      addBlock: (id: string, type: BlockType, name: string, position: Position) => {
+      addBlock: (id: string, type: string, name: string, position: Position) => {
         const blockConfig = getBlock(type)
         if (!blockConfig) return