Make chat component autoscroll

nginx/vue/src/components/util/Chat.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
 import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
 import Header from "@/components/text/Header.vue";
@@ -7,6 +7,17 @@ import Header from "@/components/text/Header.vue";
 const messagesStore = useMessagesStore();
 const messages = computed(() => messagesStore.messages);
 const messageInput = ref("");
+const messagesContainer = ref(null);
+
+function scrollToBottom() {
+    nextTick(() => {
+        if (messagesContainer.value) {
+            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+        }
+    });
+}
+
+watch(messages, scrollToBottom, { deep: true });
 
 function sendMessage() {
     const text = messageInput.value.trim();
@@ -26,7 +37,7 @@ onUnmounted(() => {
 <template>
     <div class="flex flex-col">
         <Header>Chat</Header>
-        <div class="flex flex-col flex-1 overflow-x-scroll">
+        <div ref="messagesContainer" class="flex flex-col flex-1 overflow-y-auto">
             <p v-for="message in messages" :key="message.id">
                 {{ message.text }}
             </p>