refactor: use EMCN components for KB UI

- Replace @/components/ui imports with @/components/emcn
- Use Combobox instead of Select for dropdowns
- Use EMCN Switch, Button, Input, Label components
- Remove unsupported 'size' prop from EMCN Button

Author: priyanshu.solanki

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -12,9 +12,9 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Switch,
   Trash,
 } from '@/components/emcn'
-import { Switch } from '@/components/ui/switch'
 import { cn } from '@/lib/core/utils/cn'
 import { ALL_TAG_SLOTS, type AllTagSlot } from '@/lib/knowledge/constants'
 import type { DocumentTag } from '@/lib/knowledge/tags/types'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Loader2 } from 'lucide-react'
 import {
   Button,
+  Combobox,
+  type ComboboxOption,
   Input,
   Label,
   Modal,
@@ -13,13 +15,6 @@ import {
   ModalHeader,
   Trash,
 } from '@/components/emcn'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { cn } from '@/lib/core/utils/cn'
 import { SUPPORTED_FIELD_TYPES, TAG_SLOT_CONFIG } from '@/lib/knowledge/constants'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -203,6 +198,17 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
     return used < max
   }
 
+  /** Field type options for Combobox */
+  const fieldTypeOptions: ComboboxOption[] = useMemo(() => {
+    return SUPPORTED_FIELD_TYPES.filter((type) => hasAvailableSlots(type)).map((type) => {
+      const { used, max } = getSlotUsageByFieldType(type)
+      return {
+        value: type,
+        label: `${FIELD_TYPE_LABELS[type]} (${used}/${max})`,
+      }
+    })
+  }, [kbTagDefinitions])
+
   const saveTagDefinition = async () => {
     if (!canSaveTag()) return
 
@@ -403,32 +409,15 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
                     <div className='flex flex-col gap-[8px]'>
                       <Label htmlFor='tagType'>Type</Label>
-                      <Select
+                      <Combobox
+                        options={fieldTypeOptions}
                         value={createTagForm.fieldType}
-                        onValueChange={(value) =>
+                        onChange={(value) =>
                           setCreateTagForm({ ...createTagForm, fieldType: value })
                         }
-                      >
-                        <SelectTrigger className='h-9'>
-                          <SelectValue placeholder='Select type' />
-                        </SelectTrigger>
-                        <SelectContent className='z-[9999]'>
-                          {SUPPORTED_FIELD_TYPES.map((type) => {
-                            const { used, max } = getSlotUsageByFieldType(type)
-                            const isDisabled = used >= max
-                            return (
-                              <SelectItem key={type} value={type} disabled={isDisabled}>
-                                <span className='flex items-center gap-2'>
-                                  {FIELD_TYPE_LABELS[type]}
-                                  <span className='text-[10px] text-[var(--text-muted)]'>
-                                    ({used}/{max})
-                                  </span>
-                                </span>
-                              </SelectItem>
-                            )
-                          })}
-                        </SelectContent>
-                      </Select>
+                        placeholder='Select type'
+                        size='sm'
+                      />
                       {!hasAvailableSlots(createTagForm.fieldType) && (
                         <span className='text-[11px] text-[var(--text-error)]'>
                           No available slots for this type. Choose a different type.

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

@@ -2,10 +2,7 @@
 
 import { useMemo, useRef, useState } from 'react'
 import { Plus } from 'lucide-react'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Switch } from '@/components/ui/switch'
+import { Button, Input, Switch, Trash } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { SUPPORTED_FIELD_TYPES, TAG_SLOT_CONFIG } from '@/lib/knowledge/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -608,8 +605,7 @@ export function DocumentTagEntry({
       <td className='w-0 p-0'>
         <Button
           variant='ghost'
-          size='icon'
-          className='-translate-y-1/2 absolute top-1/2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100'
+          className='-translate-y-1/2 absolute top-1/2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100'
           onClick={() => handleDeleteRow(rowIndex)}
         >
           <Trash className='h-4 w-4 text-muted-foreground' />
@@ -631,7 +627,7 @@ export function DocumentTagEntry({
     <div className='relative'>
       {showPreFillButton && (
         <div className='mb-2'>
-          <Button variant='outline' size='sm' onClick={handlePreFillTags}>
+          <Button variant='outline' className='h-7 px-2 text-xs' onClick={handlePreFillTags}>
             Prefill Existing Tags
           </Button>
         </div>
@@ -657,7 +653,6 @@ export function DocumentTagEntry({
         <div className='mt-3 flex items-center justify-between'>
           <Button
             variant='outline'
-            size='sm'
             onClick={handleAddRow}
             disabled={!canAddMoreTags}
             className='h-7 px-2 text-xs'

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

@@ -1,19 +1,16 @@
 'use client'
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Plus } from 'lucide-react'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
+  Button,
+  Combobox,
+  type ComboboxOption,
+  Input,
+  Label,
+  Switch,
+  Trash,
+} from '@/components/emcn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   checkTagTrigger,
@@ -369,24 +366,21 @@ export function KnowledgeTagFilters({
     const operator = row.cells.operator || 'eq'
     const operators = getOperatorsForFieldType(fieldType)
 
+    const operatorOptions: ComboboxOption[] = operators.map((op) => ({
+      value: op.value,
+      label: op.label,
+    }))
+
     return (
       <td className='border-r p-1'>
-        <Select
+        <Combobox
+          options={operatorOptions}
           value={operator}
-          onValueChange={(value) => handleCellChange(rowIndex, 'operator', value)}
+          onChange={(value) => handleCellChange(rowIndex, 'operator', value)}
           disabled={disabled || !row.cells.tagName}
-        >
-          <SelectTrigger className='h-8 border-0 focus:ring-0 focus:ring-offset-0'>
-            <SelectValue placeholder='Operator' />
-          </SelectTrigger>
-          <SelectContent>
-            {operators.map((op) => (
-              <SelectItem key={op.value} value={op.value}>
-                {op.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          placeholder='Operator'
+          size='sm'
+        />
       </td>
     )
   }