align content layout in bot detail page tabs (#191)

* fix(chat): auto-scroll to bottom when new messages arrive

* fix(ui): align content layout in bot detail page tabs

packages/web/src/components/file-manager/index.vue

@@ -14,6 +14,7 @@ import {
   DialogTitle,
   DialogFooter,
   Spinner,
+  ScrollArea
 } from '@memoh/ui'
 import {
   getBotsByBotIdContainerFsList,
@@ -272,7 +273,7 @@ defineExpose({ navigateTo, openFileByPath })
 </script>
 
 <template>
-  <div class="flex h-full flex-col overflow-hidden">
+  <div class="flex absolute inset-0 flex-col overflow-hidden">
     <!-- Toolbar -->
     <div class="flex items-center gap-2 border-b border-border px-4 py-2">
       <!-- Breadcrumb -->
@@ -348,10 +349,10 @@ defineExpose({ navigateTo, openFileByPath })
     </div>
 
     <!-- Main content area -->
-    <div class="flex flex-1 min-h-0 overflow-hidden">
+    <div class="flex flex-1 min-h-0 overflow-hidden h-full ">
       <!-- File list -->
-      <div
-        class="overflow-auto border-border transition-colors"
+      <ScrollArea
+        class=" border-border transition-colors "
         :class="openFile ? 'w-80 shrink-0 border-r' : 'w-full'"
       >
         <FileList
@@ -363,12 +364,12 @@ defineExpose({ navigateTo, openFileByPath })
           @rename="openRenameDialog"
           @delete="openDeleteDialog"
         />
-      </div>
+      </ScrollArea>
 
       <!-- File viewer -->
       <div
         v-if="openFile"
-        class="flex-1 overflow-hidden"
+        class="flex-1 overflow-hidden max-h-full"
       >
         <FileViewer
           :bot-id="botId"

packages/web/src/pages/bots/components/bot-channels.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex gap-6 min-h-[400px]  mx-auto">
+  <div class="flex gap-6 absolute inset-0  mx-auto p-4">
     <!-- Left: Channel list -->
-    <div class="w-60 shrink-0 flex flex-col border rounded-lg">
-      <div class="flex-1 overflow-y-auto">
+    <div class="h-full flex-col border rounded-lg overflow-hidden flex">
+      <ScrollArea class="w-60 flex-1 flex flex-col ">
         <!-- Loading -->
         <div
           v-if="isLoading && configuredChannels.length === 0"
@@ -39,11 +39,11 @@
             :aria-pressed="selectedType === item.meta.type"
             class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors hover:bg-accent"
             :class="{ 'bg-accent': selectedType === item.meta.type }"
-            @click="selectedType = item.meta.type"
+            @click="selectedType = item.meta.type as string"
           >
             <div
               class="flex size-8 shrink-0 items-center justify-center rounded-md text-xs font-bold uppercase"
-              :class="channelBadgeClass(item.meta.type)"
+              :class="channelBadgeClass(item.meta.type as string)"
             >
               {{ channelIcon(item.meta.type) }}
             </div>
@@ -68,10 +68,9 @@
             </div>
           </button>
         </div>
-      </div>
-
+      </ScrollArea>
       <!-- Add button -->
-      <div class="border-t p-2">
+      <div class="border-t p-2  ">
         <Popover v-model:open="addPopoverOpen">
           <PopoverTrigger as-child>
             <Button
@@ -116,7 +115,6 @@
         </Popover>
       </div>
     </div>
-
     <!-- Right: Channel settings -->
     <div class="flex-1 min-w-0">
       <div
@@ -144,6 +142,7 @@ import {
   Popover,
   PopoverTrigger,
   PopoverContent,
+  ScrollArea
 } from '@memoh/ui'
 import { useQuery } from '@pinia/colada'
 import { getChannels, getBotsByIdChannelByPlatform } from '@memoh/sdk'

packages/web/src/pages/bots/components/bot-memory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-6 min-h-125 h-[calc(100vh-300px)] mx-auto">
+  <div class="flex gap-6 h-full absolute inset-0 p-4 mx-auto">
     <!-- Left: File list -->
     <div class="w-64 shrink-0 flex flex-col border rounded-lg overflow-hidden max-h-full">
       <div class="p-3 border-b space-y-3 shrink-0">

packages/web/src/pages/chat/components/chat-area.vue

@@ -261,10 +261,13 @@ onMounted(() => {
 let userScrolledUp = false
 
 function scrollToBottom(instant = false) {
-  nextTick(() => {
-    const el = scrollContainer.value
-    if (!el) return
-    el.scrollTo({ top: el.scrollHeight, behavior: instant ? 'instant' : 'smooth' })
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const el = scrollContainer.value   
+      if (!el) return
+      el.scrollTo({ top: el.scrollHeight, behavior: instant ? 'instant' : 'smooth' })   
+    })
+   
   })
 }