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

Author: Bill Leoutsakos

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 { Button, 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}

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'