![]() ![]() NEW: sending and receiving msgs (the oop way) 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! 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 omCodePoint. Those two unicodes are letters indicating the country code of countries. If you come across this, just know flag emojis are a combination of 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. The flag emojis were breaking because the package was giving us two unicodes. ![]() 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. Still, we were just using state to control the message value which was ultimately a string. 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 You can check it out here. You need to be good at googling things!īut 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. But, luckily I found a cool combination I could use to provide joypixels emojis here and I used it. Rocket.Chat uses joypixels emoji, and there were not many npm libraries that supported this anymore. 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. “Scaling” these types of APIs requires a lot of engineering and Rocket.Chat has nailed it. 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. 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.Ĭonnecting to Rocket.Chat server and the real-time messaging functionality How to create and publish a react component library (not the storybook way) So, if you are interested you can check that out. I will not take much time here, I’ve already shared a blog where I stated how we did so. Initialization of the React component library 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. Provide your custom props and you are ready to go (within minutes)! You can just do,Įnter fullscreen mode Exit fullscreen mode With its robust backend connected with its simplistic yet intuitive Fuselage Design System UI, let us worry about setting up functionalities for you. 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. ![]() 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. It will provide a business solution to every sector of those who want to integrate/embed a chat application in their own application. It is tightly bound with the RocketChat server using Rocket.Chat nodejs SDK and its UI using RocketChat's Fuselage Design System. 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. Think like EmbeddedChat as a mini-version of Rocket.Chat packed in an npm module, as simple as that! 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. ![]()
0 Comments
Leave a Reply. |