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

Improve chat styles #5044

Merged
merged 21 commits into from
Dec 25, 2023
Merged

Improve chat styles #5044

merged 21 commits into from
Dec 25, 2023

Conversation

TheLounger
Copy link
Contributor

@TheLounger TheLounger commented Dec 22, 2023

The heck does this do?

  • Expands the chat messages area vertically.
  • Sticks the chat input box to the bottom at all times.
  • Deals with header bar height differences, especially noticeable on portrait dimensions (i.e. narrow phone screens.)

Photoshop skills

EpicBeforeAndAfterUwu

The first four images are from before 554a8f9. The fifth image shows the how the input box doesn't overlap the chat messages anymore, but wrecks the custom scrollbar styling, and doesn't seem to allow scripted scrolling.

Checklist:

@oobabooga oobabooga changed the base branch from main to dev December 25, 2023 16:44
@oobabooga
Copy link
Owner

I have tested the changes and they are excellent. I made only some minor changes in the commits above.

The one remaining issue is that I do not think the .chat height can be set explicitly. This is an element that gets entirely removed from the DOM and replaced with a new one for each new token during streaming (it's a gr.HTML output element).

When I wrote the scrolling code for the chat tab, I did initially try attaching scrolling to the .chat element through some javascript hacks, and while it sort of worked, it was very unreliable (during a single scroll up during streaming, several fresh .chat elements are spawned).

Do you think it's posssible to change the height of chatContainer instead of .chat in the updateCssProperties() function to account for the growth of the chat input field? That would solve everything.

@oobabooga
Copy link
Owner

I think that the issue that I mentioned above has been resolved now.

Thank you so much for this PR! This such a major improvement to the chat UI. Please feel free to submit a new PR if you notice any problem.

@oobabooga oobabooga merged commit c21e3d6 into oobabooga:dev Dec 25, 2023
@TheLounger TheLounger deleted the style_improvements branch December 26, 2023 01:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants