Skip to content

Conversation

@sfc-gh-nbellante
Copy link
Contributor

@sfc-gh-nbellante sfc-gh-nbellante commented Dec 4, 2025

Describe your changes

Enhanced the file upload UI in chat input with improved file chips that:

  • Display appropriate icons based on file type (PDF, image, code, etc.)
  • Show error states with retry functionality
  • Truncate long filenames intelligently
  • Improve visual design with better spacing and layout

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 types
    • truncateFilename.test.ts: Tests filename truncation with various edge cases
  • E2E Tests: Added Playwright snapshot tests for:

    • Single file upload (light/dark themes)
    • Multiple file upload
    • File upload error states
    • Audio with uploaded files
  • 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.

@snyk-io
Copy link
Contributor

snyk-io bot commented Dec 4, 2025

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 4, 2025

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-13223/streamlit-1.52.1-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-13223.streamlit.app (☁️ Deploy here if not accessible)

Copy link
Contributor Author

sfc-gh-nbellante commented Dec 4, 2025

@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch 3 times, most recently from 8d833ef to a4e250b Compare December 4, 2025 18:51
@github-actions
Copy link
Contributor

github-actions bot commented Dec 4, 2025

📉 Frontend coverage change detected

The frontend unit test (vitest) coverage has decreased by 0.0400%

  • Current PR: 85.8900% (12524 lines, 1766 missed)
  • Latest develop: 85.9300% (12446 lines, 1750 missed)

💡 Consider adding more unit tests to maintain or improve coverage.

📊 View detailed coverage comparison

@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch 2 times, most recently from a3bcaf6 to c871944 Compare December 4, 2025 19:22
@sfc-gh-nbellante sfc-gh-nbellante changed the title Enhance ChatInput file upload with file type icons, filename truncation, and improved button styling [feat] Enhance st.chat_input file upload UI with improved file chips and retry functionality Dec 4, 2025
@sfc-gh-nbellante sfc-gh-nbellante added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Dec 4, 2025
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch from d19040b to 95d8d00 Compare December 5, 2025 19:55
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch 2 times, most recently from a4421ae to 2d6d195 Compare December 8, 2025 18:32
Copy link
Contributor

Copilot AI left a 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

@cursor

This comment was marked as resolved.

@lukasmasuch
Copy link
Collaborator

@cursor review

@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch 3 times, most recently from 375d1ce to 42ee566 Compare December 9, 2025 15:43
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch from 42ee566 to 134ee1b Compare December 9, 2025 15:53
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch from 134ee1b to 09f82b9 Compare December 9, 2025 15:57
@sfc-gh-nbellante sfc-gh-nbellante marked this pull request as ready for review December 9, 2025 16:41
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch 2 times, most recently from 712ca07 to 2ee0af8 Compare December 9, 2025 17:07
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
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the chat-input-file-upload-enhancements branch from 2ee0af8 to 4f10c74 Compare December 10, 2025 16:17
@sfc-gh-nbellante sfc-gh-nbellante merged commit 0c6aa0b into develop Dec 15, 2025
44 checks passed
@sfc-gh-nbellante sfc-gh-nbellante deleted the chat-input-file-upload-enhancements branch December 15, 2025 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants