Skip to content

Commit b6b5c52

Browse files
karladlerkarladler
committed
display rooms and implement simple message sending
1 parent 228caa9 commit b6b5c52

File tree

6 files changed

+254
-123
lines changed

6 files changed

+254
-123
lines changed

‎packages/js-sdk/src/message/Messages.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export class Messages {
4949
return renderMessage(this._messages);
5050
}
5151

52+
get participants() {
53+
return this.contacts;
54+
}
55+
5256
public async init() {
5357
const messagesContainer = await this.storageApi.getMessages(this.receiver.account.ensName, 10, 0);
5458

‎packages/messenger-vue-demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@dm3-org/dm3-js-sdk": "workspace:^",
1616
"@ethersproject/providers": "^5.7.2",
1717
"@vue/devtools-core": "^7.6.4",
18+
"@vueuse/core": "^12.0.0",
1819
"vue": "^3.5.13",
1920
"vue-advanced-chat": "^2.1.0"
2021
},

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import type { Conversation } from "@dm3-org/dm3-js-sdk";
2+
import { MessageIndicator } from "@dm3-org/dm3-js-sdk";
3+
4+
export type ChatRoom = {
5+
roomId: string;
6+
roomName: string;
7+
avatar: string;
8+
unreadCount: number;
9+
index: number;
10+
lastMessage: {
11+
_id: string;
12+
content: string;
13+
senderId: string;
14+
username: string;
15+
timestamp: string;
16+
saved: boolean;
17+
distributed: boolean;
18+
seen: boolean;
19+
new: boolean;
20+
};
21+
users: {
22+
_id: string;
23+
username: string;
24+
avatar: string;
25+
status: {
26+
state: string;
27+
lastChanged: string;
28+
};
29+
}[];
30+
typingUsers: string[];
31+
};
32+
33+
34+
export function transformToRooms(inputData: Conversation[]): ChatRoom[] {
35+
// const initialisedMessages = await Promise.all(inputData.map((data) => { data.messages.init() }));
36+
37+
const rooms = inputData.map((data, index) => {
38+
const { contact, messages } = data;
39+
40+
const allParticipants = messages.participants.map((participant) => {
41+
return {
42+
_id: participant.account.ensName,
43+
username: participant.name,
44+
avatar: participant.image || "assets/imgs/sender.png", // TODO: get from contacts list
45+
status: {
46+
state: (new Date().getTime() - new Date(participant.updatedAt).getTime()) < 3600000 ? "online" : "offline",
47+
lastChanged: new Date(participant.updatedAt).toLocaleString(),
48+
},
49+
}
50+
});
51+
52+
const lastMessage = messages.list[messages.list.length - 1];
53+
54+
return {
55+
roomId: `${contact.account.ensName}`,
56+
roomName: contact.name,
57+
avatar: contact.image || "assets/imgs/people.png",
58+
unreadCount: 0, // Default value, can be adjusted
59+
index: index,
60+
lastMessage: {
61+
_id: `${lastMessage.envelop.id}`,
62+
content: `${lastMessage?.envelop.message.message}`|| "No last message received", // Placeholder
63+
senderId: lastMessage?.envelop.message.metadata.from,
64+
username: contact.name,
65+
timestamp: new Date(lastMessage?.envelop.message.metadata.timestamp).toLocaleString(),
66+
// TODO: check if states are correct
67+
saved: lastMessage?.indicator === MessageIndicator.RECEIVED,
68+
distributed: lastMessage?.indicator === MessageIndicator.SENT,
69+
seen: lastMessage?.indicator === MessageIndicator.READED,
70+
new: lastMessage?.indicator !== MessageIndicator.READED,
71+
},
72+
users: allParticipants,
73+
typingUsers: [], // Default empty
74+
};
75+
});
76+
77+
return rooms;
78+
}
79+
80+
export function transformToMessages(messagesData: any[]): any[] {
81+
return messagesData.map((message) => {
82+
console.log('message', message);
83+
84+
// Ensure _id and senderId are valid
85+
const _id = message.envelop.id ? String(message.envelop.id) : "unknown_id";
86+
const senderId = message.envelop.message.metadata.from ? String(message.envelop.message.metadata.from) : "unknown_sender";
87+
88+
return {
89+
_id: _id,
90+
indexId: message.indexId || null, // Assuming indexId is available or null
91+
content: message.envelop.message.message || "No content",
92+
senderId: senderId,
93+
username: message.senderName || "Unknown", // Assuming senderName is available
94+
avatar: message.senderAvatar || "assets/imgs/default.png", // Assuming senderAvatar is available
95+
date: new Date(message.envelop.message.metadata.timestamp).toLocaleDateString(),
96+
timestamp: new Date(message.envelop.message.metadata.timestamp).toLocaleTimeString(),
97+
system: message.system || false,
98+
saved: message.indicator === MessageIndicator.RECEIVED,
99+
distributed: message.indicator === MessageIndicator.SENT,
100+
seen: message.indicator === MessageIndicator.READED,
101+
deleted: message.deleted || false,
102+
failure: message.failure || false,
103+
disableActions: message.disableActions || false,
104+
disableReactions: message.disableReactions || false,
105+
files: message.files || [],
106+
reactions: message.reactions || {},
107+
replyMessage: message.replyMessage || null,
108+
};
109+
});
110+
}

‎packages/messenger-vue-demo/src/components/Dm3Chat.vue‎

Lines changed: 35 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,62 @@
11
<template>
2-
{{ rooms }}
3-
{{ messages }}
4-
<!-- <vue-advanced-chat
5-
:current-user-id="currentUserId"
2+
<div v-if="!isReady" class="loading-animation">
3+
<p>Loading...</p>
4+
</div>
5+
<vue-advanced-chat
6+
:loading-rooms="!isReady"
7+
:current-user-id="loggedInAccount"
68
:rooms="JSON.stringify(rooms)"
79
:messages="JSON.stringify(messages)"
810
:room-actions="JSON.stringify(roomActions)"
911
:messages-loaded="messagesLoaded"
1012
:rooms-loaded="roomsLoaded"
11-
/> -->
12-
<button @click="startTestConversation">Start test conversation</button>
13-
isReady: {{ isReady }}
13+
@fetch-messages="fetchMessages($event.detail[0])"
14+
@send-message="sendMessage($event.detail[0])"
15+
/>
16+
<button :disabled="!isReady" @click="startTestConversation">Start test conversation</button>
17+
18+
<details>
19+
<summary>Conversations Preview</summary>
20+
<pre>{{ JSON.stringify(conversationsPreview, null, 2) }}</pre>
21+
</details>
22+
<details>
23+
<summary>Rooms</summary>
24+
<pre>{{ JSON.stringify(rooms, null, 2) }}</pre>
25+
</details>
26+
<details>
27+
<summary>Messages</summary>
28+
<pre>{{ JSON.stringify(messages, null, 2) }}</pre>
29+
</details>
1430
</template>
1531

1632
<script setup>
1733
import { onMounted, ref } from 'vue'
1834
import { register } from 'vue-advanced-chat'
1935
import { useDm3Chat } from '../composables/chat'
2036
register()
21-
22-
const roomsLoaded = ref(false);
23-
const messagesLoaded = ref(false);
24-
25-
const { rooms, messages, init, startTestConversation, isReady } = useDm3Chat();
37+
const {
38+
messages,
39+
init,
40+
startTestConversation,
41+
isReady,
42+
conversationsPreview,
43+
rooms,
44+
fetchMessages,
45+
roomsLoaded,
46+
messagesLoaded,
47+
sendMessage
48+
} = useDm3Chat();
2649
2750
onMounted(() => {
2851
init();
2952
})
3053
3154
const currentUserId = '1234'
32-
// const rooms = [
33-
// {
34-
// roomId: '1',
35-
// roomName: 'Room 1',
36-
// avatar: 'https://i.pravatar.cc/300?u=1',
37-
// unreadCount: 4,
38-
// index: 3,
39-
// lastMessage: {
40-
// _id: 'xyz',
41-
// content: 'Last message received',
42-
// senderId: '1234',
43-
// username: 'John Doe',
44-
// timestamp: '10:20',
45-
// saved: true,
46-
// distributed: false,
47-
// seen: false,
48-
// new: true
49-
// },
50-
// users: [
51-
// {
52-
// _id: '1234',
53-
// username: 'John Doe',
54-
// avatar: 'https://i.pravatar.cc/300?u=1234',
55-
// status: {
56-
// state: 'online',
57-
// lastChanged: 'today, 14:30'
58-
// }
59-
// },
60-
// {
61-
// _id: '4321',
62-
// username: 'John Snow',
63-
// avatar: 'https://i.pravatar.cc/300?u=4321',
64-
// status: {
65-
// state: 'offline',
66-
// lastChanged: '14 July, 20:00'
67-
// }
68-
// }
69-
// ],
70-
// typingUsers: [ 4321 ]
71-
// }
72-
// ]
73-
74-
// const messages=[
75-
// {
76-
// _id: '7890',
77-
// indexId: 12092,
78-
// content: 'Message 1',
79-
// senderId: '1234',
80-
// username: 'John Doe',
81-
// avatar: 'https://i.pravatar.cc/300?u=1234',
82-
// date: '13 November',
83-
// timestamp: '10:20',
84-
// system: false,
85-
// saved: true,
86-
// distributed: true,
87-
// seen: true,
88-
// deleted: false,
89-
// failure: true,
90-
// disableActions: false,
91-
// disableReactions: false,
92-
// // files: [
93-
// // {
94-
// // name: 'My File',
95-
// // size: 67351,
96-
// // type: 'png',
97-
// // audio: true,
98-
// // duration: 14.4,
99-
// // url: 'https://firebasestorage.googleapis.com/...',
100-
// // preview: 'data:image/png;base64,iVBORw0KGgoAA...',
101-
// // progress: 88
102-
// // }
103-
// // ],
104-
// reactions: {
105-
// '😁': [
106-
// '1234', // USER_ID
107-
// '4321'
108-
// ],
109-
// '🥰': [
110-
// '1234'
111-
// ]
112-
// },
113-
// replyMessage: {
114-
// content: 'Reply Message',
115-
// senderId: '4321',
116-
// // files: [
117-
// // {
118-
// // name: 'My Replied File',
119-
// // size: 67351,
120-
// // type: 'png',
121-
// // audio: true,
122-
// // duration: 14.4,
123-
// // url: 'https://firebasestorage.googleapis.com/...',
124-
// // preview: 'data:image/png;base64,iVBORw0KGgoAA...'
125-
// // }
126-
// // ]
127-
// },
128-
// }
129-
// ]
13055
13156
const roomActions = [
13257
{ name: 'inviteUser', title: 'Invite User' },
13358
{ name: 'removeUser', title: 'Remove User' },
13459
{ name: 'deleteRoom', title: 'Delete Room' }
13560
]
13661
137-
onMounted(() => {
138-
setTimeout(() => {
139-
messagesLoaded.value = true;
140-
roomsLoaded.value = true;
141-
}, 1000);
142-
})
14362
</script>

0 commit comments

Comments
 (0)