refactor(emcn): share filled stop icon across chat controls

Author: Bill Leoutsakos

apps/sim/app/(interfaces)/chat/components/input/input.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 import { useLayoutEffect, useRef, useState } from 'react'
 import { Badge, Button, cn, Tooltip } from '@sim/emcn'
-import { ArrowUp, Paperclip, X } from '@sim/emcn/icons'
+import { ArrowUp, Paperclip, StopFilled, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
@@ -258,13 +258,7 @@ export const ChatInput: React.FC<{
                   className='size-[28px] rounded-full p-0'
                   aria-label='Stop generation'
                 >
-                  <svg
-                    className='block size-[14px] fill-current'
-                    viewBox='0 0 24 24'
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
-                  </svg>
+                  <StopFilled className='block size-[14px] fill-current' />
                 </Button>
               ) : (
                 <Button

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -2,7 +2,7 @@
 
 import { useRef } from 'react'
 import { Button, Chip, cn, Tooltip } from '@sim/emcn'
-import { ArrowUp, Plus } from '@sim/emcn/icons'
+import { ArrowUp, Plus, StopFilled } from '@sim/emcn/icons'
 import { ASSISTANT_IMAGE_ACCEPT_ATTRIBUTE } from '@/lib/uploads/shared/assistant-images'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
 import { AttachedFilesList } from '@/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list'
@@ -137,13 +137,7 @@ export function Composer({
               aria-label='Stop generation'
               className={cn(SEND_BUTTON_BASE, SEND_BUTTON_ACTIVE)}
             >
-              <svg
-                className='block size-[14px] fill-white dark:fill-black'
-                viewBox='0 0 24 24'
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
-              </svg>
+              <StopFilled className='block size-[14px] fill-white dark:fill-black' />
             </Button>
           ) : (
             <Button

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import React from 'react'
-import { ArrowUp, Button, cn } from '@sim/emcn'
+import { Button, cn } from '@sim/emcn'
+import { ArrowUp, StopFilled } from '@sim/emcn/icons'
 import {
   SEND_BUTTON_ACTIVE,
   SEND_BUTTON_BASE,
@@ -30,13 +31,7 @@ export const SendButton = React.memo(function SendButton({
         title='Stop generation'
         aria-label='Stop generation'
       >
-        <svg
-          className='block h-[14px] w-[14px] fill-white dark:fill-black'
-          viewBox='0 0 24 24'
-          xmlns='http://www.w3.org/2000/svg'
-        >
-          <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
-        </svg>
+        <StopFilled className='block h-[14px] w-[14px] fill-white dark:fill-black' />
       </Button>
     )
   }

packages/emcn/src/icons/index.ts

@@ -144,6 +144,7 @@ export { Split } from './split'
 export { Sprout } from './sprout'
 export { Square } from './square'
 export { SquareArrowUpRight } from './square-arrow-up-right'
+export { StopFilled } from './stop-filled'
 export { Strikethrough } from './strikethrough'
 export { Sun } from './sun'
 export { Table } from './table'

packages/emcn/src/icons/stop-filled.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Filled stop icon. Callers provide the size and fill through SVG props.
+ */
+export function StopFilled(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
+    </svg>
+  )
+}