✅ 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.

✅ PR preview is ready!

• [feat] Add image thumbnails to st.chat_input file uploads #13547
• [fix] Shorten st.chat_input file chip display to adhere to designs #13555
• [fix] Improve st.chat_input file delete button colors #13554 👈 (View in Graphite)
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

📉 Frontend coverage change detected

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

• Current PR: 86.5900% (12826 lines, 1719 missed)
• Latest develop: 86.5900% (12826 lines, 1719 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

Summary

This PR improves the visual appearance of the delete button (X button) on file chips in the chat input component by updating color values to match Figma designs. The changes include:

1. Adding an isError prop to StyledChatUploadedFileDeleteButton to support error state-specific coloring
2. Updating default button colors from fadedText20 to fadedText60 (improving visibility)
3. Updating hover colors from fadedText40 to bodyText (better contrast on hover)
4. Adding error state colors: redTextColor for default and red70 for hover
5. Updating all related E2E visual snapshots across browsers (Chromium, Firefox, WebKit) and themes (light, dark)

Code Quality

The code quality is excellent and follows Streamlit's frontend conventions:

ChatUploadedFile.tsx (lines 168-171)

• The isError prop is correctly passed to the styled component
• The existing isError variable derived from statusType === "error" is reused appropriately

styled-components.ts (lines 150-188)

• The new StyledChatUploadedFileDeleteButtonProps interface follows TypeScript best practices with optional isError prop
• The styled component correctly uses Emotion's object syntax with theme values
• All color values are properly derived from the theme (no hardcoded values), complying with the streamlit-custom/no-hardcoded-theme-values ESLint rule
• The ternary color logic is clear and readable: color: isError ? theme.colors.redTextColor : theme.colors.fadedText60

Theme Color Choices:

• fadedText60 (40% transparency) provides better visibility than the previous fadedText20 (70% transparency)
• bodyText on hover ensures strong contrast for the interactive state
• redTextColor and red70 are appropriate semantic colors for error states

Test Coverage

Unit Tests (ChatUploadedFile.test.tsx):

• Existing unit tests adequately cover the functional aspects of the delete button including:
  • Aria-labels for different states (uploaded, uploading)
  • Click handler invocation
  • Error state accessibility
• No new unit tests are needed since this is a visual-only CSS change with no behavioral changes

E2E Tests (st_chat_input_test.py):

• All visual snapshot tests have been updated across all three browsers (Chromium, Firefox, WebKit)
• Coverage includes:
  • Normal file upload state (light/dark themes)
  • Error state (light/dark themes)
  • Multiple file types (pdf, spreadsheet, text, code, audio, video, archive, unknown, truncated)
  • File chip theming variations
• The E2E tests follow best practices:
  • Use expect for auto-wait assertions
  • Use stable locators (get_by_test_id)
  • Include appropriate snapshot names following the st_command-test_description convention

Backwards Compatibility

This change is fully backwards compatible:

• No API changes to props or component interfaces
• No changes to HTML structure or test IDs
• The visual change is purely cosmetic (improved contrast/visibility)
• Users will not need to modify any code

Security & Risk

• No security concerns: This is a CSS-only visual change
• Low regression risk: Colors are derived from the existing theme system
• Accessibility improvement: The change from fadedText20 to fadedText60 improves button visibility and contrast, which is beneficial for users with visual impairments

Recommendations

No changes are required. The PR is well-implemented and follows all Streamlit coding conventions.

Optional consideration (not blocking):

1. If desired for completeness, a unit test could be added to verify the isError prop is passed to the styled component, but this is not strictly necessary since the visual snapshots already verify the correct rendering.

Verdict

APPROVED: This is a clean, well-implemented visual improvement that follows Streamlit's coding conventions, uses proper theme values, and has appropriate E2E snapshot coverage. The changes improve button visibility and accessibility without any breaking changes.

This is an automated AI review. Please verify the feedback and use your judgment.

Merge activity

• Jan 12, 4:27 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jan 12, 4:27 PM UTC: @sfc-gh-nbellante merged this pull request with Graphite.