fix(chat-deploy): distinguish subworkflow output navigation

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.dom.test.tsx

@@ -134,6 +134,26 @@ afterEach(() => {
 })
 
 describe('OutputSelect DOM interaction', () => {
+  it('selects a workflow block field without entering its child workflow', () => {
+    renderPicker()
+
+    const trigger = document.querySelector<HTMLElement>('[role="combobox"]')
+    if (!trigger) throw new Error('Output picker trigger did not render')
+    act(() => trigger.click())
+
+    const resultOption = [...document.querySelectorAll<HTMLElement>('[role="option"]')].find(
+      (candidate) => candidate.textContent === 'result'
+    )
+    if (!resultOption) throw new Error('Workflow block result output did not render')
+
+    act(() => resultOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
+
+    expect(trigger.textContent).toContain('1 output')
+    expect(document.body.textContent).toContain('Selected')
+    expect(document.body.textContent).toContain('invokeChild.result')
+    expect(document.body.textContent).not.toContain('researchAgent')
+  })
+
   it('drills into and selects a child workflow output through the real medium combobox', () => {
     renderPicker()
 
@@ -143,16 +163,20 @@ describe('OutputSelect DOM interaction', () => {
 
     expect(document.body.textContent).toContain('invokeChild')
     const rootOptions = [...document.querySelectorAll<HTMLElement>('[role="option"]')]
-    const folderOption = rootOptions.find((candidate) => candidate.textContent === 'Outputs')
-    if (!folderOption) throw new Error('Child workflow folder did not render')
-    expect(rootOptions.indexOf(folderOption)).toBeLessThan(
+    expect(document.body.textContent).toContain('Subworkflows')
+    const subworkflowOption = rootOptions.find(
+      (candidate) => candidate.textContent === 'invokeChild'
+    )
+    if (!subworkflowOption) throw new Error('Child workflow navigation did not render')
+    expect(rootOptions.indexOf(subworkflowOption)).toBeLessThan(
       rootOptions.findIndex((candidate) => candidate.textContent === 'result')
     )
-    const floatingSurface = folderOption.closest<HTMLElement>('[data-native-surface-overlay]')
+
+    const floatingSurface = subworkflowOption.closest<HTMLElement>('[data-native-surface-overlay]')
     if (!floatingSurface) throw new Error('Output picker floating surface did not render')
 
     expect(floatingSurface.className).toContain('pointer-events-auto')
-    act(() => folderOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
+    act(() => subworkflowOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
 
     expect(document.body.textContent).toContain('researchAgent')
     const outputOption = [...document.querySelectorAll<HTMLElement>('[role="option"]')].find(
@@ -164,6 +188,6 @@ describe('OutputSelect DOM interaction', () => {
 
     expect(trigger.textContent).toContain('1 output')
     expect(document.body.textContent).toContain('Selected')
-    expect(document.body.textContent).toContain('invokeChild / researchAgent / content')
+    expect(document.body.textContent).toContain('invokeChild / researchAgent.content')
   })
 })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.test.tsx

@@ -256,7 +256,8 @@ describe('OutputSelect nested workflow menu', () => {
     expect(document.body.textContent).toContain('Research')
     expect(document.body.textContent).not.toContain('Writer')
 
-    clickOption('Outputs')
+    expect([...document.querySelectorAll('[data-section]')][0]?.textContent).toBe('Subworkflows')
+    clickOption('Research')
     expect(document.body.textContent).toContain('Back')
     expect(document.body.textContent).toContain('Writer')
     expect(document.body.textContent).toContain('answer')
@@ -291,7 +292,7 @@ describe('OutputSelect nested workflow menu', () => {
 
   it('keeps workflow-scoped values when toggling nested outputs', () => {
     const onOutputSelect = renderOutputSelect([])
-    clickOption('Outputs')
+    clickOption('Research')
     clickOption('answer')
 
     expect(onOutputSelect).toHaveBeenCalledWith(['child-workflow.agent_answer'])
@@ -302,16 +303,16 @@ describe('OutputSelect nested workflow menu', () => {
 
     const sections = [...document.querySelectorAll('[data-section]')]
     expect(sections[0]?.textContent).toBe('Selected')
-    expect(document.body.textContent).toContain('Research / Writer / answer')
+    expect(document.body.textContent).toContain('Research / Writer.answer')
 
-    clickOption('Research / Writer / answer')
+    clickOption('Research / Writer.answer')
     expect(onOutputSelect).toHaveBeenCalledWith([])
   })
 
   it('preserves existing selections when choosing a nested output', () => {
     const onOutputSelect = renderOutputSelect(['summary_content'])
 
-    clickOption('Outputs')
+    clickOption('Research')
     clickOption('answer')
 
     expect(onOutputSelect).toHaveBeenCalledWith(['summary_content', 'child-workflow.agent_answer'])
@@ -332,14 +333,14 @@ describe('OutputSelect nested workflow menu', () => {
     clickOption('content')
     expect(onOutputSelect).toHaveBeenCalledWith(['summarizer.content'])
 
-    clickOption('Outputs')
+    clickOption('Research')
     clickOption('answer')
     expect(onOutputSelect).toHaveBeenCalledWith(['child-workflow.writer.answer'])
   })
 
   it('returns to the root menu when the owning workflow changes', () => {
     const onOutputSelect = renderOutputSelect([])
-    clickOption('Outputs')
+    clickOption('Research')
 
     rerenderOutputSelect('replacement', [], onOutputSelect)
 
@@ -349,7 +350,7 @@ describe('OutputSelect nested workflow menu', () => {
 
   it('returns to the root menu when a workflow edit invalidates the active path', () => {
     const onOutputSelect = renderOutputSelect([])
-    clickOption('Outputs')
+    clickOption('Research')
 
     outputMenuState.includeNestedWorkflow = false
     rerenderOutputSelect('root', [], onOutputSelect)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx

@@ -274,9 +274,9 @@ function OutputSelectMenu({
     }
   }
 
-  const folderOption = (node: WorkflowOutputMenuNode): ComboboxOption => ({
-    label: 'Outputs',
-    value: `folder:${node.blockId}`,
+  const subworkflowOption = (node: WorkflowOutputMenuNode): ComboboxOption => ({
+    label: node.blockName,
+    value: `subworkflow:${node.blockId}`,
     suffixElement: <ChevronRight className='size-[12px] text-[var(--text-tertiary)]' />,
     onSelect: () => setMenuPath((currentPath) => [...currentPath, node.blockId]),
     keepOpen: true,
@@ -293,38 +293,50 @@ function OutputSelectMenu({
         <span className='text-small'>{node.blockName}</span>
       </div>
     ),
-    items: [
-      ...(node.children.length > 0 ? [folderOption(node)] : []),
-      ...node.outputs
-        .filter((output) => !selectedValueSet.has(getOutputValue(output, valueMode)))
-        .map((output) => outputOption(output)),
-    ],
+    items: node.outputs
+      .filter((output) => !selectedValueSet.has(getOutputValue(output, valueMode)))
+      .map((output) => outputOption(output)),
   })
 
-  const menuGroups: ComboboxOptionGroup[] = activeMenuNode
-    ? [
-        {
-          section: activeMenuNode.blockName,
-          items: [
-            {
-              label: 'Back',
-              value: `back:${activeMenuNode.blockId}`,
-              iconElement: <ArrowLeft className='size-[14px] text-[var(--text-tertiary)]' />,
-              onSelect: () => setMenuPath((currentPath) => currentPath.slice(0, -1)),
-              keepOpen: true,
-            },
-          ],
-        },
-        ...activeMenuNode.children.map(outputGroup),
-      ]
-    : outputMenu.map(outputGroup)
+  const menuNodes = activeMenuNode ? activeMenuNode.children : outputMenu
+  const subworkflowNodes = menuNodes.filter((node) => node.children.length > 0)
+  const availableOutputNodes = menuNodes.filter((node) =>
+    node.outputs.some((output) => !selectedValueSet.has(getOutputValue(output, valueMode)))
+  )
+  const menuGroups: ComboboxOptionGroup[] = [
+    ...(activeMenuNode
+      ? [
+          {
+            section: activeMenuNode.blockName,
+            items: [
+              {
+                label: 'Back',
+                value: `back:${activeMenuNode.blockId}`,
+                iconElement: <ArrowLeft className='size-[14px] text-[var(--text-tertiary)]' />,
+                onSelect: () => setMenuPath((currentPath) => currentPath.slice(0, -1)),
+                keepOpen: true,
+              },
+            ],
+          },
+        ]
+      : []),
+    ...(subworkflowNodes.length > 0
+      ? [
+          {
+            section: 'Subworkflows',
+            items: subworkflowNodes.map(subworkflowOption),
+          },
+        ]
+      : []),
+    ...availableOutputNodes.map(outputGroup),
+  ]
   const selectedGroup: ComboboxOptionGroup[] =
     selectedOutputOptions.length > 0
       ? [
           {
             section: 'Selected',
             items: selectedOutputOptions.map((output) =>
-              outputOption(output, `${output.groupLabel} / ${output.path}`)
+              outputOption(output, `${output.groupLabel}.${output.path}`)
             ),
           },
         ]