feat(workflow): implement If/Else node with conditional branching and path optimization

- Add IfElseNode component with true/false output paths and property editor
- Implement condition evaluation and path selection logic
- Move condition state to content property for consistent management
- Add skipNodes tracking for inactive conditional paths
- Optimize execution logic and reduce code duplication
- Update edge type definitions to use ReactFlowEdge
- Integrate node into workflow sidebar under Conditionals section

This feature enables conditional branching in workflows with improved execution handling and optimized path selection logic.

Author: PriNova

vscode/package.json

@@ -3,7 +3,7 @@
   "name": "cody-ai",
   "private": true,
   "displayName": "Cody: AI Code Assistant",
-  "version": "1.67.0+2",
+  "version": "1.67.0+3",
   "publisher": "sourcegraph",
   "license": "Apache-2.0",
   "icon": "resources/sourcegraph.png",

vscode/src/workflow/workflow-executor.ts

@@ -81,6 +81,8 @@ export async function executeWorkflow(
         accumulatorValues: new Map(),
     }
 
+    const skipNodes = new Set<string>()
+
     // Calculate all inactive nodes
     const allInactiveNodes = new Set<string>()
     for (const node of nodes) {
@@ -108,6 +110,10 @@ export async function executeWorkflow(
         }
     }
     for (const node of sortedNodes) {
+        if (skipNodes.has(node.id)) {
+            continue
+        }
+
         if (allInactiveNodes.has(node.id)) {
             continue
         }
@@ -297,6 +303,38 @@ export async function executeWorkflow(
                     break
                 }
 
+                case NodeType.IF_ELSE: {
+                    const inputs = combineParentOutputsByConnectionOrder(node.id, context)
+                    const condition = node.data.content
+                        ? replaceIndexedInputs(node.data.content, inputs, context)
+                        : ''
+
+                    // Evaluate condition using string comparison
+                    // Format: "${1} === value" or "${1} !== value"
+                    const [leftSide, operator, rightSide] = condition.trim().split(/\s+(===|!==)\s+/)
+
+                    const hasresult =
+                        operator === '===' ? leftSide === rightSide : leftSide !== rightSide
+                    const resultString = hasresult ? 'true' : 'false'
+
+                    // Get paths and mark nodes to skip
+                    const edges = context.edgeIndex.bySource.get(node.id) || []
+                    const nonTakenPath = edges.find(
+                        edge => edge.sourceHandle === (hasresult ? 'false' : 'true')
+                    )
+                    if (nonTakenPath) {
+                        const nodesToSkip = getInactiveNodes(edges, nonTakenPath.target)
+                        for (const nodeId of nodesToSkip) {
+                            skipNodes.add(nodeId)
+                        }
+                    }
+
+                    context.nodeOutputs.set(node.id, resultString)
+                    result = resultString
+
+                    break
+                }
+
                 default:
                     persistentShell.dispose()
                     throw new Error(`Unknown node type: ${(node as WorkflowNodes).type}`)

vscode/webviews/workflow/components/CustomOrderedEdge.tsx

@@ -1,17 +1,9 @@
-import { BaseEdge, getSmoothStepPath } from '@xyflow/react'
+import { BaseEdge, type Edge as ReactFlowEdge, getSmoothStepPath } from '@xyflow/react'
 import type { EdgeProps } from '@xyflow/react'
 import type React from 'react'
 import { memo } from 'react'
 
-export interface Edge {
-    id: string
-    source: string
-    target: string
-    type?: string
-    style?: {
-        strokeWidth: 1
-    }
-}
+export type Edge = ReactFlowEdge<any>
 
 export type OrderedEdgeProps = EdgeProps & {
     data?: {

vscode/webviews/workflow/components/PropertyEditor.tsx

@@ -359,6 +359,19 @@ export const PropertyEditor: React.FC<PropertyEditorProps> = ({ node, onUpdate,
                     </div>
                 </div>
             )}
+            {node.type === NodeType.IF_ELSE && (
+                <div className="tw-flex tw-flex-col tw-gap-2">
+                    <Label htmlFor="node-input">Condition</Label>
+                    <Textarea
+                        id="node-input"
+                        value={node.data.content || ''}
+                        onChange={(e: { target: { value: any } }) =>
+                            onUpdate(node.id, { content: e.target.value })
+                        }
+                        placeholder="Enter input text... (use ${1}, ${2} and so on for positional inputs)"
+                    />
+                </div>
+            )}
         </div>
     )
 }

vscode/webviews/workflow/components/WorkflowSidebar.tsx

@@ -153,6 +153,20 @@ export const WorkflowSidebar: React.FC<WorkflowSidebarProps> = ({
                         </div>
                     </AccordionContent>
                 </AccordionItem>
+                <AccordionItem value="conditionals">
+                    <AccordionTrigger>Conditionals</AccordionTrigger>
+                    <AccordionContent>
+                        <div className="tw-flex tw-flex-col tw-gap-2">
+                            <Button
+                                onClick={() => onNodeAdd('If/Else', NodeType.IF_ELSE)}
+                                className="tw-w-full"
+                                variant="outline"
+                            >
+                                If/Else
+                            </Button>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
                 <AccordionItem value="context">
                     <AccordionTrigger>Context Nodes</AccordionTrigger>
                     <AccordionContent>

vscode/webviews/workflow/components/nodes/IfElse_Node.tsx

@@ -0,0 +1,63 @@
+import { Handle, Position } from '@xyflow/react'
+import {
+    type BaseNodeData,
+    type BaseNodeProps,
+    NodeType,
+    type WorkflowNode,
+    getBorderColor,
+    getNodeStyle,
+} from './Nodes'
+
+export type IfElseNode = Omit<WorkflowNode, 'data'> & {
+    type: NodeType.IF_ELSE
+    data: BaseNodeData & {
+        truePathActive: boolean
+        falsePathActive: boolean
+    }
+}
+
+export const IfElseNode: React.FC<BaseNodeProps> = ({ data, selected }) => (
+    <div
+        style={getNodeStyle(
+            NodeType.IF_ELSE,
+            data.moving,
+            selected,
+            data.executing,
+            data.error,
+            data.active,
+            data.interrupted
+        )}
+    >
+        <Handle type="target" position={Position.Top} />
+        <div className="tw-flex tw-flex-col tw-gap-2">
+            <div
+                className="tw-text-center tw-py-1 tw-mb-2 tw-rounded-t-sm tw-font-bold"
+                style={{
+                    background: `linear-gradient(to top, #1e1e1e, ${getBorderColor(NodeType.IF_ELSE, {
+                        error: data.error,
+                        executing: data.executing,
+                        moving: data.moving,
+                        selected,
+                        interrupted: data.interrupted,
+                        active: data.active,
+                    })})`,
+                    color: 'var(--vscode-dropdown-foreground)',
+                    marginLeft: '-0.5rem',
+                    marginRight: '-0.5rem',
+                    marginTop: '-0.5rem',
+                }}
+            >
+                IF...ELSE
+            </div>
+            <div className="tw-flex tw-items-center tw-justify-center tw-p-2 tw-border tw-border-[var(--vscode-input-border)] tw-rounded">
+                <span>{data.condition || 'Condition'}</span>
+            </div>
+            <div className="tw-flex tw-justify-between tw-mt-2">
+                <div className="tw-text-sm tw-opacity-75">True</div>
+                <div className="tw-text-sm tw-opacity-75">False</div>
+            </div>
+        </div>
+        <Handle type="source" position={Position.Bottom} id="true" style={{ left: '25%' }} />
+        <Handle type="source" position={Position.Bottom} id="false" style={{ left: '75%' }} />
+    </div>
+)

vscode/webviews/workflow/components/nodes/Nodes.tsx

@@ -5,6 +5,7 @@ import type { Edge } from '../CustomOrderedEdge'
 import { AccumulatorNode } from './Accumulator_Node'
 import { CLINode } from './CLI_Node'
 import { CodyOutputNode } from './CodyOutput_Node'
+import { IfElseNode } from './IfElse_Node'
 import { LLMNode } from './LLM_Node'
 import { LoopEndNode } from './LoopEnd_Node'
 import { LoopStartNode } from './LoopStart_Node'
@@ -23,6 +24,7 @@ export enum NodeType {
     LOOP_START = 'loop-start',
     LOOP_END = 'loop-end',
     ACCUMULATOR = 'accumulator',
+    IF_ELSE = 'if-else',
 }
 
 // Shared node props interface
@@ -39,6 +41,7 @@ export interface BaseNodeProps {
         iterations?: number
         interrupted?: boolean
         handlePostMessage: (message: WorkflowToExtension) => void
+        condition: string
     }
     selected?: boolean
 }
@@ -81,6 +84,7 @@ export type WorkflowNodes =
     | LoopStartNode
     | LoopEndNode
     | AccumulatorNode
+    | IfElseNode
 
 /**
  * Creates a new workflow node with the specified type, label, and position.
@@ -127,6 +131,16 @@ export const createNode = (node: Omit<WorkflowNodes, 'id'>): WorkflowNodes => {
                     local_remote: false,
                 },
             } as SearchContextNode
+        case NodeType.IF_ELSE:
+            return {
+                ...node,
+                id,
+                data: {
+                    ...node.data,
+                    truePathActive: false,
+                    falsePathActive: false,
+                },
+            } as IfElseNode
         default:
             return {
                 ...node,
@@ -274,4 +288,5 @@ export const nodeTypes = {
     [NodeType.LOOP_START]: LoopStartNode,
     [NodeType.LOOP_END]: LoopEndNode,
     [NodeType.ACCUMULATOR]: AccumulatorNode,
+    [NodeType.IF_ELSE]: IfElseNode,
 }