@adminforth/agent 1.24.14 → 1.26.0

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/types.ts

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

package/dist/index.js

@@ -168,11 +168,6 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
         });
     }
     validateConfigAfterDiscover(adminforth, resourceConfig) {
-        this.apiBasedTools = buildApiBasedTools(adminforth);
-        for (const toolName of ALWAYS_AVAILABLE_API_TOOL_NAMES) {
-            assertRequiredApiTool(this.apiBasedTools, toolName);
-        }
-        assertRequiredApiTool(this.apiBasedTools, "update_record");
         this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth)
             .then((systemPrompt) => appendCustomSystemPrompt(systemPrompt, this.options.systemPrompt));
     }
@@ -208,7 +203,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
         server.endpoint({
             method: 'POST',
             path: `/agent/response`,
-            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, _raw_express_res }) {
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, query, headers, cookies, adminUser, response, requestUrl, _raw_express_res }) {
                 var _b, e_1, _c, _d;
                 var _e, _f, _g;
                 const res = _raw_express_res;
@@ -288,6 +283,12 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                     const selectedMode = (_g = this.options.modes.find((mode) => mode.name === body.mode)) !== null && _g !== void 0 ? _g : this.options.modes[0];
                     const { model, summaryModel, modelMiddleware } = yield this.getModeModels(selectedMode, maxTokens);
                     const systemPrompt = yield this.agentSystemPromptPromise;
+                    const apiBasedTools = buildApiBasedTools(this.adminforth);
+                    for (const toolName of ALWAYS_AVAILABLE_API_TOOL_NAMES) {
+                        assertRequiredApiTool(apiBasedTools, toolName);
+                    }
+                    assertRequiredApiTool(apiBasedTools, "update_record");
+                    this.apiBasedTools = apiBasedTools;
                     const stream = yield callAgent({
                         name: `adminforth-agent-${this.pluginInstanceId}`,
                         model,
@@ -300,10 +301,18 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                         ],
                         adminUser,
                         adminforth: this.adminforth,
-                        apiBasedTools: this.apiBasedTools,
+                        apiBasedTools,
                         customComponentsDir: this.adminforth.config.customization.customComponentsDir,
                         sessionId,
                         turnId,
+                        httpExtra: {
+                            body,
+                            query,
+                            headers,
+                            cookies,
+                            requestUrl,
+                            response,
+                        },
                         userTimeZone,
                         emitToolCallEvent,
                         sequenceDebugSink: sequenceDebugCollector,

package/index.ts

@@ -204,11 +204,6 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
   }
   
   validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    this.apiBasedTools = buildApiBasedTools(adminforth);
-    for (const toolName of ALWAYS_AVAILABLE_API_TOOL_NAMES) {
-      assertRequiredApiTool(this.apiBasedTools, toolName);
-    }
-    assertRequiredApiTool(this.apiBasedTools, "update_record");
     this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth)
       .then((systemPrompt) => appendCustomSystemPrompt(systemPrompt, this.options.systemPrompt));
   }
@@ -248,7 +243,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     server.endpoint({
       method: 'POST',
       path: `/agent/response`,
-      handler: async ({ body, adminUser, _raw_express_res }) => {
+      handler: async ({ body, query, headers, cookies, adminUser, response, requestUrl, _raw_express_res }) => {
         const res = _raw_express_res;
         const messageId = randomUUID();
         const prompt = body.message;
@@ -346,6 +341,12 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
           const { model, summaryModel, modelMiddleware } =
             await this.getModeModels(selectedMode, maxTokens);
           const systemPrompt = await this.agentSystemPromptPromise;
+          const apiBasedTools = buildApiBasedTools(this.adminforth);
+          for (const toolName of ALWAYS_AVAILABLE_API_TOOL_NAMES) {
+            assertRequiredApiTool(apiBasedTools, toolName);
+          }
+          assertRequiredApiTool(apiBasedTools, "update_record");
+          this.apiBasedTools = apiBasedTools;
           const stream = await callAgent({
             name: `adminforth-agent-${this.pluginInstanceId}`,
             model,
@@ -358,10 +359,18 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             ],
             adminUser,
             adminforth: this.adminforth,
-            apiBasedTools: this.apiBasedTools,
+            apiBasedTools,
             customComponentsDir: this.adminforth.config.customization.customComponentsDir,
             sessionId,
             turnId,
+            httpExtra: {
+              body,
+              query,
+              headers,
+              cookies,
+              requestUrl,
+              response,
+            },
             userTimeZone,
             emitToolCallEvent,
             sequenceDebugSink: sequenceDebugCollector,

package/package.json

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