fix(chat-deploy): keep selected outputs in place

Author: TheodoreSpeaks

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

@@ -149,8 +149,11 @@ describe('OutputSelect DOM interaction', () => {
     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('Selected')
+    const selectedResultOption = [
+      ...document.querySelectorAll<HTMLElement>('[role="option"]'),
+    ].find((candidate) => candidate.textContent === 'result')
+    expect(selectedResultOption?.getAttribute('aria-selected')).toBe('true')
     expect(document.body.textContent).not.toContain('researchAgent')
   })
 
@@ -187,7 +190,10 @@ describe('OutputSelect DOM interaction', () => {
     act(() => outputOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
 
     expect(trigger.textContent).toContain('1 output')
-    expect(document.body.textContent).toContain('Selected')
-    expect(document.body.textContent).toContain('invokeChild / researchAgent.content')
+    expect(document.body.textContent).not.toContain('Selected')
+    const selectedOutputOption = [
+      ...document.querySelectorAll<HTMLElement>('[role="option"]'),
+    ].find((candidate) => candidate.textContent === 'content')
+    expect(selectedOutputOption?.getAttribute('aria-selected')).toBe('true')
   })
 })

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

@@ -298,14 +298,15 @@ describe('OutputSelect nested workflow menu', () => {
     expect(onOutputSelect).toHaveBeenCalledWith(['child-workflow.agent_answer'])
   })
 
-  it('keeps every selected output at the top and deselects nested outputs from there', () => {
+  it('keeps a nested selection in its subworkflow and deselects it there', () => {
     const onOutputSelect = renderOutputSelect(['child-workflow.agent_answer'])
 
-    const sections = [...document.querySelectorAll('[data-section]')]
-    expect(sections[0]?.textContent).toBe('Selected')
-    expect(document.body.textContent).toContain('Research / Writer.answer')
+    expect(document.body.textContent).not.toContain('Selected')
+    expect(document.body.textContent).not.toContain('Writer')
 
-    clickOption('Research / Writer.answer')
+    clickOption('Research')
+    expect(document.body.textContent).toContain('Writer')
+    clickOption('answer')
     expect(onOutputSelect).toHaveBeenCalledWith([])
   })
 

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

@@ -293,16 +293,12 @@ function OutputSelectMenu({
         <span className='text-small'>{node.blockName}</span>
       </div>
     ),
-    items: node.outputs
-      .filter((output) => !selectedValueSet.has(getOutputValue(output, valueMode)))
-      .map((output) => outputOption(output)),
+    items: node.outputs.map((output) => outputOption(output)),
   })
 
   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 outputNodes = menuNodes.filter((node) => node.outputs.length > 0)
   const menuGroups: ComboboxOptionGroup[] = [
     ...(activeMenuNode
       ? [
@@ -328,27 +324,15 @@ function OutputSelectMenu({
           },
         ]
       : []),
-    ...availableOutputNodes.map(outputGroup),
+    ...outputNodes.map(outputGroup),
   ]
-  const selectedGroup: ComboboxOptionGroup[] =
-    selectedOutputOptions.length > 0
-      ? [
-          {
-            section: 'Selected',
-            items: selectedOutputOptions.map((output) =>
-              outputOption(output, `${output.groupLabel}.${output.path}`)
-            ),
-          },
-        ]
-      : []
-  const comboboxGroups = [...selectedGroup, ...menuGroups]
   const Trigger = size === 'md' ? ChipCombobox : Combobox
 
   return (
     <Trigger
       size={size}
       className={cn('min-w-[100px]', size === 'sm' && '!py-0.5 w-fit rounded-md px-2.5', className)}
-      groups={comboboxGroups}
+      groups={menuGroups}
       options={[]}
       multiSelect
       multiSelectValues={normalizedSelectedValues}