-
Notifications
You must be signed in to change notification settings - Fork 4k
[feat] Enhance st.chat_input file upload UI with improved file chips and retry functionality
#13223
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feat] Enhance st.chat_input file upload UI with improved file chips and retry functionality
#13223
Conversation
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
✅ PR preview is ready!
|
This stack of pull requests is managed by Graphite. Learn more about stacking. |
8d833ef to
a4e250b
Compare
📉 Frontend coverage change detectedThe frontend unit test (vitest) coverage has decreased by 0.0400%
💡 Consider adding more unit tests to maintain or improve coverage. |
a3bcaf6 to
c871944
Compare
st.chat_input file upload UI with improved file chips and retry functionality
d19040b to
95d8d00
Compare
a4421ae to
2d6d195
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR enhances the file upload UI in st.chat_input with improved file chips that display type-specific icons, handle error states with retry functionality, and intelligently truncate long filenames. The implementation includes comprehensive unit tests for utility functions and E2E tests for visual validation across browsers and themes.
Key Changes:
- Added file type detection with appropriate icons (PDF, image, code, video, etc.)
- Implemented middle truncation for long filenames while preserving extensions
- Added retry functionality for failed uploads with accessible UI patterns
- Redesigned file chip layout with improved visual hierarchy and spacing
Reviewed changes
Copilot reviewed 16 out of 93 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
scripts/snapshot_cleanup.py |
Added 60 new snapshot file entries for file chip visual tests |
frontend/lib/src/theme/primitives/sizes.ts |
Added chatInputFileIconSize constant (2.25rem) |
frontend/lib/src/components/widgets/FileUploader/UploadFileInfo.ts |
Added optional file property to store original File object for retry |
frontend/lib/src/util/FileHelper.ts |
Updated to pass File object to UploadFileInfo constructor |
frontend/lib/src/components/widgets/ChatInput/fileUpload/truncateFilename.ts |
New utility for intelligent filename truncation with extension preservation |
frontend/lib/src/components/widgets/ChatInput/fileUpload/truncateFilename.test.ts |
Comprehensive unit tests for truncation logic |
frontend/lib/src/components/widgets/ChatInput/fileUpload/getFileTypeIcon.ts |
New utility mapping file extensions to Material icons |
frontend/lib/src/components/widgets/ChatInput/fileUpload/getFileTypeIcon.test.ts |
Complete unit tests for icon selection |
frontend/lib/src/components/widgets/ChatInput/fileUpload/styled-components.ts |
Redesigned styled components with new layout and error states |
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFile.tsx |
Enhanced component with retry functionality and accessibility features |
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFiles.tsx |
Added onRetry prop support |
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatFileUploadButton.tsx |
Simplified component using consistent button styling |
frontend/lib/src/components/widgets/ChatInput/fileUpload/createFileUploadHandler.ts |
Updated to pass File object for retry support |
frontend/lib/src/components/widgets/ChatInput/fileUpload/createDropHandler.ts |
Updated to pass File object for retry support |
frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx |
Implemented retry handler with ref pattern |
e2e_playwright/st_chat_input_test.py |
Added comprehensive E2E tests for file chips and retry functionality |
| Various snapshot PNG files | New visual regression test baselines for all browsers/themes |
This comment was marked as resolved.
This comment was marked as resolved.
|
@cursor review |
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFile.tsx
Outdated
Show resolved
Hide resolved
frontend/lib/src/components/widgets/ChatInput/fileUpload/truncateFilename.ts
Outdated
Show resolved
Hide resolved
375d1ce to
42ee566
Compare
42ee566 to
134ee1b
Compare
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFile.tsx
Show resolved
Hide resolved
134ee1b to
09f82b9
Compare
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFile.tsx
Show resolved
Hide resolved
712ca07 to
2ee0af8
Compare
…on, and improved button styling
Add all E2E snapshot files for the new ChatInput file type icons to the DISALLOWED_SNAPSHOTS list in snapshot_cleanup.py.
Update tests to work with new inline error display system. The ChatInput file upload component was refactored to show error messages directly in the file chip instead of in tooltips. Tests were failing because they were still looking for the old tooltip system using stTooltipHoverTarget. Changes: - test_file_upload_error_message_disallowed_files: Check inline error via stChatInputFileError - test_file_upload_error_message_file_too_large: Check inline error via stChatInputFileError - Update expected error text to match new format (application/json instead of json)
These snapshot files were mistakenly placed directly in __snapshots__/linux/ instead of in the proper st_chat_input_test subdirectory. Removing them as they will be regenerated in the correct location by CI.
- Fix bug where File object was not passed to UploadFileInfo for rejected files, causing canRetry to always be false - Update getRejectedFileInfo in FileHelper.ts to pass file parameter - Update createDropHandler.ts error handler to pass file parameter - Add E2E tests for retry functionality, upload spinner, cancel during upload, and filename tooltip
- Add proper synchronization in retry tests by waiting for file text to appear before checking error elements - Remove spinner and cancel tests that relied on unreliable route interception to delay uploads (transient states are better tested in unit tests) - Keep tooltip test for filename truncation which is reliable
- Use themed_app instead of app for test fixture (matches working test) - Add set_viewport_size to ensure consistent rendering - Add reset_hovering to dismiss tooltips before assertions - Get uploaded_files with fresh locator after file_upload_helper
- Add retry attribute verification to test_file_upload_error_message_disallowed_files - Remove separate retry tests that were failing mysteriously - Keep tooltip test for filename truncation
- Add test_file_upload_retry_click_success test - Uses route interception to fail first upload, succeed on retry - Verifies retry attributes exist on error chip - Verifies clicking retry transitions file from error to uploaded state - Skips webkit due to network timing issues
- Remove '(no longer in tooltip)' historical context from comment - Remove inline comment from skip_browser decorator
2ee0af8 to
4f10c74
Compare

Describe your changes
Enhanced the file upload UI in chat input with improved file chips that:
Screenshot or video (only for visual changes)
Note: Screenshots are included in the PR as snapshot files for various browsers and themes.
Testing Plan
Unit Tests: Added comprehensive tests for new utility functions:
getFileTypeIcon.test.ts: Tests icon selection for different file typestruncateFilename.test.ts: Tests filename truncation with various edge casesE2E Tests: Added Playwright snapshot tests for:
Manual Testing: Verified visual appearance and functionality across browsers and themes
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.