fix chat scroll inside scroll

apps/frontend/src/layouts/LayoutWithTabs.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
-    <div class="flex overflow-auto pb-safe-or-4 sm:pt-safe w-full px-4 touch-pan-y">
-      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5">
-        <slot />
+    <div
+      class="flex overflow-auto pb-safe-or-4 sm:pt-safe px-4 touch-pan-y"
+      ref="contentScrollContainer"
+    >
+      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
+        <slot name="default" v-bind:scrollToBottom />
       </div>
     </div>
 
@@ -25,11 +28,21 @@
 </template>
 
 <script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
 const slots = defineSlots<{
-  default?: () => void
+  default?: (slotBindings: { scrollToBottom: typeof scrollToBottom }) => void
   footer?: () => void
 }>()
 
+const contentScrollContainerRef = useTemplateRef('contentScrollContainer')
+
+const scrollToBottom = () => {
+  if (contentScrollContainerRef.value) {
+    contentScrollContainerRef.value.scrollTop = contentScrollContainerRef.value.scrollHeight
+  }
+}
+
 const layoutPageHead = useHead({
   htmlAttrs: { class: 'overflow-hidden' },
   bodyAttrs: { class: 'overflow-hidden' },