✅ 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 👈 (View in Graphite)
• [fix] Improve st.chat_input file delete button colors #13554
• 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 reduces the maximum display length of file chips in the st.chat_input component from 36 to 16 characters. The changes include:

1. Core logic change: Updated DEFAULT_MAX_LENGTH constant in truncateFilename.ts from 36 to 16
2. Styling change: Set maxWidth: "11rem" (was 100%) on StyledChatUploadedFile to constrain chip width
3. Unit tests: Updated truncateFilename.test.ts assertions to reflect the new 16-character limit
4. Component tests: Updated ChatInput.test.tsx to verify filenames via title attribute instead of textContent
5. E2E snapshots: Updated visual snapshots for the truncated file chip appearance

Code Quality

The implementation is clean and well-structured:

• truncateFilename.ts: The algorithm correctly handles middle truncation while preserving file extensions. The logic is unchanged; only the default max length constant was updated.

• styled-components.ts (line 82): The maxWidth: "11rem" change ensures visual consistency. This works well with the minWidth: "9rem" already set, creating a reasonable size range for file chips.

• ChatUploadedFile.tsx (lines 156-163): The existing implementation already correctly sets title={fileInfo.name} for accessibility (full filename on hover tooltip) while displaying truncateFilename(fileInfo.name) as visible text. This is proper UI/UX design.

Minor Issue - PR Description Discrepancy

File: PR description
Issue: The PR description states "from 36 to 14 characters" but the actual code uses DEFAULT_MAX_LENGTH = 16. This should be corrected for documentation accuracy.

Test Coverage

Unit Tests (Good)

• truncateFilename.test.ts: Comprehensive test coverage including:

  • Files under max length (short filenames, exact length, no extension)
  • Files with extensions over max length
  • Files without extensions
  • Very long extensions
  • Multiple dots (tar.gz, version numbers)
  • Edge cases (empty string, single character, hidden files, UUID-style)
  • Custom max length parameter

• ChatInput.test.tsx: The changes correctly adapt to the new truncation behavior by checking the title attribute (full filename) instead of textContent (truncated display). This is the right approach since:

  • title attribute contains the full filename for accessibility
  • Displayed text is now truncated and may not match the full filename

E2E Tests (Good)

• Updated snapshot tests for file chip truncation across browsers (chromium, firefox, webkit)
• The parameterized test test_file_chip_variations in st_chat_input_test.py includes a "truncated" test case with a long filename to visually verify the truncation behavior

Backwards Compatibility

No breaking changes. This is a visual-only change:

1. The truncateFilename function's public API is unchanged (same function signature, same parameter support)
2. The full filename is still accessible via the title attribute (tooltip on hover)
3. The underlying data/functionality is not affected - only display presentation
4. Users can still pass custom maxLength to truncateFilename if needed

Security & Risk

Low risk:

1. No security concerns - this is purely a UI/visual change
2. No changes to data handling, file upload logic, or communication protocols
3. The truncation logic is well-tested and handles edge cases properly
4. The change improves UX by keeping file chips more compact

Recommendations

1. Minor: Update the PR description to correctly state "from 36 to 16 characters" instead of "14 characters" for accuracy.

2. Observation: Line 734 in ChatInput.test.tsx still uses toHaveTextContent("docs/readme.md") which works because the filename (13 characters) is shorter than the new max (16). This is fine but could be noted for future reference if the max length is reduced further.

Verdict

APPROVED: This is a well-implemented, focused change that improves the visual appearance of file chips in the chat input component. The code follows existing patterns, has comprehensive test coverage (both unit and E2E), and is fully backwards compatible. The only minor issue is a documentation discrepancy in the PR description (14 vs 16 characters) which does not affect the code quality.

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:29 PM UTC: Graphite rebased this pull request as part of a merge.
• Jan 12, 4:44 PM UTC: @sfc-gh-nbellante merged this pull request with Graphite.