diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx index 5754ee1492..9801a4f57e 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx @@ -12,6 +12,7 @@ import { getCodeEditorProps, highlight, languages, + Textarea, Tooltip, } from '@/components/emcn' import { Trash } from '@/components/emcn/icons/trash' @@ -74,6 +75,8 @@ interface ConditionInputProps { previewValue?: string | null /** Whether the component is disabled */ disabled?: boolean + /** Mode: 'condition' for code editor, 'router' for text input */ + mode?: 'condition' | 'router' } /** @@ -101,7 +104,9 @@ export function ConditionInput({ isPreview = false, previewValue, disabled = false, + mode = 'condition', }: ConditionInputProps) { + const isRouterMode = mode === 'router' const params = useParams() const workspaceId = params.workspaceId as string const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId) @@ -161,32 +166,50 @@ export function ConditionInput({ const shouldPersistRef = useRef(false) /** - * Creates default if/else conditional blocks with stable IDs. + * Creates default blocks with stable IDs. + * For conditions: if/else blocks. For router: one route block. * - * @returns Array of two default blocks (if and else) + * @returns Array of default blocks */ - const createDefaultBlocks = (): ConditionalBlock[] => [ - { - id: generateStableId(blockId, 'if'), - title: 'if', - value: '', - showTags: false, - showEnvVars: false, - searchTerm: '', - cursorPosition: 0, - activeSourceBlockId: null, - }, - { - id: generateStableId(blockId, 'else'), - title: 'else', - value: '', - showTags: false, - showEnvVars: false, - searchTerm: '', - cursorPosition: 0, - activeSourceBlockId: null, - }, - ] + const createDefaultBlocks = (): ConditionalBlock[] => { + if (isRouterMode) { + return [ + { + id: generateStableId(blockId, 'route1'), + title: 'route1', + value: '', + showTags: false, + showEnvVars: false, + searchTerm: '', + cursorPosition: 0, + activeSourceBlockId: null, + }, + ] + } + + return [ + { + id: generateStableId(blockId, 'if'), + title: 'if', + value: '', + showTags: false, + showEnvVars: false, + searchTerm: '', + cursorPosition: 0, + activeSourceBlockId: null, + }, + { + id: generateStableId(blockId, 'else'), + title: 'else', + value: '', + showTags: false, + showEnvVars: false, + searchTerm: '', + cursorPosition: 0, + activeSourceBlockId: null, + }, + ] + } // Initialize with a loading state instead of default blocks const [conditionalBlocks, setConditionalBlocks] = useState([]) @@ -270,10 +293,13 @@ export function ConditionInput({ const parsedBlocks = safeParseJSON(effectiveValueStr) if (parsedBlocks) { - const blocksWithCorrectTitles = parsedBlocks.map((block, index) => ({ - ...block, - title: index === 0 ? 'if' : index === parsedBlocks.length - 1 ? 'else' : 'else if', - })) + // For router mode, keep original titles. For condition mode, assign if/else if/else + const blocksWithCorrectTitles = isRouterMode + ? parsedBlocks + : parsedBlocks.map((block, index) => ({ + ...block, + title: index === 0 ? 'if' : index === parsedBlocks.length - 1 ? 'else' : 'else if', + })) setConditionalBlocks(blocksWithCorrectTitles) hasInitializedRef.current = true @@ -573,12 +599,17 @@ export function ConditionInput({ /** * Updates block titles based on their position in the array. - * First block is always 'if', last is 'else', middle ones are 'else if'. + * For conditions: First block is 'if', last is 'else', middle ones are 'else if'. + * For router: Titles are user-editable and not auto-updated. * * @param blocks - Array of conditional blocks * @returns Updated blocks with correct titles */ const updateBlockTitles = (blocks: ConditionalBlock[]): ConditionalBlock[] => { + if (isRouterMode) { + // For router mode, don't change titles - they're user-editable + return blocks + } return blocks.map((block, index) => ({ ...block, title: index === 0 ? 'if' : index === blocks.length - 1 ? 'else' : 'else if', @@ -590,13 +621,15 @@ export function ConditionInput({ if (isPreview || disabled) return const blockIndex = conditionalBlocks.findIndex((block) => block.id === afterId) - if (conditionalBlocks[blockIndex]?.title === 'else') return + if (!isRouterMode && conditionalBlocks[blockIndex]?.title === 'else') return - const newBlockId = generateStableId(blockId, `else-if-${Date.now()}`) + const newBlockId = isRouterMode + ? generateStableId(blockId, `route-${Date.now()}`) + : generateStableId(blockId, `else-if-${Date.now()}`) const newBlock: ConditionalBlock = { id: newBlockId, - title: '', + title: isRouterMode ? `route-${Date.now()}` : '', value: '', showTags: false, showEnvVars: false, @@ -710,13 +743,15 @@ export function ConditionInput({
- {block.title} + {isRouterMode ? `Route ${index + 1}` : block.title}
@@ -724,7 +759,7 @@ export function ConditionInput({ - Delete Condition + + {isRouterMode ? 'Delete Route' : 'Delete Condition'} +
- {block.title !== 'else' && + {/* Router mode: show description textarea with tag/env var support */} + {isRouterMode && ( +
e.preventDefault()} + onDrop={(e) => handleDrop(block.id, e)} + > +