Add FileCard component and integrate with ChatInput

src/components/Chat/ChatAssistantMessage.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ChatAssistantMessage } from './ChatAssistantMessage'
+import { FileCard } from './FileCard'
 
 const meta = {
   title: 'Components/Chat/ChatAssistantMessage',
@@ -40,3 +41,13 @@ export const MultipleMessages: Story = {
     </div>
   ),
 }
+
+export const WithFileAttachment: Story = {
+  args: { message: '' },
+  render: () => (
+    <div className="flex flex-col gap-2 w-full max-w-2xl">
+      <ChatAssistantMessage message="Here's the report you requested:" />
+      <FileCard fileName="quarterly-report.pdf" fileSize={1024 * 250} className="w-fit" />
+    </div>
+  ),
+}

src/components/Chat/ChatInput.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { X, FileText, FileImage, FileVideo, File } from 'lucide-react'
 import { mergeClasses } from '../../utils/classNames'
 import { ButtonWidget } from '../Button/ButtonWidget'
 import { ParagraphField } from '../ParagraphField/ParagraphField'
+import { FileCard } from './FileCard'
 
 export interface ChatInputFile {
   name: string
+  size?: number
   type?: string
 }
 
@@ -27,23 +28,6 @@ export interface ChatInputProps {
   className?: string
 }
 
-const getFileIcon = (type?: string) => {
-  if (!type) return File
-  if (type.startsWith('image/')) return FileImage
-  if (type.startsWith('video/')) return FileVideo
-  if (type === 'application/pdf' || type.startsWith('text/')) return FileText
-  return File
-}
-
-const getFileIconColor = (type?: string) => {
-  if (!type) return 'text-gray-500'
-  if (type.startsWith('image/')) return 'text-blue-500'
-  if (type.startsWith('video/')) return 'text-red-500'
-  if (type === 'application/pdf') return 'text-red-700'
-  if (type.startsWith('text/')) return 'text-blue-700'
-  return 'text-gray-500'
-}
-
 export const ChatInput: React.FC<ChatInputProps> = ({
   placeholder = 'Type a message...',
   onSubmit,
@@ -83,7 +67,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     input.onchange = (e) => {
       const selected = (e.target as HTMLInputElement).files
       if (selected) {
-        const newFiles = Array.from(selected).map(f => ({ name: f.name, type: f.type }))
+        const newFiles = Array.from(selected).map(f => ({ name: f.name, size: f.size, type: f.type }))
         setFiles(prev => [...prev, ...newFiles])
       }
     }
@@ -96,27 +80,16 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     <div className={mergeClasses(sailClasses, className)}>
       <div className="flex flex-col flex-1">
         {files.length > 0 && (
-          <div className="flex flex-col gap-1 px-3 pt-3">
-            {files.map((file, index) => {
-              const IconComponent = getFileIcon(file.type)
-              const iconColor = getFileIconColor(file.type)
-              return (
-                <div
-                  key={index}
-                  className="inline-flex items-center gap-2 px-3 py-1.5 rounded-sm border border-gray-200 bg-white w-fit max-w-full"
-                >
-                  <IconComponent size={16} className={`shrink-0 ${iconColor}`} />
-                  <span className="text-sm text-gray-900 truncate max-w-[200px]">{file.name}</span>
-                  <button
-                    onClick={() => setFiles(prev => prev.filter((_, i) => i !== index))}
-                    aria-label={`Remove ${file.name}`}
-                    className="shrink-0 p-0.5 rounded-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors"
-                  >
-                    <X size={14} />
-                  </button>
-                </div>
-              )
-            })}
+          <div className="flex flex-wrap gap-2 px-3 pt-3">
+            {files.map((file, index) => (
+              <FileCard
+                key={index}
+                fileName={file.name}
+                fileSize={file.size || 0}
+                showRemove
+                onRemove={() => setFiles(prev => prev.filter((_, i) => i !== index))}
+              />
+            ))}
           </div>
         )}
         <ParagraphField

src/components/Chat/ChatPanel.stories.tsx

@@ -4,6 +4,7 @@ import { ChatPanel } from './ChatPanel'
 import { ChatInput } from './ChatInput'
 import { ChatUserMessage } from './ChatUserMessage'
 import { ChatAssistantMessage } from './ChatAssistantMessage'
+import { FileCard } from './FileCard'
 
 const meta = {
   title: 'Components/Chat/ChatPanel',
@@ -118,3 +119,30 @@ export const Interactive: Story = {
     )
   },
 }
+
+export const WithFileAttachments: Story = {
+  args: {
+    title: 'Design Review',
+    children: (
+      <div className="space-y-4">
+        <div className="flex flex-col gap-2 items-end">
+          <div className="flex flex-wrap gap-2 justify-end">
+            <FileCard fileName="homepage-mockup.png" fileSize={1024 * 1024 * 2.1} />
+            <FileCard fileName="dashboard-mockup.png" fileSize={1024 * 1024 * 1.8} />
+            <FileCard fileName="settings-mockup.png" fileSize={1024 * 512} />
+          </div>
+          <ChatUserMessage message="Here are the mockups for the new pages. Can you generate the React components?" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <ChatAssistantMessage message="I've reviewed your mockups and generated the components. Here are the files:" />
+          <div className="flex flex-wrap gap-2">
+            <FileCard fileName="HomePage.tsx" fileSize={1024 * 12} className="w-fit" />
+            <FileCard fileName="Dashboard.tsx" fileSize={1024 * 18} className="w-fit" />
+            <FileCard fileName="Settings.tsx" fileSize={1024 * 8} className="w-fit" />
+          </div>
+        </div>
+      </div>
+    ),
+    footer: <ChatInput showUpload />,
+  },
+}

src/components/Chat/ChatUserMessage.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ChatUserMessage } from './ChatUserMessage'
+import { FileCard } from './FileCard'
 
 const meta = {
   title: 'Components/Chat/ChatUserMessage',
@@ -40,3 +41,13 @@ export const MultipleMessages: Story = {
     </div>
   ),
 }
+
+export const WithFileAttachment: Story = {
+  args: { message: '' },
+  render: () => (
+    <div className="flex flex-col gap-2 w-full max-w-2xl items-end">
+      <FileCard fileName="quarterly-report.pdf" fileSize={1024 * 250} />
+      <ChatUserMessage message="Can you summarize this report for me?" />
+    </div>
+  ),
+}

src/components/Chat/FileCard.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn, userEvent, within, expect } from 'storybook/test'
+import { FileCard } from './FileCard'
+
+const meta = {
+  title: 'Components/Chat/FileCard',
+  component: FileCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof FileCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { fileName: 'document.pdf', fileSize: 1024 * 250 },
+}
+
+export const WithRemoveButton: Story = {
+  args: { fileName: 'presentation.pdf', fileSize: 1024 * 1024 * 2.5, showRemove: true },
+}
+
+export const ImageFile: Story = {
+  args: { fileName: 'screenshot.png', fileSize: 1024 * 512 },
+}
+
+export const CodeFile: Story = {
+  args: { fileName: 'component.tsx', fileSize: 1024 * 45 },
+}
+
+export const GenericFile: Story = {
+  args: { fileName: 'data.csv', fileSize: 1024 * 1024 * 1.8 },
+}
+
+export const LongFileName: Story = {
+  args: {
+    fileName: 'this-is-a-very-long-filename-that-should-be-truncated-in-the-display.pdf',
+    fileSize: 1024 * 500,
+    showRemove: true,
+    maxWidth: '320px',
+  },
+}
+
+export const LongFileNameReadOnly: Story = {
+  args: {
+    fileName: 'another-extremely-long-filename-for-testing-truncation-behavior.tsx',
+    fileSize: 1024 * 45,
+    showRemove: false,
+    maxWidth: '280px',
+  },
+}
+
+export const MultipleFilesInMessage: Story = {
+  render: () => (
+    <div className="space-y-2 w-80">
+      <FileCard fileName="requirements.pdf" fileSize={1024 * 250} />
+      <FileCard fileName="design-mockup.png" fileSize={1024 * 1024 * 2.1} />
+      <FileCard fileName="implementation.tsx" fileSize={1024 * 45} />
+    </div>
+  ),
+}
+
+export const MultipleFilesInInput: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 max-w-md">
+      <FileCard fileName="document.pdf" fileSize={1024 * 250} showRemove onRemove={fn()} />
+      <FileCard fileName="image.jpg" fileSize={1024 * 512} showRemove onRemove={fn()} />
+      <FileCard fileName="code.tsx" fileSize={1024 * 45} showRemove onRemove={fn()} />
+    </div>
+  ),
+}
+
+export const RemoveInteraction: Story = {
+  args: { fileName: 'test-file.pdf', fileSize: 1024 * 100, showRemove: true, onRemove: fn() },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const removeButton = canvas.getByRole('button', { name: /remove file/i })
+    await expect(removeButton).toBeInTheDocument()
+    await userEvent.click(removeButton)
+    await expect(args.onRemove).toHaveBeenCalled()
+  },
+}

src/components/Chat/FileCard.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { X, File, FileImage, FileCode, FileText } from 'lucide-react'
+import { mergeClasses } from '../../utils/classNames'
+
+export interface FileCardProps {
+  /** The file name to display */
+  fileName: string
+  /** The file size in bytes */
+  fileSize: number
+  /** Whether to show the remove button */
+  showRemove?: boolean
+  /** Callback when the remove button is clicked */
+  onRemove?: () => void
+  /** Optional file type override (inferred from fileName if not provided) */
+  fileType?: string
+  /** Maximum width of the component (CSS value) */
+  maxWidth?: string
+  /** Additional Tailwind classes */
+  className?: string
+}
+
+function getFileExtension(filename: string): string {
+  const ext = filename.split('.').pop()
+  return ext ? ext.toUpperCase() : 'FILE'
+}
+
+function getFileIcon(filename: string) {
+  const ext = filename.split('.').pop()?.toLowerCase()
+  if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || ''))
+    return <FileImage size={20} className="shrink-0 text-blue-500" />
+  if (ext === 'pdf')
+    return <File size={20} className="shrink-0 text-red-500" />
+  if (['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'html', 'css', 'json', 'xml'].includes(ext || ''))
+    return <FileCode size={20} className="shrink-0 text-purple-500" />
+  return <FileText size={20} className="shrink-0 text-gray-700" />
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export const FileCard: React.FC<FileCardProps> = ({
+  fileName,
+  fileSize,
+  showRemove = false,
+  onRemove,
+  fileType,
+  maxWidth = '320px',
+  className,
+}) => {
+  const extension = fileType || getFileExtension(fileName)
+  const icon = getFileIcon(fileName)
+  const formattedSize = formatFileSize(fileSize)
+
+  const baseClasses = `flex items-center gap-2 rounded-sm border border-gray-300 bg-white py-2 ${showRemove ? 'pl-3 pr-2' : 'pl-3 pr-4'}`
+
+  return (
+    <div className={mergeClasses(baseClasses, className)} style={{ maxWidth }}>
+      {icon}
+      <div className="flex-1 min-w-0">
+        <div className="truncate text-sm font-semibold text-gray-900">{fileName}</div>
+        <div className="text-xs text-gray-700">{extension} • {formattedSize}</div>
+      </div>
+      {showRemove && (
+        <button
+          onClick={onRemove}
+          aria-label={`Remove ${fileName}`}
+          className="shrink-0 p-1 rounded-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+        >
+          <X size={16} />
+        </button>
+      )}
+    </div>
+  )
+}

src/components/Chat/index.ts

@@ -1,6 +1,9 @@
 export { ChatInput } from './ChatInput'
 export type { ChatInputProps, ChatInputFile } from './ChatInput'
 
+export { FileCard } from './FileCard'
+export type { FileCardProps } from './FileCard'
+
 export { ChatPanel } from './ChatPanel'
 export type { ChatPanelProps, ChatPanelHeaderAction } from './ChatPanel'