adjusted message scrolling

gui/src/components/chat.vue

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // disable typescript check beacuse of error with beacon histogram options
 
+
 import chat_conversations from "./chat_conversations.vue";
 import chat_messages from "./chat_messages.vue";
 import chat_new_message from "./chat_new_message.vue";
@@ -13,6 +14,8 @@ setActivePinia(pinia);
 import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
+
+
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -25,7 +28,7 @@ import {
 } from "chart.js";
 
 import { Bar } from "vue-chartjs";
-import { ref, computed } from "vue";
+import { watch, nextTick, ref, computed } from "vue";
 import annotationPlugin from "chartjs-plugin-annotation";
 
 ChartJS.register(
@@ -101,6 +104,18 @@ const beaconHistogramData = computed(() => ({
     },
   ],
 }));
+
+const messagesContainer = ref(null);
+watch(() => chat.scrollTrigger, (newVal, oldVal) => {
+  //console.log("Trigger changed from", oldVal, "to", newVal); // Debugging line
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    }
+  });
+});
+
+
 </script>
 
 <template>
@@ -143,7 +158,7 @@ const beaconHistogramData = computed(() => ({
           </nav>
 
           <!-- Chat Messages Area -->
-          <div class="flex-grow-1 overflow-auto">
+          <div class="flex-grow-1 overflow-auto"  ref="messagesContainer">
             <chat_messages />
           </div>
 

gui/src/components/chat_conversations.vue

@@ -13,11 +13,7 @@ const chat = useChatStore(pinia);
 function chatSelected(callsign) {
   chat.selectedCallsign = callsign.toUpperCase();
   // scroll message container to bottom
-  var messageBody = document.getElementById("message-container");
-  if (messageBody != null) {
-    // needs sensible defaults
-    messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
-  }
+  chat.triggerScrollToBottom();
 
   processBeaconData(callsign);
 }

gui/src/components/chat_messages.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+
+
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
@@ -24,7 +26,10 @@ function getDateTime(timestampRaw) {
 </script>
 
 <template>
-  <div class="tab-content p-3" id="nav-tabContent-chat-messages">
+
+
+  <div class="tab-content p-3" id="nav-tabContent-chat-messages"
+>
     <template
       v-for="(details, callsign, key) in chat.callsign_list"
       :key="callsign"

gui/src/components/chat_new_message.vue

@@ -30,7 +30,7 @@ import {
   Legend
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import { ref, computed } from 'vue';
+import { ref, computed, nextTick } from 'vue';
 
 
 import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
@@ -90,6 +90,8 @@ function transmitNewMessage() {
         chat.selectedCallsign = Object.keys(chat.callsign_list)[0];
     }
 
+
+
     chat.inputText = chat.inputText.trim();
 
     // Proceed only if there is text or files selected
@@ -101,6 +103,7 @@ function transmitNewMessage() {
             type: file.type,
             data: file.content
         };
+
     });
 
     if (chat.selectedCallsign.startsWith("BC-")) {
@@ -120,6 +123,7 @@ function transmitNewMessage() {
     chat.inputText = '';
     chatModuleMessage.value = "";
     resetFile()
+
 }
 
 function resetFile(event){

gui/src/js/messagesHandler.ts

@@ -83,6 +83,10 @@ function createSortedMessagesList(data: {
 
 export function newMessage(dxcall, body, attachments) {
   sendFreedataMessage(dxcall, body, attachments);
+  chatStore.triggerScrollToBottom();
+
+
+
 }
 
 /* ------ TEMPORARY DUMMY FUNCTIONS --- */

gui/src/store/chatStore.js

@@ -2,11 +2,23 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useChatStore = defineStore("chatStore", () => {
+
+
   var callsign_list = ref();
   var sorted_chat_list = ref();
   var newChatCallsign = ref();
   var newChatMessage = ref();
 
+
+  /* ------------------------------------------------ */
+    // Scroll to bottom functions
+  const scrollTrigger = ref(0);
+
+  function triggerScrollToBottom() {
+    scrollTrigger.value++;
+  }
+
+
   /* ------------------------------------------------ */
 
   var chat_filter = ref([
@@ -92,5 +104,7 @@ export const useChatStore = defineStore("chatStore", () => {
     arq_speed_list_bpm,
     arq_speed_list_snr,
     arq_speed_list_timestamp,
+    scrollTrigger,
+    triggerScrollToBottom,
   };
 });