feat: group executed tools, if 2 or more tools with the same name were executed

Author: yaroslav8765

custom/ConversationArea.vue

@@ -28,6 +28,7 @@
       class="flex flex-col w-full"
       :class="message.role === 'user' ? 'self-end' : 'self-start'"
     >
+      <ToolsGroup :toolGroup="groupToolCallParts(message)" />
       <template 
         v-for="part in getParts(message)"
         :key="part.type"
@@ -42,7 +43,6 @@
           @toggle-thoughts="() => clicks++"
         >
         </Message>
-        <ToolRenderer v-else :data="formatToolCallTextPart(part, message)" />
       </template>
     </div>
     <!-- Show a placeholder message if the last message is not of type 'text' or 'reasoning' -->
@@ -72,6 +72,7 @@ import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from './SessionsHistory.vue';
 import { useAgentStore } from './useAgentStore';
 import ToolRenderer from './ToolRenderer.vue';
+import ToolsGroup from './ToolsGroup.vue';
 
 const scrollContainer = useTemplateRef('scrollContainer');
 const showScrollToBottomButton = ref(false);
@@ -138,18 +139,34 @@ const formatToolCallTextPart = ((part: IPart, currentMessage: IMessage) => {
   return null;  
 });
 
-// const groupToolCallParts = (parts: IPart[], message: IMessage) => {
-//   const groupedParts = [];
-//   const formatedToolParts = parts.map(part => {
-//     return formatToolCallTextPart(part, message)
-//   });
-//   for( const[index, part] of formatedToolParts.entries()){
-//     if(!part?.toolInfo) {
-//       continue;
-//     }
-    
-//   }  
-// }
+const groupToolCallParts = (message: IMessage) => {
+  const groupedParts = [];
+  let currentToolName = null;
+  const parts = getParts(message);
+  if (!parts) return [];
+  const formatedToolParts = parts.map(part => {
+    return formatToolCallTextPart(part as IPart, message)
+  });
+  for( const[index, part] of formatedToolParts.entries()){
+    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;
+}
 
 const props = defineProps<{
   messages: IMessage[]

custom/SessionsHistory.vue

@@ -23,7 +23,7 @@
       <button
         v-for="session in group.sessions"
         :key="session.sessionId"
-        class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
+        class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200 overflow-hidden text-nowrap"
         :class="{'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)"
         :disabled="agentStore.isResponseInProgress"

custom/ToolsGroup.vue

@@ -0,0 +1,67 @@
+<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 }} 
+        <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" />
+        </div>
+      </transition>
+    </div>
+    <ToolRenderer v-else :data="group.groupedTools[0]" />
+  </template> 
+
+</template>
+
+<script setup lang="ts">
+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';
+
+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>