diff --git a/custom/ChatSurface.vue b/custom/ChatSurface.vue
index b745f94..9ba21eb 100644
--- a/custom/ChatSurface.vue
+++ b/custom/ChatSurface.vue
@@ -179,7 +179,7 @@ import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, Ic
 import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
 import { useTemplateRef, onMounted, ref,computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
-import ConversationArea from './ConversationArea.vue';
+import ConversationArea from './conversation_area/ConversationArea.vue';
 import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
 import { Button } from '@/afcl';
@@ -246,7 +246,7 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
-  const isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true';
+  const isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true' || agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
   if( coreStore.isMobile ) {
     agentStore.setIsTeleportedToBody(false);
   } else {
diff --git a/custom/ConversationArea.vue b/custom/ConversationArea.vue
deleted file mode 100644
index 9de6619..0000000
--- a/custom/ConversationArea.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-  <button @click="scrollContainer.scrollToBottom()">
-    <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'"
-  />
-  <div 
-    v-if="agentStore.isSessionHistoryOpen"
-    @click="agentStore.setSessionHistoryOpen(false)"
-    class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
-  >
-
-  </div>
-  <AutoScrollContainer
-    :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 
-      v-for="message in props.messages" :key="message.id"
-      class="flex flex-col w-full"
-      :class="message.role === 'user' ? 'self-end' : 'self-start'"
-    >
-      <template 
-        v-for="(part, index) in getParts(message)"
-        :key="part.type"
-      >
-        <Message
-          v-if="part.type !== 'data-tool-call'"
-          :message="part.text"
-          :role="message.role"
-          :type="part.type"
-          :state="part.state"
-          :data="part.data"
-          @toggle-thoughts="() => clicks++"
-        >
-        </Message>
-        <ToolsGroup v-else :toolGroup="groupToolCallParts(message, index, part)" />
-      </template>
-    </div>
-    <!-- Show a placeholder message if the last message is not of type 'text' or 'reasoning' -->
-    <Message
-      v-if="props.messages.length > 0 && showFakeThinkingMessage"
-      :message="''"
-      :role="props.messages[props.messages.length - 1].role"
-      type="reasoning"
-      state="streaming"
-    />
-    <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>
-  </AutoScrollContainer>
-</template>
-
-
-<script setup lang="ts">
-import Message from './Message.vue';
-import type { IMessage, IPart } from './types';
-import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed } from 'vue';
-import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
-import SessionsHistory from './SessionsHistory.vue';
-import { useAgentStore } from './composables/useAgentStore';
-import ToolsGroup from './ToolsGroup.vue';
-import { useAgentTransitions } from './composables/useAgentTransitions';
-
-const scrollContainer = useTemplateRef('scrollContainer');
-const showScrollToBottomButton = ref(false);
-const innerScrollContainerRef = ref(null);
-const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
-const agentStore = useAgentStore();
-const agentTransitions = useAgentTransitions();
-const clicks = ref(0);
-
-function recalculateScroll() {
-  if (scrollContainer.value) {
-    const isScrolledUp = scrollContainer.value.isUserScrolledUp();
-    showScrollToBottomButton.value = !!isScrolledUp;
-  }
-}
-
-onMounted(async () => {
-  await import('@incremark/theme/styles.css')
-  await agentStore.fetchPlaceholderMessages()
-});
-
-onUnmounted(() => {
-  agentStore.stopPlaceholderAnimation();
-});
-
-watch(scrollContainer, () => {
-  if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container;
-
-    innerScrollContainerRef.value.addEventListener('scroll', () => {
-      recalculateScroll();
-    });
-  }
-})
-
-watch(clicks, () => {
-  recalculateScroll();
-})
-
-const showFakeThinkingMessage = computed(() => {
-  const lastMessage = props.messages[props.messages.length - 1];
-  if (!lastMessage) return false;
-  const lastPart = getParts(lastMessage)[getParts(lastMessage).length - 1];
-  return lastPart?.type !== 'text' && lastPart?.type !== 'reasoning';
-})
-
-const getParts = (message: IMessage) => {
-  return message.parts?.length
-    ? message.parts
-    : [{ text: '', type: 'reasoning', state: 'streaming' }];
-};
-
-const formatToolCallTextPart = ((part: IPart, currentMessage: IMessage) => {
-  if (part.type === 'data-tool-call') {
-    if (part.data?.phase === 'start') {
-      const finishedPart = currentMessage.parts?.find(p => p.type === 'data-tool-call' && p.data?.toolCallId === part.data?.toolCallId && p.data?.phase === 'end');
-      return {
-        type: 'text',
-        toolInfo: {
-          toolCallId: part.data!.toolCallId,
-          toolName: part.data!.toolName,
-          phase: finishedPart ? 'end' : 'start',
-          durationMs: finishedPart ? finishedPart.data?.durationMs : undefined,
-          input: part.data!.input,
-          output: finishedPart ? finishedPart.data!.output : undefined,
-        }          
-      }
-    }
-  }
-  return null;  
-});
-
-const groupToolCallParts = (message: IMessage, currentPartIndex: number, currentPart: IPart) => {
-  const groupedParts: { title: string; groupedTools: IPart[] }[] = [];
-  let currentToolName: string | null = null;
-  const parts = getParts(message);
-  if (!parts) return [];
-  const formatedToolParts = parts.map(part => {
-    return formatToolCallTextPart(part as IPart, message)
-  });
-  const currentPartIndexInFormatedParts = formatedToolParts.findIndex(part => part?.toolInfo?.toolCallId === currentPart.data?.toolCallId);
-  if (currentPartIndexInFormatedParts === -1) {
-    return [];
-  }
-  for( const[index, part] of formatedToolParts.entries()){
-    if ( index < currentPartIndexInFormatedParts - 1 ) {
-      continue;
-    }
-    if(!part || !part.toolInfo) {
-      continue;
-    }
-    currentToolName = part.toolInfo.toolName;
-    if (!groupedParts.find(group => group.title === currentToolName)) {
-      groupedParts.push({
-        title: currentToolName,
-        groupedTools: []
-      })
-    }
-    if( formatedToolParts[currentPartIndexInFormatedParts - 1]?.toolInfo.toolName === part.toolInfo.toolName) {
-      continue;
-    } else if ( formatedToolParts[currentPartIndexInFormatedParts + 1]?.toolInfo.toolName === part.toolInfo.toolName) {
-      groupedParts[groupedParts.length - 1].groupedTools.push(formatedToolParts[currentPartIndexInFormatedParts + 1] as IPart);
-    } else {
-      groupedParts[groupedParts.length - 1].groupedTools.push(part);
-    }
-  }  
-  return groupedParts;
-}
-
-const props = defineProps<{
-  messages: IMessage[]
-}>();
-
-</script>
\ No newline at end of file
diff --git a/custom/CustomAutoScrollContainer.vue b/custom/CustomAutoScrollContainer.vue
new file mode 100644
index 0000000..7d31f81
--- /dev/null
+++ b/custom/CustomAutoScrollContainer.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import vueCustomScrollbar from 'vue-custom-scrollbar'
+
+const props = withDefaults(defineProps<{
+  enabled?: boolean
+  threshold?: number
+  behavior?: ScrollBehavior
+}>(), {
+  enabled: true,
+  threshold: 50,
+  behavior: 'instant'
+})
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const isUserScrolledUp = ref(false)
+
+let lastScrollTop = 0
+let lastScrollHeight = 0
+
+function isNearBottom(): boolean {
+  const container = containerRef.value
+  if (!container) return true
+  
+  const { scrollTop, scrollHeight, clientHeight } = container
+  return scrollHeight - scrollTop - clientHeight <= props.threshold
+}
+
+function scrollToBottom(force = false): void {
+  const container = containerRef.value
+  if (!container) return
+  
+  if (isUserScrolledUp.value && !force) return
+  
+  container.scrollTo({
+    top: container.scrollHeight,
+    behavior: props.behavior
+  })
+}
+
+
+function hasScrollbar(): boolean {
+  const container = containerRef.value
+  if (!container) return false
+  return container.scrollHeight > container.clientHeight
+}
+
+
+function handleScroll(): void {
+  const container = containerRef.value
+  if (!container) return
+  
+  const { scrollTop, scrollHeight, clientHeight } = container
+  
+  if (scrollHeight <= clientHeight) {
+    isUserScrolledUp.value = false
+    lastScrollTop = 0
+    lastScrollHeight = scrollHeight
+    return
+  }
+  
+  if (isNearBottom()) {
+    isUserScrolledUp.value = false
+  } else {
+    const isScrollingUp = scrollTop < lastScrollTop
+    const isContentUnchanged = scrollHeight === lastScrollHeight
+    
+    if (isScrollingUp && isContentUnchanged) {
+      isUserScrolledUp.value = true
+    }
+  }
+  
+  lastScrollTop = scrollTop
+  lastScrollHeight = scrollHeight
+}
+
+let observer: MutationObserver | null = null
+
+onMounted(() => {
+  if (!containerRef.value) return
+  
+  lastScrollTop = containerRef.value.scrollTop
+  lastScrollHeight = containerRef.value.scrollHeight
+  
+  observer = new MutationObserver(() => {
+    nextTick(() => {
+      if (!containerRef.value) return
+      
+      if (!hasScrollbar()) {
+        isUserScrolledUp.value = false
+      }
+      
+      lastScrollHeight = containerRef.value.scrollHeight
+      
+      if (props.enabled && !isUserScrolledUp.value) {
+        scrollToBottom()
+      }
+    })
+  })
+  
+  observer.observe(containerRef.value, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
+defineExpose({
+  scrollToBottom: () => scrollToBottom(true),
+  isUserScrolledUp: () => isUserScrolledUp.value,
+  container: containerRef
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="auto-scroll-container h-full"
+    @scroll="handleScroll"
+  >
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/custom/ToolsGroup.vue b/custom/ToolsGroup.vue
deleted file mode 100644
index fb21847..0000000
--- a/custom/ToolsGroup.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <template v-for="group in props.toolGroup" :key="group.title">
-    <div v-if="group.groupedTools.length > 1" class="flex flex-col">
-      <div class="flex items-center gap-2 px-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
-        <IconCheckOutline  class="w-6 h-6 p-1"/> 
-        {{ group.title }} {{ 'x' + group.groupedTools.length }} 
-        <IconAngleDownOutline 
-          class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
-          :class="expandedGroups.includes(group.title) ? 'rotate-180' : 'rotate-0'"
-        />
-      </div>
-      <transition name="expand">
-        <div v-show="expandedGroups.includes(group.title)" class="flex flex-col"> 
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" class="ml-8"/>
-        </div>
-      </transition>
-    </div>
-    <ToolRenderer v-else-if="group.groupedTools.length > 0" :data="group.groupedTools[0]" />
-  </template> 
-
-</template>
-
-<script setup lang="ts">
-import ToolRenderer from './ToolRenderer.vue';
-import type { IPart } from './types';
-import { ref } from 'vue';
-import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
-
-const props = defineProps<{
-  toolGroup: {
-    title: string;
-    groupedTools: IPart[];
-  }[]
-}>();
-
-const expandedGroups = ref<string[]>([]);
-
-function toggleGroup(groupTitle: string) {
-  if (expandedGroups.value.includes(groupTitle)) {
-    expandedGroups.value = expandedGroups.value.filter((title: string) => title !== groupTitle);
-  } else {
-    expandedGroups.value.push(groupTitle);
-  }
-}
-
-</script>
-
-<style scoped>
-
-.expand-enter-active,
-.expand-leave-active {
-  transition: all 0.3s ease;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.expand-enter-to,
-.expand-leave-from {
-  opacity: 1;
-  max-height: 288px;
-}
-
-</style>
\ No newline at end of file
diff --git a/custom/composables/useAgentStore.ts b/custom/composables/useAgentStore.ts
index ee097b2..5d29b15 100644
--- a/custom/composables/useAgentStore.ts
+++ b/custom/composables/useAgentStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { IAgentSession, ISessionsListItem, IMessage } from '../types';
+import { IAgentSession, ISessionsListItem, IMessage, IPart } from '../types';
 import { ref, nextTick, computed, watch, onMounted, shallowRef } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import { useAdminforth } from '@/adminforth';
@@ -93,7 +93,9 @@ export const useAgentStore = defineStore('agent', () => {
   })
   onMounted(() => {
     const chatWidthBeforeFullScreen = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || '0', 10);
-    if (chatWidthBeforeFullScreen) {
+    if (chatWidthBeforeFullScreen && (chatWidthBeforeFullScreen > MAX_WIDTH || chatWidthBeforeFullScreen < MIN_WIDTH)) {
+      setChatWidth(remToPx(DEFAULT_CHAT_WIDTH));
+    } else if (chatWidthBeforeFullScreen) {
       setChatWidth(remToPx(chatWidthBeforeFullScreen));
     } else {
       const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
@@ -105,7 +107,7 @@ export const useAgentStore = defineStore('agent', () => {
         }
       }
     }
-    isTeleportedToBody.value = getLocalStorageItem('isTeleportedToBody') === 'true';
+    setIsTeleportedToBody(getLocalStorageItem('isTeleportedToBody') === 'true' || getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true');
     lastSessionId.value = getLocalStorageItem('lastSessionId');
     if (lastSessionId.value && lastSessionId.value !== 'pre-session') {
       setActiveSession(lastSessionId.value);
@@ -510,7 +512,7 @@ export const useAgentStore = defineStore('agent', () => {
     if (currentSession.value) {
       currentSession.value.messages = currentChat.value?.messages.map((m: any) => ({
         role: m.role,
-        text: m.parts.map((p: any) => p.text).join(' '),
+        text: m.parts.map((p: IPart) => p.type === 'text' ? p.text : '').join(''),
       })) || [];
       sessions.value[currentSession.value.sessionId] = currentSession.value;
     }
@@ -522,8 +524,10 @@ export const useAgentStore = defineStore('agent', () => {
     if (!sessions.value[sessionId]) {
       await fetchSession(sessionId);    
     }
+    console.log('Set active session from sessions', sessionId, sessions.value[sessionId]);
     currentSession.value = sessions.value[sessionId];
     setCurrentChat(sessionId);
+    console.log('Set active session chat', sessionId, currentSession.value);
     currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
       role: m.role,
       parts:[{
diff --git a/custom/conversation_area/ConversationArea.vue b/custom/conversation_area/ConversationArea.vue
new file mode 100644
index 0000000..c1f6811
--- /dev/null
+++ b/custom/conversation_area/ConversationArea.vue
@@ -0,0 +1,109 @@
+<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'"
+  />
+  <div 
+    v-if="agentStore.isSessionHistoryOpen"
+    @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 
+      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>
+</template>
+
+
+<script setup lang="ts">
+import Message from './Message.vue';
+import type { IMessage, IPart } from '../types';
+import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed } from 'vue';
+import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
+import SessionsHistory from '../SessionsHistory.vue';
+import { useAgentStore } from '../composables/useAgentStore';
+import ToolsGroup from './ToolsGroup.vue';
+import { useAgentTransitions } from '../composables/useAgentTransitions';
+import { getMessageParts } from '../utils';
+import MessageRenderer from './MessageRenderer.vue';
+import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
+
+const scrollContainer = useTemplateRef('scrollContainer');
+const showScrollToBottomButton = ref(false);
+const innerScrollContainerRef = ref(null);
+const agentStore = useAgentStore();
+const agentTransitions = useAgentTransitions();
+const clicks = ref(0);
+
+function recalculateScroll() {
+  if (scrollContainer.value) {
+    const isScrolledUp = scrollContainer.value.isUserScrolledUp();
+    showScrollToBottomButton.value = !!isScrolledUp;
+  }
+}
+
+onMounted(async () => {
+  await import('@incremark/theme/styles.css')
+  await agentStore.fetchPlaceholderMessages()
+});
+
+onUnmounted(() => {
+  agentStore.stopPlaceholderAnimation();
+});
+
+watch(scrollContainer, () => {
+  if (scrollContainer.value) {
+    innerScrollContainerRef.value = scrollContainer.value.container;
+
+    innerScrollContainerRef.value.addEventListener('scroll', () => {
+      recalculateScroll();
+    });
+  }
+})
+
+watch(clicks, () => {
+  recalculateScroll();
+})
+
+
+
+const props = defineProps<{
+  messages: IMessage[]
+}>();
+
+</script>
\ No newline at end of file
diff --git a/custom/conversation_area/MessageRenderer.vue b/custom/conversation_area/MessageRenderer.vue
new file mode 100644
index 0000000..c4bbb73
--- /dev/null
+++ b/custom/conversation_area/MessageRenderer.vue
@@ -0,0 +1,33 @@
+<template>
+  <ProcessingTimeline 
+    :message="message"
+    :isLastMessageInChat="isLastMessageInChat"
+  />
+  <template 
+    v-for="(part, index) in getMessageParts(message)"
+    :key="part.type"
+  > 
+    
+    <TextRenderer 
+      v-if="part.type === 'text'" 
+      :message="part.text" 
+      :role="props.message.role" 
+    />
+  </template>
+
+</template>
+
+
+
+
+<script setup lang="ts">
+  import TextRenderer from './TextRenderer.vue';
+  import type { IMessage } from '../types';
+  import { getMessageParts } from '../utils';
+  import ProcessingTimeline from './ProcessingTimeline.vue';
+
+  const props = defineProps<{ 
+    message: IMessage 
+    isLastMessageInChat: boolean
+  }>();
+</script>
\ No newline at end of file
diff --git a/custom/conversation_area/ProcessingTimeline.vue b/custom/conversation_area/ProcessingTimeline.vue
new file mode 100644
index 0000000..56e4409
--- /dev/null
+++ b/custom/conversation_area/ProcessingTimeline.vue
@@ -0,0 +1,190 @@
+<template>
+  <template v-if="ToolOrReasoningParts.length > 0 || isResponseInProgress || showFakeThinkingMessage">
+    <div 
+      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm"
+      @click="isExpanded = !isExpanded"
+    >
+      Thoughts
+      <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
+      <ThreeDotsAnimation v-if="isResponseInProgress || showFakeThinkingMessage" />
+      <IconAngleDownOutline 
+        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
+        class="transition-transform duration-200"
+      />
+    </div>
+    <transition name="expand" class="max-h-96 overflow-y-auto mb-4 pt-1">
+      <CustomAutoScrollContainer
+        :enabled="true"
+        behavior="smooth"
+        v-if="ToolOrReasoningParts.length > 0" 
+        v-show="isExpanded"
+        class="mask-y"
+      >
+        <ol class="ml-8 relative border-l border-l-2 border-black border-default">
+          <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
+            <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
+            <ToolsGroup v-else :toolGroup="groupToolCallParts(message, part)" />
+          </li>      
+        </ol>
+      </CustomAutoScrollContainer>
+    </transition>
+  </template>
+</template>
+
+
+
+<script setup lang="ts">
+  import type { IFormattedToolCallPart, IMessage, IPart, IToolGroup } from '../types';
+  import { ref, computed, watch, defineAsyncComponent, onMounted } from 'vue';
+  import ReasoningRenderer from './ReasoningRenderer.vue';
+  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+  import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
+  import { useAgentStore } from '../composables/useAgentStore';
+  import { getMessageParts } from '../utils';
+  import ToolsGroup from './ToolsGroup.vue';
+  import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
+
+  const props = defineProps<{
+    message: IMessage
+    isLastMessageInChat: boolean
+  }>()
+
+  // const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
+  const agentStore = useAgentStore();
+  const thinkingStartTime = ref<number | null>(null);
+  const thinkingDuration = ref(0);
+
+  onMounted(() => {
+    thinkingStartTime.value = Date.now();
+  })
+
+  const ToolOrReasoningParts = computed(() => {
+    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
+  });
+  const isExpanded = ref(true);
+
+  const isResponseInProgress = computed(() =>{
+    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
+  });
+  
+  watch(isResponseInProgress, (newValue: boolean) => {
+    if (!newValue) {
+      isExpanded.value = false;
+      thinkingDuration.value = Date.now() - (thinkingStartTime.value ?? Date.now());
+    }
+  });
+  
+  const showFakeThinkingMessage = computed(() => {
+    if (props.message.parts.length === 0) return true;
+    return false;
+  })
+
+  const formatToolCallPart = (part: IPart, currentMessage: IMessage): IFormattedToolCallPart | null => {
+    if (part.type !== 'data-tool-call' || part.data?.phase !== 'start') {
+      return null;
+    }
+
+    const finishedPart = currentMessage.parts.find(candidate => {
+      return candidate.type === 'data-tool-call'
+        && candidate.data?.toolCallId === part.data?.toolCallId
+        && candidate.data?.phase === 'end';
+    });
+
+    return {
+      type: 'data-tool-call',
+      toolInfo: {
+        toolCallId: part.data.toolCallId,
+        toolName: part.data.toolName,
+        phase: finishedPart ? 'end' : 'start',
+        durationMs: finishedPart?.data?.durationMs,
+        input: part.data.input,
+        output: finishedPart?.data?.output,
+      }
+    };
+  };
+
+  const getVisibleTimelineParts = (message: IMessage) => {
+    return getMessageParts(message).filter(part => {
+      return part.type === 'reasoning' || (part.type === 'data-tool-call' && part.data?.phase === 'start');
+    });
+  };
+
+  const groupToolCallParts = (message: IMessage, currentPart: IPart): IToolGroup[] => {
+    if (currentPart.type !== 'data-tool-call') {
+      return [];
+    }
+
+    const visibleParts = getVisibleTimelineParts(message);
+    const currentPartIndex = visibleParts.findIndex(part => part === currentPart);
+
+    if (currentPartIndex === -1) {
+      return [];
+    }
+
+    if (currentPartIndex > 0 && visibleParts[currentPartIndex - 1]?.type === 'data-tool-call') {
+      return [];
+    }
+
+    const groupedParts: IToolGroup[] = [];
+
+    for (let index = currentPartIndex; index < visibleParts.length; index += 1) {
+      const part = visibleParts[index];
+
+      if (part.type === 'reasoning') {
+        break;
+      }
+
+      const formattedPart = formatToolCallPart(part, message);
+
+      if (!formattedPart) {
+        continue;
+      }
+
+      const lastGroup = groupedParts[groupedParts.length - 1];
+
+      if (lastGroup?.title === formattedPart.toolInfo.toolName) {
+        lastGroup.groupedTools.push(formattedPart);
+        continue;
+      }
+
+      groupedParts.push({
+        title: formattedPart.toolInfo.toolName,
+        groupedTools: [formattedPart],
+      });
+    }
+
+    return groupedParts;
+  };
+
+
+</script>
+
+<style scoped>
+  .expand-enter-active,
+  .expand-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .expand-enter-from,
+  .expand-leave-to {
+    opacity: 0;
+    max-height: 0;
+  }
+
+  .expand-enter-to,
+  .expand-leave-from {
+    opacity: 1;
+    max-height: 384px;
+  }
+
+  .mask-y {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent,
+      black 20px,
+      black calc(100% - 20px),
+      transparent
+    );
+  }
+ 
+</style>
\ No newline at end of file
diff --git a/custom/conversation_area/ReasoningRenderer.vue b/custom/conversation_area/ReasoningRenderer.vue
new file mode 100644
index 0000000..36278a1
--- /dev/null
+++ b/custom/conversation_area/ReasoningRenderer.vue
@@ -0,0 +1,87 @@
+<template>
+  <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+    <div class="w-5 h-5 rounded-full flex items-center justify-center">
+      <IconBrainOutline class="w-4 h-4" />
+    </div>
+  </span>
+  <h3 
+    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80"      
+    @click="isExpanded = !isExpanded"
+  >
+    <span class="font-semibold">{{ reasoningTitle }}</span>
+    <ThreeDotsAnimation v-if="isStreaming"/>
+    <IconAngleDownOutline           
+      :class="isExpanded ? 'rotate-180' : 'rotate-0'"
+      class="transition-transform duration-200"
+    />
+  </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>
+  </transition>    
+</template>
+
+
+
+<script setup lang="ts">
+import { IconBrainOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import type { IPart } from '../types';
+import { ref, computed, watch, defineAsyncComponent } from 'vue';
+import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
+import { extractTitleAndTextFromReasoning } from '../utils';
+import { useAgentStore } from '../composables/useAgentStore';
+
+
+const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
+const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
+
+const props = defineProps<{
+  state?: IPart['state']
+  text?: string
+}>();
+
+const agentStore = useAgentStore();
+
+const isStreaming = computed(() => props.state === 'streaming');
+const isExpanded = ref(true);
+const parsedReasoning = computed(() => extractTitleAndTextFromReasoning(props.text ?? ''));
+const reasoningTitle = computed(() => parsedReasoning.value.title ?? '');
+const reasoningText = computed(() => parsedReasoning.value.body);
+
+watch(() => props.state, (newValue: IPart['state']) => {
+  if ( newValue !== 'streaming') {
+    isExpanded.value = false;
+  } 
+});
+
+
+
+</script>
+
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.3s ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  opacity: 1;
+  max-height: 256px;
+}
+
+</style>
\ No newline at end of file
diff --git a/custom/Message.vue b/custom/conversation_area/TextRenderer.vue
similarity index 57%
rename from custom/Message.vue
rename to custom/conversation_area/TextRenderer.vue
index fdb59e0..d44b236 100644
--- a/custom/Message.vue
+++ b/custom/conversation_area/TextRenderer.vue
@@ -1,52 +1,21 @@
 <template>
-  <div 
+  <div
     class="max-w-[80%] flex px-4 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
     @click="handleMarkdownLinkClick"
     :class="[
       hasVegaLite ? 'w-full' : '',
       props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
-      : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 
-        : 'bg-blue-100 dark:bg-blue-700/10 self-start'
+        : 'border-none self-start'
     ]"
   >
     <IncremarkContent
       class="text-wrap break-words w-full max-w-full"
-      v-if="content && props.type === 'text'"
+      v-if="content"
       :content="content" 
       :is-finished="isFinished" 
       :components="incremarkComponents"
       :incremark-options="incremarkOptions"
     />
-    <!-- reasoning/thinking -->
-    <div 
-      v-else-if="isTypeReasoning || isStateStreaming" 
-      class="flex flex-col items-start gap-1 text-gray-500 py-2 " 
-    >
-      <div class="flex items-center gap-1 hover:underline cursor-pointer text-lightListTableHeadingText hover:text-lightListTableHeadingText  dark:text-darkListTableHeadingText dark:hover:text-darkListTableHeadingText" @click="isThoughtsExpanded = !isThoughtsExpanded">
-        <IconAngleDownOutline 
-          v-if="content"
-          :class="isThoughtsExpanded ? 'rotate-180' : 'rotate-0'"
-          class="transition-transform duration-200"
-        />
-        {{ isStateStreaming ? 'Thinking' : 'Thoughts' }}
-        <template v-if="isStateStreaming">
-          <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
-          <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
-          <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
-        </template>
-      </div>
-      <transition name="expand" class="max-h-36 overflow-y-auto">
-        <p v-show="isThoughtsExpanded" class="overflow-hidden">
-          {{ content }}
-        </p>
-      </transition>    
-    </div>
-    <div v-else-if="isTypeToolCall && isToolCallStart">
-      {{ props.data?.toolName }} start
-    </div>
-    <div v-else-if="isTypeToolCall && isToolCallEnd">
-      {{ props.data?.toolName }} end
-    </div>
     <p v-else class="text-red-500 py-2">
       Error occured
     </p>
@@ -56,12 +25,11 @@
 <script setup lang="ts">
   import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
-  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-  import { useAgentStore } from './composables/useAgentStore';
+  import { useAgentStore } from '../composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
 
   const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
-  const ShikiCodeBlock = defineAsyncComponent(() => import('./incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
+  const ShikiCodeBlock = defineAsyncComponent(() => import('../incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
 
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
@@ -84,10 +52,8 @@
   })
 
   const props = defineProps<{
-    type: string,
     message: string | undefined,
     state: string | undefined,
-    data?: any
     role: 'user' | 'assistant'
   }>();
 
@@ -95,27 +61,23 @@
 
   const content = computed(() => props.message)
   const isFinished = computed(() => props.state === 'done')
-  const isThoughtsExpanded = ref(false)
-  const hasVegaLite = computed(() => props.type === 'text' && props.message.includes('```vega-lite'))
+  const isThoughtsExpanded = ref(true);
+  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
 
-  const isTypeReasoning = computed(() => props.type === 'reasoning')
-  const isTypeToolCall = computed(() => props.type === 'data-tool-call')
-  const isToolCallStart = computed(() => {
-    if (props.type !== 'data-tool-call') return false;
-    return props.data?.phase === 'start';
-  })
-  const isToolCallEnd = computed(() => {
-    if (props.type !== 'data-tool-call') return false;
-    return props.data?.phase === 'end';
-  })
   const isStateStreaming = computed(() => props.state === 'streaming')
 
+  watch(isStateStreaming, (newValue: boolean) => {
+    if (!newValue) {
+      isThoughtsExpanded.value = false;
+    } 
+  })
+
   watch(isThoughtsExpanded, (newValue: boolean) => {
     emit('toggle-thoughts', newValue);
   })
 
   function handleMarkdownLinkClick(event: MouseEvent) {
-    if (props.type !== 'text' || event.defaultPrevented || event.button !== 0) {
+    if (event.defaultPrevented || event.button !== 0) {
       return;
     }
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
@@ -134,7 +96,6 @@
       return;
     }
     event.preventDefault();
-
     const internalRoute = resolveInternalRoute(href);
     if (internalRoute !== null) {
       if (agentStore.isFullScreen && !coreStore.isMobile) {
@@ -170,55 +131,6 @@
   }
 </style>
 
-<style scoped>
-
-.bounce-dot1 {
-  animation: bounce 1.5s infinite;
-  animation-delay: 0s;
-}
-
-.bounce-dot2 {
-  animation: bounce 1.5s infinite;
-  animation-delay: 0.1s;
-}
-
-.bounce-dot3 {
-  animation: bounce 1.5s infinite;
-  animation-delay: 0.2s;
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(20%);
-    opacity: 0.3;
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    opacity: 1;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-.expand-enter-active,
-.expand-leave-active {
-  transition: all 0.3s ease;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.expand-enter-to,
-.expand-leave-from {
-  opacity: 1;
-  max-height: 144px;
-}
-
-</style>
-
 <style lang="scss">
 .incremark a.incremark-link,
 .incremark a.incremark-link:visited {
diff --git a/custom/conversation_area/ThreeDotsAnimation.vue b/custom/conversation_area/ThreeDotsAnimation.vue
new file mode 100644
index 0000000..c8cf505
--- /dev/null
+++ b/custom/conversation_area/ThreeDotsAnimation.vue
@@ -0,0 +1,35 @@
+<template>
+  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
+  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
+  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
+</template>
+
+<style scoped>
+  .bounce-dot1 {
+    animation: bounce 1.5s infinite;
+    animation-delay: 0s;
+  }
+
+  .bounce-dot2 {
+    animation: bounce 1.5s infinite;
+    animation-delay: 0.1s;
+  }
+
+  .bounce-dot3 {
+    animation: bounce 1.5s infinite;
+    animation-delay: 0.2s;
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(20%);
+      opacity: 0.3;
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/custom/ToolRenderer.vue b/custom/conversation_area/ToolRenderer.vue
similarity index 63%
rename from custom/ToolRenderer.vue
rename to custom/conversation_area/ToolRenderer.vue
index 137ca43..f1c48d8 100644
--- a/custom/ToolRenderer.vue
+++ b/custom/conversation_area/ToolRenderer.vue
@@ -1,19 +1,34 @@
 <template>
-  <div 
-    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
-    @click="isInputOutputExpanded = !isInputOutputExpanded"
+  <div
+    ref="toolRendererRef" 
+    class="py-1 inline-flex justify-center m-2 
+      flex-col gap-3 rounded-xl px-2 text-lightListTableHeadingText 
+      dark:text-darkListTableHeadingText select-none
+    "         
+    :class="[
+      isInputOutputExpanded ? 'items-start border-none' : '', 
+      activateShrinkedStyle ? 'border items-center' : '',
+      activateFullWidth ? 'w-full' : '',
+    ]"
+    :style="{
+      maxWidth: isAnimatingShrinkFinal ? toolRendererInitialWidth + 'px' : '',
+      transition: 'max-width 0.3s ease',
+    }"
   >
-    <div class="flex items-center gap-3">
+    <div 
+      class="flex items-center gap-1 cursor-pointer"     
+      @click="toggleInputOutput()"
+    >
       <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
         <Spinner v-if="isRunning" class="h-4 w-4" />
         <IconCheckOutline v-else class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
       </div>
 
       <div class="min-w-0">
-        <p class="text-xs text-gray-500 dark:text-gray-400 font-bold">
+        <!-- <p class="text-xs text-gray-500 dark:text-gray-400 font-bold">
           {{ statusLabel }}
           <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
-        </p>
+        </p> -->
         <p class="break-all font-mono text-sm leading-5">
           {{ props.data?.toolInfo?.toolName }}
         </p>
@@ -47,12 +62,52 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue';
-  import { type IPartData } from './types';
+  import { computed, ref, watch, onMounted } from 'vue';
+  import { type IFormattedToolCallPart } from '../types';
   import { Spinner } from '@/afcl';
   import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
   const isInputOutputExpanded = ref(false);
+  const activateShrinkedStyle = ref(true);
+  const isAnimatingShrinkFinal = ref(false);
+  const toolRendererInitialWidth = ref<number | null>(null);
+  const toolRendererRef = ref<HTMLElement | null>(null);
+  const activateFullWidth = ref(false);
+  const blockClicksDuringAnimation = ref(false);
+  const ANIMATION_DURATION = 300;
+
+  onMounted(() => {
+    if (toolRendererRef.value) {
+      toolRendererInitialWidth.value = toolRendererRef.value.offsetWidth;
+    }
+  });  
+
+  watch(isInputOutputExpanded, (newValue) => {
+    if (!newValue) {
+      setTimeout(() => {
+        activateFullWidth.value = false;
+        isAnimatingShrinkFinal.value = true;
+      }, ANIMATION_DURATION - 10)
+      setTimeout(() => {
+        isAnimatingShrinkFinal.value = false;
+      }, ANIMATION_DURATION);
+      setTimeout(() => {
+        activateShrinkedStyle.value = true;
+      }, ANIMATION_DURATION + 10);
+    } else {
+      activateShrinkedStyle.value = false;
+      activateFullWidth.value = true;
+    }
+  });
+
+  function toggleInputOutput() {
+    if (blockClicksDuringAnimation.value) return;
+    isInputOutputExpanded.value = !isInputOutputExpanded.value;
+    blockClicksDuringAnimation.value = true;
+    setTimeout(() => {
+      blockClicksDuringAnimation.value = false;
+    }, ANIMATION_DURATION);
+  }
 
   interface IToolSection {
     label: string;
@@ -63,10 +118,7 @@
   }
 
   const props = defineProps<{
-    data: {
-      type: string;
-      toolInfo: IPartData;
-    }
+    data: IFormattedToolCallPart
   }>();
 
   const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
@@ -115,7 +167,7 @@
 
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.3s ease;
+  transition: all 300ms ease;
 }
 
 .expand-enter-from,
diff --git a/custom/conversation_area/ToolsGroup.vue b/custom/conversation_area/ToolsGroup.vue
new file mode 100644
index 0000000..6b6bd71
--- /dev/null
+++ b/custom/conversation_area/ToolsGroup.vue
@@ -0,0 +1,63 @@
+<template >
+  <template v-if="toolGroup.length > 0">
+    <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+      <div class="w-5 h-5 rounded-full flex items-center justify-center">
+        <IconWrenchSolid class="w-4 h-4" />
+      </div>
+    </span>
+    <h3 
+      class="flex items-center mb-1 text-sm my-2 ml-3 gap-1"      
+    >
+      <span class="font-semibold select-none ">Call tools</span>
+    </h3>
+    <div class="flex flex-wrap">
+      <template v-for="group in props.toolGroup" :key="group.title">
+        <ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
+      </template> 
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import ToolRenderer from './ToolRenderer.vue';
+import type { IToolGroup } from '../types';
+import { ref } from 'vue';
+import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
+
+
+const props = defineProps<{
+  toolGroup: IToolGroup[]
+}>();
+
+const expandedGroups = ref<string[]>([]);
+
+function toggleGroup(groupTitle: string) {
+  if (expandedGroups.value.includes(groupTitle)) {
+    expandedGroups.value = expandedGroups.value.filter((title: string) => title !== groupTitle);
+  } else {
+    expandedGroups.value.push(groupTitle);
+  }
+}
+
+</script>
+
+<style scoped>
+
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.3s ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  opacity: 1;
+  max-height: 288px;
+}
+
+</style>
\ No newline at end of file
diff --git a/custom/package.json b/custom/package.json
index bea611a..2e8953c 100644
--- a/custom/package.json
+++ b/custom/package.json
@@ -21,6 +21,7 @@
     "dompurify": "^3.3.3",
     "katex": "^0.16.45",
     "marked": "^18.0.0",
-    "vega-embed": "^7.1.0"
+    "vega-embed": "^7.1.0",
+    "vue-custom-scrollbar": "^2.0.2"
   }
 }
diff --git a/custom/pnpm-lock.yaml b/custom/pnpm-lock.yaml
index 15d5382..c5c0f92 100644
--- a/custom/pnpm-lock.yaml
+++ b/custom/pnpm-lock.yaml
@@ -41,6 +41,9 @@ 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:
 
@@ -653,6 +656,9 @@ 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==}
 
@@ -873,6 +879,11 @@ 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:
@@ -1755,6 +1766,8 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
+  perfect-scrollbar@1.5.6: {}
+
   picocolors@1.1.1: {}
 
   postcss@8.5.10:
@@ -2129,6 +2142,11 @@ 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
diff --git a/custom/types.ts b/custom/types.ts
index 0d6ed0a..719737c 100644
--- a/custom/types.ts
+++ b/custom/types.ts
@@ -7,12 +7,22 @@ export interface IPartData {
   durationMs?: number;
 }
 export interface IPart {
-  type: string;
+  type: 'reasoning' | 'data-tool-call' | 'text';
   text?: string;
   state?: 'started' | 'thinking' | 'processing' | 'streaming' | 'done';
   data?: IPartData;
 }
 
+export interface IFormattedToolCallPart {
+  type: 'data-tool-call';
+  toolInfo: IPartData;
+}
+
+export interface IToolGroup {
+  title: string;
+  groupedTools: IFormattedToolCallPart[];
+}
+
 export interface IMessage {
   id: string;
   role: 'user' | 'assistant';
diff --git a/custom/utils.ts b/custom/utils.ts
index c40e9d2..2df30f8 100644
--- a/custom/utils.ts
+++ b/custom/utils.ts
@@ -1,3 +1,5 @@
+import { IMessage, IPart } from "./types";
+
 export function remToPx(rem: number): number {
   const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   return rem * rootFontSize;
@@ -7,3 +9,30 @@ export function pxToRem(px: number): number {
   const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   return px / rootFontSize;
 }
+
+
+export function getMessageParts(message: IMessage): IPart[] {
+  return message.parts?.length
+    ? message.parts
+    : [{ text: '', type: 'reasoning', state: 'streaming' }];
+}
+
+function addNewLineBeforeTitles(text: string): string {
+  return text.replace(/(\*\*[^*]+\*\*)/g, '\n\n$1');
+}
+
+export function extractTitleAndTextFromReasoning(reasoningText: string): { title: string | null; body: string } {
+  const match = reasoningText.match(/^\*\*(.*?)\*\*(.*)$/s);
+
+  if (!match) {
+    return {
+      title: null,
+      body: addNewLineBeforeTitles(reasoningText)
+    };
+  }
+
+  return {
+    title: match[1].trim(),
+    body: addNewLineBeforeTitles(match[2].trim())
+  };
+}
\ No newline at end of file