@adminforth/agent 1.24.3 → 1.24.5

package/build.log

@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 200,122 bytes  received 558 bytes  401,360.00 bytes/sec
-total size is 197,822  speedup is 0.99
+sent 201,498 bytes  received 566 bytes  404,128.00 bytes/sec
+total size is 199,190  speedup is 0.99

package/custom/ChatSurface.vue

@@ -32,7 +32,7 @@
       ></div>
 
       <div 
-        class="w-full h-full flex flex-col"
+        class="w-full min-h-0 max-h-full flex flex-col"
       >
         <div 
           class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
@@ -91,11 +91,10 @@
 
         </div>
         <div 
-          class="relative flex-1 flex flex-col overflow-hidden"
+          class="relative flex-1 min-h-0 flex flex-col overflow-hidden"
         >
           <ConversationArea 
             v-if="agentStore.isChatOpen"
-            class="flex-1 overflow-auto" 
             :messages="agentStore.chatMessages"
           />
 

package/custom/CustomAutoScrollContainer.vue

@@ -1,11 +1,29 @@
+<template>
+  <CustomScrollbar
+    ref="containerRef"
+    class="auto-scroll-container mask-y"
+    :wrapperStyle = "wrapperStyle"
+    :contentStyle = "contentStyle"
+  >
+    <slot />
+  </CustomScrollbar>
+</template>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import vueCustomScrollbar from 'vue-custom-scrollbar'
+import CustomScrollbar from 'custom-vue-scrollbar';
+import 'custom-vue-scrollbar/dist/style.css';
+import { useScroll } from '@vueuse/core'
+import { useAgentStore } from './composables/useAgentStore';
+
+const agentStore = useAgentStore();
 
 const props = withDefaults(defineProps<{
   enabled?: boolean
   threshold?: number
   behavior?: ScrollBehavior
+  wrapperStyle?: Record<string, string>
+  contentStyle?: Record<string, string>
 }>(), {
   enabled: true,
   threshold: 50,
@@ -14,12 +32,18 @@ const props = withDefaults(defineProps<{
 
 const containerRef = ref<HTMLDivElement | null>(null)
 const isUserScrolledUp = ref(false)
+const scrollElement = ref<HTMLElement | null>(null)
+const { y } = useScroll(scrollElement)
+
+watch(y, () => {
+  handleScroll()
+})
 
 let lastScrollTop = 0
 let lastScrollHeight = 0
 
 function isNearBottom(): boolean {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return true
   
   const { scrollTop, scrollHeight, clientHeight } = container
@@ -27,7 +51,7 @@ function isNearBottom(): boolean {
 }
 
 function scrollToBottom(force = false): void {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return
   
   if (isUserScrolledUp.value && !force) return
@@ -40,14 +64,14 @@ function scrollToBottom(force = false): void {
 
 
 function hasScrollbar(): boolean {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return false
   return container.scrollHeight > container.clientHeight
 }
 
 
 function handleScroll(): void {
-  const container = containerRef.value
+  const container = containerRef.value.scrollEl
   if (!container) return
   
   const { scrollTop, scrollHeight, clientHeight } = container
@@ -58,7 +82,6 @@ function handleScroll(): void {
     lastScrollHeight = scrollHeight
     return
   }
-  
   if (isNearBottom()) {
     isUserScrolledUp.value = false
   } else {
@@ -69,7 +92,6 @@ function handleScroll(): void {
       isUserScrolledUp.value = true
     }
   }
-  
   lastScrollTop = scrollTop
   lastScrollHeight = scrollHeight
 }
@@ -79,18 +101,19 @@ let observer: MutationObserver | null = null
 onMounted(() => {
   if (!containerRef.value) return
   
-  lastScrollTop = containerRef.value.scrollTop
-  lastScrollHeight = containerRef.value.scrollHeight
+  scrollElement.value = containerRef.value.scrollEl
+  lastScrollTop = containerRef.value.scrollEl.scrollTop
+  lastScrollHeight = containerRef.value.scrollEl.scrollHeight
   
   observer = new MutationObserver(() => {
     nextTick(() => {
-      if (!containerRef.value) return
+      if (!containerRef.value?.scrollEl) return
       
       if (!hasScrollbar()) {
         isUserScrolledUp.value = false
       }
       
-      lastScrollHeight = containerRef.value.scrollHeight
+      lastScrollHeight = containerRef.value.scrollEl.scrollHeight
       
       if (props.enabled && !isUserScrolledUp.value) {
         scrollToBottom()
@@ -98,7 +121,7 @@ onMounted(() => {
     })
   })
   
-  observer.observe(containerRef.value, {
+  observer.observe(containerRef.value?.scrollEl, {
     childList: true,
     subtree: true,
     characterData: true
@@ -112,16 +135,19 @@ onUnmounted(() => {
 defineExpose({
   scrollToBottom: () => scrollToBottom(true),
   isUserScrolledUp: () => isUserScrolledUp.value,
-  container: containerRef
+  container: containerRef,
+  handleScroll
 })
 </script>
 
-<template>
-  <div
-    ref="containerRef"
-    class="auto-scroll-container h-full"
-    @scroll="handleScroll"
-  >
-    <slot />
-  </div>
-</template>
+<style>
+  .mask-y {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent,
+      black 20px,
+      black calc(100% - 20px),
+      transparent
+    );
+  }
+</style>

package/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>

package/custom/conversation_area/ConversationArea.vue

@@ -1,12 +1,4 @@
 <template>
-  <button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
-    <IconArrowDownOutline 
-      class="absolute z-10 bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
-      :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-      :disabled="!showScrollToBottomButton"
-    />
-  </button>
-  
   <SessionsHistory 
     :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
     @recalculateScroll="recalculateScroll"
@@ -16,38 +8,59 @@
     @click="agentStore.setSessionHistoryOpen(false)"
     class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
   >
-
   </div>
-  <CustomAutoScrollContainer
-    :enabled="!showScrollToBottomButton" 
-    class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
-    ref="scrollContainer"
-    :threshold="10"
-    behavior="smooth"
-    :style="{ 
-      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
-      transition: `
-        max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
-        transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
-      `
-    }"
-  > 
+  <div class="relative flex-1 min-h-0 overflow-hidden">
+    <button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
+      <IconArrowDownOutline 
+        class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
+        :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+        :disabled="!showScrollToBottomButton"
+      />
+    </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"
+      :threshold="10"
+      behavior="smooth"
+      :wrapperStyle = "{ 
+        height: '100%',
+        maxHeight: '100%',
+        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      }"
+      :contentStyle="{
+        height: '100%',
+        maxHeight: '100%',
+      }"
+      :style="{ 
+        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
+        transition: `
+          max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
+          transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
+        `
+      }"
+    > 
 
-    <div 
-      v-for="(message, index) in props.messages" :key="message.id"
-      class="flex flex-col w-full"
-      :class="message.role === 'user' ? 'self-end' : 'self-start'"
-    >
-      <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
-    </div>
-    <div 
-      v-if="props.messages.length === 0"
-      class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
-    >
-      <p>{{ $t('Start the conversation') }}</p>
-      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
-    </div>
-  </CustomAutoScrollContainer>
+      <div 
+        v-for="(message, index) in props.messages" :key="message.id"
+        class="flex flex-col w-full"
+        :class="message.role === 'user' ? 'self-end' : 'self-start'"
+      >
+        <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
+      </div>
+      <div 
+        v-if="props.messages.length === 0"
+        class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium h-full"
+      >
+        <p>{{ $t('Start the conversation') }}</p>
+        <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
+      </div>
+    </CustomAutoScrollContainer>
+  </div>
 </template>
 
 
@@ -71,14 +84,24 @@ const innerScrollContainerRef = ref(null);
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const clicks = ref(0);
+const showScrollContainer = ref(true);
 
 function recalculateScroll() {
   if (scrollContainer.value) {
+    scrollContainer.value.handleScroll();
     const isScrolledUp = scrollContainer.value.isUserScrolledUp();
     showScrollToBottomButton.value = !!isScrolledUp;
   }
 }
 
+watch(() => agentStore.activeSessionId, async () => {
+  showScrollContainer.value = false;
+  await nextTick();
+  showScrollContainer.value = true;
+  await nextTick();
+  recalculateScroll();
+});
+
 onMounted(async () => {
   await import('@incremark/theme/styles.css')
   await agentStore.fetchPlaceholderMessages()
@@ -90,7 +113,7 @@ onUnmounted(() => {
 
 watch(scrollContainer, () => {
   if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container;
+    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
 
     innerScrollContainerRef.value.addEventListener('scroll', () => {
       recalculateScroll();

package/custom/conversation_area/MessageRenderer.vue

@@ -11,7 +11,7 @@
       v-if="part.type === 'text'" 
       :message="part.text" 
       :role="props.message.role" 
-      :state="part.state || props.message.role === 'user' ? 'done' : 'kapets'"
+      :state="part.state ?? (props.message.role === 'user' ? 'done' : undefined)"
     />
   </template>
 

package/custom/conversation_area/ProcessingTimeline.vue

@@ -18,7 +18,9 @@
         behavior="smooth"
         v-if="ToolOrReasoningParts.length > 0" 
         v-show="isExpanded"
-        class="mask-y"
+        :wrapperStyle="{
+          marginRight: '8rem',
+        }"
       >
         <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
@@ -99,6 +101,7 @@
         durationMs: finishedPart?.data?.durationMs,
         input: part.data.input,
         output: finishedPart?.data?.output,
+        toolInfo: part.data.toolInfo,
       }
     };
   };
@@ -176,15 +179,5 @@
     opacity: 1;
     max-height: 384px;
   }
-
-  .mask-y {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      black 20px,
-      black calc(100% - 20px),
-      transparent
-    );
-  }
  
 </style>

package/custom/conversation_area/ReasoningRenderer.vue

@@ -16,15 +16,17 @@
     />
   </h3>
   <transition name="expand">
-    <div v-show="isExpanded" class="overflow-hidden mb-4 text-sm mr-48 max-h-64 pl-4 ">
-      <AutoScrollContainer
-        :enabled="true"
-      >
-        <IncremarkContent
-          :content="reasoningText"
-        />
-      </AutoScrollContainer>
-    </div>
+    <CustomAutoScrollContainer
+      v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
+      :wrapperStyle="{
+        marginRight: '8rem',
+      }"
+      :enabled="true"
+    >
+      <IncremarkContent
+        :content="reasoningText"
+      />
+    </CustomAutoScrollContainer>
   </transition>    
 </template>
 
@@ -37,10 +39,10 @@ import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
 import { extractTitleAndTextFromReasoning } from '../utils';
 import { useAgentStore } from '../composables/useAgentStore';
-
+import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
 
 const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
-const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
+// const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
 
 const props = defineProps<{
   state?: IPart['state']

package/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import type { Code } from 'mdast';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import embed from 'vega-embed';
 
 import { highlightCodeSnippetHtml, type IncremarkCodeTheme } from './incremarkCodeHighlight';
@@ -171,7 +171,13 @@ async function renderHighlight() {
   if (shouldRenderVega.value) {
     renderedHtml.value = '';
 
-    if (!sourceCode.value || !vegaContainer.value) {
+    if (!sourceCode.value) {
+      return;
+    }
+
+    await nextTick();
+
+    if (requestId !== renderRequestId || !shouldRenderVega.value || !vegaContainer.value) {
       return;
     }
 

package/custom/package.json

@@ -18,10 +18,10 @@
     "@shikijs/themes": "^4.0.2",
     "@vueuse/core": "^14.2.1",
     "ai": "^6.0.168",
+    "custom-vue-scrollbar": "^0.0.8",
     "dompurify": "^3.3.3",
     "katex": "^0.16.45",
     "marked": "^18.0.0",
-    "vega-embed": "^7.1.0",
-    "vue-custom-scrollbar": "^2.0.2"
+    "vega-embed": "^7.1.0"
   }
 }

package/custom/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       ai:
         specifier: ^6.0.168
         version: 6.0.168(zod@4.3.6)
+      custom-vue-scrollbar:
+        specifier: ^0.0.8
+        version: 0.0.8(lodash-es@4.18.1)(vue@3.5.32)
       dompurify:
         specifier: ^3.3.3
         version: 3.3.3
@@ -41,9 +44,6 @@ importers:
       vega-embed:
         specifier: ^7.1.0
         version: 7.1.0(vega-lite@6.4.2(vega@6.2.0))(vega@6.2.0)
-      vue-custom-scrollbar:
-        specifier: ^2.0.2
-        version: 2.0.2(vue@3.5.32)
 
 packages:
 
@@ -307,6 +307,12 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  custom-vue-scrollbar@0.0.8:
+    resolution: {integrity: sha512-JcO0B+02Kf9wXSL9SaxXVvuToaY+lvJAtmrwNfSLS3x6xx5+mO24r5/dGkNK8av0VlSDzviypYUXTjEZbwgGHA==}
+    peerDependencies:
+      lodash-es: ^4.17.21
+      vue: ^3.2.13
+
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -656,9 +662,6 @@ packages:
   parse-entities@4.0.2:
     resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
-  perfect-scrollbar@1.5.6:
-    resolution: {integrity: sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -879,11 +882,6 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vue-custom-scrollbar@2.0.2:
-    resolution: {integrity: sha512-eRyxGb7UFLLH8P0B8FDux2uPrzNBH0X6IN+A/RB5sfmLq1ym7shbCPVKua1pC7LPqPB7dc86evFXyWO/svrfKA==}
-    peerDependencies:
-      vue: ^3.3.0
-
   vue@3.5.32:
     resolution: {integrity: sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==}
     peerDependencies:
@@ -1219,6 +1217,11 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  custom-vue-scrollbar@0.0.8(lodash-es@4.18.1)(vue@3.5.32):
+    dependencies:
+      lodash-es: 4.18.1
+      vue: 3.5.32
+
   d3-array@3.2.4:
     dependencies:
       internmap: 2.0.3
@@ -1766,8 +1769,6 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  perfect-scrollbar@1.5.6: {}
-
   picocolors@1.1.1: {}
 
   postcss@8.5.10:
@@ -2142,11 +2143,6 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vue-custom-scrollbar@2.0.2(vue@3.5.32):
-    dependencies:
-      perfect-scrollbar: 1.5.6
-      vue: 3.5.32
-
   vue@3.5.32:
     dependencies:
       '@vue/compiler-dom': 3.5.32

package/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';

package/dist/custom/ChatSurface.vue

@@ -32,7 +32,7 @@
       ></div>
 
       <div 
-        class="w-full h-full flex flex-col"
+        class="w-full min-h-0 max-h-full flex flex-col"
       >
         <div 
           class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
@@ -91,11 +91,10 @@
 
         </div>
         <div 
-          class="relative flex-1 flex flex-col overflow-hidden"
+          class="relative flex-1 min-h-0 flex flex-col overflow-hidden"
         >
           <ConversationArea 
             v-if="agentStore.isChatOpen"
-            class="flex-1 overflow-auto" 
             :messages="agentStore.chatMessages"
           />
 

package/dist/custom/CustomAutoScrollContainer.vue

@@ -1,11 +1,29 @@
+<template>
+  <CustomScrollbar
+    ref="containerRef"
+    class="auto-scroll-container mask-y"
+    :wrapperStyle = "wrapperStyle"
+    :contentStyle = "contentStyle"
+  >
+    <slot />
+  </CustomScrollbar>
+</template>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import vueCustomScrollbar from 'vue-custom-scrollbar'
+import CustomScrollbar from 'custom-vue-scrollbar';
+import 'custom-vue-scrollbar/dist/style.css';
+import { useScroll } from '@vueuse/core'
+import { useAgentStore } from './composables/useAgentStore';
+
+const agentStore = useAgentStore();
 
 const props = withDefaults(defineProps<{
   enabled?: boolean
   threshold?: number
   behavior?: ScrollBehavior
+  wrapperStyle?: Record<string, string>
+  contentStyle?: Record<string, string>
 }>(), {
   enabled: true,
   threshold: 50,
@@ -14,12 +32,18 @@ const props = withDefaults(defineProps<{
 
 const containerRef = ref<HTMLDivElement | null>(null)
 const isUserScrolledUp = ref(false)
+const scrollElement = ref<HTMLElement | null>(null)
+const { y } = useScroll(scrollElement)
+
+watch(y, () => {
+  handleScroll()
+})
 
 let lastScrollTop = 0
 let lastScrollHeight = 0
 
 function isNearBottom(): boolean {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return true
   
   const { scrollTop, scrollHeight, clientHeight } = container
@@ -27,7 +51,7 @@ function isNearBottom(): boolean {
 }
 
 function scrollToBottom(force = false): void {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return
   
   if (isUserScrolledUp.value && !force) return
@@ -40,14 +64,14 @@ function scrollToBottom(force = false): void {
 
 
 function hasScrollbar(): boolean {
-  const container = containerRef.value
+  const container = containerRef.value?.scrollEl
   if (!container) return false
   return container.scrollHeight > container.clientHeight
 }
 
 
 function handleScroll(): void {
-  const container = containerRef.value
+  const container = containerRef.value.scrollEl
   if (!container) return
   
   const { scrollTop, scrollHeight, clientHeight } = container
@@ -58,7 +82,6 @@ function handleScroll(): void {
     lastScrollHeight = scrollHeight
     return
   }
-  
   if (isNearBottom()) {
     isUserScrolledUp.value = false
   } else {
@@ -69,7 +92,6 @@ function handleScroll(): void {
       isUserScrolledUp.value = true
     }
   }
-  
   lastScrollTop = scrollTop
   lastScrollHeight = scrollHeight
 }
@@ -79,18 +101,19 @@ let observer: MutationObserver | null = null
 onMounted(() => {
   if (!containerRef.value) return
   
-  lastScrollTop = containerRef.value.scrollTop
-  lastScrollHeight = containerRef.value.scrollHeight
+  scrollElement.value = containerRef.value.scrollEl
+  lastScrollTop = containerRef.value.scrollEl.scrollTop
+  lastScrollHeight = containerRef.value.scrollEl.scrollHeight
   
   observer = new MutationObserver(() => {
     nextTick(() => {
-      if (!containerRef.value) return
+      if (!containerRef.value?.scrollEl) return
       
       if (!hasScrollbar()) {
         isUserScrolledUp.value = false
       }
       
-      lastScrollHeight = containerRef.value.scrollHeight
+      lastScrollHeight = containerRef.value.scrollEl.scrollHeight
       
       if (props.enabled && !isUserScrolledUp.value) {
         scrollToBottom()
@@ -98,7 +121,7 @@ onMounted(() => {
     })
   })
   
-  observer.observe(containerRef.value, {
+  observer.observe(containerRef.value?.scrollEl, {
     childList: true,
     subtree: true,
     characterData: true
@@ -112,16 +135,19 @@ onUnmounted(() => {
 defineExpose({
   scrollToBottom: () => scrollToBottom(true),
   isUserScrolledUp: () => isUserScrolledUp.value,
-  container: containerRef
+  container: containerRef,
+  handleScroll
 })
 </script>
 
-<template>
-  <div
-    ref="containerRef"
-    class="auto-scroll-container h-full"
-    @scroll="handleScroll"
-  >
-    <slot />
-  </div>
-</template>
+<style>
+  .mask-y {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent,
+      black 20px,
+      black calc(100% - 20px),
+      transparent
+    );
+  }
+</style>

package/dist/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>

package/dist/custom/conversation_area/ConversationArea.vue

@@ -1,12 +1,4 @@
 <template>
-  <button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
-    <IconArrowDownOutline 
-      class="absolute z-10 bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
-      :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-      :disabled="!showScrollToBottomButton"
-    />
-  </button>
-  
   <SessionsHistory 
     :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
     @recalculateScroll="recalculateScroll"
@@ -16,38 +8,59 @@
     @click="agentStore.setSessionHistoryOpen(false)"
     class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
   >
-
   </div>
-  <CustomAutoScrollContainer
-    :enabled="!showScrollToBottomButton" 
-    class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
-    ref="scrollContainer"
-    :threshold="10"
-    behavior="smooth"
-    :style="{ 
-      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
-      transition: `
-        max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
-        transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
-      `
-    }"
-  > 
+  <div class="relative flex-1 min-h-0 overflow-hidden">
+    <button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
+      <IconArrowDownOutline 
+        class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
+        :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+        :disabled="!showScrollToBottomButton"
+      />
+    </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"
+      :threshold="10"
+      behavior="smooth"
+      :wrapperStyle = "{ 
+        height: '100%',
+        maxHeight: '100%',
+        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      }"
+      :contentStyle="{
+        height: '100%',
+        maxHeight: '100%',
+      }"
+      :style="{ 
+        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
+        transition: `
+          max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
+          transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
+        `
+      }"
+    > 
 
-    <div 
-      v-for="(message, index) in props.messages" :key="message.id"
-      class="flex flex-col w-full"
-      :class="message.role === 'user' ? 'self-end' : 'self-start'"
-    >
-      <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
-    </div>
-    <div 
-      v-if="props.messages.length === 0"
-      class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
-    >
-      <p>{{ $t('Start the conversation') }}</p>
-      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
-    </div>
-  </CustomAutoScrollContainer>
+      <div 
+        v-for="(message, index) in props.messages" :key="message.id"
+        class="flex flex-col w-full"
+        :class="message.role === 'user' ? 'self-end' : 'self-start'"
+      >
+        <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
+      </div>
+      <div 
+        v-if="props.messages.length === 0"
+        class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium h-full"
+      >
+        <p>{{ $t('Start the conversation') }}</p>
+        <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
+      </div>
+    </CustomAutoScrollContainer>
+  </div>
 </template>
 
 
@@ -71,14 +84,24 @@ const innerScrollContainerRef = ref(null);
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const clicks = ref(0);
+const showScrollContainer = ref(true);
 
 function recalculateScroll() {
   if (scrollContainer.value) {
+    scrollContainer.value.handleScroll();
     const isScrolledUp = scrollContainer.value.isUserScrolledUp();
     showScrollToBottomButton.value = !!isScrolledUp;
   }
 }
 
+watch(() => agentStore.activeSessionId, async () => {
+  showScrollContainer.value = false;
+  await nextTick();
+  showScrollContainer.value = true;
+  await nextTick();
+  recalculateScroll();
+});
+
 onMounted(async () => {
   await import('@incremark/theme/styles.css')
   await agentStore.fetchPlaceholderMessages()
@@ -90,7 +113,7 @@ onUnmounted(() => {
 
 watch(scrollContainer, () => {
   if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container;
+    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
 
     innerScrollContainerRef.value.addEventListener('scroll', () => {
       recalculateScroll();

package/dist/custom/conversation_area/MessageRenderer.vue

@@ -11,7 +11,7 @@
       v-if="part.type === 'text'" 
       :message="part.text" 
       :role="props.message.role" 
-      :state="part.state || props.message.role === 'user' ? 'done' : 'kapets'"
+      :state="part.state ?? (props.message.role === 'user' ? 'done' : undefined)"
     />
   </template>
 

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -18,7 +18,9 @@
         behavior="smooth"
         v-if="ToolOrReasoningParts.length > 0" 
         v-show="isExpanded"
-        class="mask-y"
+        :wrapperStyle="{
+          marginRight: '8rem',
+        }"
       >
         <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
@@ -99,6 +101,7 @@
         durationMs: finishedPart?.data?.durationMs,
         input: part.data.input,
         output: finishedPart?.data?.output,
+        toolInfo: part.data.toolInfo,
       }
     };
   };
@@ -176,15 +179,5 @@
     opacity: 1;
     max-height: 384px;
   }
-
-  .mask-y {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      black 20px,
-      black calc(100% - 20px),
-      transparent
-    );
-  }
  
 </style>

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -16,15 +16,17 @@
     />
   </h3>
   <transition name="expand">
-    <div v-show="isExpanded" class="overflow-hidden mb-4 text-sm mr-48 max-h-64 pl-4 ">
-      <AutoScrollContainer
-        :enabled="true"
-      >
-        <IncremarkContent
-          :content="reasoningText"
-        />
-      </AutoScrollContainer>
-    </div>
+    <CustomAutoScrollContainer
+      v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
+      :wrapperStyle="{
+        marginRight: '8rem',
+      }"
+      :enabled="true"
+    >
+      <IncremarkContent
+        :content="reasoningText"
+      />
+    </CustomAutoScrollContainer>
   </transition>    
 </template>
 
@@ -37,10 +39,10 @@ import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
 import { extractTitleAndTextFromReasoning } from '../utils';
 import { useAgentStore } from '../composables/useAgentStore';
-
+import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
 
 const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
-const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
+// const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
 
 const props = defineProps<{
   state?: IPart['state']

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import type { Code } from 'mdast';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import embed from 'vega-embed';
 
 import { highlightCodeSnippetHtml, type IncremarkCodeTheme } from './incremarkCodeHighlight';
@@ -171,7 +171,13 @@ async function renderHighlight() {
   if (shouldRenderVega.value) {
     renderedHtml.value = '';
 
-    if (!sourceCode.value || !vegaContainer.value) {
+    if (!sourceCode.value) {
+      return;
+    }
+
+    await nextTick();
+
+    if (requestId !== renderRequestId || !shouldRenderVega.value || !vegaContainer.value) {
       return;
     }
 

package/dist/custom/package.json

@@ -18,10 +18,10 @@
     "@shikijs/themes": "^4.0.2",
     "@vueuse/core": "^14.2.1",
     "ai": "^6.0.168",
+    "custom-vue-scrollbar": "^0.0.8",
     "dompurify": "^3.3.3",
     "katex": "^0.16.45",
     "marked": "^18.0.0",
-    "vega-embed": "^7.1.0",
-    "vue-custom-scrollbar": "^2.0.2"
+    "vega-embed": "^7.1.0"
   }
 }

package/dist/custom/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       ai:
         specifier: ^6.0.168
         version: 6.0.168(zod@4.3.6)
+      custom-vue-scrollbar:
+        specifier: ^0.0.8
+        version: 0.0.8(lodash-es@4.18.1)(vue@3.5.32)
       dompurify:
         specifier: ^3.3.3
         version: 3.3.3
@@ -41,9 +44,6 @@ importers:
       vega-embed:
         specifier: ^7.1.0
         version: 7.1.0(vega-lite@6.4.2(vega@6.2.0))(vega@6.2.0)
-      vue-custom-scrollbar:
-        specifier: ^2.0.2
-        version: 2.0.2(vue@3.5.32)
 
 packages:
 
@@ -307,6 +307,12 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  custom-vue-scrollbar@0.0.8:
+    resolution: {integrity: sha512-JcO0B+02Kf9wXSL9SaxXVvuToaY+lvJAtmrwNfSLS3x6xx5+mO24r5/dGkNK8av0VlSDzviypYUXTjEZbwgGHA==}
+    peerDependencies:
+      lodash-es: ^4.17.21
+      vue: ^3.2.13
+
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -656,9 +662,6 @@ packages:
   parse-entities@4.0.2:
     resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
-  perfect-scrollbar@1.5.6:
-    resolution: {integrity: sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -879,11 +882,6 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vue-custom-scrollbar@2.0.2:
-    resolution: {integrity: sha512-eRyxGb7UFLLH8P0B8FDux2uPrzNBH0X6IN+A/RB5sfmLq1ym7shbCPVKua1pC7LPqPB7dc86evFXyWO/svrfKA==}
-    peerDependencies:
-      vue: ^3.3.0
-
   vue@3.5.32:
     resolution: {integrity: sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==}
     peerDependencies:
@@ -1219,6 +1217,11 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  custom-vue-scrollbar@0.0.8(lodash-es@4.18.1)(vue@3.5.32):
+    dependencies:
+      lodash-es: 4.18.1
+      vue: 3.5.32
+
   d3-array@3.2.4:
     dependencies:
       internmap: 2.0.3
@@ -1766,8 +1769,6 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  perfect-scrollbar@1.5.6: {}
-
   picocolors@1.1.1: {}
 
   postcss@8.5.10:
@@ -2142,11 +2143,6 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vue-custom-scrollbar@2.0.2(vue@3.5.32):
-    dependencies:
-      perfect-scrollbar: 1.5.6
-      vue: 3.5.32
-
   vue@3.5.32:
     dependencies:
       '@vue/compiler-dom': 3.5.32

package/dist/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/agent",
-  "version": "1.24.3",
+  "version": "1.24.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",