diff --git a/ai-agents.mdx b/ai-agents.mdx index 7bbbfe6de..d0804e679 100644 --- a/ai-agents.mdx +++ b/ai-agents.mdx @@ -67,7 +67,7 @@ Because CometChat AI Agents are model-agnostic, you can swap providers or upgrad

AI Agent Builder @@ -84,7 +84,7 @@ Because CometChat AI Agents are model-agnostic, you can swap providers or upgrad

Connect Third-Party Agent @@ -100,8 +100,8 @@ Because CometChat AI Agents are model-agnostic, you can swap providers or upgrad

Create and manage frontend actions and tools to enhance your agent’s capabilities.

- Get Started with Actions ↗ - Get Started with Tools ↗ + Get Started with Actions ↗ + Get Started with Tools ↗

Actions: trigger UI & workflows. Tools: structured capabilities the agent can call.

*/} diff --git a/ai-agents/agent-builder/overview.mdx b/ai-agents/agent-builder/overview.mdx index 00a166161..8f51dc615 100644 --- a/ai-agents/agent-builder/overview.mdx +++ b/ai-agents/agent-builder/overview.mdx @@ -49,7 +49,7 @@ Agent Builder provides the capability to create, configure, and customize AI age

- After creation, configure instructions, tools, and MCPs from the left-hand tabs. Detailed guidance lives in the Instructions, Tools, and MCP sections. + After creation, configure instructions, tools, and MCPs from the left-hand tabs. Detailed guidance lives in the Instructions, Tools, and MCP sections.

diff --git a/articles/migration-guide.mdx b/articles/migration-guide.mdx index ec1deddba..3fa1f042f 100644 --- a/articles/migration-guide.mdx +++ b/articles/migration-guide.mdx @@ -57,7 +57,7 @@ Android: [Upgrading from v3](/sdk/android/upgrading-from-v3-guide) React Native: [Upgrading from v2](/sdk/react-native/3.0/resources-upgrading-from-v2) -Ionic Cordova Capacitor: [Upgrading from v2](/sdk/ionic-legacy/3.0/resources-upgrading-from-v2) +Ionic Cordova Capacitor: [Upgrading from v2](https://assets.cometchat.io/legacy-docs/sdk/ionic-legacy/3.0/resources-upgrading-from-v2.html) _Note: if you mark your migration as complete without following the specified upgrade guide fully, your application may become stuck in a broken state, with out-of-sync SDK / API and application versions unable to communicate properly. If this happens, contact support._ diff --git a/calls/flutter/setup.mdx b/calls/flutter/setup.mdx index 2d3033053..63e0e3d38 100644 --- a/calls/flutter/setup.mdx +++ b/calls/flutter/setup.mdx @@ -13,7 +13,7 @@ If you're using CometChat UI Kits, voice and video calling can be quickly integr - Call buttons with one-tap calling - Call logs with history -👉 [Flutter UI Kit Calling Integration](/ui-kit/flutter/calling-integration) +👉 [Flutter UI Kit Calling Integration](/ui-kit/flutter/v5/calling-integration) Use this Calls SDK directly only if you need custom call UI or advanced control. diff --git a/chat-call.mdx b/chat-call.mdx index ccc6b5559..21598d645 100644 --- a/chat-call.mdx +++ b/chat-call.mdx @@ -212,7 +212,7 @@ npx @cometchat/skills add } href="/sdk/ios/overview" horizontal /> } href="/sdk/android/overview" horizontal /> } href="/sdk/flutter/overview" horizontal /> - } href="/sdk/ionic/overview" horizontal /> + } href="/sdk/ionic-legacy/overview" horizontal /> } href="/sdk/unreal/overview" horizontal />
diff --git a/fundamentals/extensions-overview.mdx b/fundamentals/extensions-overview.mdx index a0d9e4393..3c7ecafcb 100644 --- a/fundamentals/extensions-overview.mdx +++ b/fundamentals/extensions-overview.mdx @@ -66,11 +66,11 @@ Extensions that help you add support to your app. *Recommended for advanced apps Extensions that help alert users of new messages. *Recommended for all apps.* [Push Notification](/notifications/web-push-notifications)\ -[Email Notification](/notifications/email-notifications-extension-legacy)\ -[SMS Notification](/notifications/sms-notifications-extension-legacy) +[Email Notification](https://assets.cometchat.io/legacy-docs/notifications/email-notifications-extension-legacy.html)\ +[SMS Notification](https://assets.cometchat.io/legacy-docs/notifications/sms-notifications-extension-legacy.html) ### Moderation *Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.* -[Legacy Moderation Extensions](/moderation/legacy-extensions) +[Legacy Moderation Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) diff --git a/fundamentals/moderation-extensions.mdx b/fundamentals/moderation-extensions.mdx index ef75f7a46..48d572dab 100644 --- a/fundamentals/moderation-extensions.mdx +++ b/fundamentals/moderation-extensions.mdx @@ -7,6 +7,6 @@ CometChat Moderation features come in two variants: 1. The modern rule based [Moderation](/moderation/overview) platform. -2. The [Legacy Moderation Extensions](/moderation/legacy-extensions) based on CometChat Extensions. +2. The [Legacy Moderation Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) based on CometChat Extensions. For the best experience, we recommend using the rule based [Moderation](/moderation/overview) platform. diff --git a/images/01a6f1df-1633625271-66d7d5dd85f4470c655d902bf7fa85bd.png b/images/01a6f1df-1633625271-66d7d5dd85f4470c655d902bf7fa85bd.png new file mode 100644 index 000000000..3c8f20845 Binary files /dev/null and b/images/01a6f1df-1633625271-66d7d5dd85f4470c655d902bf7fa85bd.png differ diff --git a/images/0380f9ce-1640937733-db13c95c4dba1700cb3e9ad7016fb18c.png b/images/0380f9ce-1640937733-db13c95c4dba1700cb3e9ad7016fb18c.png new file mode 100644 index 000000000..280c98804 Binary files /dev/null and b/images/0380f9ce-1640937733-db13c95c4dba1700cb3e9ad7016fb18c.png differ diff --git a/images/0b8820c9-1640937745-015a5fd67f1185d1b2d0272be3252a06.png b/images/0b8820c9-1640937745-015a5fd67f1185d1b2d0272be3252a06.png new file mode 100644 index 000000000..a1a9af482 Binary files /dev/null and b/images/0b8820c9-1640937745-015a5fd67f1185d1b2d0272be3252a06.png differ diff --git a/images/2465097e-1640937784-595c3a354a910eaf3e93a4c732160e96.png b/images/2465097e-1640937784-595c3a354a910eaf3e93a4c732160e96.png new file mode 100644 index 000000000..81be72534 Binary files /dev/null and b/images/2465097e-1640937784-595c3a354a910eaf3e93a4c732160e96.png differ diff --git a/images/94bd7567-1640937759-985854eaa68734ab4ea0d63ac667fb1f.png b/images/94bd7567-1640937759-985854eaa68734ab4ea0d63ac667fb1f.png new file mode 100644 index 000000000..a4411978f Binary files /dev/null and b/images/94bd7567-1640937759-985854eaa68734ab4ea0d63ac667fb1f.png differ diff --git a/images/97122883-1640937720-fcd19d0ec4b22be8309cbad8172e611e.png b/images/97122883-1640937720-fcd19d0ec4b22be8309cbad8172e611e.png new file mode 100644 index 000000000..b8d799e42 Binary files /dev/null and b/images/97122883-1640937720-fcd19d0ec4b22be8309cbad8172e611e.png differ diff --git a/images/cbd9f03f-7074vppi29h4jsxht5yv37bqx44d29hd6mdtxoxbxtfeucz7rs3kebgmn5xg7nh7-3873961b1475ec06f951cae9d679b0f3.png b/images/cbd9f03f-7074vppi29h4jsxht5yv37bqx44d29hd6mdtxoxbxtfeucz7rs3kebgmn5xg7nh7-3873961b1475ec06f951cae9d679b0f3.png new file mode 100644 index 000000000..0849459e5 Binary files /dev/null and b/images/cbd9f03f-7074vppi29h4jsxht5yv37bqx44d29hd6mdtxoxbxtfeucz7rs3kebgmn5xg7nh7-3873961b1475ec06f951cae9d679b0f3.png differ diff --git a/images/ce087489-1640937807-2c55cbabbfcbae49896063810822240d.png b/images/ce087489-1640937807-2c55cbabbfcbae49896063810822240d.png new file mode 100644 index 000000000..8e84fd643 Binary files /dev/null and b/images/ce087489-1640937807-2c55cbabbfcbae49896063810822240d.png differ diff --git a/images/cef182e1-1640937699-59eddd83a6c0783b06ccf5eebe3b7d94.png b/images/cef182e1-1640937699-59eddd83a6c0783b06ccf5eebe3b7d94.png new file mode 100644 index 000000000..dd008c822 Binary files /dev/null and b/images/cef182e1-1640937699-59eddd83a6c0783b06ccf5eebe3b7d94.png differ diff --git a/moderation/overview.mdx b/moderation/overview.mdx index e9cb27edd..ca751ffcf 100644 --- a/moderation/overview.mdx +++ b/moderation/overview.mdx @@ -6,7 +6,7 @@ description: "Use CometChat moderation to filter text, image, and video messages The Moderation feature provides a comprehensive suite of capabilities designed to manage and enforce message moderation rules across various types of messages, ensuring your platform remains safe and compliant for all users. -**Using legacy moderation extensions?** Disable legacy extensions (Profanity Filter, Data Masking, Image Moderation) from the [Extensions page](/moderation/legacy-extensions) before creating moderation rules. Running both will cause performance issues and message delays as each message gets processed twice. +**Using legacy moderation extensions?** Disable legacy extensions (Profanity Filter, Data Masking, Image Moderation) from the [Extensions page](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) before creating moderation rules. Running both will cause performance issues and message delays as each message gets processed twice. ## Key Benefits diff --git a/notifications/overview.mdx b/notifications/overview.mdx index 78459597f..7bef8a989 100644 --- a/notifications/overview.mdx +++ b/notifications/overview.mdx @@ -10,18 +10,18 @@ Notifications play a crucial role in alerting users to activity within conversat Deliver instant updates and improve user engagement. CometChat has the following offerings. * [Push Notifications](/notifications/push-overview) -* [Push Notifications extension (Legacy)](/notifications/push-notifications-extension-legacy) +* [Push Notifications extension (Legacy)](https://assets.cometchat.io/legacy-docs/notifications/push-notifications-extension-legacy.html) ### Email Notifications Dispatch updates at intervals to re-engage users with extended absence using Emails. * [Email Notifications](/notifications/email-overview) -* [Email Notifications extension (Legacy)](/notifications/email-notifications-extension-legacy). +* [Email Notifications extension (Legacy)](https://assets.cometchat.io/legacy-docs/notifications/email-notifications-extension-legacy.html). ### SMS Notifications Dispatch updates at intervals to re-engage users with extended absence using SMS. * [SMS Notifications](/notifications/sms-overview) -* [SMS Notifications extension (Legacy)](/notifications/sms-notifications-extension-legacy). +* [SMS Notifications extension (Legacy)](https://assets.cometchat.io/legacy-docs/notifications/sms-notifications-extension-legacy.html). diff --git a/sdk/android/2.0/extensions.mdx b/sdk/android/2.0/extensions.mdx index 55fdf78a3..95bb8bbdc 100644 --- a/sdk/android/2.0/extensions.mdx +++ b/sdk/android/2.0/extensions.mdx @@ -14,8 +14,8 @@ Extensions pickup where our core leaves. They help extend the functionality of C Extensions that help alert users of new messages. *Recommended for all apps.* [Push Notification](/notifications/android-push-notifications)\ -[Email Notification](/notifications/email-notifications-extension-legacy)\ -[SMS Notification](/notifications/sms-notifications-extension-legacy) +[Email Notification](https://assets.cometchat.io/legacy-docs/notifications/email-notifications-extension-legacy.html)\ +[SMS Notification](https://assets.cometchat.io/legacy-docs/notifications/sms-notifications-extension-legacy.html) ### User Experience @@ -50,4 +50,4 @@ Extensions that help increase user engagement. *Recommended for advanced apps.* *Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.* -[Legacy Moderation Extensions](/moderation/legacy-extensions) +[Legacy Moderation Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) diff --git a/sdk/android/ai-chatbots-overview.mdx b/sdk/android/ai-chatbots-overview.mdx index d77b05e36..212859ecc 100644 --- a/sdk/android/ai-chatbots-overview.mdx +++ b/sdk/android/ai-chatbots-overview.mdx @@ -2,7 +2,7 @@ title: "AI Chatbots" sidebarTitle: "AI Chatbots" description: "Implement custom AI chatbots for automated conversations in your Android application" -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" --- AI Chatbots enable automated conversations within your application. They can process user messages and respond with contextually relevant information. For a broader introduction, see the [AI Chatbots section](/ai-chatbots). diff --git a/sdk/android/v5/ai-chatbots-overview.mdx b/sdk/android/v5/ai-chatbots-overview.mdx index 453c5e30f..10af6a0ef 100644 --- a/sdk/android/v5/ai-chatbots-overview.mdx +++ b/sdk/android/v5/ai-chatbots-overview.mdx @@ -1,4 +1,4 @@ --- title: "AI" -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" --- \ No newline at end of file diff --git a/sdk/flutter/ai-chatbots-overview.mdx b/sdk/flutter/ai-chatbots-overview.mdx index 0ed087ca6..d14757925 100644 --- a/sdk/flutter/ai-chatbots-overview.mdx +++ b/sdk/flutter/ai-chatbots-overview.mdx @@ -1,5 +1,5 @@ --- title: "Bots" description: "Build AI chatbots for Flutter apps with CometChat to automate replies, assist users, and connect bot workflows to chat." -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" --- diff --git a/sdk/flutter/threaded-messages.mdx b/sdk/flutter/threaded-messages.mdx index f2a068772..c796bcd1b 100644 --- a/sdk/flutter/threaded-messages.mdx +++ b/sdk/flutter/threaded-messages.mdx @@ -10,7 +10,7 @@ Each Thread is attached to a message which is the Parent message for that thread ## Send Message in a Thread -As mentioned in the [Send a Message](send-message) section, you can send a message to a User or a Group by mentioning the receiver (uid/guid) and `receiverType`(user/group). +As mentioned in the [Send a Message](/sdk/flutter/send-message) section, you can send a message to a User or a Group by mentioning the receiver (uid/guid) and `receiverType`(user/group). A message can be categorized as: @@ -56,7 +56,7 @@ Similarly, using the `parentMessageId` parameter, Media and Custom Messages can ### Receiving Real-Time Messages -The procedure to receive real-time messages is exactly the same as mentioned in the [Receive Messages](receive-messages). This can be achieved using the `MessageListener` class provided by the SDK. +The procedure to receive real-time messages is exactly the same as mentioned in the [Receive Messages](/sdk/flutter/receive-messages). This can be achieved using the `MessageListener` class provided by the SDK. To add a MessageListener, you can use the `addMessageListener()` method of the SDK. The only thing that needs to be checked is if the received message belongs to the active thread. This can be done using `parentMessageId` field of the message object. diff --git a/sdk/flutter/v4/additional-message-filtering.mdx b/sdk/flutter/v4/additional-message-filtering.mdx index 35f03b472..80363b64c 100644 --- a/sdk/flutter/v4/additional-message-filtering.mdx +++ b/sdk/flutter/v4/additional-message-filtering.mdx @@ -288,7 +288,7 @@ MessagesRequest messageRequest = (MessagesRequestBuilder() *In other words, how do I fetch messages belonging to multiple categories* -We recommend before trying this, you refer to the [Message structure and hierarchy guide](/sdk/flutter/message-structure-and-hierarchy) to get familiar with the various categories of messages. +We recommend before trying this, you refer to the [Message structure and hierarchy guide](/sdk/flutter/v4/message-structure-and-hierarchy) to get familiar with the various categories of messages. Use the `categories` property with a list of category names to filter by message category. @@ -316,7 +316,7 @@ The above snippet will help you get only the messages belonging to the `message` *In other words, how do I fetch messages belonging to multiple types* -We recommend you refer to the [Message structure and hierarchy guide](/sdk/flutter/message-structure-and-hierarchy) to get familiar with the various types of messages before trying this out. +We recommend you refer to the [Message structure and hierarchy guide](/sdk/flutter/v4/message-structure-and-hierarchy) to get familiar with the various types of messages before trying this out. Use the `types` property with a list of type names to filter by message type. @@ -651,7 +651,7 @@ MessagesRequest messageRequest = (MessagesRequestBuilder() Fetch and display conversation lists with filtering options - + Understand message categories, types, and hierarchy diff --git a/sdk/flutter/v4/ai-chatbots-overview.mdx b/sdk/flutter/v4/ai-chatbots-overview.mdx index f3037d7e9..00d1a47da 100644 --- a/sdk/flutter/v4/ai-chatbots-overview.mdx +++ b/sdk/flutter/v4/ai-chatbots-overview.mdx @@ -2,7 +2,7 @@ title: "Bots" sidebarTitle: "AI Bots" description: "Configure AI-powered chatbots to provide automated assistance and maintain conversational momentum in your Flutter app." -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" --- diff --git a/sdk/flutter/v4/best-practices.mdx b/sdk/flutter/v4/best-practices.mdx index 37662f154..c3e99ba84 100644 --- a/sdk/flutter/v4/best-practices.mdx +++ b/sdk/flutter/v4/best-practices.mdx @@ -149,7 +149,7 @@ Follow these best practices to build reliable, performant, and secure applicatio ## Next Steps - + Common issues and solutions diff --git a/sdk/flutter/v4/error-codes.mdx b/sdk/flutter/v4/error-codes.mdx index 06e093208..802dc7d35 100644 --- a/sdk/flutter/v4/error-codes.mdx +++ b/sdk/flutter/v4/error-codes.mdx @@ -161,7 +161,7 @@ try { |------|---------| | `FAILED_TO_FETCH` | There is an unknown issue with the API request. Check your internet connection. | | `TOO_MANY_REQUEST` | Too many requests. Wait before sending the next request. | -| `ERR_TOO_MANY_REQUESTS` | Rate limiting. See [Rate Limits](/sdk/flutter/rate-limits). | +| `ERR_TOO_MANY_REQUESTS` | Rate limiting. See [Rate Limits](/sdk/flutter/v4/rate-limits). | ## Validation Errors @@ -219,16 +219,16 @@ See the full list in the [Error Guide](/articles/error-guide). ## Next Steps - + Common issues and solutions - + Understand and handle rate limits Complete server-side error code reference - + Recommended patterns for error handling diff --git a/sdk/flutter/v4/extensions-overview.mdx b/sdk/flutter/v4/extensions-overview.mdx index 5dcf22fb9..17ae8cad5 100644 --- a/sdk/flutter/v4/extensions-overview.mdx +++ b/sdk/flutter/v4/extensions-overview.mdx @@ -135,7 +135,7 @@ For detailed information on each extension, including configuration options and Configure webhooks for real-time event notifications - + Understand API rate limits and quotas diff --git a/sdk/flutter/v4/group-add-members.mdx b/sdk/flutter/v4/group-add-members.mdx index 36b38943c..2631d079a 100644 --- a/sdk/flutter/v4/group-add-members.mdx +++ b/sdk/flutter/v4/group-add-members.mdx @@ -163,7 +163,7 @@ For the group member added event, in the `Action` object received, the following ## Next Steps - + Remove or ban members from a group diff --git a/sdk/flutter/v4/group-change-member-scope.mdx b/sdk/flutter/v4/group-change-member-scope.mdx index 0420f4fdb..30a26c379 100644 --- a/sdk/flutter/v4/group-change-member-scope.mdx +++ b/sdk/flutter/v4/group-change-member-scope.mdx @@ -139,7 +139,7 @@ When fetching previous messages, scope changes appear as [Action](/sdk/reference Transfer ownership of a group to another member - + Remove or ban members from a group diff --git a/sdk/flutter/v4/groups-overview.mdx b/sdk/flutter/v4/groups-overview.mdx index 3e27ebc8c..feaafe043 100644 --- a/sdk/flutter/v4/groups-overview.mdx +++ b/sdk/flutter/v4/groups-overview.mdx @@ -52,7 +52,7 @@ Groups let users converse together in a shared space. CometChat supports three g - [Retrieve Groups](/sdk/flutter/retrieve-groups) — Fetch and filter the list of groups - [Retrieve Group Members](/sdk/flutter/retrieve-group-members) — Get the member list for a group - [Add Members](/sdk/flutter/group-add-members) — Add users to a group -- [Kick & Ban Members](/sdk/flutter/group-kick-ban-members) — Remove or ban members from a group +- [Kick & Ban Members](/sdk/flutter/v4/group-kick-ban-members) — Remove or ban members from a group - [Change Member Scope](/sdk/flutter/group-change-member-scope) — Promote or demote members --- diff --git a/sdk/flutter/v4/interactive-messages.mdx b/sdk/flutter/v4/interactive-messages.mdx index e13d96a3e..e2c9306c3 100644 --- a/sdk/flutter/v4/interactive-messages.mdx +++ b/sdk/flutter/v4/interactive-messages.mdx @@ -573,7 +573,7 @@ CometChat.sendInteractiveMessage(interactiveMessage, Send ephemeral messages that aren't stored - + Understand message types and hierarchy diff --git a/sdk/flutter/v4/key-concepts.mdx b/sdk/flutter/v4/key-concepts.mdx index 4e2d9e640..b75aabaf9 100644 --- a/sdk/flutter/v4/key-concepts.mdx +++ b/sdk/flutter/v4/key-concepts.mdx @@ -139,7 +139,7 @@ Every message belongs to one of these categories: | `action` | `groupMember`, `message` | System-generated (joins, edits, deletes) | | `call` | `audio`, `video` | Call-related messages | -For more details, see the [Message Structure and Hierarchy](/sdk/flutter/message-structure-and-hierarchy) guide. +For more details, see the [Message Structure and Hierarchy](/sdk/flutter/v4/message-structure-and-hierarchy) guide. ## Auto Mode Connection @@ -181,7 +181,7 @@ Know more about manual mode connection [click here](/sdk/flutter/connection-beha | RequestBuilder | Builder pattern class for constructing filtered/paginated queries | [Additional Message Filtering](/sdk/flutter/additional-message-filtering) | | AppSettings | Configuration object for initializing the SDK (App ID, Region, presence) | [Setup SDK](/sdk/flutter/setup) | | Transient Message | Ephemeral message not stored on server (typing indicators, live reactions) | [Transient Messages](/sdk/flutter/transient-messages) | -| Interactive Message | Message with actionable UI elements (forms, cards, buttons) | [Interactive Messages](/sdk/flutter/interactive-messages) | +| Interactive Message | Message with actionable UI elements (forms, cards, buttons) | [Interactive Messages](/sdk/flutter/v4/interactive-messages) | --- diff --git a/sdk/flutter/v4/leave-group.mdx b/sdk/flutter/v4/leave-group.mdx index 3d57928d7..4a04ed1ff 100644 --- a/sdk/flutter/v4/leave-group.mdx +++ b/sdk/flutter/v4/leave-group.mdx @@ -140,7 +140,7 @@ For the group member left event, in the `Action` object received, the following Permanently delete a group (admin only) - + Remove or ban members from a group diff --git a/sdk/flutter/v4/message-structure-and-hierarchy.mdx b/sdk/flutter/v4/message-structure-and-hierarchy.mdx index fe4c22aeb..eb16fcc7e 100644 --- a/sdk/flutter/v4/message-structure-and-hierarchy.mdx +++ b/sdk/flutter/v4/message-structure-and-hierarchy.mdx @@ -47,7 +47,7 @@ interactiveMessage.interactiveData; // Map - Interactive eleme ``` -Every message in CometChat belongs to a category (`message`, `custom`, `interactive`, `action`, `call`) and has a specific type within that category. On the SDK side, all messages extend [`BaseMessage`](/sdk/flutter/key-concepts), with subclasses like `TextMessage`, `MediaMessage`, `CustomMessage`, `InteractiveMessage`, `Action`, and `Call`. Understanding this hierarchy helps you handle different message types correctly. +Every message in CometChat belongs to a category (`message`, `custom`, `interactive`, `action`, `call`) and has a specific type within that category. On the SDK side, all messages extend [`BaseMessage`](/sdk/flutter/v4/key-concepts), with subclasses like `TextMessage`, `MediaMessage`, `CustomMessage`, `InteractiveMessage`, `Action`, and `Call`. Understanding this hierarchy helps you handle different message types correctly. ## Message Hierarchy @@ -178,7 +178,7 @@ An `InteractiveMessage` is a specialized object that encapsulates an interactive 4. customInteractive- for custom interaction messages -To know about Interactive messages please [click here](/sdk/flutter/interactive-messages). +To know about Interactive messages please [click here](/sdk/flutter/v4/interactive-messages). ### InteractiveMessage Properties @@ -276,7 +276,7 @@ The call messages have a property called status that helps you figure out the st Handle incoming messages with real-time listeners - + Create forms, cards, and interactive elements diff --git a/sdk/flutter/v4/overview.mdx b/sdk/flutter/v4/overview.mdx index 6789301ed..32e240d60 100644 --- a/sdk/flutter/v4/overview.mdx +++ b/sdk/flutter/v4/overview.mdx @@ -80,7 +80,7 @@ Requires AndroidX compatibility. For iOS platform setup, see [Setup](/sdk/flutte 1:1 and group chat, threads, reactions, typing indicators, read receipts, file sharing, and interactive messages. - + Ringing flows, direct call sessions, standalone calling, recording, and screen sharing. @@ -114,19 +114,19 @@ Skip the UI work — use pre-built, customizable components: ## Resources - + UIDs, GUIDs, auth tokens, and core SDK concepts - + Message categories, types, and hierarchy Latest SDK version and release notes - + Migration guide for V3 users - + Common issues and solutions @@ -143,7 +143,7 @@ Skip the UI work — use pre-built, customizable components: Send your first text, media, or custom message - + UIDs, GUIDs, auth tokens, and core SDK concepts diff --git a/sdk/flutter/v4/rate-limits.mdx b/sdk/flutter/v4/rate-limits.mdx index 32a79fc78..93d328652 100644 --- a/sdk/flutter/v4/rate-limits.mdx +++ b/sdk/flutter/v4/rate-limits.mdx @@ -97,7 +97,7 @@ Rate limits can be adjusted based on your use case and plan. Contact CometChat s Install and configure the CometChat Flutter SDK - + Learn the core concepts behind CometChat diff --git a/sdk/flutter/v4/retrieve-group-members.mdx b/sdk/flutter/v4/retrieve-group-members.mdx index 1eaa8a1ba..6d727e177 100644 --- a/sdk/flutter/v4/retrieve-group-members.mdx +++ b/sdk/flutter/v4/retrieve-group-members.mdx @@ -216,7 +216,7 @@ The `fetchNext()` method returns a list of [`GroupMember`](/sdk/reference/entiti Add new members to your groups - + Remove or ban members from groups diff --git a/sdk/flutter/v4/send-message.mdx b/sdk/flutter/v4/send-message.mdx index 57cc58dfa..db907c5f2 100644 --- a/sdk/flutter/v4/send-message.mdx +++ b/sdk/flutter/v4/send-message.mdx @@ -62,7 +62,7 @@ CometChat supports three types of messages: | [Media](#media-message) | `CometChat.sendMediaMessage()` | Images, videos, audio, files | | [Custom](#custom-message) | `CometChat.sendCustomMessage()` | Location, polls, or any structured data | -You can also send [Interactive Messages](/sdk/flutter/interactive-messages) for forms, cards, and custom UI elements. +You can also send [Interactive Messages](/sdk/flutter/v4/interactive-messages) for forms, cards, and custom UI elements. **Available via:** SDK | [REST API](https://api-explorer.cometchat.com) | [UI Kits](/ui-kit/flutter/overview) @@ -1240,7 +1240,7 @@ CometChat.sendCustomMessage(customMessage, onSuccess: (CustomMessage message) { -It is also possible to send interactive messages from CometChat , to know more [click here](/sdk/flutter/interactive-messages) +It is also possible to send interactive messages from CometChat , to know more [click here](/sdk/flutter/v4/interactive-messages) @@ -1255,7 +1255,7 @@ It is also possible to send interactive messages from CometChat , to know more [ Modify sent messages after delivery - + Send forms, cards, and interactive elements diff --git a/sdk/flutter/v4/threaded-messages.mdx b/sdk/flutter/v4/threaded-messages.mdx index d2b1e40f9..95facef2b 100644 --- a/sdk/flutter/v4/threaded-messages.mdx +++ b/sdk/flutter/v4/threaded-messages.mdx @@ -49,7 +49,7 @@ Threaded messages (or threads) are messages started from a particular parent mes ## Send Message in a Thread -As mentioned in the [Send a Message](send-message) section, you can send a message to a User or a Group by mentioning the receiver (uid/guid) and `receiverType`(user/group). +As mentioned in the [Send a Message](/sdk/flutter/v4/send-message) section, you can send a message to a User or a Group by mentioning the receiver (uid/guid) and `receiverType`(user/group). A message can be categorized as: @@ -218,7 +218,7 @@ Similarly, using the `parentMessageId` parameter, Media and Custom Messages can ### Receiving Real-Time Messages -The procedure to receive real-time messages is exactly the same as mentioned in the [Receive Messages](receive-messages) section. Use the `MessageListener` class to listen for incoming thread messages. Check if the received message belongs to the active thread using the `parentMessageId` field. +The procedure to receive real-time messages is exactly the same as mentioned in the [Receive Messages](/sdk/flutter/v4/receive-messages) section. Use the `MessageListener` class to listen for incoming thread messages. Check if the received message belongs to the active thread using the `parentMessageId` field. Always remove message listeners when they're no longer needed (e.g., in the `dispose()` method). Failing to remove listeners can cause memory leaks and duplicate event handling. @@ -530,7 +530,7 @@ The response is a list of `BaseMessage` objects, excluding any messages that are Add emoji reactions to messages - + Understand message types and hierarchy diff --git a/sdk/flutter/v4/troubleshooting.mdx b/sdk/flutter/v4/troubleshooting.mdx index de534d190..913725c52 100644 --- a/sdk/flutter/v4/troubleshooting.mdx +++ b/sdk/flutter/v4/troubleshooting.mdx @@ -156,7 +156,7 @@ Find solutions to common issues when building with the CometChat Flutter SDK. ## Error Codes -For the complete SDK error code reference, see [Error Codes](/sdk/flutter/error-codes). Common errors you'll encounter: +For the complete SDK error code reference, see [Error Codes](/sdk/flutter/v4/error-codes). Common errors you'll encounter: | Code | Description | Resolution | |------|-------------|------------| @@ -167,7 +167,7 @@ For the complete SDK error code reference, see [Error Codes](/sdk/flutter/error- | `USER_NOT_LOGGED_IN` | No active session | Call `login()` first | | `ERR_GUID_NOT_FOUND` | Group doesn't exist | Create group or verify GUID | | `ERR_NOT_A_MEMBER` | Not a group member | Join group first | -| `TOO_MANY_REQUEST` | Rate limit exceeded | See [Rate Limits](/sdk/flutter/rate-limits) | +| `TOO_MANY_REQUEST` | Rate limit exceeded | See [Rate Limits](/sdk/flutter/v4/rate-limits) | | `FAILED_TO_FETCH` | Network issue | Check internet connection and API endpoint | | `NO_WEBSOCKET_CONNECTION` | WebSocket disconnected | Check connection status, wait for reconnect | @@ -179,10 +179,10 @@ For the complete SDK error code reference, see [Error Codes](/sdk/flutter/error- Installation and initialization guide - + Recommended patterns and practices - + Complete SDK error code reference diff --git a/sdk/flutter/v4/upgrading-from-v3-guide.mdx b/sdk/flutter/v4/upgrading-from-v3-guide.mdx index fac6456f5..d73364bb9 100644 --- a/sdk/flutter/v4/upgrading-from-v3-guide.mdx +++ b/sdk/flutter/v4/upgrading-from-v3-guide.mdx @@ -65,7 +65,7 @@ The API methods, class names, and listener interfaces are unchanged between v3 a Install and configure the CometChat Flutter SDK - + Learn the core concepts behind CometChat v4 diff --git a/sdk/ios/2.0/extensions.mdx b/sdk/ios/2.0/extensions.mdx index 3a4af6224..2abc9ed62 100644 --- a/sdk/ios/2.0/extensions.mdx +++ b/sdk/ios/2.0/extensions.mdx @@ -14,8 +14,8 @@ Extensions pickup where our core leaves. They help extend the functionality of C Extensions that help alert users of new messages. *Recommended for all apps.* [Push Notification](/notifications/ios-fcm-push-notifications)\ -[Email Notification](/notifications/email-notifications-extension-legacy)\ -[SMS Notification](/notifications/sms-notifications-extension-legacy) +[Email Notification](https://assets.cometchat.io/legacy-docs/notifications/email-notifications-extension-legacy.html)\ +[SMS Notification](https://assets.cometchat.io/legacy-docs/notifications/sms-notifications-extension-legacy.html) ### User Experience @@ -50,4 +50,4 @@ Extensions that help increase user engagement. *Recommended for advanced apps.* \_Extensions that help you to build a safe messaging environment.\_*Recommended for live streaming and event apps.* -[Legacy Moderation Extensions](/moderation/legacy-extensions) +[Legacy Moderation Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) diff --git a/sdk/ios/2.0/overview.mdx b/sdk/ios/2.0/overview.mdx index 3f97ef16f..19d11b1d5 100644 --- a/sdk/ios/2.0/overview.mdx +++ b/sdk/ios/2.0/overview.mdx @@ -9,11 +9,11 @@ This guide demonstrates how to add chat to an iOS application using CometChat. B #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register or Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register or Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) #### I want to explore iOS sample apps. diff --git a/sdk/ios/3.0/overview.mdx b/sdk/ios/3.0/overview.mdx index 108bbee83..165a12298 100644 --- a/sdk/ios/3.0/overview.mdx +++ b/sdk/ios/3.0/overview.mdx @@ -9,11 +9,11 @@ This guide demonstrates how to add chat to an iOS application using CometChat. B #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register or Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register or Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) #### I want to explore iOS sample apps. diff --git a/sdk/ios/ai-agents.mdx b/sdk/ios/ai-agents.mdx index 5f1cc5055..5d518b774 100644 --- a/sdk/ios/ai-agents.mdx +++ b/sdk/ios/ai-agents.mdx @@ -236,7 +236,7 @@ if let elements = message.getElements(), !elements.isEmpty { ## Next Steps - + Set up AI-powered chatbots for automated conversations diff --git a/sdk/ios/ai-chatbots-overview.mdx b/sdk/ios/ai-chatbots-overview.mdx index 1280e5391..49e5dd3b3 100644 --- a/sdk/ios/ai-chatbots-overview.mdx +++ b/sdk/ios/ai-chatbots-overview.mdx @@ -1,5 +1,5 @@ --- title: "Bots" -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" description: "Navigate to Bots documentation." --- \ No newline at end of file diff --git a/sdk/javascript/2.0/overview.mdx b/sdk/javascript/2.0/overview.mdx index 231d366a5..0f397853e 100644 --- a/sdk/javascript/2.0/overview.mdx +++ b/sdk/javascript/2.0/overview.mdx @@ -9,12 +9,12 @@ This guide demonstrates how to add chat to a JavaScript application using CometC #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register and Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) -6. [Integrate our Chat Widget](overview#integrate-our-chat-widget) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register and Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) +6. [Integrate our Chat Widget](#integrate-our-chat-widget) #### I want to explore a sample app (includes UI) @@ -197,4 +197,4 @@ UID can be alphanumeric with underscore and hyphen. Spaces, punctuation and othe ## Integrate our Chat Widget -* Please refer to the [Chat Widget](/widget/html-bootstrap-jquery) section to integrate Chat Widget in your Website. +* Please refer to the [Chat Widget](https://assets.cometchat.io/legacy-docs/widget/html/legacy.html) section to integrate Chat Widget in your Website. diff --git a/sdk/javascript/3.0/overview.mdx b/sdk/javascript/3.0/overview.mdx index 4ac12ab35..bf23ff9a3 100644 --- a/sdk/javascript/3.0/overview.mdx +++ b/sdk/javascript/3.0/overview.mdx @@ -9,12 +9,12 @@ This guide demonstrates how to add chat to a JavaScript application using CometC #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register and Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) -6. [Integrate our Chat Widget](overview#integrate-our-chat-widget) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register and Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) +6. [Integrate our Chat Widget](#integrate-our-chat-widget) #### I want to explore a sample app (includes UI) @@ -474,4 +474,4 @@ UID can be alphanumeric with underscore and hyphen. Spaces, punctuation and othe ## Integrate our Chat Widget -* Please refer to the [Chat Widget](/widget/html-bootstrap-jquery) section to integrate Chat Widget in your Website. +* Please refer to the [Chat Widget](https://assets.cometchat.io/legacy-docs/widget/html/legacy.html) section to integrate Chat Widget in your Website. diff --git a/sdk/javascript/ai-agents.mdx b/sdk/javascript/ai-agents.mdx index c95561339..04056763f 100644 --- a/sdk/javascript/ai-agents.mdx +++ b/sdk/javascript/ai-agents.mdx @@ -207,7 +207,7 @@ The `getToolCalls()` method on `AIToolArgumentMessage` returns an array of `AITo ## Next Steps - + Set up AI-powered chatbots for automated conversations diff --git a/sdk/javascript/overview.mdx b/sdk/javascript/overview.mdx index f6875446a..9367727a2 100644 --- a/sdk/javascript/overview.mdx +++ b/sdk/javascript/overview.mdx @@ -7,12 +7,12 @@ This guide demonstrates how to add chat to a JavaScript application using CometC #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register and Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) -6. [Integrate our Chat Widget](overview#integrate-our-chat-widget) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register and Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) +6. [Integrate our Chat Widget](#integrate-our-chat-widget) #### I want to explore a sample app (includes UI) diff --git a/sdk/react-native/3.0/overview.mdx b/sdk/react-native/3.0/overview.mdx index 6b43038b8..5f19a6125 100644 --- a/sdk/react-native/3.0/overview.mdx +++ b/sdk/react-native/3.0/overview.mdx @@ -9,11 +9,11 @@ This guide demonstrates how to add chat to a React Native application using Come #### I want to integrate with my app -1. [Get your application keys](overview#get-your-application-keys) -2. [Add the CometChat dependency](overview#add-the-cometchat-dependency) -3. [Initialize CometChat](overview#initialize-cometchat) -4. [Register and Login your user](overview#register-and-login-your-user) -5. [Integrate our UI Kits](overview#integrate-our-ui-kits) +1. [Get your application keys](#get-your-application-keys) +2. [Add the CometChat dependency](#add-the-cometchat-dependency) +3. [Initialize CometChat](#initialize-cometchat) +4. [Register and Login your user](#register-and-login-your-user) +5. [Integrate our UI Kits](#integrate-our-ui-kits) #### I want to explore a sample app (includes UI) diff --git a/sdk/react-native/ai-chatbots-overview.mdx b/sdk/react-native/ai-chatbots-overview.mdx index a8ee5e2c7..44fc8470e 100644 --- a/sdk/react-native/ai-chatbots-overview.mdx +++ b/sdk/react-native/ai-chatbots-overview.mdx @@ -1,5 +1,5 @@ --- title: "Bots" description: "Build AI chatbots for React Native apps with CometChat to automate replies, assist users, and connect bot workflows to chat." -url: "/ai-chatbots/overview" +url: "https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/overview.html" --- diff --git a/ui-kit/android/extensions.mdx b/ui-kit/android/extensions.mdx index e5af99ed7..2424ea760 100644 --- a/ui-kit/android/extensions.mdx +++ b/ui-kit/android/extensions.mdx @@ -100,6 +100,6 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits. diff --git a/ui-kit/android/v4/ai-features.mdx b/ui-kit/android/v4/ai-features.mdx index f1be87d65..3b8de28e8 100644 --- a/ui-kit/android/v4/ai-features.mdx +++ b/ui-kit/android/v4/ai-features.mdx @@ -47,9 +47,9 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c AI Assist Bots automate responses and prompt interaction in the chat. They can handle common queries, assist with tasks, and provide information, freeing up human resources for more complex issues. -For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](/ai-chatbots/bots). +For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html). -Once you have successfully activated the [AI Assist Bot](/ai-chatbots/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/v4/message-composer) Component of UI Kits. +Once you have successfully activated the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/v4/message-composer) Component of UI Kits. diff --git a/ui-kit/android/v4/extensions.mdx b/ui-kit/android/v4/extensions.mdx index 2ff0aade2..c7e94db9c 100644 --- a/ui-kit/android/v4/extensions.mdx +++ b/ui-kit/android/v4/extensions.mdx @@ -89,7 +89,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/v4/message-list) component of UI Kits. @@ -99,7 +99,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/v4/message-list) component of UI Kits. @@ -109,7 +109,7 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/v4/message-list) component of UI Kits. diff --git a/ui-kit/android/v6/extensions.mdx b/ui-kit/android/v6/extensions.mdx index 3c254551f..138c33f80 100644 --- a/ui-kit/android/v6/extensions.mdx +++ b/ui-kit/android/v6/extensions.mdx @@ -100,6 +100,6 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/v6/message-list) component of UI Kits. diff --git a/ui-kit/angular/components/cometchat-search.mdx b/ui-kit/angular/components/cometchat-search.mdx index 5f96bd4b1..b11eab162 100644 --- a/ui-kit/angular/components/cometchat-search.mdx +++ b/ui-kit/angular/components/cometchat-search.mdx @@ -840,5 +840,5 @@ export class SearchDemoComponent implements OnInit { - [SearchConversationsService](/ui-kit/angular/api-reference/search-conversations-service) — Conversation search state, SDK queries, real-time listeners - [SearchMessagesService](/ui-kit/angular/api-reference/search-messages-service) — Message search state, attachment-type filtering, scoped queries - [CometChatTemplatesService](/ui-kit/angular/api-reference/templates-service) — Template resolution priority chain and global template overrides -- [Accessibility](/accessibility#search) — Cross-component keyboard accessibility reference -- [Events](/events) — UIKit event bus for decoupled component communication +- [Accessibility](/ui-kit/angular/accessibility#search) — Cross-component keyboard accessibility reference +- [Events](/ui-kit/angular/events) — UIKit event bus for decoupled component communication diff --git a/ui-kit/angular/customization/date-time-formatting.mdx b/ui-kit/angular/customization/date-time-formatting.mdx index 78824f6aa..255c23ce8 100644 --- a/ui-kit/angular/customization/date-time-formatting.mdx +++ b/ui-kit/angular/customization/date-time-formatting.mdx @@ -266,16 +266,16 @@ export class ChatComponent { ## Next Steps - + Override translations globally or per-component. - + Customize colors, fonts, and spacing. - + Add custom message types with templates. - + Configure global UIKit settings. diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx index 0ab7e2302..b81bd7ebc 100644 --- a/ui-kit/angular/guides/rich-text-formatting.mdx +++ b/ui-kit/angular/guides/rich-text-formatting.mdx @@ -639,4 +639,4 @@ this.editor = this.editorService.createEditor({ ## See Also - [RichTextEditorService API Reference](../api-reference/rich-text-editor-service.mdx) -- [MessageComposer Component](../components/message-composer.mdx) +- [MessageComposer Component](../components/cometchat-message-composer.mdx) diff --git a/ui-kit/angular/guides/search-messages.mdx b/ui-kit/angular/guides/search-messages.mdx index 7303d0891..d50ffc538 100644 --- a/ui-kit/angular/guides/search-messages.mdx +++ b/ui-kit/angular/guides/search-messages.mdx @@ -19,7 +19,7 @@ description: "Add full-text message search across conversations with result rout Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result. -Before starting, complete the [Integration Guide](/integration). +Before starting, complete the [Integration Guide](/ui-kit/angular/integration). --- @@ -190,13 +190,13 @@ export class ChatWithSearchComponent { ## Next Steps - + The search bar component reference. - + Render real-time message threads. - + Browse all feature and formatter guides. diff --git a/ui-kit/angular/guides/url-formatter.mdx b/ui-kit/angular/guides/url-formatter.mdx index ea9eedd59..1e8820ea5 100644 --- a/ui-kit/angular/guides/url-formatter.mdx +++ b/ui-kit/angular/guides/url-formatter.mdx @@ -126,16 +126,16 @@ The `CometChatUrlFormatter` is included by default in the message list. You only ## Next Steps - + Build custom inline text patterns. - + Render real-time message threads. - + Browse all feature and formatter guides. - + Add @mentions with styled tokens. diff --git a/ui-kit/angular/v4/action-sheet.mdx b/ui-kit/angular/v4/action-sheet.mdx index df9169852..1ce229651 100644 --- a/ui-kit/angular/v4/action-sheet.mdx +++ b/ui-kit/angular/v4/action-sheet.mdx @@ -20,7 +20,7 @@ This element is a slide-up pane for presenting the user with a set of actions. | layoutMode | Enum \{grid,list} | Types of display modes supported | | layoutModeIconURL | string | Asset URL for the toggle mode icon | | hideLayoutMode | boolean | When set to true, hides the button that toggles the layout | -| actionSheetStyle | [ActionSheetStyle](/ui-kit/angular/action-sheet#actionsheetstyle) | Styling properties and values of the element | +| actionSheetStyle | [ActionSheetStyle](/ui-kit/angular/v4/action-sheet#actionsheetstyle) | Styling properties and values of the element | ## ActionSheetStyle diff --git a/ui-kit/angular/v4/ai-features.mdx b/ui-kit/angular/v4/ai-features.mdx index ed1f2838b..2d48e8b86 100644 --- a/ui-kit/angular/v4/ai-features.mdx +++ b/ui-kit/angular/v4/ai-features.mdx @@ -17,7 +17,7 @@ When a user initiates a new chat, the UI kit displays a list of suggested openin For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). -Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/angular/message-list) Component of UI Kits. +Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/angular/v4/message-list) Component of UI Kits. @@ -29,7 +29,7 @@ Smart Replies are AI-generated responses to messages. They can predict what a us For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). -Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits. +Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/v4/message-composer) Component of UI Kits. @@ -41,7 +41,7 @@ The Conversation Summary feature provides concise summaries of long conversation For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits. +Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/v4/message-composer) Component of UI Kits. @@ -53,7 +53,7 @@ AI Assist Bots automate responses and prompt interaction in the chat. They can h For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots). -Once you have successfully activated the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits. +Once you have successfully activated the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/v4/message-composer) Component of UI Kits. diff --git a/ui-kit/angular/v4/audio-bubble.mdx b/ui-kit/angular/v4/audio-bubble.mdx index c6da51739..a4b1a3a19 100644 --- a/ui-kit/angular/v4/audio-bubble.mdx +++ b/ui-kit/angular/v4/audio-bubble.mdx @@ -13,7 +13,7 @@ description: "Audio Bubble — CometChat documentation." | autoPlay | boolean | When set to true, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. | | loop | boolean | When set to true, the audio player will automatically seek back to the start upon reaching the end of the audio. | | muted | boolean | when set to true, the audio will be initially silenced. | -| audioStyle | [AudioBubbleStyle](/ui-kit/angular/audio-bubble#audiobubblestyle) | Styling properties and values of the element | +| audioStyle | [AudioBubbleStyle](/ui-kit/angular/v4/audio-bubble#audiobubblestyle) | Styling properties and values of the element | ## AudioBubbleStyle diff --git a/ui-kit/angular/v4/backdrop.mdx b/ui-kit/angular/v4/backdrop.mdx index 516f4f21a..f86d5b39a 100644 --- a/ui-kit/angular/v4/backdrop.mdx +++ b/ui-kit/angular/v4/backdrop.mdx @@ -10,7 +10,7 @@ This element represents the background against which other elements are presente | Name | Type | Description | | ------------- | ------------------------------------------------------------ | -------------------------------------------- | | isOpen | Boolean | When set to true, makes the element visible | -| backdropStyle | [BackdropStyle](/ui-kit/angular/backdrop#backdropstyle) | Styling properties and values of the element | +| backdropStyle | [BackdropStyle](/ui-kit/angular/v4/backdrop#backdropstyle) | Styling properties and values of the element | ## Events diff --git a/ui-kit/angular/v4/badge.mdx b/ui-kit/angular/v4/badge.mdx index 80bcca42b..e36889de5 100644 --- a/ui-kit/angular/v4/badge.mdx +++ b/ui-kit/angular/v4/badge.mdx @@ -16,7 +16,7 @@ description: "Badge — CometChat documentation." | Name | Type | Description | | ---------- | ---------------------------------------------------- | --------------------------------- | | count | number | The numeric value to be displayed | -| badgeStyle | [BadgeStyle](/ui-kit/angular/badge#badge-style) | Styling properties of the element | +| badgeStyle | [BadgeStyle](/ui-kit/angular/v4/badge#badge-style) | Styling properties of the element | ## Badge Style diff --git a/ui-kit/angular/v4/button-group.mdx b/ui-kit/angular/v4/button-group.mdx index 674b87f59..4e84b3a97 100644 --- a/ui-kit/angular/v4/button-group.mdx +++ b/ui-kit/angular/v4/button-group.mdx @@ -12,7 +12,7 @@ This element is grouping of buttons together in a single line. | Name | Type | Description | | ---------------- | ---------------------------------------------------------------------- | -------------------------------------------- | | data | Array of any: \{id,buttonText,hoverText,iconURL,onClick} | Array of button element properties | -| buttonGroupStyle | [ButtonGroupStyle](/ui-kit/angular/button-group#buttongroupstyle) | Styling properties and values of the element | +| buttonGroupStyle | [ButtonGroupStyle](/ui-kit/angular/v4/button-group#buttongroupstyle) | Styling properties and values of the element | ## ButtonGroupStyle diff --git a/ui-kit/angular/v4/call-buttons.mdx b/ui-kit/angular/v4/call-buttons.mdx index bf59ec403..ca4d61fba 100644 --- a/ui-kit/angular/v4/call-buttons.mdx +++ b/ui-kit/angular/v4/call-buttons.mdx @@ -5,7 +5,7 @@ description: "Call Buttons — CometChat documentation." ## Overview -The `Call Button` is a [Component](/ui-kit/angular/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient. +The `Call Button` is a [Component](/ui-kit/angular/v4/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient. @@ -92,7 +92,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onVoiceCallClick @@ -298,7 +298,7 @@ The `Call Buttons` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the `Call Buttons` component is as follows. @@ -584,9 +584,9 @@ The Call Buttons Component is a Composite Component and it has a specific set of ### OngoingCall -If you want to customize the properties of the [OngoingCall](/ui-kit/angular/ongoing-call) Component inside Call Buttons Component, you need use the `CallScreenConfiguration` object. +If you want to customize the properties of the [OngoingCall](/ui-kit/angular/v4/ongoing-call) Component inside Call Buttons Component, you need use the `CallScreenConfiguration` object. -The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/ongoing-call#actions), [Filters](/ui-kit/angular/ongoing-call#filters), [Styles](/ui-kit/angular/ongoing-call#style), [Functionality](/ui-kit/angular/ongoing-call#functionality), and [Advanced](/ui-kit/angular/ongoing-call#advanced) properties of the [OngoingCall](/ui-kit/angular/ongoing-call) component. +The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/v4/ongoing-call#actions), [Filters](/ui-kit/angular/v4/ongoing-call#filters), [Styles](/ui-kit/angular/v4/ongoing-call#style), [Functionality](/ui-kit/angular/v4/ongoing-call#functionality), and [Advanced](/ui-kit/angular/v4/ongoing-call#advanced) properties of the [OngoingCall](/ui-kit/angular/v4/ongoing-call) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -596,7 +596,7 @@ The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angul -In this example, we will show how you can display the call recording button in the [OngoingCall](/ui-kit/angular/ongoing-call) component using `ongoingCallConfiguration`. +In this example, we will show how you can display the call recording button in the [OngoingCall](/ui-kit/angular/v4/ongoing-call) component using `ongoingCallConfiguration`. @@ -681,9 +681,9 @@ export class AppComponent { ### OutGoingCall -If you want to customize the properties of the [OutGoingCall](/ui-kit/angular/outgoing-call) Component inside Call Buttons Component, you need use the `OutGoingCallConfiguration` object. +If you want to customize the properties of the [OutGoingCall](/ui-kit/angular/v4/outgoing-call) Component inside Call Buttons Component, you need use the `OutGoingCallConfiguration` object. -The `OutGoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/outgoing-call#actions), [Filters](/ui-kit/angular/outgoing-call#filters), [Styles](/ui-kit/angular/outgoing-call#style), [Functionality](/ui-kit/angular/outgoing-call#functionality), and [Advanced](/ui-kit/angular/outgoing-call#functionality) properties of the [OutGoingCall](/ui-kit/angular/outgoing-call) component. +The `OutGoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/v4/outgoing-call#actions), [Filters](/ui-kit/angular/v4/outgoing-call#filters), [Styles](/ui-kit/angular/v4/outgoing-call#style), [Functionality](/ui-kit/angular/v4/outgoing-call#functionality), and [Advanced](/ui-kit/angular/v4/outgoing-call#functionality) properties of the [OutGoingCall](/ui-kit/angular/v4/outgoing-call) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -693,7 +693,7 @@ The `OutGoingCallConfiguration` provides access to all the [Action](/ui-kit/angu -In this example, we will be changing the background color of [OutGoingCall](/ui-kit/angular/outgoing-call) component using `OutGoingCallConfiguration`. +In this example, we will be changing the background color of [OutGoingCall](/ui-kit/angular/v4/outgoing-call) component using `OutGoingCallConfiguration`. diff --git a/ui-kit/angular/v4/call-features.mdx b/ui-kit/angular/v4/call-features.mdx index 4c2cfe4e5..4c6f4ff38 100644 --- a/ui-kit/angular/v4/call-features.mdx +++ b/ui-kit/angular/v4/call-features.mdx @@ -9,7 +9,7 @@ CometChat's Calls feature is an advanced functionality that allows you to seamle ## Integration -First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/angular/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Angular project. +First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/angular/v4/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Angular project. Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it: @@ -19,7 +19,7 @@ Add the SDK files to your project's dependencies or libraries: npm install @cometchat/calls-sdk-javascript ``` -After adding this dependency, the Angular UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/angular/call-buttons) component rendered in [MessageHeader](/ui-kit/angular/message-header) Component. +After adding this dependency, the Angular UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/angular/v4/call-buttons) component rendered in [MessageHeader](/ui-kit/angular/v4/message-header) Component. @@ -29,7 +29,7 @@ After adding this dependency, the Angular UI Kit will automatically detect it an ### Incoming Call -The [Incoming Call](/ui-kit/angular/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. +The [Incoming Call](/ui-kit/angular/v4/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call. @@ -39,7 +39,7 @@ When a call is made to a user, the Incoming Call component triggers and displays ### Outgoing Call -The [Outgoing Call](/ui-kit/angular/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. +The [Outgoing Call](/ui-kit/angular/v4/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user. @@ -49,7 +49,7 @@ Importantly, the Outgoing Call component is smartly designed to transition autom ### Ongoing Call -The [OngoingCall](/ui-kit/angular/ongoing-call) component is the user interface that displays during an ongoing call. For an audio call, this screen displays the participant's name, call duration, and buttons to mute the audio, enable or disable video, switch the camera, and end the call. +The [OngoingCall](/ui-kit/angular/v4/ongoing-call) component is the user interface that displays during an ongoing call. For an audio call, this screen displays the participant's name, call duration, and buttons to mute the audio, enable or disable video, switch the camera, and end the call. For a video call, the Call Screen might additionally display the video footage from both the user's camera and the recipient's camera. @@ -59,7 +59,7 @@ For a video call, the Call Screen might additionally display the video footage f ### Call Logs -[Call Logs](/ui-kit/angular/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities. +[Call Logs](/ui-kit/angular/v4/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities. diff --git a/ui-kit/angular/v4/call-log-details.mdx b/ui-kit/angular/v4/call-log-details.mdx index e1b66e181..f282e8f99 100644 --- a/ui-kit/angular/v4/call-log-details.mdx +++ b/ui-kit/angular/v4/call-log-details.mdx @@ -5,7 +5,7 @@ description: "Call Log Details — CometChat documentation." ## Overview -The `Call Log Details` is a [Composite Component](/ui-kit/angular/components-overview#composite-components) that displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call. +The `Call Log Details` is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) that displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call. @@ -13,9 +13,9 @@ The `Call Log Details` is a [Composite Component](/ui-kit/angular/components-ove | Components | Description | | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Call Log History](/ui-kit/angular/call-log-history) | The `Call Log History` component shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. | -| [Call Log Recordings](/ui-kit/angular/call-log-recording) | The `Call Log Recordings` component shows a paginated list of recordings of a particular call. | -| [Call Log participants](/ui-kit/angular/call-log-participants) | The `Call Log Participants` component shows a separate view that displays comprehensive information about Call. | +| [Call Log History](/ui-kit/angular/v4/call-log-history) | The `Call Log History` component shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. | +| [Call Log Recordings](/ui-kit/angular/v4/call-log-recording) | The `Call Log Recordings` component shows a paginated list of recordings of a particular call. | +| [Call Log participants](/ui-kit/angular/v4/call-log-participants) | The `Call Log Participants` component shows a separate view that displays comprehensive information about Call. | ## Usage @@ -108,7 +108,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onBackClick @@ -194,7 +194,7 @@ The `Call Log Details` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `CallLogDetails` does not produce any events. @@ -306,7 +306,7 @@ The following properties are exposed by `CallLogDetailsStyle`: ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Call Log Details` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Call Log Details` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -511,7 +511,7 @@ This defines the structure of each option for a template in the details componen ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. CallLogDetails has `Call Log History`, `Call Log Recordings` and `Call Log Participants` component. Hence, each of these components will have its individual `Configuration`. @@ -521,7 +521,7 @@ CallLogDetails has `Call Log History`, `Call Log Recordings` and `Call Log Parti You can customize the properties of the Call Log History component by making use of the `callLogHistoryConfiguration`. You can accomplish this by employing the `callLogHistoryConfiguration` props as demonstrated below: -All exposed properties of `CallLogHistoryConfiguration` can be found under [Call Log History](/ui-kit/angular/call-log-history#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CallLogHistoryConfiguration` can be found under [Call Log History](/ui-kit/angular/v4/call-log-history#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -617,7 +617,7 @@ export class AppComponent { You can customize the properties of the Call Log Recordings component by making use of the `callLogRecordingsConfiguration`. You can accomplish this by employing the `callLogRecordingsConfiguration` props as demonstrated below: -All exposed properties of `CallLogRecordingsConfiguration` can be found under [Call Log Recordings](/ui-kit/angular/call-log-recording#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CallLogRecordingsConfiguration` can be found under [Call Log Recordings](/ui-kit/angular/v4/call-log-recording#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -707,7 +707,7 @@ export class AppComponent { You can customize the properties of the Call Log Participants component by making use of the `callLogParticipantsConfiguration`. You can accomplish this by employing the `callLogParticipantsConfiguration` props as demonstrated below: -All exposed properties of `CallLogParticipantsConfiguration` can be found under [Call Log Participants](/ui-kit/angular/call-log-participants#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CallLogParticipantsConfiguration` can be found under [Call Log Participants](/ui-kit/angular/v4/call-log-participants#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/call-log-history.mdx b/ui-kit/angular/v4/call-log-history.mdx index 0a220b998..062382ad7 100644 --- a/ui-kit/angular/v4/call-log-history.mdx +++ b/ui-kit/angular/v4/call-log-history.mdx @@ -5,7 +5,7 @@ description: "Call Log History — CometChat documentation." ## Overview -`CometChatCallLogHistory` is a [Component](/ui-kit/angular/components-overview#components) that shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. +`CometChatCallLogHistory` is a [Component](/ui-kit/angular/v4/components-overview#components) that shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. @@ -16,9 +16,9 @@ The `Call Log History` is comprised of the following components: | Components | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | CometChatList | a reusable container component having title, search box, customisable background and a List View | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | | cometchat-divider | This component is a visual element used to separate content or sections within a CometChat interface, enhancing readability and visual organization | -| [cometchat-date](/ui-kit/angular/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | +| [cometchat-date](/ui-kit/angular/v4/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | | cometchat-button | This component represents a button with optional icon and text. | ## Usage @@ -96,7 +96,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onBackClick @@ -348,7 +348,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `CallLogHistory` does not produce any events. @@ -464,7 +464,7 @@ The following properties are exposed by `CallLogHistoryStyle`: ##### 2. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Call Log History` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Call Log History` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). diff --git a/ui-kit/angular/v4/call-log-participants.mdx b/ui-kit/angular/v4/call-log-participants.mdx index 587ebc905..508af49ea 100644 --- a/ui-kit/angular/v4/call-log-participants.mdx +++ b/ui-kit/angular/v4/call-log-participants.mdx @@ -5,7 +5,7 @@ description: "Call Log Participants — CometChat documentation." ## Overview -`CometChatCallLogParticipants` is a [Component](/ui-kit/angular/components-overview#components) that shows a separate view that displays comprehensive information about Call. This will enable users to easily access details such as the call participants, call details for a more informed communication experience. +`CometChatCallLogParticipants` is a [Component](/ui-kit/angular/v4/components-overview#components) that shows a separate view that displays comprehensive information about Call. This will enable users to easily access details such as the call participants, call details for a more informed communication experience. @@ -16,8 +16,8 @@ The `Call Log Participants` is comprised of the following components: | Components | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | CometChatList | a reusable container component having title, search box, customisable background and a List View | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | -| [cometchat-date](/ui-kit/angular/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | +| [cometchat-date](/ui-kit/angular/v4/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | | cometchat-button | This component represents a button with optional icon and text. | ## Usage @@ -103,7 +103,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onBackClick @@ -183,7 +183,7 @@ The `Call Log Participants` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Call Log Participants` does not produce any events. @@ -295,7 +295,7 @@ The following properties are exposed by `CallLogParticipantsStyle`: ##### 2. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Call Log Participants` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Call Log Participants` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). @@ -366,7 +366,7 @@ export class AppComponent { ##### 3. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Call Log Participants` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Call Log Participants` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). diff --git a/ui-kit/angular/v4/call-log-recording.mdx b/ui-kit/angular/v4/call-log-recording.mdx index 2db55d48f..50efc7c6f 100644 --- a/ui-kit/angular/v4/call-log-recording.mdx +++ b/ui-kit/angular/v4/call-log-recording.mdx @@ -5,7 +5,7 @@ description: "Call Log Recordings — CometChat documentation." ## Overview -The `CometChatCallLogRecordings` is a [Component](/ui-kit/angular/components-overview#components) that shows a paginated list of recordings of a particular call. This allows the user to see all the recordings along with the duration as well as a download link using which one can download the recording. +The `CometChatCallLogRecordings` is a [Component](/ui-kit/angular/v4/components-overview#components) that shows a paginated list of recordings of a particular call. This allows the user to see all the recordings along with the duration as well as a download link using which one can download the recording. @@ -16,8 +16,8 @@ The `Call Log Recordings` is comprised of the following components: | Components | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | CometChatList | a reusable container component having title, search box, customisable background and a List View | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | -| [cometchat-date](/ui-kit/angular/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | +| [cometchat-date](/ui-kit/angular/v4/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | | cometchat-button | This component represents a button with optional icon and text. | ## Usage @@ -93,7 +93,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onBackClick @@ -219,7 +219,7 @@ The `Call Log Recordings` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Call Log Recordings` does not produce any events. @@ -324,7 +324,7 @@ The following properties are exposed by `CallLogRecordingsStyle`: ##### 2. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Call Log Recordings` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Call Log Recordings` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). diff --git a/ui-kit/angular/v4/call-log-with-details.mdx b/ui-kit/angular/v4/call-log-with-details.mdx index 278c36ea0..262ad3c09 100644 --- a/ui-kit/angular/v4/call-log-with-details.mdx +++ b/ui-kit/angular/v4/call-log-with-details.mdx @@ -5,7 +5,7 @@ description: "Call Log With Details — CometChat documentation." ## Overview -The `CometChatCallLogsWithDetails` is a [Composite Component](/ui-kit/angular/components-overview#composite-components) encompassing components such as [Call Logs](/ui-kit/angular/call-logs) and [Call Log Details](/ui-kit/angular/call-log-details). Both of these component contributes to the functionality and structure of the overall `CallLogsWithDetails` component. +The `CometChatCallLogsWithDetails` is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) encompassing components such as [Call Logs](/ui-kit/angular/v4/call-logs) and [Call Log Details](/ui-kit/angular/v4/call-log-details). Both of these component contributes to the functionality and structure of the overall `CallLogsWithDetails` component. @@ -13,8 +13,8 @@ The `CometChatCallLogsWithDetails` is a [Composite Component](/ui-kit/angular/co | Components | Description | | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Call Logs](/ui-kit/angular/call-logs) | The `Call Logs` component is designed to show the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available. | -| [Call Log Details](/ui-kit/angular/call-log-details) | The `Call Log Details` component is designed to displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. | +| [Call Logs](/ui-kit/angular/v4/call-logs) | The `Call Logs` component is designed to show the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available. | +| [Call Log Details](/ui-kit/angular/v4/call-log-details) | The `Call Log Details` component is designed to displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. | ## Usage @@ -91,7 +91,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. While the CallLogsWithDetails component does not have its actions, its components - Call Logs, and Call Log Details - each have their own set of actions. @@ -162,7 +162,7 @@ export class AppComponent { The `CometChatCallLogsWithDetails` component overrides several actions from its components to reach its default behavior. The list of actions overridden by GroupsWithMessages includes: -* [onInfoClick](/ui-kit/angular/call-logs#2-oninfoclick) : By overriding the `onInfoClick` of the Call Logs Component, CallLogsWithDetails achieves navigation from [Call Logs](/ui-kit/angular/call-logs) to [Call Log Details](/ui-kit/angular/call-log-details) component. +* [onInfoClick](/ui-kit/angular/v4/call-logs#2-oninfoclick) : By overriding the `onInfoClick` of the Call Logs Component, CallLogsWithDetails achieves navigation from [Call Logs](/ui-kit/angular/v4/call-logs) to [Call Log Details](/ui-kit/angular/v4/call-log-details) component. @@ -174,7 +174,7 @@ The `CometChatCallLogsWithDetails` component overrides several actions from its **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -While the CallLogsWithDetails component does not have filters, its components do, For more detail on individual filters of its component refer to [Call Logs](/ui-kit/angular/call-logs) and [Call Log Details](/ui-kit/angular/call-log-details). +While the CallLogsWithDetails component does not have filters, its components do, For more detail on individual filters of its component refer to [Call Logs](/ui-kit/angular/v4/call-logs) and [Call Log Details](/ui-kit/angular/v4/call-log-details). By utilizing the [Configurations](#configurations) object of its components, you can apply filters. @@ -238,7 +238,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The CallLogsWithDetails does not produce any events. @@ -317,7 +317,7 @@ export class AppComponent { *** -You can also customize its component styles. For more details on individual component styles, you can refer [Call Logs Styles](/ui-kit/angular/call-logs#1-calllogs-style) and [Call Log Details Styles](/ui-kit/angular/call-log-details#1-calllogdetails-style). +You can also customize its component styles. For more details on individual component styles, you can refer [Call Logs Styles](/ui-kit/angular/v4/call-logs#1-calllogs-style) and [Call Log Details Styles](/ui-kit/angular/v4/call-log-details#1-calllogdetails-style). Styles can be applied to SubComponents using their respective [configurations](#configurations). @@ -461,7 +461,7 @@ Below is a list of customizations along with corresponding code snippets: Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. -You can find the list of all Functionality customization of individual components in [Call Logs](/ui-kit/angular/call-logs#functionality)and [Call Log Details Styles](/ui-kit/angular/call-log-details#functionality). +You can find the list of all Functionality customization of individual components in [Call Logs](/ui-kit/angular/v4/call-logs#functionality)and [Call Log Details Styles](/ui-kit/angular/v4/call-log-details#functionality). **Example** @@ -598,17 +598,17 @@ export class AppComponent { *** -To find all the details on individual Component advance customization you can refer, [Call Logs Advance](/ui-kit/angular/call-logs#advanced) and [Call Log Details Advance](/ui-kit/angular/call-log-details#advanced). +To find all the details on individual Component advance customization you can refer, [Call Logs Advance](/ui-kit/angular/v4/call-logs#advanced) and [Call Log Details Advance](/ui-kit/angular/v4/call-log-details#advanced). CallLogsWithDetails uses advanced-level customization of both Call Logs & Call Log Details components to achieve its default behavior. -1. CallLogsWithDetails utilizes the [onInfoClick](/ui-kit/angular/call-logs#2-oninfoclick) property of the `Call Logs` subcomponent to navigate the Call Log Details from [Call Logs](/ui-kit/angular/call-logs) to [Call Log Details](/ui-kit/angular/call-log-details). +1. CallLogsWithDetails utilizes the [onInfoClick](/ui-kit/angular/v4/call-logs#2-oninfoclick) property of the `Call Logs` subcomponent to navigate the Call Log Details from [Call Logs](/ui-kit/angular/v4/call-logs) to [Call Log Details](/ui-kit/angular/v4/call-log-details). -2. CallLogsWithDetails utilizes the [onBack](/ui-kit/angular/call-log-details#1-onbackclick) action of the `Call Log Details` subcomponent to close the [Call Log Details](/ui-kit/angular/call-log-details) Component +2. CallLogsWithDetails utilizes the [onBack](/ui-kit/angular/v4/call-log-details#1-onbackclick) action of the `Call Log Details` subcomponent to close the [Call Log Details](/ui-kit/angular/v4/call-log-details) Component @@ -622,7 +622,7 @@ When you override `onItemClick` and `onBack`, the default behavior of CallLogsWi ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. CallLogsWithDetails has `Call Logs` and `Call Log Details` component. Hence, each of these components will have its individual `Configuration`. @@ -632,7 +632,7 @@ CallLogsWithDetails has `Call Logs` and `Call Log Details` component. Hence, eac You can customize the properties of the Groups component by making use of the `callLogsConfiguration`. -All exposed properties of `CallLogsConfiguration` can be found under [Call Logs](/ui-kit/angular/call-logs). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CallLogsConfiguration` can be found under [Call Logs](/ui-kit/angular/v4/call-logs). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -709,7 +709,7 @@ export class AppComponent { You can customize the properties of the Call Log Details component by making use of the `callLogDetailsConfiguration`. You can accomplish this by employing the `callLogDetailsConfiguration` props as demonstrated below: -All exposed properties of `CallLogDetailsConfiguration` can be found under [Call Log Details](/ui-kit/angular/call-log-details#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CallLogDetailsConfiguration` can be found under [Call Log Details](/ui-kit/angular/v4/call-log-details#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/call-logs.mdx b/ui-kit/angular/v4/call-logs.mdx index 21d0a23a3..31d5cf580 100644 --- a/ui-kit/angular/v4/call-logs.mdx +++ b/ui-kit/angular/v4/call-logs.mdx @@ -5,7 +5,7 @@ description: "Call Logs — CometChat documentation." ## Overview -`CometChatCallLogs` is a [Component](/ui-kit/angular/components-overview#components) that shows the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available. +`CometChatCallLogs` is a [Component](/ui-kit/angular/v4/components-overview#components) that shows the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available. @@ -16,9 +16,9 @@ The `Call Logs` is comprised of the following components: | Components | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | CometChatList | a reusable container component having title, search box, customisable background and a List View | -| [cometchat-backdrop](/ui-kit/angular/backdrop) | This element represents the background against which other elements are presented. | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | -| [cometchat-date](/ui-kit/angular/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | +| [cometchat-backdrop](/ui-kit/angular/v4/backdrop) | This element represents the background against which other elements are presented. | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | +| [cometchat-date](/ui-kit/angular/v4/date) | This Component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | | cometchat-button | This component represents a button with optional icon and text. | ## Usage @@ -96,7 +96,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onItemClick @@ -342,7 +342,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the `Call Logs` component is as follows. @@ -490,7 +490,7 @@ The following properties are exposed by `CallLogsStyle`: ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Call Logs` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Call Logs` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -549,7 +549,7 @@ export class AppComponent { ##### 3. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Call Logs` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Call Logs` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). @@ -1167,7 +1167,7 @@ export class AppComponent { ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. CometChatCallLogs has `OutGoing Call` component. Hence, each of these components will have its individual \`Configuration\`\`. @@ -1177,7 +1177,7 @@ CometChatCallLogs has `OutGoing Call` component. Hence, each of these components You can customize the properties of the OutGoing Call component by making use of the `OutgoingCallConfiguration`. -All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/angular/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/angular/v4/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/checkbox.mdx b/ui-kit/angular/v4/checkbox.mdx index c4f196f14..a10e4b567 100644 --- a/ui-kit/angular/v4/checkbox.mdx +++ b/ui-kit/angular/v4/checkbox.mdx @@ -15,7 +15,7 @@ This element allow the user to select one or more items from a set. | labelText | string | Caption text of the element | | checked | boolean | When set to true, element is checked by default | | disabled | boolean | When set to true, disables the element | -| checkboxStyle | [CheckboxStyle](/ui-kit/angular/checkbox#checkboxstyle) | Styling properties and values of the element | +| checkboxStyle | [CheckboxStyle](/ui-kit/angular/v4/checkbox#checkboxstyle) | Styling properties and values of the element | ## CheckboxStyle diff --git a/ui-kit/angular/v4/cometchat-quick-view.mdx b/ui-kit/angular/v4/cometchat-quick-view.mdx index ea774b5fa..794cea24a 100644 --- a/ui-kit/angular/v4/cometchat-quick-view.mdx +++ b/ui-kit/angular/v4/cometchat-quick-view.mdx @@ -15,7 +15,7 @@ CometChat's Quick View component allows you to create a quick overview panel wit | subtitle | string | The subtitle for the Quick View. | | closeIconURL | string | The URL for the close icon. If not provided, a default close icon will be used. | | hideCloseIcon | boolean | A boolean to determine whether to hide the close icon. By default, it is `true`. | -| quickViewStyle | [QuickViewStyle](/ui-kit/angular/cometchat-quick-view#quickviewstyle) | An instance of `QuickViewStyle` class to style the Quick View. | +| quickViewStyle | [QuickViewStyle](/ui-kit/angular/v4/cometchat-quick-view#quickviewstyle) | An instance of `QuickViewStyle` class to style the Quick View. | ## QuickViewStyle diff --git a/ui-kit/angular/v4/confirm-dialog.mdx b/ui-kit/angular/v4/confirm-dialog.mdx index f23a1f048..ad895b1ed 100644 --- a/ui-kit/angular/v4/confirm-dialog.mdx +++ b/ui-kit/angular/v4/confirm-dialog.mdx @@ -19,7 +19,7 @@ Clicking on "Cancel" cancels the action, discards any changes, and closes the di | cancelButtonText | string | Text on the cancel button | | confirmButtonIconURL | string | Asset URL for the icon that appears on the confirm button | | cancelButtonIconURL | string | Asset URL for the icon that appears on the cancel button | -| confirmDialogStyle | [ConfirmDialogStyle](/ui-kit/angular/confirm-dialog#confirmdialogstyle) | Styling properties and values of the element | +| confirmDialogStyle | [ConfirmDialogStyle](/ui-kit/angular/v4/confirm-dialog#confirmdialogstyle) | Styling properties and values of the element | ## Events diff --git a/ui-kit/angular/v4/conversations-with-messages.mdx b/ui-kit/angular/v4/conversations-with-messages.mdx index f26176b8e..90e538d58 100644 --- a/ui-kit/angular/v4/conversations-with-messages.mdx +++ b/ui-kit/angular/v4/conversations-with-messages.mdx @@ -5,7 +5,7 @@ description: "Conversations With Messages — CometChat documentation." ## Overview -The ConversationsWithMessages is a [Composite Component](/ui-kit/angular/components-overview#composite-components) encompassing components such as [Conversations](/ui-kit/angular/conversations), [Messages](/ui-kit/angular/messages), and [Contacts](/ui-kit/angular/contacts). Each of these component contributes to the functionality and structure of the overall ConversationsWithMessages component. +The ConversationsWithMessages is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) encompassing components such as [Conversations](/ui-kit/angular/v4/conversations), [Messages](/ui-kit/angular/v4/messages), and [Contacts](/ui-kit/angular/v4/contacts). Each of these component contributes to the functionality and structure of the overall ConversationsWithMessages component. @@ -13,9 +13,9 @@ The ConversationsWithMessages is a [Composite Component](/ui-kit/angular/compone | Components | Description | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/angular/conversations) | The `Conversations` component is designed to display a list of either `User` or `Group`. This essentially represents your recent conversation history. | -| [Messages](/ui-kit/angular/messages) | The `Messages` component is designed to manage the messaging interaction for either individual `User` or `Group` conversations. | -| [Contacts](/ui-kit/angular/contacts) | The `CometChatContacts` component is specifically designed to facilitate the display and management of both `User` and `Groups`. | +| [Conversations](/ui-kit/angular/v4/conversations) | The `Conversations` component is designed to display a list of either `User` or `Group`. This essentially represents your recent conversation history. | +| [Messages](/ui-kit/angular/v4/messages) | The `Messages` component is designed to manage the messaging interaction for either individual `User` or `Group` conversations. | +| [Contacts](/ui-kit/angular/v4/contacts) | The `CometChatContacts` component is specifically designed to facilitate the display and management of both `User` and `Groups`. | ## Usage @@ -95,9 +95,9 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -While the ConversationsWithMessages component does not have its actions, its components - [Conversation](/ui-kit/angular/components-overview#actions), [Messages](/ui-kit/angular/messages), and [Contacts](/ui-kit/angular/contacts) - each have their own set of actions. +While the ConversationsWithMessages component does not have its actions, its components - [Conversation](/ui-kit/angular/v4/components-overview#actions), [Messages](/ui-kit/angular/v4/messages), and [Contacts](/ui-kit/angular/v4/contacts) - each have their own set of actions. The Action of the components can be overridden through the use of the [Configurations](#configurations) object of its components. Here is an example code snippet. @@ -170,7 +170,7 @@ export class AppComponent implements OnInit{ The ConversationsWithMessages component overrides several actions from its components to reach its default behavior. The list of actions overridden by ConversationsWithMessages includes: -* [OnItemClick](/ui-kit/angular/conversations#1-onitemclick) : By overriding the `OnItemClick` of the Conversation Component, ConversationsWithMessages achieves navigation from [Conversation](/ui-kit/angular/conversations) to [Messages](/ui-kit/angular/messages) component. +* [OnItemClick](/ui-kit/angular/v4/conversations#1-onitemclick) : By overriding the `OnItemClick` of the Conversation Component, ConversationsWithMessages achieves navigation from [Conversation](/ui-kit/angular/v4/conversations) to [Messages](/ui-kit/angular/v4/messages) component. @@ -180,7 +180,7 @@ The ConversationsWithMessages component overrides several actions from its compo **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -While the ConversationsWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Conversations Filters](/ui-kit/angular/conversations#filters) and [Messages Filters](/ui-kit/angular/messages). +While the ConversationsWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Conversations Filters](/ui-kit/angular/v4/conversations#filters) and [Messages Filters](/ui-kit/angular/v4/messages). By utilizing the [Configurations](#configurations) object of its components, you can apply filters. @@ -245,9 +245,9 @@ export class AppComponent implements OnInit{ ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. -The ConversationsWithMessages does not generate its events but its component does. For a full list of these events, you can refer to [Conversations events](/ui-kit/angular/conversations#events) and [Messages events](/ui-kit/angular/messages#events). +The ConversationsWithMessages does not generate its events but its component does. For a full list of these events, you can refer to [Conversations events](/ui-kit/angular/v4/conversations#events) and [Messages events](/ui-kit/angular/v4/messages#events). In the following example, we're incorporating observers for the `ConversationDeleted` event of `Conversations` and the `MessageSent` event of the `Messages` component. @@ -299,7 +299,7 @@ To fit your app's design requirements, you have the ability to customize the app ### Style -Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. ConversationsWithMessages component doesn't have its own style parameters. But you can customize its component styles. For more details on individual component styles, you can refer [Conversation Styles](/ui-kit/angular/conversations#style), [Messages Styles](/ui-kit/angular/messages#1-messages-style), and [Contacts Styles](/ui-kit/angular/contacts#contactsstyle) +Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. ConversationsWithMessages component doesn't have its own style parameters. But you can customize its component styles. For more details on individual component styles, you can refer [Conversation Styles](/ui-kit/angular/v4/conversations#style), [Messages Styles](/ui-kit/angular/v4/messages#1-messages-style), and [Contacts Styles](/ui-kit/angular/v4/contacts#contactsstyle) Styles can be applied to SubComponents using their respective [configurations](#configurations). @@ -375,7 +375,7 @@ These are a set of **small functional customizations** that allow you to **fine- ##### user -you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/messages) component for the specified `User`. +you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/v4/messages) component for the specified `User`. @@ -437,7 +437,7 @@ export class AppComponent implements OnInit{ ##### group -you can utilize the `group` method with a [Group](/sdk/javascript/groups-overview) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/messages) component for the specified `Group`. +you can utilize the `group` method with a [Group](/sdk/javascript/groups-overview) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/v4/messages) component for the specified `Group`. @@ -504,7 +504,7 @@ export class AppComponent implements OnInit{ Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. -You can find the list of all Functionality customization of individual components in [Conversations](/ui-kit/angular/conversations#functionality) , [Messages](/ui-kit/angular/messages#functionality), and [Contacts](/ui-kit/angular/contacts) +You can find the list of all Functionality customization of individual components in [Conversations](/ui-kit/angular/v4/conversations#functionality) , [Messages](/ui-kit/angular/v4/messages#functionality), and [Contacts](/ui-kit/angular/v4/contacts) **Example** @@ -650,17 +650,17 @@ export class AppComponent implements OnInit{ *** -To find all the details on individual Component advance customization you can refer, [Conversations Advance](/ui-kit/angular/conversations#advanced),[Messages Advance](/ui-kit/angular/messages#advanced) and [Contacts Advance](/ui-kit/angular/contacts) +To find all the details on individual Component advance customization you can refer, [Conversations Advance](/ui-kit/angular/v4/conversations#advanced),[Messages Advance](/ui-kit/angular/v4/messages#advanced) and [Contacts Advance](/ui-kit/angular/v4/contacts) ConversationsWithMessages uses advanced-level customization of both Conversation & Messages components to achieve its default behavior. -1. ConversationsWithMessages utilizes the [menu](/ui-kit/angular/conversations#menus) of the `Conversations` subcomponent to navigate the user from [Conversations](/ui-kit/angular/conversations) to [Contacts](/ui-kit/angular/contacts) +1. ConversationsWithMessages utilizes the [menu](/ui-kit/angular/v4/conversations#menus) of the `Conversations` subcomponent to navigate the user from [Conversations](/ui-kit/angular/v4/conversations) to [Contacts](/ui-kit/angular/v4/contacts) -2. ConversationsWithMessages utilizes the [menu](/ui-kit/angular/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/messages) to [Details](/ui-kit/angular/group-details) +2. ConversationsWithMessages utilizes the [menu](/ui-kit/angular/v4/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/v4/messages) to [Details](/ui-kit/angular/v4/group-details) @@ -674,7 +674,7 @@ When you override `menu`, the default behavior of ConversationsWithMessages will ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. ConversationsWithMessages has `Conversations`, `Messages`, and `Contacts` component. Hence, each of these components will have its individual \`Configuration\`\`. @@ -696,7 +696,7 @@ You can customize the properties of the Conversations component by making use of -All exposed properties of `ConversationsConfiguration` can be found under [Conversations](/ui-kit/angular/conversations#customization). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `ConversationsConfiguration` can be found under [Conversations](/ui-kit/angular/v4/conversations#customization). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -787,7 +787,7 @@ You can customize the properties of the Messages component by making use of the -All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/messages#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/v4/messages#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -879,7 +879,7 @@ public startConversationConfiguration = new ContactsConfiguration({ -All exposed properties of `ContactsConfiguration` can be found under [Contacts](/ui-kit/angular/contacts). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `ContactsConfiguration` can be found under [Contacts](/ui-kit/angular/v4/contacts). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/conversations.mdx b/ui-kit/angular/v4/conversations.mdx index 451cd2520..389ab40ea 100644 --- a/ui-kit/angular/v4/conversations.mdx +++ b/ui-kit/angular/v4/conversations.mdx @@ -5,7 +5,7 @@ description: "Conversations — CometChat documentation." ## Overview -The Conversations is a [Component](/ui-kit/angular/components-overview#components), That shows all conversations related to the currently logged-in user, +The Conversations is a [Component](/ui-kit/angular/v4/components-overview#components), That shows all conversations related to the currently logged-in user, This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently. @@ -89,7 +89,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. OnItemClick @@ -343,7 +343,7 @@ export class AppComponent implements OnInit{ ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -483,7 +483,7 @@ List of properties exposed by ConversationStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/angular/avatar). +To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/angular/v4/avatar). *** @@ -549,7 +549,7 @@ export class AppComponent implements OnInit{ ##### 3. StatusIndicator Style -To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Status Indicator Styles](/ui-kit/angular/status-indicator). +To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Status Indicator Styles](/ui-kit/angular/v4/status-indicator). *** @@ -614,7 +614,7 @@ export class AppComponent implements OnInit{ ##### 4. Date Style -To apply customized styles to the `Date` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/angular/date). +To apply customized styles to the `Date` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/angular/v4/date). *** @@ -679,7 +679,7 @@ export class AppComponent implements OnInit{ ##### 5. Badge Style -To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/angular/badge). +To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/angular/v4/badge). *** @@ -743,7 +743,7 @@ export class AppComponent implements OnInit{ ##### 7. Backdrop Style -To apply customized styles to the `Backdrop` component in the `Conversations` Component, you can use the following code snippet, you can use the following code snippet. For more information, visit [Backdrop Styles](/ui-kit/angular/backdrop). +To apply customized styles to the `Backdrop` component in the `Conversations` Component, you can use the following code snippet, you can use the following code snippet. For more information, visit [Backdrop Styles](/ui-kit/angular/v4/backdrop). *** @@ -808,7 +808,7 @@ export class AppComponent implements OnInit{ ##### 8. Delete Conversation Dialog Style -To apply customized styles to the `delete dialog` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Delete dialog Styles](/ui-kit/angular/confirm-dialog). +To apply customized styles to the `delete dialog` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Delete dialog Styles](/ui-kit/angular/v4/confirm-dialog). *** @@ -874,7 +874,7 @@ export class AppComponent implements OnInit{ ##### 9. LisItem Style -To apply customized styles to the `List Item` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [List Item](/ui-kit/angular/list-item). +To apply customized styles to the `List Item` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [List Item](/ui-kit/angular/v4/list-item). *** @@ -1183,7 +1183,7 @@ export class AppModule {} #### TextFormatters -Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/mentions-formatter-guide) +Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/v4/mentions-formatter-guide) diff --git a/ui-kit/angular/v4/core-features.mdx b/ui-kit/angular/v4/core-features.mdx index 88aa7691e..6b7d2c078 100644 --- a/ui-kit/angular/v4/core-features.mdx +++ b/ui-kit/angular/v4/core-features.mdx @@ -19,9 +19,9 @@ At the heart of CometChat's functionality is the ability to support real-time te | Components | Functionality | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a Component that enables users to write and send a variety of messages. | -| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/text-bubble). | -| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. | +| [MessageComposer](/ui-kit/angular/v4/message-composer) | [MessageComposer](/ui-kit/angular/v4/message-composer) is a Component that enables users to write and send a variety of messages. | +| [MessageList](/ui-kit/angular/v4/message-list) | [MessageList](/ui-kit/angular/v4/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/v4/text-bubble). | +| [Messages](/ui-kit/angular/v4/messages) | [Messages](/ui-kit/angular/v4/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/v4/message-composer) and the [MessageList](/ui-kit/angular/v4/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. | ## Media Sharing @@ -33,10 +33,10 @@ Beyond text, CometChat allows users to share various media types within their co | Components | Functionality | | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [MessageComposer](/ui-kit/angular/message-composer) | the [MessageComposer](/ui-kit/angular/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. | -| [MessageList](/ui-kit/angular/message-list) | the [MessageList](/ui-kit/angular/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble) [Video Bubble](/ui-kit/angular/video-bubble) | +| [MessageComposer](/ui-kit/angular/v4/message-composer) | the [MessageComposer](/ui-kit/angular/v4/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. | +| [MessageList](/ui-kit/angular/v4/message-list) | the [MessageList](/ui-kit/angular/v4/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/v4/image-bubble), [File Bubble](/ui-kit/angular/v4/file-bubble), [Audio Bubble](/ui-kit/angular/v4/audio-bubble) [Video Bubble](/ui-kit/angular/v4/video-bubble) | -> In CometChat's UI Kit, the [Messages](/ui-kit/angular/messages) component combines both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach. +> In CometChat's UI Kit, the [Messages](/ui-kit/angular/v4/messages) component combines both the [MessageComposer](/ui-kit/angular/v4/message-composer) and the [MessageList](/ui-kit/angular/v4/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach. ## Read Receipts @@ -48,9 +48,9 @@ CometChat's Read Receipts feature provides visibility into the message status, l | Components | Functionality | | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | -| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. | -| [MessageInformation](/ui-kit/angular/message-information) | [MessageInformation](/ui-kit/angular/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. | +| [Conversations](/ui-kit/angular/v4/conversations) | [Conversations](/ui-kit/angular/v4/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | +| [MessageList](/ui-kit/angular/v4/message-list) | [MessageList](/ui-kit/angular/v4/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. | +| [MessageInformation](/ui-kit/angular/v4/message-information) | [MessageInformation](/ui-kit/angular/v4/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. | ## Typing Indicator @@ -62,8 +62,8 @@ The Typing Indicator feature in CometChat shows when a user is typing a response | Components | Functionality | | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message | -| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. | +| [Conversations](/ui-kit/angular/v4/conversations) | [Conversations](/ui-kit/angular/v4/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message | +| [Message Header](/ui-kit/angular/v4/message-header) | [Message Header](/ui-kit/angular/v4/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. | ## User Presence @@ -75,10 +75,10 @@ CometChat's User Presence feature allows users to see whether their contacts are | Components | Functionality | | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. | -| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. | -| [Users](/ui-kit/angular/users) | [Users](/ui-kit/angular/users) renders list of users available in your app.It also responsible to render users Presence information. | -| [Group Members](/ui-kit/angular/group-members) | [Group Members](/ui-kit/angular/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. | +| [Conversations](/ui-kit/angular/v4/conversations) | [Conversations](/ui-kit/angular/v4/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. | +| [Message Header](/ui-kit/angular/v4/message-header) | [Message Header](/ui-kit/angular/v4/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. | +| [Users](/ui-kit/angular/v4/users) | [Users](/ui-kit/angular/v4/users) renders list of users available in your app.It also responsible to render users Presence information. | +| [Group Members](/ui-kit/angular/v4/group-members) | [Group Members](/ui-kit/angular/v4/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. | ## Reactions @@ -90,8 +90,8 @@ CometChat's Reactions feature adds a layer of expressiveness to your chat applic | Components | Functionality | | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | -| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. | +| [MessageList](/ui-kit/angular/v4/message-list) | [MessageList](/ui-kit/angular/v4/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | +| [Messages](/ui-kit/angular/v4/messages) | [Messages](/ui-kit/angular/v4/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/v4/message-composer) and the [MessageList](/ui-kit/angular/v4/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. | ## Mentions @@ -103,10 +103,10 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | Components | Functionality | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | -| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | -| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | -| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/message-composer) and [MessageList](/ui-kit/angular/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. | +| [Conversations](/ui-kit/angular/v4/conversations) | [Conversations](/ui-kit/angular/v4/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | +| [MessageComposer](/ui-kit/angular/v4/message-composer) | [MessageComposer](/ui-kit/angular/v4/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | +| [MessageList](/ui-kit/angular/v4/message-list) | [MessageList](/ui-kit/angular/v4/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | +| [Messages](/ui-kit/angular/v4/messages) | [Messages](/ui-kit/angular/v4/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/v4/message-composer) and [MessageList](/ui-kit/angular/v4/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. | ## Threaded Conversations @@ -118,7 +118,7 @@ The Threaded Conversations feature enables users to respond directly to a specif | Components | Functionality | | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| [Threaded Messages](/ui-kit/angular/threaded-messages) | [Threaded Messages](/ui-kit/angular/threaded-messages) that displays all replies made to a particular message in a conversation. | +| [Threaded Messages](/ui-kit/angular/v4/threaded-messages) | [Threaded Messages](/ui-kit/angular/v4/threaded-messages) that displays all replies made to a particular message in a conversation. | ## Group Chat @@ -128,4 +128,4 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul -For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/groups). +For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/v4/groups). diff --git a/ui-kit/angular/v4/create-group.mdx b/ui-kit/angular/v4/create-group.mdx index 6a3e85ce8..9c8568628 100644 --- a/ui-kit/angular/v4/create-group.mdx +++ b/ui-kit/angular/v4/create-group.mdx @@ -5,7 +5,7 @@ description: "Create Group — CometChat documentation." ## Overview -`CometChatCreateGroup` is a [Component](/ui-kit/angular/components-overview#components) enabling users to create various types of groups, including public, private, and password-protected ones. This functionality enables users to curate their group settings according to their preferences and needs. +`CometChatCreateGroup` is a [Component](/ui-kit/angular/v4/components-overview#components) enabling users to create various types of groups, including public, private, and password-protected ones. This functionality enables users to curate their group settings according to their preferences and needs. @@ -16,8 +16,8 @@ The Create Groups component is composed of the following BaseComponents: | Components | Description | | --------------------------------------------- | --------------------------------------------------------------------------------------------------- | | cometchat-button | This component represents a button with optional icon and text. | -| [cometchat-label](/ui-kit/angular/label) | This component provides descriptive information about the associated UI element. | -| [cometchat-input](/ui-kit/angular/input) | This component allows users to enter or provide data or information within a web form or interface. | +| [cometchat-label](/ui-kit/angular/v4/label) | This component provides descriptive information about the associated UI element. | +| [cometchat-input](/ui-kit/angular/v4/input) | This component allows users to enter or provide data or information within a web form or interface. | *** @@ -97,7 +97,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. createClick @@ -286,7 +286,7 @@ The `CreateGroup` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Create Group component is as follows. diff --git a/ui-kit/angular/v4/custom-message-guide.mdx b/ui-kit/angular/v4/custom-message-guide.mdx index d78755fb1..e0d3762de 100644 --- a/ui-kit/angular/v4/custom-message-guide.mdx +++ b/ui-kit/angular/v4/custom-message-guide.mdx @@ -3,15 +3,15 @@ title: "Custom Message" description: "Custom Message — CometChat integration guide." --- -In this guide, we will demonstrate how to add a custom message with a custom-built message bubble to the [Message List](/ui-kit/angular/message-list) component. +In this guide, we will demonstrate how to add a custom message with a custom-built message bubble to the [Message List](/ui-kit/angular/v4/message-list) component. -We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/components-overview). +We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/v4/components-overview). -In the example below, we are going to simulate a "nudge" behaviour which sends out a custom message when the user clicks on the auxiliary button placed in the [Message Composer](/ui-kit/angular/message-composer) component. +In the example below, we are going to simulate a "nudge" behaviour which sends out a custom message when the user clicks on the auxiliary button placed in the [Message Composer](/ui-kit/angular/v4/message-composer) component. ## Custom Auxiliary Button @@ -84,7 +84,7 @@ getReceiverDetails() { -The auxiliary button is then passed to the [ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) component as a prop using the [MessagesConfiguration](/web-shared/messages-configuration). +The auxiliary button is then passed to the [ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) component as a prop using the [MessagesConfiguration](/web-shared/messages-configuration). @@ -173,7 +173,7 @@ if (!defaultTypes.includes("nudge")) { -The message request builder is then applied to the [ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) component using [MessagesConfiguration](/web-shared/messages-configuration). +The message request builder is then applied to the [ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) component using [MessagesConfiguration](/web-shared/messages-configuration). diff --git a/ui-kit/angular/v4/custom-text-formatter-guide.mdx b/ui-kit/angular/v4/custom-text-formatter-guide.mdx index 25705c3b2..c85d3d58c 100644 --- a/ui-kit/angular/v4/custom-text-formatter-guide.mdx +++ b/ui-kit/angular/v4/custom-text-formatter-guide.mdx @@ -62,7 +62,7 @@ customLogicToFormatText(inputText: string) { ... } ## Example -Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/angular/conversations), [CometChatMessageList](/ui-kit/angular/message-list), [CometChatMessageComposer](/ui-kit/angular/message-composer). +Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/angular/v4/conversations), [CometChatMessageList](/ui-kit/angular/v4/message-list), [CometChatMessageComposer](/ui-kit/angular/v4/message-composer). diff --git a/ui-kit/angular/v4/date.mdx b/ui-kit/angular/v4/date.mdx index 09c7aa149..b95df6f7e 100644 --- a/ui-kit/angular/v4/date.mdx +++ b/ui-kit/angular/v4/date.mdx @@ -12,7 +12,7 @@ description: "Date — CometChat documentation." | timestamp | number | Timestamp to be displayed in unix format | | pattern | [DatePatterns](/web-shared/datepatterns) | Group of constants representing the in-built date patterns | | customDateString | string | Override the in-built pattern with your custom representation of the timestamp | -| dateStyle | [dateStyle](/ui-kit/angular/date#datestyle) | Styling properties and values of the [Date](/ui-kit/angular/date) component | +| dateStyle | [dateStyle](/ui-kit/angular/v4/date#datestyle) | Styling properties and values of the [Date](/ui-kit/angular/v4/date) component | ## dateStyle diff --git a/ui-kit/angular/v4/document-bubble.mdx b/ui-kit/angular/v4/document-bubble.mdx index ae4195936..f90db1901 100644 --- a/ui-kit/angular/v4/document-bubble.mdx +++ b/ui-kit/angular/v4/document-bubble.mdx @@ -18,7 +18,7 @@ Properties | iconURL | string | Asset URL for the download icon | | hideSeparator | boolean | When set to true, hides the separator which is displayed above the launch button | | iconAlignment | [DocumentIconAlignment](/web-shared/documenticonalignment) | used to override click callback | -| documentStyle | [documentStyle](/ui-kit/angular/document-bubble#documentstyle) | Styling properties and values of the element | +| documentStyle | [documentStyle](/ui-kit/angular/v4/document-bubble#documentstyle) | Styling properties and values of the element | ## documentStyle diff --git a/ui-kit/angular/v4/dropdown.mdx b/ui-kit/angular/v4/dropdown.mdx index 794b826be..e9d141a0e 100644 --- a/ui-kit/angular/v4/dropdown.mdx +++ b/ui-kit/angular/v4/dropdown.mdx @@ -13,7 +13,7 @@ This element is a stylised version of the select component. It allows the user t | ------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | | options | Array of string | List of options to choose from. These will appear on click. | | arrowIconURL | string | Asset URL of the arrow icon | -| dropdownStyle | [DropdownStyle](/ui-kit/angular/dropdown#dropdownstyle) | Styling properties and values of the element | +| dropdownStyle | [DropdownStyle](/ui-kit/angular/v4/dropdown#dropdownstyle) | Styling properties and values of the element | ## DropdownStyle diff --git a/ui-kit/angular/v4/emoji-keyboard.mdx b/ui-kit/angular/v4/emoji-keyboard.mdx index 7f6b55d23..a0b79a5cb 100644 --- a/ui-kit/angular/v4/emoji-keyboard.mdx +++ b/ui-kit/angular/v4/emoji-keyboard.mdx @@ -12,7 +12,7 @@ This element is CometChat's very own emoji picker with native emoji support. | Name | Type | Description | | ------------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------- | | emojiData | Array | JSON array of emojis grouped along with the category | -| emojiKeyboardStyle | [EmojiKeyboardStyle](/ui-kit/angular/emoji-keyboard#emojikeyboardstyle) | Styling properties and values of the element | +| emojiKeyboardStyle | [EmojiKeyboardStyle](/ui-kit/angular/v4/emoji-keyboard#emojikeyboardstyle) | Styling properties and values of the element | ## Events diff --git a/ui-kit/angular/v4/extensions.mdx b/ui-kit/angular/v4/extensions.mdx index e7cd18089..3ead2c5d4 100644 --- a/ui-kit/angular/v4/extensions.mdx +++ b/ui-kit/angular/v4/extensions.mdx @@ -21,7 +21,7 @@ Here's a guide on how you can enable and integrate these extensions: The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers). -Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits. +Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/v4/message-composer) component of UI Kits. @@ -31,7 +31,7 @@ Once you have successfully activated the [Sticker Extension](/fundamentals/stick The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls). -Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits. +Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/v4/message-composer) component of UI Kits. @@ -41,7 +41,7 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls) The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). -Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits. +Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/v4/message-composer) component of UI Kits. @@ -51,7 +51,7 @@ Once you have successfully activated the [Collaborative Whiteboard Extension](/f With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document). -Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits. +Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/v4/message-composer) component of UI Kits. @@ -61,7 +61,7 @@ Once you have successfully activated the [Collaborative Document Extension](/fun Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions). -Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -71,7 +71,7 @@ Once you have successfully activated the [Message Reactions Extension](/fundamen The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation). -Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -81,7 +81,7 @@ Once you have successfully activated the [Message Translation Extension](/fundam The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview). -Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -89,9 +89,9 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). -Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -99,9 +99,9 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). -Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -109,9 +109,9 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). -Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. @@ -121,7 +121,7 @@ Once you have successfully activated the Image Moderation Extension from your Co The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). -Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits. +Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/v4/message-list) component of UI Kits. diff --git a/ui-kit/angular/v4/file-bubble.mdx b/ui-kit/angular/v4/file-bubble.mdx index cbb4153e2..8d1dec86b 100644 --- a/ui-kit/angular/v4/file-bubble.mdx +++ b/ui-kit/angular/v4/file-bubble.mdx @@ -13,7 +13,7 @@ description: "File Bubble — CometChat documentation." | subtitle | string | Subtitle of the element | | fileUrl | string | URL of the file | | downloadIconURL | string | Asset URL for the download icon | -| fileStyle | [FileBubbleStyle](/ui-kit/angular/file-bubble#filebubblestyle) | Styling properties of the element | +| fileStyle | [FileBubbleStyle](/ui-kit/angular/v4/file-bubble#filebubblestyle) | Styling properties of the element | ## FileBubbleStyle diff --git a/ui-kit/angular/v4/getting-started.mdx b/ui-kit/angular/v4/getting-started.mdx index 55e240908..ff4685309 100644 --- a/ui-kit/angular/v4/getting-started.mdx +++ b/ui-kit/angular/v4/getting-started.mdx @@ -260,13 +260,13 @@ Step 6 ### Render Conversation With Message -[ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) is a wrapper component that offers functionality to render both the [Conversations](/ui-kit/angular/conversations) and [Messages](/ui-kit/angular/messages) components. It also enables opening the [Messages](/ui-kit/angular/messages) by tapping on any conversation rendered in the list of conversations. +[ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) is a wrapper component that offers functionality to render both the [Conversations](/ui-kit/angular/v4/conversations) and [Messages](/ui-kit/angular/v4/messages) components. It also enables opening the [Messages](/ui-kit/angular/v4/messages) by tapping on any conversation rendered in the list of conversations. -[ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) can be rendered by adding the following code snippet: +[ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) can be rendered by adding the following code snippet: diff --git a/ui-kit/angular/v4/group-add-members.mdx b/ui-kit/angular/v4/group-add-members.mdx index b0048b7df..a07091790 100644 --- a/ui-kit/angular/v4/group-add-members.mdx +++ b/ui-kit/angular/v4/group-add-members.mdx @@ -5,7 +5,7 @@ description: "Add Members — CometChat documentation." ## Overview -`CometChatAddMembers` is a [Component](/ui-kit/angular/components-overview#components) that allows administrators or group owners to add new members to a specific group. It enables administrators or group owners to extend the membership of a group by adding new users to participate in the group's discussions and activities. By utilising this feature, administrators can manage group membership, and control access to group content. The administrator can select the desired users to be added to the group. This can be done by searching for specific users, selecting from a list of available users. The selected users will receive notifications to join the group. +`CometChatAddMembers` is a [Component](/ui-kit/angular/v4/components-overview#components) that allows administrators or group owners to add new members to a specific group. It enables administrators or group owners to extend the membership of a group by adding new users to participate in the group's discussions and activities. By utilising this feature, administrators can manage group membership, and control access to group content. The administrator can select the desired users to be added to the group. This can be done by searching for specific users, selecting from a list of available users. The selected users will receive notifications to join the group. @@ -16,7 +16,7 @@ The Add Members component is composed of the following Components: | Components | Description | | -------------------------------------------- | --------------------------------------------------------------- | | cometchat-button | This component represents a button with optional icon and text. | -| [CometChatUsers](/ui-kit/angular/users) | This component the list of users | +| [CometChatUsers](/ui-kit/angular/v4/users) | This component the list of users | *** @@ -106,7 +106,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onSelect @@ -589,7 +589,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Add Members component is as follows. @@ -753,7 +753,7 @@ List of properties exposed by AddMembersStyle: ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Add Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Add Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -825,7 +825,7 @@ export class AppComponent { ##### 3. LisItem Style -To apply customized styles to the `List Item` component in the `Add Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Add Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -895,7 +895,7 @@ export class AppComponent { ##### 4. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Add Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Add Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) diff --git a/ui-kit/angular/v4/group-banned-members.mdx b/ui-kit/angular/v4/group-banned-members.mdx index 68b97e5d5..de2a76432 100644 --- a/ui-kit/angular/v4/group-banned-members.mdx +++ b/ui-kit/angular/v4/group-banned-members.mdx @@ -5,7 +5,7 @@ description: "Banned Members — CometChat documentation." ## Overview -`CometChatBannedMembers` is a [Component](/ui-kit/angular/components-overview#components) that displays all the users who have been restricted or prohibited from participating in specific groups or conversations. When the user is banned, they are no longer able to access or engage with the content and discussions within the banned group. Group administrators or owners have the authority to ban members from specific groups they manage. They can review user activity, monitor behavior, and take appropriate actions, including banning users when necessary. +`CometChatBannedMembers` is a [Component](/ui-kit/angular/v4/components-overview#components) that displays all the users who have been restricted or prohibited from participating in specific groups or conversations. When the user is banned, they are no longer able to access or engage with the content and discussions within the banned group. Group administrators or owners have the authority to ban members from specific groups they manage. They can review user activity, monitor behavior, and take appropriate actions, including banning users when necessary. @@ -99,7 +99,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onSelect @@ -512,7 +512,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Banned Members` component does not produce any events. @@ -633,7 +633,7 @@ List of properties exposed by BannedMembersStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Banned Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Banned Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -703,7 +703,7 @@ export class AppComponent { ##### 3. LisItem Style -To apply customized styles to the `List Item` component in the `Banned Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Banned Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -773,7 +773,7 @@ export class AppComponent { ##### 4. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Banned Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Banned Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) diff --git a/ui-kit/angular/v4/group-details.mdx b/ui-kit/angular/v4/group-details.mdx index 0db6454e3..4f0a47131 100644 --- a/ui-kit/angular/v4/group-details.mdx +++ b/ui-kit/angular/v4/group-details.mdx @@ -5,7 +5,7 @@ description: "Group Details — CometChat documentation." ## Overview -`CometChatDetails` is a [Component](/ui-kit/angular/components-overview#components) that provides additional information and settings related to a specific group. +`CometChatDetails` is a [Component](/ui-kit/angular/v4/components-overview#components) that provides additional information and settings related to a specific group. The details screen includes the following elements and functionalities: @@ -105,7 +105,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onClose @@ -251,7 +251,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. To handle events supported by Groups you have to add corresponding listeners by using `CometChatGroupEvents` @@ -542,7 +542,7 @@ export class AppComponent { ##### 4. Avatar Style -To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -612,7 +612,7 @@ export class AppComponent { ##### 5. LisItem Style -To apply customized styles to the `List Item` component in the `Details` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Details` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -682,7 +682,7 @@ export class AppComponent { ##### 6. StatusIndicator Style -To apply customized styles to the Status Indicator in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) @@ -749,7 +749,7 @@ export class AppComponent { ##### 6. Backdrop Style -To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/angular/backdrop) +To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/angular/v4/backdrop) @@ -1212,7 +1212,7 @@ This defines the structure of each option for a template in the details componen ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. CometChatDetails has `Add Members`, `Banned Members`, `Transfer Ownership` and `Group Members` component. Hence, each of these components will have its individual \`Configuration\`\`. @@ -1222,7 +1222,7 @@ CometChatDetails has `Add Members`, `Banned Members`, `Transfer Ownership` and ` You can customize the properties of the Group Members component by making use of the `groupMembersConfiguration`. You can accomplish this by employing the `groupMembersConfiguration` props as demonstrated below: -All exposed properties of `GroupMembersConfiguration` can be found under [Group Members](/ui-kit/angular/group-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `GroupMembersConfiguration` can be found under [Group Members](/ui-kit/angular/v4/group-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -1309,7 +1309,7 @@ export class AppComponent { You can customize the properties of the Add Members component by making use of the `AddMembersConfiguration`. You can accomplish this by employing the `addMembersConfiguration` props as demonstrated below: -All exposed properties of `AddMembersConfiguration` can be found under [Add Members](/ui-kit/angular/group-add-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `AddMembersConfiguration` can be found under [Add Members](/ui-kit/angular/v4/group-add-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -1402,7 +1402,7 @@ export class AppComponent { You can customize the properties of the Banned Members component by making use of the `BannedMembersConfiguration`. You can accomplish this by employing the `bannedMembersConfiguration` props as demonstrated below: -All exposed properties of `BannedMembersConfiguration` can be found under [Banned Members](/ui-kit/angular/group-banned-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `BannedMembersConfiguration` can be found under [Banned Members](/ui-kit/angular/v4/group-banned-members#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -1489,7 +1489,7 @@ export class AppComponent { You can customize the properties of the Transfer Ownership component by making use of the `TransferOwnershipConfiguration`. You can accomplish this by employing the `transferOwnershipConfiguration` props as demonstrated below: -All exposed properties of `TransferOwnershipConfiguration` can be found under [Transfer Ownership](/ui-kit/angular/group-transfer-ownership#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `TransferOwnershipConfiguration` can be found under [Transfer Ownership](/ui-kit/angular/v4/group-transfer-ownership#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/group-members.mdx b/ui-kit/angular/v4/group-members.mdx index 0e7e515fe..1d9d99d4c 100644 --- a/ui-kit/angular/v4/group-members.mdx +++ b/ui-kit/angular/v4/group-members.mdx @@ -5,7 +5,7 @@ description: "Group Members — CometChat documentation." ## Overview -`CometChatGroupMembers` is a [Component](/ui-kit/angular/components-overview#components) that displays all users added or invited to a group, granting them access to group discussions, shared content, and collaborative features. Group members can communicate in real-time via messaging, voice and video calls, and other activities. They can interact, share files, and join calls based on group permissions set by the administrator or owner. +`CometChatGroupMembers` is a [Component](/ui-kit/angular/v4/components-overview#components) that displays all users added or invited to a group, granting them access to group discussions, shared content, and collaborative features. Group members can communicate in real-time via messaging, voice and video calls, and other activities. They can interact, share files, and join calls based on group permissions set by the administrator or owner. @@ -99,7 +99,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onSelect @@ -641,7 +641,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Group Members component is as follows. @@ -913,7 +913,7 @@ List of properties exposed by ChangeScopeStyle: ##### 3. Avatar Style -To apply customized styles to the `Avatar` component in the Group Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Group Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -982,7 +982,7 @@ export class AppComponent { ##### 4. ListItem Style -To apply customized styles to the `List Item` component in the `Group Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Group Members` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -1051,7 +1051,7 @@ export class AppComponent { ##### 5. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Group Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Group Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) diff --git a/ui-kit/angular/v4/group-transfer-ownership.mdx b/ui-kit/angular/v4/group-transfer-ownership.mdx index 7638a8104..c06097403 100644 --- a/ui-kit/angular/v4/group-transfer-ownership.mdx +++ b/ui-kit/angular/v4/group-transfer-ownership.mdx @@ -5,7 +5,7 @@ description: "Transfer Ownership — CometChat documentation." ## Overview -`CometChatTransferOwnership` is a [Component](/ui-kit/angular/components-overview#components) that allows the current owner or administrator of a group to transfer the ownership rights and administrative control of that group to another user. By transferring ownership, the original owner can designate a new user as the group owner, giving them full control and administrative privileges over the group. +`CometChatTransferOwnership` is a [Component](/ui-kit/angular/v4/components-overview#components) that allows the current owner or administrator of a group to transfer the ownership rights and administrative control of that group to another user. By transferring ownership, the original owner can designate a new user as the group owner, giving them full control and administrative privileges over the group. Here are some key points regarding the transfer ownership feature in CometChat: @@ -23,8 +23,8 @@ The Transfer Ownership component is composed of the following BaseComponents: | Components | Description | | ----------------------------------------------------------- | -------------------------------------------------------------------------------- | | cometchat-button | This component represents a button with optional icon and text. | -| [cometchat-label](/ui-kit/angular/label) | This component provides descriptive information about the associated UI element. | -| [cometchat-radio-button](/ui-kit/angular/radio-button) | This component allows the user to exactly select one item from a set | +| [cometchat-label](/ui-kit/angular/v4/label) | This component provides descriptive information about the associated UI element. | +| [cometchat-radio-button](/ui-kit/angular/v4/radio-button) | This component allows the user to exactly select one item from a set | *** @@ -114,7 +114,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onTransferOwnership @@ -459,7 +459,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Transfer Ownership component is as follows. @@ -601,7 +601,7 @@ List of properties exposed by TransferOwnershipStyle: ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Transfer Ownership Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Transfer Ownership Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -671,7 +671,7 @@ export class AppComponent { ##### 3. GroupMembers Style -You can set the `GroupMembersStyle` to the Transfer Ownership Component to customize the styling, you can use the following code snippet. For further insights on `GroupMembers` Styles [refer](/ui-kit/angular/group-members#1-groupmembers-style) +You can set the `GroupMembersStyle` to the Transfer Ownership Component to customize the styling, you can use the following code snippet. For further insights on `GroupMembers` Styles [refer](/ui-kit/angular/v4/group-members#1-groupmembers-style) @@ -744,7 +744,7 @@ export class AppComponent { ##### 4. ListItem Style -To apply customized styles to the `List Item` component in the `Transfer Ownership` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Transfer Ownership` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -814,7 +814,7 @@ export class AppComponent { ##### 5. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Transfer Ownership Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Transfer Ownership Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) diff --git a/ui-kit/angular/v4/groups-with-messages.mdx b/ui-kit/angular/v4/groups-with-messages.mdx index 106e5fb9c..2dfe369a4 100644 --- a/ui-kit/angular/v4/groups-with-messages.mdx +++ b/ui-kit/angular/v4/groups-with-messages.mdx @@ -5,7 +5,7 @@ description: "Groups With Messages — CometChat documentation." ## Overview -The GroupsWithMessages is a [Composite Component](/ui-kit/angular/components-overview#composite-components) encompassing components such as [Groups](/ui-kit/angular/groups) and [Messages](/ui-kit/angular/messages). Both of these component contributes to the functionality and structure of the overall GroupsWithMessages component. +The GroupsWithMessages is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) encompassing components such as [Groups](/ui-kit/angular/v4/groups) and [Messages](/ui-kit/angular/v4/messages). Both of these component contributes to the functionality and structure of the overall GroupsWithMessages component. @@ -13,8 +13,8 @@ The GroupsWithMessages is a [Composite Component](/ui-kit/angular/components-ove | Components | Description | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| [Groups](/ui-kit/angular/groups) | The `Groups` component is designed to display a list of `Groups`. This essentially represents the recent conversation history. | -| [Messages](/ui-kit/angular/messages) | The `Messages` component is designed to manage the messaging interaction for `Group's` conversations. | +| [Groups](/ui-kit/angular/v4/groups) | The `Groups` component is designed to display a list of `Groups`. This essentially represents the recent conversation history. | +| [Messages](/ui-kit/angular/v4/messages) | The `Messages` component is designed to manage the messaging interaction for `Group's` conversations. | ## Usage @@ -91,7 +91,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onError @@ -150,7 +150,7 @@ export class AppComponent { -The child components - [Groups](/ui-kit/angular/groups) and [Messages](/ui-kit/angular/messages) - both have their own set of action events. +The child components - [Groups](/ui-kit/angular/v4/groups) and [Messages](/ui-kit/angular/v4/messages) - both have their own set of action events. The Action of the components can be overridden through the use of the [Configurations](#configurations) object of its components. Here is an example code snippet. @@ -222,7 +222,7 @@ export class AppComponent { The GroupsWithMessages component overrides several actions from its components to reach its default behavior. The list of actions overridden by GroupsWithMessages includes: -* [OnItemClick](/ui-kit/angular/groups#2-onitemclick) : By overriding the `OnItemClick` of the Groups Component, GroupsWithMessages achieves navigation from [Groups](/ui-kit/angular/groups) to [Messages](/ui-kit/angular/messages) component. +* [OnItemClick](/ui-kit/angular/v4/groups#2-onitemclick) : By overriding the `OnItemClick` of the Groups Component, GroupsWithMessages achieves navigation from [Groups](/ui-kit/angular/v4/groups) to [Messages](/ui-kit/angular/v4/messages) component. @@ -232,7 +232,7 @@ The GroupsWithMessages component overrides several actions from its components t **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -While the GroupsWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Groups Filters](/ui-kit/angular/groups#filters) and [Messages Filters](/ui-kit/angular/messages#filters). +While the GroupsWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Groups Filters](/ui-kit/angular/v4/groups#filters) and [Messages Filters](/ui-kit/angular/v4/messages#filters). By utilizing the [Configurations](#configurations) object of its components, you can apply filters. @@ -297,7 +297,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The GroupsWithMessages does not produce any events but its component does. @@ -377,7 +377,7 @@ export class AppComponent { *** -You can also customize its component styles. For more details on individual component styles, you can refer [Groups Styles](/ui-kit/angular/groups#1-groups-style) and [Messages Styles](/ui-kit/angular/messages#1-messages-style). +You can also customize its component styles. For more details on individual component styles, you can refer [Groups Styles](/ui-kit/angular/v4/groups#1-groups-style) and [Messages Styles](/ui-kit/angular/v4/messages#1-messages-style). Styles can be applied to SubComponents using their respective [configurations](#configurations). @@ -458,7 +458,7 @@ export class AppComponent { These are a set of **small functional customizations** that allow you to **fine-tune** the overall experience of the component. With these, you can **change text**, set **custom icons**, and toggle the **visibility** of UI elements. -you can utilize the `group` method with a [Group](/sdk/javascript/create-group) object as input to the GroupsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/messages) component for the specified `Group`. +you can utilize the `group` method with a [Group](/sdk/javascript/create-group) object as input to the GroupsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/v4/messages) component for the specified `Group`. ##### 1. Group @@ -533,7 +533,7 @@ Below is a list of customizations along with corresponding code snippets: Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. -You can find the list of all Functionality customization of individual components in [Groups](/ui-kit/angular/groups#functionality) and [Messages](/ui-kit/angular/messages#functionality). +You can find the list of all Functionality customization of individual components in [Groups](/ui-kit/angular/v4/groups#functionality) and [Messages](/ui-kit/angular/v4/messages#functionality). **Example** @@ -675,17 +675,17 @@ export class AppComponent { *** -To find all the details on individual Component advance customization you can refer, [Groups Advance](/ui-kit/angular/groups#customization) and [Messages Advance](/ui-kit/angular/messages#advanced). +To find all the details on individual Component advance customization you can refer, [Groups Advance](/ui-kit/angular/v4/groups#customization) and [Messages Advance](/ui-kit/angular/v4/messages#advanced). GroupsWithMessages uses advanced-level customization of both Groups & Messages components to achieve its default behavior. -1. GroupsWithMessages utilizes the [onItemClick](/ui-kit/angular/groups#2-onitemclick) property of the `Groups` subcomponent to navigate the group from [Groups](/ui-kit/angular/groups) to [Messages](/ui-kit/angular/messages) +1. GroupsWithMessages utilizes the [onItemClick](/ui-kit/angular/v4/groups#2-onitemclick) property of the `Groups` subcomponent to navigate the group from [Groups](/ui-kit/angular/v4/groups) to [Messages](/ui-kit/angular/v4/messages) -2. GroupsWithMessages utilizes the [menus](/ui-kit/angular/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/messages) to [Details](/ui-kit/angular/group-details) +2. GroupsWithMessages utilizes the [menus](/ui-kit/angular/v4/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/v4/messages) to [Details](/ui-kit/angular/v4/group-details) @@ -699,7 +699,7 @@ When you override `onItemClick` and `menus`, the default behavior of GroupsWithM ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. GroupsWithMessages has `Groups` and `Messages` component. Hence, each of these components will have its individual \`Configuration\`\`. @@ -709,7 +709,7 @@ GroupsWithMessages has `Groups` and `Messages` component. Hence, each of these c You can customize the properties of the Groups component by making use of the `groupsConfiguration`. -All exposed properties of `GroupsConfiguration` can be found under [Groups](/ui-kit/angular/groups#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `GroupsConfiguration` can be found under [Groups](/ui-kit/angular/v4/groups#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -786,7 +786,7 @@ export class AppComponent { -All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/messages#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/v4/messages#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -864,7 +864,7 @@ export class AppComponent { You can customize the properties of the Join Group component by making use of the JoinGroupConfiguration. You can accomplish this by employing the `joinGroupConfiguration` props as demonstrated below: -All exposed properties of `JoinGroupConfiguration` can be found under [Join Group](/ui-kit/angular/join-protected-group#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `JoinGroupConfiguration` can be found under [Join Group](/ui-kit/angular/v4/join-protected-group#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -936,7 +936,7 @@ export class AppComponent { You can customize the properties of the Create Group component by making use of the CreateGroupConfiguration. You can accomplish this by employing the `createGroupConfiguration` props as demonstrated below: -All exposed properties of `CreateGroupConfiguration` can be found under [Create Group](/ui-kit/angular/create-group#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `CreateGroupConfiguration` can be found under [Create Group](/ui-kit/angular/v4/create-group#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/groups.mdx b/ui-kit/angular/v4/groups.mdx index 138801988..2501abe32 100644 --- a/ui-kit/angular/v4/groups.mdx +++ b/ui-kit/angular/v4/groups.mdx @@ -5,7 +5,7 @@ description: "Groups — CometChat documentation." ## Overview -The Groups is a [Component](/ui-kit/angular/components-overview#components), showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level. +The Groups is a [Component](/ui-kit/angular/v4/components-overview#components), showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level. @@ -15,8 +15,8 @@ The Groups component is composed of the following BaseComponents: | Components | Description | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -| [CometChatList](/ui-kit/angular/list) | a reusable container component having title, search box, customisable background and a List View | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | +| [CometChatList](/ui-kit/angular/v4/list) | a reusable container component having title, search box, customisable background and a List View | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view | *** @@ -97,7 +97,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onSelect @@ -407,7 +407,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. To handle events supported by Groups you have to add corresponding listeners by using `CometChatGroupEvents` @@ -521,7 +521,7 @@ List of properties exposed by GroupsStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Groups Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Groups Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -583,7 +583,7 @@ export class AppComponent { ##### 3. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Groups Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Groups Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) @@ -642,7 +642,7 @@ export class AppComponent { ##### 4. ListItem Style -To apply customized styles to the `List Item` component in the `Groups` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Groups` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) diff --git a/ui-kit/angular/v4/icon-button.mdx b/ui-kit/angular/v4/icon-button.mdx index 07bf039cf..bad6e1652 100644 --- a/ui-kit/angular/v4/icon-button.mdx +++ b/ui-kit/angular/v4/icon-button.mdx @@ -5,7 +5,7 @@ description: "Icon Button — CometChat documentation." ## Overview -This element uses [Icon element](/ui-kit/angular/icon) and [Label element](/ui-kit/angular/label) to show text and icon(with background) and along with an alignment property to align the icon around the text. The purpose of this element is to initiate an action. +This element uses [Icon element](/ui-kit/angular/v4/icon) and [Label element](/ui-kit/angular/v4/label) to show text and icon(with background) and along with an alignment property to align the icon around the text. The purpose of this element is to initiate an action. ## Properties diff --git a/ui-kit/angular/v4/icon.mdx b/ui-kit/angular/v4/icon.mdx index a94323ab3..bcf6cd61e 100644 --- a/ui-kit/angular/v4/icon.mdx +++ b/ui-kit/angular/v4/icon.mdx @@ -13,7 +13,7 @@ This element displays an icon. It currently supports only svg icons | --------- | ------------------------------------------------ | -------------------------------------------- | | name | string | Name of the element | | URL | string | Asset URL of the element | -| iconStyle | [IconStyle](/ui-kit/angular/icon#iconstyle) | Styling properties and values of the element | +| iconStyle | [IconStyle](/ui-kit/angular/v4/icon#iconstyle) | Styling properties and values of the element | ## IconStyle diff --git a/ui-kit/angular/v4/image-bubble.mdx b/ui-kit/angular/v4/image-bubble.mdx index c5b590557..575478b74 100644 --- a/ui-kit/angular/v4/image-bubble.mdx +++ b/ui-kit/angular/v4/image-bubble.mdx @@ -11,7 +11,7 @@ description: "Image Bubble — CometChat documentation." | ---------------- | ---------------------------------------------------------- | ---------------------------------------------------------------- | | src | string | URL of the image | | placeholderImage | string | A filler image to be shown while the actual image is downloading | -| imageStyle | [ImageStyle](/ui-kit/angular/image-bubble#imagestyle) | Styling properties and values of the element | +| imageStyle | [ImageStyle](/ui-kit/angular/v4/image-bubble#imagestyle) | Styling properties and values of the element | ## ImageStyle diff --git a/ui-kit/angular/v4/incoming-call.mdx b/ui-kit/angular/v4/incoming-call.mdx index 6b887c604..7cb7d8239 100644 --- a/ui-kit/angular/v4/incoming-call.mdx +++ b/ui-kit/angular/v4/incoming-call.mdx @@ -5,7 +5,7 @@ description: "Incoming Call — CometChat documentation." ## Overview -The `Incoming call` is a [Component](/ui-kit/angular/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call. +The `Incoming call` is a [Component](/ui-kit/angular/v4/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call. @@ -15,11 +15,11 @@ The `Incoming Call` is comprised of the following base components: | Components | Description | | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| [cometchat-list-item](/ui-kit/angular/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | -| [cometchat-icon](/ui-kit/angular/icon) | This component displays an icon. It currently supports only svg icons | -| [cometchat-label](/ui-kit/angular/label) | This component provides descriptive information about the associated UI element. | +| [cometchat-list-item](/ui-kit/angular/v4/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | +| [cometchat-icon](/ui-kit/angular/v4/icon) | This component displays an icon. It currently supports only svg icons | +| [cometchat-label](/ui-kit/angular/v4/label) | This component provides descriptive information about the associated UI element. | | cometchat-button | This component represents a button with optional icon and text. | -| [cometchat-avatar](/ui-kit/angular/avatar) | This component component displays an image or user's avatar with fallback to the first two letters of the username | +| [cometchat-avatar](/ui-kit/angular/v4/avatar) | This component component displays an image or user's avatar with fallback to the first two letters of the username | ## Usage @@ -96,7 +96,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onAccept @@ -274,7 +274,7 @@ The `Incoming Call` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the Incoming Call component is as follows. @@ -434,7 +434,7 @@ The following properties are exposed by IncomingCallStyle: ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Incoming Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Incoming Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -495,7 +495,7 @@ export class AppComponent { ##### 3. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Incoming Call` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Incoming Call` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). @@ -729,9 +729,9 @@ The Incoming Call Component is a Composite Component and it has a specific set o ### OngoingCall -If you want to customize the properties of the [OngoingCall](/ui-kit/angular/ongoing-call) Component inside Incoming Call Component, you need use the `CallScreenConfiguration` object. +If you want to customize the properties of the [OngoingCall](/ui-kit/angular/v4/ongoing-call) Component inside Incoming Call Component, you need use the `CallScreenConfiguration` object. -The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/ongoing-call#actions), [Filters](/ui-kit/angular/ongoing-call#filters), [Styles](/ui-kit/angular/ongoing-call#style), [Functionality](/ui-kit/angular/ongoing-call#functionality), and [Advanced](/ui-kit/angular/ongoing-call#advanced) properties of the [OngoingCall](/ui-kit/angular/ongoing-call) component. +The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angular/v4/ongoing-call#actions), [Filters](/ui-kit/angular/v4/ongoing-call#filters), [Styles](/ui-kit/angular/v4/ongoing-call#style), [Functionality](/ui-kit/angular/v4/ongoing-call#functionality), and [Advanced](/ui-kit/angular/v4/ongoing-call#advanced) properties of the [OngoingCall](/ui-kit/angular/v4/ongoing-call) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -741,7 +741,7 @@ The `OngoingCallConfiguration` provides access to all the [Action](/ui-kit/angul -In this example, we will show how you can display the call recording button in the [OngoingCall](/ui-kit/angular/ongoing-call) component using `ongoingCallConfiguration`. +In this example, we will show how you can display the call recording button in the [OngoingCall](/ui-kit/angular/v4/ongoing-call) component using `ongoingCallConfiguration`. diff --git a/ui-kit/angular/v4/input.mdx b/ui-kit/angular/v4/input.mdx index d3514b77c..8e3534d2e 100644 --- a/ui-kit/angular/v4/input.mdx +++ b/ui-kit/angular/v4/input.mdx @@ -18,7 +18,7 @@ This element allows users to enter or provide data or information within a web f | hidden | boolean | When set to true, the input element is not displayed | | multiple | boolean | When set to true, allows multiple values for `file` and `email` input type. | | accept | string | Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. | -| inputStyle | [InputStyle](/ui-kit/angular/input#inputstyle) | Styling properties and values of the element | +| inputStyle | [InputStyle](/ui-kit/angular/v4/input#inputstyle) | Styling properties and values of the element | ## InputStyle diff --git a/ui-kit/angular/v4/join-protected-group.mdx b/ui-kit/angular/v4/join-protected-group.mdx index c5bdb7fe2..f8c451c80 100644 --- a/ui-kit/angular/v4/join-protected-group.mdx +++ b/ui-kit/angular/v4/join-protected-group.mdx @@ -5,7 +5,7 @@ description: "Join Protected Group — CometChat documentation." ## Overview -`CometChatJoinGroup` is a [Component](/ui-kit/angular/components-overview#components) used to set up a screen that shows the functionality to join a password protected group, featuring the functionality to join a password-protected group, where users can join a single password-protected group at a time. +`CometChatJoinGroup` is a [Component](/ui-kit/angular/v4/components-overview#components) used to set up a screen that shows the functionality to join a password protected group, featuring the functionality to join a password-protected group, where users can join a single password-protected group at a time. @@ -16,8 +16,8 @@ The Groups component is composed of the following BaseComponents: | Components | Description | | --------------------------------------------- | --------------------------------------------------------------------------------------------------- | | cometchat-button | This component represents a button with optional icon and text. | -| [cometchat-label](/ui-kit/angular/label) | This component provides descriptive information about the associated UI element. | -| [cometchat-input](/ui-kit/angular/input) | This component allows users to enter or provide data or information within a web form or interface. | +| [cometchat-label](/ui-kit/angular/v4/label) | This component provides descriptive information about the associated UI element. | +| [cometchat-input](/ui-kit/angular/v4/input) | This component allows users to enter or provide data or information within a web form or interface. | *** @@ -103,7 +103,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. joinClick @@ -245,7 +245,7 @@ The `Join Group` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Join Group component is as follows. diff --git a/ui-kit/angular/v4/label.mdx b/ui-kit/angular/v4/label.mdx index ce6d64d45..55dcb6af5 100644 --- a/ui-kit/angular/v4/label.mdx +++ b/ui-kit/angular/v4/label.mdx @@ -12,7 +12,7 @@ This element provides descriptive information about the associated UI element. | Name | Type | Description | | ---------- | --------------------------------------------------- | ----------------------------------------------- | | text | string | Descriptive text associated with the UI element | -| labelStyle | [LabelStyle](/ui-kit/angular/label#labelstyle) | Styling properties and values of the element | +| labelStyle | [LabelStyle](/ui-kit/angular/v4/label#labelstyle) | Styling properties and values of the element | ## LabelStyle diff --git a/ui-kit/angular/v4/list-item.mdx b/ui-kit/angular/v4/list-item.mdx index 4fa61c280..e16b9b7a2 100644 --- a/ui-kit/angular/v4/list-item.mdx +++ b/ui-kit/angular/v4/list-item.mdx @@ -19,9 +19,9 @@ This element is used to display rows of information, such as a contact list, pla | title | string | Heading text of each row item | | isActive | boolean | When set to true, sets the particular row item in the active status | | hideSeparator | boolean | When set to true, hides the separator between each individual items | -| avatarStyle | [avatarStyle](/ui-kit/angular/avatar#avatar-style) | Styling properties and values of the avatar element | -| statusIndicatorStyle | [statusIndicatorStyle](/ui-kit/angular/status-indicator) | Styling properties and values of the status indicator element | -| listItemStyle | [ListItemStyle](/ui-kit/angular/list-item#listitemstyle) | Styling properties and values of the element | +| avatarStyle | [avatarStyle](/ui-kit/angular/v4/avatar#avatar-style) | Styling properties and values of the avatar element | +| statusIndicatorStyle | [statusIndicatorStyle](/ui-kit/angular/v4/status-indicator) | Styling properties and values of the status indicator element | +| listItemStyle | [ListItemStyle](/ui-kit/angular/v4/list-item#listitemstyle) | Styling properties and values of the element | ## ListItemStyle diff --git a/ui-kit/angular/v4/list.mdx b/ui-kit/angular/v4/list.mdx index a6755ccc1..6577171f9 100644 --- a/ui-kit/angular/v4/list.mdx +++ b/ui-kit/angular/v4/list.mdx @@ -19,9 +19,9 @@ This element is used to display rows of information, such as a contact list, pla | title | string | Heading text of each row item | | isActive | boolean | When set to true, sets the particular row item in the active status | | hideSeparator | boolean | When set to true, hides the separator between each individual items | -| avatarStyle | [avatarStyle](/ui-kit/angular/avatar#avatar-style) | Styling properties and values of the avatar element | -| statusIndicatorStyle | [statusIndicatorStyle](/ui-kit/angular/status-indicator) | Styling properties and values of the status indicator element | -| listItemStyle | [ListItemStyle](/ui-kit/angular/list-item#listitemstyle) | Styling properties and values of the element | +| avatarStyle | [avatarStyle](/ui-kit/angular/v4/avatar#avatar-style) | Styling properties and values of the avatar element | +| statusIndicatorStyle | [statusIndicatorStyle](/ui-kit/angular/v4/status-indicator) | Styling properties and values of the status indicator element | +| listItemStyle | [ListItemStyle](/ui-kit/angular/v4/list-item#listitemstyle) | Styling properties and values of the element | ## ListStyle diff --git a/ui-kit/angular/v4/loader.mdx b/ui-kit/angular/v4/loader.mdx index e1e80f7be..5987455de 100644 --- a/ui-kit/angular/v4/loader.mdx +++ b/ui-kit/angular/v4/loader.mdx @@ -13,7 +13,7 @@ This element helps to notify users that loading is underway. They are used while | ----------- | ------------------------------------------------------ | -------------------------------------------- | | name | string | Text to appear on the icon | | iconURL | string | Asset URL for the icon | -| loaderStyle | [LoaderStyle](/ui-kit/angular/loader#loaderstyle) | Styling properties and values of the element | +| loaderStyle | [LoaderStyle](/ui-kit/angular/v4/loader#loaderstyle) | Styling properties and values of the element | ## LoaderStyle diff --git a/ui-kit/angular/v4/mentions-formatter-guide.mdx b/ui-kit/angular/v4/mentions-formatter-guide.mdx index 1914b0bdf..2873839b3 100644 --- a/ui-kit/angular/v4/mentions-formatter-guide.mdx +++ b/ui-kit/angular/v4/mentions-formatter-guide.mdx @@ -49,4 +49,4 @@ mentionsFormatter.setCometChatUserGroupMembers(userList); The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display. -Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/angular/conversations), [CometChatMessageList](/ui-kit/angular/message-list), [CometChatMessageComposer](/ui-kit/angular/message-composer). +Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/angular/v4/conversations), [CometChatMessageList](/ui-kit/angular/v4/message-list), [CometChatMessageComposer](/ui-kit/angular/v4/message-composer). diff --git a/ui-kit/angular/v4/message-composer.mdx b/ui-kit/angular/v4/message-composer.mdx index 73e7964ca..3cd38f219 100644 --- a/ui-kit/angular/v4/message-composer.mdx +++ b/ui-kit/angular/v4/message-composer.mdx @@ -5,7 +5,7 @@ description: "Message Composer — CometChat documentation." ## Overview -MessageComposer is a [Component](/ui-kit/angular/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages. +MessageComposer is a [Component](/ui-kit/angular/v4/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it. @@ -13,12 +13,12 @@ Features such as **Live Reaction**, **Attachments**, and **Message Editing** are -MessageComposer is comprised of the following [Base Components](/ui-kit/angular/components-overview#base-components): +MessageComposer is comprised of the following [Base Components](/ui-kit/angular/v4/components-overview#base-components): | Base Components | Description | | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| [MessageInput](/ui-kit/angular/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons | -| [ActionSheet](/ui-kit/angular/action-sheet) | The ActionSheet component presents a list of options in either a list or grid mode, depending on the user's preference | +| [MessageInput](/ui-kit/angular/v4/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons | +| [ActionSheet](/ui-kit/angular/v4/action-sheet) | The ActionSheet component presents a list of options in either a list or grid mode, depending on the user's preference | ## Usage @@ -108,7 +108,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. OnSendButtonClick @@ -260,7 +260,7 @@ MessageComposer component does not have any available filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the Messages component is as follows. @@ -434,7 +434,7 @@ The following properties are exposed by MessageComposerStyle: ##### 2. MediaRecorder Style -To customize the styles of the MediaRecorder component within the MessageComposer Component, use the `mediaRecorderStyle` property. For more details, please refer to [MediaRecorder](/ui-kit/angular/media-recorder) styles. +To customize the styles of the MediaRecorder component within the MessageComposer Component, use the `mediaRecorderStyle` property. For more details, please refer to [MediaRecorder](/ui-kit/angular/v4/media-recorder) styles. @@ -1132,7 +1132,7 @@ export class AppComponent implements OnInit{ #### TextFormatters -Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/mentions-formatter-guide). +Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/v4/mentions-formatter-guide). **Example** @@ -1341,17 +1341,17 @@ export class AppComponent implements OnInit{ ## Configuration -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. ### UserMemberWrapper -From the MessageComposer, you can navigate to the [UserMemberWrapper](/ui-kit/angular/user-member-wrapper) component as shown in the image. +From the MessageComposer, you can navigate to the [UserMemberWrapper](/ui-kit/angular/v4/user-member-wrapper) component as shown in the image. -If you wish to modify the properties of the [UserMemberWrapper](/ui-kit/angular/user-member-wrapper) Component, you can use the `UserMemberWrapperConfiguration` object. +If you wish to modify the properties of the [UserMemberWrapper](/ui-kit/angular/v4/user-member-wrapper) Component, you can use the `UserMemberWrapperConfiguration` object. @@ -1422,7 +1422,7 @@ export class AppComponent implements OnInit{ -The `UserMemberWrapperConfiguration` indeed provides access to all the [Action](/ui-kit/angular/user-member-wrapper#actions), [Filters](/ui-kit/angular/message-information#filters), [Styles](/ui-kit/angular/user-member-wrapper#style), [Functionality](/ui-kit/angular/user-member-wrapper#functionality), and [Advanced](/ui-kit/angular/user-member-wrapper#advanced) properties of the [UserMemberWrapper](/ui-kit/angular/user-member-wrapper) component. +The `UserMemberWrapperConfiguration` indeed provides access to all the [Action](/ui-kit/angular/v4/user-member-wrapper#actions), [Filters](/ui-kit/angular/v4/message-information#filters), [Styles](/ui-kit/angular/v4/user-member-wrapper#style), [Functionality](/ui-kit/angular/v4/user-member-wrapper#functionality), and [Advanced](/ui-kit/angular/v4/user-member-wrapper#advanced) properties of the [UserMemberWrapper](/ui-kit/angular/v4/user-member-wrapper) component. Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1432,6 +1432,6 @@ Please note that the Properties marked with the 🛑 symbol are not accessible w -In the above example, we are styling a few properties of the [UserMemberWrapper](/ui-kit/angular/user-member-wrapper) component using `UserMemberWrapperConfiguration`. +In the above example, we are styling a few properties of the [UserMemberWrapper](/ui-kit/angular/v4/user-member-wrapper) component using `UserMemberWrapperConfiguration`. *** diff --git a/ui-kit/angular/v4/message-header.mdx b/ui-kit/angular/v4/message-header.mdx index aefb3a42a..a5fc77211 100644 --- a/ui-kit/angular/v4/message-header.mdx +++ b/ui-kit/angular/v4/message-header.mdx @@ -5,7 +5,7 @@ description: "Message Header — CometChat documentation." ## Overview -`MessageHeader` is a [Component](/ui-kit/angular/components-overview#components) that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use. +`MessageHeader` is a [Component](/ui-kit/angular/v4/components-overview#components) that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use. @@ -15,7 +15,7 @@ The `MessageHeader` is comprised of the following components: | Components | Description | | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| [ListItem Component](/ui-kit/angular/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | +| [ListItem Component](/ui-kit/angular/v4/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | | Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one | ## Usage @@ -103,7 +103,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. OnBack @@ -260,7 +260,7 @@ The `MessageHeader` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `MessageHeader` component does not produce any events. @@ -372,7 +372,7 @@ The properties exposed by `MessageHeaderStyle` are as follows: ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -449,7 +449,7 @@ export class AppComponent implements OnInit{ ##### 3. ListItem Style -If you want to apply customized styles to the `List Item` component within the `MessageHeader` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `MessageHeader` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). @@ -525,7 +525,7 @@ export class AppComponent implements OnInit{ ##### 4. StatusIndicator Style -If you want to apply customized styles to the `Status Indicator` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [StatusIndicator Styles](/ui-kit/angular/status-indicator). +If you want to apply customized styles to the `Status Indicator` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [StatusIndicator Styles](/ui-kit/angular/v4/status-indicator). diff --git a/ui-kit/angular/v4/message-information.mdx b/ui-kit/angular/v4/message-information.mdx index d5733d200..c00ef76fd 100644 --- a/ui-kit/angular/v4/message-information.mdx +++ b/ui-kit/angular/v4/message-information.mdx @@ -3,17 +3,17 @@ title: "Message Information" description: "Message Information — CometChat documentation." --- -The MessageInformation is a [Component](/ui-kit/angular/components-overview#components) designed to display message-related information, such as delivery and read receipts. It serves as an integral part of the CometChat UI UI Kit, extending the [List Item](/ui-kit/angular/list-item) class, which provides the underlying infrastructure for CometChat UI components. With its rich set of methods and properties, developers can easily customize and tailor the appearance and behavior of the message information view to suit the specific requirements of their application. +The MessageInformation is a [Component](/ui-kit/angular/v4/components-overview#components) designed to display message-related information, such as delivery and read receipts. It serves as an integral part of the CometChat UI UI Kit, extending the [List Item](/ui-kit/angular/v4/list-item) class, which provides the underlying infrastructure for CometChat UI components. With its rich set of methods and properties, developers can easily customize and tailor the appearance and behavior of the message information view to suit the specific requirements of their application. -MessageInformation is comprised of the following [Base Components](/ui-kit/angular/components-overview#base-components): +MessageInformation is comprised of the following [Base Components](/ui-kit/angular/v4/components-overview#base-components): | Base Components | Description | | ------------------------------------------- | ------------------------------------------------------------------------------- | -| [List Item](/ui-kit/angular/list-item) | This renders common components used across `Conversations`, `Groups` & `Users`. | +| [List Item](/ui-kit/angular/v4/list-item) | This renders common components used across `Conversations`, `Groups` & `Users`. | ## Usage @@ -129,7 +129,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onClose @@ -455,7 +455,7 @@ The following properties are exposed by MessageInformationStyle: ##### 2. ListItemStyle -To apply customized styles to the `List Item` component in the MessageInformation Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the MessageInformation Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) diff --git a/ui-kit/angular/v4/message-input.mdx b/ui-kit/angular/v4/message-input.mdx index 44acd569b..eccfb4350 100644 --- a/ui-kit/angular/v4/message-input.mdx +++ b/ui-kit/angular/v4/message-input.mdx @@ -12,8 +12,8 @@ description: "Message Input — CometChat documentation." | text | string | Initial text of the input element | | placeholderText | string | Text that appears in the input element when it has no value set | | disabled | boolean | When set to true, user won't be able to interact with the input element | -| auxiliaryButtonAlignment | [auxiliaryButtonAlignmentEnum](/ui-kit/angular/message-input#auxiliarybuttonalignmentenum) | Group of constants representing the in-built alignment pattern | -| messageInputStyle | [MessageInputStyle](/ui-kit/angular/message-input#messageinputstyle) | Styling properties and values of the element | +| auxiliaryButtonAlignment | [auxiliaryButtonAlignmentEnum](/ui-kit/angular/v4/message-input#auxiliarybuttonalignmentenum) | Group of constants representing the in-built alignment pattern | +| messageInputStyle | [MessageInputStyle](/ui-kit/angular/v4/message-input#messageinputstyle) | Styling properties and values of the element | ## Slots diff --git a/ui-kit/angular/v4/message-list.mdx b/ui-kit/angular/v4/message-list.mdx index 20ab0f666..808baf291 100644 --- a/ui-kit/angular/v4/message-list.mdx +++ b/ui-kit/angular/v4/message-list.mdx @@ -5,9 +5,9 @@ description: "Message List — CometChat documentation." ## Overview -`MessageList` is a [Composite Component](/ui-kit/angular/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. +`MessageList` is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. -`MessageList` is primarily a list of the base component [MessageBubble](/ui-kit/angular/message-bubble). The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type. +`MessageList` is primarily a list of the base component [MessageBubble](/ui-kit/angular/v4/message-bubble). The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type. @@ -108,7 +108,7 @@ To fetch messages for a specific entity, you need to supplement it with `User` o ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onThreadRepliesClick @@ -328,7 +328,7 @@ The following parameters in messageRequestBuilder will always be altered inside ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the Message List component is as follows. @@ -517,7 +517,7 @@ List of properties exposed by MessageListStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the `Message List` Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the `Message List` Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -832,7 +832,7 @@ For advanced-level customization, you can set custom views to the component. Thi #### Templates -[CometChatMessageTemplate](/ui-kit/angular/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/angular/message-template). +[CometChatMessageTemplate](/ui-kit/angular/v4/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/angular/v4/message-template). You can set message Templates to MessageList by using the following code snippet @@ -1438,7 +1438,7 @@ export class AppComponent implements OnInit{ #### TextFormatters -Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/mentions-formatter-guide) +Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/angular/v4/mentions-formatter-guide) @@ -1661,17 +1661,17 @@ export default HashTagTextFormatter; ## Configuration -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. ### MessageInformation -From the MessageList, you can navigate to the [MesssageInformation](/ui-kit/angular/message-information) component as shown in the image. +From the MessageList, you can navigate to the [MesssageInformation](/ui-kit/angular/v4/message-information) component as shown in the image. -If you wish to modify the properties of the [MesssageInformation](/ui-kit/angular/message-information) Component, you can use the `MessageInformationConfiguration` object. +If you wish to modify the properties of the [MesssageInformation](/ui-kit/angular/v4/message-information) Component, you can use the `MessageInformationConfiguration` object. @@ -1745,7 +1745,7 @@ export class AppComponent implements OnInit{ -The `MessageInformationConfiguration` indeed provides access to all the [Action](/ui-kit/angular/message-information#actions), [Filters](/ui-kit/angular/message-information#filters), [Styles](/ui-kit/angular/message-information#style), [Functionality](/ui-kit/angular/message-information#functionality), and [Advanced](/ui-kit/angular/message-information#functionality) properties of the [MesssageInformation](/ui-kit/angular/message-information) component. +The `MessageInformationConfiguration` indeed provides access to all the [Action](/ui-kit/angular/v4/message-information#actions), [Filters](/ui-kit/angular/v4/message-information#filters), [Styles](/ui-kit/angular/v4/message-information#style), [Functionality](/ui-kit/angular/v4/message-information#functionality), and [Advanced](/ui-kit/angular/v4/message-information#functionality) properties of the [MesssageInformation](/ui-kit/angular/v4/message-information) component. Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1763,11 +1763,11 @@ Please note that the Properties marked with the 🛑 symbol are not accessible w -In the above example, we are styling a few properties of the [MesssageInformation](/ui-kit/angular/message-information) component using `MessageInformationConfiguration`. +In the above example, we are styling a few properties of the [MesssageInformation](/ui-kit/angular/v4/message-information) component using `MessageInformationConfiguration`. ### Reaction -If you wish to modify the properties of the [Reaction](/ui-kit/angular/reaction) Component, you can use the `reactionsConfiguration` object. +If you wish to modify the properties of the [Reaction](/ui-kit/angular/v4/reaction) Component, you can use the `reactionsConfiguration` object. diff --git a/ui-kit/angular/v4/message-template.mdx b/ui-kit/angular/v4/message-template.mdx index a36b683a9..0dbe7f387 100644 --- a/ui-kit/angular/v4/message-template.mdx +++ b/ui-kit/angular/v4/message-template.mdx @@ -5,7 +5,7 @@ description: "Message Template — CometChat documentation." ## Overview -A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/angular/message-bubble). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/angular/message-bubble) components, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/angular/message-bubble) within your application effectively and consistently. +A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/angular/v4/message-bubble). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/angular/v4/message-bubble) components, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/angular/v4/message-bubble) within your application effectively and consistently. ### Structure @@ -51,7 +51,7 @@ MessageTemplate provides you with methods that allow you to alter various proper 4. **contentView** - The `contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/angular/text-bubble), [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble), or [Video Bubble](/ui-kit/angular/video-bubble), depending on the message type. + The `contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/angular/v4/text-bubble), [Image Bubble](/ui-kit/angular/v4/image-bubble), [File Bubble](/ui-kit/angular/v4/file-bubble), [Audio Bubble](/ui-kit/angular/v4/audio-bubble), or [Video Bubble](/ui-kit/angular/v4/video-bubble), depending on the message type. 5. **footerView** @@ -97,7 +97,7 @@ definedTemplates!: CometChatMessageTemplate[]; ## Customization -Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/angular/message-list) component. +Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/angular/v4/message-list) component. The First step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class. @@ -134,7 +134,7 @@ definedTemplates!: CometChatMessageTemplate[]; -You will be using [Messages](/ui-kit/angular/messages#overview) Component for example here so to apply Template to Messages you will need to use `MessageListConfiguration`. This is because the [templates](/ui-kit/angular/message-list#templates) function, which is used to apply the custom templates, belongs to the [MessageList](/ui-kit/angular/message-list) component. +You will be using [Messages](/ui-kit/angular/v4/messages#overview) Component for example here so to apply Template to Messages you will need to use `MessageListConfiguration`. This is because the [templates](/ui-kit/angular/v4/message-list#templates) function, which is used to apply the custom templates, belongs to the [MessageList](/ui-kit/angular/v4/message-list) component. You can apply MessageTempletes to Messages Component using the following code snippet. diff --git a/ui-kit/angular/v4/messages.mdx b/ui-kit/angular/v4/messages.mdx index 7692289da..836b15b96 100644 --- a/ui-kit/angular/v4/messages.mdx +++ b/ui-kit/angular/v4/messages.mdx @@ -5,21 +5,21 @@ description: "Messages — CometChat documentation." ## Overview -The Messages is a [Composite Component](/ui-kit/angular/components-overview#composite-components) that manages messages for users and groups. +The Messages is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) that manages messages for users and groups. -The Messages component is composed of three individual components, [MessageHeader](/ui-kit/angular/message-header), [MessageList](/ui-kit/angular/message-list), and [MessageComposer](/ui-kit/angular/message-composer). In addition, the Messages component also navigates to the [Details](/ui-kit/angular/group-details) and [ThreadedMessages](/ui-kit/angular/threaded-messages) components. +The Messages component is composed of three individual components, [MessageHeader](/ui-kit/angular/v4/message-header), [MessageList](/ui-kit/angular/v4/message-list), and [MessageComposer](/ui-kit/angular/v4/message-composer). In addition, the Messages component also navigates to the [Details](/ui-kit/angular/v4/group-details) and [ThreadedMessages](/ui-kit/angular/v4/threaded-messages) components. | Components | Description | | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [MessageHeader](/ui-kit/angular/message-header) | `CometChatMessageHeader` displays the `User` or `Group` information using CometChat SDK's `User` or `Group object.` It also shows the typing indicator when the user starts typing in `MessageComposer`. | -| [MessageList](/ui-kit/angular/message-list) | `CometChatMessageList` is one of the core UI components. It displays a list of messages and handles real-time operations. | -| [MessageComposer](/ui-kit/angular/message-composer) | `CometChatMessageComposer` is an independent and critical component that allows users to compose and send various types of messages includes text, image, video and custom messages. | -| [Details](/ui-kit/angular/group-details) | `CometChatDetails` is a component that displays all the available options available for `Users` & `Groups` | -| [ThreadedMessages](/ui-kit/angular/threaded-messages) | `CometChatThreadedMessages` is a component that displays all replies made to a particular message in a conversation. | +| [MessageHeader](/ui-kit/angular/v4/message-header) | `CometChatMessageHeader` displays the `User` or `Group` information using CometChat SDK's `User` or `Group object.` It also shows the typing indicator when the user starts typing in `MessageComposer`. | +| [MessageList](/ui-kit/angular/v4/message-list) | `CometChatMessageList` is one of the core UI components. It displays a list of messages and handles real-time operations. | +| [MessageComposer](/ui-kit/angular/v4/message-composer) | `CometChatMessageComposer` is an independent and critical component that allows users to compose and send various types of messages includes text, image, video and custom messages. | +| [Details](/ui-kit/angular/v4/group-details) | `CometChatDetails` is a component that displays all the available options available for `Users` & `Groups` | +| [ThreadedMessages](/ui-kit/angular/v4/threaded-messages) | `CometChatThreadedMessages` is a component that displays all replies made to a particular message in a conversation. | ## Usage @@ -108,13 +108,13 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -The Messages component does not have its actions. However, since it's a [Composite Component](/ui-kit/angular/components-overview#composite-components), you can use the actions of its components by utilizing the [Configurations](#configuration) object of each component. +The Messages component does not have its actions. However, since it's a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components), you can use the actions of its components by utilizing the [Configurations](#configuration) object of each component. **Example** -In this example, we are employing the [onThreadRepliesClick](/ui-kit/angular/message-list#1-onthreadrepliesclick) action from the MessageList Component through the MessageListConfiguration object. +In this example, we are employing the [onThreadRepliesClick](/ui-kit/angular/v4/message-list#1-onthreadrepliesclick) action from the MessageList Component through the MessageListConfiguration object. @@ -199,13 +199,13 @@ Thread Screen: -> The Messages Component overrides the [onThreadRepliesClick](/ui-kit/angular/message-list#1-onthreadrepliesclick) action to navigate to the [ThreadedMessages](/ui-kit/angular/threaded-messages) component. If you override `onThreadRepliesClick`, it will also override the default behavior of the Messages Component. +> The Messages Component overrides the [onThreadRepliesClick](/ui-kit/angular/v4/message-list#1-onthreadrepliesclick) action to navigate to the [ThreadedMessages](/ui-kit/angular/v4/threaded-messages) component. If you override `onThreadRepliesClick`, it will also override the default behavior of the Messages Component. ### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -The Messages component does not have its filters. But as it is a [Composite Component](/ui-kit/angular/components-overview#composite-components), you can use the filters of its components by using the [Configurations](#configuration) object of each component. For more details on the filters of its components, please refer to [MessageList Filters](/ui-kit/angular/message-list#filters). +The Messages component does not have its filters. But as it is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components), you can use the filters of its components by using the [Configurations](#configuration) object of each component. For more details on the filters of its components, please refer to [MessageList Filters](/ui-kit/angular/v4/message-list#filters). **Example** @@ -281,7 +281,7 @@ export class AppComponent implements OnInit{ ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Messages` component does not produce any events directly. @@ -375,9 +375,9 @@ List of properties exposed by MessagesStyle ##### 2. Component's Styles -Being a [Composite component](/ui-kit/angular/components-overview#composite-components), the Messages Component allows you to customize the styles of its components using their respective Configuration objects. +Being a [Composite component](/ui-kit/angular/v4/components-overview#composite-components), the Messages Component allows you to customize the styles of its components using their respective Configuration objects. -For a list of all available properties, refer to each component's styling documentation: [MesssageHeader Styles](/ui-kit/angular/message-header#1-messageheader-style), [MessageList Styles](/ui-kit/angular/message-list#style), [MessageComposer Styles](/ui-kit/angular/message-composer#style), [Details Styles](/ui-kit/angular/group-details#style), [ThreadMessages Styles](/ui-kit/angular/threaded-messages#style). +For a list of all available properties, refer to each component's styling documentation: [MesssageHeader Styles](/ui-kit/angular/v4/message-header#1-messageheader-style), [MessageList Styles](/ui-kit/angular/v4/message-list#style), [MessageComposer Styles](/ui-kit/angular/v4/message-composer#style), [Details Styles](/ui-kit/angular/v4/group-details#style), [ThreadMessages Styles](/ui-kit/angular/v4/threaded-messages#style). **Example** @@ -958,9 +958,9 @@ The Messages Component is a Composite Component and it has a specific set of con ### MessageHeader -If you want to customize the properties of the [MessageHeader](/ui-kit/angular/message-header) Component inside Messages Component, you need use the `MessageHeaderConfiguration` object. +If you want to customize the properties of the [MessageHeader](/ui-kit/angular/v4/message-header) Component inside Messages Component, you need use the `MessageHeaderConfiguration` object. -The `MessageHeaderConfiguration` provides access to all the [Action](/ui-kit/angular/message-header#actions), [Filters](/ui-kit/angular/message-header#filters), [Styles](/ui-kit/angular/message-header#style), [Functionality](/ui-kit/angular/message-header#functionality), and [Advanced](/ui-kit/angular/message-header#advanced) properties of the [MessageHeader](/ui-kit/angular/message-header) component. +The `MessageHeaderConfiguration` provides access to all the [Action](/ui-kit/angular/v4/message-header#actions), [Filters](/ui-kit/angular/v4/message-header#filters), [Styles](/ui-kit/angular/v4/message-header#style), [Functionality](/ui-kit/angular/v4/message-header#functionality), and [Advanced](/ui-kit/angular/v4/message-header#advanced) properties of the [MessageHeader](/ui-kit/angular/v4/message-header) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -970,7 +970,7 @@ The `MessageHeaderConfiguration` provides access to all the [Action](/ui-kit/ang -In this example, we will style the Avatar and MessageHeader of the [MessageHeader](/ui-kit/angular/message-header) component using `MessageHeaderConfiguration`. +In this example, we will style the Avatar and MessageHeader of the [MessageHeader](/ui-kit/angular/v4/message-header) component using `MessageHeaderConfiguration`. @@ -1055,9 +1055,9 @@ export class AppComponent implements OnInit{ ### MessageList -If you want to customize the properties of the [MessageList](/ui-kit/angular/message-list) Component inside Messages Component, you need use the `MessageListConfiguration` object. +If you want to customize the properties of the [MessageList](/ui-kit/angular/v4/message-list) Component inside Messages Component, you need use the `MessageListConfiguration` object. -The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angular/message-list#actions), [Filters](/ui-kit/angular/message-list#filters), [Styles](/ui-kit/angular/message-list#style), [Functionality](/ui-kit/angular/message-list#functionality), and [Advanced](/ui-kit/angular/message-list#functionality) properties of the [MessageList](/ui-kit/angular/message-list) component. +The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angular/v4/message-list#actions), [Filters](/ui-kit/angular/v4/message-list#filters), [Styles](/ui-kit/angular/v4/message-list#style), [Functionality](/ui-kit/angular/v4/message-list#functionality), and [Advanced](/ui-kit/angular/v4/message-list#functionality) properties of the [MessageList](/ui-kit/angular/v4/message-list) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1067,7 +1067,7 @@ The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angul -In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/angular/message-list) component using `MessageListConfiguration`. +In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/angular/v4/message-list) component using `MessageListConfiguration`. @@ -1145,9 +1145,9 @@ export class AppComponent implements OnInit{ ### MessageComposer -If you want to customize the properties of the [MessageComposer](/ui-kit/angular/message-composer) Component inside Messages Component, you need use the `MessageComposerConfiguration` object. +If you want to customize the properties of the [MessageComposer](/ui-kit/angular/v4/message-composer) Component inside Messages Component, you need use the `MessageComposerConfiguration` object. -The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/angular/message-composer#actions), [Filters](/ui-kit/angular/message-composer#filters), [Styles](/ui-kit/angular/message-composer#style), [Functionality](/ui-kit/angular/message-composer#functionality), and [Advanced](/ui-kit/angular/message-composer#advanced) properties of the [MessageComposer](/ui-kit/angular/message-composer) component. +The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/angular/v4/message-composer#actions), [Filters](/ui-kit/angular/v4/message-composer#filters), [Styles](/ui-kit/angular/v4/message-composer#style), [Functionality](/ui-kit/angular/v4/message-composer#functionality), and [Advanced](/ui-kit/angular/v4/message-composer#advanced) properties of the [MessageComposer](/ui-kit/angular/v4/message-composer) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1157,7 +1157,7 @@ The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/a -In this example, we'll be adding styling to the message composer and custom text to the [MessageComposer](/ui-kit/angular/message-composer) component using `MessageComposerConfiguration`. +In this example, we'll be adding styling to the message composer and custom text to the [MessageComposer](/ui-kit/angular/v4/message-composer) component using `MessageComposerConfiguration`. @@ -1237,9 +1237,9 @@ export class AppComponent implements OnInit{ ### ThreadedMessages -If you want to customize the properties of the [ThreadedMessages](/ui-kit/angular/threaded-messages) Component inside Messages Component, you need use the `ThreadedMessagesConfiguration` object. +If you want to customize the properties of the [ThreadedMessages](/ui-kit/angular/v4/threaded-messages) Component inside Messages Component, you need use the `ThreadedMessagesConfiguration` object. -The `ThreadedMessagesConfiguration` provides access to all the [Action](/ui-kit/angular/threaded-messages#actions), [Filters](/ui-kit/angular/threaded-messages#filters), [Styles](/ui-kit/angular/threaded-messages#style), [Functionality](/ui-kit/angular/threaded-messages#functionality), and [Advanced](/ui-kit/angular/threaded-messages#advanced) properties of the [ThreadedMessages](/ui-kit/angular/threaded-messages) component. +The `ThreadedMessagesConfiguration` provides access to all the [Action](/ui-kit/angular/v4/threaded-messages#actions), [Filters](/ui-kit/angular/v4/threaded-messages#filters), [Styles](/ui-kit/angular/v4/threaded-messages#style), [Functionality](/ui-kit/angular/v4/threaded-messages#functionality), and [Advanced](/ui-kit/angular/v4/threaded-messages#advanced) properties of the [ThreadedMessages](/ui-kit/angular/v4/threaded-messages) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1249,7 +1249,7 @@ The `ThreadedMessagesConfiguration` provides access to all the [Action](/ui-kit/ -In this example, we are adding a custom close icon to the Threaded Message component and also adding custom properties to the [MessageList](#messagelist) using `MessageListConfiguration`. We then apply these changes to the [ThreadedMessages](/ui-kit/angular/message-composer) component using `ThreadedMessagesConfiguration`. +In this example, we are adding a custom close icon to the Threaded Message component and also adding custom properties to the [MessageList](#messagelist) using `MessageListConfiguration`. We then apply these changes to the [ThreadedMessages](/ui-kit/angular/v4/message-composer) component using `ThreadedMessagesConfiguration`. diff --git a/ui-kit/angular/v4/modal.mdx b/ui-kit/angular/v4/modal.mdx index fbe547fbc..db300b199 100644 --- a/ui-kit/angular/v4/modal.mdx +++ b/ui-kit/angular/v4/modal.mdx @@ -13,7 +13,7 @@ This element renders its children component in front of the backdrop element. | -------------------- | --------------------------------------------------- | --------------------------------------------------------------------------- | | closeIconURL | string | Asset URL for the close icon | | closeOnBackdropClick | boolean | When set to true, closes the modal when user clicks on the backdrop element | -| modalStyle | [ModalStyle](/ui-kit/angular/modal#modalstyle) | Styling properties and values of the element | +| modalStyle | [ModalStyle](/ui-kit/angular/v4/modal#modalstyle) | Styling properties and values of the element | ## ModalStyle diff --git a/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx b/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx index 31be18f94..b0479717f 100644 --- a/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx +++ b/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx @@ -9,11 +9,11 @@ This guide will help you achieve a tabbed layout (aka Multi-Tab Chat UI) of the -We’ll use the [CometChatConversationsWithMessages](/ui-kit/angular/conversations-with-messages), [CometChatUsersWithMessages](/ui-kit/angular/users-with-messages), and [CometChatGroupsWithMessages](/ui-kit/angular/groups-with-messages) components and launch them as individual tab items within the tabbed layout. +We’ll use the [CometChatConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages), [CometChatUsersWithMessages](/ui-kit/angular/v4/users-with-messages), and [CometChatGroupsWithMessages](/ui-kit/angular/v4/groups-with-messages) components and launch them as individual tab items within the tabbed layout. -We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/components-overview). +We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/v4/components-overview). diff --git a/ui-kit/angular/v4/new-attachment-option-guide.mdx b/ui-kit/angular/v4/new-attachment-option-guide.mdx index 0686c4da0..183051909 100644 --- a/ui-kit/angular/v4/new-attachment-option-guide.mdx +++ b/ui-kit/angular/v4/new-attachment-option-guide.mdx @@ -3,11 +3,11 @@ title: "New Attachment Option" description: "New Attachment Option — CometChat integration guide." --- -In this guide, we will demonstrate how to add a custom option to the action sheet of the [MessageComposer](/ui-kit/angular/message-composer) component. This guide is meant to showcase how custom features can be built on top of the existing codebase, enabling developers to tailor the user experience to their specific requirements. +In this guide, we will demonstrate how to add a custom option to the action sheet of the [MessageComposer](/ui-kit/angular/v4/message-composer) component. This guide is meant to showcase how custom features can be built on top of the existing codebase, enabling developers to tailor the user experience to their specific requirements. -We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/components-overview). +We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/v4/components-overview). @@ -94,7 +94,7 @@ options.push(videoRecordOption); -The attachment options are then passed to the [ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) component as a prop using [MessageComposerConfguration](/web-shared/message-composer-configuration). +The attachment options are then passed to the [ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) component as a prop using [MessageComposerConfguration](/web-shared/message-composer-configuration). diff --git a/ui-kit/angular/v4/new-message-option-guide.mdx b/ui-kit/angular/v4/new-message-option-guide.mdx index 3f21488dc..79c870586 100644 --- a/ui-kit/angular/v4/new-message-option-guide.mdx +++ b/ui-kit/angular/v4/new-message-option-guide.mdx @@ -11,7 +11,7 @@ This guide will help you add a custom option to the messages of type image. By d -We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/components-overview). +We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/v4/components-overview). @@ -146,7 +146,7 @@ downloadImage = async(message:CometChat.MediaMessage) => { -The message options are then passed to the [ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) component as a prop using [MessagesConfiguration](/web-shared/messages-configuration). +The message options are then passed to the [ConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages) component as a prop using [MessagesConfiguration](/web-shared/messages-configuration). diff --git a/ui-kit/angular/v4/ongoing-call.mdx b/ui-kit/angular/v4/ongoing-call.mdx index 9b2b74af1..544b41afa 100644 --- a/ui-kit/angular/v4/ongoing-call.mdx +++ b/ui-kit/angular/v4/ongoing-call.mdx @@ -5,7 +5,7 @@ description: "Ongoing Call — CometChat documentation." ## Overview -The `Ongoing Call` is a [Component](/ui-kit/angular/components-overview#components) that provides users with a dedicated interface for managing real-time voice or video conversations. It includes features like a video display area for video calls, call controls for mic and camera management, participant information, call status indicators, and options for call recording and screen-sharing. +The `Ongoing Call` is a [Component](/ui-kit/angular/v4/components-overview#components) that provides users with a dedicated interface for managing real-time voice or video conversations. It includes features like a video display area for video calls, call controls for mic and camera management, participant information, call status indicators, and options for call recording and screen-sharing. @@ -92,7 +92,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onError @@ -213,7 +213,7 @@ callSettingsBuilder = new CometChatCalls.CallSettingsBuilder().setIsAudioOnlyCal ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The list of events emitted by the OnGoing Call Component is as follows. diff --git a/ui-kit/angular/v4/outgoing-call.mdx b/ui-kit/angular/v4/outgoing-call.mdx index c5a359540..827c44a12 100644 --- a/ui-kit/angular/v4/outgoing-call.mdx +++ b/ui-kit/angular/v4/outgoing-call.mdx @@ -16,7 +16,7 @@ The `Outgoing Call` is comprised of the following components: | Components | Description | | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | cometchat-card | this component displays structured content, often used for user profiles, chat messages, or group information in CometChat applications. | -| [cometchat-label](/ui-kit/angular/label) | This component provides descriptive information about the associated UI element. | +| [cometchat-label](/ui-kit/angular/v4/label) | This component provides descriptive information about the associated UI element. | | cometchat-icon-button | The CometChat IconButton component allows for the easy integration of customizable icon buttons | ## Usage @@ -111,7 +111,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onCloseClicked @@ -273,7 +273,7 @@ The `Outgoing Call` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Outgoing Call` component does not have any exposed filters. @@ -402,7 +402,7 @@ The following properties are exposed by OutgoingCallStyle: ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Outgoing Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Outgoing Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). diff --git a/ui-kit/angular/v4/overview.mdx b/ui-kit/angular/v4/overview.mdx index cb8f3f709..7c6c6b855 100644 --- a/ui-kit/angular/v4/overview.mdx +++ b/ui-kit/angular/v4/overview.mdx @@ -33,7 +33,7 @@ Before you begin, it's essential to grasp the fundamental concepts and features The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities. -To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide. +To begin, please follow the [Getting Started](/ui-kit/angular/v4/getting-started) guide. --- diff --git a/ui-kit/angular/v4/pop-over.mdx b/ui-kit/angular/v4/pop-over.mdx index 433cb9435..4fc366852 100644 --- a/ui-kit/angular/v4/pop-over.mdx +++ b/ui-kit/angular/v4/pop-over.mdx @@ -11,9 +11,9 @@ This element displays additional content or options in a small, overlay-like win | Name | Type | Description | | ------------ | ---------------------------------------------------------- | --------------------------------------------------------------------------------- | -| placement | [Placement](/ui-kit/angular/pop-over#placement) | Group of constants representing the positioning or alignment of popover placement | +| placement | [Placement](/ui-kit/angular/v4/pop-over#placement) | Group of constants representing the positioning or alignment of popover placement | | hasToolTip | boolean | When set to true, displays the cursor | -| popoverStyle | [PopoverStyle](/ui-kit/angular/pop-over#popoverstyle) | Styling properties and values of the element | +| popoverStyle | [PopoverStyle](/ui-kit/angular/v4/pop-over#popoverstyle) | Styling properties and values of the element | ## Slots diff --git a/ui-kit/angular/v4/radio-button.mdx b/ui-kit/angular/v4/radio-button.mdx index b8ce963b8..7ae1f5770 100644 --- a/ui-kit/angular/v4/radio-button.mdx +++ b/ui-kit/angular/v4/radio-button.mdx @@ -15,7 +15,7 @@ This element allows the user to exactly select one item from a set. | labelText | string | Caption text of the element | | checked | boolean | When set to true, element is checked by default | | disabled | boolean | When set to true, disables the element | -| radioButtonStyle | [RadioButtonStyle](/ui-kit/angular/radio-button#radiobuttonstyle) | Styling properties and values of the element | +| radioButtonStyle | [RadioButtonStyle](/ui-kit/angular/v4/radio-button#radiobuttonstyle) | Styling properties and values of the element | ## RadioButtonStyle diff --git a/ui-kit/angular/v4/reaction-info.mdx b/ui-kit/angular/v4/reaction-info.mdx index f3e927390..015e563ac 100644 --- a/ui-kit/angular/v4/reaction-info.mdx +++ b/ui-kit/angular/v4/reaction-info.mdx @@ -106,7 +106,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. The `Reactions Info` component does not have any exposed actions. @@ -204,7 +204,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Reactions Info` component does not produce any events. diff --git a/ui-kit/angular/v4/reaction-list.mdx b/ui-kit/angular/v4/reaction-list.mdx index 7f74fc14a..6527a385c 100644 --- a/ui-kit/angular/v4/reaction-list.mdx +++ b/ui-kit/angular/v4/reaction-list.mdx @@ -107,7 +107,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. reactionItemClicked @@ -252,7 +252,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Reactions list` component does not produce any events. @@ -370,7 +370,7 @@ List of properties exposed by ReactionsListStyle ##### 2. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `Reaction List` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `Reaction List` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -442,7 +442,7 @@ export class AppComponent { ##### 3. ListItem Style -If you want to apply customized styles to the `List Item` component within the `Reaction List` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/list-item#listitemstyle). +If you want to apply customized styles to the `List Item` component within the `Reaction List` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/angular/v4/list-item#listitemstyle). diff --git a/ui-kit/angular/v4/reaction.mdx b/ui-kit/angular/v4/reaction.mdx index 0b4d671e8..cb6697969 100644 --- a/ui-kit/angular/v4/reaction.mdx +++ b/ui-kit/angular/v4/reaction.mdx @@ -98,7 +98,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. reactionClick @@ -180,7 +180,7 @@ The `Reactions` component does not have any exposed filters. ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `Reactions` component does not produce any events. @@ -372,11 +372,11 @@ Below is a customizations list along with corresponding code snippets ## Configuration -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. ### Reaction Info -If you want to customize the properties of the [Reaction Info](/ui-kit/angular/reaction-info) Component inside Reactions Component, you need use the `reactionInfoConfiguration` object. +If you want to customize the properties of the [Reaction Info](/ui-kit/angular/v4/reaction-info) Component inside Reactions Component, you need use the `reactionInfoConfiguration` object. @@ -449,13 +449,13 @@ export class AppComponent { -The `reactionInfoConfiguration` indeed provides access to all the [Action](/ui-kit/angular/reaction-info#actions), [Filters](/ui-kit/angular/reaction-info#filters), [Styles](/ui-kit/angular/reaction-info#style), [Functionality](/ui-kit/angular/reaction-info#functionality), and [Advanced](/ui-kit/angular/reaction-info#functionality) properties of the [Reaction Info](/ui-kit/angular/reaction-info) component. +The `reactionInfoConfiguration` indeed provides access to all the [Action](/ui-kit/angular/v4/reaction-info#actions), [Filters](/ui-kit/angular/v4/reaction-info#filters), [Styles](/ui-kit/angular/v4/reaction-info#style), [Functionality](/ui-kit/angular/v4/reaction-info#functionality), and [Advanced](/ui-kit/angular/v4/reaction-info#functionality) properties of the [Reaction Info](/ui-kit/angular/v4/reaction-info) component. -In the above example, we are styling a few properties of the [Reaction Info](/ui-kit/angular/reaction-info) component using `reactionInfoConfiguration`. +In the above example, we are styling a few properties of the [Reaction Info](/ui-kit/angular/v4/reaction-info) component using `reactionInfoConfiguration`. ### Reaction List -If you want to customize the properties of the [Reaction List](/ui-kit/angular/reaction-list) Component inside Reactions Component, you need use the `reactionListConfiguration` object. +If you want to customize the properties of the [Reaction List](/ui-kit/angular/v4/reaction-list) Component inside Reactions Component, you need use the `reactionListConfiguration` object. @@ -528,6 +528,6 @@ export class AppComponent { -The `reactionListConfiguration` indeed provides access to all the [Action](/ui-kit/angular/reaction-list#actions), [Filters](/ui-kit/angular/reaction-list#filters), [Styles](/ui-kit/angular/reaction-list#style), [Functionality](/ui-kit/angular/reaction-list#functionality), and [Advanced](/ui-kit/angular/reaction-list#functionality) properties of the [Reaction List](/ui-kit/angular/reaction-list) component. +The `reactionListConfiguration` indeed provides access to all the [Action](/ui-kit/angular/v4/reaction-list#actions), [Filters](/ui-kit/angular/v4/reaction-list#filters), [Styles](/ui-kit/angular/v4/reaction-list#style), [Functionality](/ui-kit/angular/v4/reaction-list#functionality), and [Advanced](/ui-kit/angular/v4/reaction-list#functionality) properties of the [Reaction List](/ui-kit/angular/v4/reaction-list) component. -In the above example, we are styling a few properties of the [Reaction List](/ui-kit/angular/reaction-list) component using `reactionListConfiguration`. +In the above example, we are styling a few properties of the [Reaction List](/ui-kit/angular/v4/reaction-list) component using `reactionListConfiguration`. diff --git a/ui-kit/angular/v4/search-input.mdx b/ui-kit/angular/v4/search-input.mdx index bc99709a5..aa273293f 100644 --- a/ui-kit/angular/v4/search-input.mdx +++ b/ui-kit/angular/v4/search-input.mdx @@ -5,7 +5,7 @@ description: "Search Input — CometChat documentation." ## Overview -This element is built on top of [Input](/ui-kit/angular/input) element and enables users to enter a search string. +This element is built on top of [Input](/ui-kit/angular/v4/input) element and enables users to enter a search string. ## Properties @@ -15,7 +15,7 @@ This element is built on top of [Input](/ui-kit/angular/input) element and enabl | searchText | string | Text entered by the user into the element. | | placeholderText | string | Hint text, displayed within the element to provide an example or suggestion. | | searchIconURL | string | Asset URL for the search icon | -| searchInputStyle | [SearchInputStyle](/ui-kit/angular/search-input#searchinputstyle) | Styling properties and values of the element | +| searchInputStyle | [SearchInputStyle](/ui-kit/angular/v4/search-input#searchinputstyle) | Styling properties and values of the element | ## SearchInputStyle diff --git a/ui-kit/angular/v4/shortcut-formatter-guide.mdx b/ui-kit/angular/v4/shortcut-formatter-guide.mdx index f9c8b64ab..11a10c5f6 100644 --- a/ui-kit/angular/v4/shortcut-formatter-guide.mdx +++ b/ui-kit/angular/v4/shortcut-formatter-guide.mdx @@ -5,7 +5,7 @@ description: "ShortCut Formatter — CometChat integration guide." ## Overview -The `ShortCutFormatter` class extends the [CometChatTextFormatter](/ui-kit/angular/custom-text-formatter-guide) class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using `ShortCutFormatter` to implement shortcut extensions in your CometChat application. +The `ShortCutFormatter` class extends the [CometChatTextFormatter](/ui-kit/angular/v4/custom-text-formatter-guide) class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using `ShortCutFormatter` to implement shortcut extensions in your CometChat application. @@ -69,7 +69,7 @@ private getTextBeforeCaret(caretPosition: number): string { ## Example -Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/angular/conversations), [CometChatMessageList](/ui-kit/angular/message-list), [CometChatMessageComposer](/ui-kit/angular/message-composer). +Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/angular/v4/conversations), [CometChatMessageList](/ui-kit/angular/v4/message-list), [CometChatMessageComposer](/ui-kit/angular/v4/message-composer). diff --git a/ui-kit/angular/v4/singleselect.mdx b/ui-kit/angular/v4/singleselect.mdx index 382c86f07..82250b8f1 100644 --- a/ui-kit/angular/v4/singleselect.mdx +++ b/ui-kit/angular/v4/singleselect.mdx @@ -16,7 +16,7 @@ While this design allows an intuitive interaction similar to radio buttons, its | name | string | Unique identifier for the Single Select component. | | options | Array\ | An array of strings providing the options available to select. | | selectedOption | string | A string representing the currently selected option. | -| selectStyle | [SingleSelectStyle](/ui-kit/angular/singleselect#singleselectstyle) | An instance of the `SingleSelectStyle` class for customizing the Single Select component's style. | +| selectStyle | [SingleSelectStyle](/ui-kit/angular/v4/singleselect#singleselectstyle) | An instance of the `SingleSelectStyle` class for customizing the Single Select component's style. | ## SingleSelectStyle diff --git a/ui-kit/angular/v4/text-bubble.mdx b/ui-kit/angular/v4/text-bubble.mdx index bbacdb465..6e4387ce5 100644 --- a/ui-kit/angular/v4/text-bubble.mdx +++ b/ui-kit/angular/v4/text-bubble.mdx @@ -10,7 +10,7 @@ description: "Text Bubble — CometChat documentation." | Name | Type | Description | | --------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | text | string | Text to be displayed | -| textStyle | [TextBubbleStyle](/ui-kit/angular/text-bubble#textbubblestyle) | Styling properties and values of the [Text bubble](/ui-kit/angular/text-bubble) element | +| textStyle | [TextBubbleStyle](/ui-kit/angular/v4/text-bubble#textbubblestyle) | Styling properties and values of the [Text bubble](/ui-kit/angular/v4/text-bubble) element | ## TextBubbleStyle diff --git a/ui-kit/angular/v4/threaded-messages.mdx b/ui-kit/angular/v4/threaded-messages.mdx index 72be534b5..6274b35cb 100644 --- a/ui-kit/angular/v4/threaded-messages.mdx +++ b/ui-kit/angular/v4/threaded-messages.mdx @@ -5,7 +5,7 @@ description: "Threaded Messages — CometChat documentation." ## Overview -ThreadedMessages is a [Composite Component](/ui-kit/angular/components-overview#composite-components) that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies. +ThreadedMessages is a [Composite Component](/ui-kit/angular/v4/components-overview#composite-components) that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies. @@ -15,8 +15,8 @@ ThreadedMessages is composed of the following components: | Component | Description | | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| [MessageList](/ui-kit/angular/message-list) | CometChatMessageList is a component that displays a list of Messages | -| [MessageComposer](/ui-kit/angular/message-composer) | CometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments | +| [MessageList](/ui-kit/angular/v4/message-list) | CometChatMessageList is a component that displays a list of Messages | +| [MessageComposer](/ui-kit/angular/v4/message-composer) | CometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments | ## Usage @@ -129,7 +129,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. **Example** @@ -322,7 +322,7 @@ export class AppComponent implements OnInit{ ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The ThreadedMessages Component does not emit any events of its own. @@ -1023,9 +1023,9 @@ The ThreadedMessages is a Composite Component, and it has a distinct set of conf ### MessageList -If you want to customize the properties of the [MessageList](/ui-kit/angular/message-list) Component inside ThreadedMessages Component, you need use the `MessageListConfiguration` object. +If you want to customize the properties of the [MessageList](/ui-kit/angular/v4/message-list) Component inside ThreadedMessages Component, you need use the `MessageListConfiguration` object. -The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angular/message-list#actions), [Filters](/ui-kit/angular/message-list#filters), [Styles](/ui-kit/angular/message-list#style), [Functionality](/ui-kit/angular/message-list#functionality), and [Advanced](/ui-kit/angular/message-list#advance) properties of the [MessageList](/ui-kit/angular/message-list) component. +The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angular/v4/message-list#actions), [Filters](/ui-kit/angular/v4/message-list#filters), [Styles](/ui-kit/angular/v4/message-list#style), [Functionality](/ui-kit/angular/v4/message-list#functionality), and [Advanced](/ui-kit/angular/v4/message-list#advance) properties of the [MessageList](/ui-kit/angular/v4/message-list) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1035,7 +1035,7 @@ The `MessageListConfiguration` provides access to all the [Action](/ui-kit/angul -In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/angular/message-list) component using `MessageListConfiguration`. +In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/angular/v4/message-list) component using `MessageListConfiguration`. @@ -1142,9 +1142,9 @@ export class AppComponent implements OnInit{ ### MessageComposer -If you want to customize the properties of the [MessageComposer](/ui-kit/angular/message-composer) Component inside ThreadedMessages Component, you need use the `MessageComposerConfiguration` object. +If you want to customize the properties of the [MessageComposer](/ui-kit/angular/v4/message-composer) Component inside ThreadedMessages Component, you need use the `MessageComposerConfiguration` object. -The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/angular/message-composer#actions), [Filters](/ui-kit/angular/message-composer#filters), [Styles](/ui-kit/angular/message-composer#style), [Functionality](/ui-kit/angular/message-composer#functionality), and [Advanced](/ui-kit/angular/message-composer#advanced) properties of the [MessageComposer](/ui-kit/angular/message-composer) component. +The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/angular/v4/message-composer#actions), [Filters](/ui-kit/angular/v4/message-composer#filters), [Styles](/ui-kit/angular/v4/message-composer#style), [Functionality](/ui-kit/angular/v4/message-composer#functionality), and [Advanced](/ui-kit/angular/v4/message-composer#advanced) properties of the [MessageComposer](/ui-kit/angular/v4/message-composer) component. > Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. @@ -1154,7 +1154,7 @@ The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/a -In this example, we'll be adding a custom header view and customizing some properties of the [MessageComposer](/ui-kit/angular/message-composer) component using `MessageComposerConfiguration`. +In this example, we'll be adding a custom header view and customizing some properties of the [MessageComposer](/ui-kit/angular/v4/message-composer) component using `MessageComposerConfiguration`. diff --git a/ui-kit/angular/v4/user-details.mdx b/ui-kit/angular/v4/user-details.mdx index 0d93ad5ff..a7d320deb 100644 --- a/ui-kit/angular/v4/user-details.mdx +++ b/ui-kit/angular/v4/user-details.mdx @@ -5,7 +5,7 @@ description: "User Details — CometChat documentation." ## Overview -`CometChatDetails` is a [Component](/ui-kit/angular/components-overview#components) that provides additional information and settings related to a specific user. +`CometChatDetails` is a [Component](/ui-kit/angular/v4/components-overview#components) that provides additional information and settings related to a specific user. The details screen includes the following elements and functionalities: @@ -101,7 +101,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onClose @@ -245,7 +245,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. To handle events supported by Users you have to add corresponding listeners by using `CometChatUserEvents` @@ -386,7 +386,7 @@ List of properties exposed by DetailsStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -456,7 +456,7 @@ export class AppComponent { ##### 3. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) @@ -523,7 +523,7 @@ export class AppComponent { ##### 4. ListItem Style -To apply customized styles to the `List Item` component in the `Details` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Details` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) @@ -593,7 +593,7 @@ export class AppComponent { ##### 5. Backdrop Style -To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/angular/backdrop) +To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/angular/v4/backdrop) diff --git a/ui-kit/angular/v4/user-member-wrapper.mdx b/ui-kit/angular/v4/user-member-wrapper.mdx index 58ee5ab07..157af59ce 100644 --- a/ui-kit/angular/v4/user-member-wrapper.mdx +++ b/ui-kit/angular/v4/user-member-wrapper.mdx @@ -91,7 +91,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onItemClick @@ -345,7 +345,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `CometChatUserMemberWrapper` component does not produce any events. @@ -359,7 +359,7 @@ Using Style you can customize the look and feel of the component in your app, Th ##### 1. Avatar Style -If you want to apply customized styles to the `Avatar` component within the `UserMemberWrapper` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/avatar#avatar-style). +If you want to apply customized styles to the `Avatar` component within the `UserMemberWrapper` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/angular/v4/avatar#avatar-style). @@ -429,7 +429,7 @@ export class AppComponent { ##### 2. StatusIndicator Style -To apply customized styles to the Status Indicator component in the `UserMemberWrapper` Component, you can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the `UserMemberWrapper` Component, you can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) diff --git a/ui-kit/angular/v4/users-with-messages.mdx b/ui-kit/angular/v4/users-with-messages.mdx index e457ec500..68c5358a5 100644 --- a/ui-kit/angular/v4/users-with-messages.mdx +++ b/ui-kit/angular/v4/users-with-messages.mdx @@ -5,7 +5,7 @@ description: "Users With Messages — CometChat documentation." ## Overview -The UsersWithMessages is a [Composite Component](/ui-kit/angular/components-overview#components) encompassing components such as [Users](/ui-kit/angular/users) and [Messages](/ui-kit/angular/messages). Both of these component contributes to the functionality and structure of the overall UsersWithMessages component. +The UsersWithMessages is a [Composite Component](/ui-kit/angular/v4/components-overview#components) encompassing components such as [Users](/ui-kit/angular/v4/users) and [Messages](/ui-kit/angular/v4/messages). Both of these component contributes to the functionality and structure of the overall UsersWithMessages component. @@ -13,8 +13,8 @@ The UsersWithMessages is a [Composite Component](/ui-kit/angular/components-over | Components | Description | | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| [Users](/ui-kit/angular/users) | The `Users` component is designed to display a list of `User`. This essentially represents your recent conversation history. | -| [Messages](/ui-kit/angular/messages) | The `Messages` component is designed to manage the messaging interaction for individual `User's` conversations. | +| [Users](/ui-kit/angular/v4/users) | The `Users` component is designed to display a list of `User`. This essentially represents your recent conversation history. | +| [Messages](/ui-kit/angular/v4/messages) | The `Messages` component is designed to manage the messaging interaction for individual `User's` conversations. | ## Usage @@ -94,7 +94,7 @@ export class AppComponent implements OnInit{ ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onError @@ -155,7 +155,7 @@ export class AppComponent { *** -The UsersWithMessages component does not have much actions, its components - [Users](/ui-kit/angular/users) and [Messages](/ui-kit/angular/messages) - both have their own set of actions. +The UsersWithMessages component does not have much actions, its components - [Users](/ui-kit/angular/v4/users) and [Messages](/ui-kit/angular/v4/messages) - both have their own set of actions. The Action of the components can be overridden through the use of the [Configurations](#configurations) object of its components. Here is an example code snippet. @@ -229,7 +229,7 @@ export class AppComponent { The UsersWithMessages component overrides several actions from its components to reach its default behavior. The list of actions overridden by UsersWithMessages includes: -* [OnItemClick](/ui-kit/angular/users#2-onitemclick) : By overriding the `OnItemClick` of the Users Component, UsersWithMessages achieves navigation from [Users](/ui-kit/angular/users) to [Messages](/ui-kit/angular/messages) component. +* [OnItemClick](/ui-kit/angular/v4/users#2-onitemclick) : By overriding the `OnItemClick` of the Users Component, UsersWithMessages achieves navigation from [Users](/ui-kit/angular/v4/users) to [Messages](/ui-kit/angular/v4/messages) component. @@ -239,7 +239,7 @@ The UsersWithMessages component overrides several actions from its components to **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -While the UsersWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Users Filters](/ui-kit/angular/users#filters) and [Messages Filters](/ui-kit/angular/messages). +While the UsersWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Users Filters](/ui-kit/angular/v4/users#filters) and [Messages Filters](/ui-kit/angular/v4/messages). By utilizing the [Configurations](#configurations) object of its components, you can apply filters. @@ -303,7 +303,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The UsersWithMessages does not produce any events but its component does. @@ -383,7 +383,7 @@ export class AppComponent { *** -You can also customize its component styles. For more details on individual component styles, you can refer [Users Styles](/ui-kit/angular/users#style) and [Messages Styles](/ui-kit/angular/messages#1-messages-style). +You can also customize its component styles. For more details on individual component styles, you can refer [Users Styles](/ui-kit/angular/v4/users#style) and [Messages Styles](/ui-kit/angular/v4/messages#1-messages-style). Styles can be applied to SubComponents using their respective [configurations](#configurations). @@ -464,7 +464,7 @@ export class AppComponent { These are a set of **small functional customizations** that allow you to **fine-tune** the overall experience of the component. With these, you can **change text**, set **custom icons**, and toggle the **visibility** of UI elements. -you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the UsersWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/messages) component for the specified `User`. +you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the UsersWithMessages component. This will automatically direct you to the [Messages](/ui-kit/angular/v4/messages) component for the specified `User`. ##### user @@ -539,7 +539,7 @@ Below is a list of customizations along with corresponding code snippets: Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. -You can find the list of all Functionality customization of individual components in [Users](/ui-kit/angular/users#functionality) and [Messages](/ui-kit/angular/messages#functionality). +You can find the list of all Functionality customization of individual components in [Users](/ui-kit/angular/v4/users#functionality) and [Messages](/ui-kit/angular/v4/messages#functionality). **Example** @@ -681,17 +681,17 @@ export class AppComponent { *** -To find all the details on individual Component advance customization you can refer, [Users Advance](/ui-kit/angular/users#advance)and [Messages Advance](/ui-kit/angular/messages#advanced). +To find all the details on individual Component advance customization you can refer, [Users Advance](/ui-kit/angular/v4/users#advance)and [Messages Advance](/ui-kit/angular/v4/messages#advanced). UsersWithMessages uses advanced-level customization of both Users & Messages components to achieve its default behavior. -1. UsersWithMessages utilizes the [onItemClick](/ui-kit/angular/users#2-onitemclick) property of the `Users` subcomponent to navigate the user from [Users](/ui-kit/angular/users) to [Messages](/ui-kit/angular/messages) +1. UsersWithMessages utilizes the [onItemClick](/ui-kit/angular/v4/users#2-onitemclick) property of the `Users` subcomponent to navigate the user from [Users](/ui-kit/angular/v4/users) to [Messages](/ui-kit/angular/v4/messages) -2. UsersWithMessages utilizes the [menus](/ui-kit/angular/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/messages) to [Details](/ui-kit/angular/group-details) +2. UsersWithMessages utilizes the [menus](/ui-kit/angular/v4/messages#auxiliarymenu) of the `Messages` subcomponent to navigate from [Messages](/ui-kit/angular/v4/messages) to [Details](/ui-kit/angular/v4/group-details) @@ -705,7 +705,7 @@ When you override `onItemClick` and `menus`, the default behavior of UsersWithMe ## Configurations -[Configurations](/ui-kit/angular/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. +[Configurations](/ui-kit/angular/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component. UsersWithMessages has `Users` and `Messages` component. Hence, each of these components will have its individual \`Configuration\`\`. @@ -715,7 +715,7 @@ UsersWithMessages has `Users` and `Messages` component. Hence, each of these com You can customize the properties of the Users component by making use of the `usersConfiguration`. -All exposed properties of `UsersConfiguration` can be found under [Users](/ui-kit/angular/users#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `UsersConfiguration` can be found under [Users](/ui-kit/angular/v4/users#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** @@ -797,7 +797,7 @@ export class AppComponent { You can customize the properties of the Messages component by making use of the messagesConfiguration. -All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/messages#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. +All exposed properties of `MessagesConfiguration` can be found under [Messages](/ui-kit/angular/v4/messages#configuration). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. **Example** diff --git a/ui-kit/angular/v4/users.mdx b/ui-kit/angular/v4/users.mdx index b39add62c..2a86dd635 100644 --- a/ui-kit/angular/v4/users.mdx +++ b/ui-kit/angular/v4/users.mdx @@ -5,7 +5,7 @@ description: "Users — CometChat documentation." ## Overview -The Users is a [Component](/ui-kit/angular/components-overview#components), showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline. +The Users is a [Component](/ui-kit/angular/v4/components-overview#components), showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline. @@ -15,8 +15,8 @@ The Users component is composed of the following BaseComponents: | Components | Description | | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| [CometChatList](/ui-kit/angular/list) | a reusable container component having title, search box, customisable background and a List View | -| [CometChatListItem](/ui-kit/angular/list-item) | a component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view | +| [CometChatList](/ui-kit/angular/v4/list) | a reusable container component having title, search box, customisable background and a List View | +| [CometChatListItem](/ui-kit/angular/v4/list-item) | a component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view | *** @@ -97,7 +97,7 @@ export class AppComponent { ### Actions -[Actions](/ui-kit/angular/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/angular/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onSelect @@ -480,7 +480,7 @@ export class AppComponent { ### Events -[Events](/ui-kit/angular/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/angular/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. To handle events supported by Users you have to add corresponding listeners by using `CometChatUserEvents` @@ -592,7 +592,7 @@ List of properties exposed by UsersStyle ##### 2. Avatar Style -To apply customized styles to the `Avatar` component in the Users Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/avatar#avatar-style) +To apply customized styles to the `Avatar` component in the Users Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/angular/v4/avatar#avatar-style) @@ -653,7 +653,7 @@ export class AppComponent { ##### 3. StatusIndicator Style -To apply customized styles to the Status Indicator component in the Users Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/status-indicator) +To apply customized styles to the Status Indicator component in the Users Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/angular/v4/status-indicator) @@ -713,7 +713,7 @@ export class AppComponent { ##### 4. LisItem Style -To apply customized styles to the `List Item` component in the `Users` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/list-item) +To apply customized styles to the `List Item` component in the `Users` Component, you can use the following code snippet. For further insights on `List Item` Styles [refer](/ui-kit/angular/v4/list-item) diff --git a/ui-kit/angular/v4/video-bubble.mdx b/ui-kit/angular/v4/video-bubble.mdx index ed2250be3..30a372a58 100644 --- a/ui-kit/angular/v4/video-bubble.mdx +++ b/ui-kit/angular/v4/video-bubble.mdx @@ -14,7 +14,7 @@ description: "Video Bubble — CometChat documentation." | loop | boolean | When set to true, the video player will automatically seek back to the start upon reaching the end of the audio. | | muted | boolean | when set to true, the audio will be initially silenced. | | poster | string | A URL for an image to be shown while the video is downloading | -| videoStyle | [VideoBubbleStyle](/ui-kit/angular/video-bubble#videobubblestyle) | Styling properties and values of the element | +| videoStyle | [VideoBubbleStyle](/ui-kit/angular/v4/video-bubble#videobubblestyle) | Styling properties and values of the element | ## VideoBubbleStyle diff --git a/ui-kit/flutter/v4/ai-features.mdx b/ui-kit/flutter/v4/ai-features.mdx index 49f6348eb..e3e02fd80 100644 --- a/ui-kit/flutter/v4/ai-features.mdx +++ b/ui-kit/flutter/v4/ai-features.mdx @@ -114,9 +114,9 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c AI Assist Bots automate responses and prompt interaction in the chat. They can handle common queries, assist with tasks, and provide information, freeing up human resources for more complex issues. -For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](/ai-chatbots/bots). +For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html). -Once you have successfully activated the [AI Assist Bot](/ai-chatbots/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v4/message-composer) Widget of UI Kits. +Once you have successfully activated the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v4/message-composer) Widget of UI Kits. diff --git a/ui-kit/flutter/v4/extensions.mdx b/ui-kit/flutter/v4/extensions.mdx index 7aeb4e7ad..0d08bf8c1 100644 --- a/ui-kit/flutter/v4/extensions.mdx +++ b/ui-kit/flutter/v4/extensions.mdx @@ -152,7 +152,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v4/message-list) widget of UI Kits. @@ -171,7 +171,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v4/message-list) widget of UI Kits. @@ -190,7 +190,7 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v4/message-list) widget of UI Kits. diff --git a/ui-kit/flutter/v4/message-template.mdx b/ui-kit/flutter/v4/message-template.mdx index 4addec00c..79f570cc8 100644 --- a/ui-kit/flutter/v4/message-template.mdx +++ b/ui-kit/flutter/v4/message-template.mdx @@ -47,7 +47,7 @@ MessageTemplate provides you with methods that allow you to alter various proper Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category. - Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories. + Please refer to our guide on [Message Categories](/sdk/flutter/v4/message-structure-and-hierarchy) for a deeper understanding of message categories. diff --git a/ui-kit/flutter/v5/message-template.mdx b/ui-kit/flutter/v5/message-template.mdx index 7f3ea09fa..c9366a7cf 100644 --- a/ui-kit/flutter/v5/message-template.mdx +++ b/ui-kit/flutter/v5/message-template.mdx @@ -75,7 +75,7 @@ MessageTemplate provides you with methods that allow you to alter various proper Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category. - Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories. + Please refer to our guide on [Message Categories](/sdk/flutter/v4/message-structure-and-hierarchy) for a deeper understanding of message categories. diff --git a/ui-kit/ios/extensions.mdx b/ui-kit/ios/extensions.mdx index 5ddc144d2..c098dfed9 100644 --- a/ui-kit/ios/extensions.mdx +++ b/ui-kit/ios/extensions.mdx @@ -149,7 +149,7 @@ Automatically censor inappropriate and obscene words in messages. | Component | Setup Guide | |-----------|-------------| -| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](/moderation/legacy-extensions) | +| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) | ### Data Masking @@ -161,7 +161,7 @@ Automatically mask sensitive data like credit card numbers and phone numbers. | Component | Setup Guide | |-----------|-------------| -| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](/moderation/legacy-extensions) | +| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) | ### Image Moderation @@ -173,7 +173,7 @@ Detect and filter inappropriate or explicit images using AI/ML. | Component | Setup Guide | |-----------|-------------| -| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](/moderation/legacy-extensions) | +| [Message List](/ui-kit/ios/message-list) | [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html) | ## Extensions Summary diff --git a/ui-kit/ios/v4/ai-features.mdx b/ui-kit/ios/v4/ai-features.mdx index 6c8d5b8ad..5060f2994 100644 --- a/ui-kit/ios/v4/ai-features.mdx +++ b/ui-kit/ios/v4/ai-features.mdx @@ -51,9 +51,9 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c AI Assist Bots automate responses and prompt interaction in the chat. They can handle common queries, assist with tasks, and provide information, freeing up human resources for more complex issues. -For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](/ai-chatbots/bots). +For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html). -Once you have successfully activated the [AI Assist Bot](/ai-chatbots/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/v4/message-composer) Component of UI Kits. +Once you have successfully activated the [AI Assist Bot](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/v4/message-composer) Component of UI Kits. diff --git a/ui-kit/ios/v4/conversations-with-messages.mdx b/ui-kit/ios/v4/conversations-with-messages.mdx index 5700d57a8..6bef0a6b4 100644 --- a/ui-kit/ios/v4/conversations-with-messages.mdx +++ b/ui-kit/ios/v4/conversations-with-messages.mdx @@ -274,7 +274,7 @@ cometChatConversationsWithMessages.set(group: group) Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. -You can find the list of all Functionality customization of individual components in [Conversations](/ui-kit/ios/v4/conversations#functionality) , [Messages](/ui-kit/ios/v4/messages#functionality), and [Contacts](/ui-kit/ios/v4/Contacts) +You can find the list of all Functionality customization of individual components in [Conversations](/ui-kit/ios/v4/conversations#functionality) , [Messages](/ui-kit/ios/v4/messages#functionality), and [Contacts](/ui-kit/ios/v4/contacts) **Example** diff --git a/ui-kit/ios/v4/extensions.mdx b/ui-kit/ios/v4/extensions.mdx index df6d45c59..aea56cf9d 100644 --- a/ui-kit/ios/v4/extensions.mdx +++ b/ui-kit/ios/v4/extensions.mdx @@ -85,7 +85,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/v4/message-list) component of UI Kits. @@ -95,7 +95,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/v4/message-list) component of UI Kits. @@ -105,7 +105,7 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/v4/message-list) component of UI Kits. diff --git a/ui-kit/react-native/v4/extensions.mdx b/ui-kit/react-native/v4/extensions.mdx index 674a76d4b..fa437ab61 100644 --- a/ui-kit/react-native/v4/extensions.mdx +++ b/ui-kit/react-native/v4/extensions.mdx @@ -152,7 +152,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits. @@ -171,7 +171,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits. @@ -190,7 +190,7 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits. diff --git a/ui-kit/react/v4/extensions.mdx b/ui-kit/react/v4/extensions.mdx index fdd096782..25bf3b329 100644 --- a/ui-kit/react/v4/extensions.mdx +++ b/ui-kit/react/v4/extensions.mdx @@ -91,7 +91,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ ### Profanity Filter -The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/v4/message-list) component of UI Kits. @@ -101,7 +101,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co ### Data Masking -The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/v4/message-list) component of UI Kits. @@ -111,7 +111,7 @@ Once you have successfully activated the Data Masking Extension from your CometC ### Image Moderation -The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions). +The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](https://assets.cometchat.io/legacy-docs/moderation/legacy-extensions.html). Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/v4/message-list) component of UI Kits. diff --git a/ui-kit/react/v6/campaigns.mdx b/ui-kit/react/v6/campaigns.mdx index 5fbecdcda..d3b97b437 100644 --- a/ui-kit/react/v6/campaigns.mdx +++ b/ui-kit/react/v6/campaigns.mdx @@ -6,7 +6,7 @@ description: "Deliver targeted, rich notifications to users via an in-app notifi CometChat Campaigns enables you to send rich, interactive notifications to users through an in-app notification feed. Each notification is rendered as a native card using the **CometChat Cards** library — supporting images, text, buttons, layouts, and interactive actions. -Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react/v6/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. +Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react/v6/overview) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. diff --git a/ui-kit/react/v6/moved/builder-dir-structure.mdx b/ui-kit/react/v6/moved/builder-dir-structure.mdx index 873b3e22a..99d7aef73 100644 --- a/ui-kit/react/v6/moved/builder-dir-structure.mdx +++ b/ui-kit/react/v6/moved/builder-dir-structure.mdx @@ -210,5 +210,5 @@ This structured breakdown of the **CometChat UI Kit Builder directory** helps de For further customization and integration details, refer to: -* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. +* **[Builder Configuration File](/ui-kit/react/v6/moved/builder-settings)** – Learn how to customize your integration. * **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. diff --git a/ui-kit/react/v6/moved/builder-integration-nextjs.mdx b/ui-kit/react/v6/moved/builder-integration-nextjs.mdx index 63630f59f..4ab50f0a8 100644 --- a/ui-kit/react/v6/moved/builder-integration-nextjs.mdx +++ b/ui-kit/react/v6/moved/builder-integration-nextjs.mdx @@ -521,9 +521,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Builder Configuration File](/ui-kit/react/v6/moved/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/moved/builder-dir-structure)** – Understand the organization of the builder components. * **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. +* **[Additional Customizations](/ui-kit/react/v6/moved/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-integration-react-router.mdx b/ui-kit/react/v6/moved/builder-integration-react-router.mdx index 81f5582fb..7cf10d1ad 100644 --- a/ui-kit/react/v6/moved/builder-integration-react-router.mdx +++ b/ui-kit/react/v6/moved/builder-integration-react-router.mdx @@ -541,9 +541,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Builder Configuration File](/ui-kit/react/v6/moved/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/moved/builder-dir-structure)** – Understand the organization of the builder components. * **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. +* **[Additional Customizations](/ui-kit/react/v6/moved/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-integration.mdx b/ui-kit/react/v6/moved/builder-integration.mdx index ba4aa643e..e823bb96a 100644 --- a/ui-kit/react/v6/moved/builder-integration.mdx +++ b/ui-kit/react/v6/moved/builder-integration.mdx @@ -464,9 +464,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Builder Configuration File](/ui-kit/react/v6/moved/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/moved/builder-dir-structure)** – Understand the organization of the builder components. * **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. +* **[Additional Customizations](/ui-kit/react/v6/moved/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-settings.mdx b/ui-kit/react/v6/moved/builder-settings.mdx index 22189e9f8..c847ad72b 100644 --- a/ui-kit/react/v6/moved/builder-settings.mdx +++ b/ui-kit/react/v6/moved/builder-settings.mdx @@ -225,5 +225,5 @@ Use this guide as your go-to reference when: ## **Related Links** -* [Directory Structure](/ui-kit/react/v6/builder-dir-structure) +* [Directory Structure](/ui-kit/react/v6/moved/builder-dir-structure) * [Advanced Theming](/ui-kit/react/v6/theme) diff --git a/web-shared/ai-assist-bot-configuration.mdx b/web-shared/ai-assist-bot-configuration.mdx index baecc231d..eb7fb17ad 100644 --- a/web-shared/ai-assist-bot-configuration.mdx +++ b/web-shared/ai-assist-bot-configuration.mdx @@ -23,7 +23,7 @@ The `AIAssistBotConfiguration` has the below properties, | backIconURL | string | Custom back button icon url. | | loadingIconUrl | string | Custom loading icon url. | | errorIconURL | string | Custom error icon url. | -| apiConfiguration | (user?: CometChat.User, group?: CometChat.Group) => Promise\ | The `apiConfiguration` callback allows you to override the default logic of fetching conversation starters. The `apiConfiguration` callback passes the user/group object of the conversation. You can use the [SDK Method](/ai/bots) & pass additional configuration to customise the response. | +| apiConfiguration | (user?: CometChat.User, group?: CometChat.Group) => Promise\ | The `apiConfiguration` callback allows you to override the default logic of fetching conversation starters. The `apiConfiguration` callback passes the user/group object of the conversation. You can use the [SDK Method](https://assets.cometchat.io/legacy-docs/ai-chatbots/ai-bots/bots.html) & pass additional configuration to customise the response. | ### Usage diff --git a/widget/html/advanced.mdx b/widget/html/advanced.mdx index 94c66859d..e5a19465f 100644 --- a/widget/html/advanced.mdx +++ b/widget/html/advanced.mdx @@ -21,7 +21,7 @@ import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; Go back to the basic integration guide to set up the widget snippet. - + Using the older CometChat Widget? See the legacy integration guide.