Skip to content

[feat] Update chat input UI with improved layout and styling #13088

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.

Sign up for GitHub

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

Jump to bottom
Merged
sfc-gh-nbellante merged 13 commits into from
Dec 2, 2025
Merged

[feat] Update chat input UI with improved layout and styling #13088

sfc-gh-nbellante merged 13 commits into from
Dec 2, 2025

Conversation

@sfc-gh-nbellante
Copy link
Contributor

@sfc-gh-nbellante sfc-gh-nbellante commented Nov 21, 2025 •
edited
Loading

Describe your changes

Redesigned the Chat Input component to match the new design specifications:

  • Updated the layout to use a more modern, cleaner design with better spacing
  • Changed the send button from a paper airplane icon to an arrow icon
  • Moved the microphone button to the left side of the input
  • Changed the file upload button from a paperclip to a plus icon
  • Improved the styling of uploaded file chips with better spacing and visual treatment
  • Repositioned character count to the top-right corner
  • Enhanced accessibility with better aria labels
  • Improved the visual appearance of the dropzone when dragging files
  • Fixed the behavior when removing the last uploaded file
  • Updated all test snapshots to reflect the new design

image.png

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

This was referenced Nov 21, 2025
Merged
Merged
@snyk-io
Copy link
Contributor

snyk-io bot commented Nov 21, 2025 •
edited
Loading

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

@sfc-gh-nbellante sfc-gh-nbellante mentioned this pull request Nov 21, 2025
Merged
@sfc-gh-nbellante Graphite App
Copy link
Contributor Author

sfc-gh-nbellante commented Nov 21, 2025 •
edited
Loading

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 21, 2025 •
edited
Loading

✅ PR preview is ready!

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

@sfc-gh-nbellante sfc-gh-nbellante changed the title style updates to chat input [feat] Redesign chat input UI with improved layout Nov 21, 2025
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-20-adjusting_return_value_of_chat_input branch from 7299b3e to 752f938 Compare November 24, 2025 15:58
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from d66037c to 65fa621 Compare November 24, 2025 15:58
@graphite-app graphite-app bot changed the base branch from 11-20-adjusting_return_value_of_chat_input to graphite-base/13088 November 24, 2025 16:16
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from 65fa621 to 9b327de Compare November 24, 2025 16:17
@graphite-app graphite-app bot changed the base branch from graphite-base/13088 to 11-20-adjusting_return_value_of_chat_input November 24, 2025 16:17
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from 9b327de to 5992124 Compare November 24, 2025 16:17
@sfc-gh-nbellante sfc-gh-nbellante changed the base branch from 11-20-adjusting_return_value_of_chat_input to graphite-base/13088 November 24, 2025 18:29
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from 5992124 to 6e53c36 Compare November 24, 2025 18:30
@graphite-app graphite-app bot changed the base branch from graphite-base/13088 to develop November 24, 2025 18:31
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch 2 times, most recently from e42de3a to 15c2d86 Compare November 25, 2025 15:48
@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 feature:st.chat_input Related to the `st.chat_input` widget labels Nov 25, 2025
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from 15c2d86 to d5891f9 Compare November 25, 2025 18:08
graphite-app[bot]
graphite-app bot reviewed Nov 25, 2025
View reviewed changes
@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2025 •
edited
Loading

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0200%

  • Current PR: 89.5200% (51759 lines, 5422 missed)
  • Latest develop: 89.5000% (51712 lines, 5429 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from c7a1b30 to 8d81849 Compare December 1, 2025 17:10
@sfc-gh-nbellante sfc-gh-nbellante mentioned this pull request Dec 1, 2025
Closed
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from 8d81849 to 68a3bb3 Compare December 1, 2025 17:45
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch 4 times, most recently from 1bcb411 to bc83355 Compare December 2, 2025 16:13
@sfc-gh-nbellante sfc-gh-nbellante changed the title [feat] Redesign chat input UI with improved layout [feat] Update chat input UI with improved layout and styling Dec 2, 2025
@sfc-gh-nbellante sfc-gh-nbellante marked this pull request as ready for review December 2, 2025 16:57
Copilot AI review requested due to automatic review settings December 2, 2025 16:57
Copilot AI reviewed Dec 2, 2025
View reviewed changes
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 redesigns the Chat Input component to implement a modern, cleaner UI with improved layout and spacing. The changes include moving the microphone button to the left side, changing button icons (send button from paper airplane to arrow, file upload from paperclip to plus), repositioning the character count to the top-right corner, and improving the visual treatment of uploaded file chips with better spacing.

Key Changes

  • Layout restructure: Converted from row-based to column-based layout with distinct content and action areas
  • Button repositioning: Microphone moved to left cluster, send button styled as primary with new arrow icon
  • File upload improvements: Dropzone overlay simplified, file chips with better spacing and background
  • Accessibility: Enhanced with improved aria labels for all interactive buttons

Reviewed changes

Copilot reviewed 7 out of 289 changed files in this pull request and generated no comments.

Show a summary per file
File Description
frontend/lib/src/components/widgets/ChatInput/styled-components.ts Restructured layout from flex-row to flex-column, added new layout components (ContentArea, PrimaryRegion, ActionRow, LeftCluster, RightCluster), repositioned character count styling
frontend/lib/src/components/widgets/ChatInput/fileUpload/styled-components.ts Simplified dropzone to use absolute positioning with inset, updated file chip styling with background and improved spacing
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatFileUploadDropzone.tsx Removed inputHeight prop as dropzone now uses absolute positioning
frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatFileUploadButton.tsx Changed icon from AttachFile to Add, removed vertical divider
frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx Major restructure with new layout hierarchy, button repositioning, added focusInput callback, improved aria labels
frontend/lib/src/components/widgets/ChatInput/ChatInput.test.tsx Updated test assertions for character count visibility logic
e2e_playwright/st_chat_input_test.py Updated assertion for file deletion behavior to check container visibility
E2E snapshot files (PNG) Updated visual regression test snapshots for new UI design

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

@sfc-gh-nbellante
style updates to chat input
cdba701
@sfc-gh-nbellante
fix file upload name color visibility in error state
c9b5a4e
@sfc-gh-nbellante
remove maxWidth constraint on uploaded file chip
d21919f
@sfc-gh-nbellante
revert file chip padding to sm
b6a61ba
@sfc-gh-nbellante
fix(tests): use real DOM elements in useTextInputAutoExpand tests
86bb364 
Update test helper to create actual textarea DOM elements instead of
plain object mocks. JSDOM's getComputedStyle requires real elements.

- Create textarea elements with document.createElement
- Set CSS styles (lineHeight, padding) for computed style calculations
- Add afterEach cleanup to prevent DOM pollution between tests
- Fix test expectation for large content (height correctly caps at maxHeight)
@sfc-gh-nbellante
chore: remove useTextInputAutoExpand changes (moved to child PR)
1c3d21e
@sfc-gh-nbellante
chore: update E2E snapshots for chat input style changes
d5dffbe
@sfc-gh-nbellante
chore: update E2E snapshots from CI
c9a4ad4
@sfc-gh-nbellante
fix: update test to check element visibility after file deletion
ce37043
@sfc-gh-nbellante
fix: enable click on character count to focus input
731b29b
@sfc-gh-nbellante
chore: update 2 remaining snapshots
cda40bf
@sfc-gh-nbellante
chore: update E2E snapshots
caa800c
@sfc-gh-nbellante sfc-gh-nbellante force-pushed the 11-21-style_updates_to_chat_input branch from ab2e804 to caa800c Compare December 2, 2025 17:55
sfc-gh-bnisco
sfc-gh-bnisco approved these changes Dec 2, 2025
View reviewed changes
Copy link
Collaborator

@sfc-gh-bnisco sfc-gh-bnisco left a comment

Choose a reason for hiding this comment

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

LGTM, noted some cleanup tasks throughout. I spot checked the snapshots and they all look to be as expected with the new design.

@sfc-gh-nbellante
Copy link
Contributor Author

sfc-gh-nbellante commented Dec 2, 2025

LGTM, noted some cleanup tasks throughout. I spot checked the snapshots and they all look to be as expected with the new design.

Yeah idk what it is but after I see those comments for so long, I stop seeing them.. if that makes sense 😖

@sfc-gh-nbellante sfc-gh-nbellante merged commit 90ee300 into develop Dec 2, 2025
44 checks passed
@sfc-gh-nbellante sfc-gh-nbellante deleted the 11-21-style_updates_to_chat_input branch December 2, 2025 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@graphite-app graphite-app[bot] graphite-app[bot] left review comments

Copilot code review Copilot Copilot left review comments

@sfc-gh-bnisco sfc-gh-bnisco sfc-gh-bnisco approved these changes

Assignees

No one assigned

Labels

change:feature PR contains new feature or enhancement implementation feature:st.chat_input Related to the `st.chat_input` widget impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sfc-gh-nbellante @sfc-gh-bnisco