Skip to content

Commit

Permalink
display rooms and implement simple message sending
Browse files Browse the repository at this point in the history
  • Loading branch information
Karl committed Nov 27, 2024
1 parent 228caa9 commit b6b5c52
Show file tree
Hide file tree
Showing 6 changed files with 254 additions and 123 deletions.
4 changes: 4 additions & 0 deletions packages/js-sdk/src/message/Messages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ export class Messages {
return renderMessage(this._messages);
}

get participants() {
return this.contacts;
}

public async init() {
const messagesContainer = await this.storageApi.getMessages(this.receiver.account.ensName, 10, 0);

Expand Down
1 change: 1 addition & 0 deletions packages/messenger-vue-demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@dm3-org/dm3-js-sdk": "workspace:^",
"@ethersproject/providers": "^5.7.2",
"@vue/devtools-core": "^7.6.4",
"@vueuse/core": "^12.0.0",
"vue": "^3.5.13",
"vue-advanced-chat": "^2.1.0"
},
Expand Down
110 changes: 110 additions & 0 deletions packages/messenger-vue-demo/src/chatUtils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import type { Conversation } from "@dm3-org/dm3-js-sdk";
import { MessageIndicator } from "@dm3-org/dm3-js-sdk";

export type ChatRoom = {
roomId: string;
roomName: string;
avatar: string;
unreadCount: number;
index: number;
lastMessage: {
_id: string;
content: string;
senderId: string;
username: string;
timestamp: string;
saved: boolean;
distributed: boolean;
seen: boolean;
new: boolean;
};
users: {
_id: string;
username: string;
avatar: string;
status: {
state: string;
lastChanged: string;
};
}[];
typingUsers: string[];
};


export function transformToRooms(inputData: Conversation[]): ChatRoom[] {
// const initialisedMessages = await Promise.all(inputData.map((data) => { data.messages.init() }));

const rooms = inputData.map((data, index) => {
const { contact, messages } = data;

const allParticipants = messages.participants.map((participant) => {
return {
_id: participant.account.ensName,
username: participant.name,
avatar: participant.image || "assets/imgs/sender.png", // TODO: get from contacts list
status: {
state: (new Date().getTime() - new Date(participant.updatedAt).getTime()) < 3600000 ? "online" : "offline",
lastChanged: new Date(participant.updatedAt).toLocaleString(),
},
}
});

const lastMessage = messages.list[messages.list.length - 1];

return {
roomId: `${contact.account.ensName}`,
roomName: contact.name,
avatar: contact.image || "assets/imgs/people.png",
unreadCount: 0, // Default value, can be adjusted
index: index,
lastMessage: {
_id: `${lastMessage.envelop.id}`,
content: `${lastMessage?.envelop.message.message}`|| "No last message received", // Placeholder
senderId: lastMessage?.envelop.message.metadata.from,
username: contact.name,
timestamp: new Date(lastMessage?.envelop.message.metadata.timestamp).toLocaleString(),
// TODO: check if states are correct
saved: lastMessage?.indicator === MessageIndicator.RECEIVED,
distributed: lastMessage?.indicator === MessageIndicator.SENT,
seen: lastMessage?.indicator === MessageIndicator.READED,
new: lastMessage?.indicator !== MessageIndicator.READED,
},
users: allParticipants,
typingUsers: [], // Default empty
};
});

return rooms;
}

export function transformToMessages(messagesData: any[]): any[] {
return messagesData.map((message) => {
console.log('message', message);

// Ensure _id and senderId are valid
const _id = message.envelop.id ? String(message.envelop.id) : "unknown_id";
const senderId = message.envelop.message.metadata.from ? String(message.envelop.message.metadata.from) : "unknown_sender";

return {
_id: _id,
indexId: message.indexId || null, // Assuming indexId is available or null
content: message.envelop.message.message || "No content",
senderId: senderId,
username: message.senderName || "Unknown", // Assuming senderName is available
avatar: message.senderAvatar || "assets/imgs/default.png", // Assuming senderAvatar is available
date: new Date(message.envelop.message.metadata.timestamp).toLocaleDateString(),
timestamp: new Date(message.envelop.message.metadata.timestamp).toLocaleTimeString(),
system: message.system || false,
saved: message.indicator === MessageIndicator.RECEIVED,
distributed: message.indicator === MessageIndicator.SENT,
seen: message.indicator === MessageIndicator.READED,
deleted: message.deleted || false,
failure: message.failure || false,
disableActions: message.disableActions || false,
disableReactions: message.disableReactions || false,
files: message.files || [],
reactions: message.reactions || {},
replyMessage: message.replyMessage || null,
};
});
}
151 changes: 35 additions & 116 deletions packages/messenger-vue-demo/src/components/Dm3Chat.vue
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,62 @@
<template>
{{ rooms }}
{{ messages }}
<!-- <vue-advanced-chat
:current-user-id="currentUserId"
<div v-if="!isReady" class="loading-animation">
<p>Loading...</p>
</div>
<vue-advanced-chat
:loading-rooms="!isReady"
:current-user-id="loggedInAccount"
:rooms="JSON.stringify(rooms)"
:messages="JSON.stringify(messages)"
:room-actions="JSON.stringify(roomActions)"
:messages-loaded="messagesLoaded"
:rooms-loaded="roomsLoaded"
/> -->
<button @click="startTestConversation">Start test conversation</button>
isReady: {{ isReady }}
@fetch-messages="fetchMessages($event.detail[0])"
@send-message="sendMessage($event.detail[0])"
/>
<button :disabled="!isReady" @click="startTestConversation">Start test conversation</button>

<details>
<summary>Conversations Preview</summary>
<pre>{{ JSON.stringify(conversationsPreview, null, 2) }}</pre>
</details>
<details>
<summary>Rooms</summary>
<pre>{{ JSON.stringify(rooms, null, 2) }}</pre>
</details>
<details>
<summary>Messages</summary>
<pre>{{ JSON.stringify(messages, null, 2) }}</pre>
</details>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { register } from 'vue-advanced-chat'
import { useDm3Chat } from '../composables/chat'
register()
const roomsLoaded = ref(false);
const messagesLoaded = ref(false);
const { rooms, messages, init, startTestConversation, isReady } = useDm3Chat();
const {
messages,
init,
startTestConversation,
isReady,
conversationsPreview,
rooms,
fetchMessages,
roomsLoaded,
messagesLoaded,
sendMessage
} = useDm3Chat();
onMounted(() => {
init();
})
const currentUserId = '1234'
// const rooms = [
// {
// roomId: '1',
// roomName: 'Room 1',
// avatar: 'https://i.pravatar.cc/300?u=1',
// unreadCount: 4,
// index: 3,
// lastMessage: {
// _id: 'xyz',
// content: 'Last message received',
// senderId: '1234',
// username: 'John Doe',
// timestamp: '10:20',
// saved: true,
// distributed: false,
// seen: false,
// new: true
// },
// users: [
// {
// _id: '1234',
// username: 'John Doe',
// avatar: 'https://i.pravatar.cc/300?u=1234',
// status: {
// state: 'online',
// lastChanged: 'today, 14:30'
// }
// },
// {
// _id: '4321',
// username: 'John Snow',
// avatar: 'https://i.pravatar.cc/300?u=4321',
// status: {
// state: 'offline',
// lastChanged: '14 July, 20:00'
// }
// }
// ],
// typingUsers: [ 4321 ]
// }
// ]
// const messages=[
// {
// _id: '7890',
// indexId: 12092,
// content: 'Message 1',
// senderId: '1234',
// username: 'John Doe',
// avatar: 'https://i.pravatar.cc/300?u=1234',
// date: '13 November',
// timestamp: '10:20',
// system: false,
// saved: true,
// distributed: true,
// seen: true,
// deleted: false,
// failure: true,
// disableActions: false,
// disableReactions: false,
// // files: [
// // {
// // name: 'My File',
// // size: 67351,
// // type: 'png',
// // audio: true,
// // duration: 14.4,
// // url: 'https://firebasestorage.googleapis.com/...',
// // preview: 'data:image/png;base64,iVBORw0KGgoAA...',
// // progress: 88
// // }
// // ],
// reactions: {
// '😁': [
// '1234', // USER_ID
// '4321'
// ],
// '🥰': [
// '1234'
// ]
// },
// replyMessage: {
// content: 'Reply Message',
// senderId: '4321',
// // files: [
// // {
// // name: 'My Replied File',
// // size: 67351,
// // type: 'png',
// // audio: true,
// // duration: 14.4,
// // url: 'https://firebasestorage.googleapis.com/...',
// // preview: 'data:image/png;base64,iVBORw0KGgoAA...'
// // }
// // ]
// },
// }
// ]
const roomActions = [
{ name: 'inviteUser', title: 'Invite User' },
{ name: 'removeUser', title: 'Remove User' },
{ name: 'deleteRoom', title: 'Delete Room' }
]
onMounted(() => {
setTimeout(() => {
messagesLoaded.value = true;
roomsLoaded.value = true;
}, 1000);
})
</script>
Loading

0 comments on commit b6b5c52

Please sign in to comment.