message scrolling at sending and receaving bug fix

zucchero-sintattico · Oct 24, 2023 · 2c8c1b6 · 2c8c1b6
1 parent b5f707a
commit 2c8c1b6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/services/frontend/src/components/home-component/central-area/chat/ChatArea.vue b/services/frontend/src/components/home-component/central-area/chat/ChatArea.vue
@@ -59,7 +59,6 @@ const showChat = computed(() => {
   }
 })
 
-
 //if was send or receve a message, reset the scrolling position
 watch(
   () => messageStore.messages[messageStore.messages.length - 1],
@@ -158,13 +157,22 @@ onMounted(() => {
 
       <q-infinite-scroll reverse class="bottom-content scrolling-area" v-on:scroll="handleScroll">
         <div v-if="showChat">
-          <div v-for="(message, index) in messageStore.messages" :key="index" class="justify-bottom">
+          <div
+            v-for="(message, index) in messageStore.messages"
+            :key="index"
+            class="justify-bottom"
+          >
             <!-- if sender is the user show the image, default image otherwise -->
-            <q-chat-message :name="message.sender" :text="[message.content]" :sent="userStore.username == message.sender"
-              :avatar="message.sender == userStore.username
-                ? userStore.photo
-                : usersPhotos.get(message.sender)
-                " />
+            <q-chat-message
+              :name="message.sender"
+              :text="[message.content]"
+              :sent="userStore.username == message.sender"
+              :avatar="
+                message.sender == userStore.username
+                  ? userStore.photo
+                  : usersPhotos.get(message.sender)
+              "
+            />
           </div>
         </div>
         <div id="last"></div>

diff --git a/services/frontend/src/components/home-component/central-area/chat/MessageInput.vue b/services/frontend/src/components/home-component/central-area/chat/MessageInput.vue
@@ -11,8 +11,6 @@ let initialLoadedMessages = 30
  * Checks if the user is in a valid content area (direct or channel)
  */
 
-
-
 const shown = computed(() => {
   if (
     userStore.inContentArea == ContentArea.Direct ||
@@ -29,7 +27,6 @@ const shown = computed(() => {
  * then refreshes the messages
  */
 
-
 async function sendMessage() {
   // check if message is empty
   if (message.value.match(/^\s*$/)) {