[PART-I] GSoC 2022 | Rocket.Chat | EmbeddedChat

#javascript #react #opensource #webdev

This blog marks the start of a series I am going to write, sharing my journey in the Google Summer of Code Program, with some tips, learnings, and some design decisions which we (me and my mentor) took to shape the EmbeddedChat Project.

What is EmbeddedChat?

Think like EmbeddedChat as a mini-version of Rocket.Chat packed in an npm module, as simple as that!

If you need the wiki definition, EmbeddedChat is a full-stack React component node module of the RocketChat application that is fully configurable, extensible, and flexible for use. It is tightly bound with the RocketChat server using Rocket.Chat nodejs SDK and its UI using RocketChat's Fuselage Design System.

Why EmbeddedChat?

It will provide a business solution to every sector of those who want to integrate/embed a chat application in their own application. The fact being, whether its Google Meet, the games you play, or the e-commerce platforms you make, you at some point have thought I really need to chat and ask the other person for more details (in case of a shop, this is the reason why people still prefer to go to an offline store rather buying online) or you want to chat in games and store it for future reference. You don’t have any solution…. Until now!

Rocket.Chat now strives to provide you with its robust solution by providing a simple react component that you can embed in just about any application. With its robust backend connected with its simplistic yet intuitive Fuselage Design System UI, let us worry about setting up functionalities for you. You can just do,

<RCComponent />

provide your custom props and you are ready to go (within minutes)!

Did you think we stopped there?

Nope! We will provide you with an RCAPIWrapper which will be a frontend SDK of RocketChat that can be used within any framework or even vanilla JavaScript.

EmbeddedChat till now (July 1st)

Initialization of the React component library

I will not take much time here, I’ve already shared a blog where I stated how we did so. So, if you are interested you can check that out.

How to create and publish a react component library (not the storybook way)

Responsiveness

Making the EmbeddedChat responsive for all screens was an important task to cover and we added another option where the user can choose if he/she wants a fullscreen or minimized screen.

Connecting to Rocket.Chat server and the real-time messaging functionality

You may have some idea about real-time messaging functionality or heard about web sockets or the third-party providers such as pusher which provide us functionality to introduce real-time connections. “Scaling” these types of APIs requires a lot of engineering and Rocket.Chat has nailed it. It has its own API built on top of MeteorJS and has a concept of “Realtime API” which they have strengthened a lot in the past 7 years.

The EmojiPicker Component

Rocket.Chat uses joypixels emoji, and there were not many npm libraries that supported this anymore. But, luckily I found a cool combination I could use to provide joypixels emojis here and I used it. You need to be good at googling things!

But here is the main part! We thought to ourselves that we really need to parse emojis in the message box because that will improve UX and provide a way for mobile users to use their native emoji set. We were getting a unified property from the emoji picker package which is a 5 letter code that can be converted to an HTML entity by embedding it between &#x; You can check it out here.

Still, we were just using state to control the message value which was ultimately a string. The question was how could we parse this inside of the input box? Yes, dangerouslySetInnerHtml was an option I guess but we researched a bit and at last went with a better way, with a better package called he which is used to encode and decode HTML entities.

Did the story end there?

Nope. The flag emojis were breaking because the package was giving us two unicodes. I and my mentor had a brainstorming session during our weekly catch-up, we discussed the possibilities and how to convert two unicodes into a flag! Then after in-depth research about UTF-8 encoding we found the way. If you come across this, just know flag emojis are a combination of two unicodes. Those two unicodes are letters indicating the country code of countries. You can definitely go with an approach where you store each unicode in a js object and map through it to convert it into a native emoji or you can use String.fromCodePoint. But I found out a much easier way which was just to split the unicodes and embed them between ““, and at last, we managed to get all emojis working with the native ones!

PRs (merged and being reviewed)

[NEW] initialize project and base setup
NEW: issue and pr template
IMPROVE: Responsiveness
NEW: sending and receiving msgs (the oop way)
Parsing emojis in message box

To end

I started maintaining the project wiki and with time I would like to introduce full end-to-end documentation of all features that we are building, including the rationale behind architectural decisions we take. For the next weeks, we are planning to make a Google SSO Auth system that will be totally connected with RocketChat’s Auth environment and then move on to add API features like pinning, starring, and reacting to messages (with emojis).

I was also selected as the community member of the month (JUNE) in Rocket.Chat and I was invited to speak a few lines in their community call. It’s published on YouTube on Rocket.Chat’s own channel. Had a lot of fun. You can check it out here: