improvement(chat): restore sent-attachment filenames and align chip tokens

- Revert the sent-message attachments to main's styling: the icon-only tile
  dropped the filename, leaving no way to tell what was sent.
- Radii onto the scale: --radius is 8px, so rounded-[10px] was off-system in
  both files. Outer surfaces use rounded-lg, the nested icon badge rounded-md.
- Pill filename uses the named text-xs rather than an arbitrary text-[11px].
- The remove badge is opaque instead of a translucent scrim, so it reads the
  same over a light card and over a photo rather than compositing with each.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx

@@ -2,35 +2,12 @@ import { cn } from '@sim/emcn'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatMessageAttachment } from '@/app/workspace/[workspaceId]/home/types'
 
-/**
- * Tile geometry shared with the thumbnail branches so a mixed row stays uniform.
- *
- * The border is load-bearing, not decoration: this renders on both the home transcript
- * (`--bg`) and the workflow chat panel (`--surface-1`), and against the latter the fill
- * is only ~8/255 away in light mode. With an icon-only tile the surface *is* the
- * affordance, so it needs an edge — the same reason the user message bubble pairs
- * `--surface-5` with a border.
- */
-const ATTACHMENT_TILE =
-  'size-[56px] overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-5)]'
-
-/**
- * A sent document shows only its type icon. The filename was already read in the
- * composer before sending, so repeating it here costs a wide pill in the transcript
- * for information the hover title still carries.
- */
-function FileAttachmentTile(props: { mediaType: string; filename: string }) {
+function FileAttachmentPill(props: { mediaType: string; filename: string }) {
   const Icon = getDocumentIcon(props.mediaType, props.filename)
   return (
-    <div
-      title={props.filename}
-      // The icon carries no accessible name on its own, so without these the tile is
-      // announced as nothing at all — the filename used to be real text.
-      role='img'
-      aria-label={props.filename}
-      className={cn(ATTACHMENT_TILE, 'flex items-center justify-center text-[var(--text-icon)]')}
-    >
-      <Icon className='size-[18px]' />
+    <div className='flex max-w-[140px] items-center gap-[5px] rounded-lg bg-[var(--surface-5)] px-[6px] py-[3px]'>
+      <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='truncate text-[var(--text-body)] text-xs'>{props.filename}</span>
     </div>
   )
 }
@@ -55,7 +32,7 @@ export function ChatMessageAttachments(props: {
       {attachments.map((att) => {
         if (!att.previewUrl) {
           return (
-            <FileAttachmentTile key={att.id} mediaType={att.media_type} filename={att.filename} />
+            <FileAttachmentPill key={att.id} mediaType={att.media_type} filename={att.filename} />
           )
         }
         const isVideo = att.media_type.startsWith('video/')
@@ -64,10 +41,7 @@ export function ChatMessageAttachments(props: {
           return (
             <div
               key={att.id}
-              title={att.filename}
-              role='img'
-              aria-label={att.filename}
-              className={cn(ATTACHMENT_TILE, 'relative')}
+              className='relative size-[56px] overflow-hidden rounded-lg bg-[var(--surface-5)]'
             >
               <div className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
                 <Icon className='size-[18px]' />
@@ -83,7 +57,7 @@ export function ChatMessageAttachments(props: {
           )
         }
         return (
-          <div key={att.id} className={ATTACHMENT_TILE} title={att.filename}>
+          <div key={att.id} className='size-[56px] overflow-hidden rounded-lg'>
             <img src={att.previewUrl} alt={att.filename} className='size-full object-cover' />
           </div>
         )

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx

@@ -18,7 +18,7 @@ import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/
  * hover steps further away in the direction each theme reads as "raised".
  */
 const CHIP_SURFACE =
-  'relative cursor-pointer rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] transition-colors hover-hover:bg-[var(--surface-active)] dark:hover-hover:bg-[var(--surface-6)]'
+  'relative cursor-pointer rounded-lg border border-[var(--border)] bg-[var(--surface-5)] transition-colors hover-hover:bg-[var(--surface-active)] dark:hover-hover:bg-[var(--surface-6)]'
 
 /** Height lives on the wrapper so both shapes are the same size by construction. */
 const CHIP_HEIGHT = 'h-[48px]'
@@ -113,7 +113,7 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
                 {/* Steps again on hover: the chip's own hover fill closes to within
                     7/255 of this badge in light mode, which would erase it during the
                     one interaction where it is being looked at. */}
-                <span className='flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-6)] text-[var(--text-icon)] transition-colors group-hover:bg-[var(--surface-7)] dark:bg-[var(--surface-3)] dark:group-hover:bg-[var(--surface-3)]'>
+                <span className='flex size-[32px] shrink-0 items-center justify-center rounded-md bg-[var(--surface-6)] text-[var(--text-icon)] transition-colors group-hover:bg-[var(--surface-7)] dark:bg-[var(--surface-3)] dark:group-hover:bg-[var(--surface-3)]'>
                   <Icon className='size-[16px]' />
                 </span>
                 <span className='flex min-w-0 flex-col items-start'>
@@ -147,10 +147,11 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
               onRemoveFile(file.id)
             }}
             aria-label={`Remove ${file.name}`}
-            // Sits inside the chip's top-right corner. A fixed dark scrim rather than a
-            // surface token: it overlays arbitrary photo content on the thumbnail shape,
-            // where no theme token can guarantee contrast.
-            className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100'
+            // Opaque, not a translucent scrim: a semi-transparent fill composites with
+            // whatever sits under it, so the same badge reads differently over a light
+            // card than over a photo. An opaque surface plus a border keeps the glyph
+            // contrast fixed and gives the badge an edge against any thumbnail.
+            className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] text-[var(--text-body)] opacity-0 transition-opacity group-hover:opacity-100'
           >
             <X className='size-[9px]' />
           </button>