improvement(ui): reuse chip controls for remaining workflow pickers

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx

@@ -5,8 +5,8 @@ import {
   Button,
   ChipButtonGroup,
   ChipButtonGroupItem,
+  ChipSelect,
   Code,
-  Combobox,
   Label,
   Skeleton,
   Tooltip,
@@ -560,9 +560,11 @@ console.log(limits);`
                   <span>{copied.async ? 'Copied' : 'Copy'}</span>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <Combobox
-                size='sm'
-                className='w-fit! min-w-[100px] rounded-md px-[9px] py-0.5!'
+              <ChipSelect
+                className='min-w-[100px]'
+                showSelectedCheck
+                modal={false}
+                maxHeight={192}
                 options={[
                   { label: 'Start Execution', value: 'execute' },
                   { label: 'Check Status', value: 'status' },

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Combobox, type ComboboxOption, cn } from '@sim/emcn'
+import { ChipCombobox, type ComboboxOption, cn } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
 import { useReactFlow } from '@xyflow/react'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
@@ -274,7 +274,6 @@ export const ComboBox = memo(function ComboBox({
     isModelUsable,
   ])
 
-  // Convert options to Combobox format
   const comboboxOptions = useMemo((): ComboboxOption[] => {
     const mapped = evaluatedOptions.map((option): ComboboxOption => {
       if (typeof option === 'string') {
@@ -544,13 +543,12 @@ export const ComboBox = memo(function ComboBox({
           ctrlOnChangeRef.current = ctrlOnChange
           onDropRef.current = onDrop
           onDragOverRef.current = onDragOver
-          // Store the input ref for passing to Combobox
           if (ref.current) {
             inputRefFromController.current = ref.current as HTMLInputElement
           }
 
           return (
-            <Combobox
+            <ChipCombobox
               options={comboboxOptions}
               value={inputValue}
               selectedValue={value ?? ''}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -4,8 +4,8 @@ import { useMemo, useRef } from 'react'
 import {
   Badge,
   Button,
+  ChipCombobox,
   CollapsibleCard,
-  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -375,7 +375,7 @@ export function DocumentTagEntry({
       <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <Combobox
+          <ChipCombobox
             options={tagOptions}
             value={tag.tagName}
             onChange={(value) => updateTag(tag.id, 'tagName', value)}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.test.tsx

@@ -20,7 +20,7 @@ const { fetched } = vi.hoisted(() => ({
 
 vi.mock('@sim/emcn', () => ({
   ChipTag: ({ children }: { children?: React.ReactNode }) => <span data-chip>{children}</span>,
-  Combobox: ({
+  ChipCombobox: ({
     options,
     multiSelectValues,
     overlayContent,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
 import { generateId } from '@sim/utils/id'
 import { isRecordLike } from '@sim/utils/object'
 import {
@@ -508,7 +508,7 @@ export const Dropdown = memo(function Dropdown({
   const isSearchable = searchable || (subBlockId === 'operation' && comboboxOptions.length > 5)
 
   return (
-    <Combobox
+    <ChipCombobox
       options={comboboxOptions}
       value={multiSelect ? undefined : (singleValue ?? undefined)}
       multiSelectValues={multiSelect ? (multiValues ?? undefined) : undefined}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Combobox, cn } from '@sim/emcn'
+import { Button, ChipCombobox, cn } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -168,7 +168,7 @@ function SingleFileSelector({
 
   return (
     <div className='relative w-full'>
-      <Combobox
+      <ChipCombobox
         options={options}
         value={comboboxValue}
         selectedValue={selectedValue}
@@ -943,7 +943,7 @@ export function FileUpload({
 
       {/* Add More dropdown for multiple files */}
       {hasFiles && multiple && !isUploading && (
-        <Combobox
+        <ChipCombobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}
@@ -987,7 +987,7 @@ export function FileUpload({
 
       {/* Show dropdown selector if no files and not uploading */}
       {!hasFiles && !isUploading && (
-        <Combobox
+        <ChipCombobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx

@@ -2,9 +2,9 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
+  ChipCombobox,
   ChipSelect,
   CollapsibleCard,
-  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -234,7 +234,7 @@ export function FilterRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Column</Label>
-        <Combobox
+        <ChipCombobox
           options={columns}
           value={rule.column}
           onChange={(v) => onUpdate(rule.id, 'column', v)}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -4,8 +4,10 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
+  ChipCombobox,
+  ChipSelect,
+  type ChipSelectOption,
   CollapsibleCard,
-  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -371,7 +373,7 @@ export function KnowledgeTagFilters({
     }))
 
     const operators = getOperatorsForFieldType(filter.fieldType)
-    const operatorOptions: ComboboxOption[] = operators.map((op) => ({
+    const operatorOptions: ChipSelectOption[] = operators.map((op) => ({
       value: op.value,
       label: op.label,
     }))
@@ -382,7 +384,7 @@ export function KnowledgeTagFilters({
       <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <Combobox
+          <ChipCombobox
             options={tagOptions}
             value={filter.tagName}
             onChange={(value) => updateFilter(filter.id, 'tagName', value)}
@@ -393,7 +395,13 @@ export function KnowledgeTagFilters({
 
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Operator</Label>
-          <Combobox
+          <ChipSelect
+            fullWidth
+            align='start'
+            dropdownWidth='trigger'
+            showSelectedCheck
+            modal={false}
+            maxHeight={192}
             options={operatorOptions}
             value={filter.operator}
             onChange={(value) => updateFilter(filter.id, 'operator', value)}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { Combobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
+import { ChipCombobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -282,7 +282,7 @@ export function McpDynamicArgs({
 
         return (
           <div key={`${paramName}-dropdown`}>
-            <Combobox
+            <ChipCombobox
               options={dropdownOptions}
               value={dropdownValue}
               selectedValue={dropdownValue}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Combobox, type ComboboxOptionGroup } from '@sim/emcn'
+import { ChipCombobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { AgentSkillsIcon } from '@/components/icons'
@@ -133,7 +133,7 @@ export function SkillInput({
   return (
     <>
       <div className='w-full space-y-2'>
-        <Combobox
+        <ChipCombobox
           options={[]}
           groups={skillGroups}
           placeholder='Add skill...'