@adminforth/agent 1.26.3 → 1.26.5

package/build.log

@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 206,143 bytes  received 562 bytes  413,410.00 bytes/sec
-total size is 203,829  speedup is 0.99
+sent 207,297 bytes  received 562 bytes  415,718.00 bytes/sec
+total size is 204,983  speedup is 0.99

package/custom/ChatSurface.vue

@@ -106,13 +106,13 @@
               transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
             }"            
           >
-            <div class="w-full border rounded-lg pb-8">
+            <div class="w-full border rounded-lg pb-8 dark:bg-gray-700">
               <textarea
                 v-model="agentStore.userMessageInput"
                 ref="textInput"
                 @input="autoResize"
                 :class="[
-                  'min-h-12 px-4 pt-4  w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+                  'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
                 ]"
                 :placeholder="agentStore.userMessagePlaceholder"
                 @keydown.enter.exact.prevent="sendMessage"

package/custom/conversation_area/ConversationArea.vue

@@ -91,6 +91,23 @@ const showScrollContainer = ref(true);
 const chatContainerRef = ref<HTMLElement | null>(null);
 
 const messagesRefs = ref<Array<HTMLElement | null>>([]);
+
+
+/*
+* Whenever user sends a message, it adds a bottom spacer, that takes the remaining height
+* without last user and last agent message. 
+* 
+* On send message, happens the following logic: 
+* 1) showBottomSpacer is set to true
+* 2) useWaitingForHeight is set to true and in 1000s set back to false
+*   Why do we do this?
+*   - When we want to read height of last user message, incremark shows text with some small delay
+*   - so when we read height of last user message, we actully getting height of the box without text ~18px
+*   - so for the initial period while useWaitingForHeight is true, we are waiting for real height to be bigger than 18px
+*   - and then we can read in normally, until new message is sent, then we need to wait again
+* 3) updateSpacerHeight is called, which calculates the height for spacer based on scroll container height and messages height
+* 4) Spacer moves text up  
+*/
 const showBottomSpacer = ref(false);
 const spacerHeight = ref(0);
 const MASK_HEIGHT = 20;

package/custom/conversation_area/ProcessingTimeline.vue

@@ -18,15 +18,16 @@
         behavior="smooth"
         v-if="ToolOrReasoningParts.length > 0" 
         v-show="isExpanded"
+        :threshold="5"
         :wrapperStyle="{
           marginRight: '8rem',
         }"
       >
-        <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
-          <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
+        <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 :toolGroup="groupToolCallParts(message, part)" />
-          </li>      
+            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
+          </template>
         </ol>
       </CustomAutoScrollContainer>
     </transition>

package/custom/conversation_area/ReasoningRenderer.vue

@@ -1,33 +1,35 @@
 <template>
-  <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-    <div class="w-5 h-5 rounded-full flex items-center justify-center">
-      <IconBrainOutline class="w-4 h-4" />
-    </div>
-  </span>
-  <h3 
-    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-    @click="isExpanded = !isExpanded"
-  >
-    <span class="font-semibold">{{ reasoningTitle }}</span>
-    <ThreeDotsAnimation v-if="isStreaming"/>
-    <IconAngleDownOutline           
-      :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-      class="transition-transform duration-200"
-    />
-  </h3>
-  <transition name="expand">
-    <CustomAutoScrollContainer
-      v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
-      :wrapperStyle="{
-        marginRight: '8rem',
-      }"
-      :enabled="isStreaming"
+  <li class="mb-6 ms-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 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
+      <div class="w-5 h-5 rounded-full flex items-center justify-center">
+        <IconBrainOutline class="w-4 h-4" />
+      </div>
+    </span>
+    <h3 
+      class=" flex items-center mb-1 text-sm ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
+      @click="isExpanded = !isExpanded"
     >
-      <IncremarkContent
-        :content="reasoningText"
+      <span class="font-semibold">{{ reasoningTitle }}</span>
+      <ThreeDotsAnimation v-if="isStreaming"/>
+      <IconAngleDownOutline           
+        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
+        class="transition-transform duration-200"
       />
-    </CustomAutoScrollContainer>
-  </transition>    
+    </h3>
+    <transition name="expand">
+      <CustomAutoScrollContainer
+        v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
+        :wrapperStyle="{
+          marginRight: '8rem',
+        }"
+        :enabled="isStreaming"
+      >
+        <IncremarkContent
+          :content="reasoningText"
+        />
+      </CustomAutoScrollContainer>
+    </transition>    
+  </li>
 </template>
 
 
@@ -67,7 +69,7 @@ watch(() => props.state, (newValue: IPart['state']) => {
 <style scoped>
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.3s ease;
+  transition: all 300ms ease;
 }
 
 .expand-enter-from,

package/custom/conversation_area/ToolsGroup.vue

@@ -1,20 +1,22 @@
 <template >
   <template v-if="toolGroup.length > 0">
-    <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-      <div class="w-5 h-5 rounded-full flex items-center justify-center">
-        <IconWrenchSolid class="w-4 h-4" />
+    <li class="mb-6 ms-2 z-50">
+      <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
+        <div class="w-5 h-5 rounded-full flex items-center justify-center">
+          <IconWrenchSolid class="w-4 h-4" />
+        </div>
+      </span>
+      <h3 
+        class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
+      >
+        <span class="font-semibold select-none ">Call tools</span>
+      </h3>
+      <div class="flex flex-wrap">
+        <template v-for="group in props.toolGroup" :key="group.title">
+          <ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
+        </template> 
       </div>
-    </span>
-    <h3 
-      class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-    >
-      <span class="font-semibold select-none ">Call tools</span>
-    </h3>
-    <div class="flex flex-wrap">
-      <template v-for="group in props.toolGroup" :key="group.title">
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
-      </template> 
-    </div>
+    </li>
   </template>
 </template>
 

package/dist/custom/ChatSurface.vue

@@ -106,13 +106,13 @@
               transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
             }"            
           >
-            <div class="w-full border rounded-lg pb-8">
+            <div class="w-full border rounded-lg pb-8 dark:bg-gray-700">
               <textarea
                 v-model="agentStore.userMessageInput"
                 ref="textInput"
                 @input="autoResize"
                 :class="[
-                  'min-h-12 px-4 pt-4  w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+                  'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
                 ]"
                 :placeholder="agentStore.userMessagePlaceholder"
                 @keydown.enter.exact.prevent="sendMessage"

package/dist/custom/conversation_area/ConversationArea.vue

@@ -91,6 +91,23 @@ const showScrollContainer = ref(true);
 const chatContainerRef = ref<HTMLElement | null>(null);
 
 const messagesRefs = ref<Array<HTMLElement | null>>([]);
+
+
+/*
+* Whenever user sends a message, it adds a bottom spacer, that takes the remaining height
+* without last user and last agent message. 
+* 
+* On send message, happens the following logic: 
+* 1) showBottomSpacer is set to true
+* 2) useWaitingForHeight is set to true and in 1000s set back to false
+*   Why do we do this?
+*   - When we want to read height of last user message, incremark shows text with some small delay
+*   - so when we read height of last user message, we actully getting height of the box without text ~18px
+*   - so for the initial period while useWaitingForHeight is true, we are waiting for real height to be bigger than 18px
+*   - and then we can read in normally, until new message is sent, then we need to wait again
+* 3) updateSpacerHeight is called, which calculates the height for spacer based on scroll container height and messages height
+* 4) Spacer moves text up  
+*/
 const showBottomSpacer = ref(false);
 const spacerHeight = ref(0);
 const MASK_HEIGHT = 20;

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -18,15 +18,16 @@
         behavior="smooth"
         v-if="ToolOrReasoningParts.length > 0" 
         v-show="isExpanded"
+        :threshold="5"
         :wrapperStyle="{
           marginRight: '8rem',
         }"
       >
-        <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
-          <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
+        <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 :toolGroup="groupToolCallParts(message, part)" />
-          </li>      
+            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
+          </template>
         </ol>
       </CustomAutoScrollContainer>
     </transition>

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -1,33 +1,35 @@
 <template>
-  <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-    <div class="w-5 h-5 rounded-full flex items-center justify-center">
-      <IconBrainOutline class="w-4 h-4" />
-    </div>
-  </span>
-  <h3 
-    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-    @click="isExpanded = !isExpanded"
-  >
-    <span class="font-semibold">{{ reasoningTitle }}</span>
-    <ThreeDotsAnimation v-if="isStreaming"/>
-    <IconAngleDownOutline           
-      :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-      class="transition-transform duration-200"
-    />
-  </h3>
-  <transition name="expand">
-    <CustomAutoScrollContainer
-      v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
-      :wrapperStyle="{
-        marginRight: '8rem',
-      }"
-      :enabled="isStreaming"
+  <li class="mb-6 ms-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 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
+      <div class="w-5 h-5 rounded-full flex items-center justify-center">
+        <IconBrainOutline class="w-4 h-4" />
+      </div>
+    </span>
+    <h3 
+      class=" flex items-center mb-1 text-sm ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
+      @click="isExpanded = !isExpanded"
     >
-      <IncremarkContent
-        :content="reasoningText"
+      <span class="font-semibold">{{ reasoningTitle }}</span>
+      <ThreeDotsAnimation v-if="isStreaming"/>
+      <IconAngleDownOutline           
+        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
+        class="transition-transform duration-200"
       />
-    </CustomAutoScrollContainer>
-  </transition>    
+    </h3>
+    <transition name="expand">
+      <CustomAutoScrollContainer
+        v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
+        :wrapperStyle="{
+          marginRight: '8rem',
+        }"
+        :enabled="isStreaming"
+      >
+        <IncremarkContent
+          :content="reasoningText"
+        />
+      </CustomAutoScrollContainer>
+    </transition>    
+  </li>
 </template>
 
 
@@ -67,7 +69,7 @@ watch(() => props.state, (newValue: IPart['state']) => {
 <style scoped>
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.3s ease;
+  transition: all 300ms ease;
 }
 
 .expand-enter-from,

package/dist/custom/conversation_area/ToolsGroup.vue

@@ -1,20 +1,22 @@
 <template >
   <template v-if="toolGroup.length > 0">
-    <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-      <div class="w-5 h-5 rounded-full flex items-center justify-center">
-        <IconWrenchSolid class="w-4 h-4" />
+    <li class="mb-6 ms-2 z-50">
+      <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
+        <div class="w-5 h-5 rounded-full flex items-center justify-center">
+          <IconWrenchSolid class="w-4 h-4" />
+        </div>
+      </span>
+      <h3 
+        class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
+      >
+        <span class="font-semibold select-none ">Call tools</span>
+      </h3>
+      <div class="flex flex-wrap">
+        <template v-for="group in props.toolGroup" :key="group.title">
+          <ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
+        </template> 
       </div>
-    </span>
-    <h3 
-      class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-    >
-      <span class="font-semibold select-none ">Call tools</span>
-    </h3>
-    <div class="flex flex-wrap">
-      <template v-for="group in props.toolGroup" :key="group.title">
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
-      </template> 
-    </div>
+    </li>
   </template>
 </template>
 

package/package.json

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