Azure Communication Service - how can I showcase a users chats like in Microsoft Teams UI?

Question

Hello community,

To give more context, I made a design of how my chats page should look like:

For my use case do I need to retrieve a list of chat threads for a user and show this on the left side panel with certain information: avatar, name, last message from chat thread, date of last message and amount of unread messages.

The problems that I have with Azure Communication Service:

1. How can I show from my client side the name and avatar of the other participants that I have a one-to-one chat with?
   1. Me (Vincent) should see Charly with his picture and vice versa.
   2. It seems you can't use the topic of a chat thread because then it would be one-sided.
2. If even possible, how can I most efficiently show the last message and date and update this when a new message comes?
3. Does Azure Communication Service even have features available for unread messages?
   1. If not, is there a direction I could go in to implement this myself?

Thank you for your time,

Vincent

Answer 1

Azure Communication Service provides a ChatComposite component in the UI Library that allows you to create a chat experience with features like sending and receiving messages, displaying typing indicators, and more.

To answer your questions:

1. To show the name and avatar of the other participants in a one-to-one chat, you can use the displayName and id properties of the ChatParticipant object. You can retrieve the list of participants in a chat thread using the getParticipants method of the ChatClient object. Here's an example:

const participants = await chatClient.getParticipants(threadId);
participants.forEach(participant => {
  console.log(participant.displayName);
  console.log(participant.id);
});

1. To show the last message and date, you can use the getMessages method of the ChatThreadClient object to retrieve the messages in a chat thread. You can then display the last message and date by sorting the messages by timestamp and displaying the first message in the sorted array. Here's an example:

const messages = await threadClient.getMessages();
messages.sort((a, b) => b.createdOn - a.createdOn);
const lastMessage = messages[0];
console.log(lastMessage.content);
console.log(lastMessage.createdOn);

You can update this information when a new message comes in by subscribing to the newMessage event of the ChatThreadClient object and updating the UI accordingly.

1. Azure Communication Service does not have a built-in feature for tracking unread messages. However, you can implement this yourself by keeping track of the last message that the user has read and comparing it to the timestamp of new messages that come in. You can then display the number of unread messages by counting the number of messages that have a timestamp greater than the last read message.
2. Use the getChatThreads method of the ChatClient object to retrieve a list of chat threads for the user. You can then display this list in a sidebar with the information you mentioned: avatar, name, last message from chat thread, date of last message, and amount of unread messages.

Here's an example of how you can retrieve the chat threads and display them in a list:

const chatThreads = await chatClient.getChatThreads();
chatThreads.forEach(thread => {
  const participants = await chatClient.getParticipants(thread.id);
  const lastMessage = await threadClient.getMessages()[0];
  const unreadMessages = countUnreadMessages(thread.id);
  // <span class=" active-doc-4" data-doc-items="4">Display the thread information in the sidebar[1](#doc-pos=4)</span>
});

You can implement the countUnreadMessages function to count the number of unread messages in a chat thread using the method I mentioned above.