fix(chatui): auto-scroll reasoning activity panel (#10221)

dashboard/src/components/chat/ReasoningSidebar.vue

@@ -6,7 +6,7 @@
         <v-btn icon="mdi-close" size="small" variant="text" @click="close" />
       </div>
 
-      <div class="reasoning-sidebar-body">
+      <div ref="sidebarBody" class="reasoning-sidebar-body">
         <ReasoningTimeline
           v-if="parts.length || reasoning"
           :parts="parts"
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import "@/components/chat/chatPanelTransition.css";
-import { computed } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import {
   reasoningActivityCounts,
   reasoningActivityTitle,
@@ -39,6 +39,8 @@ const props = defineProps<{
   isDark?: boolean;
 }>();
 
+const sidebarBody = ref<HTMLElement | null>(null);
+
 const emit = defineEmits<{
   "update:modelValue": [value: boolean];
 }>();
@@ -56,6 +58,21 @@ const reasoningTitle = computed(() =>
 function close() {
   emit("update:modelValue", false);
 }
+
+function scrollToLatestActivity() {
+  if (!props.modelValue) return;
+  void nextTick(() => {
+    const body = sidebarBody.value;
+    if (!body) return;
+    body.scrollTop = body.scrollHeight;
+  });
+}
+
+watch(
+  () => [props.modelValue, props.reasoning, props.parts],
+  scrollToLatestActivity,
+  { deep: true, flush: "post", immediate: true },
+);
 </script>
 
 <style scoped>
@@ -96,6 +113,13 @@ function close() {
   line-height: 1.62;
 }
 
+.reasoning-sidebar-body :deep(.reasoning-text) {
+  --ms-text-body: 0.8125rem;
+  --ms-leading-body: 1.55;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
 .reasoning-sidebar-empty {
   padding: 12px 2px;
   color: rgba(var(--v-theme-on-surface), 0.54);