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

[86] Improve Chat Scrolling #87

Merged
merged 3 commits into from
Nov 28, 2024
Merged

Conversation

ThomasJones
Copy link
Collaborator

@ThomasJones ThomasJones commented Nov 27, 2024

Task : #86

Currently the behavior is that whenever text is generating, it forces the scroll of the chat window, preventing a user from scrolling up while text is generating. However, allowing the user to scroll is common behavior of most AI chat interfaces. This allows a user to scroll independent of text being generated.

  • Implement a mechanism that detects if the user is scrolled to the bottom or not by listening to scroll events and the scroll size
  • Display a button to scroll to bottom if a user isn't scroll to bottom
  • Snap / force scroll to bottom while generating if the user has scrolled to bottom but allow them to scroll away (and show the scroll button)

TODO - verify this feels good a device.

(updated style based on Ian's quick feedback)

ai2-chat-scroll-button-2

ai2-chat-scrolling-1.mov

…n a response is generating, showing a scroll to bottom button, 'sticking' scroll to bottom if user has explicitly scrolled down
@@ -69,12 +69,46 @@ public struct TypingIndicator: View {
}
}

struct ScrollState {
static let BottomScrollThreshold = 120.0
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This threshold is the magic sauce but should perhaps be generalized / scale by text size?

Copy link
Collaborator

@jonryser jonryser Nov 27, 2024

Choose a reason for hiding this comment

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

That's a good idea!
Make the "body" font size a constant

.manrope(.medium, size: 14)
and make the threshold a value of the font size times n number of lines?

func respond() {
isGenerating = true
Task {
let originalInput = input
input = "" // Clear the input after sending
await bot.respond(to: originalInput)
scrollToBottom = true
//scrollToBottom = true
Copy link
Collaborator

Choose a reason for hiding this comment

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

Remove commented code?

let isAtBottom = !needsScroll || offsetDelta < ScrollState.BottomScrollThreshold
self.isAtBottom = isAtBottom

//print("UPDATE: Bottom? \(isAtBottom) : delta: \(offsetDelta), on scroll - offset: \(Int(scrollOffset)), scrollHeight: \(Int(scrollViewHeight)), contentHeight: \(Int(contentHeight))")
Copy link
Collaborator

Choose a reason for hiding this comment

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

Remove commented code?

Copy link
Collaborator

@jonryser jonryser left a comment

Choose a reason for hiding this comment

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

I tried it on my personal device. Looks good.
I made a couple comments that shouldn't prevent merging.

@ThomasJones ThomasJones merged commit 93bbf93 into release-20241118 Nov 28, 2024
1 check passed
@ThomasJones ThomasJones deleted the 86-chat-scrolling branch November 28, 2024 01:04
@ThomasJones ThomasJones mentioned this pull request Nov 28, 2024
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