Skip to content

Add FileCard component and integrate with ChatInput#116

Open
kuynkank wants to merge 1 commit into
pglevy:mainfrom
kuynkank:migrate-filecard
Open

Add FileCard component and integrate with ChatInput#116
kuynkank wants to merge 1 commit into
pglevy:mainfrom
kuynkank:migrate-filecard

Conversation

@kuynkank

@kuynkank kuynkank commented May 19, 2026

Copy link
Copy Markdown
Contributor

Closes #97

  1. Migrate FileCard from propeller with sailwind conventions:
  • File type icons for images, PDFs, code, and generic files
  • Human-readable file size formatting
  • Optional remove button for input context
  • Truncation for long file name
  1. Update ChatInput to use FileCard instead of inline file chips
Screenshot 2026-05-19 at 11 50 12
  1. Add stories for ChatUserMessage, ChatAssistantMessage, ChatPanel with file attachments
    ChatUserMessage:
Screenshot 2026-05-19 at 11 50 26

ChatAssistantMessage:
Screenshot 2026-05-19 at 11 50 19

ChatPanel:
Screenshot 2026-05-19 at 11 49 48

@kuynkank kuynkank force-pushed the migrate-filecard branch from 5181d05 to 3d32252 Compare May 19, 2026 15:57

@pglevy pglevy left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one a11y text tweak!

Comment thread src/components/Chat/FileCard.tsx Outdated
{showRemove && (
<button
onClick={onRemove}
aria-label="Remove file"

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"file": "src/components/Chat/FileCard.tsx",
      "line": 69,
      "summary": "Generic aria-label 'Remove file' is an accessibility regression from the
  previous file-specific label",
      "failure_scenario": "User with screen reader has 3 file attachments. Tabbing through
  remove buttons reads 'Remove file', 'Remove file', 'Remove file' — no way to distinguish
  which file each button removes. Old code used aria-label={`Remove ${file.name}`}."

Migrate FileCard from propeller with sailwind conventions:
- File type icons for images, PDFs, code, and generic files
- Human-readable file size formatting
- Optional remove button for input context
- Truncation for long file names
- Update ChatInput to use FileCard instead of inline file chips
- Add stories for ChatPanel, ChatUserMessage, ChatAssistantMessage with file attachments
@kuynkank kuynkank force-pushed the migrate-filecard branch from 3d32252 to 937d6c3 Compare June 4, 2026 13:54
@kuynkank kuynkank requested a review from pglevy June 4, 2026 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FileCard: Has an accompanying FileCard.md design doc

2 participants