Skip to content

Commit

Permalink
Merge branch 'develop' into feat/pr-previews
Browse files Browse the repository at this point in the history
  • Loading branch information
devanshkansagra authored Oct 1, 2024
2 parents 53f677b + cbae92a commit 7acb27f
Show file tree
Hide file tree
Showing 156 changed files with 2,201 additions and 2,225 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ permissions:
pages: write
id-token: write

env:
env:
STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"

jobs:
build-and-deploy:
runs-on: ubuntu-latest
Expand Down
31 changes: 22 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,18 @@ _EmbeddedChat is a full-stack React component designed to integrate Rocket.Chat
</a>
</div>

## Try It Out 🚀

Explore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/

Test credentials:

- **Username:** test_acc
- **Password:** test_acc

## Installation and Usage

Installation and usage documentation could be found here [EmbeddedChat installation and usage](packages/react/README.md)
Installation and usage documentation could be found here [EmbeddedChat installation and usage](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup)

## Development

Expand Down Expand Up @@ -158,21 +167,25 @@ This environment offers a complete setup for developing and testing the `Embedde

## References

- Embedded Chat Development: [EC Development](packages/docs/embeddedchat_dev.md) – Explore development techniques for Embedded Chat.
- **Documentation Overview**: For a comprehensive overview of Embedded Chat, including installation, usage, and advanced topics, visit our [Documentation Page](https://rocketchat.github.io/EmbeddedChat/docs/).

Below are specific sections that cover various aspects of Embedded Chat:

- Embedded Chat Development: [EC Development](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) – Explore development techniques for Embedded Chat.

- Embedded Chat Setup: [Setup Instructions](packages/docs/embeddedchat_setup.md) – Start setting up Embedded Chat in your app.
- Embedded Chat Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup) – Start setting up Embedded Chat in your app.

- UI Elements: [Setup & Dev Guide](packages/docs/ui-elements.md) – Integration and customization of UI elements.
- UI Elements: [Setup & Dev Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/ui-elements) – Integration and customization of UI elements.

- Layout Editor: [Using the Editor](packages/docs/layout_editor.md) – Customize the chat interface with the layout editor.
- Layout Editor: [Using the Editor](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/layout_editor) – Customize the chat interface with the layout editor.

- EmbeddedChat RC Setup: [Setup Instructions](packages/docs/ec_rc_setup.md) – Guide for setting up Embedded Chat RC App.
- EmbeddedChat RC Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup) – Guide for setting up Embedded Chat RC App.

- Authentication: [Guide](packages/docs/authentication.md) – Configure and manage authentication for Embedded Chat.
- Authentication: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/authentication) – Configure and manage authentication for Embedded Chat.

- Theming Guide: [Guide](packages/docs/theming.md) – Guide to theming options and customization.
- Theming Guide: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming) – Guide to theming options and customization.

- Theming Technical: [Technical Overview](packages/docs/theming_technical.md) – Technical aspects of theming.
- Theming Technical: [Technical Overview](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/theming_technical) – Technical aspects of theming.

### Contributors

Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,8 @@
"husky": "^9.0.11",
"lerna": "^6.6.2",
"typescript": "^5.1.3"
},
"dependencies": {
"dompurify": "^3.1.6"
}
}
1 change: 1 addition & 0 deletions packages/docs/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.yarn/*
Binary file removed packages/docs/.yarn/install-state.gz
Binary file not shown.
37 changes: 19 additions & 18 deletions packages/docs/blog/EmbeddedChat-2024.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Google Summer of Code 2024, RocketChat

<div align="center">
<a href="https://summerofcode.withgoogle.com/programs/2024/projects/eVxOuKT2"><img src="https://github.com/user-attachments/assets/9705b330-c4f9-4061-8c71-114cfb5153bb" width="720" alt="google-summer-of-code"/></a>
<a href="https://summerofcode.withgoogle.com/programs/2024/projects/eVxOuKT2"><img src="https://github.com/user-attachments/assets/9705b330-c4f9-4061-8c71-114cfb5153bb" width="100%" alt="google-summer-of-code"/></a>
</div>

## 📘 Introduction
Expand Down Expand Up @@ -31,7 +31,7 @@ Explore a demonstration of the latest features and improvements. See firsthand h
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.

<p align="center">
<img src="https://github.com/user-attachments/assets/1f5da63d-b82e-497d-bade-cf88716297e8" width="720" alt="EC Integration"/>
<img src="https://github.com/user-attachments/assets/1f5da63d-b82e-497d-bade-cf88716297e8" width="100%" alt="EC Integration"/>
</p>

### Code Refactor: Separation of Concerns
Expand All @@ -45,39 +45,40 @@ Key updates to the EmbeddedChat repository include:
3. **Markup and UI-Kit Separation**: Markups and the UI Kit are organized into a separate library (monorepo).

<p align="center">
<img src="https://github.com/user-attachments/assets/b983d6c9-8190-4d5e-8a40-52588b07e7c3" width="720" alt="CSS styles in component.styles.js"/>
<img src="https://github.com/user-attachments/assets/b983d6c9-8190-4d5e-8a40-52588b07e7c3" width="100%" alt="CSS styles in component.styles.js"/>
<br/>
CSS styles are now in `component.styles.js`
</p>

<p align="center">
<img src="https://github.com/user-attachments/assets/77663956-2c74-4e54-a337-181abff094eb" width="720" alt="Separation into monorepo"/>
<img src="https://github.com/user-attachments/assets/77663956-2c74-4e54-a337-181abff094eb" width="100%" alt="Separation into monorepo"/>
<br/>
Separation into monorepo for `ui-elements`, `markups`, and `ui-kit`
</p>

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](https://github.com/RocketChat/EmbeddedChat/assets/78961432/a399defd-cae7-495a-9f88-11f4b518df00)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/BEpQYl9Y_z0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


### 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](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d9fea331-fa32-44df-8322-36c9fb2baa6c)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/XtOgYnM-F58" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[Bubble Variant](https://github.com/RocketChat/EmbeddedChat/assets/78961432/06d61e66-8f17-423b-a339-1728323661b3)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/D_rskRbEatk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p align="center">
<img src="https://github.com/RocketChat/EmbeddedChat/assets/78961432/826cf806-1d9c-4626-a3c2-4f00d8557389" width="720" alt="Automatically generated colors in usernames in dark mode + popup instead of sidebar"/>
<img src="https://github.com/RocketChat/EmbeddedChat/assets/78961432/826cf806-1d9c-4626-a3c2-4f00d8557389" width="100%" alt="Automatically generated colors in usernames in dark mode + popup instead of sidebar"/>
<br/>
Automatically generated colors in usernames in dark mode + popup instead of sidebar
</p>

<p align="center">
<img src="https://github.com/RocketChat/EmbeddedChat/assets/78961432/b7efade3-b041-4311-a8a7-3e642b6f0de1" width="720" alt="Automatically generated colors in usernames in light mode + popup instead of sidebar"/>
<img src="https://github.com/RocketChat/EmbeddedChat/assets/78961432/b7efade3-b041-4311-a8a7-3e642b6f0de1" width="100%" alt="Automatically generated colors in usernames in light mode + popup instead of sidebar"/>
<br/>
Automatically generated colors in usernames in light mode + popup instead of sidebar
</p>
Expand All @@ -86,7 +87,7 @@ The theming system follows a convention similar to the ShadCN theming system. Us

A demonstration video is available here:

[Theme Converter](https://github.com/user-attachments/assets/9078260f-1933-4be6-b019-61e9ac54be7d)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/bB2zzlHhIdY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

For further details on theming, you can visit the [documentation](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming.md) or check out the [technical guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming_technical.md) for insights on how theming is implemented in the repository.

Expand All @@ -96,7 +97,7 @@ EmbeddedChat authentication security has been enhanced through the use of HTTP-O

A video demonstration is available here:

[Http-Only-Cookie Auth](https://github.com/RocketChat/EmbeddedChat/assets/78961432/24fdf4bf-34b5-4e66-b045-802d6fc428dd)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/k1-X-9l67H4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

For more information on authentication, refer to the [authentication guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/authentication.md).

Expand All @@ -113,25 +114,25 @@ Testing was conducted across three distinct RC apps, with video demonstrations p

1. **Reminder RC App**:

[Reminder App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/eeb17fd6-68f2-4113-8ef1-dc0faf32ca05)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/OAertgChvCA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. **Notion RC App**:

[Notion App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/71d9baa1-a54d-4077-9fbd-f7e005742f77)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/nYxgsXtod50" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

[News App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d3f611b0-3205-483f-b00a-9800893b98fb)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/LtZESjEnEqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 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](https://github.com/RocketChat/EmbeddedChat/assets/78961432/8f2e5027-2a8d-4723-8c2b-33ae7cbf9336)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/72OBBWMAMOk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[CSS Validation Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/2eaa4e50-ad38-4ac8-8cc7-d8eebd875f26)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/rkuSF9qOG2U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

To set up the EmbeddedChat RC App, follow this guide: [EmbeddedChat RC App Setup](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/ec_rc_setup.md).

Expand All @@ -141,7 +142,7 @@ I also worked on a new sub-project called `layout-editor` during GSoC to enhance

A video demonstration showcases the features:

[Layout Editor Demo](https://github.com/user-attachments/assets/3f846616-bf33-49ca-95c7-3a6e98685476)
<iframe width="100%" height="392" src="https://www.youtube.com/embed/vhxsGopMGA8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

To learn more about the layout editor, visit the guide: [Layout Editor Guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/layout_editor.md).

Expand Down Expand Up @@ -201,4 +202,4 @@ Interested in chatting about GSoC, Rocket.Chat, or open-source adventures? I'm a

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

0 comments on commit 7acb27f

Please sign in to comment.