diff --git a/app/w/components/workflow-block/workflow-block.tsx b/app/w/components/workflow-block/workflow-block.tsx index d0dbb15a08..a4f0a649b5 100644 --- a/app/w/components/workflow-block/workflow-block.tsx +++ b/app/w/components/workflow-block/workflow-block.tsx @@ -34,6 +34,9 @@ export function WorkflowBlock({ const horizontalHandles = useWorkflowStore( (state) => state.blocks[id]?.horizontalHandles ?? false ) + const [isEditing, setIsEditing] = useState(false) + const [editedName, setEditedName] = useState('') + const updateBlockName = useWorkflowStore((state) => state.updateBlockName) function groupSubBlocks(subBlocks: SubBlockConfig[]) { const rows: SubBlockConfig[][] = [] @@ -61,6 +64,26 @@ export function WorkflowBlock({ const subBlockRows = groupSubBlocks(workflow.subBlocks) + const handleNameClick = () => { + setEditedName(name) + setIsEditing(true) + } + + const handleNameSubmit = () => { + if (editedName.trim()) { + updateBlockName(id, editedName.trim()) + setIsEditing(false) + } + } + + const handleNameKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleNameSubmit() + } else if (e.key === 'Escape') { + setIsEditing(false) + } + } + return ( - {name} + {isEditing ? ( + setEditedName(e.target.value.slice(0, 40))} + onBlur={handleNameSubmit} + onKeyDown={handleNameKeyDown} + autoFocus + className="font-medium text-md bg-transparent border-none outline-none p-0 w-[200px]" + maxLength={40} + /> + ) : ( + + {name} + + )} {!isEnabled && ( void duplicateBlock: (id: string) => void toggleBlockHandles: (id: string) => void + updateBlockName: (id: string, name: string) => void } export type WorkflowStore = WorkflowState & WorkflowActions \ No newline at end of file diff --git a/stores/workflow/workflow-store.ts b/stores/workflow/workflow-store.ts index dbde4fecb8..935d0d8c49 100644 --- a/stores/workflow/workflow-store.ts +++ b/stores/workflow/workflow-store.ts @@ -208,17 +208,22 @@ export const useWorkflowStore = create()( const newId = crypto.randomUUID() const offsetPosition = { - x: block.position.x + 250, // Offset to the right - y: block.position.y + 20, // Slight offset down + x: block.position.x + 250, + y: block.position.y + 20, } - // Deep clone the block's subBlocks + // More efficient name handling + const match = block.name.match(/(.*?)(\d+)?$/) + const newName = match && match[2] + ? `${match[1]}${parseInt(match[2]) + 1}` + : `${block.name} 1` + const newSubBlocks = Object.entries(block.subBlocks).reduce( (acc, [subId, subBlock]) => ({ ...acc, [subId]: { ...subBlock, - value: JSON.parse(JSON.stringify(subBlock.value)), // Deep clone values + value: JSON.parse(JSON.stringify(subBlock.value)), }, }), {} @@ -230,7 +235,7 @@ export const useWorkflowStore = create()( [newId]: { ...block, id: newId, - name: `${block.name}`, + name: newName, position: offsetPosition, subBlocks: newSubBlocks, }, @@ -258,6 +263,23 @@ export const useWorkflowStore = create()( set(newState) get().updateLastSaved() }, + + updateBlockName: (id: string, name: string) => { + const newState = { + blocks: { + ...get().blocks, + [id]: { + ...get().blocks[id], + name, + }, + }, + edges: [...get().edges], + } + + set(newState) + pushHistory(set, get, newState, `${name} block name updated`) + get().updateLastSaved() + }, })), { name: 'workflow-store' } )