Skip to content
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.

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

General UI/UX improvements #70

Merged
merged 4 commits into from
Apr 16, 2023
Merged

Conversation

ellisonbg
Copy link
Contributor

I went through most of the UI/UX and improved the behavior and styling. Some highlights:

  • Better handling of dark theme.
  • Shift+Enter keyboard shortcut for submitting the chat.
  • Use JupyterLab default markdown styling.
  • Better spacing
  • Basic layout restoration, default location is L panel.
  • New chat icon.

Here is the current state:

Screen Shot 2023-04-15 at 9 32 48 PM

@3coins 3coins added the enhancement New feature or request label Apr 16, 2023
@3coins
Copy link
Collaborator

3coins commented Apr 16, 2023

@ellisonbg
Thanks for making these changes. Shift + Enter works great, and input box looks very nice.

The background color in light mode does not have a good contrast, also it differs in how editor in notebook and markdown preview shows code blocks. Code blocks don't have any background in the editor; should we just add a minimal border around the code block to separate it? Another option might be to put a gray background, like we have for the cell block.

Screen Shot 2023-04-16 at 12 32 37 AM

Screen Shot 2023-04-16 at 12 43 19 AM

I would also decrease the spacing between the code block and Copy To Clipboard to maintain context.
With the panel now moved to the left, I could not see the file browser and chat open at the same time, so could not see the directory names when I wanted to index.

@ellisonbg
Copy link
Contributor Author

@3coins yep, good feedback on the code block styling. I want to wait for a separate PR to make those changes. We have new UI mocks coming for that part and the styling is going to be a bit different as we are using react markdown (I think an extension of it) for that part. I will open up a follow on issue for that.

@ellisonbg ellisonbg mentioned this pull request Apr 16, 2023
4 tasks
Copy link
Member

@dlqqq dlqqq left a comment

Choose a reason for hiding this comment

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

Awesome work!

@ellisonbg ellisonbg merged commit d2e63ab into jupyterlab:main Apr 16, 2023
dbelgrod pushed a commit to dbelgrod/jupyter-ai that referenced this pull request Jun 10, 2024
* Lots of minor UI/UX work.

* Use chat icon.

* Improved font colors in L/D themes.

* Restore the widget as the active side panel if expanded.
Marchlak pushed a commit to Marchlak/jupyter-ai that referenced this pull request Oct 28, 2024
* Lots of minor UI/UX work.

* Use chat icon.

* Improved font colors in L/D themes.

* Restore the widget as the active side panel if expanded.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request @jupyter-ai/chatui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants