+
+```
+
+**Use for:** Architecture diagrams, flow diagrams, dashboard screenshots.
+
+### Mermaid — For flow diagrams
+
+```mdx
+```mermaid
+sequenceDiagram
+ participant User
+ participant App
+ participant CometChat
+ User->>App: Login
+ App->>CometChat: CometChat.login()
+```
+```
+
+**Use for:** Authentication flows, message delivery flows, call signaling flows. Preserve existing mermaid diagrams — never remove them.
+
+---
+
+## 6. Next Steps Navigation
+
+Every content page should end with a `## Next Steps` section using CardGroup.
+
+### Pattern
+
+```mdx
+---
+
+## Next Steps
+
+
-**Mode: `TILE`**
+### Tile Mode
+
+Tiled layout with flexible arrangement:
-**Mode: `SPOTLIGHT`**
+### Spotlight Mode
+
+Focus on active speaker with thumbnails:
+## Complete Branding Example
+
-### Guidelines for Customizing the Grid Layout
-
-* **CSS Classes:**
-
- * Please ensure that you only apply CSS classes specified in this documentation. Introducing CSS classes not covered here may cause unexpected UI issues.
-
-* **Grid Container Resizing:**
-
- * Avoid resizing the grid container. Altering the grid container’s dimensions can negatively impact the grid layout, leading to undesirable visual distortions.
-
-By following these recommendations, you can maintain a stable and visually consistent grid layout.
+## Best Practices
+
+This message was deleted
";
}
-})
-);
+ return ``;
+}
```
-
This message was deleted
";
+ }
+ return ``;
+}
-CometChat.addMessageListener(
- listenerID,
- new CometChat.MessageListener({
- onMessageDeleted: (message: CometChat.BaseMessage) => {
- console.log("Deleted Message", message);
- }
- })
-);
+// Usage
+await deleteMessage(123);
```
-
+
+
+ );
+}
+
+export default MessageActions;
+```
+
+ {messageText}
+ {isPending && Reviewing...}
+
+ ```
+ 
-As you can see in the above diagram, every message belongs to a particular category. A message can belong to either one of the 4 categories
+## Categories Overview
-1. Message
-2. Custom
-3. Action
-4. Call
+| Category | Description | Types |
+|----------|-------------|-------|
+| `message` | Standard chat messages | text, image, video, audio, file |
+| `custom` | Developer-defined messages | Any custom type |
+| `interactive` | Interactive UI elements | form, card, customInteractive |
+| `action` | System-generated events | groupMember, message |
+| `call` | Call-related messages | audio, video |
-Each category can be further be classified into types.
+---
-A message belonging to the category `message` can be classified into either 1 of the below types:
+## Message Category
-1. text - A plain text message
-2. image- An image message
-3. video- A video message
-4. audio- An audio message
-5. file- A file message
+Standard messages for text and media content.
-## Custom
+| Type | Description | Use Case |
+|------|-------------|----------|
+| `text` | Plain text message | Chat messages |
+| `image` | Image attachment | Photo sharing |
+| `video` | Video attachment | Video sharing |
+| `audio` | Audio attachment | Voice messages |
+| `file` | File attachment | Document sharing |
-In the case of messages that belong to the `custom` category, there are no predefined types. Custom messages can be used by developers to send messages that do not fit in the default category and types provided by CometChat. For messages with the category `custom`, the developers can set their own type to uniquely identify the custom message. A very good example of a custom message would be the sharing of location co-ordinates. In this case, the developer can decide to use the custom message with type set to `location`.
+
@@ -137,3 +190,14 @@ Currently, the call recordings are available on the [CometChat Dashboard](https:
+
+## Next Steps
+
+
+
-3. If no action is taken within the next 60 seconds, the call will automatically end
+## Configuration
-This feature helps manage inactive call sessions and prevents unnecessary resource usage. The idle timeout period ensures that participants don't accidentally remain in abandoned call sessions.
+Set the idle timeout period using `setIdleTimeoutPeriod()`:
-### Session Timeout Flow
+