fix: correct handling of custom scrollbar when switching between sesstions

Author: yaroslav8765

custom/CustomAutoScrollContainer.vue

@@ -82,7 +82,6 @@ function handleScroll(): void {
     lastScrollHeight = scrollHeight
     return
   }
-  
   if (isNearBottom()) {
     isUserScrolledUp.value = false
   } else {
@@ -93,7 +92,6 @@ function handleScroll(): void {
       isUserScrolledUp.value = true
     }
   }
-  
   lastScrollTop = scrollTop
   lastScrollHeight = scrollHeight
 }
@@ -137,7 +135,8 @@ onUnmounted(() => {
 defineExpose({
   scrollToBottom: () => scrollToBottom(true),
   isUserScrolledUp: () => isUserScrolledUp.value,
-  container: containerRef
+  container: containerRef,
+  handleScroll
 })
 </script>
 

custom/SessionsHistory.vue

@@ -8,7 +8,7 @@
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
     <div class="w-full flex items-center justify-center">
       <Button 
-        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput(); recalculateScroll();" 
+        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
         :disabled="agentStore.isResponseInProgress" 
         class="w-[90%] my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200"
       >
@@ -34,7 +34,7 @@
           'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 
           'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress,
          }"
-        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false); recalculateScroll();"
+        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
         :disabled="agentStore.isResponseInProgress"
       >
         <p class="truncate">{{ session.title || session.sessionId }}</p>
@@ -99,13 +99,4 @@ const groupedSessions = computed(() => {
   return Array.from(groups.values());
 });
 
-const emit = defineEmits<{
-  (e: 'recalculateScroll'): void
-}>()
-
-function recalculateScroll() {
-  // Emit an event to notify the parent component to recalculate scroll
-  emit('recalculateScroll');
-}
-
 </script>

custom/conversation_area/ConversationArea.vue

@@ -18,6 +18,7 @@
       />
     </button>
     <CustomAutoScrollContainer
+      v-if="showScrollContainer"
       :enabled="!showScrollToBottomButton" 
       class="relative h-full flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
       ref="scrollContainer"
@@ -83,19 +84,23 @@ const innerScrollContainerRef = ref(null);
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const clicks = ref(0);
+const showScrollContainer = ref(true);
 
 function recalculateScroll() {
-  console.log('AAAAAAAAAA');
   if (scrollContainer.value) {
+    scrollContainer.value.handleScroll();
     const isScrolledUp = scrollContainer.value.isUserScrolledUp();
     showScrollToBottomButton.value = !!isScrolledUp;
   }
 }
 
-watch(() => agentStore.isFullScreen, () => {
-  const scrollEl = scrollContainer.value.container.scrollEl;
-  console.log('isFullScreen changed, recalculating scroll. Scroll element:', scrollEl);
-})
+watch(() => agentStore.activeSessionId, async () => {
+  showScrollContainer.value = false;
+  await nextTick();
+  showScrollContainer.value = true;
+  await nextTick();
+  recalculateScroll();
+});
 
 onMounted(async () => {
   await import('@incremark/theme/styles.css')

custom/conversation_area/ProcessingTimeline.vue

@@ -101,6 +101,7 @@
         durationMs: finishedPart?.data?.durationMs,
         input: part.data.input,
         output: finishedPart?.data?.output,
+        toolInfo: part.data.toolInfo,
       }
     };
   };

custom/types.ts

@@ -5,6 +5,7 @@ export interface IPartData {
   input?: any;
   output?: any;
   durationMs?: number;
+  toolInfo?: string;
 }
 export interface IPart {
   type: 'reasoning' | 'data-tool-call' | 'text';