Skip to content

Commit 77d77ae

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
fix(ui): preserve editor picker styling and compact API controls
1 parent 1798c4e commit 77d77ae

19 files changed

Lines changed: 69 additions & 230 deletions

File tree

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
Button,
66
ChipButtonGroup,
77
ChipButtonGroupItem,
8-
ChipSelect,
98
Code,
9+
Combobox,
1010
Label,
1111
Skeleton,
1212
Tooltip,
@@ -560,11 +560,9 @@ console.log(limits);`
560560
<span>{copied.async ? 'Copied' : 'Copy'}</span>
561561
</Tooltip.Content>
562562
</Tooltip.Root>
563-
<ChipSelect
564-
className='min-w-[100px]'
565-
showSelectedCheck
566-
modal={false}
567-
maxHeight={192}
563+
<Combobox
564+
size='sm'
565+
className='w-fit! min-w-[100px] rounded-md px-[9px] py-0.5!'
568566
options={[
569567
{ label: 'Start Execution', value: 'execute' },
570568
{ label: 'Check Status', value: 'status' },

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
2-
import { ChipCombobox, type ComboboxOption, cn } from '@sim/emcn'
2+
import { Combobox, type ComboboxOption, cn } from '@sim/emcn'
33
import { Plus } from '@sim/emcn/icons'
44
import { useReactFlow } from '@xyflow/react'
55
import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
@@ -274,6 +274,7 @@ export const ComboBox = memo(function ComboBox({
274274
isModelUsable,
275275
])
276276

277+
// Convert options to Combobox format
277278
const comboboxOptions = useMemo((): ComboboxOption[] => {
278279
const mapped = evaluatedOptions.map((option): ComboboxOption => {
279280
if (typeof option === 'string') {
@@ -543,12 +544,13 @@ export const ComboBox = memo(function ComboBox({
543544
ctrlOnChangeRef.current = ctrlOnChange
544545
onDropRef.current = onDrop
545546
onDragOverRef.current = onDragOver
547+
// Store the input ref for passing to Combobox
546548
if (ref.current) {
547549
inputRefFromController.current = ref.current as HTMLInputElement
548550
}
549551

550552
return (
551-
<ChipCombobox
553+
<Combobox
552554
options={comboboxOptions}
553555
value={inputValue}
554556
selectedValue={value ?? ''}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useMemo, useRef } from 'react'
44
import {
55
Badge,
66
Button,
7-
ChipCombobox,
87
CollapsibleCard,
8+
Combobox,
99
type ComboboxOption,
1010
cn,
1111
Input,
@@ -375,7 +375,7 @@ export function DocumentTagEntry({
375375
<>
376376
<div className='flex flex-col gap-1.5'>
377377
<Label className='text-small'>Tag</Label>
378-
<ChipCombobox
378+
<Combobox
379379
options={tagOptions}
380380
value={tag.tagName}
381381
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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const { fetched } = vi.hoisted(() => ({
2020

2121
vi.mock('@sim/emcn', () => ({
2222
ChipTag: ({ children }: { children?: React.ReactNode }) => <span data-chip>{children}</span>,
23-
ChipCombobox: ({
23+
Combobox: ({
2424
options,
2525
multiSelectValues,
2626
overlayContent,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
2-
import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
2+
import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
33
import { generateId } from '@sim/utils/id'
44
import { isRecordLike } from '@sim/utils/object'
55
import {
@@ -508,7 +508,7 @@ export const Dropdown = memo(function Dropdown({
508508
const isSearchable = searchable || (subBlockId === 'operation' && comboboxOptions.length > 5)
509509

510510
return (
511-
<ChipCombobox
511+
<Combobox
512512
options={comboboxOptions}
513513
value={multiSelect ? undefined : (singleValue ?? undefined)}
514514
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‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
4-
import { Button, ChipCombobox, cn } from '@sim/emcn'
4+
import { Button, Combobox, cn } from '@sim/emcn'
55
import { X } from '@sim/emcn/icons'
66
import { createLogger } from '@sim/logger'
77
import { getErrorMessage } from '@sim/utils/errors'
@@ -168,7 +168,7 @@ function SingleFileSelector({
168168

169169
return (
170170
<div className='relative w-full'>
171-
<ChipCombobox
171+
<Combobox
172172
options={options}
173173
value={comboboxValue}
174174
selectedValue={selectedValue}
@@ -943,7 +943,7 @@ export function FileUpload({
943943

944944
{/* Add More dropdown for multiple files */}
945945
{hasFiles && multiple && !isUploading && (
946-
<ChipCombobox
946+
<Combobox
947947
options={comboboxOptions}
948948
value={inputValue}
949949
onChange={handleComboboxChange}
@@ -987,7 +987,7 @@ export function FileUpload({
987987

988988
{/* Show dropdown selector if no files and not uploading */}
989989
{!hasFiles && !isUploading && (
990-
<ChipCombobox
990+
<Combobox
991991
options={comboboxOptions}
992992
value={inputValue}
993993
onChange={handleComboboxChange}

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

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import { useRef } from 'react'
22
import {
33
Badge,
44
Button,
5-
ChipCombobox,
6-
ChipSelect,
75
CollapsibleCard,
6+
Combobox,
87
type ComboboxOption,
98
cn,
109
Input,
@@ -205,18 +204,12 @@ export function FilterRuleRow({
205204
{index > 0 && (
206205
<div className='flex flex-col gap-1.5'>
207206
<Label className='text-small'>Logic</Label>
208-
<ChipSelect
209-
fullWidth
210-
align='start'
211-
dropdownWidth='trigger'
212-
showSelectedCheck
213-
modal={false}
214-
maxHeight={192}
207+
<Combobox
215208
options={logicalOptions}
216209
value={rule.logicalOperator}
217210
onChange={(v) => onUpdate(rule.id, 'logicalOperator', v as 'and' | 'or')}
218211
disabled={isReadOnly}
219-
displayLabel={
212+
overlayContent={
220213
getLabelHighlight('logicalOperator', rule.logicalOperator) ? (
221214
<span className='truncate text-[var(--text-primary)]'>
222215
{formatDisplayText(rule.logicalOperator, {
@@ -234,7 +227,7 @@ export function FilterRuleRow({
234227

235228
<div className='flex flex-col gap-1.5'>
236229
<Label className='text-small'>Column</Label>
237-
<ChipCombobox
230+
<Combobox
238231
options={columns}
239232
value={rule.column}
240233
onChange={(v) => onUpdate(rule.id, 'column', v)}
@@ -254,19 +247,13 @@ export function FilterRuleRow({
254247

255248
<div className='flex flex-col gap-1.5'>
256249
<Label className='text-small'>Operator</Label>
257-
<ChipSelect
258-
fullWidth
259-
align='start'
260-
dropdownWidth='trigger'
261-
showSelectedCheck
262-
modal={false}
263-
maxHeight={192}
250+
<Combobox
264251
options={comparisonOptions}
265252
value={rule.operator}
266253
onChange={(v) => onUpdate(rule.id, 'operator', v)}
267254
disabled={isReadOnly}
268255
placeholder='Select operator'
269-
displayLabel={
256+
overlayContent={
270257
getLabelHighlight('operator', getOperatorLabel(rule.operator)) ? (
271258
<span className='truncate text-[var(--text-primary)]'>
272259
{formatDisplayText(getOperatorLabel(rule.operator), {

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import { useRef } from 'react'
44
import {
55
Badge,
66
Button,
7-
ChipCombobox,
8-
ChipSelect,
9-
type ChipSelectOption,
107
CollapsibleCard,
8+
Combobox,
119
type ComboboxOption,
1210
cn,
1311
Input,
@@ -373,7 +371,7 @@ export function KnowledgeTagFilters({
373371
}))
374372

375373
const operators = getOperatorsForFieldType(filter.fieldType)
376-
const operatorOptions: ChipSelectOption[] = operators.map((op) => ({
374+
const operatorOptions: ComboboxOption[] = operators.map((op) => ({
377375
value: op.value,
378376
label: op.label,
379377
}))
@@ -384,7 +382,7 @@ export function KnowledgeTagFilters({
384382
<>
385383
<div className='flex flex-col gap-1.5'>
386384
<Label className='text-small'>Tag</Label>
387-
<ChipCombobox
385+
<Combobox
388386
options={tagOptions}
389387
value={filter.tagName}
390388
onChange={(value) => updateFilter(filter.id, 'tagName', value)}
@@ -395,13 +393,7 @@ export function KnowledgeTagFilters({
395393

396394
<div className='flex flex-col gap-1.5'>
397395
<Label className='text-small'>Operator</Label>
398-
<ChipSelect
399-
fullWidth
400-
align='start'
401-
dropdownWidth='trigger'
402-
showSelectedCheck
403-
modal={false}
404-
maxHeight={192}
396+
<Combobox
405397
options={operatorOptions}
406398
value={filter.operator}
407399
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback, useState } from 'react'
2-
import { ChipCombobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
2+
import { Combobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
33
import { createLogger } from '@sim/logger'
44
import { useParams } from 'next/navigation'
55
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({
282282

283283
return (
284284
<div key={`${paramName}-dropdown`}>
285-
<ChipCombobox
285+
<Combobox
286286
options={dropdownOptions}
287287
value={dropdownValue}
288288
selectedValue={dropdownValue}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useCallback, useMemo, useState } from 'react'
4-
import { ChipCombobox, type ComboboxOptionGroup } from '@sim/emcn'
4+
import { Combobox, type ComboboxOptionGroup } from '@sim/emcn'
55
import { Plus, X } from '@sim/emcn/icons'
66
import { useParams } from 'next/navigation'
77
import { AgentSkillsIcon } from '@/components/icons'
@@ -133,7 +133,7 @@ export function SkillInput({
133133
return (
134134
<>
135135
<div className='w-full space-y-2'>
136-
<ChipCombobox
136+
<Combobox
137137
options={[]}
138138
groups={skillGroups}
139139
placeholder='Add skill...'

0 commit comments

Comments
 (0)