Skip to main content

Google Summer of Code 2024, RocketChat

· 8 min read
google-summer-of-code

📘 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.

EC Integration

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 in component.styles.js

CSS styles are now in component.styles.js

Separation into monorepo

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 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:

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

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

Automatically generated colors in usernames in light 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:

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:

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:
  1. Notion RC App:
  1. News Aggregation App (tested multi-select functionality):

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:

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:

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

🚀 Contributions​

GSoC Contributions to EmbeddedChat​

PR IDTitle
576Refactor, Restructure, and Fix Bugs (#576)
579UI Theming Upgrade and RC-like Redesign (#579)
581Add Curved Bubble Variant Styles (#581)
584More Customization: Popup/Sidebar and Username Color Options (#584)
589Fix ChatInput Bugs, Improve Experience (#589)
590Enhance Security with HTTP-Only Cookies (#590)
591Remove Unused Files (#591)
593UI-Kit Integration and Action Processing (#593)
594Auto Login Improvements and Loading Screens (#594)
599Remote EmbeddedChat Settings Configuration (#599)
601Add CSS Dimension Validation (#601)
602Documentation Improvements (#602)
604Separate Component Monorepo (UI-Elements) (#604)
606Reduce Package Size of Component Monorepo (#606)
607Add Real-Time Layout Editor with Drag-and-Drop (#607)

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!

RoleZishan Ahmad – GSoC Participant
AffiliationRocket.Chat
ProjectEmbeddedChat 2024
GitHub@Spiral-Memory
LinkedIn@zishanahmad72
Creative Spacespiral-memory.netlify.app
Emailzishan.barun@gmail.com
Rocket.Chatzishan.ahmad

📌 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.