From a8d6e87020e490ff32015ae7b9406d9bfcf458c9 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 12:05:07 -0700
Subject: [PATCH] refactor(ui): reuse EMCN chips for AI controls

---
 .claude/rules/sim-imports.md                  |   2 +-
 .cursor/rules/sim-imports.mdc                 |   2 +-
 .../sub-block/components/code/code.test.tsx   |  33 +++++-
 .../sub-block/components/code/code.tsx        |  30 ++---
 .../components/long-input/long-input.test.tsx |  13 ++-
 .../components/long-input/long-input.tsx      |  13 +--
 .../components/short-input/short-input.tsx    |  12 +-
 .../wand-prompt-bar/wand-button.tsx           |  27 +++++
 .../wand-prompt-bar/wand-prompt-bar.test.tsx  | 103 ++++++++++++++++++
 .../wand-prompt-bar/wand-prompt-bar.tsx       |  24 ++--
 apps/sim/components/ui/button.tsx             |  49 ---------
 apps/sim/components/ui/index.ts               |   1 -
 12 files changed, 190 insertions(+), 119 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.test.tsx
 delete mode 100644 apps/sim/components/ui/button.tsx

diff --git a/.claude/rules/sim-imports.md b/.claude/rules/sim-imports.md
index 3aeafa0dd2e..6757ecc1d43 100644
--- a/.claude/rules/sim-imports.md
+++ b/.claude/rules/sim-imports.md
@@ -13,8 +13,8 @@ paths:
 
 ```typescript
 // ✓ Good
+import { Chip } from '@sim/emcn'
 import { useWorkflowStore } from '@/stores/workflows/store'
-import { Button } from '@/components/ui/button'
 
 // ✗ Bad
 import { useWorkflowStore } from '../../../stores/workflows/store'
diff --git a/.cursor/rules/sim-imports.mdc b/.cursor/rules/sim-imports.mdc
index 19da378bccf..95d111c7747 100644
--- a/.cursor/rules/sim-imports.mdc
+++ b/.cursor/rules/sim-imports.mdc
@@ -13,8 +13,8 @@ globs: ["apps/sim/**/*.ts","apps/sim/**/*.tsx"]
 
 ```typescript
 // ✓ Good
+import { Chip } from '@sim/emcn'
 import { useWorkflowStore } from '@/stores/workflows/store'
-import { Button } from '@/components/ui/button'
 
 // ✗ Bad
 import { useWorkflowStore } from '../../../stores/workflows/store'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.test.tsx
index fe74a0467e4..76a6ab1dc66 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.test.tsx
@@ -20,6 +20,13 @@ const { SECRET, searchTargetRef } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  Chip: ({
+    onClick,
+    disabled,
+    'aria-label': label,
+  }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type='button' onClick={onClick} disabled={disabled} aria-label={label} />
+  ),
   CODE_LINE_HEIGHT_PX: 21,
   Code: {
     Container: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -72,10 +79,6 @@ vi.mock('react-simple-code-editor', () => ({
   ),
 }))
 
-vi.mock('@/components/ui/button', () => ({
-  Button: ({ children }: { children?: ReactNode }) => <button type='button'>{children}</button>,
-}))
-
 vi.mock('next/navigation', () => ({
   useParams: () => ({ workspaceId: 'workspace-1' }),
 }))
@@ -254,3 +257,25 @@ describe('Code password masking', () => {
     expect(highlighted()).toContain(SECRET_MATCH)
   })
 })
+
+describe('Code copy action', () => {
+  it('copies the current value through the shared chip action', () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    vi.useFakeTimers()
+    act(() =>
+      root.render(
+        <Code
+          blockId='block-1'
+          subBlockId='privateKey'
+          showCopyButton
+          wandConfig={{ enabled: false, prompt: '' }}
+        />
+      )
+    )
+    act(() => container.querySelector<HTMLButtonElement>('button[aria-label="Copy code"]')!.click())
+    expect(writeText).toHaveBeenCalledExactlyOnceWith(SECRET)
+    act(() => vi.advanceTimersByTime(2000))
+    vi.useRealTimers()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index e4fe0f53f44..191fa72fb71 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import {
+  Chip,
   CODE_LINE_HEIGHT_PX,
   Code as CodeEditor,
   calculateGutterWidth,
@@ -10,11 +11,10 @@ import {
   highlight,
   languages,
 } from '@sim/emcn'
-import { Check, Wand } from '@sim/emcn/icons'
+import { Check } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import Editor from 'react-simple-code-editor'
-import { Button } from '@/components/ui/button'
 import { CodeLanguage } from '@/lib/execution/languages'
 import {
   isLikelyReferenceSegment,
@@ -43,6 +43,7 @@ import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import type { WandControlHandlers } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
 import { restoreCursorAfterInsertion } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/utils'
+import { WandButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button'
 import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
@@ -906,22 +907,12 @@ export const Code = memo(function Code({
   return (
     <>
       {showCopyButton && code && (
-        <Button
-          type='button'
-          variant='ghost'
-          size='sm'
+        <Chip
           onClick={handleCopy}
           disabled={!code}
-          className={cn(
-            'size-8 p-0',
-            'text-muted-foreground/60 transition-all duration-200',
-            'hover-hover:scale-105 hover-hover:bg-muted/50 hover-hover:text-foreground',
-            'active:scale-95'
-          )}
+          leftIcon={copied ? Check : Duplicate}
           aria-label='Copy code'
-        >
-          {copied ? <Check className='h-3.5 w-3.5' /> : <Duplicate className='h-3.5 w-3.5' />}
-        </Button>
+        />
       )}
       {!hideInternalWand && (
         <WandPromptBar
@@ -943,16 +934,11 @@ export const Code = memo(function Code({
             !isPreview &&
             !readOnly &&
             !hideInternalWand && (
-              <Button
-                variant='ghost'
-                size='icon'
+              <WandButton
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
-              >
-                <Wand className='size-4' />
-              </Button>
+              />
             )}
         </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.test.tsx
index 9585aa4c5d0..8f3b40f5cd8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.test.tsx
@@ -10,6 +10,13 @@ const { SECRET, searchTargetRef } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  Chip: ({
+    onClick,
+    disabled,
+    'aria-label': label,
+  }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type='button' onClick={onClick} disabled={disabled} aria-label={label} />
+  ),
   cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
   Textarea: (props: Record<string, unknown>) => <textarea {...props} />,
 }))
@@ -19,12 +26,6 @@ vi.mock('@sim/emcn/icons', () => ({
   Wand: () => null,
 }))
 
-vi.mock('@/components/ui/button', () => ({
-  Button: ({ children }: { children?: React.ReactNode }) => (
-    <button type='button'>{children}</button>
-  ),
-}))
-
 vi.mock(
   '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller',
   () => ({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 70406d9162d..e25ac99312f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -8,9 +8,8 @@ import {
   useState,
 } from 'react'
 import { cn, Textarea } from '@sim/emcn'
-import { ChevronsUpDown, Wand } from '@sim/emcn/icons'
+import { ChevronsUpDown } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import { Button } from '@/components/ui/button'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   maskSecretText,
@@ -22,6 +21,7 @@ import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import type { WandControlHandlers } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
+import { WandButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button'
 import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
@@ -400,9 +400,7 @@ export function LongInput({
               {/* Wand Button - only show if not hidden by parent */}
               {isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand && (
                 <div className='absolute top-2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
-                  <Button
-                    variant='ghost'
-                    size='icon'
+                  <WandButton
                     onClick={
                       wandHook.isPromptVisible
                         ? wandHook.hidePromptInline
@@ -410,10 +408,7 @@ export function LongInput({
                     }
                     disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
                     aria-label='Generate content with AI'
-                    className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
-                  >
-                    <Wand className='size-4' />
-                  </Button>
+                  />
                 </div>
               )}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index eaf2449b9a1..f74ffd665ae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -1,8 +1,6 @@
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { cn, Input } from '@sim/emcn'
-import { Wand } from '@sim/emcn/icons'
 import { useReactFlow } from '@xyflow/react'
-import { Button } from '@/components/ui/button'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   maskSecretText,
@@ -13,6 +11,7 @@ import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import type { WandControlHandlers } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
+import { WandButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button'
 import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
@@ -410,18 +409,13 @@ export const ShortInput = memo(function ShortInput({
         {/* Wand Button - only show if not hidden by parent */}
         {isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand && (
           <div className='-translate-y-1/2 absolute top-1/2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
-            <Button
-              variant='ghost'
-              size='icon'
+            <WandButton
               onClick={
                 wandHook.isPromptVisible ? wandHook.hidePromptInline : wandHook.showPromptInline
               }
               disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
               aria-label='Generate content with AI'
-              className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-xs transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
-            >
-              <Wand className='size-4' />
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button.tsx
new file mode 100644
index 00000000000..b639647da9f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-button.tsx
@@ -0,0 +1,27 @@
+import type { MouseEventHandler } from 'react'
+import { Chip } from '@sim/emcn'
+import { Wand } from '@sim/emcn/icons'
+
+interface WandButtonProps {
+  onClick: MouseEventHandler<HTMLButtonElement>
+  disabled?: boolean
+  'aria-label'?: string
+}
+
+/** AI prompt trigger shared by text fields and the code editor. Chrome belongs to EMCN. */
+export function WandButton({
+  onClick,
+  disabled,
+  'aria-label': label = 'Generate content with AI',
+}: WandButtonProps) {
+  return (
+    <Chip
+      variant='border-shadow'
+      shape='round'
+      leftIcon={Wand}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.test.tsx
new file mode 100644
index 00000000000..1e740ba8fe4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.test.tsx
@@ -0,0 +1,103 @@
+/** @vitest-environment jsdom */
+import { act, type ComponentProps } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
+
+let container: HTMLDivElement
+let root: Root
+const onSubmit = vi.fn()
+const onCancel = vi.fn()
+const onChange = vi.fn()
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.clearAllMocks()
+  vi.useFakeTimers()
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+})
+
+function render(props: Partial<ComponentProps<typeof WandPromptBar>> = {}) {
+  act(() =>
+    root.render(
+      <WandPromptBar
+        isVisible
+        isLoading={false}
+        isStreaming={false}
+        promptValue='Explain this code'
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        onChange={onChange}
+        {...props}
+      />
+    )
+  )
+}
+
+function button(label: string) {
+  return container.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)!
+}
+
+function key(key: string) {
+  act(() =>
+    container
+      .querySelector('input')!
+      .dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
+  )
+}
+
+describe('WandPromptBar actions', () => {
+  it('submits the same prompt by click and Enter, and blocks empty prompts', () => {
+    render()
+    act(() => button('Generate content').click())
+    key('Enter')
+    expect(onSubmit.mock.calls).toEqual([['Explain this code'], ['Explain this code']])
+    render({ promptValue: '  ' })
+    expect(button('Generate content').disabled).toBe(true)
+    act(() => button('Generate content').click())
+    key('Enter')
+    expect(onSubmit).toHaveBeenCalledTimes(2)
+  })
+
+  it('preserves pending and streaming restrictions', () => {
+    render({ isLoading: true })
+    expect(container.querySelector('input')!.disabled).toBe(true)
+    expect(button('Generate content').disabled).toBe(true)
+    act(() => {
+      button('Generate content').click()
+      button('Close AI prompt').click()
+    })
+    key('Escape')
+    act(() => vi.runAllTimers())
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
+
+    render({ isStreaming: true })
+    expect(container.querySelector('input')!.value).toBe('Generating...')
+    expect(button('Generate content')).toBeNull()
+    act(() => button('Close AI prompt').click())
+    act(() => vi.runAllTimers())
+    expect(onCancel).not.toHaveBeenCalled()
+  })
+
+  it.each(['button', 'Escape', 'outside'] as const)(
+    'closes through %s after the existing exit delay',
+    (method) => {
+      render()
+      if (method === 'button') act(() => button('Close AI prompt').click())
+      else if (method === 'Escape') key('Escape')
+      else act(() => document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
+      expect(onCancel).not.toHaveBeenCalled()
+      act(() => vi.advanceTimersByTime(150))
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    }
+  )
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index b1df8260831..2566b9deaf7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { Chip, cn } from '@sim/emcn'
 import { Send, X } from '@sim/emcn/icons'
-import { Button } from '@/components/ui/button'
 
 interface WandPromptBarProps {
   isVisible: boolean
@@ -114,25 +113,16 @@ export function WandPromptBar({
           />
         </div>
 
-        <Button
-          variant='ghost'
-          size='icon'
-          onClick={handleCancel}
-          className='size-8 rounded-full text-muted-foreground hover-hover:bg-accent/50 hover-hover:text-foreground'
-        >
-          <X className='size-4' />
-        </Button>
+        <Chip shape='round' leftIcon={X} onClick={handleCancel} aria-label='Close AI prompt' />
 
         {!isStreaming && (
-          <Button
-            variant='ghost'
-            size='icon'
+          <Chip
+            shape='round'
+            leftIcon={Send}
             onClick={() => onSubmit(promptValue)}
-            className='size-8 rounded-full text-muted-foreground hover-hover:bg-primary/10 hover-hover:text-foreground'
             disabled={isLoading || isStreaming || !promptValue.trim()}
-          >
-            <Send className='size-4' />
-          </Button>
+            aria-label='Generate content'
+          />
         )}
       </div>
     </div>
diff --git a/apps/sim/components/ui/button.tsx b/apps/sim/components/ui/button.tsx
deleted file mode 100644
index 80b68c91009..00000000000
--- a/apps/sim/components/ui/button.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cn } from '@sim/emcn'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover-hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover-hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover-hover:bg-accent hover-hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover-hover:bg-secondary/80',
-        ghost: 'hover-hover:bg-accent hover-hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover-hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
diff --git a/apps/sim/components/ui/index.ts b/apps/sim/components/ui/index.ts
index 58003a616a4..f343ed3b309 100644
--- a/apps/sim/components/ui/index.ts
+++ b/apps/sim/components/ui/index.ts
@@ -1,5 +1,4 @@
 export { ActivityStatus } from '@/components/ui/activity-status'
-export { Button, buttonVariants } from './button'
 export { GeneratedPasswordInput } from './generated-password-input'
 export { Progress } from './progress'
 export {