@adminforth/agent 1.25.0 → 1.26.1

package/build.log

@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 202,067 bytes  received 566 bytes  405,266.00 bytes/sec
-total size is 199,749  speedup is 0.99
+sent 206,263 bytes  received 562 bytes  413,650.00 bytes/sec
+total size is 203,953  speedup is 0.99

package/custom/ChatSurface.vue

@@ -93,7 +93,8 @@
         <div 
           class="relative flex-1 min-h-0 flex flex-col overflow-hidden"
         >
-          <ConversationArea 
+          <ConversationArea
+            ref="conversationArea" 
             v-if="agentStore.isChatOpen"
             :messages="agentStore.chatMessages"
           />
@@ -201,6 +202,7 @@ const props = defineProps<{
 const chatSurface = useTemplateRef('chatSurface');
 const textInput = useTemplateRef('textInput');
 const modeMenu = useTemplateRef('modeMenu');
+const conversationArea = useTemplateRef('conversationArea');
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
@@ -254,7 +256,6 @@ onMounted(async () => {
     agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   }
   await agentStore.fetchSessionsList();
-  agentStore.setFullScreen(true);
 });
 
 function autoResize() {
@@ -286,6 +287,7 @@ async function sendMessage() {
   isModeMenuOpen.value = false;
   await agentStore.sendMessage();
   autoResize();
+  conversationArea.value?.handleSendMessage();
 }
 
 </script>

package/custom/CustomAutoScrollContainer.vue

@@ -2,7 +2,7 @@
   <CustomScrollbar
     ref="containerRef"
     class="auto-scroll-container mask-y"
-    :wrapperStyle = "wrapperStyle"
+    :wrapperStyle = "wrapperStyle" 
     :contentStyle = "contentStyle"
     @scroll="handleScroll"
   >

package/custom/conversation_area/ConversationArea.vue

@@ -34,9 +34,10 @@
     > 
 
       <div 
-        v-for="(message, index) in props.messages" :key="message.id"
+        v-for="(message, index) in props.messages" :key="index"
         class="flex flex-col w-full mt-2"
         :class="message.role === 'user' ? 'self-end' : 'self-start'"
+        ref="messagesRefs"
       >
         <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
       </div>
@@ -50,7 +51,7 @@
         <p>{{ $t('Start the conversation') }}</p>
         <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
       </div>
-      <div></div>
+      <div v-if="showBottomSpacer" class="w-full" :style="{ height: spacerHeight + 'px' }"></div>
     </CustomAutoScrollContainer>
     <button @click="scrollContainer.scrollToBottom();">
       <IconArrowDownOutline 
@@ -64,8 +65,8 @@
 
 
 <script setup lang="ts">
-import type { IMessage, IPart } from '../types';
-import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
+import type { IMessage } from '../types';
+import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
@@ -77,18 +78,140 @@ const props = defineProps<{
   messages: IMessage[]
 }>();
 
+defineExpose({
+  handleSendMessage
+});
+
 const scrollContainer = useTemplateRef('scrollContainer');
 const showScrollToBottomButton = ref(false);
-const innerScrollContainerRef = ref(null);
+const innerScrollContainerRef = ref<HTMLElement | null>(null);
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const showScrollContainer = ref(true);
-const chatContainerRef = ref(null);
+const chatContainerRef = ref<HTMLElement | null>(null);
 
-const scrollHeight = computed(() => {
-  return scrollContainer.value ? scrollContainer.value.scrollParams.scrollHeight : 0;
+const messagesRefs = ref<Array<HTMLElement | null>>([]);
+const showBottomSpacer = ref(false);
+const spacerHeight = ref(0);
+const MASK_HEIGHT = 20;
+const EMPTY_MESSAGE_HEIGHT = 18;
+let messageResizeObserver: ResizeObserver | null = null;
+let observedLastUserMessageElement: HTMLElement | null = null;
+let observedLastAgentMessageElement: HTMLElement | null = null;
+
+function resetSpacer() {
+  showBottomSpacer.value = false;
+  spacerHeight.value = 0;
+}
+
+watch(() => agentStore.activeSessionId, () => {
+  resetSpacer();
 });
 
+function getLastMessageElement(role: 'user' | 'assistant') {
+  const lastMessageIndex = props.messages.findLastIndex((message: IMessage) => message.role === role);
+  return messagesRefs.value[lastMessageIndex] ?? null;
+}
+
+function getHeightOfLastUserMessage() {
+  return getLastMessageElement('user')?.clientHeight ?? 0;
+}
+
+function getHeightOfLastAgentMessage() {
+  return getLastMessageElement('assistant')?.clientHeight ?? 0;
+}
+
+function getScrollClientHeight() {
+  return scrollContainer.value?.container.scrollEl.clientHeight ?? scrollContainer.value?.scrollParams.clientHeight ?? 0;
+}
+
+async function waitForRealHeight(role: 'user' | 'assistant'): Promise<number> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      const height = role === 'user' ? getHeightOfLastUserMessage() : getHeightOfLastAgentMessage();
+
+      if (height > EMPTY_MESSAGE_HEIGHT) {
+        clearInterval(interval);
+        resolve(height);
+      }
+    }, 50);
+  });
+}
+
+const useWaitingForHeight = ref(false);
+async function updateSpacerHeight() {
+  if (!showBottomSpacer.value) {
+    return;
+  }
+
+  const clientHeight = getScrollClientHeight();
+
+  if (!clientHeight) {
+    return;
+  }
+
+  const lastUserMessageHeight = useWaitingForHeight.value ? await waitForRealHeight('user') : getHeightOfLastUserMessage();
+  const lastAgentMessageHeight = useWaitingForHeight.value ? await waitForRealHeight('assistant') : getHeightOfLastAgentMessage();
+
+  spacerHeight.value = Math.max(0, clientHeight - (lastUserMessageHeight + MASK_HEIGHT + lastAgentMessageHeight));
+}
+
+function stopObservingLastMessages() {
+  if (!messageResizeObserver) {
+    return;
+  }
+
+  if (observedLastUserMessageElement) {
+    messageResizeObserver.unobserve(observedLastUserMessageElement);
+    observedLastUserMessageElement = null;
+  }
+
+  if (observedLastAgentMessageElement) {
+    messageResizeObserver.unobserve(observedLastAgentMessageElement);
+    observedLastAgentMessageElement = null;
+  }
+}
+
+function observeLastMessages() {
+  if (!messageResizeObserver) {
+    return;
+  }
+
+  stopObservingLastMessages();
+
+  observedLastUserMessageElement = getLastMessageElement('user');
+  observedLastAgentMessageElement = getLastMessageElement('assistant');
+
+  if (observedLastUserMessageElement) {
+    messageResizeObserver.observe(observedLastUserMessageElement);
+  }
+
+  if (observedLastAgentMessageElement) {
+    messageResizeObserver.observe(observedLastAgentMessageElement);
+  }
+}
+
+async function refreshSpacerTracking() {
+  await nextTick();
+  observeLastMessages();
+  await updateSpacerHeight();
+}
+
+async function handleSendMessage() {
+  const clientHeight = getScrollClientHeight();
+
+  if (clientHeight) {
+    showBottomSpacer.value = true;
+    useWaitingForHeight.value = true;
+    setTimeout(() => {
+      useWaitingForHeight.value = false;
+    }, 1000);
+    await updateSpacerHeight();
+    await nextTick();
+    scrollContainer.value?.scrollToBottom();
+  }
+}
+
 function recalculateScroll() {
   if (scrollContainer.value) {
     scrollContainer.value.handleScroll(false);
@@ -101,26 +224,44 @@ watch(() => agentStore.activeSessionId, async () => {
   showScrollContainer.value = false;
   await nextTick();
   showScrollContainer.value = true;
-  await nextTick();
+  await refreshSpacerTracking();
   recalculateScroll();
 });
 
+watch(() => props.messages.length, async () => {
+  await refreshSpacerTracking();
+});
+
 onMounted(async () => {
+  messageResizeObserver = new ResizeObserver(() => {
+    updateSpacerHeight();
+  });
+
   await import('@incremark/theme/styles.css')
   await agentStore.fetchPlaceholderMessages()
+  await refreshSpacerTracking();
 });
 
 onUnmounted(() => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  stopObservingLastMessages();
+  messageResizeObserver?.disconnect();
   agentStore.stopPlaceholderAnimation();
 });
 
-watch(scrollContainer, () => {
+watch(scrollContainer, async () => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
   if (scrollContainer.value) {
     innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
 
-    innerScrollContainerRef.value.addEventListener('scroll', () => {
-      recalculateScroll();
-    });
+    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
+    await refreshSpacerTracking();
   }
 })
 

package/custom/conversation_area/TextRenderer.vue

@@ -17,7 +17,7 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      Error occured
+      Error occurred
     </p>
   </div>
 </template>

package/custom/conversation_area/ToolRenderer.vue

@@ -29,7 +29,7 @@
           <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
         </p> -->
         <p class="break-all font-mono text-sm leading-5 text-nowrap">
-          {{ props.data?.toolInfo?.toolInfo }}
+          {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
         </p>
       </div>
       <IconAngleDownOutline

package/custom/types.ts

@@ -25,7 +25,6 @@ export interface IToolGroup {
 }
 
 export interface IMessage {
-  id: string;
   role: 'user' | 'assistant';
   metadata?: any,
   parts: IPart[];

package/dist/custom/ChatSurface.vue

@@ -93,7 +93,8 @@
         <div 
           class="relative flex-1 min-h-0 flex flex-col overflow-hidden"
         >
-          <ConversationArea 
+          <ConversationArea
+            ref="conversationArea" 
             v-if="agentStore.isChatOpen"
             :messages="agentStore.chatMessages"
           />
@@ -201,6 +202,7 @@ const props = defineProps<{
 const chatSurface = useTemplateRef('chatSurface');
 const textInput = useTemplateRef('textInput');
 const modeMenu = useTemplateRef('modeMenu');
+const conversationArea = useTemplateRef('conversationArea');
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
@@ -254,7 +256,6 @@ onMounted(async () => {
     agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   }
   await agentStore.fetchSessionsList();
-  agentStore.setFullScreen(true);
 });
 
 function autoResize() {
@@ -286,6 +287,7 @@ async function sendMessage() {
   isModeMenuOpen.value = false;
   await agentStore.sendMessage();
   autoResize();
+  conversationArea.value?.handleSendMessage();
 }
 
 </script>

package/dist/custom/CustomAutoScrollContainer.vue

@@ -2,7 +2,7 @@
   <CustomScrollbar
     ref="containerRef"
     class="auto-scroll-container mask-y"
-    :wrapperStyle = "wrapperStyle"
+    :wrapperStyle = "wrapperStyle" 
     :contentStyle = "contentStyle"
     @scroll="handleScroll"
   >

package/dist/custom/conversation_area/ConversationArea.vue

@@ -34,9 +34,10 @@
     > 
 
       <div 
-        v-for="(message, index) in props.messages" :key="message.id"
+        v-for="(message, index) in props.messages" :key="index"
         class="flex flex-col w-full mt-2"
         :class="message.role === 'user' ? 'self-end' : 'self-start'"
+        ref="messagesRefs"
       >
         <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
       </div>
@@ -50,7 +51,7 @@
         <p>{{ $t('Start the conversation') }}</p>
         <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
       </div>
-      <div></div>
+      <div v-if="showBottomSpacer" class="w-full" :style="{ height: spacerHeight + 'px' }"></div>
     </CustomAutoScrollContainer>
     <button @click="scrollContainer.scrollToBottom();">
       <IconArrowDownOutline 
@@ -64,8 +65,8 @@
 
 
 <script setup lang="ts">
-import type { IMessage, IPart } from '../types';
-import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
+import type { IMessage } from '../types';
+import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
@@ -77,18 +78,140 @@ const props = defineProps<{
   messages: IMessage[]
 }>();
 
+defineExpose({
+  handleSendMessage
+});
+
 const scrollContainer = useTemplateRef('scrollContainer');
 const showScrollToBottomButton = ref(false);
-const innerScrollContainerRef = ref(null);
+const innerScrollContainerRef = ref<HTMLElement | null>(null);
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const showScrollContainer = ref(true);
-const chatContainerRef = ref(null);
+const chatContainerRef = ref<HTMLElement | null>(null);
 
-const scrollHeight = computed(() => {
-  return scrollContainer.value ? scrollContainer.value.scrollParams.scrollHeight : 0;
+const messagesRefs = ref<Array<HTMLElement | null>>([]);
+const showBottomSpacer = ref(false);
+const spacerHeight = ref(0);
+const MASK_HEIGHT = 20;
+const EMPTY_MESSAGE_HEIGHT = 18;
+let messageResizeObserver: ResizeObserver | null = null;
+let observedLastUserMessageElement: HTMLElement | null = null;
+let observedLastAgentMessageElement: HTMLElement | null = null;
+
+function resetSpacer() {
+  showBottomSpacer.value = false;
+  spacerHeight.value = 0;
+}
+
+watch(() => agentStore.activeSessionId, () => {
+  resetSpacer();
 });
 
+function getLastMessageElement(role: 'user' | 'assistant') {
+  const lastMessageIndex = props.messages.findLastIndex((message: IMessage) => message.role === role);
+  return messagesRefs.value[lastMessageIndex] ?? null;
+}
+
+function getHeightOfLastUserMessage() {
+  return getLastMessageElement('user')?.clientHeight ?? 0;
+}
+
+function getHeightOfLastAgentMessage() {
+  return getLastMessageElement('assistant')?.clientHeight ?? 0;
+}
+
+function getScrollClientHeight() {
+  return scrollContainer.value?.container.scrollEl.clientHeight ?? scrollContainer.value?.scrollParams.clientHeight ?? 0;
+}
+
+async function waitForRealHeight(role: 'user' | 'assistant'): Promise<number> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      const height = role === 'user' ? getHeightOfLastUserMessage() : getHeightOfLastAgentMessage();
+
+      if (height > EMPTY_MESSAGE_HEIGHT) {
+        clearInterval(interval);
+        resolve(height);
+      }
+    }, 50);
+  });
+}
+
+const useWaitingForHeight = ref(false);
+async function updateSpacerHeight() {
+  if (!showBottomSpacer.value) {
+    return;
+  }
+
+  const clientHeight = getScrollClientHeight();
+
+  if (!clientHeight) {
+    return;
+  }
+
+  const lastUserMessageHeight = useWaitingForHeight.value ? await waitForRealHeight('user') : getHeightOfLastUserMessage();
+  const lastAgentMessageHeight = useWaitingForHeight.value ? await waitForRealHeight('assistant') : getHeightOfLastAgentMessage();
+
+  spacerHeight.value = Math.max(0, clientHeight - (lastUserMessageHeight + MASK_HEIGHT + lastAgentMessageHeight));
+}
+
+function stopObservingLastMessages() {
+  if (!messageResizeObserver) {
+    return;
+  }
+
+  if (observedLastUserMessageElement) {
+    messageResizeObserver.unobserve(observedLastUserMessageElement);
+    observedLastUserMessageElement = null;
+  }
+
+  if (observedLastAgentMessageElement) {
+    messageResizeObserver.unobserve(observedLastAgentMessageElement);
+    observedLastAgentMessageElement = null;
+  }
+}
+
+function observeLastMessages() {
+  if (!messageResizeObserver) {
+    return;
+  }
+
+  stopObservingLastMessages();
+
+  observedLastUserMessageElement = getLastMessageElement('user');
+  observedLastAgentMessageElement = getLastMessageElement('assistant');
+
+  if (observedLastUserMessageElement) {
+    messageResizeObserver.observe(observedLastUserMessageElement);
+  }
+
+  if (observedLastAgentMessageElement) {
+    messageResizeObserver.observe(observedLastAgentMessageElement);
+  }
+}
+
+async function refreshSpacerTracking() {
+  await nextTick();
+  observeLastMessages();
+  await updateSpacerHeight();
+}
+
+async function handleSendMessage() {
+  const clientHeight = getScrollClientHeight();
+
+  if (clientHeight) {
+    showBottomSpacer.value = true;
+    useWaitingForHeight.value = true;
+    setTimeout(() => {
+      useWaitingForHeight.value = false;
+    }, 1000);
+    await updateSpacerHeight();
+    await nextTick();
+    scrollContainer.value?.scrollToBottom();
+  }
+}
+
 function recalculateScroll() {
   if (scrollContainer.value) {
     scrollContainer.value.handleScroll(false);
@@ -101,26 +224,44 @@ watch(() => agentStore.activeSessionId, async () => {
   showScrollContainer.value = false;
   await nextTick();
   showScrollContainer.value = true;
-  await nextTick();
+  await refreshSpacerTracking();
   recalculateScroll();
 });
 
+watch(() => props.messages.length, async () => {
+  await refreshSpacerTracking();
+});
+
 onMounted(async () => {
+  messageResizeObserver = new ResizeObserver(() => {
+    updateSpacerHeight();
+  });
+
   await import('@incremark/theme/styles.css')
   await agentStore.fetchPlaceholderMessages()
+  await refreshSpacerTracking();
 });
 
 onUnmounted(() => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  stopObservingLastMessages();
+  messageResizeObserver?.disconnect();
   agentStore.stopPlaceholderAnimation();
 });
 
-watch(scrollContainer, () => {
+watch(scrollContainer, async () => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
   if (scrollContainer.value) {
     innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
 
-    innerScrollContainerRef.value.addEventListener('scroll', () => {
-      recalculateScroll();
-    });
+    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
+    await refreshSpacerTracking();
   }
 })
 

package/dist/custom/conversation_area/TextRenderer.vue

@@ -17,7 +17,7 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      Error occured
+      Error occurred
     </p>
   </div>
 </template>

package/dist/custom/conversation_area/ToolRenderer.vue

@@ -29,7 +29,7 @@
           <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
         </p> -->
         <p class="break-all font-mono text-sm leading-5 text-nowrap">
-          {{ props.data?.toolInfo?.toolInfo }}
+          {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
         </p>
       </div>
       <IconAngleDownOutline

package/dist/custom/types.ts

@@ -25,7 +25,6 @@ export interface IToolGroup {
 }
 
 export interface IMessage {
-  id: string;
   role: 'user' | 'assistant';
   metadata?: any,
   parts: IPart[];

package/package.json

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