diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx index 232b9f85ce..4c6c9535ca 100644 --- a/app/w/[id]/workflow.tsx +++ b/app/w/[id]/workflow.tsx @@ -95,25 +95,20 @@ const edgeTypes: EdgeTypes = { custom: CustomEdge } * including drag and drop, node connections, and position updates */ function WorkflowCanvas() { - const { - blocks, - edges, - addBlock, - updateBlockPosition, - addEdge, - removeEdge, - setSelectedBlock, - } = useWorkflowStore() + const [selectedBlockId, setSelectedBlockId] = useState(null) + + const { blocks, edges, addBlock, updateBlockPosition, addEdge, removeEdge } = + useWorkflowStore() const [isExecuting, setIsExecuting] = useState(false) const [executionResult, setExecutionResult] = useState(null) const { addNotification } = useNotificationStore() - // Convert blocks to ReactFlow nodes + // Convert blocks to ReactFlow nodes using local selectedBlockId const nodes = Object.values(blocks).map((block) => ({ id: block.id, type: 'workflowBlock', position: block.position, - selected: block.id === useWorkflowStore.getState().selectedBlockId, + selected: block.id === selectedBlockId, data: { type: block.type, config: getBlock(block.type), @@ -203,21 +198,15 @@ function WorkflowCanvas() { ) // Handler for node clicks - const onNodeClick = useCallback( - (event: React.MouseEvent, node: any) => { - event.stopPropagation() - setSelectedBlock(node.id) - }, - [setSelectedBlock] - ) + const onNodeClick = useCallback((event: React.MouseEvent, node: any) => { + event.stopPropagation() + setSelectedBlockId(node.id) + }, []) // Handler for clicks on the empty canvas - const onPaneClick = useCallback( - (event: React.MouseEvent) => { - setSelectedBlock(null) - }, - [setSelectedBlock] - ) + const onPaneClick = useCallback((event: React.MouseEvent) => { + setSelectedBlockId(null) + }, []) useEffect(() => { initializeStateLogger() @@ -271,13 +260,13 @@ function WorkflowCanvas() { * @returns {Object} The initial input parameters for the block */ const getInitialInput = (block: BlockState, blockConfig: BlockConfig) => { - const params: Record = {}; + const params: Record = {} Object.entries(block.subBlocks || {}).forEach(([id, subBlock]) => { if (subBlock?.value !== undefined) { - params[id] = subBlock.value; + params[id] = subBlock.value } - }); - return params; + }) + return params } /** @@ -292,23 +281,23 @@ function WorkflowCanvas() { throw new Error(`Block configuration not found for type: ${block.type}`) } - const tools = blockConfig.workflow.tools; + const tools = blockConfig.workflow.tools if (!tools?.access || tools.access.length === 0) { - throw new Error(`No tools specified for block type: ${block.type}`); + throw new Error(`No tools specified for block type: ${block.type}`) } // Get all values from subBlocks - const params: Record = {}; + const params: Record = {} Object.entries(block.subBlocks || {}).forEach(([id, subBlock]) => { if (subBlock?.value !== undefined) { - params[id] = subBlock.value; + params[id] = subBlock.value } }) // Get the tool ID from the block's configuration - const toolId = tools.config?.tool?.(params) || params.tool; + const toolId = tools.config?.tool?.(params) || params.tool if (!toolId || !tools.access.includes(toolId)) { - throw new Error(`Invalid or unauthorized tool: ${toolId}`); + throw new Error(`Invalid or unauthorized tool: ${toolId}`) } return { @@ -321,11 +310,12 @@ function WorkflowCanvas() { interface: { inputs: blockConfig.workflow.inputs || {}, outputs: { - output: typeof blockConfig.workflow.outputType === 'string' - ? blockConfig.workflow.outputType - : blockConfig.workflow.outputType.default - } - } + output: + typeof blockConfig.workflow.outputType === 'string' + ? blockConfig.workflow.outputType + : blockConfig.workflow.outputType.default, + }, + }, }, } } diff --git a/app/w/components/workflow-block/components/action-block/action-block.tsx b/app/w/components/workflow-block/components/action-bar/action-bar.tsx similarity index 100% rename from app/w/components/workflow-block/components/action-block/action-block.tsx rename to app/w/components/workflow-block/components/action-bar/action-bar.tsx diff --git a/app/w/components/workflow-block/workflow-block.tsx b/app/w/components/workflow-block/workflow-block.tsx index f493526ff0..75a3a4e9d0 100644 --- a/app/w/components/workflow-block/workflow-block.tsx +++ b/app/w/components/workflow-block/workflow-block.tsx @@ -3,7 +3,7 @@ import { BlockConfig, SubBlockConfig } from '../../../../blocks/types' import { SubBlock } from './components/sub-block/sub-block' import { Handle, Position } from 'reactflow' import { cn } from '@/lib/utils' -import { ActionBar } from './components/action-block/action-block' +import { ActionBar } from './components/action-bar/action-bar' interface WorkflowBlockProps { id: string diff --git a/stores/workflow/types.ts b/stores/workflow/types.ts index 4945ddbf8e..f2eda6c8d7 100644 --- a/stores/workflow/types.ts +++ b/stores/workflow/types.ts @@ -24,7 +24,6 @@ export interface SubBlockState { export interface WorkflowState { blocks: Record edges: Edge[] - selectedBlockId: string | null } export interface WorkflowActions { @@ -39,7 +38,6 @@ export interface WorkflowActions { removeBlock: (id: string) => void addEdge: (edge: Edge) => void removeEdge: (edgeId: string) => void - setSelectedBlock: (id: string | null) => void clear: () => void } diff --git a/stores/workflow/workflow-store.ts b/stores/workflow/workflow-store.ts index 76618e9e0f..20f730915b 100644 --- a/stores/workflow/workflow-store.ts +++ b/stores/workflow/workflow-store.ts @@ -7,7 +7,6 @@ import { getBlock } from '@/blocks' const initialState = { blocks: {}, edges: [], - selectedBlockId: null, } export const useWorkflowStore = create()( @@ -86,7 +85,6 @@ export const useWorkflowStore = create()( return { blocks: remainingBlocks, edges: remainingEdges, - selectedBlockId: state.selectedBlockId === id ? null : state.selectedBlockId, } }) }, @@ -110,10 +108,6 @@ export const useWorkflowStore = create()( })) }, - setSelectedBlock: (id: string | null) => { - set({ selectedBlockId: id }) - }, - clear: () => { set(initialState) },