@adminforth/agent 1.18.0 → 1.18.2

package/build.log

@@ -15,6 +15,7 @@ custom/package.json
 custom/pnpm-lock.yaml
 custom/tsconfig.json
 custom/types.ts
+custom/utils.ts
 custom/composables/
 custom/composables/useAgentStore.ts
 custom/composables/useAgentTransitions.ts
@@ -31,5 +32,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 185,196 bytes  received 432 bytes  371,256.00 bytes/sec
-total size is 183,434  speedup is 0.99
+sent 187,002 bytes  received 451 bytes  374,906.00 bytes/sec
+total size is 185,150  speedup is 0.99

package/custom/ChatSurface.vue

@@ -23,7 +23,7 @@
       class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
             flex flex z-40"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'px' }"
+      :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!coreStore.isMobile"
@@ -103,7 +103,7 @@
           <div 
             class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
             :style="{ 
-              maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+              maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
               transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
             }"            
           >
@@ -185,6 +185,7 @@ import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
 import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
+import { remToPx, pxToRem } from './utils';
 
 const props = defineProps<{
   meta: {
@@ -209,7 +210,7 @@ let startWidth = 0
 
 const startResize = (e: MouseEvent) => {
   startX = e.clientX
-  startWidth = agentStore.chatWidth
+  startWidth = remToPx(agentStore.chatWidth)
 
   document.body.style.userSelect = 'none'
   document.body.style.cursor = 'ew-resize'
@@ -220,7 +221,7 @@ const startResize = (e: MouseEvent) => {
 
 const onResize = (e: MouseEvent) => {
   const dx = startX - e.clientX
-  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, agentStore.MIN_WIDTH), agentStore.MAX_WIDTH))
+  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, remToPx(agentStore.MIN_WIDTH)), remToPx(agentStore.MAX_WIDTH)))
   agentTransitions.setChatSurfaceTransition(true);
 }
 
@@ -246,7 +247,9 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
-  agentStore.setIsTeleportedToBody(props.meta.stickByDefault);
+  const isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true';
+
+  agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   await agentStore.fetchSessionsList();
 });
 

package/custom/ConversationArea.vue

@@ -24,7 +24,7 @@
     :threshold="10"
     behavior="smooth"
     :style="{ 
-      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+      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
@@ -37,9 +37,8 @@
       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)"
+        v-for="(part, index) in getParts(message)"
         :key="part.type"
       >
         <Message
@@ -52,6 +51,7 @@
           @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' -->
@@ -154,27 +154,39 @@ const formatToolCallTextPart = ((part: IPart, currentMessage: IMessage) => {
   return null;  
 });
 
-const groupToolCallParts = (message: IMessage) => {
-  const groupedParts = [];
-  let currentToolName = 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(!part?.toolInfo) {
+    if ( index < currentPartIndexInFormatedParts - 1 ) {
       continue;
     }
-    if (part.toolInfo.toolName === currentToolName) {
-      groupedParts[groupedParts.length - 1].groupedTools.push(part);
+    if(!part || !part.toolInfo) {
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    groupedParts.push({
-      title: currentToolName,
-      groupedTools: [part]
-    });
+    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;
 }

package/custom/ToolsGroup.vue

@@ -15,7 +15,7 @@
         </div>
       </transition>
     </div>
-    <ToolRenderer v-else :data="group.groupedTools[0]" />
+    <ToolRenderer v-else-if="group.groupedTools.length > 0" :data="group.groupedTools[0]" />
   </template> 
 
 </template>

package/custom/composables/useAgentStore.ts

@@ -8,6 +8,7 @@ import { DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 import { useAgentTransitions } from './useAgentTransitions';
 import { useWindowSize } from '@vueuse/core';
+import { remToPx, pxToRem } from '../utils';
 
 type AgentMode = {
   name: string;
@@ -19,9 +20,9 @@ const PLACEHOLDER_DELETING_DELAY_MS = 35;
 const PLACEHOLDER_HOLD_DELAY_MS = 3000;
 
 export const useAgentStore = defineStore('agent', () => {
-  const DEFAULT_CHAT_WIDTH = 600;
-  const MAX_WIDTH = 800;
-  const MIN_WIDTH = 382; //w-96
+  const DEFAULT_CHAT_WIDTH = 30;
+  const MAX_WIDTH = 60;
+  const MIN_WIDTH = 25
   const agentTransitions = useAgentTransitions();
 
   const activeSessionId = ref<string | null>(null);
@@ -71,6 +72,9 @@ export const useAgentStore = defineStore('agent', () => {
   })
   watch(chatWidth, (newVal: number) => {
     setLocalStorageItem('chatWidth', newVal.toString());
+    if (!isFullScreen.value) {
+      setLocalStorageItem('chatWidthBeforeFullScreen', newVal.toString());
+    }
   })
   watch(activeSessionId, (newVal: string | null) => {
     if (newVal) {
@@ -90,14 +94,14 @@ export const useAgentStore = defineStore('agent', () => {
   onMounted(() => {
     const chatWidthBeforeFullScreen = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || '0', 10);
     if (chatWidthBeforeFullScreen) {
-      chatWidth.value = chatWidthBeforeFullScreen;
+      setChatWidth(remToPx(chatWidthBeforeFullScreen));
     } else {
       const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
       if (savedChatWidth) {
         if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
-          chatWidth.value = DEFAULT_CHAT_WIDTH;
+          setChatWidth(remToPx(DEFAULT_CHAT_WIDTH));
         } else {
-          chatWidth.value = savedChatWidth;
+          setChatWidth(remToPx(savedChatWidth));
         }
       }
     }
@@ -110,7 +114,7 @@ export const useAgentStore = defineStore('agent', () => {
       isChatOpen.value = getLocalStorageItem('isChatOpen') === 'true';
     }
     if (coreStore.isMobile) {
-      chatWidth.value = window.innerWidth;
+      setChatWidth(window.innerWidth);
     }
     appRoot.value = document.getElementById('app');
     header.value = document.getElementById('af-header-nav');
@@ -135,23 +139,24 @@ export const useAgentStore = defineStore('agent', () => {
       const isTeleportedBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
       agentTransitions.setAppRootTransition(true);
       setIsTeleportedToBody(isTeleportedBeforeFullScreen);
-      setChatWidth(lastChatWidth, false);
+      setChatWidth(remToPx(lastChatWidth), false);
       setTimeout(() => agentTransitions.setAppRootTransition(false), agentTransitions.TRANSITION_DURATION);
     }
   }
 
+  //takes on input width in pixels, converts to rem and sets chat width
   function setChatWidth(width: number, blockTransition = true) {
     if (blockTransition) {
       agentTransitions.setAppRootTransition(true);
     }
-    chatWidth.value = width;
+    chatWidth.value = pxToRem(width);
 
   }
   watch([isTeleportedToBody, isChatOpen, chatWidth], ([newIsTeleportedToBody, newIsChatOpen, newChatWidth]: [boolean, boolean, number]) => {
     if (appRoot.value && header.value) {
       if (newIsTeleportedToBody && newIsChatOpen) {
-        appRoot.value.style.paddingRight = `${chatWidth.value}px`;
-        header.value.style.paddingRight = `${chatWidth.value}px`;
+        appRoot.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
+        header.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
       } else {
         appRoot.value.style.paddingRight = '';
         header.value.style.paddingRight = '';
@@ -572,5 +577,6 @@ export const useAgentStore = defineStore('agent', () => {
     DEFAULT_CHAT_WIDTH,
     MAX_WIDTH,
     MIN_WIDTH,
+    getLocalStorageItem
   }
 })

package/custom/utils.ts

@@ -0,0 +1,9 @@
+export function remToPx(rem: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return rem * rootFontSize;
+}
+
+export function pxToRem(px: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return px / rootFontSize;
+}

package/dist/custom/ChatSurface.vue

@@ -23,7 +23,7 @@
       class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
             flex flex z-40"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'px' }"
+      :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!coreStore.isMobile"
@@ -103,7 +103,7 @@
           <div 
             class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
             :style="{ 
-              maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+              maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
               transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
             }"            
           >
@@ -185,6 +185,7 @@ import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
 import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
+import { remToPx, pxToRem } from './utils';
 
 const props = defineProps<{
   meta: {
@@ -209,7 +210,7 @@ let startWidth = 0
 
 const startResize = (e: MouseEvent) => {
   startX = e.clientX
-  startWidth = agentStore.chatWidth
+  startWidth = remToPx(agentStore.chatWidth)
 
   document.body.style.userSelect = 'none'
   document.body.style.cursor = 'ew-resize'
@@ -220,7 +221,7 @@ const startResize = (e: MouseEvent) => {
 
 const onResize = (e: MouseEvent) => {
   const dx = startX - e.clientX
-  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, agentStore.MIN_WIDTH), agentStore.MAX_WIDTH))
+  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, remToPx(agentStore.MIN_WIDTH)), remToPx(agentStore.MAX_WIDTH)))
   agentTransitions.setChatSurfaceTransition(true);
 }
 
@@ -246,7 +247,9 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
-  agentStore.setIsTeleportedToBody(props.meta.stickByDefault);
+  const isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true';
+
+  agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   await agentStore.fetchSessionsList();
 });
 

package/dist/custom/ConversationArea.vue

@@ -24,7 +24,7 @@
     :threshold="10"
     behavior="smooth"
     :style="{ 
-      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+      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
@@ -37,9 +37,8 @@
       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)"
+        v-for="(part, index) in getParts(message)"
         :key="part.type"
       >
         <Message
@@ -52,6 +51,7 @@
           @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' -->
@@ -154,27 +154,39 @@ const formatToolCallTextPart = ((part: IPart, currentMessage: IMessage) => {
   return null;  
 });
 
-const groupToolCallParts = (message: IMessage) => {
-  const groupedParts = [];
-  let currentToolName = 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(!part?.toolInfo) {
+    if ( index < currentPartIndexInFormatedParts - 1 ) {
       continue;
     }
-    if (part.toolInfo.toolName === currentToolName) {
-      groupedParts[groupedParts.length - 1].groupedTools.push(part);
+    if(!part || !part.toolInfo) {
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    groupedParts.push({
-      title: currentToolName,
-      groupedTools: [part]
-    });
+    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;
 }

package/dist/custom/ToolsGroup.vue

@@ -15,7 +15,7 @@
         </div>
       </transition>
     </div>
-    <ToolRenderer v-else :data="group.groupedTools[0]" />
+    <ToolRenderer v-else-if="group.groupedTools.length > 0" :data="group.groupedTools[0]" />
   </template> 
 
 </template>

package/dist/custom/composables/useAgentStore.ts

@@ -8,6 +8,7 @@ import { DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 import { useAgentTransitions } from './useAgentTransitions';
 import { useWindowSize } from '@vueuse/core';
+import { remToPx, pxToRem } from '../utils';
 
 type AgentMode = {
   name: string;
@@ -19,9 +20,9 @@ const PLACEHOLDER_DELETING_DELAY_MS = 35;
 const PLACEHOLDER_HOLD_DELAY_MS = 3000;
 
 export const useAgentStore = defineStore('agent', () => {
-  const DEFAULT_CHAT_WIDTH = 600;
-  const MAX_WIDTH = 800;
-  const MIN_WIDTH = 382; //w-96
+  const DEFAULT_CHAT_WIDTH = 30;
+  const MAX_WIDTH = 60;
+  const MIN_WIDTH = 25
   const agentTransitions = useAgentTransitions();
 
   const activeSessionId = ref<string | null>(null);
@@ -71,6 +72,9 @@ export const useAgentStore = defineStore('agent', () => {
   })
   watch(chatWidth, (newVal: number) => {
     setLocalStorageItem('chatWidth', newVal.toString());
+    if (!isFullScreen.value) {
+      setLocalStorageItem('chatWidthBeforeFullScreen', newVal.toString());
+    }
   })
   watch(activeSessionId, (newVal: string | null) => {
     if (newVal) {
@@ -90,14 +94,14 @@ export const useAgentStore = defineStore('agent', () => {
   onMounted(() => {
     const chatWidthBeforeFullScreen = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || '0', 10);
     if (chatWidthBeforeFullScreen) {
-      chatWidth.value = chatWidthBeforeFullScreen;
+      setChatWidth(remToPx(chatWidthBeforeFullScreen));
     } else {
       const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
       if (savedChatWidth) {
         if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
-          chatWidth.value = DEFAULT_CHAT_WIDTH;
+          setChatWidth(remToPx(DEFAULT_CHAT_WIDTH));
         } else {
-          chatWidth.value = savedChatWidth;
+          setChatWidth(remToPx(savedChatWidth));
         }
       }
     }
@@ -110,7 +114,7 @@ export const useAgentStore = defineStore('agent', () => {
       isChatOpen.value = getLocalStorageItem('isChatOpen') === 'true';
     }
     if (coreStore.isMobile) {
-      chatWidth.value = window.innerWidth;
+      setChatWidth(window.innerWidth);
     }
     appRoot.value = document.getElementById('app');
     header.value = document.getElementById('af-header-nav');
@@ -135,23 +139,24 @@ export const useAgentStore = defineStore('agent', () => {
       const isTeleportedBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
       agentTransitions.setAppRootTransition(true);
       setIsTeleportedToBody(isTeleportedBeforeFullScreen);
-      setChatWidth(lastChatWidth, false);
+      setChatWidth(remToPx(lastChatWidth), false);
       setTimeout(() => agentTransitions.setAppRootTransition(false), agentTransitions.TRANSITION_DURATION);
     }
   }
 
+  //takes on input width in pixels, converts to rem and sets chat width
   function setChatWidth(width: number, blockTransition = true) {
     if (blockTransition) {
       agentTransitions.setAppRootTransition(true);
     }
-    chatWidth.value = width;
+    chatWidth.value = pxToRem(width);
 
   }
   watch([isTeleportedToBody, isChatOpen, chatWidth], ([newIsTeleportedToBody, newIsChatOpen, newChatWidth]: [boolean, boolean, number]) => {
     if (appRoot.value && header.value) {
       if (newIsTeleportedToBody && newIsChatOpen) {
-        appRoot.value.style.paddingRight = `${chatWidth.value}px`;
-        header.value.style.paddingRight = `${chatWidth.value}px`;
+        appRoot.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
+        header.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
       } else {
         appRoot.value.style.paddingRight = '';
         header.value.style.paddingRight = '';
@@ -572,5 +577,6 @@ export const useAgentStore = defineStore('agent', () => {
     DEFAULT_CHAT_WIDTH,
     MAX_WIDTH,
     MIN_WIDTH,
+    getLocalStorageItem
   }
 })

package/dist/custom/utils.ts

@@ -0,0 +1,9 @@
+export function remToPx(rem: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return rem * rootFontSize;
+}
+
+export function pxToRem(px: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return px / rootFontSize;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/agent",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",