@adminforth/agent 2.2.1 → 2.2.3

package/dist/custom/CustomAutoScrollContainer.vue

@@ -25,12 +25,14 @@ const props = withDefaults(defineProps<{
   contentStyle?: Record<string, string>
   scrollBarAutoHide?: boolean
   scrollToBottomOnMount?: boolean
+  debugMode?: boolean
 }>(), {
   enabled: true,
   threshold: 50,
   behavior: 'instant',
   scrollBarAutoHide: true,
-  scrollToBottomOnMount: true
+  scrollToBottomOnMount: true,
+  debugMode: false
 })
 
 const containerRef = ref<HTMLDivElement | null>(null)
@@ -104,11 +106,12 @@ function isNearBottom(customThreshold?: number): boolean {
 }
 
 function scrollToBottom(force = false): void {
-  console.log('scrollToBottom called with force:', force)
+  if (props.debugMode) console.log('scrollToBottom called with force:', force)
   const container = containerRef.value?.scrollEl
   if (!container) return
   
   if (isUserScrolledUp.value && !force) return
+  if (props.debugMode) console.log('Scrolling to bottom...:', container.scrollHeight)
   container.scrollTo({
     top: container.scrollHeight,
     behavior: props.behavior

package/dist/custom/conversation_area/ConversationArea.vue

@@ -208,7 +208,17 @@ function getHeightOfLastUserMessage() {
 }
 
 function getHeightOfLastAgentMessage() {
-  return getLastMessageElement('assistant')?.clientHeight ?? 0;
+  const lastUserIndex = props.messages.findLastIndex((message: IMessage) => message.role === 'user');
+  const lastAgentIndex = props.messages.findLastIndex((message: IMessage) => message.role === 'assistant');
+  // Only reserve spacer space for the current turn's answer, i.e. an assistant message that comes
+  // after the last user message. Right after a send the "Thinking" placeholder isn't pushed yet, so
+  // findLastIndex would return the previous turn's answer (which sits above the just-sent user
+  // message). Subtracting its height shrinks the spacer, making scrollToBottom stop short — and once
+  // the real placeholder arrives the spacer grows and the true bottom drops below where we scrolled.
+  if (lastAgentIndex <= lastUserIndex) {
+    return 0;
+  }
+  return messagesRefs.value[lastAgentIndex]?.clientHeight ?? 0;
 }
 
 function getScrollClientHeight() {
@@ -221,15 +231,14 @@ async function updateSpacerHeight() {
   }
 
   const clientHeight = getScrollClientHeight();
-
   if (!clientHeight) {
     return;
   }
 
   const lastUserMessageHeight = getHeightOfLastUserMessage();
   const lastAgentMessageHeight = getHeightOfLastAgentMessage();
-
-  spacerHeight.value = Math.max(0, clientHeight - (lastUserMessageHeight + MASK_HEIGHT + lastAgentMessageHeight));
+  const newSpacerHeight = Math.max(0, clientHeight - (lastUserMessageHeight + MASK_HEIGHT + lastAgentMessageHeight));
+  spacerHeight.value = newSpacerHeight;
 }
 
 function scheduleSpacerHeightUpdate() {
@@ -310,8 +319,9 @@ async function handleSendMessage() {
 
   if (clientHeight) {
     showBottomSpacer.value = true;
+    await nextTick(); // render the just-sent user message + spacer before measuring their heights
     await updateSpacerHeight();
-    await nextTick();
+    await nextTick(); // apply the computed spacer height before scrolling
     scrollContainer.value?.scrollToBottom();
   }
 }

package/dist/custom/conversation_area/TextRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="flex rounded-xl border px-4 border-gray-200 dark:border-gray-700 min-w-0"
+    class="flex items-center justify-center rounded-xl border px-6 border-gray-200 dark:border-gray-700 min-w-0"
     @click="handleMarkdownLinkClick"
     :class="[
-      hasVegaLite ? 'w-full my-2' : 'm-2',
+      hasVegaLite ? 'w-full my-2' : '',
       props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4' 
         : 'border-none self-start max-w-full'
     ]"

package/package.json

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