update room after sending message

Author: karladler

packages/messenger-vue-demo/src/chatUtils.ts

@@ -67,7 +67,7 @@ export type ChatRoom = {
           saved: lastMessage?.indicator === MessageIndicator.RECEIVED,
           distributed: lastMessage?.indicator === MessageIndicator.SENT,
           seen: lastMessage?.indicator === MessageIndicator.READED,
-          new: lastMessage?.indicator !== MessageIndicator.READED,
+          new: lastMessage?.indicator !== MessageIndicator.READED, // TODO: and not my own message
         },
         users: allParticipants,
         typingUsers: [], // Default empty
@@ -86,6 +86,7 @@ export type ChatRoom = {
       const senderId = message.envelop.message.metadata.from ? String(message.envelop.message.metadata.from) : "unknown_sender";
 
       return {
+        new: false,
         _id: _id,
         indexId: message.indexId || null, // Assuming indexId is available or null
         content: message.envelop.message.message || "No content",
@@ -97,7 +98,8 @@ export type ChatRoom = {
         system: message.system || false,
         saved: message.indicator === MessageIndicator.RECEIVED,
         distributed: message.indicator === MessageIndicator.SENT,
-        seen: message.indicator === MessageIndicator.READED,
+        // seen: message.indicator === MessageIndicator.READED, // TODO: and not my own message
+        seen: true,
         deleted: message.deleted || false,
         failure: message.failure || false,
         disableActions: message.disableActions || false,

packages/messenger-vue-demo/src/composables/chat.ts

@@ -2,7 +2,7 @@ import { computed, ref, markRaw, type Ref } from 'vue';
 import { Dm3, Dm3Sdk, type Dm3SdkConfig } from '@dm3-org/dm3-js-sdk';
 import {ethers} from 'ethers';
 import type { Conversation } from '@dm3-org/dm3-lib-storage';
-import { transformToMessages, transformToRooms } from '@/chatUtils';
+import { transformToMessages, transformToRooms, type ChatRoom } from '@/chatUtils';
 import { computedAsync } from '@vueuse/core';
 
 const sepoliaProvider = new ethers.providers.JsonRpcProvider("https://eth-sepolia.g.alchemy.com/v2/cBTHRhVcZ3Vt4BOFpA_Hi5DcTB1KQQV1", {
@@ -29,14 +29,16 @@ const sdk = new Dm3Sdk(configLukso);
 type UseDm3ChatReturnType = {
     loggedInAccount: Ref<string | null>;
     fetchMessages: (room, options) => Promise<void>;
-    getConversations: () => any[]; // TODO: fix types
     messages: Ref; // TODO: fix types
     init: () => Promise<void>;
     startTestConversation: () => Promise<void>;
     isReady: Ref<boolean>;
     conversationsPreview: Ref<any[]>;
     selectedConversation: Ref<Conversation | null>;
     sendMessage: (message: any) => Promise<void>;
+    rooms: Ref<ChatRoom[] | undefined>;
+    roomsLoaded: Ref<boolean>;
+    messagesLoaded: Ref<boolean>;
 };
 
 const requestProvider = (): Promise<ethers.providers.ExternalProvider> => {
@@ -100,11 +102,29 @@ export function useDm3Chat(): UseDm3ChatReturnType {
 
         messages.value = transformToMessages(conversationsPreview.value
             .find((c) => c.contact.account.ensName === room.roomId)
-            ?.messages.list || []);
+            ?.messages.list.sort((a, b) => a.envelop.message.metadata.timestamp - b.envelop.message.metadata.timestamp)
+             || []);
 
         messagesLoaded.value = true;
     }
 
+    const _updateMessages = async (roomId: string) => {
+        const convs = dm3Instance.value?.conversations.list || [];
+
+        console.log('convs', convs);
+
+        await Promise.all(convs.map((conv) => {
+            return conv.messages.init();
+        }));
+
+        console.log('convs initilaized', convs);
+
+        messages.value = transformToMessages(convs
+            .find((c) => c.contact.account.ensName === roomId)
+            ?.messages.list.sort((a, b) => a.envelop.message.metadata.timestamp - b.envelop.message.metadata.timestamp)
+             || []);
+    }
+
     const sendMessage = async ({content, roomId, replyMessage, files, usersTag}) => {
         if (!dm3Instance) {
             console.error('dm3Instance is not initialized');
@@ -115,6 +135,7 @@ export function useDm3Chat(): UseDm3ChatReturnType {
 
         const conv = await dm3Instance.value?.conversations?.addConversation(roomId);
         await conv?.messages.sendMessage(content);
+        _updateMessages(roomId);
     }
 
     return {
@@ -129,6 +150,6 @@ export function useDm3Chat(): UseDm3ChatReturnType {
         init, 
         startTestConversation, 
         conversationsPreview, 
-        selectedConversation 
+        selectedConversation
     };
 }