From 5346b2499987d0f0be9d3d9332aa0f130160abeb Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 5 Mar 2026 21:31:00 +0000
Subject: [PATCH] Make chat component autoscroll

---
 nginx/vue/src/components/util/Chat.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index bf02d8b..759f4ea 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/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>