UX Improvements for Jupyter Chat Interface #298

ellisonbg · 2025-10-20T23:17:08Z

UX Improvements for Jupyter Chat Interface

Summary

This PR introduces a comprehensive set of user experience improvements to the Jupyter Chat interface, focusing on visual clarity, usability, and modernization. The changes streamline the chat interaction patterns, reduce visual clutter, and create a more polished, professional appearance throughout the application.

Screenshots

Screenshot 1: Clean Input State

What you're seeing: The new empty chat interface with the modernized input field. Notice:

Clean, minimalist placeholder text: "Enter a chat message, @ to mention..."
New square send button with upward arrow icon in the bottom-right corner (currently disabled/grayed out since there's no text)
Removed the old attachment button and verbose button designs
No top border on the input area, creating a cleaner visual flow

Screenshot 2: Code Blocks and Message Display (Full View)

What you're seeing: A complete conversation showing multiple UI improvements:

User message bubble (top) shows the asymmetric design - your own messages appear without redundant headers or avatars
AI response (Jupyternaut) shows clean formatting with the avatar and timestamp on the left
Code block toolbar at the bottom-right of the code snippet demonstrates the new borderless design - notice there's no border above the toolbar icons (copy, insert above, insert below, replace cell buttons)
The input field at bottom shows the same clean design with the square send button

Screenshot 3: Attachment Preview (Input with File)

What you're seeing: The new attachment chip design in the input field:

Modern chip-style attachment showing "README.md" with a clean bordered design
Small "X" close button on the right side of the attachment chip for easy removal
The attachment has subtle background color and border styling
Blue square send button is now enabled (colored blue) since there's content to send
The attachment preview is integrated cleanly into the input area above the text field

Screenshot 4: Full Conversation with Attachment

What you're seeing: A complete view showing:

User's message bubble at the top displaying the question along with the attachment chip inline - the "README.md" file appears as a clean, bordered chip within the message
AI's detailed response from Jupyternaut below
The scroll indicator button in the bottom-right (circular button with down arrow) for navigating long conversations
Input field at the bottom showing the consistent clean design

Screenshot 5: Sidebar Chat View

What you're seeing: The chat interface in sidebar mode (narrower layout):

Demonstrates how the responsive design adapts to constrained spaces
Same clean message bubbles and code formatting work well in the sidebar
The layout intelligently adjusts spacing and sizing for the sidebar context
All UI improvements (code toolbar, message formatting, input design) remain consistent

Motivation & UX Benefits

1. Modernized Chat Input Design

The chat input has been completely redesigned with a focus on clarity and modern UX patterns:

Square send button with arrow icon: Follows modern messaging app conventions (similar to iMessage, WhatsApp, Slack), making the primary action immediately recognizable. The button is:
- Grayed out/disabled when there's no content
- Blue and enabled when there's text or attachments to send
Simplified button design: Replaced verbose buttons with clean icon buttons, reducing visual noise
Removed top border: Eliminated the border separating the input from the message area for a cleaner, more integrated feel
Better placeholder text: Clear instruction to "Enter a chat message, @ to mention..." guides users

2. Enhanced Attachment Experience

Attachments received significant UX improvements to make them more useful and visually appealing:

Modern chip-style design: Attachments now appear as clean, bordered chips with subtle background colors
Better visual hierarchy: Clear distinction between the filename and the close button
Improved remove functionality: Small, unobtrusive "X" button with hover states for easy removal
Inline display: Attachments appear both in the input area (before sending) and within sent messages as integrated chips
Tooltips: Full file paths shown on hover to help users understand what's attached

3. Cleaner Code Block Toolbar

Removed redundant border: Eliminated the border above code toolbars which created unnecessary visual separation and clutter
Consistent button styling: All toolbar buttons (copy, insert above, insert below, replace cell) use consistent icon button patterns
Better visual feedback: Improved hover and disabled states make button availability clearer

4. Improved Message Display

Asymmetric message headers: Your own messages no longer show redundant headers or avatars, creating a cleaner conversation flow similar to modern chat apps (iMessage, WhatsApp, Slack)
AI messages show full context: Messages from AI assistants (like Jupyternaut) include avatar and timestamp for clarity
Better visual hierarchy: Reduced clutter helps users focus on the actual content of conversations
Flexible layout: Support for different chat areas (main vs. sidebar) with appropriate spacing

5. Better Autocomplete Experience

Multiple improvements to the @ mention autocomplete functionality:

Simplified styling: Cleaner, more focused autocomplete dropdown
Fixed Enter key behavior: Pressing Enter now properly selects autocomplete items instead of submitting incomplete input
Multiple mentions support: Users can now use @ mentions anywhere in their message, not just at the start
Improved focus management: Better keyboard navigation and selection behavior

6. Responsive Design

Sidebar optimization: The chat interface works beautifully in both full-width and sidebar layouts
Adaptive spacing: Appropriate padding and margins adjust based on the chat area
Consistent experience: All improvements work seamlessly across different layout contexts

Technical Changes

Replaced custom tooltip button components with standard MUI Tooltip + IconButton/Button patterns
Modernized button styling using MUI sx prop with CSS variables for theme consistency
Added ChatArea type to track whether chat is in main area or sidebar
Improved focus and keyboard navigation throughout the input system
Enhanced attachment rendering with chip-style design
Streamlined CSS by moving inline and reducing custom classes
Removed custom MUI wrapper components (TooltippedButton, TooltippedIconButton, ContrastingTooltip)
Removed 58 lines from input.css and significantly simplified chat.css

Files Changed

32 files changed: 814 insertions(+), 961 deletions(-)
Major refactoring of button components and styling
Simplified CSS architecture with better use of MUI theming

Accessibility Improvements

All buttons now have proper aria-label attributes
Tooltips provide context for icon-only buttons
Better keyboard navigation support
Clearer disabled states for better understanding of available actions
Improved contrast and visual feedback

Future Work

Message editing functionality is currently disabled (commented out) due to broken behavior and will be fixed in a follow-up PR
Stop button functionality is stubbed out and needs backend integration to halt AI response generation

github-actions · 2025-10-20T23:17:25Z

👈 Launch a Binder on branch ellisonbg/jupyter-chat/ux-improvements

jtpio · 2025-10-27T19:18:18Z

packages/jupyter-chat/src/components/input/buttons/attach-button.tsx

Would it be possible to keep this attach button? So it's available to extension authors making use of the @jupyter/chat package.

Also some applications may still need this button when drag-and-drop is not possible, or in the case of Notebook 7 (which does not show the filebrowser on the notebook page)

Good callout, I do think the attach button is important for the reasons you mention. The reason I disabled it4 (just for now) was that the file picker UI (last time I used it) had a number of usability and styling issues that made it sort of broken. Do you know 1) where that file picker component lives?, 2) if its design and behavior has been improved?

It's actually quite fine when testing with http://jtpio.github.io/pydata-paris-2025/lab :

jupyterlite-ai-filepicker.mp4

I think there were some fixes in the recent JupyterLab 4.5 pre-releases (which this demo uses).

Do you know 1) where that file picker component lives?, 2) if its design and behavior has been improved?

@martinRenou fixed some issues related to the file picker in jupyterlab/jupyterlab#17737 and jupyterlab/jupyterlab#17844

If you see any other issue with it, I can have a look. But yeah it should work much better now.

Zsailer · 2025-10-28T03:42:27Z

This looks fantastic! The UX improvements are really significant – I especially appreciate the cleaner message display with asymmetric headers and the bubble indicator for user messages. It's much more familiar for a chat interface and streamlines the visual hierarchy nicely.

I also really like the change to @-mentions – switching from the pill UI to bolded text is a huge improvement. It's similar to GitHub's UX and much cleaner. The pill UI always felt cluttered, and the colors never worked well across light/dark modes. This is much better. I noticed this isn't mentioned in the top comment, but here's an example of it in action:

I'd love to see this merged ASAP so we can showcase it at JupyterCon next week. The timing would be perfect.

Great work @ellisonbg!

brichet · 2025-10-28T10:29:36Z

I'm not able to edit a message anymore. Is this expected or only on my side ?

EDIT: just found that the button is commented https://github.com/jupyterlab/jupyter-chat/pull/298/files#diff-e344709a04ca086f69b0d5547c28b881f7396fc8824a76a091e28abe35fee092R19

brichet · 2025-10-28T09:42:36Z

packages/jupyter-chat/src/components/mui-extras/tooltipped-button.tsx

Thanks @ellisonbg, I love this new design.

This tooltipped button was quite convenient for the toolbar buttons, to ensure that buttons added by external extensions keep the same style, and also of course to handle tooltips (it doesn't work anymore on my side, on enabled and disabled buttons).
I would be nice to keep it and depend on it with the new buttons.

brichet · 2025-10-28T10:45:59Z

packages/jupyter-chat/src/components/messages/toolbar.tsx

-    });
-    buttons.push(editButton);
-  }
+  // if (props.edit !== undefined) {


We should restore this edit button

brichet · 2025-10-28T11:00:48Z

packages/jupyter-chat/src/components/input/toolbar-registry.tsx

    const registry = new InputToolbarRegistry();

+    // TODO: Re-enable stop button once logic is fully implemented
+    // registry.addItem('stop', {


Do we want the stop button to be by default in the toolbar, or should we let extensions with LLM include it ?

brichet · 2025-10-28T11:12:49Z

packages/jupyter-chat/src/components/input/toolbar-registry.tsx

+    /**
+     * The chat model. Provides access to messages, writers, and other chat state.
+     */
+    chatModel?: IChatModel;


The IInputModel contains a chat context, which provides some of the attributes and methods from the chat model. We could extends this context to provide the current writers, if this is required for the StopButton.

You can find some context about this at #190 (comment).

brichet · 2025-10-28T11:18:17Z

packages/jupyter-chat/src/components/input/chat-input.tsx

+          ))}
+        </Box>
+      </Box>
+      <InputWritingIndicator writers={writers} />


Is there any benefit of including the writing indicator component in the input component, instead of having it as sibling ?
The input component is also used when editing a message, for example, and we won't use the writing indicator in this context.

brichet · 2025-10-28T11:20:36Z

packages/jupyter-chat/src/components/input/chat-input.tsx

-            label={input.length > 2 ? helperText : ' '}
-          />
+          >
+            <AttachmentPreviewList


Don't know why but I'm not able to open an attachment from the input.
It used to be possible AFAIK, and it is still possible for an attachment in the message (after sending it).

brichet · 2025-10-28T11:22:38Z

packages/jupyter-chat/style/chat.css

  margin-top: 0;
 }

-.jp-chat-writers {


Is there any benefit of using embedded style instead of CSS (for static style) ?
I often find it difficult to debug, and to find out where a property come from.

brichet · 2025-10-28T14:44:52Z

packages/jupyter-chat/src/components/input/buttons/save-edit-button.tsx

Do we need a new button ?
Currently we use the send button for the same action AFAIU, with a way to customize the function called when clicking it.

This button should probably never be visible with the Send button, they do similar actions.

Misc UI improvements.

75873e1

pr-triage-board bot added this to PR triage (experimental) Oct 20, 2025

ellisonbg added 11 commits October 20, 2025 17:24

Add .env got .gitignore

e6c46ce

Remove attach button from input as drag and drop now works

e912253

Improve chat styling

6146017

Clean up css.

d0fc141

Add TS logic to track which area the chat is in

109a198

Improve attachment visual design and functionality.

03795d0

Remove chat input top padding.

ff0b491

Improve focus UX of chat input

75ad77d

Draft stop button, minor styling of chat input and hr.

55abc14

Draft of new writers UI

c971d25

Minor style updates

e1bdf6d

Zsailer added the enhancement New feature or request label Oct 23, 2025

ellisonbg added 14 commits October 23, 2025 17:22

Work on UI improvements including buttons and message editing.

564bb04

More work on button and tooltips.

2d26c55

Fix input TextField horizontal scrolling

807f6c6

Make sure that Enter picks item in autocomplete

1bf4155

Fix autocomplete behavior with Enter

5809d8b

Improve autocomplete styling and behavior

1cef616

Simplify autocomplete styling

8ce1005

Allow multiple @ mentions anywhere in a chat message

2c72372

Fix whitespace

3eba5e4

Remove border on code toolbar in chat

8514c47

Minor change to placeholder text in chat input

9f8c987

Don't render the message header for your own messages

37032b9

Improve styling for chat UI

17ae833

Editing of messages is broken, comment out until we can fix the behavior

0993b77

ellisonbg changed the title ~~[WIP] Misc UI improvements.~~ UX Improvements for Jupyter Chat Interface Oct 27, 2025

ellisonbg marked this pull request as ready for review October 27, 2025 18:53

Run linter

0821680

jtpio reviewed Oct 27, 2025

View reviewed changes

brichet reviewed Oct 28, 2025

View reviewed changes

brichet mentioned this pull request Oct 28, 2025

WIP: using the chat with new UI/UX jupyterlite/ai#218

Draft

Uh oh!

Uh oh!

UX Improvements for Jupyter Chat Interface #298

Are you sure you want to change the base?

UX Improvements for Jupyter Chat Interface #298

Conversation

ellisonbg commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

UX Improvements for Jupyter Chat Interface

Summary

Screenshots

Screenshot 1: Clean Input State

Screenshot 2: Code Blocks and Message Display (Full View)

Screenshot 3: Attachment Preview (Input with File)

Screenshot 4: Full Conversation with Attachment

Screenshot 5: Sidebar Chat View

Motivation & UX Benefits

1. Modernized Chat Input Design

2. Enhanced Attachment Experience

3. Cleaner Code Block Toolbar

4. Improved Message Display

5. Better Autocomplete Experience

6. Responsive Design

Technical Changes

Files Changed

Accessibility Improvements

Future Work

Uh oh!

github-actions bot commented Oct 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brichet Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Zsailer commented Oct 28, 2025

Uh oh!

brichet commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ellisonbg commented Oct 20, 2025 •

edited

Loading

brichet Oct 28, 2025 •

edited

Loading

brichet commented Oct 28, 2025 •

edited

Loading