Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhinavkrin/gsoc-rocketchat-2023
Final Report of my GSoC 2023 Project at Rocket.Chat
https://github.com/abhinavkrin/gsoc-rocketchat-2023
Last synced: 1 day ago
JSON representation
Final Report of my GSoC 2023 Project at Rocket.Chat
- Host: GitHub
- URL: https://github.com/abhinavkrin/gsoc-rocketchat-2023
- Owner: abhinavkrin
- Created: 2023-09-24T12:08:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-25T07:29:09.000Z (about 1 year ago)
- Last Synced: 2023-09-25T12:04:31.344Z (about 1 year ago)
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Google Summer of Code 2023, RocketChat
Create a ready-to-go easy to embed mini-chat React component.
I worked on a project called [EmbeddedChat](https://github.com/RocketChat/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
```
// 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')
```
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;
login(userOrEmail: string, password: string, code: string): Promise<{
status: string;
me: any;
} | undefined>;
logout(): Promise;
connect(): Promise;
addMessageListener(callback: (message: any) => void): Promise;
removeMessageListener(callback: (message: any) => void): Promise;
addMessageDeleteListener(callback: (messageId: string) => void): Promise;
removeMessageDeleteListener(callback: (messageId: string) => void): Promise;
addTypingStatusListener(callback: (users: string[]) => void): Promise;
removeTypingStatusListener(callback: (users: string[]) => void): Promise;
addActionTriggeredListener(callback: (data: any) => void): Promise;
removeActionTriggeredListener(callback: (data: any) => void): Promise;
addUiInteractionListener(callback: (data: any) => void): Promise;
removeUiInteractionListener(callback: (data: any) => void): Promise;
handleTypingEvent({ typingUser, isTyping }: {
typingUser: string;
isTyping: boolean;
}): void;
updateUserNameThroughSuggestion(userid: string): Promise;
updateUserUsername(userid: string, username: string): Promise;
channelInfo(): Promise;
close(): Promise;
getMessages(anonymousMode?: boolean, options?: {
query?: object | undefined;
field?: object | undefined;
}): Promise;
getThreadMessages(tmid: string): Promise;
getChannelRoles(): Promise;
sendTypingStatus(username: string, typing: boolean): Promise;
sendMessage(message: any, threadId: string): Promise;
deleteMessage(msgId: string): Promise;
updateMessage(msgId: string, text: string): Promise;
starMessage(mid: string): Promise;
unstarMessage(mid: string): Promise;
getStarredMessages(): Promise;
getPinnedMessages(): Promise;
pinMessage(mid: string): Promise;
unpinMessage(mid: string): Promise;
reactToMessage(emoji: string, messageId: string, shouldReact: string): Promise;
reportMessage(messageId: string, description: string): Promise;
findOrCreateInvite(): Promise;
sendAttachment(file: File, fileName: string, fileDescription?: string, threadId?: undefined): Promise;
me(): Promise;
getChannelMembers(): Promise;
getSearchMessages(text: string): Promise;
triggerBlockAction({ type, actionId, appId, rid, mid, viewId, container, ...rest }: any): Promise;
getCommandsList(): Promise;
execCommand({ command, params }: {
command: string;
params: string;
}): Promise;
}
```
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
| PR ID | Title with Link |
| --- | ----------------------------------------------------- |
| 217 | [IMPROVE] Project-restructure [Link](https://github.com/RocketChat/EmbeddedChat/pull/217) |
| 218 | React bootstrap [Link](https://github.com/RocketChat/EmbeddedChat/pull/218) |
| 222 | Theming Foundation Set up [Link](https://github.com/RocketChat/EmbeddedChat/pull/222) |
| 223 | [NEW] Button replacement for fuselage [Link](https://github.com/RocketChat/EmbeddedChat/pull/223) |
| 224 | UI refactoring/box [Link](https://github.com/RocketChat/EmbeddedChat/pull/224) |
| 226 | Improve/auth + ActionButton/Icon/Input Component [Link](https://github.com/RocketChat/EmbeddedChat/pull/226) |
| 227 | New/added apis [Link](https://github.com/RocketChat/EmbeddedChat/pull/227) |
| 228 | New/slash commands+UI kit+theming [Link](https://github.com/RocketChat/EmbeddedChat/pull/228) |
| 229 | New/html embed [Link](https://github.com/RocketChat/EmbeddedChat/pull/229) |
| 230 | New/message component+avatar [Link](https://github.com/RocketChat/EmbeddedChat/pull/230) |
| 232 | React Native Project [Link](https://github.com/RocketChat/EmbeddedChat/pull/232) |
| 233 | Fix/new icon components [Link](https://github.com/RocketChat/EmbeddedChat/pull/233) |
[View all PRs to EmbeddedChat](https://github.com/RocketChat/EmbeddedChat/pulls?q=is%3Apr+author%3Aabhinavkrin)
### My overall contributions to RocketChat
Besides EmbeddedChat I also contributed to other RocketChat Projects [GSoC Community Hub](https://github.com/RocketChat/GSoC-Community-Hub/pulls?q=is%3Apr+author%3Aabhinavkrin), [RC4Community](https://github.com/RocketChat/RC4Community/pulls?q=is%3Apr+author%3Aabhinavkrin), [RC4Conferences](https://github.com/RocketChat/RC4Conferences/pulls?q=is%3Apr+author%3Aabhinavkrin).
## 🎓 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](https://github.com/sidmohanty11), [LinkedIn](https://www.linkedin.com/in/sidmohanty11/), [Twitter](https://twitter.com/sidmohanty11)
## 🔗 Links
- Read my EmbeddedChat project proposal that got me accepted to GSoC [here](https://docs.google.com/document/d/1N6oySFsLxA9fSooTp8pHlCjnJwzVYfC8Cbems-z_uMY/edit?usp=sharing).
- My GSoC Presentation can be found [here](https://docs.google.com/presentation/d/1be7EnIjVjPN1vx11I06GeNqkDlWuynKZRKRYX9_ePOA/edit?usp=sharing).
- Watch the above presentation in video - [here](https://www.youtube.com/watch?v=Y5bbkxRyu4o) !
## ❤️ 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!
| **Student** | Abhinav Kumar |
|:--------------------|:-------------------|
| **Organization** | [Rocket.Chat](https://rocket.chat/) |
| **Project** | [EmbeddedChat 2023](https://summerofcode.withgoogle.com/programs/2023/projects/sUXGt89N) |
| **GitHub** | [@abhinavkrin](https://github.com/abhinavkrin) |
| **LinkedIn** | [abhinavkrin](https://www.linkedin.com/in/abhinavkrin) |
| **Twitter** | [abhinavkr_in](https://www.twitter.com/abhinavkr_in) |
| **Website** | [avitechlab.com](https://avitechlab.com) |
| **Email** | [email protected] |
| **Rocket.Chat** | [abhinav.kumar30](https://open.rocket.chat/direct/abhinav.kumar30) |