diff --git a/.tours/1---repository-overview.tour b/.tours/1---repository-overview.tour
index acdf7b9ccce0..9c44c779bc40 100644
--- a/.tours/1---repository-overview.tour
+++ b/.tours/1---repository-overview.tour
@@ -1,60 +1,56 @@
-{
- "$schema": "https://aka.ms/codetour-schema",
- "title": "1 - Repository-Overview",
- "steps": [
- {
- "file": "package.json",
- "description": "### 1. Welcome to the Rocket.Chat Code Tour! This tour aims to provide an overview of the *Rocket.Chat* codebase, its architecture, key features and how things are working. \n\n### 2. The code tour is designed for the Everyone, whether you're a developer looking to contribute, a student learning web development, or simply curious about Rocket.Chat's inner workings.\n\n### 3. We'll explore specific modules, functionalities, or important sections of the codebase in a structured manner, allowing you to understand how Rocket.Chat works.",
- "line": 2,
- "title": "Welcome"
- },
- {
- "directory": "packages",
- "description": "### packages \nThe \"package\" folder in the Rocket Chat project contains sharable code that can be used by different projects within the Rocket Chat ecosystem. It houses reusable modules, libraries, or components that follow a modular approach to code organization. The shared code is managed as a package with its own versioning system, allowing projects to depend on specific versions. The folder may include documentation, examples, tests, and quality assurance processes to ensure reliability and ease of use. By organizing sharable code in this folder, Rocket Chat promotes code reuse, modularity, and collaboration across projects.\n\nYou can also Visit [Here](https://developer.rocket.chat/open-source-projects/server/repository-structure#directory-structure) for structure"
- },
- {
- "directory": "ee",
- "description": "### ee (Enterprice Edition) \nThe \"ee\" folder in the Rocket Chat project contains code, features, and functionalities exclusive to the Enterprise Edition of Rocket Chat. It provides additional features tailored for larger organizations, such as advanced security options, compliance features, enhanced administration tools, and integrations with enterprise systems.\n\n**Additional features**: The \"ee\" folder includes code files that implement extra features and functionalities exclusive to the enterprise edition. These features are designed to meet the requirements of enterprise customers, such as advanced security options, compliance features, enhanced administration tools, integrations with enterprise systems, and more."
- },
- {
- "directory": "apps/meteor",
- "description": "### apps/meteor \n#### The \"apps/meteor\" folder is a significant part of the codebase and contains important code and imports related to the Meteor framework in the Rocket Chat project.\n\n- **Folder structure**: The \"apps/meteor\" folder may have a structured organization, with subfolders representing different aspects of the application. For example:\n - **Client**: This subfolder may contain code specific to the client-side implementation, such as UI components, templates, stylesheets, and client-side libraries.\n - **Server**: This subfolder may contain code that runs on the server-side, handling server operations like database interactions, API endpoints, and server-side functions.\n - **Lib**: This subfolder may contain reusable code and utilities that can be shared between the client and server.\n - **Methods**: This subfolder may contain code for server-side methods, which provide an interface for client-side code to interact with the server and perform operations securely.\n - **Public**: This subfolder may contain publicly accessible files, such as static assets (images, fonts, etc.) that can be served directly to clients.\n - **Private**: This subfolder may contain private files and assets that are only accessible to the server-side code.",
- "title": "apps/meteor"
- },
- {
- "directory": "apps/meteor/client",
- "description": "### apps/meteor/client \n\n\nIn Rocket Chat, the \"apps/meteor/client\" directory refers to the client-side code that is specific to the Meteor framework within the Rocket Chat application. It contains frontend-related code and resources that are responsible for rendering and handling the user interface on the client side.\n"
- },
- {
- "directory": "apps/meteor/client/components",
- "description": "### client/components \n\n#### This folder contains reusable UI components. These components are modular and can be used in different parts of the application to provide consistent and reusable user interface elements.\n\n- **Reusable UI components**: The folder houses code files that define reusable UI components, such as buttons, input fields, modals, cards, avatars, tooltips, or any other user interface element that can be utilized in multiple parts of the Rocket Chat application.\n\n\n- **Component structure**: Each component typically consists of a JavaScript or TypeScript file that contains the component's logic and functionality. It may also include associated stylesheets, templates, or configuration files specific to that component.\n\n\n- **Composition and customization**: Components can often be composed together to build more complex UI elements. Developers can leverage the components in the folder to assemble larger, composite components that cater to specific features or requirements of the Rocket Chat application. Components may also provide options for customization through props or configuration parameters.\n\n- **Consistency and UI guidelines**: The components in the \"client/components\" folder adhere to established UI guidelines and design patterns within the Rocket Chat project. They help maintain consistency in the user interface across different parts of the application and ensure a cohesive and intuitive user experience.",
- "title": "Client/components"
- },
- {
- "directory": "apps/meteor/client/lib",
- "description": "### apps/meteor/client/lib/ \n\n- ***This contains Code which can be used by both Server and Client part of application.***\n\n### A collection of objects that are reused on all of the client sides.\n#### This is to:\n- **Limit code duplication**\n- **Encourage contributors to use the code that is already existing in the codebase**\n- **Avoid re-implementing logic or re-create functions**"
- },
- {
- "directory": "apps/meteor/client/views",
- "description": "### The Best place to Start (The FrontEnd)\n\n### *If you are a beginner looking to contribute to Rocket Chat, the \"client/views\" folder is an ideal starting point. It offers a clearer understanding of the application's inner workings by tracing module imports and observing component usage. By exploring this folder, you can learn how different components are structured, styled, and interact with each other. It provides valuable insights into the UI construction, facilitating improvements and feature additions. Starting your contribution journey in the \"client/views\" folder will enhance your understanding of the codebase and enable effective contributions to the project.*\n\n- **This is the Folder where a combination of multiple components comes together in action to build a single Rocket.Chat page is seen by client-side(Frontend) users.**\n\n- **The root view here can be seen in apps/meteor/client/views/root/AppRoot.tsx [here](./apps/meteor/client/views/root/AppRoot.tsx) where execution in the front begins**\n",
- "title": "Best place for beginners"
- },
- {
- "file": "apps/meteor/client/views/root/AppRoot.tsx",
- "description": "### The Root File\n\n- Rocket Chat is the starting point for the frontend execution, Since Rocket chat's Frontend is build on React hence it has a Root from where execution Starts. It initializes the application and establishes the layout. It plays a crucial role in setting up the initial structure and behavior of the frontend.\n\n- If You want to deeply understand how things are working you can trace elements and methods used in here",
- "line": 12
- },
- {
- "directory": "apps/meteor/private",
- "description": "### Private Directory\n\n- All files inside a top-level directory called **private/** are only accessible from server code and can be loaded via the Assets API. This can be used for private data files and any files that are in your project directory that you don’t want to be accessible from the outside."
- },
- {
- "directory": "apps/meteor/public",
- "description": "### Public Directory\n\n- All files inside a top-level directory called **public/** are served as-is to the client.\n- It can be accessed by everyone and can be imported directly"
- },
- {
- "directory": "apps/meteor/server",
- "description": "### Server Directory\n\n- Server/ Directory is never loaded on the client side, People usually like to call it as backend and in Rocket.chat we use **NodeJs** as backend.\n- Most of the API Endpoints are created here and stored here through Database and in Rocket.chat we use **MongoDB** as Database\n- Any sensitive code that you don’t want served to the client, such as code containing passwords or authentication mechanisms, should be kept in the server/ directory.\n- *There are more Folders/Directories named as Server, Just remember all of them are servers*"
- }
- ]
+{
+ "$schema": "https://aka.ms/codetour-schema",
+ "title": "1 - Repository-Overview",
+ "steps": [
+ {
+ "file": "package.json",
+ "description": "### 1. Welcome to the Rocket.Chat Code Tour! This tour aims to provide an overview of the *Rocket.Chat* codebase, its architecture, key features and how things are working. \n\n### 2. The code tour is designed for the Everyone, whether you're a developer looking to contribute, a student learning web development, or simply curious about Rocket.Chat's inner workings.\n\n### 3. We'll explore specific modules, functionalities, or important sections of the codebase in a structured manner, allowing you to understand how Rocket.Chat works.",
+ "line": 2,
+ "title": "Welcome"
+ },
+ {
+ "directory": "packages",
+ "description": "### packages \nThe \"package\" folder in the Rocket Chat project contains sharable code that can be used by different projects within the Rocket Chat ecosystem. It houses reusable modules, libraries, or components that follow a modular approach to code organization. The shared code is managed as a package with its own versioning system, allowing projects to depend on specific versions. The folder may include documentation, examples, tests, and quality assurance processes to ensure reliability and ease of use. By organizing sharable code in this folder, Rocket Chat promotes code reuse, modularity, and collaboration across projects.\n\nYou can also Visit [Here](https://developer.rocket.chat/open-source-projects/server/repository-structure#directory-structure) for structure"
+ },
+ {
+ "directory": "ee",
+ "description": "### ee (Enterprice Edition) \nThe \"ee\" folder in the Rocket Chat project contains code, features, and functionalities exclusive to the Enterprise Edition of Rocket Chat. It provides additional features tailored for larger organizations, such as advanced security options, compliance features, enhanced administration tools, and integrations with enterprise systems.\n\n**Additional features**: The \"ee\" folder includes code files that implement extra features and functionalities exclusive to the enterprise edition. These features are designed to meet the requirements of enterprise customers, such as advanced security options, compliance features, enhanced administration tools, integrations with enterprise systems, and more."
+ },
+ {
+ "directory": "apps/meteor",
+ "description": "## apps/meteor \n### The \"apps/meteor\" folder is a significant part of the codebase and contains important code and imports related to the Meteor framework in the Rocket Chat project.\n\n### Back in 2015 RocketChat was built completely on Full stack Meteor Framework, But later on due to limitations and few problems with meteor framework, Hence RocketChat decided to move things and build their own optimised implementations of codes, and slowly started to remove some dependencies of Meteor Framework.\n\n- **Folder structure**: The \"apps/meteor\" folder may have a structured organization, with subfolders representing different aspects of the application. For example:\n - **Client**: This subfolder may contain code specific to the client-side implementation, such as UI components, templates, stylesheets, and client-side libraries.\n - **Server**: This subfolder may contain code that runs on the server-side, handling server operations like database interactions, API endpoints, and server-side functions.\n - **Lib**: This subfolder may contain reusable code and utilities that can be shared between the client and server.\n - **Methods**: This subfolder may contain code for server-side methods, which provide an interface for client-side code to interact with the server and perform operations securely.\n - **Public**: This subfolder may contain publicly accessible files, such as static assets (images, fonts, etc.) that can be served directly to clients.\n - **Private**: This subfolder may contain private files and assets that are only accessible to the server-side code.",
+ "title": "apps/meteor"
+ },
+ {
+ "directory": "apps/meteor/client",
+ "description": "## apps/meteor/client \n\n\n### In Rocket Chat, the \"apps/meteor/client\" directory refers to the client-side code that is specific to the Meteor framework within the Rocket Chat application. It contains frontend-related code and resources that are responsible for rendering and handling the user interface on the client side.\n\n#### Since it mostly contains Client-Side code it has an UI-Kit/hooks which is used for styling RocketChat's amazing User interface.\n\n#### We also have an library folder which contains very useful functions, sharable codes and modules such as chats, errors, database connections, rooms and settings.\n\n#### Similarly we have multiple components which combine and produce amazing UI and functionalities, which we would be discussing further"
+ },
+ {
+ "directory": "apps/meteor/client/components",
+ "description": "## client/components \n\n### This folder contains reusable UI components. These components are modular and can be used in different parts of the application to provide consistent and reusable user interface elements.\n\n### Components makes lifes easier as we don't have to create component again and again and it maintains consistency across different pages.\n\n- **Reusable UI components**: The folder houses code files that define reusable UI components, such as buttons, input fields, modals, cards, avatars, tooltips, or any other user interface element that can be utilized in multiple parts of the Rocket Chat application.\n\n\n- **Component structure**: Each component typically consists of a JavaScript or TypeScript file that contains the component's logic and functionality. It may also include associated stylesheets, templates, or configuration files specific to that component.\n\n\n- **Composition and customization**: Components can often be composed together to build more complex UI elements. Developers can leverage the components in the folder to assemble larger, composite components that cater to specific features or requirements of the Rocket Chat application. Components may also provide options for customization through props or configuration parameters.\n\n- **Consistency and UI guidelines**: The components in the \"client/components\" folder adhere to established UI guidelines and design patterns within the Rocket Chat project. They help maintain consistency in the user interface across different parts of the application and ensure a cohesive and intuitive user experience.",
+ "title": "Client/components"
+ },
+ {
+ "directory": "apps/meteor/client/lib",
+ "description": "## apps/meteor/client/lib/ \n\n- ***This contains Code which can be used by both Server and Client part of application.***\n\n### A collection of objects that are reused on all of the client sides.\n\n### Here we also perform server-side behaviour on the Client-side with the help of minimongo.\n\n### This is to:\n- **Limit code duplication**\n- **Encourage contributors to use the code that is already existing in the codebase**\n- **Avoid re-implementing logic or re-create functions**"
+ },
+ {
+ "directory": "apps/meteor/client/views",
+ "description": "# The Best place to Start (The FrontEnd)\n\n## *If you are a beginner looking to contribute to Rocket Chat, the \"client/views\" folder is an ideal starting point. It offers a clearer understanding of the application's inner workings by tracing module imports and observing component usage. By exploring this folder, you can learn how different components are structured, styled, and interact with each other. It provides valuable insights into the UI construction, facilitating improvements and feature additions. Starting your contribution journey in the \"client/views\" folder will enhance your understanding of the codebase and enable effective contributions to the project.*\n\n### The views is the directory where a combination of multiple components comes together in action to build a single Rocket.Chat page is seen by client-side(Frontend) users.\n\n### The root(Place from where execution/render starts) here can be seen in apps/meteor/client/views/root/AppRoot.tsx [here](./apps/meteor/client/views/root/AppRoot.tsx) where execution in the frontend begins\n",
+ "title": "Best place for beginners"
+ },
+ {
+ "file": "apps/meteor/client/views/root/AppRoot.tsx",
+ "description": "## The Starting Point\n\n### - AppRoot is an ReactElement, Which is an Layout, Responsible for rendering Child components, It initializes the application and establishes the layout. It plays a crucial role in setting up the initial structure and behavior of the frontend.\n\n- If You want to deeply understand how things are working you can trace elements and methods used in here",
+ "line": 12
+ },
+ {
+ "directory": "apps/meteor/private",
+ "description": "## Private Directory\n\n### This File is more Rocket.Chat specific, it contains informations about RocketCat bot, such as avatars, Transalations and some icons\n\n- All files inside a top-level directory called **private/** are only accessible from server code and can be loaded via the Assets API. This can be used for private data files and any files that are in your project directory that you don’t want to be accessible from the outside."
+ },
+ {
+ "directory": "apps/meteor/server",
+ "description": "### Server Directory\n\n- Server/ Directory is never loaded on the client side, People usually like to call it as backend and in Rocket.chat we use **NodeJs** as backend.\n- Most of the API Endpoints are created here and stored here through Database and in Rocket.chat we use **MongoDB** as Database\n- Any sensitive code that you don’t want served to the client, such as code containing passwords or authentication mechanisms, should be kept in the server/ directory.\n- *There are more Folders/Directories named as Server, Just remember all of them are servers*"
+ }
+ ]
}
\ No newline at end of file
diff --git a/.tours/2---how-a-message-is-sent.tour b/.tours/2---how-a-message-is-sent.tour
index 8509b85a7d43..0bfc23e154af 100644
--- a/.tours/2---how-a-message-is-sent.tour
+++ b/.tours/2---how-a-message-is-sent.tour
@@ -1,96 +1,96 @@
-{
- "$schema": "https://aka.ms/codetour-schema",
- "title": "2 - How a Message is sent (Client side)",
- "steps": [
- {
- "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
- "description": "## How a Message is Sent\n\n### *In this guide, we will explore the protocols, technologies, and tools involved in message sending. By understanding the fundamentals, you will gain confidence in navigating through the repository, Hence you will get more precise understanding of how a message is sent and what are methods being used, how are API calls made and much more. Let's embark on this exciting journey together to uncover the wonders of message sending!*",
- "line": 1
- },
- {
- "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
- "description": "## The Chat Room/Channel\n\n- **RoomBody.tsx** is a file that handles the rendering of the Chat Room/Channel on the client side. It brings together multiple components to enable user interaction and communication within the chat environment.\n\n- In this file, there are various methods implemented. Let's specifically examine the process of sending a message through the **MessageComposer** component.\n#### **Additionally, the code in \"RoomBody.tsx\" includes logic for performing various actions related to the chat functionality. These actions might include *sending messages*, *editing* or *deleting* messages, *managing user permissions*, and handling user interactions within the chat environment.**",
- "line": 53
- },
- {
- "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
- "description": "### Chat/Room Layout\n\n- The \"RoomBody.tsx\" file is straightforward to comprehend. You can easily navigate through the components and grasp their functionalities.\n\n- The majority of the code in this file revolves around message rendering and handling various chat-related actions.",
- "line": 543,
- "selection": {
- "start": {
- "line": 464,
- "character": 15
- },
- "end": {
- "line": 464,
- "character": 19
- }
- }
- },
- {
- "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
- "description": "### Composer Container\n\n- At the bottom of the \"RoomBody.tsx\" file, there is a component responsible for rendering the Message Composer. It accepts several props, including the room ID and subscription details. These props help verify whether the user is allowed to send messages in the given context.\n\n- The Message Composer component also manages the size and layout of the composer, allowing users to comfortably compose and send messages. It provides functionality to retrieve the previous and next messages for reference or navigation purposes.\n\n```\n \n```\n\n- **Note** ComposerContainer is also built from combination multiple components, we will explore components and see how data is sent.\n",
- "line": 635
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx",
- "description": "### The Composer Container\n\n- In the \"ComposerContainer\" component, different composers are rendered based on specific conditions:\n\n- For omnichannel rooms, the component renders the \"ComposerOmnichannel\" composer.\n - If the chat room is a VoIP room, the component renders the \"ComposerVoIP\" composer.\n - In the case of federated rooms, the component renders the \"ComposerFederation\" composer.\n - For anonymous users, the component renders the \"ComposerAnonymous\" composer.\n - If the chat room is read-only, the component renders the \"ComposerReadOnly\" composer.\n - Lastly, if there are any block-related restrictions, such as blocked users or blocking others, the component renders the \"ComposerBlocked\" composer.\n\n **1. Omnichannel**\n ```\n \n ```\n **2. VoIp**\n ```\n \n ```\n **3. Federation**\n ```\n \n ```\n **4. Anonymous Users**\n ```\n \n ```\n **5. Read Only**\n ```\n \n ```\n **6. Composer Blocked**\n ```\n \n ```",
- "line": 19
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx",
- "description": "## ComposerMessage Component\n### And at the end we have ComposerMessage which is responsible for rendering MessageBox(The Text composer at the footer of Channel/Room)",
- "line": 79
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
- "description": "## MessageBox Component\n\n- At the bottom of the code, there is a \"MessageBox\" component, which represents the actual chat message box. Its presence is crucial for the proper functioning of the Composer. If you were to comment out or remove the \"MessageBox\" component and run the server, you would observe that the Composer functionality would no longer be available.\n\n- The \"MessageBox\" component plays a pivotal role in enabling users to compose and send messages within the chat interface. It provides the necessary user interface elements, such as input fields and buttons, to facilitate message composition and submission.",
- "line": 81
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
- "description": "## The Message Box\n\n#### This file serves as the implementation of the Message Composer component, where you can explore and analyze how the code functions. By examining the code in this file, you can gain a better understanding of its inner workings.\n\n\n#### The Message Composer component receives several props, including *\"rid\"* (room ID), *\"tmid\"* (thread ID), and *\"onSend\"* (handler for sending messages), among others. These props provide necessary data and functionality for the composer to operate effectively.\n\n\n#### By inspecting and experimenting with the code, you can gain insights into how different aspects of the Message Composer are implemented and how they interact with other components and functions.\n\n- The MessageBox is using MessageBoxProps type for defining its type\n```\ntype MessageBoxProps = {rid: IRoom['_id']; ...};\nconst MessageBox = ({rid, tmid, ...}: MessageBoxProps): ReactElement => \n```",
- "line": 99
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
- "description": "## Sending Message\n\n#### Rocket chat's Room/channel message composers have multiple options such as uploading files, Writing text messages and Quoted messages, And then we have a send button at the right corner of composer which sends what you have entered.\n\n#### To understand how the send button works for sending a simple text message:\n\n- When the send button is clicked, an event is triggered.\n- The event handler associated with the send button retrieves the text message entered by the user.\n- The text message is then processed and prepared for sending.\n- The necessary information, such as the room/channel ID, sender details, and the text message content, is included.\n- The prepared message is sent to the server via an appropriate network request or function call.\n- The server receives the message and performs further processing, including broadcasting it to the relevant recipients in the room/channel.\nThe message is displayed in the chat interface for all participants to view.",
- "line": 347,
- "selection": {
- "start": {
- "line": 3,
- "character": 1
- },
- "end": {
- "line": 4,
- "character": 1
- }
- }
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
- "description": "## Message Input \n\n- The MessageComposerInput component plays a crucial role in handling user inputs within the message composer. It is responsible for capturing various types of inputs and encompasses multiple associated actions.\n\n#### The MessageComposerInput component enables users to interact with the message composer through different actions, such as:\n\n1. **Typing and Editing**: Users can enter and edit text within the composer input field.\n\n2. **Formatting**: It may support various formatting options like bold, italic, bullet points, etc., allowing users to apply formatting to their messages.\n\n3. **Mentions**: Users can mention specific individuals or groups within the message by using the appropriate syntax or by selecting them from a list.\n\n4. **Emojis**: It may provide an emoji picker or support emoji shorthand, allowing users to insert emojis into their messages.\n\n5. **Attachments**: Users can attach files or media to their messages, such as images, documents, or videos.",
- "line": 382
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
- "description": "### The Send Button\n\n- To send any message you need to click send button or hit Enter/Return key, when you click send button **handleSendMessage** method/function is called.\n```\n \n```",
- "line": 430
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
- "description": "## handleSendMessage Function\n\n- This is the function which sends messages further, it Gets text from chat.composer.text where chat is actully using useChat() which is coming from [ChatAPI](./apps/meteor/client/lib/chats/ChatAPI.ts) consisting of multiple functions.\n\n#### The handleSendMessage function is responsible for processing and sending the message to the intended recipients. It performs the following actions:\n\n1. Retrieves the content of the message entered by the user.\n2. Collects additional information needed for sending the message, such as the room/channel ID, sender details, and any associated metadata.\n3. Packages the message data into a suitable format for transmission.\n4. Initiates the process of sending the message, it goes through a **[WebSocket](https://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is)** connection.\n5. The message is then transmitted to the server for further processing.\n6. The server handles the message, ensuring it is delivered to the specified room/channel and received by the intended recipients.\n7. Once the message is successfully sent, it may trigger updates to the chat interface, including displaying the sent message in the conversation history.\n\n- Here we have \n ```\n const chat = useChat(); // useChat is a Context using ChatAPI.\n const text = chat.composer?.text ?? ''; //Text is getting information from useChat Context.\n\n onSend?.({ // onSend was recieved as prop and hence we are returning with some value and a boolean tshow\n\t\t\tvalue: text,\n\t\t\ttshow,\n\t\t});\n ```\n",
- "line": 159
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
- "description": "## The onSend Prop\n\n#### In the MessageBox component, the composerProps are passed, and we receive several methods back, including the onSend method. The onSend method takes a value and additional parameters such as tshow, and it returns a promise.\n\n#### Additionally, we utilize the useChat() hook to access various methods available in the ChatAPI. This allows us to perform actions related to chat functionality.\n\n#### By using the onSend method, we can trigger the sending of a message with the provided value. The tshow parameter might be used to display notifications or toasts related to the message sending process. The returned promise can be used to handle any asynchronous operations or to track the status of the message sending.\n\n#### The useChat() hook provides access to methods like sendMessage() or other chat-related functions. These methods can be utilized to perform various actions within the chat interface, such as sending, retrieving, or deleting messages. \n\n```\nawait chat?.action.stop('typing');\n const newMessageSent = await chat?.flows.sendMessage({ // Here the Text is sent to chat.flows.sendMessage \n\t text,\n\t tshow,\n });\n\tif (newMessageSent) onSend?.();\n```",
- "line": 27
- },
- {
- "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
- "description": "## onSend Function\n\n#### The onSend function sends a new message by calling the chat?.flows.sendMessage() method from useChat Context. It passes the value and tshow parameters as properties of an object and awaits the promise to resolve. The resolved value is stored in the newMessageSent variable.\n\n```\n const newMessageSent = await chat?.flows.sendMessage({ // Here chat.flows.sendMessage() is actually a property coming from ChatAPI. From here we are simply sending value to sendMessage property in ChatAPI\n text,\n tshow,\n\t});\n```\n",
- "line": 42
- }
- ]
+{
+ "$schema": "https://aka.ms/codetour-schema",
+ "title": "2 - How a Message is sent (Client side)",
+ "steps": [
+ {
+ "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
+ "description": "## How a Message is Sent\n\n### *In this guide, we will explore the protocols, technologies, and tools involved in message sending. By understanding the fundamentals, you will gain confidence in navigating through the repository, Hence you will get more precise understanding of how a message is sent and what are methods being used, how are API calls made and much more. Let's embark on this exciting journey together to uncover the wonders of message sending!*",
+ "line": 1
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
+ "description": "## The Chat Room/Channel\n\n- **RoomBody.tsx** is a file that handles the rendering of the Chat Room/Channel on the client side. It brings together multiple components to enable user interaction and communication within the chat environment.\n\n- In this file, there are various methods implemented. Let's specifically examine the process of sending a message through the **MessageComposer** component.\n#### **Additionally, the code in \"RoomBody.tsx\" includes logic for performing various actions related to the chat functionality. These actions might include *sending messages*, *editing* or *deleting* messages, *managing user permissions*, and handling user interactions within the chat environment.**",
+ "line": 53
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
+ "description": "### Chat/Room Layout\n\n- The \"RoomBody.tsx\" file is straightforward to comprehend. You can easily navigate through the components and grasp their functionalities.\n\n- The majority of the code in this file revolves around message rendering and handling various chat-related actions.",
+ "line": 543,
+ "selection": {
+ "start": {
+ "line": 464,
+ "character": 15
+ },
+ "end": {
+ "line": 464,
+ "character": 19
+ }
+ }
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
+ "description": "### Composer Container\n\n- At the bottom of the \"RoomBody.tsx\" file, there is a component responsible for rendering the Message Composer. It accepts several props, including the room ID and subscription details. These props help verify whether the user is allowed to send messages in the given context.\n\n- The Message Composer component also manages the size and layout of the composer, allowing users to comfortably compose and send messages. It provides functionality to retrieve the previous and next messages for reference or navigation purposes.\n\n```\n \n```\n\n- **Note** ComposerContainer is also built from combination multiple components, we will explore components and see how data is sent.\n",
+ "line": 635
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx",
+ "description": "### The Composer Container\n\n- In the \"ComposerContainer\" component, different composers are rendered based on specific conditions:\n\n- For omnichannel rooms, the component renders the \"ComposerOmnichannel\" composer.\n - If the chat room is a VoIP room, the component renders the \"ComposerVoIP\" composer.\n - In the case of federated rooms, the component renders the \"ComposerFederation\" composer.\n - For anonymous users, the component renders the \"ComposerAnonymous\" composer.\n - If the chat room is read-only, the component renders the \"ComposerReadOnly\" composer.\n - Lastly, if there are any block-related restrictions, such as blocked users or blocking others, the component renders the \"ComposerBlocked\" composer.\n\n **1. Omnichannel**\n ```\n \n ```\n **2. VoIp**\n ```\n \n ```\n **3. Federation**\n ```\n \n ```\n **4. Anonymous Users**\n ```\n \n ```\n **5. Read Only**\n ```\n \n ```\n **6. Composer Blocked**\n ```\n \n ```",
+ "line": 19
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx",
+ "description": "## ComposerMessage Component\n### And at the end we have ComposerMessage which is responsible for rendering MessageBox(The Text composer at the footer of Channel/Room)",
+ "line": 79
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
+ "description": "## MessageBox Component\n\n- At the bottom of the code, there is a \"MessageBox\" component, which represents the actual chat message box. Its presence is crucial for the proper functioning of the Composer. If you were to comment out or remove the \"MessageBox\" component and run the server, you would observe that the Composer functionality would no longer be available.\n\n- The \"MessageBox\" component plays a pivotal role in enabling users to compose and send messages within the chat interface. It provides the necessary user interface elements, such as input fields and buttons, to facilitate message composition and submission.",
+ "line": 81
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
+ "description": "## The Message Box\n\n#### This file serves as the implementation of the Message Composer component, where you can explore and analyze how the code functions. By examining the code in this file, you can gain a better understanding of its inner workings.\n\n\n#### The Message Composer component receives several props, including *\"rid\"* (room ID), *\"tmid\"* (thread ID), and *\"onSend\"* (handler for sending messages), among others. These props provide necessary data and functionality for the composer to operate effectively.\n\n\n#### By inspecting and experimenting with the code, you can gain insights into how different aspects of the Message Composer are implemented and how they interact with other components and functions.\n\n- The MessageBox is using MessageBoxProps type for defining its type\n```\ntype MessageBoxProps = {rid: IRoom['_id']; ...};\nconst MessageBox = ({rid, tmid, ...}: MessageBoxProps): ReactElement => \n```",
+ "line": 99
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
+ "description": "## Sending Message\n\n#### Rocket chat's Room/channel message composers have multiple options such as uploading files, Writing text messages and Quoted messages, And then we have a send button at the right corner of composer which sends what you have entered.\n\n#### To understand how the send button works for sending a simple text message:\n\n- When the send button is clicked, an event is triggered.\n- The event handler associated with the send button retrieves the text message entered by the user.\n- The text message is then processed and prepared for sending.\n- The necessary information, such as the room/channel ID, sender details, and the text message content, is included.\n- The prepared message is sent to the server via an appropriate network request or function call.\n- The server receives the message and performs further processing, including broadcasting it to the relevant recipients in the room/channel.\nThe message is displayed in the chat interface for all participants to view.",
+ "line": 347,
+ "selection": {
+ "start": {
+ "line": 3,
+ "character": 1
+ },
+ "end": {
+ "line": 4,
+ "character": 1
+ }
+ }
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
+ "description": "## Message Input \n\n- The MessageComposerInput component plays a crucial role in handling user inputs within the message composer. It is responsible for capturing various types of inputs and encompasses multiple associated actions.\n\n#### The MessageComposerInput component enables users to interact with the message composer through different actions, such as:\n\n1. **Typing and Editing**: Users can enter and edit text within the composer input field.\n\n2. **Formatting**: It may support various formatting options like bold, italic, bullet points, etc., allowing users to apply formatting to their messages.\n\n3. **Mentions**: Users can mention specific individuals or groups within the message by using the appropriate syntax or by selecting them from a list.\n\n4. **Emojis**: It may provide an emoji picker or support emoji shorthand, allowing users to insert emojis into their messages.\n\n5. **Attachments**: Users can attach files or media to their messages, such as images, documents, or videos.",
+ "line": 382
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
+ "description": "### The Send Button\n\n- To send any message you need to click send button or hit Enter/Return key, when you click send button **handleSendMessage** method/function is called.\n```\n \n```",
+ "line": 430
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
+ "description": "## handleSendMessage Function\n\n- This is the function which sends messages further, it Gets text from chat.composer.text where chat is actully using useChat() which is coming from [ChatAPI](./apps/meteor/client/lib/chats/ChatAPI.ts) consisting of multiple functions.\n\n#### The handleSendMessage function is responsible for processing and sending the message to the intended recipients. It performs the following actions:\n\n1. Retrieves the content of the message entered by the user.\n2. Collects additional information needed for sending the message, such as the room/channel ID, sender details, and any associated metadata.\n3. Packages the message data into a suitable format for transmission.\n4. Initiates the process of sending the message, it goes through a **[WebSocket](https://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is)** connection.\n5. The message is then transmitted to the server for further processing.\n6. The server handles the message, ensuring it is delivered to the specified room/channel and received by the intended recipients.\n7. Once the message is successfully sent, it may trigger updates to the chat interface, including displaying the sent message in the conversation history.\n\n- Here we have \n ```\n const chat = useChat(); // useChat is a Context using ChatAPI.\n const text = chat.composer?.text ?? ''; //Text is getting information from useChat Context.\n\n onSend?.({ // onSend was recieved as prop and hence we are returning with some value and a boolean tshow\n\t\t\tvalue: text,\n\t\t\ttshow,\n\t\t});\n ```\n",
+ "line": 159
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
+ "description": "## The onSend Prop\n\n#### In the MessageBox component, the composerProps are passed, and we receive several methods back, including the onSend method. The onSend method takes a value and additional parameters such as tshow, and it returns a promise.\n\n#### Additionally, we utilize the useChat() hook to access various methods available in the ChatAPI. This allows us to perform actions related to chat functionality.\n\n#### By using the onSend method, we can trigger the sending of a message with the provided value. The tshow parameter might be used to display notifications or toasts related to the message sending process. The returned promise can be used to handle any asynchronous operations or to track the status of the message sending.\n\n#### The useChat() hook provides access to methods like sendMessage() or other chat-related functions. These methods can be utilized to perform various actions within the chat interface, such as sending, retrieving, or deleting messages. \n\n```\nawait chat?.action.stop('typing');\n const newMessageSent = await chat?.flows.sendMessage({ // Here the Text is sent to chat.flows.sendMessage \n\t text,\n\t tshow,\n });\n\tif (newMessageSent) onSend?.();\n```",
+ "line": 27
+ },
+ {
+ "file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
+ "description": "## onSend Function\n\n#### The onSend function sends a new message by calling the chat?.flows.sendMessage() method from useChat Context. It passes the value and tshow parameters as properties of an object and awaits the promise to resolve. The resolved value is stored in the newMessageSent variable.\n\n```\n const newMessageSent = await chat?.flows.sendMessage({ // Here chat.flows.sendMessage() is actually a property coming from ChatAPI. From here we are simply sending value to sendMessage property in ChatAPI\n text,\n tshow,\n\t});\n```\n",
+ "line": 42
+ }
+ ]
}
\ No newline at end of file
diff --git a/.tours/3---how-a-message-is-sent.tour b/.tours/3---how-a-message-is-sent.tour
index 1eb19a985d50..6553a97e5a82 100644
--- a/.tours/3---how-a-message-is-sent.tour
+++ b/.tours/3---how-a-message-is-sent.tour
@@ -1,76 +1,76 @@
-{
- "$schema": "https://aka.ms/codetour-schema",
- "title": "3 - How a Message is sent (The Backend)",
- "steps": [
- {
- "file": "apps/meteor/client/lib/chats/ChatAPI.ts",
- "description": "## The ChatAPI\n\n- **ComposerAPI:** This interface defines methods and properties related to the message composer functionality, such as managing text input, handling selection, wrapping text, inserting text, clearing, focusing, and more. It also includes properties for managing quoted messages, editing mode, recording mode, and microphone permissions.\n\n- **DataAPI:** This interface defines methods for interacting with message and room data. It includes functions for composing and managing messages, finding and getting messages by ID, finding the last and previous own messages, managing drafts, accessing room and subscription information, marking rooms as read, and more.\n\n- **UploadsAPI:** This interface defines methods and properties for managing file uploads. It includes functions for retrieving the list of uploads, subscribing to changes, canceling and wiping failed uploads, and sending files.\n\n- **ChatAPI:** This interface represents the main API object for the Rocket Chat client. It includes properties for user-related information, such as the user ID. It also provides access to the composer, data, uploads, and message editing functionality. Additionally, it exposes methods for performing actions like starting/stopping typing, opening/closing user cards and emoji pickers, and handling various message-related flows (uploading files, sending messages, processing slash commands, editing messages, setting reactions, etc.).",
- "line": 106
- },
- {
- "file": "apps/meteor/client/lib/chats/ChatAPI.ts",
- "description": "## ChatAPI sendMessage\n\n#### Among many properties and functions present in ChatAPI here we have sendMessage.\n\n#### Note that sendMessage is *readonly* implying that it cannot be modified after initialization. Hence Implementing ChatAPI in any class would make it modification possible.\n\n```\n readonly sendMessage: ({ text, tshow }: { text: string; tshow?: boolean }) => Promise;\n```",
- "line": 146
- },
- {
- "file": "apps/meteor/app/ui/client/lib/ChatMessages.ts",
- "description": "## Implementation of ChatAPI\n\n#### Here *class ChatMessages implements ChatAPI* and above it we have a *type DeepWritable* which removes readonly property from ChatAPI and This allows us to modify those properties\n",
- "line": 27
- },
- {
- "file": "apps/meteor/app/ui/client/lib/ChatMessages.ts",
- "description": "## SendMessage -\n\n### Above we have a constructor and here in this.flows we are calling *sendMessage.bind(this,this)* The sendMessage is a function which further makes the meteor call for sending Message Data.",
- "line": 160
- },
- {
- "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
- "description": "## sendMessage function\n\n### The sendMessage recieves text: string and tshow: boolean properties and returns a Promise, And note that here we are utilizing ChatAPI again.\n\n- Within the sendMessage implementation, there are several checks and actions performed based on the provided parameters and the current state of the chat. These checks ensure that the message is valid and that the necessary actions are taken. The implementation of sendMessage may involve interacting with other methods or properties defined in the ChatAPI interface or its implementation.\n\n- By carefully examining the code and understanding its logic, you can gain a better understanding of how the sendMessage function is modified and what actions it performs in the context of the ChatMessages class.\n\n",
- "line": 35,
- "selection": {
- "start": {
- "line": 3,
- "character": 5
- },
- "end": {
- "line": 3,
- "character": 258
- }
- }
- },
- {
- "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
- "description": "## Processing Message Further\n\n### In Rocket.chat Messages are sent to ../api/v1/method.call/sendMessage and this is a meteor method. ",
- "line": 62
- },
- {
- "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
- "description": "## Calling Meteor method\n\n### This method is taking 2 parameters, one is the route for meteor method(api/v1/method.call/:method) and another parameter is message which is passed on by sendMessage function below.\n\n```\nawait sdk.call('sendMessage', message);\n```",
- "line": 32
- },
- {
- "file": "apps/meteor/app/utils/client/lib/SDKClient.ts",
- "description": "## Meteor.Call\n\n### The sendMessage function in the code triggers a Meteor method by passing a method name and its corresponding parameters. This invocation is responsible for initiating the sendMessage functionality. If by any chance someone calls any other method it would simply throw error.\n\n- There are basically **2 Meteor methods** for sendMessage each of them performing different tasks\n - **The first method is responsible for sending the message data to the database and performing various related tasks. However, there may be a slight delay in the message being rendered in the room or channel. To mitigate this delay, a second Meteor method is executed concurrently in an asynchronous manner.**\n\n - **The second method is specifically designed to facilitate the instant display of the sent message. If this method were disabled or not implemented, there would be a noticeable delay in the message being rendered and visible to the users.**",
- "line": 161
- },
- {
- "file": "apps/meteor/app/lib/server/methods/sendMessage.ts",
- "description": "## Meteor.methods\n\n### In this code, we have defined a ServerMethods interface, which includes a route for the sendMessage method. When the sendMessage action is triggered, an API call is made to the route *api/v1/method.call/sendMessage*. ->\n```\nreturn executeSendMessage(uid, message)\n```\n\n#### This triggers a function *executeSendMessage()* below in a try block which is further responsible for operations",
- "line": 110
- },
- {
- "file": "apps/meteor/app/lib/server/methods/sendMessage.ts",
- "description": "## executeSendMessage\n\n### - Inside the *executeSendMessage* function, we receive the uid (user ID) and message as parameters. This function performs various operations related to the sendMessage action.\n\n### - One of the key operations is triggering the sendMessage() function, which takes the user, message, room, and a boolean value as parameters. This function is responsible for handling the process of sending the message. It may involve additional validations, processing the message content, interacting with the database, and performing any necessary actions related to sending messages.",
- "line": 85
- },
- {
- "file": "apps/meteor/app/lib/server/functions/sendMessage.js",
- "description": "## Sending message to DB\n\n### In the sendMessage.js file, The sendMessage function that is called from the [executeSendMessage()](./apps/meteor/app/lib/server/methods/sendMessage.ts) function. The purpose of the sendMessage function is to handle the actual sending of messages.\n\n#### Within the sendMessage function, there are several important steps:\n\n1. **Validations**: The function performs validations on the message, ensuring that it meets certain criteria or conditions before proceeding. This helps maintain message integrity and prevents any invalid or malicious content from being sent.\n\n2. **URL Parsing**: The function also includes a step to parse URLs within the message for safety purposes. This ensures that any URLs included in the message are properly handled and do not pose a security risk.\n\n3. **Asynchronous Callback**: The function utilizes an asynchronous callback mechanism, which allows it to run asynchronously and not block the execution flow. This is especially useful when dealing with tasks that may involve network requests or other asynchronous operations.\n\n4. **IMessage Object**: The callback returns an IMessage object, which represents the message being sent. This object may contain various properties and metadata associated with the message.\n\n6. **Storage in Database**: Once the message has passed all validations, it is stored in the database. This ensures that the message is persisted and can be retrieved or displayed at a later time.\n\n#### Finally, the function returns the message object, indicating the successful completion of the sending process.\n- You can see code below it's easy to understand and try to play around with them, Best way to understand working of any code is to make changes in them and undestand.",
- "line": 206
- },
- {
- "file": "apps/meteor/app/lib/client/methods/sendMessage.ts",
- "description": "## The Async sendMessage Api call\n\n### - As mentioned earlier, there are two Meteor methods for handling the sendMessage functionality and making API Call. The first method handles processing and validation of the message, while the second method addresses the delay in rendering the message on the frontend.\n\n### - The second Meteor method is designed to ensure instant display of the sent message. When the first method completes successfully, it triggers the execution of the second method in an asynchronous manner. This allows for near-real-time rendering of the message on the user interface, reducing any noticeable delay.\n\n### And in the end there is a similar callback as it was in previous step which helps in message rendering, The callback return IMessage object which is displayed to user\n\n### - By separating these two methods, the application can provide a smooth and responsive user experience. The initial processing and validation are performed without blocking the UI, and once that is completed, the message is promptly displayed to the user.\n\n### You Have now successfully sent Message from composer, Note that there is one more API to sendMessage Which is an REST API, Which is currently not being used, if it would be used in future this tour would be updated. Still you can manually sendMessage by making call here [RestAPI Docs](https://developer.rocket.chat/reference/api/rest-api/endpoints/chat-endpoints/send-message) using -curl command, you can go thorugh the DOCS and try sending message on your own",
- "line": 14
- }
- ]
-}
\ No newline at end of file
+{
+ "$schema": "https://aka.ms/codetour-schema",
+ "title": "3 - How a Message is sent (The Backend)",
+ "steps": [
+ {
+ "file": "apps/meteor/client/lib/chats/ChatAPI.ts",
+ "description": "## The ChatAPI\n\n- **ComposerAPI:** This interface defines methods and properties related to the message composer functionality, such as managing text input, handling selection, wrapping text, inserting text, clearing, focusing, and more. It also includes properties for managing quoted messages, editing mode, recording mode, and microphone permissions.\n\n- **DataAPI:** This interface defines methods for interacting with message and room data. It includes functions for composing and managing messages, finding and getting messages by ID, finding the last and previous own messages, managing drafts, accessing room and subscription information, marking rooms as read, and more.\n\n- **UploadsAPI:** This interface defines methods and properties for managing file uploads. It includes functions for retrieving the list of uploads, subscribing to changes, canceling and wiping failed uploads, and sending files.\n\n- **ChatAPI:** This interface represents the main API object for the Rocket Chat client. It includes properties for user-related information, such as the user ID. It also provides access to the composer, data, uploads, and message editing functionality. Additionally, it exposes methods for performing actions like starting/stopping typing, opening/closing user cards and emoji pickers, and handling various message-related flows (uploading files, sending messages, processing slash commands, editing messages, setting reactions, etc.).",
+ "line": 106
+ },
+ {
+ "file": "apps/meteor/client/lib/chats/ChatAPI.ts",
+ "description": "## ChatAPI sendMessage\n\n#### Among many properties and functions present in ChatAPI here we have sendMessage.\n\n#### Note that sendMessage is *readonly* implying that it cannot be modified after initialization. Hence Implementing ChatAPI in any class would make it modification possible.\n\n```\n readonly sendMessage: ({ text, tshow }: { text: string; tshow?: boolean }) => Promise;\n```",
+ "line": 146
+ },
+ {
+ "file": "apps/meteor/app/ui/client/lib/ChatMessages.ts",
+ "description": "## Implementation of ChatAPI\n\n#### Here *class ChatMessages implements ChatAPI* and above it we have a *type DeepWritable* which removes readonly property from ChatAPI and This allows us to modify those properties\n",
+ "line": 27
+ },
+ {
+ "file": "apps/meteor/app/ui/client/lib/ChatMessages.ts",
+ "description": "## SendMessage -\n\n### Above we have a constructor and here in this.flows we are calling *sendMessage.bind(this,this)* The sendMessage is a function which further makes the meteor call for sending Message Data.",
+ "line": 160
+ },
+ {
+ "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
+ "description": "## sendMessage function\n\n### The sendMessage recieves text: string and tshow: boolean properties and returns a Promise, And note that here we are utilizing ChatAPI again.\n\n- Within the sendMessage implementation, there are several checks and actions performed based on the provided parameters and the current state of the chat. These checks ensure that the message is valid and that the necessary actions are taken. The implementation of sendMessage may involve interacting with other methods or properties defined in the ChatAPI interface or its implementation.\n\n- By carefully examining the code and understanding its logic, you can gain a better understanding of how the sendMessage function is modified and what actions it performs in the context of the ChatMessages class.\n\n",
+ "line": 35,
+ "selection": {
+ "start": {
+ "line": 3,
+ "character": 5
+ },
+ "end": {
+ "line": 3,
+ "character": 258
+ }
+ }
+ },
+ {
+ "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
+ "description": "## Processing Message Further\n\n### In Rocket.chat Messages are sent to ../api/v1/method.call/sendMessage and this is a meteor method. ",
+ "line": 62
+ },
+ {
+ "file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
+ "description": "## Calling Meteor method\n\n### This method is taking 2 parameters, one is the route for meteor method(api/v1/method.call/:method) and another parameter is message which is passed on by sendMessage function below.\n\n```\nawait sdk.call('sendMessage', message);\n```",
+ "line": 32
+ },
+ {
+ "file": "apps/meteor/app/utils/client/lib/SDKClient.ts",
+ "description": "## Meteor.Call\n\n### The sendMessage function in the code triggers a Meteor method by passing a method name and its corresponding parameters. This invocation is responsible for initiating the sendMessage functionality. If by any chance someone calls any other method it would simply throw error.\n\n- There are basically **2 Meteor methods** for sendMessage each of them performing different tasks\n - **The first method is responsible for sending the message data to the database and performing various related tasks. However, there may be a slight delay in the message being rendered in the room or channel. To mitigate this delay, a second Meteor method is executed concurrently in an asynchronous manner.**\n\n - **The second method is specifically designed to facilitate the instant display of the sent message. If this method were disabled or not implemented, there would be a noticeable delay in the message being rendered and visible to the users.**",
+ "line": 161
+ },
+ {
+ "file": "apps/meteor/app/lib/server/methods/sendMessage.ts",
+ "description": "## Meteor.methods\n\n### In this code, we have defined a ServerMethods interface, which includes a route for the sendMessage method. When the sendMessage action is triggered, an API call is made to the route *api/v1/method.call/sendMessage*. ->\n```\nreturn executeSendMessage(uid, message)\n```\n\n#### This triggers a function *executeSendMessage()* below in a try block which is further responsible for operations",
+ "line": 110
+ },
+ {
+ "file": "apps/meteor/app/lib/server/methods/sendMessage.ts",
+ "description": "## executeSendMessage\n\n### - Inside the *executeSendMessage* function, we receive the uid (user ID) and message as parameters. This function performs various operations related to the sendMessage action.\n\n### - One of the key operations is triggering the sendMessage() function, which takes the user, message, room, and a boolean value as parameters. This function is responsible for handling the process of sending the message. It may involve additional validations, processing the message content, interacting with the database, and performing any necessary actions related to sending messages.",
+ "line": 85
+ },
+ {
+ "file": "apps/meteor/app/lib/server/functions/sendMessage.js",
+ "description": "## Sending message to DB\n\n### In the sendMessage.js file, The sendMessage function that is called from the [executeSendMessage()](./apps/meteor/app/lib/server/methods/sendMessage.ts) function. The purpose of the sendMessage function is to handle the actual sending of messages.\n\n#### Within the sendMessage function, there are several important steps:\n\n1. **Validations**: The function performs validations on the message, ensuring that it meets certain criteria or conditions before proceeding. This helps maintain message integrity and prevents any invalid or malicious content from being sent.\n\n2. **URL Parsing**: The function also includes a step to parse URLs within the message for safety purposes. This ensures that any URLs included in the message are properly handled and do not pose a security risk.\n\n3. **Asynchronous Callback**: The function utilizes an asynchronous callback mechanism, which allows it to run asynchronously and not block the execution flow. This is especially useful when dealing with tasks that may involve network requests or other asynchronous operations.\n\n4. **IMessage Object**: The callback returns an IMessage object, which represents the message being sent. This object may contain various properties and metadata associated with the message.\n\n6. **Storage in Database**: Once the message has passed all validations, it is stored in the database. This ensures that the message is persisted and can be retrieved or displayed at a later time.\n\n#### Finally, the function returns the message object, indicating the successful completion of the sending process.\n- You can see code below it's easy to understand and try to play around with them, Best way to understand working of any code is to make changes in them and undestand.",
+ "line": 206
+ },
+ {
+ "file": "apps/meteor/app/lib/client/methods/sendMessage.ts",
+ "description": "## The Async sendMessage Api call\n\n### - As mentioned earlier, there are two Meteor methods for handling the sendMessage functionality and making API Call. The first method handles processing and validation of the message, while the second method addresses the delay in rendering the message on the frontend.\n\n### - The second Meteor method is designed to ensure instant display of the sent message. When the first method completes successfully, it triggers the execution of the second method in an asynchronous manner. This allows for near-real-time rendering of the message on the user interface, reducing any noticeable delay.\n\n### And in the end there is a similar callback as it was in previous step which helps in message rendering, The callback return IMessage object which is displayed to user\n\n### - By separating these two methods, the application can provide a smooth and responsive user experience. The initial processing and validation are performed without blocking the UI, and once that is completed, the message is promptly displayed to the user.\n\n### You Have now successfully sent Message from composer, Note that there is one more API to sendMessage Which is an REST API, Which is currently not being used, if it would be used in future this tour would be updated. Still you can manually sendMessage by making call here [RestAPI Docs](https://developer.rocket.chat/reference/api/rest-api/endpoints/chat-endpoints/send-message) using -curl command, you can go thorugh the DOCS and try sending message on your own",
+ "line": 14
+ }
+ ]
+ }
\ No newline at end of file
diff --git a/.tours/7---services.tour b/.tours/7---services.tour
new file mode 100644
index 000000000000..d5047b17b201
--- /dev/null
+++ b/.tours/7---services.tour
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://aka.ms/codetour-schema",
+ "title": "7 - Services",
+ "steps": [
+ {
+ "directory": "ee",
+ "description": "## Services In Rocket Chat \n\n### The Rocket.Chat server architecture is composed of both *INTERNAL* and *EXTERNAL* services. The internal services run within the meteor instance and are tightly coupled with the main process, while the external services can run independently in separate processes."
+ },
+ {
+ "directory": "ee/apps",
+ "description": "## External Services\n- **Authorization**: This service manages user authorization and permissions, ensuring users have the necessary access rights. It can be horizontally scaled and is stateless.\n- **Account**: Responsible for managing user accounts, including the creation, updating, and deletion. It provides methods for user authentication like login and logout. This service is stateless and can be horizontally scaled.\nPresence: Handles user presence management, tracking and updating the online status of the user. It can be horizontally scaled and is stateless.\n- **StreamHub**: This service captures database changes and broadcasts real-time data to other services. Currently, it does not support horizontal scaling and operates as a single instance service.\n- **DDPStreamer**: Manages DDP(Distributed Data Protocol) connections, handling client-server connections, managing subscriptions, and transmitting data to clients. It can be horizontally scaled.\n- **AppsEngine**: Responsible for managing apps with Rocket.Chat, including installing, updating, executing, and removal of apps. While it can be horizontally scaled, this service is still under development.\n\n## In The Following Folders inside ee/apps/ we have all the services mentioned above\n\n"
+ },
+ {
+ "directory": "apps/meteor/server/services",
+ "description": "## Internal Services\n\n- **Banner**: Manages banners, including creation, updating, and deletion.\n- **LDAP**: Handles LDAP (Lightweight Directory Access Protocol) integration, establishing connections with LDAP servers and managing user synchronization.\n- **NPS**: Works in conjunction with the Banner service to manage Net Promoter Score (NPS) surveys, generating banners for selected users and handling responses.\n- **Room**: Manages chat rooms, including creation, updating, and deletion.\n- **OmniChannel**: Responsible for managing various omnichannel tasks.\nOmnichannel Voip: Handles VoIP (Voice over Internet Protocol) calls within the omnichannel system.\n- **Team**: Manages teams within Rocket.Chat, including creation, updating, and deletion.\n- **UiKitCoreApp**: Manages UI Kit actions and events. It relies on the AppsEngine service for app-related actions and events, as well as Meteor Legacy for core actions.\n- **Push**: Handles push notifications, sending them to mobile applications.\n- **Upload**: Manages file uploads, including uploading files to the file system and handling file management.\n- **Messaging**: Responsible for managing messages within Rocket.Chat.\n- **Translation**: Previously responsible for providing translations to other services, but now deprecated. Translations are provided by the i18n package.\n- **Settings**: Manages system settings, including creation, updating, and deletion.\n\n## In the following services folder you can checkout that each service has a dedicated folder for it you can go inside and explore them and try to understand how things are working."
+ }
+ ]
+}
\ No newline at end of file
diff --git a/.tours/8---how-to-add-a-new-service.tour b/.tours/8---how-to-add-a-new-service.tour
new file mode 100644
index 000000000000..e1428657d100
--- /dev/null
+++ b/.tours/8---how-to-add-a-new-service.tour
@@ -0,0 +1,30 @@
+{
+ "$schema": "https://aka.ms/codetour-schema",
+ "title": "8 - How to add a new service",
+ "steps": [
+ {
+ "directory": "apps/meteor/server/services/room",
+ "description": "## Adding a new service\n\n### Let us see how we can add a new service, Let us take an example of room service, It Manages chat rooms, including creation, updating, and deletion.\n\n### As we saw in previous tour that every service has a dedicated folder for it. similarly for creating room service we have a room folder"
+ },
+ {
+ "file": "apps/meteor/server/services/room/service.ts",
+ "description": "## Important Imports\n\n### For creating Service we need to use some imports and types which are created by rocket chat.\n\n### Here we have imported -\n\n- ***IRoom*** and ***IUser*** which is Interface and defining Structure \n- ***Users*** from model which is a db model storing users information\n- ***ServiceClassInternal*** , ***Authorization*** from core-services which is used for Creating Service and authorizations.\n- ***ICreateRoomParams*** , ***IRoomService*** type for type definitions \n- ***Below here we have createDirectMessage import and createRoom import***",
+ "line": 5
+ },
+ {
+ "file": "apps/meteor/server/services/room/service.ts",
+ "description": "## Create service - eg- RoomService\n\n### Here we have a class RoomService has multiple functionalities in it.\n\n### We have a *create* method which returns Promise gets data from params and then performs multiple checks, Such as If user has Permission to create room or not, whether the user who is requesting to create room exists or not, and then at the end *createRoom()* function is returned which was imported above \n\n```\nasync create(uid: string, params: ICreateRoomParams): Promise {\n const { type, name, members = [], readOnly, extraData, options } = params;\n \n return createRoom(type, name, user.username, members, false, readOnly, extraData, options) as unknown as IRoom;\n}\n```",
+ "line": 14
+ },
+ {
+ "file": "apps/meteor/server/services/room/service.ts",
+ "description": "### 2 - Direct message\n\n### Here we have a method createDirectMessage method which helps in one to one communication in a dedicated room where 2 people can communicate, This method takes 2 arguments which are to(Target user) and from(Me) and returns a Promise as rid. \n\n### Then a basic check is performed to check whether both users exist or not then at the end we return a imported function createDirectMessage\n\n```\nasync createDirectMessage({ to, from }: { to: string; from: string }): Promise<{ rid: string }> {\n \n return this.createDirectMessageWithMultipleUsers([toUser.username], fromUser._id); // This calls another function createDirectMessageWithMultipleUsers\n}\n```",
+ "line": 36
+ },
+ {
+ "file": "apps/meteor/server/services/room/service.ts",
+ "description": "## Creating DirectMessage\n\n### In previous step createDirectMessageWithMultipleUsers function was called and few data were passed on such as to users and from user, in createDirectMessageWithMultipleUsers we expect String Array of Members.\n\n```\n\tasync createDirectMessageWithMultipleUsers(members: string[], creatorId: string): Promise<{ rid: string }> { // Gets a list of memebers and creators id\n\t\treturn createDirectMessage(members, creatorId); // return createDirectMessage function\n }\n```\n\n### There are few more services and methods below, you can check them out",
+ "line": 49
+ }
+ ]
+}
\ No newline at end of file