updated docs links and contents

README.md

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

packages/docs/blog/EmbeddedChat-2024.md

@@ -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
@@ -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
@@ -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>
@@ -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.
 
@@ -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).
 
@@ -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).
 
@@ -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).
 
@@ -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.

packages/docs/docs/Development/ui-elements.md

@@ -1,6 +1,7 @@
 ---
 title: UI-Elements
 ---
+
 # UI-Elements
 
 ![Embedded Chat Demo](https://github.com/RocketChat/EmbeddedChat/assets/78961432/b85c7b8a-65e2-4a90-a843-f4072c942ac0)
@@ -9,6 +10,10 @@ This component is part of a monorepo, specifically within the `packages/ui-eleme
 
 ![image](https://github.com/user-attachments/assets/2fd76929-ce43-4bb3-8ea8-3a7318468923)
 
+### Try It Out 🚀
+
+Check out our Storybook showcasing all the components in action! Preview and test them here: https://rocketchat.github.io/EmbeddedChat/ui-elements/
+
 ### Development
 
 To develop and view the components:

packages/docs/docs/Usage/layout_editor.md

@@ -17,6 +17,10 @@ We offer a layout editor that lets you customize the design and appearance of th
 - **Resizable Sidebar**: Adjust the sidebar by dragging.
 - **Theme Lab**: Customize layout and theme settings, including palette colors and typography.
 
+### Try It Out 🚀
+
+Explore the Layout Editor to style and customize EmbeddedChat to your needs. Generate a theme object and pass it to EmbeddedChat via props. Start customizing here: [Layout Editor](https://rocketchat.github.io/EmbeddedChat/layout-editor/)
+
 ### Theme Lab
 
 In the Theme Lab, you can:

packages/docs/docs/introduction.md

@@ -18,6 +18,15 @@ _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
 
 Set up and start using the product in no time. Dive into our installation and usage docs [here](Usage/embeddedchat_setup.md)

packages/layout_editor/README.md

@@ -17,6 +17,10 @@ We offer a layout editor that lets you customize the design and appearance of th
 - **Resizable Sidebar**: Adjust the sidebar by dragging.
 - **Theme Lab**: Customize layout and theme settings, including palette colors and typography.
 
+### Try It Out 🚀
+
+Explore the Layout Editor to style and customize EmbeddedChat to your needs. Generate a theme object and pass it to EmbeddedChat via props. Start customizing here: [Layout Editor](https://rocketchat.github.io/EmbeddedChat/layout_editor/)
+
 ### Theme Lab
 
 In the Theme Lab, you can:
@@ -54,5 +58,5 @@ yarn preview # Preview build
 
 ### Additional Resources
 
-- For installation instructions of the EmbeddedChat RC App, visit [this guide](../rc-app/README.md).
-- For detailed prop usage, refer to [this guide](../react/README.md).
+- For installation instructions of the EmbeddedChat RC App, visit [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup).
+- For detailed prop usage, refer to [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup).

packages/react/README.md

@@ -132,7 +132,7 @@ This section of the guide aims to provide a detailed explanation of these props.
   />
   ```
 
-  However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](../docs/theming.md).
+  However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming).
 
   In Storybook, demonstrations of different themes and variants are provided in the 'Design Variants' section.
 
@@ -151,11 +151,11 @@ This section of the guide aims to provide a detailed explanation of these props.
   1. **Local Storage**: Store the `ec-token` in the browser's local storage.
   2. **HTTP-Only Cookie**: Store the `ec-token` as an HTTP-only cookie. [This method requires the installation of the EmbeddedChat RC App on the Rocket.Chat server]
 
-  For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication.md](../docs/authentication.md) file.
+  For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication guide](../docs/authentication.md) file.
 
 ## Development
 
-Follow this [EmbeddedChat Readme](https://github.com/RocketChat/EmbeddedChat) to setup EmbeddedChat for development.
+Follow this [development guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) to setup EmbeddedChat for development.
 
 ## Conclusion
 

packages/ui-elements/README.md

@@ -10,12 +10,16 @@ This component is part of a monorepo, specifically within the `packages/react` p
 
 ![image](https://github.com/user-attachments/assets/2fd76929-ce43-4bb3-8ea8-3a7318468923)
 
+### Try It Out 🚀
+
+Check out our Storybook showcasing all the components in action! Preview and test them here: https://rocketchat.github.io/EmbeddedChat/ui-elements/
+
 ### Development
 
 To develop and view the components:
 
 1. Clone the repository.
-2. Navigate to `packages/layout_editor`.
+2. Navigate to `packages/ui-elements`.
 3. Run the following commands:
 
    ```bash
@@ -92,4 +96,4 @@ background-color: ${mode === 'light'
       : lighten(colors.background, 1)};
 ```
 
-This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the EmbeddedChat `react` project [Readme.md](../docs/theming.md).
+This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the [theming guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming).