feat: Matrix Integration for EmbeddedChat

[Aryan-Verma-999]

feat: Matrix Integration for EmbeddedChat

Acceptance Criteria fulfillment

• Integrate EmbeddedChat with the new Rocket.Chat native Matrix homeserver while keeping direct access to Rocket.Chat as an alternate option.
• EmbeddedChat has a configuration option (mode prop) to choose between using the native Matrix homeserver and direct Rocket.Chat access.
• When configured to use the native Matrix homeserver, EmbeddedChat can connect to a single configured channel, join it, and send and receive messages successfully.
• Documentation is added explaining how to configure EmbeddedChat for the native Matrix homeserver and how to switch between Matrix and direct Rocket.Chat modes.
  Fixes Epic: EmbeddedChat integration with Rocket.Chat native Matrix homeserver #1029

Video/Screenshots

PR Test Details

1. Run yarn storybook.
2. Go to the EmbeddedChat story.
3. In the Controls panel, switch mode to matrix.
4. Enter a valid Matrix host (e.g., https://matrix.org) and roomId.
5. Log in and verify message sending/receiving.

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-1030 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[CLAassistant]

All committers have signed the CLA.

[Aryan-Verma-999]

Hi @Spiral-Memory , when you get time, could you take a quick look at this PR?

I've implemented the first pass for matrix integration

[Pratheek555]

Hey @Aryan-Verma-999!

If I am not wrong, there are some linting issues with the file packages/api/src/EmbeddedChatApi.ts, please do give it a check. If I am mistaken, ignore this message.

Thank you!

[Spiral-Memory]

Hi @Aryan-Verma-999,
Could you please format it using Prettier? Thanks!

[Aryan-Verma-999]

Hi @Spiral-Memory !,
Thanks for the review! I've applied prettier formatting and verified that all linting checks pass. The changes have been pushed.
Please let me know if you need any other changes!

[Spiral-Memory]

@Aryan-Verma-999 Could you please attach a demo video showcasing all the features you’ve implemented? This would help us understand it better. Great work, by the way!

[Aryan-Verma-999]

Hi @Spiral-Memory ,

I've recorded a demo video showcasing all the implemented features. Here's what's demonstrated:

Features Demonstrated

1. Authentication & Connection
   • Single-click login with Matrix credentials
   • Automatic connection to Matrix homeserver
   • Successful sync with server
2. Room Management
   • Auto-joining configured Matrix room
   • Room info display (name, avatar)
3. Message History
   • Loading existing messages on connect
   • Correct message ordering (newest at bottom)
   • Display names shown for all users
4. Real-time Messaging
   • Sending messages to Matrix room
   • Receiving messages in real-time
   • No duplicate messages
5. Mode Switching
   • Easy toggle between rocketchat and matrix modes via the mode prop

demo-pr-1030.mp4

All core functionality is working as expected for public, unencrypted Matrix rooms.
Note: Encrypted rooms show a placeholder message ("⚠️ [Encrypted Message]") as E2EE support is not yet implemented.

Please let me know if you'd like me to demonstrate any specific scenarios or if you have any questions!

[Spiral-Memory]

Thanks, @Aryan-Verma-999. I'll go through it and post the updates. Thanks a lot for your contribution.

[Spiral-Memory]

The video looks great. In the description, you mentioned it can display avatar images and room avatars, so please share a screenshot of this with some pictures. It would also be helpful if the video could demonstrate two-way communication for better understanding, with both users being different, to see if it renders correctly all other modes. One small suggestion: instead of having a separate folder for matrix mode, consider naming it like the others, such as WithMatrix.

Great job so far; this might take some time for review and a few iterations, so be sure to collaborate.

[Spiral-Memory]

I think you’re using the Matrix JS-SDK but we don’t want to log in directly with Matrix credentials. Instead, we want to use the Rocket.Chat-built homeserver. The current implementation might not correct, so please check the homeserver setup. I should be able to log in with Rocket.Chat credentials and still send messages to Matrix, with the homeserver possibly running on your system to make this work.

Please have a look at : https://github.com/RocketChat/homeserver

[Aryan-Verma-999]

Thanks for pointing this out. I’ll switch the implementation to use the Rocket.Chat homeserver instead of direct Matrix credential login. I’ll go through the homeserver repo, set it up locally, and adjust the flow so users authenticate with their Rocket.Chat credentials while still being able to send messages to Matrix rooms. I’ll update the PR once I have this aligned