fix: Dramatically better auto scroll

app/pages/agent/[id]/topic/[topicId].vue

@@ -147,19 +147,17 @@ const handleDelete = async (rootMessage: Message) => {
     }
 }
 
-const handleResize = () => {
-    const el = chatPaneWrapper.value;
-    if (!el) return;
+const { scrollToBottom, isAtBottom } = useAutoScroll(chatPaneWrapper);
 
-    const atBottom = (el.scrollHeight - el.scrollTop - el.clientHeight) <= 80;
-    if (!atBottom) return;
+const handleResize = () => {
+    if (!isAtBottom()) return;
 
     nextTick().then(() => {
         requestAnimationFrame(() => {
             scrollToBottom('instant');
         });
     });
-}
+};
 
 const activeGeneration = computed(() => {
     if (topic.value === null) return null;
@@ -167,8 +165,6 @@ const activeGeneration = computed(() => {
     return generations?.find((generation) => generation?.status === 'pending') ?? null;
 });
 
-const { scrollToBottom } = useAutoScroll(chatPaneWrapper);
-
 addShortcut(['ctrl', 'alt', 'n'], (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -328,8 +324,8 @@ console.log("full page render took", Date.now() - rootStart);
                 <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
                     <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
                         :loading="activeGeneration !== null" :allow-manual-role="true" :agent="agent"
-                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @add-message="handleAddMessage" @cancel="handleCancel"
-                        @resize="handleResize" />
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage"
+                        @add-message="handleAddMessage" @cancel="handleCancel" @resize="handleResize" />
                 </div>
             </div>
         </div>