@adminforth/agent 2.2.0 → 2.2.1

package/dist/custom/CustomAutoScrollContainer.vue

@@ -24,11 +24,13 @@ const props = withDefaults(defineProps<{
   wrapperStyle?: Record<string, string>
   contentStyle?: Record<string, string>
   scrollBarAutoHide?: boolean
+  scrollToBottomOnMount?: boolean
 }>(), {
   enabled: true,
   threshold: 50,
   behavior: 'instant',
-  scrollBarAutoHide: true
+  scrollBarAutoHide: true,
+  scrollToBottomOnMount: true
 })
 
 const containerRef = ref<HTMLDivElement | null>(null)
@@ -72,7 +74,7 @@ onMounted(() => {
       scrollParams.value.scrollTop = containerRef.value.scrollEl.scrollTop
       scrollParams.value.scrollHeight = containerRef.value.scrollEl.scrollHeight
       scrollParams.value.clientHeight = containerRef.value.scrollEl.clientHeight
-      if (props.enabled && !isUserScrolledUp.value) {
+      if (!isUserScrolledUp.value && props.scrollToBottomOnMount) {
         scrollToBottom()
       }
     })
@@ -102,6 +104,7 @@ function isNearBottom(customThreshold?: number): boolean {
 }
 
 function scrollToBottom(force = false): void {
+  console.log('scrollToBottom called with force:', force)
   const container = containerRef.value?.scrollEl
   if (!container) return
   

package/dist/custom/conversation_area/ConversationArea.vue

@@ -11,7 +11,7 @@
   <div ref="chatContainerRef" class="relative flex-1 min-h-0 overflow-hidden" @click="recalculateScroll()">
     <CustomAutoScrollContainer
       v-if="showScrollContainer"
-      :enabled="!showScrollToBottomButton" 
+      :enabled="false" 
       class="relative h-full flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
       ref="scrollContainer"
       :threshold="THRESHOLD_TO_SHOW_BUTTON"
@@ -53,27 +53,49 @@
       </div>
       <div v-if="showBottomSpacer" class="w-full" :style="{ height: spacerHeight + 'px' }"></div>
     </CustomAutoScrollContainer>
-    <button @click="scrollContainer.scrollToBottom();">
-      <IconArrowDownOutline 
-        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 bg-lightPrimary/20 dark:bg-darkPrimary/10
-          border border-lightPrimary dark:border-darkPrimary text-lightPrimary dark:text-darkPrimary p-2 w-10 h-10
-          rounded-full transition-opacity duration-100 ease-in backdrop-blur-sm" 
-        :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-        :disabled="!showScrollToBottomButton"
-      />
-    </button>
+    <Transition
+      enter-active-class="transition-all duration-250 ease-out"
+      enter-from-class="opacity-0 translate-y-3 scale-90"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 translate-y-3 scale-90"
+    >
+      <button 
+        v-if="showScrollToBottomButton" 
+        @click="scrollContainer.scrollToBottom();"
+        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 
+          bg-lightPrimary/20 dark:bg-darkPrimary/10
+          border border-lightPrimary dark:border-darkPrimary 
+          text-lightPrimary dark:text-darkPrimary 
+          backdrop-blur-sm rounded-full
+          w-10 h-10 flex items-center justify-center gap-0.5"
+        :class="{ 'w-12 h-8': showAnimationInScrollToBottomButton }"
+      >
+        <IconArrowDownOutline 
+          v-if="!showAnimationInScrollToBottomButton"
+          class="p-2 w-10 h-10 transition-opacity duration-100 ease-in " 
+          :disabled="!showScrollToBottomButton"
+        />
+        <ThreeDotsAnimation 
+          v-else
+          :disabled="!showScrollToBottomButton"
+        />
+      </button>
+    </Transition>
   </div>
 </template>
 
 
 <script setup lang="ts">
 import type { IMessage } from '../types';
-import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent } from 'vue';
+import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent, computed } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
 import { useAgentTransitions } from '../composables/useAgentTransitions';
 import MessageRenderer from './MessageRenderer.vue';
+import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
 
 const CustomAutoScrollContainer = defineAsyncComponent(() => import('../CustomAutoScrollContainer.vue'));
 
@@ -114,6 +136,10 @@ let updateSpacerFrameId: number | null = null;
 let pendingSpacerUpdate: Promise<void> | null = null;
 let spacerUpdateQueued = false;
 
+const showAnimationInScrollToBottomButton = computed(() => {
+  return agentStore.isResponseInProgress && showScrollToBottomButton.value;
+});
+
 onMounted(async () => {
   messageResizeObserver = new ResizeObserver(() => {
     scheduleSpacerHeightUpdate();
@@ -225,11 +251,11 @@ function scheduleSpacerHeightUpdate() {
       pendingSpacerUpdate = null;
 
       // Auto-scroll to bottom if response generation is in progress
-      if (agentStore.isResponseInProgress) {
-        nextTick(() => {
-          scrollContainer.value?.scrollToBottom();
-        });
-      }
+      // if (agentStore.isResponseInProgress) {
+      //   nextTick(() => {
+      //     scrollContainer.value?.scrollToBottom();
+      //   });
+      // }
 
       if (spacerUpdateQueued) {
         scheduleSpacerHeightUpdate();

package/dist/custom/conversation_area/ThreeDotsAnimation.vue

@@ -12,18 +12,18 @@
 
   .bounce-dot2 {
     animation: bounce 1.5s infinite;
-    animation-delay: 0.1s;
+    animation-delay: 0.2s;
   }
 
   .bounce-dot3 {
     animation: bounce 1.5s infinite;
-    animation-delay: 0.2s;
+    animation-delay: 0.4s;
   }
 
   @keyframes bounce {
     0%, 100% {
       transform: translateY(20%);
-      opacity: 0.3;
+      opacity: 0.4;
       animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
     }
     50% {

package/package.json

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