diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 87f374ae3e..a0c9e1a2f3 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -144,15 +144,18 @@ })(); } - const scrollToBottom = () => { + export const scrollToBottom = () => { const element = getMessagesContainer(); if (element) { element.scrollTop = element.scrollHeight; - // Follow-up scroll to account for content-visibility: auto re-layouts + // Re-scroll across two frames as content-visibility resolves message heights. requestAnimationFrame(() => { if (element) { element.scrollTop = element.scrollHeight; + requestAnimationFrame(() => { + element.scrollTop = element.scrollHeight; + }); } }); } diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 314b9b7764..fc98539b03 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -142,7 +142,7 @@ />
{ if (await loadSharedChat()) { - await tick(); loaded = true; + await tick(); + messagesComponent?.scrollToBottom(); } else if (localStorage.token) { await goto('/'); } else { @@ -214,6 +215,7 @@