feat: auto-scroll chat to bottom on thread switch and new messages
Add ref to comm-thread-surface container and watch clientTimelineItems to scroll to bottom via nextTick whenever messages load or update. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1133,6 +1133,23 @@ function messageDeliveryLabel(item: CommItem) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Comm thread auto-scroll
|
||||
// ---------------------------------------------------------------------------
|
||||
const commThreadSurfaceRef = ref<HTMLElement | null>(null);
|
||||
|
||||
function scrollCommThreadToBottom() {
|
||||
nextTick(() => {
|
||||
const el = commThreadSurfaceRef.value;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to bottom whenever timeline items change (thread switch or new message)
|
||||
watch(clientTimelineItems, (items) => {
|
||||
if (items.length) scrollCommThreadToBottom();
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Watch: reset comm state on thread change
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -1624,7 +1641,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedCommThread" class="relative flex h-full min-h-0 flex-col">
|
||||
<div class="comm-thread-surface min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-2">
|
||||
<div ref="commThreadSurfaceRef" class="comm-thread-surface min-h-0 flex-1 space-y-2 overflow-y-auto px-3 pb-2">
|
||||
<!-- Loading spinner while timeline is fetching -->
|
||||
<div v-if="timelineLoading && clientTimelineItems.length === 0" class="flex h-full items-center justify-center">
|
||||
<span class="loading loading-spinner loading-md text-primary" />
|
||||
|
||||
Reference in New Issue
Block a user