Setting up a Rocket.Chat development environment allows you to contribute to the platform’s development. This document will walk you through the essential steps to get your development environment up and running efficiently on Windows and Linux. Prerequisites Linux Windows At least 12GB RAM is required for building in a development environment. For deployment and other uses, 2GB RAM suffices Use a standard user account (not root) for setup. Avoid using sudo to prevent potential file permission issues The sample Linux distribution for this guide is Ubuntu. However, the steps are similar for other Linux distributions. Software requirements Windows 10, version 2004 or above Install and configure WSL 2 following the Microsoft documentation . The default Linux distribution to be installed is Ubuntu. Download and install the latest Linux kernel updates Install nvm to manage your Node.js version Machine requirements To set up Rocket.Chat development environment, you'll

The Rocket.Chat Mobile App is built using React Native, allowing you to develop Android and iOS applications from a single codebase. Setting up the development environment requires you to download and install some dependencies. Maintain an active internet connection throughout the installation process. Prerequisites Before setting up, confirm that these tools are installed and running correctly on your device: Git Node.js Yarn (recommended instead of npm) macOS with XCode Command Line Tools to run the iOS version, or the Android Studio to run the Android version. A Rocket.Chat workspace URL—you can set up a development server environment or deploy a workspace using any of the deployment methods. Follow the React Native CLI quickstart documentation for your operating system to set up your React Native environment. This is necessary as Rocket.Chat does not support Expo-managed flow. Set up the codebase Clone the GitHub repository and

Before an app can be listed in the Rocket.Chat Marketplace , it must undergo a thorough review process. This process includes a comprehensive investigation into the app's authenticity, accuracy, and technical proficiency. Thus, it is crucial to ensure that your app contains high-quality content, appropriate screenshots, and optional videos that accurately describe its functionality. To successfully navigate the publishing process, adhering to a specific set of guidelines regarding app content is essential. Note: Please keep in mind that these guidelines are subject to change. If you have any questions or concerns about our review process, please contact us at [email protected]. Our review team utilizes the following guidelines to evaluate the written content of your app and determine if it meets our standards for marketplace uploads. Adhering to these guidelines will help you avoid potential rejection or delays in the app review process. Additionally, following these guidelines

The table below contains the email-related events, as well as the purpose of each event. If you want to execute actions based on email events, you can use any of the events mentioned below as an event interface. Interface Description IPreEmailSent The event interface allows apps to register as a handler of the IPreEmailSent event. This event is triggered before the mailer sends an email. To prevent the email from being sent, you can throw an error with a message specifying the reason for rejection.

Rocket.Chat's architecture is a comprehensive, multi-component system designed for robustness, flexibility, and scalability. The separate components (modules) can function independently but are designed to work together. For instance, organizations can integrate specific modules like video conferencing or file-sharing functionalities based on their needs, ensuring a customized and efficient communication platform. Based on a client-server model, the server component is written in JavaScript using Node.js and uses MongoDB for data storage. This architecture ensures high performance and real-time communication, making it suitable for various use cases, whether deployed on-premises or in the cloud. For example, businesses can deploy Rocket.Chat to facilitate seamless real-time collaboration across different departments, and customer support teams can leverage Rocket.Chat to provide instant assistance to clients, ensuring prompt resolution of queries. This document describes the architectural components for our Premium plans, Community workspaces, and standard components

Rocket.Chat values the accuracy and relevance of its documentation to ensure users and developers can effectively utilize the platform. Maintaining top-notch documentation is a collaborative effort involving the readers, users, and the documentation team. As a result, we welcome your feedback to help us improve. Here’s how you can leave feedback on the Rocket.Chat documentation: Feedback prompt: At the end of each document, there is a prompt asking if the document was helpful, with options for "Yes" or "No." Positive feedback: If you select "Yes," you will be prompted to leave a comment. We urge you to provide your email address so our team can contact you for further clarification if needed and to keep you informed about the status of your feedback. Constructive criticism: If you select "No," you will see prepared options from which you can choose. If these options don’t fully capture

Now you have finished creating your Rocket.Chat app , and successfully tested it locally. Now, you are ready to submit your app to the marketplace for users to explore. Prerequisites There are two ways to begin the process of submitting your app, via the Apps-Engine CLI and via the Marketplace publisher portal . For both these methods, you must have a Marketplace Publisher portal account and a Rocket.Chat Cloud account . Create a Rocket.Chat Cloud account Go to https://cloud.rocket.chat/register to create your Rocket.Chat Cloud account. Enter your name, email address, and password. Make sure to accept the Rocket.Chat terms and conditions  and privacy policy . Click Next. You are notified that an email has been sent with the confirmation link to sign in to your cloud console. Next, go to your inbox and confirm your email address by clicking the link we sent. Your

This document will show how to register a public API endpoint that receives data from external HTTP requests. The data received from the endpoint will then be forwarded to the #general channel. Register the API endpoint Create a new Rocket.Chat app from scratch using the command rc-apps create and name it RocketChatTester . If the response indicates that rc-apps is an unrecognized command, refer to the getting started document to use Rocket.Chat Apps-Engine. Once the app is created, open it in your preferred code editor. In the main class, RocketChatTesterApp.ts , implement the extendConfiguration method. This method uses configuration.api.provideApi to register a new API endpoint new Endpoint(this) . Add the following code to achieve this: // Main App Class import { IAppAccessors, IConfigurationExtend, ILogger } from '@rocket.chat/apps-engine/definition/accessors'; import { ApiSecurity, ApiVisibility } from '@rocket.chat/apps-engine/definition/api'; import { App } from '@rocket.chat

In this development phase, you'll explore troubleshooting techniques to ensure your application functions seamlessly. You'll gain valuable insights and strategies for identifying, isolating, and rectifying issues that may arise during the development process. Troubleshooting Install node-gyp Follow the installation instructions on node-gyp README . If you encounter package failures, it is advisable to conduct a thorough cross-check to ensure that the specified packages are readily available within your environment. Windows macOS Ubuntu Fedora For Windows users, the second option outlined in the node-gyp installation guide, which involves installing Visual Studio, might be necessary . Additionally, installing Xcode Command Line Tools is essential. To install, run this command: xcode-select --install Alternatively, if you already have the full Xcode installed, navigate to Xcode -> Open Developer Tool -> More Developer Tools to get it. This step will install clang , clang++ , and make Install these packages: build-essential libevas-dev

Customizing colors are applicable from Rocket.Chat v6.0 One of the key aspects of white-labeling your Rocket.Chat workspace is the ability to customize colors. This feature allows you to ensure that your Rocket.Chat workspace aligns with your brand's color palette, further enhancing the sense of brand consistency and identity. Rocket.Chat provides a comprehensive list of color variables that you can adjust to match your brand's color scheme. These variables control various workspace elements, including stroke colors, surface colors, font colors, status colors, shadow colors, and button colors. Colors are customizable through the custom CSS field in the admin panel. Go to Administration > Workspace > Settings > Layout > Custom CSS . Token name button-background-primary-default Token anatomy button : UI elements it's responsible for. background : part of this UI element. primary : type of UI element. default : state of this UI element. Overwrite existing variables Append

In this section, you will learn about some more features that you can add to your apps. OAuth2 Client : Handle OAuth2 authentication for your apps directly within Rocket.Chat. Scheduler API : Schedule tasks in your app. Registering API endpoints : Receive data from external HTTP requests. NPM Package Support (Experimental) : Apps include a subset of NPM packages as dependencies to be used at runtime.

This documentation will guide you through setting up your Rocket.Chat Omnichannel Livechat development environment. Prerequisites Ensure you have the following installed on your device. Git Node.js Yarn is recommended instead of npm. Set up Livechat This Livechat platform is a minimal, lightweight application developed with Preact . It is a critical feature of Rocket.Chat Omnichannel capability as it facilitates communication between your agents and visitors. This setup is done assuming you have a Rocket.Chat server running. We will use a local instance at http://localhost:3000 for this guide. To set up the Omnichannel Livechat, Clone the Livechat source code from the GitHub repository by running this command: git clone https://github.com/RocketChat/Rocket.Chat.git Navigate to the Livechat folder in the cloned directory. cd Rocket.Chat cd packages/livechat Install dependencies by running: yarn You can check the recommended version of node and yarn

is used to specify where the blocks can be rendered. It works with the Livechat client and in the Rocket.Chat client. Supported surfaces : Messages, contextual bars, modals Field Type Required? Description appId , blockId String No See Parameter details . type String Yes The type of the block, in this case, the value is conditional render Array[{}] Yes This array contains the blocks that will be displayed. The options are: actions callout context divider image input preview section tab_navigation when Array[] No Determine where the blocks will be displayed. The options are livechat and rocket.chat . Example of a conditional block The following example shows the block in a message surface: { type: 'conditional', render: [ { type: 'section', text: { type: 'plain_text', text: 'Conditional block' } } ], when: { engine: ['rocket.chat', 'livechat'] } } For more examples on using these blocks, see Using UIKit Blocks . See the Parameter details section to learn more about the common

We, as contributors and maintainers, commit to creating a welcoming and inclusive environment for everyone participating in our project and community, irrespective of their age, size, disability, ethnicity, gender, experience, nationality, appearance, race, religion, sexual identity, and orientation. Our standards Positive behaviors include using inclusive language, respecting diverse perspectives, accepting constructive feedback, prioritizing community interests, and showing empathy. Unacceptable behaviors include using sexualized language or imagery, trolling, making derogatory comments or personal/political attacks, harassing others publicly or privately, disclosing others' private information without consent, and any other unprofessional conduct. Our responsibility Project maintainers must clarify acceptable behavior standards and fairly address any unacceptable behavior. They have the authority to modify or remove comments, commits, code, wiki edits, issues, and other contributions not in line with the Code of Conduct. They can also temporarily or permanently ban contributors for any behavior deemed inappropriate, threatening, offensive, or harmful. Scope This Code

String No The initial value of the field. multiline Boolean No A flag that indicates whether the field should be a single line (default) or a larger text area. Example of a plain_text_input block element The following example shows the text input element: { type: 'input', label: { type: 'plain_text', text: 'Plain text input' }, element: { type: 'plain_text_input', appId: appId, blockId: 'text_input_block', actionId: 'text_input_action', } } static select menu In a static select menu, you need to define a set of options that a user can choose from. Supported surfaces : Messages, contextual bars, modals Compatible blocks : section , actions Field Type Required? Description type String Yes The type of the block element, in this case, static_select . actionId , appId , blockId String Yes See Parameter details . placeholder Object{} Yes A placeholder text for the input ( plain text object). initialValue String No The initial value selected ( value field from

We're thrilled that you're interested in contributing to Rocket.Chat! Your help is invaluable to us, whether you're a seasoned open-source contributor or just starting out. If you're new to the open-source world, we recommend starting with  GitHub's comprehensive guide  to familiarize yourself with the basics. And if it's your first time contributing to Rocket.Chat, please go through our Code of Conduct and contribution process . Getting started Our projects are readily available for you to explore and contribute to. You can find them here . Once you've found a project that piques your interest, navigate to the Issues tab. If you come across an issue you'd like to work on, simply leave a comment. We'll mark you as the Assignee to the issue and add an In Progress label . If you're already working on a pull request for

❌ Incorrect example of component composition: export const VideoConfMessage: ComponentStory = () => (                                     My Text             ); ✅ Correct example of component composition: const VideoConfMessage = ({ ...props }): ReactElement => (     ); Provide hooks as helpers In the following example, the useVideoConfControllers hook is provided as a helper to manage the state of the popup's controllers. export const useVideoConfControllers = (     initialPreferences: controllersConfigProps = { mic: true, cam: false }, ): { controllersConfig: controllersConfigProps; handleToggleMic: () => void; handleToggleCam: () => void } => {     const [controllersConfig, setControllersConfig] = useState(initialPreferences); const handleToggleMic = useCallback((): void => {         setControllersConfig((prevState) => ({ ...prevState, mic: !prevState.mic }));     }, []);     const handleToggleCam = useCallback((): void => {         setControllersConfig((prevState) => ({ ...prevState, cam: !prevState.cam }));     }, []);     return {         controllersConfig,         handleToggleMic,         handleToggleCam,     }; }; const { controllersConfig } = useVideoConfControllers(); return (                                                                                                      ); Understanding the component and defining the scope New components typically emerge from requirements put forth by the Product Design Team. The front-end engineer holds the responsibility of assessing the genuine necessity of such components. Due to the substantial effort involved in creating a new component, it is prudent to collaborate with product managers

Rocket.Chat’s WhatsApp apps provide a convenient way to receive real-time updates on the status of your messages. Keeping track of the delivery status for outgoing WhatsApp messages is crucial for effective communication and customer engagement. To start receiving these updates, go to the WhatsApp app that you are using and follow these steps: Go to the Settings tab and enter a value for the Message Status Endpoint URL . The app sends a request with the status payload to the specified URL each time your message statuses, such as when it is sent, delivered, and read. Enable Allow Quote Messages settings. You can choose to filter the message status updates you receive at the Message Status Endpoint URL based on the message type. Go to Filter Message Status settings and select from the following options: All : Receive the status of all messages. Regular Messages : Receive the status of

Starting from Apps-Engine v1.28.0 (released in Rocket.Chat v4.0), Rocket.Chat Apps include a subset of NPM packages as runtime dependencies. While the exact list of supported packages cannot be specified due to the vast number of options available, here are some general guidelines: Utility packages that are not dependent on NodeJS' native modules should work (for example, lodash , momentjs , etc). Packages that create any server, be it HTTP, TCP, UDP, or IPC, will not work (for example, express , hapi , etc). Packages that interact with the fs and os modules will not work. If a package that should be compatible is not working as expected, open an issue in the Rocket.Chat.Apps-engine repository and the team will check it out. When using NPM packages in your app, make sure to use the latest rc-apps version - it is responsible for bundling the code of

context.getInteractionData(); // If you have multiple action buttons, use `actionId` to determine // which one the user interacted with if (actionId === 'my-action-id') { const blockBuilder = modify.getCreator().getBlockBuilder(); return context.getInteractionResponder().openModalViewResponse({ // this is deprecated, use the "openSurfaceVew" method instead title: blockBuilder.newPlainTextObject('Interaction received'), blocks: blockBuilder.addSectionBlock({ text: blockBuilder.newPlainTextObject('We received your interaction, thanks!') }).getBlocks(), }); } return context.getInteractionResponder().successResponse(); } } The IUIKitInteractionHandler interface is used to handle the interactions. The executeActionButtonHandler method is derived from this interface. The parameters within this method capture the interaction details. After a user clicks the action button (this is the interaction), the modal is displayed to the user (response to the interaction). Now deploy and test the app again. You will see that when you click the action button that we had registered, a modal named Interaction received opens with the message We received your interaction, thanks! . You can also view the Logs