-
Notifications
You must be signed in to change notification settings - Fork 20.7k
webui: Improve Chat Messages initial scroll + auto-scroll logic + add lazy loading with transitions to content blocks #20999
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
Merged
allozaur
merged 4 commits into
ggml-org:master
from
allozaur:allozaur/markdown-lazy-loading
Mar 27, 2026
Merged
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
a231d12
refactor: Always use agentic content renderer for Assistant Message
allozaur e0cdaa6
feat: Improve initial scroll + auto-scroll logic + implement fade in …
allozaur ffe0675
Merge branch 'master' into allozaur/markdown-lazy-loading
allozaur 40ba9d4
chore: update webui build output
allozaur File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /** | ||
| * Svelte action that fades in an element when it enters the viewport. | ||
| * Uses IntersectionObserver for efficient viewport detection. | ||
| * | ||
| * If skipIfVisible is set and the element is already visible in the viewport | ||
| * when the action attaches (e.g. a markdown block promoted from unstable | ||
| * during streaming), the fade is skipped entirely to avoid a flash. | ||
| */ | ||
| export function fadeInView( | ||
| node: HTMLElement, | ||
| options: { duration?: number; y?: number; skipIfVisible?: boolean } = {} | ||
| ) { | ||
| const { duration = 300, y = 0, skipIfVisible = false } = options; | ||
|
|
||
| if (skipIfVisible) { | ||
| const rect = node.getBoundingClientRect(); | ||
| const isAlreadyVisible = | ||
| rect.top < window.innerHeight && | ||
| rect.bottom > 0 && | ||
| rect.left < window.innerWidth && | ||
| rect.right > 0; | ||
|
|
||
| if (isAlreadyVisible) { | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| node.style.opacity = '0'; | ||
| node.style.transform = `translateY(${y}px)`; | ||
| node.style.transition = `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`; | ||
|
|
||
| $effect(() => { | ||
| const observer = new IntersectionObserver( | ||
| (entries) => { | ||
| for (const entry of entries) { | ||
| if (entry.isIntersecting) { | ||
| requestAnimationFrame(() => { | ||
| node.style.opacity = '1'; | ||
| node.style.transform = 'translateY(0)'; | ||
| }); | ||
| observer.disconnect(); | ||
| } | ||
| } | ||
| }, | ||
| { threshold: 0.05 } | ||
| ); | ||
|
|
||
| observer.observe(node); | ||
|
|
||
| return () => { | ||
| observer.disconnect(); | ||
| }; | ||
| }); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,2 @@ | ||
| export const AUTO_SCROLL_INTERVAL = 100; | ||
| export const INITIAL_SCROLL_DELAY = 50; | ||
| export const AUTO_SCROLL_AT_BOTTOM_THRESHOLD = 10; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The action doesn’t return a
destroy()handler, and it relies on a$effectfor cleanup. If the node is removed before it ever intersects (or if the action is re-used in a list where nodes are frequently mounted/unmounted), the observer can remain active until the parent component is destroyed. Prefer implementing the action lifecycle directly: create theIntersectionObserverimmediately, callobserve(node), and return{ destroy() { observer.disconnect(); } }(and optionally clear the inline styles).