diff --git a/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input.tsx b/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input.tsx index 9d20040798..11b8ed0c69 100644 --- a/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input.tsx +++ b/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input.tsx @@ -11,6 +11,7 @@ import { } from '@/components/ui/command' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { cn } from '@/lib/utils' +import { useWorkflowStore } from '@/stores/workflow/store' import { getAllBlocks } from '@/blocks' import { getTool } from '@/tools' import { useSubBlockValue } from '../hooks/use-sub-block-value' @@ -26,6 +27,7 @@ interface StoredTool { type: string title: string params: Record + isExpanded?: boolean } interface ToolParam { @@ -59,6 +61,7 @@ const getRequiredToolParams = (toolId: string): ToolParam[] => { export function ToolInput({ blockId, subBlockId }: ToolInputProps) { const [value, setValue] = useSubBlockValue(blockId, subBlockId) const [open, setOpen] = useState(false) + const isWide = useWorkflowStore((state) => state.blocks[blockId]?.isWide) const toolBlocks = getAllBlocks().filter((block) => block.toolbar.category === 'tools') @@ -68,19 +71,22 @@ export function ToolInput({ blockId, subBlockId }: ToolInputProps) { : [] const handleSelectTool = (toolBlock: (typeof toolBlocks)[0]) => { + // Check if tool already exists + if (selectedTools.some((tool) => tool.type === toolBlock.type)) { + setOpen(false) + return + } + const toolId = getToolIdFromBlock(toolBlock.type) - // Only store essential data const newTool: StoredTool = { type: toolBlock.type, title: toolBlock.toolbar.title, params: {}, + isExpanded: true, } - if (!selectedTools.some((tool) => tool.type === newTool.type)) { - setValue([...selectedTools, newTool]) - } - + setValue([...selectedTools.map((tool) => ({ ...tool, isExpanded: false })), newTool]) setOpen(false) } @@ -104,6 +110,14 @@ export function ToolInput({ blockId, subBlockId }: ToolInputProps) { ) } + const toggleToolExpansion = (toolType: string) => { + setValue( + selectedTools.map((tool) => + tool.type === toolType ? { ...tool, isExpanded: !tool.isExpanded } : tool + ) + ) + } + const IconComponent = ({ icon: Icon, className }: { icon: any; className?: string }) => { if (!Icon) return null return @@ -161,9 +175,15 @@ export function ToolInput({ blockId, subBlockId }: ToolInputProps) { const requiredParams = toolId ? getRequiredToolParams(toolId) : [] return ( -
+
-
+
toggleToolExpansion(tool.type)} + >
{tool.title}
- +
+ +
- {requiredParams.length > 0 && ( -
+ {tool.isExpanded && requiredParams.length > 0 && ( +
{ + if (e.target === e.currentTarget) { + toggleToolExpansion(tool.type) + } + }} + > {requiredParams.map((param) => (