improvement(ui): reuse chip comboboxes for workflow resources

Author: Bill Leoutsakos

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Chip, Combobox, type ComboboxOptionGroup } from '@sim/emcn'
+import { Chip, ChipCombobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { Key, SquareArrowUpRight } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
@@ -445,7 +445,7 @@ export function CredentialSelector({
 
   return (
     <div>
-      <Combobox
+      <ChipCombobox
         options={comboboxOptions}
         groups={comboboxGroups}
         value={displayValue}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { useQueries } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
@@ -211,7 +211,7 @@ export function KnowledgeBaseSelector({
         </div>
       )}
 
-      <Combobox
+      <ChipCombobox
         options={options}
         value={isMultiSelect ? undefined : (selectedIds[0] ?? '')}
         multiSelect={isMultiSelect}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Combobox } from '@sim/emcn'
+import { ChipCombobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { McpIcon } from '@/components/icons'
 import { getMcpTargetOptions } from '@/components/mcp/target-options'
@@ -65,7 +65,7 @@ export function McpServerSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedServerId}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { Combobox } from '@sim/emcn'
+import { ChipCombobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -86,7 +86,7 @@ export function McpToolSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedToolId}

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

@@ -46,7 +46,7 @@ vi.mock('@sim/emcn', () => ({
       {children}
     </button>
   ),
-  Combobox: ({
+  ChipCombobox: ({
     options,
     value,
     placeholder,

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

@@ -1,7 +1,15 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Button, Chip, ChipSelect, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
+import {
+  Button,
+  Chip,
+  ChipCombobox,
+  ChipSelect,
+  type ComboboxOption,
+  Label,
+  Tooltip,
+} from '@sim/emcn'
 import { ChevronDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
@@ -180,7 +188,7 @@ const FallbackRow = memo(function FallbackRow({
       </div>
 
       <div className='flex flex-col gap-2.5 rounded-b-[4px] border-[var(--border)] border-t bg-[var(--surface-2)] p-2'>
-        <Combobox
+        <ChipCombobox
           options={modelOptions}
           value={row.model}
           onChange={(model) => onChangeModel(row.id, model)}
@@ -195,7 +203,7 @@ const FallbackRow = memo(function FallbackRow({
         {needsApiKey && (
           <div className='flex flex-col gap-2.5'>
             <Label className='pl-0.5'>API key</Label>
-            <Combobox
+            <ChipCombobox
               options={envVarOptions}
               value={apiKeyValue}
               onChange={(apiKey) => onChangeApiKey(row.id, apiKey)}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipCombobox, type ComboboxOption } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -93,7 +93,7 @@ export function TableSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={options}
       value={tableId ?? undefined}
       onChange={handleChange}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { Combobox } from '@sim/emcn'
+import { ChipCombobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import type { FolderResourceType } from '@/lib/api/contracts/folders'
 import { parseFolderPath } from '@/lib/folders/paths'
@@ -58,7 +58,7 @@ export function WorkspaceFolderSelector({
   }, [folders, isPlaceholderData, required, subBlock.multiSelect, subBlock.placeholder])
 
   return (
-    <Combobox
+    <ChipCombobox
       options={options}
       value={subBlock.multiSelect ? undefined : selected}
       onChange={(value) => {