diff --git a/frontend/src/routes/[mnemonic]/+page.svelte b/frontend/src/routes/[mnemonic]/+page.svelte index b202e5c..9724624 100644 --- a/frontend/src/routes/[mnemonic]/+page.svelte +++ b/frontend/src/routes/[mnemonic]/+page.svelte @@ -11,6 +11,27 @@ const usePolling = getContext('convex-use-polling') ?? false; let mnemonic = $derived(page.params.mnemonic); + let lastMessageElement: HTMLDivElement | null = $state(null); + let showScrollButton = $state(false); + + $effect(() => { + if (!lastMessageElement) return; + + const observer = new IntersectionObserver( + ([entry]) => { + showScrollButton = !entry.isIntersecting; + }, + { threshold: 0, rootMargin: '0px 0px -90% 0px' } + ); + + observer.observe(lastMessageElement); + return () => observer.disconnect(); + }); + + function scrollToLastMessage() { + lastMessageElement?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + const chatDataWs = usePolling ? null : useQuery(api.chats.getWithUser, () => (mnemonic ? { mnemonic } : 'skip')); @@ -118,12 +139,22 @@
Not found
{:else}
- {#each messages as message (message._id)} - + {#each messages as message, i (message._id)} + {#if i === messages.length - 1} +
+ +
+ {:else} + + {/if} {/each}
@@ -145,4 +176,13 @@ {/if} + + {#if showScrollButton} + + {/if}