feat(emcn): badge outline variant

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/components/mode-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Check, MessageCircle, Package } from 'lucide-react'
+import { Bot, Check, MessageSquare } from 'lucide-react'
 import { Badge } from '@/components/emcn'
 import {
   DropdownMenu,
@@ -35,9 +35,9 @@ interface ModeSelectorProps {
 export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSelectorProps) {
   const getModeIcon = () => {
     if (mode === 'ask') {
-      return <MessageCircle className='h-3 w-3 text-muted-foreground' />
+      return <MessageSquare className='h-3 w-3' />
     }
-    return <Package className='h-3 w-3 text-muted-foreground' />
+    return <Bot className='h-3 w-3' />
   }
 
   const getModeText = () => {
@@ -51,6 +51,7 @@ export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSe
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Badge
+          variant='outline'
           className={cn(
             'cursor-pointer rounded-[6px]',
             (disabled || !onModeChange) && 'cursor-not-allowed opacity-50'
@@ -78,7 +79,7 @@ export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSe
                   )}
                 >
                   <span className='flex items-center gap-1.5'>
-                    <MessageCircle className='h-3 w-3 text-muted-foreground' />
+                    <MessageSquare className='h-3 w-3 text-muted-foreground' />
                     Ask
                   </span>
                   {mode === 'ask' && <Check className='h-3 w-3 text-muted-foreground' />}
@@ -104,7 +105,7 @@ export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSe
                   )}
                 >
                   <span className='flex items-center gap-1.5'>
-                    <Package className='h-3 w-3 text-muted-foreground' />
+                    <Bot className='h-3 w-3 text-muted-foreground' />
                     Agent
                   </span>
                   {mode === 'agent' && <Check className='h-3 w-3 text-muted-foreground' />}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/components/model-selector.tsx

@@ -39,7 +39,7 @@ function getModelIconComponent(modelValue: string) {
   if (!IconComponent) {
     return null
   }
-  return <IconComponent className='h-3 w-3 text-muted-foreground' />
+  return <IconComponent className='h-3 w-3' />
 }
 
 /**
@@ -77,7 +77,7 @@ export function ModelSelector({
     }
     return (
       <span className='flex-shrink-0'>
-        <IconComponent className='h-3 w-3 text-muted-foreground' />
+        <IconComponent className='h-3 w-3' />
       </span>
     )
   }
@@ -91,7 +91,11 @@ export function ModelSelector({
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Badge className='min-w-0 max-w-full cursor-pointer rounded-[6px]' title='Choose model'>
+        <Badge
+          variant='outline'
+          className='min-w-0 max-w-full cursor-pointer rounded-[6px]'
+          title='Choose model'
+        >
           {getModelIcon()}
           <span className='min-w-0 truncate'>
             {getCollapsedModeLabel()}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx

@@ -906,15 +906,15 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           {/* Top Row: @ Button + Context Usage Pill */}
           <div className='mb-[6px] flex items-center justify-between'>
             <Badge
+              variant='outline'
               onClick={handleOpenMentionMenuWithAt}
               title='Insert @'
               className={cn(
-                'radius-[6px] cursor-pointer border border-[#575757] bg-transparent dark:border-[#575757] dark:bg-transparent',
-                (disabled || isLoading) && 'cursor-not-allowed',
-                'rounded-[6px] p-[4.5px]'
+                'cursor-pointer rounded-[6px] p-[4.5px]',
+                (disabled || isLoading) && 'cursor-not-allowed'
               )}
             >
-              <AtSign className='h-3 w-3' strokeWidth={1.25} />
+              <AtSign className='h-3 w-3' strokeWidth={1.75} />
             </Badge>
 
             {/* Context Usage Pill */}

apps/sim/components/emcn/components/badge.tsx

@@ -3,12 +3,14 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center px-[9px] py-[2.5px] text-[13px] font-medium gap-[4px] rounded-[40px] focus:outline-none transition-colors',
+  'inline-flex items-center px-[9px] py-[2.25px] text-[13px] font-medium gap-[4px] rounded-[40px] focus:outline-none transition-colors',
   {
     variants: {
       variant: {
         default:
           'bg-[#272727] text-[#B1B1B1] dark:bg-[#272727] dark:text-[#B1B1B1] hover:text-[#E6E6E6] dark:hover:text-[#E6E6E6]',
+        outline:
+          'border border-[#575757] bg-transparent text-[#B1B1B1] dark:border-[#575757] dark:bg-transparent dark:text-[#B1B1B1] hover:text-[#E6E6E6] dark:hover:text-[#E6E6E6]',
       },
     },
     defaultVariants: {