Google Summer of Code 2024 — Enhanced Chat Functionality for Jitsi Meet

Organization: Jitsi

Mentors: Saúl Ibarra Corretgé Mihaela Dumitru

Overview

Introduction:

This project aims to improve the chat experience in Jitsi Meet by introducing additional features and user interface enhancements. The goal is to make the chat more versatile, user-friendly, and interactive, thereby improving communication during video conferences.

Key Features:

• Message Reactions: Users can react to chat messages with emojis, providing quick and expressive feedback.
• Message Menu: A new kebab menu for each message, offering easy access to various actions:
  • Copy Message: Allows users to quickly copy message content.
  • Private Message: Enables users to start a private conversation directly from a group message.
  • Edit Message: Allows users to modify their own messages after sending.
  • Delete Message: Allows users to retract their messages.

Demo

Watch the video

Contributions

Technical Implementation

Challenges

1. End-to-End Functionality for Reactions: One of the most significant challenges was implementing the complete end-to-end functionality for message reactions. This required:

• Designing and building custom XML packages to carry reaction data.
• Implementing parsing logic on the receiving end to extract reaction information from these XML packages.
• Creating events to notify the front-end about new reactions, allowing for real-time UI updates.

/**
* Sends a reaction message to the other participants in the conference.
* @param {string} reaction - The reaction being sent.
* @param {string} messageId - The id of the message being sent.
* @param {string} receiverId - The receiver of the message if it is private.
*/
sendReaction(reaction, messageId, receiverId) {
  // Adds the 'to' attribute depending on if the message is private or not.
  const msg = receiverId ? $msg({ to: `${this.roomjid}/${receiverId}`,
      type: 'chat' }) : $msg({ to: this.roomjid,
      type: 'groupchat' });

  msg.c('reactions', { id: messageId,
      xmlns: 'urn:xmpp:reactions:0' })
      .c('reaction', {}, reaction)
      .up().c('store', { xmlns: 'urn:xmpp:hints' });

  this.connection.send(msg);
}

2. Preventing Duplicate Reactions: Another challenge was ensuring that users couldn't apply the same reaction multiple times to a single message. The solution involved implementing a Set data structure to track the participants who used a specific reaction.

// Prevent duplicate reactions
const messages = state.messages.map(message => {
   if (messageId === message.messageId) {
       const newReactions = new Map(message.reactions);

       reactionList.forEach((reaction: string) => {
           let participants = newReactions.get(reaction);

           if (!participants) {
               participants = new Set();
               newReactions.set(reaction, participants);
           }

           participants.add(participantId);
       });

       return {
           ...message,
           reactions: newReactions
       };
   }

   return message;
});

UI/UX Design for New Features: Integrating new features like the kebab and reaction menu while maintaining a clean, intuitive user interface was challenging. It required careful consideration of user experience, ensuring that new functionality enhanced rather than complicated the chat interface.

Future Enhancements

The next steps for this project are to:

• Allow users to remove reactions
• Allow users to modify their own messages after sending
• Allow users to delete their own messages after sending

Acknowledgements

Thank you to Saúl and Mihaela for supporting me throughout this journey. And sorry for the occasionally messy hair LOL. Also thank you 8x8 for supporting such and amazing project!