chore: progress-updating-tools-history[6]

Author: yaroslav8765

custom/conversation_area/ConversationArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="scrollContainer.scrollToBottom()">
+  <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'"

custom/conversation_area/ReasoningRenderer.vue

@@ -16,7 +16,7 @@
     />
   </h3>
   <transition name="expand">
-    <div v-show="isExpanded" class="overflow-hidden mb-4 text-sm mr-48 h-64">
+    <div v-show="isExpanded" class="overflow-hidden mb-4 text-sm mr-48 max-h-64">
       <AutoScrollContainer
         :enabled="true"
       >

custom/conversation_area/ToolRenderer.vue

@@ -1,6 +1,6 @@
 <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"         
+    class="border py-1 w-64 max-w-64 inline-flex items-center justify-center m-2 flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
     @click="isInputOutputExpanded = !isInputOutputExpanded"
   >
     <div class="flex items-center gap-3">

custom/conversation_area/ToolsGroup.vue

@@ -11,25 +11,35 @@
       <span class="font-semibold">Call tools</span>
     </h3>
 
-    
+    <div class="flex flex-wrap">
     <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)">
+      <template v-if="group.groupedTools.length > 1">
+        <div
+          v-if="!expandedGroups.includes(group.title)" 
+          class="max-w-64 w-auto flex items-center gap-2 px-2 m-2 py-2.5 cursor-pointer 
+            hover:opacity-75 break-all font-mono text-sm leading-5
+            text-lightListTableHeadingText dark:text-darkListTableHeadingText
+            items-center justify-center
+          " 
+          :class="!expandedGroups.includes(group.title) ? 'border rounded-xl' : ''"
+          @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.toolInfo.toolCallId" :data="part" class="ml-8"/>
-          </div>
-        </transition>
-      </div>
+        <!-- <transition name="expand">
+          <div v-show="expandedGroups.includes(group.title)" class="flex flex-wrap gap-1">  -->
+            <ToolRenderer v-if="expandedGroups.includes(group.title)" v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
+          <!-- </div>
+        </transition> -->
+      </template>
       <ToolRenderer v-else-if="group.groupedTools.length > 0" :data="group.groupedTools[0]" />
     </template> 
+    </div>
   </template>
 </template>