fix: correct max-width of tool call container, when tool was called with collapsed reasoning container

AdminForth/1642/(

Author: yaroslav8765

custom/conversation_area/ProcessingTimeline.vue

@@ -18,7 +18,6 @@
       </p>
 
       <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
-      <!-- <ThreeDotsAnimation v-if="inProgress" /> -->
       <IconAngleDownOutline 
         v-if="ToolOrReasoningParts.length > 0"
         :class="isExpanded ? 'rotate-180' : 'rotate-0'"
@@ -41,7 +40,7 @@
         <ol class="ml-8 my-2 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <template v-for="(part, index) in ToolOrReasoningParts" :key="index">
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
-            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
+            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" :isExpanded="isExpanded" />
             <li v-else-if="part.type === 'data-rendering'" class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
               <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar">
                 <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>

custom/conversation_area/ToolRenderer.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, watch, onMounted } from 'vue';
+  import { computed, ref, watch, onMounted, nextTick } from 'vue';
   import { type IFormattedToolCallPart } from '../types';
   import { Spinner } from '@/afcl';
   import { IconAngleDownOutline, IconCheckOutline, IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
@@ -109,7 +109,8 @@
   });
   const hasToolSections = computed(() => toolSections.value.length > 0);
 
-  onMounted(() => {
+  onMounted(async () => {
+    await nextTick();
     if (toolRendererRef.value && props.data.toolInfo) {
       toolRendererInitialWidth.value = toolRendererRef.value.offsetWidth;
     }

custom/conversation_area/ToolsGroup.vue

@@ -13,7 +13,8 @@
       </h3>
       <div class="flex flex-wrap">
         <template v-for="group in props.toolGroup" :key="group.title">
-          <ToolRenderer 
+          <ToolRenderer
+            v-if="isExpanded" 
             v-for="part in group.groupedTools" 
             :key="part.toolInfo.toolCallId" 
             :data="part"
@@ -31,6 +32,7 @@ import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
 
 const props = defineProps<{
   toolGroup: IToolGroup[]
+  isExpanded: boolean
 }>();
 
 </script>