fix: improoved style of used tools history

Author: yaroslav8765

custom/ConversationArea.vue

@@ -17,9 +17,10 @@
 
   </div>
   <AutoScrollContainer
-    enabled 
+    :enabled="!showScrollToBottomButton" 
     class="flex flex-col overflow-y-auto border-t border-gray-200 dark:border-gray-700"
     ref="scrollContainer"
+    :threshold="10"
     behavior="smooth"
   > 
 
@@ -57,8 +58,8 @@
       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>Start the conversation</p>
-      <p class="tracking-normal text-base text">Give any input to begin</p>
+      <p>{{ $t('Start the conversation') }}</p>
+      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
     </div>
   </AutoScrollContainer>
 </template>
@@ -151,20 +152,16 @@ const groupToolCallParts = (message: IMessage) => {
     if(!part?.toolInfo) {
       continue;
     }
-    console.log('part', part);
     if (part.toolInfo.toolName === currentToolName) {
-      console.log('grouping part with tool name', currentToolName);
       groupedParts[groupedParts.length - 1].groupedTools.push(part);
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    console.log('starting new group with tool name', currentToolName);
     groupedParts.push({
       title: currentToolName,
       groupedTools: [part]
     });
   }  
-  console.log('groupedParts', groupedParts);
   return groupedParts;
 }
 

custom/Message.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="max-w-[80%] flex px-4 py-2 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
+    class="max-w-[80%] flex px-4 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
     @click="handleMarkdownLinkClick"
     :class="props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
       : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 

custom/ToolRenderer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="props.data?.toolInfo" class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 text-lightListTableHeadingText dark:text-darkListTableHeadingText">
+  <div 
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
+    @click="isInputOutputExpanded = !isInputOutputExpanded"
+  >
     <div class="flex items-center gap-3">
       <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" />
@@ -18,8 +21,7 @@
       <IconAngleDownOutline
         v-if="hasToolSections"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        class="cursor-pointer transition-transform duration-200 hover:scale-105 hover:opacity-75"
-        @click="isInputOutputExpanded = !isInputOutputExpanded"
+        class="cursor-pointer transition-transform duration-200 hover:scale-105"
       />
     </div>
     <transition name="expand">

custom/ToolsGroup.vue

@@ -1,16 +1,17 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
-    <div v-if="group.groupedTools.length > 1" class="mb-4 flex flex-col">
-      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5" @click="toggleGroup(group.title)">
-        - {{ group.title }} {{ 'x' + group.groupedTools.length }} 
+    <div v-if="group.groupedTools.length > 1" class="flex flex-col">
+      <div class="flex items-center gap-2 p-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)">
+        <IconMinusOutline  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" />
+        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" class="ml-8"/>
         </div>
       </transition>
     </div>
@@ -24,7 +25,7 @@ import { Tool } from 'langchain';
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {