From 898f0dc0c59e527e51db3ed2a63d859f70192a7b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 25 Feb 2026 07:07:05 +0700
Subject: [PATCH] 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>
---
 .../components/workspace/CrmWorkspaceApp.vue  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 2835334..8372271 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -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" />