@fetch-messages fired only when room is opened

[vlahde]

Hi, @fetch-messages event is fired only once when I open the room. Also the chat window is not scrolled to the bottom of the page when first set of messages is loaded. I have tried to change the message amount being loaded but that does not help. Here is my component:

      <chat-window
          height="93.5vh"
          theme="light"
          :styles="{
              icons: {
                search: '#ff2f00'
              },
              message: {
                backgroundMe: '#f1e7c0',
              }
            }
            "
          :current-user-id="authUser.chat_user.id"
          :rooms="rooms"
          :room-id="chat_room_id"
          :load-first-room="false"
          :single-room="true"
          :messages="messages"
          :rooms-loaded="roomsLoaded"
          :loading-rooms="loadingRooms"
          :show-audio="false"
          :messages-loaded="messagesLoaded"
          :room-info-enabled="true"
          @room-info="roomInfo($event)"
          @fetch-more-rooms="fetchRooms"
          @fetch-messages="fetchMessages($event)"
          @send-message="sendMessage($event)"
          :text-messages="{
            ROOMS_EMPTY: 'Ei keskusteluja',
            ROOM_EMPTY: 'Keskustelussa ei ole viestejä',
            NEW_MESSAGES: 'Uusia viestejä',
            MESSAGE_DELETED: 'Viesti poistettu',
            MESSAGES_EMPTY: 'Viestit tyhjiä',
            CONVERSATION_STARTED: 'Keskustelu alkoi:',
            TYPE_MESSAGE: 'Kirjoita viesti',
            SEARCH: 'Etsi',
            IS_ONLINE: 'Online-tilassa',
            LAST_SEEN: 'viimeksi nähty ',
            IS_TYPING: 'kirjoittaa viestiä...',
            CANCEL_SELECT_MESSAGE: 'Peruuta viesti'
          }"
      >
      </chat-window>

and here is the fetch:

    fetchMessages({ room, options }){

      console.log('fetchMessages options: ', options)

      if(options && options.reset){
        this.messages = [] //reset messages on load of new chat page
        this.currentRoomId = room.roomId //set as selected room
        this.messagesLoaded = false
      }

      this.axios
          .get('/chat/messages/app', {params: {
              chat_room_id: room.roomId,
              skip: this.messages.length,
            }
          })
          .then(response => {

            var messages = []
            messages = this.messages

            for(var i = 0;i < response.data.length;i++)
                messages.unshift(response.data[i]); //push messages to the bottom of the array

            this.messages = messages //set as message array

            //if less than 20 messages in response, mark chatroom as fully loaded
            if(response.data.length < 20) this.messagesLoaded = true

          })

    },

Using Vue 3 installed

Expected behavior

The chat screen should be scrolled to the bottom and when scrolling to the top @fetch-messages should be fired again

[antoine92190]

Please use v2.0.1, previous versions are not supported anymore. Let me know if the issue still exists then.
Migration guide: https://github.com/antoine92190/vue-advanced-chat/releases/tag/2.0.0

[vlahde]

I've updated to version 2.0.1 but I am afraid the problem still remains: @fetch-messages is not fired when scrolled to the top. My web component is now like this:

<vue-advanced-chat
          height="93.5vh"
          theme="light"
          :styles="JSON.stringify({
              icons: {
                search: '#ff2f00'
              },
              message: {
                backgroundMe: '#f1e7c0',
              }
            })"
          :current-user-id="authUser.chat_user.id"
          :rooms="JSON.stringify(rooms)"
          :room-id="chat_room_id"
          :load-first-room="false"
          :single-room="true"
          :messages="JSON.stringify(messages)"
          :rooms-loaded="roomsLoaded"
          :loading-rooms="loadingRooms"
          :show-audio="false"
          :messages-loaded="messagesLoaded"
          :room-info-enabled="true"
          :auto-scroll="JSON.stringify({
            send: {
              new: true, // will scroll down after sending a message
              newAfterScrollUp: true // will not scroll down after sending a message when scrolled up
            },
            receive: {
              new: true, // will not scroll down when receiving a message
              newAfterScrollUp: true // will scroll down when receiving a message when scrolled up
            }
          })"
          @room-info="roomInfo($event.detail[0])"
          @fetch-more-rooms="fetchRooms"
          @fetch-messages="fetchMessages($event.detail[0])"
          @send-message="sendMessage($event.detail[0])"
          :text-messages="JSON.stringify({
            ROOMS_EMPTY: 'Ei keskusteluja',
            ROOM_EMPTY: 'Keskustelussa ei ole viestejä',
            NEW_MESSAGES: 'Uusia viestejä',
            MESSAGE_DELETED: 'Viesti poistettu',
            MESSAGES_EMPTY: 'Viestit tyhjiä',
            CONVERSATION_STARTED: 'Keskustelu alkoi:',
            TYPE_MESSAGE: 'Kirjoita viesti',
            SEARCH: 'Etsi',
            IS_ONLINE: 'Online-tilassa',
            LAST_SEEN: 'viimeksi nähty ',
            IS_TYPING: 'kirjoittaa viestiä...',
            CANCEL_SELECT_MESSAGE: 'Peruuta viesti'
          })"
      >
      </vue-advanced-chat>

the fetch is the same as previously

[antoine92190]

Please try this.messages = [...messages] instead of this.messages = messages
Otherwise, can you share your repo or a minimal example so I can reproduce on my side?

[antoine92190]

Actually there was indeed a bug, fixed in 8d87952
Please install version 2.0.2 and let me know if it works.

[vlahde]

It works now! Thank you for the fix and thanks again for a great repo!