bug fixes, and performance improvements, and drawer

app/components/Message/Agent/Reasoning.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { MessagePart } from '~/composables/useChat';
+import ReasoningBody from './ReasoningBody.vue';
 
 const props = defineProps<{
     part: Readonly<MessagePart>;
 }>();
 
 const reasoningOpen = ref(!props.part.finished);
+const bodyRef = ref<InstanceType<typeof ReasoningBody> | null>(null);
 
 watch(
     () => props.part.finished,
@@ -14,44 +16,14 @@ watch(
     },
 );
 
-const containerRef: Ref<HTMLDivElement | null> = ref(null);
-const scrollState = ref('middle');
-
-const { scrollToBottom } = useAutoScroll(containerRef);
-
-const handleScroll = () => {
-    if (!containerRef.value) return;
-
-    const container = containerRef.value;
-    const scrollTop = container.scrollTop;
-    const scrollHeight = container.scrollHeight;
-    const clientHeight = container.clientHeight;
-
-    const topThreshold = 0.02 * clientHeight;
-
-    if (scrollHeight <= clientHeight) {
-        // the container does not have enough content to scroll
-        scrollState.value = '';
-        return;
-    }
-
-    if (scrollTop <= topThreshold) {
-        scrollState.value = 'top';
-    } else if (scrollTop + 100 >= scrollHeight - clientHeight) {
-        scrollState.value = 'bottom';
-    } else {
-        scrollState.value = 'middle';
-    }
-};
-
 const toggleReasoning = async () => {
     if (!props.part.finished) return;
 
     reasoningOpen.value = !reasoningOpen.value;
     if (!reasoningOpen.value) return;
     await nextTick();
-    scrollToBottom('instant');
-    handleScroll();
+    bodyRef.value?.scrollToBottom('instant');
+    bodyRef.value?.handleScroll();
 };
 
 const formatDuration = (ms: number) => {
@@ -91,11 +63,6 @@ const formatDuration = (ms: number) => {
             <span class="i-mynaui-chevron-down w-4 h-4 text-[var(--text-secondary)]"
                 :class="reasoningOpen ? '' : '-rotate-90'"></span>
         </button>
-        <div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
-            :class="['reasoning-container max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
-            <div class="p-2">
-                <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
-            </div>
-        </div>
+        <ReasoningBody v-if="reasoningOpen" ref="bodyRef" :part="part" />
     </div>
 </template>