improvement(ui): use chip fields in workflow search and replace

Author: Bill Leoutsakos

apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, StatusPageContent } from '@sim/emcn'
+import { Chip, StatusPageContent } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
@@ -14,14 +14,15 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
   return (
     <div className='flex flex-1 items-center justify-center px-4 py-16 text-center'>
       <StatusPageContent title='Chat Unavailable' description={error}>
-        <Button
-          type='button'
+        <Chip
           variant='primary'
-          className='h-[32px] w-full gap-2 px-2.5 text-sm'
           onClick={() => router.push(APP_ENTRY_PATH)}
+          fullWidth
+          type='button'
+          className='text-center'
         >
           Open Sim
-        </Button>
+        </Chip>
       </StatusPageContent>
     </div>
   )

apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx

@@ -781,17 +781,18 @@ export default function ResumeExecutionPage({
           </div>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
+              <Chip
                 variant='outline'
-                size='sm'
+                type='button'
                 onClick={handleRefreshExecution}
                 disabled={refreshingExecution}
-                className='gap-1.5 px-2.5'
+                leftAdornment={
+                  <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} />
+                }
                 aria-label='Refresh execution details'
               >
-                <RefreshCw className={cn('size-[14px]', refreshingExecution && 'animate-spin')} />
                 Refresh
-              </Button>
+              </Chip>
             </Tooltip.Trigger>
             <Tooltip.Content>Refresh</Tooltip.Content>
           </Tooltip.Root>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Combobox, Input } from '@sim/emcn'
+import { Chip, ChipCombobox, ChipInput } from '@sim/emcn'
 import type { WorkflowSearchReplacementOption } from '@/lib/workflows/search-replace/types'
 
 interface ReplacementControlsProps {
@@ -33,7 +33,7 @@ export function ReplacementControls({
   return (
     <div className='space-y-2'>
       {usesResourceReplacement ? (
-        <Combobox
+        <ChipCombobox
           options={compatibleResourceOptions.map((option) => ({
             label: option.label,
             value: option.value,
@@ -47,7 +47,7 @@ export function ReplacementControls({
           disabled={disabled || compatibleResourceOptions.length === 0}
         />
       ) : (
-        <Input
+        <ChipInput
           value={replacement}
           placeholder='Replace'
           disabled={disabled}
@@ -60,22 +60,22 @@ export function ReplacementControls({
           {eligibleCount} replaceable match{eligibleCount === 1 ? '' : 'es'}
         </span>
         <div className='flex gap-1.5'>
-          <Button
-            className='h-8 text-xs'
-            variant='default'
+          <Chip
+            type='button'
+            variant='outline'
             disabled={disabled || isApplying || !canReplaceActive}
             onClick={onReplaceActive}
           >
             Replace
-          </Button>
-          <Button
-            className='h-8 text-xs'
-            variant='active'
+          </Chip>
+          <Chip
+            type='button'
+            active
             disabled={disabled || isApplying || !canReplaceAll}
             onClick={onReplaceAll}
           >
             {isApplying ? 'Replacing...' : 'Replace All'}
-          </Button>
+          </Chip>
         </div>
       </div>
     </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, Input, toast } from '@sim/emcn'
+import { Button, ChipInput, cn, toast } from '@sim/emcn'
 import { ChevronDown, ChevronRight, ChevronUp, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
@@ -600,7 +600,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
             )}
           />
         </Button>
-        <Input
+        <ChipInput
           ref={searchInputRef}
           value={query}
           placeholder='Search'