Create a ready-to-go easy to embed mini-chat React component.

Project Abstract    Deliverables    Demo    Contributions    Blog    Mentor    Links

I got a chance to work on a project called EmbeddedChat which is an in-app chat solution to web applications needing a chat component to increase user engagement.

From just an idea (proposal) to a complete product - 3 months of Google Summer of Code passed.

I intend to maintain this repository as a final report summary of my GSoC work and a quick guide for all future GSoC aspirants.

⭐ Project Abstract​

EmbeddedChat allows users to integrate RocketChat into their React web-based applications easily also providing an amazing developer experience while introducing in-app chat solutions.

🚢 Deliverables​

The following are the deliverables of this project:

1. Creation of UI using RocketChat Fuselage design system. [NEW]
2. Providing real-time chat functionality using RocketChat node.js SDK. [NEW]
3. Authentication using RocketChat’s Google SSO with an additional choice for <username, password> login (if the user already has an account). [NEW]
4. Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis.[NEW]
5. Using Rocket.Chat’s REST API to: [NEW]

• Get channel details
• Get the channel’s pinned messages
• Get the channel’s starred messages
• Get the channel attachments
• Send a message to the channel
• Get messages of the channel

6. Providing the functionality to pin/star/react to any message and mention users. [NEW]

All of the above deliverables were completed within the GSoC period. Yay! 🎉

📺 Demo​

Sneak Peak​

Providing real-time chat functionality using RocketChat node.js SDK​

https://user-images.githubusercontent.com/73601258/189498385-1346c5af-ec75-42a9-b864-f6f3b1e49d88.mp4

https://user-images.githubusercontent.com/73601258/189498400-942f337a-0ee8-48e5-b539-70dc49d1e3e7.mp4

Authentication using RocketChat’s Google SSO​

https://user-images.githubusercontent.com/73601258/180390437-b28ceacb-7f3f-4b80-84c1-4e1709b6cd35.mp4

Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis.​

Using Rocket.Chat’s REST API​

Took an object-oriented programming approach to build this. Created an API wrapper that is super simple to set up. Here is the code.

Providing the functionality to pin/star/react to any message and mention users.​

https://user-images.githubusercontent.com/73601258/189498498-602ddade-2883-43ac-91b7-9f63dc41cf84.mp4

https://user-images.githubusercontent.com/73601258/189498502-1310fb1c-293e-4bb4-a208-7b523dfdd23f.mp4

🚀 Contributions​

PRs​

My overall contributions at Rocket.Chat​

Besides my GSoC project I have been contributing prolifically to other Rocket.Chat projects - RocketChat.js.SDK, RC4Community, fuselage, Rocket.Chat.

😎 Blog​

I have been writing blogs regarding my progress in GSoC.

• My journey with open source and lessons learned
• [PART-I] GSoC 2022 | Rocket.Chat | EmbeddedChat
• [PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat
• Final Part: GSoC 2022 | Rocket.Chat | EmbeddedChat

🎓 Mentor​

A big big thank you to my mentor for the guidance before and throughout GSoC. 🙏

I learned beyond GSoC from him and am forever grateful to be mentored by him.

• Rohan Lekhwani - GitHub. LinkedIn

🔗 Links​

• Read my EmbeddedChat project proposal that got me accepted to GSoC here.

• I also complemented it with Figma designs. Check them out here.

• My GSoC Presentation can be found here.

• Watch the above presentation in video - here !

❤️ Support​

Learned something new today? Reciprocate the love. ⭐ this repo for good karma.

💬 Connect With Me​

Want to discuss about GSoC / Rocket.Chat / Open-source ? Let's connect!

Create a ready-to-go easy to embed mini-chat React component.

I worked on a project called EmbeddedChat which is an in-app chat solution that utilizes the RocketChat chat engine through its REST and real-time APIs to support powerful chat features like reactions, online presence, typing status, threads, and much more.

I would maintain this repository as the final report summary of my GSoC 2023 project and a quick guide for all future GSoC aspirants.

⭐ Project Abstract​

The goal of the project is to make a ready-to-use chat solution that could be integrated into any website, web app, or app. This project was a major refactoring and enhancement for the EmbeddedChat 2022 project.

🚢 Deliverables​

• Improve authentication - support all OAuth services
• Move to a mono repo - auth, api, react, react-native, HTML embed
• HTML embed feature
• Theming
• Improving API
• Support for slash commands
• Migrating from the fuselage to our own minimal components

Demo​

Sneak Peak​

EmbeddedChat integrated into my esportsweb.in website.

Moving to mono repo​

EmbeddedChat's new mono repo structure

• auth - The auth package includes functions to easily log into a Rocket chat server. Though it is used by embeddedchat's react and react-native client, developers can use this package for their own use cases.
• api - The api package includes functions that are all required to create a chat application using the Rocketchat server. It has functions like connect, login, sendMesage, pinMessage, starMessage, deleteMessage, triggerBlockAction, etc. to perform various operations. One can listen to new/updated message events by attaching event listeners using addMessageListener. There are other event listeners which could be added using addMessageDeleteListener, addTypingStatusListener, addActionTriggeredListener, addUiInteractionListener.
• react - The react package includes the react components to integrate EmbeddedChat.
• react-native - The react-native project aims at using EmbeddedChat in react native mobile apps.
• htmembed - With this project EmbeddedChat could be integrated into any web app by simply embedding an HTML snippet.

Storybook setup​

HTML Embedd Feature​

Simple integrate embedded chat by pasting html snippet into your website

<div id="embeddedchat"></div>
      <script src="http://127.0.0.1:4001/embeddedchat.js"></script>
      <script>
        // all props for the EmbeddedChat of @embeddedchat/react will go here
		// The config will be directly applied as props for the EmbeddedChat Component
        const config = {
            host: 'http://localhost:3000',
    		roomId: 'GENERAL',
            isClosable: true,
            setClosableState: true,
            moreOpts: true,
            channelName: 'general',
            anonymousMode: true,
            headerColor: 'white',
            toastBarPosition: 'bottom-end',
            showRoles: true,
            showAvatar: false,
            enableThreads: true,
            auth: {
                flow: 'MANAGED',
            },
        }
        EmbeddedChat.renderInElementWithId(config, 'embeddedchat')
      </script>

HTML Embedded in action

Theming​

We can customize EmbeddedChat by passing a custom theme object. Hence, it could take the look and feel of the app or website. We can also customize components by custom stylesheet or passing custom class names through the theme object.

Improving API​

Our api package exposes the EmbeddedChatApi class. It comes with a bunch of APIs that could be used to login, send, pin, edit, star or delete message, attach listeners for realtime events. It has the following structure:

class EmbeddedChatApi {
    host: string;
    rid: string;
    rcClient: Rocketchat;
    onMessageCallbacks: ((message: any) => void)[];
    onMessageDeleteCallbacks: ((messageId: string) => void)[];
    onTypingStatusCallbacks: ((users: string[]) => void)[];
    onActionTriggeredCallbacks: ((data: any) => void)[];
    onUiInteractionCallbacks: ((data: any) => void)[];
    typingUsers: string[];
    auth: RocketChatAuth;
    constructor(host: string, rid: string, { getToken, saveToken, deleteToken, autoLogin }: IRocketChatAuthOptions);
    setAuth(auth: RocketChatAuth): void;
    getAuth(): RocketChatAuth;
    getHost(): string;
    googleSSOLogin(signIn: Function, acsCode: string): Promise<any>;
    login(userOrEmail: string, password: string, code: string): Promise<{
        status: string;
        me: any;
    } | undefined>;
    logout(): Promise<void>;
    connect(): Promise<void>;
    addMessageListener(callback: (message: any) => void): Promise<void>;
    removeMessageListener(callback: (message: any) => void): Promise<void>;
    addMessageDeleteListener(callback: (messageId: string) => void): Promise<void>;
    removeMessageDeleteListener(callback: (messageId: string) => void): Promise<void>;
    addTypingStatusListener(callback: (users: string[]) => void): Promise<void>;
    removeTypingStatusListener(callback: (users: string[]) => void): Promise<void>;
    addActionTriggeredListener(callback: (data: any) => void): Promise<void>;
    removeActionTriggeredListener(callback: (data: any) => void): Promise<void>;
    addUiInteractionListener(callback: (data: any) => void): Promise<void>;
    removeUiInteractionListener(callback: (data: any) => void): Promise<void>;
    handleTypingEvent({ typingUser, isTyping }: {
        typingUser: string;
        isTyping: boolean;
    }): void;
    updateUserNameThroughSuggestion(userid: string): Promise<any>;
    updateUserUsername(userid: string, username: string): Promise<any>;
    channelInfo(): Promise<any>;
    close(): Promise<void>;
    getMessages(anonymousMode?: boolean, options?: {
        query?: object | undefined;
        field?: object | undefined;
    }): Promise<any>;
    getThreadMessages(tmid: string): Promise<any>;
    getChannelRoles(): Promise<any>;
    sendTypingStatus(username: string, typing: boolean): Promise<void>;
    sendMessage(message: any, threadId: string): Promise<any>;
    deleteMessage(msgId: string): Promise<any>;
    updateMessage(msgId: string, text: string): Promise<any>;
    starMessage(mid: string): Promise<any>;
    unstarMessage(mid: string): Promise<any>;
    getStarredMessages(): Promise<any>;
    getPinnedMessages(): Promise<any>;
    pinMessage(mid: string): Promise<any>;
    unpinMessage(mid: string): Promise<any>;
    reactToMessage(emoji: string, messageId: string, shouldReact: string): Promise<any>;
    reportMessage(messageId: string, description: string): Promise<any>;
    findOrCreateInvite(): Promise<any>;
    sendAttachment(file: File, fileName: string, fileDescription?: string, threadId?: undefined): Promise<any>;
    me(): Promise<any>;
    getChannelMembers(): Promise<any>;
    getSearchMessages(text: string): Promise<any>;
    triggerBlockAction({ type, actionId, appId, rid, mid, viewId, container, ...rest }: any): Promise<any>;
    getCommandsList(): Promise<any>;
    execCommand({ command, params }: {
        command: string;
        params: string;
    }): Promise<any>;
}

Demo playgroud for api package

Support for slash commands​

We have worked on supporting slash commands along with any UI interactions they perform.

https://github.com/abhinavkrin/GSoC-RocketChat-2023/assets/15830206/b4c0dd2e-e77f-49d5-8eb5-f27b1e011817

React Native​

Improving Auth​

We now support token-based authentication for EmbeddedChat. An app can pass the access token of the services that are configured in RocketChat to EmbeddedChat. It would be useful when the app does not want to show any additional login UI for EmbeddedChat.

https://github.com/abhinavkrin/GSoC-RocketChat-2023/assets/15830206/8c36b974-927f-4b12-bd62-2830763ec681

🚀 Contributions​

Pull requests to Embeddedchat​

View all PRs to EmbeddedChat

My overall contributions to RocketChat​

Besides EmbeddedChat I also contributed to other RocketChat Projects GSoC Community Hub, RC4Community, RC4Conferences.

🎓 Mentor​

A big big thank you to my mentor for the guidance and support before and throughout GSoC. 🙏 I learned beyond GSoC from him and am forever grateful to be mentored by him.

• Sidharth Mohanty - GitHub, LinkedIn, Twitter

🔗 Links​

• Read my EmbeddedChat project proposal that got me accepted to GSoC here.

• My GSoC Presentation can be found here.

• Watch the above presentation in video - here !

❤️ Support​

Learned something new today? Reciprocate the love. ⭐ this repo for good karma.

💬 Connect With Me​

Want to discuss about GSoC / Rocket.Chat / Open-source ? Let's connect!

📘 Introduction​

During my GSoC period, I worked on EmbeddedChat, a lightweight chat widget that uses the RocketChat engine's REST and real-time APIs to deliver comprehensive chat features, customizable options, and attractive theming capabilities.

⭐ Project Abstract​

The goal of this project was to develop a ready-to-use chat solution that could be integrated into any website, web app, or mobile app. In EmbeddedChat 2024, my focus was on enhancing the UI by making components modular and providing pre-built themes. The project also sought to ensure security through HTTP-Only cookie-based authentication, using RC-app as a bridge. I also worked on improving configuration capabilities, enabling the instance to be configurable through RC-app, and developed a real-time layout editor with drag-and-drop features, among other enhancements.

🚢 Deliverables​

• Redesign Embedded Chat for consistent CSS, logic separation, and monorepo component management.
• Upgrade theming system with prebuilt themes and enhanced customization.
• Boost security with HTTP-Only cookie authentication in Embedded Chat via RC-app.
• Enable admins to easily adjust all Embedded Chat settings in Rocket.Chat Workspace.
• Offer a drag-and-drop editor for admin UI configuration without coding.
• Enhance UI-Kit integration.
• Fix bugs and improve documentation.

📹 Showcase​

Explore a demonstration of the latest features and improvements. See firsthand how the updates enhance functionality and user experience.

Sneak Peek​

Here's a brief preview of EmbeddedChat integrated into a website, designed to demonstrate the functionality of RC apps without the need for local setup.

Code Refactor: Separation of Concerns​

Key updates to the EmbeddedChat repository include:

1. Separation of Components from Views: Standalone components have been moved to a ui-element monorepo with its own Storybook.

2. CSS Styles Separation: CSS styles are now in a component.styles.js file, providing a clear separation from core logic.

3. Markup and UI-Kit Separation: Markups and the UI Kit are organized into a separate library (monorepo).

CSS styles are now in component.styles.js

Separation into monorepo for ui-elements, markups, and ui-kit

The video below illustrates the development, usage, and setup of the ui-elements monorepo, and it also shows that EmbeddedChat functions as expected following this separation:

UI-Elements Storybook

UI Theming Upgrade: Prebuilt Themes and Style Variants​

The theming system has been enhanced with several prebuilt themes, ensuring a consistent use of theme colors across the repository. This replaces the previously inconsistent and varied color schemes.

Once the Storybook is running, you can explore and experiment with various designs within the Design Variants folder, including RCVariant, Bubble Variant, and Modern Variant. These options enable you to either use the prebuilt themes or draw inspiration to create your own. Below are images and videos demonstrating the different variants; note that the videos also highlight fixes introduced with these PRs:

RC Variant

Bubble Variant

Automatically generated colors in usernames in dark mode + popup instead of sidebar

Automatically generated colors in usernames in light mode + popup instead of sidebar

The theming system follows a convention similar to the ShadCN theming system. Users can generate themes from the ShadCN website or other sites that follow the same convention, then use the packages/react/tools/theme-generator.js to convert the theme into a supported format and apply it via the theme prop.

A demonstration video is available here:

Theme Converter

For further details on theming, you can visit the documentation or check out the technical guide for insights on how theming is implemented in the repository.

Enhanced Authentication with HTTP-Only Cookies​

EmbeddedChat authentication security has been enhanced through the use of HTTP-Only cookies for re-authentication. This approach adds an extra layer of protection by preventing access via inline JavaScript, thereby reducing the risk of potential attacks. To use this storage method, the EmbeddedChat RC app must be installed on the RC server, which acts as a bridge for saving and retrieving tokens. Once installed, you can test the feature using the Storybook SecureAuth option or by setting the secure: true prop during EmbeddedChat setup.

A video demonstration is available here:

Http-Only-Cookie Auth

For more information on authentication, refer to the authentication guide.

UI-Kit Improvement​

I enhanced the UI-Kit integration within EmbeddedChat by migrating it to a monorepo as a separate library. Key improvements include:

• Modularized Structure: Reorganized the UI-Kit folder structure for improved modularity.
• Action Processing: Added state and view update logic, along with parsing methods.
• Contextual Bar Support: Implemented support for the contextual bar.
• Component Enhancements: Added support for static select and multi-select elements with custom components and new component stories.

Testing was conducted across three distinct RC apps, with video demonstrations provided:

1. Reminder RC App:

Reminder App UI-Kit Test

2. Notion RC App:

Notion App UI-Kit Test

3. News Aggregation App (tested multi-select functionality):

News App UI-Kit Test

EmbeddedChat Remote Configurability​

I have added support for remote configuration of EmbeddedChat props, including themes, via the EmbeddedChat RC App. The app can also validate CSS dimensions provided in the settings. To try this feature, set up the RC app in your Rocket.Chat workspace and use the Storybook option WithRemoteOpt or pass the remoteOpt: true prop during EmbeddedChat setup.

The following videos demonstrate its usage:

Remotely Configure EC

CSS Validation Test

To set up the EmbeddedChat RC App, follow this guide: EmbeddedChat RC App Setup.

Layout Editor​

I also worked on a new sub-project called layout-editor during GSoC to enhance EmbeddedChat customizability. This tool enables users to customize the EmbeddedChat layout in real-time with drag-and-drop features, color configuration, and more. Once satisfied with their design, users can click the Generate Theme button to create a theme object, which can be applied by passing it into the theme prop during EmbeddedChat setup or by configuring it remotely if EmbeddedChat RC App is properly set up.

A video demonstration showcases the features:

Layout Editor Demo

To learn more about the layout editor, visit the guide: Layout Editor Guide.

🚀 Contributions​

GSoC Contributions to EmbeddedChat​

See all PRs for EmbeddedChat

In addition to working on EmbeddedChat, I've made contributions to several other RocketChat projects. Check out my pull requests for Apps.Notion, Rocket.Chat, and Fuselage.

🎓 A Special Thanks to My Mentor​

Thank you so much to Sidharth Mohanty for being an amazing mentor during GSoC. He’s been incredibly receptive to ideas, always available to help, and provides great guidance during our meetups. His encouragement to explore new areas has made this experience really rewarding. I’ve learned a lot from him and truly appreciate all his support.

You can connect with him on GitHub, LinkedIn, and Twitter.

🔗 Links​

Download and read my EmbeddedChat project proposal, which led to my GSoC acceptance, here.

❤️ Support​

Enjoyed what you learned today? Show your appreciation by starring this repo. ⭐

💬 Let's Connect​

Interested in chatting about GSoC, Rocket.Chat, or open-source adventures? I'm all ears!

📌 Closing Notes​

This repository contains the final report and serves as a guide for future contributors to the EmbeddedChat project, which was developed and improved during Google Summer of Code (GSoC) 2024. The final report details the solutions implemented during the project, while the guide provides insights and instructions for new contributors to effectively engage with and build upon the project's foundation.