From 299110891550108955bd0c5045aad277ac709cfc Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:16:26 +0530 Subject: [PATCH 1/9] docs: fix .mdx-suffixed relative links to extensionless absolute paths Mintlify does not resolve relative links that include the .mdx extension. Rewrites 18 links across 9 Angular UI Kit pages to absolute extensionless slugs, and corrects one link pointing at a non-existent message-composer page to cometchat-message-composer. Co-Authored-By: Claude Opus 4.8 (1M context) --- ui-kit/angular/api-reference/formatter-config-service.mdx | 6 +++--- ui-kit/angular/components/cometchat-call-buttons.mdx | 4 ++-- ui-kit/angular/components/cometchat-group-item.mdx | 2 +- ui-kit/angular/components/cometchat-group-member-item.mdx | 6 +++--- ui-kit/angular/components/cometchat-incoming-call.mdx | 2 +- ui-kit/angular/components/cometchat-message-composer.mdx | 6 +++--- ui-kit/angular/components/cometchat-outgoing-call.mdx | 4 ++-- ui-kit/angular/components/cometchat-user-item.mdx | 2 +- ui-kit/angular/guides/rich-text-formatting.mdx | 4 ++-- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/ui-kit/angular/api-reference/formatter-config-service.mdx b/ui-kit/angular/api-reference/formatter-config-service.mdx index a2cdc3eb6..5b232e30d 100644 --- a/ui-kit/angular/api-reference/formatter-config-service.mdx +++ b/ui-kit/angular/api-reference/formatter-config-service.mdx @@ -813,7 +813,7 @@ See [CometChatMessageList — Multiple Message Lists with Different Configuratio ## See Also -- [CometChatTextBubble Component](../components/cometchat-text-bubble.mdx) -- [CometChatMessageList Component](../components/cometchat-message-list.mdx) -- [CometChatConversations Component](../components/cometchat-conversations.mdx) +- [CometChatTextBubble Component](/ui-kit/angular/components/cometchat-text-bubble) +- [CometChatMessageList Component](/ui-kit/angular/components/cometchat-message-list) +- [CometChatConversations Component](/ui-kit/angular/components/cometchat-conversations) - [Rich Text Formatting Guide](/ui-kit/angular/guides/custom-text-formatter) diff --git a/ui-kit/angular/components/cometchat-call-buttons.mdx b/ui-kit/angular/components/cometchat-call-buttons.mdx index a7d0f41fc..3c7bcc81a 100644 --- a/ui-kit/angular/components/cometchat-call-buttons.mdx +++ b/ui-kit/angular/components/cometchat-call-buttons.mdx @@ -167,6 +167,6 @@ export class CustomCallSettingsComponent implements OnInit { ## Related Components -- [CometChatOutgoingCall](./cometchat-outgoing-call.mdx) — Displayed automatically when a call is initiated +- [CometChatOutgoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed automatically when a call is initiated - [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed automatically when a call is accepted -- [CometChatMessageHeader](./cometchat-message-header.mdx) — Typically hosts the call buttons +- [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) — Typically hosts the call buttons diff --git a/ui-kit/angular/components/cometchat-group-item.mdx b/ui-kit/angular/components/cometchat-group-item.mdx index 567bc8c1d..105881e01 100644 --- a/ui-kit/angular/components/cometchat-group-item.mdx +++ b/ui-kit/angular/components/cometchat-group-item.mdx @@ -155,6 +155,6 @@ Provide custom templates via inputs to override any visual section: ## Related Components -- [CometChatGroups](./cometchat-groups.mdx) — Parent list component that renders multiple group items +- [CometChatGroups](/ui-kit/angular/components/cometchat-groups) — Parent list component that renders multiple group items - [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the group avatar - [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu diff --git a/ui-kit/angular/components/cometchat-group-member-item.mdx b/ui-kit/angular/components/cometchat-group-member-item.mdx index 31494049c..1ace2be25 100644 --- a/ui-kit/angular/components/cometchat-group-member-item.mdx +++ b/ui-kit/angular/components/cometchat-group-member-item.mdx @@ -185,8 +185,8 @@ getContextMenuOptions(member: CometChat.GroupMember): CometChatOption[] { ## Related Components -- [CometChatGroupMembers](./cometchat-group-members.mdx) — Parent list component that renders multiple group member items +- [CometChatGroupMembers](/ui-kit/angular/components/cometchat-group-members) — Parent list component that renders multiple group member items - [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the member avatar - [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu -- [CometChatUserItem](./cometchat-user-item.mdx) — Similar component for rendering user items -- [CometChatGroupItem](./cometchat-group-item.mdx) — Similar component for rendering group items +- [CometChatUserItem](/ui-kit/angular/components/cometchat-user-item) — Similar component for rendering user items +- [CometChatGroupItem](/ui-kit/angular/components/cometchat-group-item) — Similar component for rendering group items diff --git a/ui-kit/angular/components/cometchat-incoming-call.mdx b/ui-kit/angular/components/cometchat-incoming-call.mdx index 15dbc27fd..9fdf73ac2 100644 --- a/ui-kit/angular/components/cometchat-incoming-call.mdx +++ b/ui-kit/angular/components/cometchat-incoming-call.mdx @@ -151,5 +151,5 @@ cometchat-incoming-call { ## Related Components - [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Rendered automatically after accepting a call -- [CometChatCallButtons](./cometchat-call-buttons.mdx) — Initiates outgoing calls +- [CometChatCallButtons](/ui-kit/angular/components/cometchat-call-buttons) — Initiates outgoing calls - [CometChatListItem](/ui-kit/angular/components/cometchat-user-item) — Used internally to render the caller information diff --git a/ui-kit/angular/components/cometchat-message-composer.mdx b/ui-kit/angular/components/cometchat-message-composer.mdx index bd2c4197b..ca65b9fef 100644 --- a/ui-kit/angular/components/cometchat-message-composer.mdx +++ b/ui-kit/angular/components/cometchat-message-composer.mdx @@ -1328,7 +1328,7 @@ import { EnterKeyBehavior } from '@cometchat/chat-uikit-angular'; ## See Also -- [CometChatMessageList](./cometchat-message-list.mdx) - Display messages in a conversation -- [CometChatConversations](./cometchat-conversations.mdx) - List of conversations -- [RichTextEditorService API](../api-reference/rich-text-editor-service.mdx) - Rich text editor service documentation +- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Display messages in a conversation +- [CometChatConversations](/ui-kit/angular/components/cometchat-conversations) - List of conversations +- [RichTextEditorService API](/ui-kit/angular/api-reference/rich-text-editor-service) - Rich text editor service documentation - [Rich Text Formatting Guide](/ui-kit/angular/guides/custom-text-formatter) - Comprehensive guide to rich text features diff --git a/ui-kit/angular/components/cometchat-outgoing-call.mdx b/ui-kit/angular/components/cometchat-outgoing-call.mdx index 73510c3b6..63a6d3afb 100644 --- a/ui-kit/angular/components/cometchat-outgoing-call.mdx +++ b/ui-kit/angular/components/cometchat-outgoing-call.mdx @@ -137,6 +137,6 @@ cometchat-outgoing-call { ## Related Components -- [CometChatCallButtons](./cometchat-call-buttons.mdx) — Parent component that triggers the outgoing call overlay +- [CometChatCallButtons](/ui-kit/angular/components/cometchat-call-buttons) — Parent component that triggers the outgoing call overlay - [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed after the call is accepted -- [CometChatIncomingCall](./cometchat-incoming-call.mdx) — Handles incoming call notifications +- [CometChatIncomingCall](/ui-kit/angular/components/cometchat-incoming-call) — Handles incoming call notifications diff --git a/ui-kit/angular/components/cometchat-user-item.mdx b/ui-kit/angular/components/cometchat-user-item.mdx index d6ad6a7c1..4c73b041c 100644 --- a/ui-kit/angular/components/cometchat-user-item.mdx +++ b/ui-kit/angular/components/cometchat-user-item.mdx @@ -151,6 +151,6 @@ Provide custom templates via inputs to override any visual section: ## Related Components -- [CometChatUsers](./cometchat-users.mdx) — Parent list component that renders multiple user items +- [CometChatUsers](/ui-kit/angular/components/cometchat-users) — Parent list component that renders multiple user items - [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the user avatar - [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx index 0ab7e2302..68c546ea6 100644 --- a/ui-kit/angular/guides/rich-text-formatting.mdx +++ b/ui-kit/angular/guides/rich-text-formatting.mdx @@ -638,5 +638,5 @@ this.editor = this.editorService.createEditor({ ## See Also -- [RichTextEditorService API Reference](../api-reference/rich-text-editor-service.mdx) -- [MessageComposer Component](../components/message-composer.mdx) +- [RichTextEditorService API Reference](/ui-kit/angular/api-reference/rich-text-editor-service) +- [MessageComposer Component](/ui-kit/angular/components/cometchat-message-composer) From 838d0ff60df584abd33d9a6aed1940b00e572a08 Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:17:20 +0530 Subject: [PATCH 2/9] docs: exclude only i386 (not arm64) from iOS simulator builds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Excluding arm64 from EXCLUDED_ARCHS breaks native simulator builds on Apple Silicon Macs (now effectively all dev machines). Switch the 7 RN/Flutter setup samples to exclude only the dead i386 arch — which the pages' own Warning callouts already recommended — and reword the callout to warn against re-adding arm64. Co-Authored-By: Claude Opus 4.8 (1M context) --- sdk/flutter/3.0/overview.mdx | 4 ++-- sdk/flutter/3.0/setup.mdx | 4 ++-- sdk/flutter/setup.mdx | 4 ++-- sdk/flutter/v4/setup.mdx | 4 ++-- ui-kit/react-native/call-features.mdx | 4 ++-- ui-kit/react-native/calling-integration.mdx | 4 ++-- ui-kit/react-native/v4/call-features.mdx | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/sdk/flutter/3.0/overview.mdx b/sdk/flutter/3.0/overview.mdx index c3123cff7..bc9bf7fec 100644 --- a/sdk/flutter/3.0/overview.mdx +++ b/sdk/flutter/3.0/overview.mdx @@ -65,7 +65,7 @@ flutter_additional_ios_build_settings(target) target.build_configurations.each do |build_configuration| -build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' +build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' end @@ -81,7 +81,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. 4. For iOS navigate to your iOS folder in terminal or CMD and do `pod install` . For apple chip system use rosetta terminal. diff --git a/sdk/flutter/3.0/setup.mdx b/sdk/flutter/3.0/setup.mdx index 9a9deb717..506f523b0 100644 --- a/sdk/flutter/3.0/setup.mdx +++ b/sdk/flutter/3.0/setup.mdx @@ -51,7 +51,7 @@ flutter_additional_ios_build_settings(target) target.build_configurations.each do |build_configuration| -build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' +build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' end @@ -66,7 +66,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. diff --git a/sdk/flutter/setup.mdx b/sdk/flutter/setup.mdx index b07e589e5..9873ddbc1 100644 --- a/sdk/flutter/setup.mdx +++ b/sdk/flutter/setup.mdx @@ -60,7 +60,7 @@ flutter_additional_ios_build_settings(target) target.build_configurations.each do |build_configuration| -build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' +build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' end @@ -76,7 +76,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. 3. For iOS, change the deployment target to `11` or higher. diff --git a/sdk/flutter/v4/setup.mdx b/sdk/flutter/v4/setup.mdx index 877c9e0e6..756b895c0 100644 --- a/sdk/flutter/v4/setup.mdx +++ b/sdk/flutter/v4/setup.mdx @@ -84,7 +84,7 @@ flutter_additional_ios_build_settings(target) target.build_configurations.each do |build_configuration| -build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' +build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' end @@ -98,7 +98,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. 2. Change the deployment target to `11` or higher. diff --git a/ui-kit/react-native/call-features.mdx b/ui-kit/react-native/call-features.mdx index c550d74c7..fb3180ce6 100644 --- a/ui-kit/react-native/call-features.mdx +++ b/ui-kit/react-native/call-features.mdx @@ -151,7 +151,7 @@ post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |build_configuration| build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0' - build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' + build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' build_configuration.build_settings['ENABLE_BITCODE'] = 'NO' end end @@ -163,7 +163,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. ## Add the Call Listeners diff --git a/ui-kit/react-native/calling-integration.mdx b/ui-kit/react-native/calling-integration.mdx index 70cc40246..d02bf4de4 100644 --- a/ui-kit/react-native/calling-integration.mdx +++ b/ui-kit/react-native/calling-integration.mdx @@ -93,7 +93,7 @@ post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |build_configuration| build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0' - build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' + build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' build_configuration.build_settings['ENABLE_BITCODE'] = 'NO' end end @@ -101,7 +101,7 @@ end ``` -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. ## Set Up Call Listeners diff --git a/ui-kit/react-native/v4/call-features.mdx b/ui-kit/react-native/v4/call-features.mdx index 4973a64b7..06954d7be 100644 --- a/ui-kit/react-native/v4/call-features.mdx +++ b/ui-kit/react-native/v4/call-features.mdx @@ -132,7 +132,7 @@ post_install do |installer| build_configuration.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0' - build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386' + build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386' build_configuration.build_settings['ENABLE_BITCODE'] = 'NO' end end @@ -144,7 +144,7 @@ end -**Apple Silicon (M1/M2/M3) users:** Excluding `arm64` from the simulator build prevents the app from running natively on Apple Silicon Macs. If you are developing on an Apple Silicon Mac, consider excluding only `i386` instead of `arm64 i386` to enable native simulator builds. +We exclude only the dead `i386` architecture so the app still builds and runs natively on Apple Silicon (M1/M2/M3) simulators. Do **not** add `arm64` to this exclusion — doing so breaks native simulator builds on Apple Silicon Macs. ## Add the Call Listeners From 6afad2adb3de25a4cae414ddf4ffafef660c0a9b Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:18:06 +0530 Subject: [PATCH 3/9] docs: add frontmatter to 3 Angular UIKit reference/guide pages rich-text-editor-service, formatter-config-service, and rich-text-formatting had no YAML frontmatter, so Mintlify fell back to the filename as title and produced no meta description. Add title + description and drop the now-duplicate body H1. (snippets/ partials intentionally keep no frontmatter.) Co-Authored-By: Claude Opus 4.8 (1M context) --- ui-kit/angular/api-reference/formatter-config-service.mdx | 4 ++++ ui-kit/angular/api-reference/rich-text-editor-service.mdx | 5 ++++- ui-kit/angular/guides/rich-text-formatting.mdx | 5 ++++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/ui-kit/angular/api-reference/formatter-config-service.mdx b/ui-kit/angular/api-reference/formatter-config-service.mdx index 5b232e30d..1e1173f95 100644 --- a/ui-kit/angular/api-reference/formatter-config-service.mdx +++ b/ui-kit/angular/api-reference/formatter-config-service.mdx @@ -1,3 +1,7 @@ +--- +title: "FormatterConfigService API Reference" +description: "Centralized Angular service for managing default text formatters in the CometChat UIKit — configure mentions, URLs, and formatting once and apply them across all text-displaying components." +--- The `FormatterConfigService` is a centralized Angular service for managing default text formatters across the CometChat UIKit. It provides a single source of truth for formatter configuration, allowing you to set formatters once and have them automatically applied across all text-displaying components. diff --git a/ui-kit/angular/api-reference/rich-text-editor-service.mdx b/ui-kit/angular/api-reference/rich-text-editor-service.mdx index ebcb49dc5..75d805398 100644 --- a/ui-kit/angular/api-reference/rich-text-editor-service.mdx +++ b/ui-kit/angular/api-reference/rich-text-editor-service.mdx @@ -1,4 +1,7 @@ -# RichTextEditorService API Reference +--- +title: "RichTextEditorService API Reference" +description: "Angular service providing rich text editing in the CometChat Angular UIKit — bold, italic, underline, strikethrough, and code formatting via native browser APIs with no external dependencies." +--- The `RichTextEditorService` is an Angular service that provides rich text editing capabilities using native browser APIs. It is a lightweight, custom implementation with no external dependencies. diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx index 68c546ea6..e15e99061 100644 --- a/ui-kit/angular/guides/rich-text-formatting.mdx +++ b/ui-kit/angular/guides/rich-text-formatting.mdx @@ -1,4 +1,7 @@ -# Rich Text Formatting Guide +--- +title: "Rich Text Formatting Guide" +description: "Use rich text formatting in the CometChat Angular v5 UIKit — text styling, mentions, and links via a lightweight rich text editor built on native browser APIs." +--- This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more. From fa1842c9c00f0998a57c70214618d43614c11588 Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:19:59 +0530 Subject: [PATCH 4/9] docs: repair 620 intra-version broken links (missing version segment) Legacy UI Kit pages link to sibling pages without the version segment (e.g. a /ui-kit/angular/v4/ page links to /ui-kit/angular/avatar instead of /ui-kit/angular/v4/avatar). Repoint each to the same-platform, same-version target that actually exists; anchors preserved. Resolver only applied a fix when exactly one candidate shared the source's platform AND version prefix. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../v4/additional-message-filtering.mdx | 4 +- sdk/flutter/v4/error-codes.mdx | 2 +- sdk/flutter/v4/groups-overview.mdx | 2 +- sdk/flutter/v4/key-concepts.mdx | 2 +- .../v4/message-structure-and-hierarchy.mdx | 2 +- sdk/flutter/v4/troubleshooting.mdx | 4 +- ui-kit/angular/v4/action-sheet.mdx | 2 +- ui-kit/angular/v4/ai-features.mdx | 8 +-- ui-kit/angular/v4/audio-bubble.mdx | 2 +- ui-kit/angular/v4/backdrop.mdx | 2 +- ui-kit/angular/v4/badge.mdx | 2 +- ui-kit/angular/v4/button-group.mdx | 2 +- ui-kit/angular/v4/call-buttons.mdx | 18 +++---- ui-kit/angular/v4/call-features.mdx | 12 ++--- ui-kit/angular/v4/call-log-details.mdx | 22 ++++---- ui-kit/angular/v4/call-log-history.mdx | 12 ++--- ui-kit/angular/v4/call-log-participants.mdx | 14 ++--- ui-kit/angular/v4/call-log-recording.mdx | 12 ++--- ui-kit/angular/v4/call-log-with-details.mdx | 30 +++++------ ui-kit/angular/v4/call-logs.mdx | 20 +++---- ui-kit/angular/v4/checkbox.mdx | 2 +- ui-kit/angular/v4/cometchat-quick-view.mdx | 2 +- ui-kit/angular/v4/confirm-dialog.mdx | 2 +- .../v4/conversations-with-messages.mdx | 42 +++++++-------- ui-kit/angular/v4/conversations.mdx | 22 ++++---- ui-kit/angular/v4/core-features.mdx | 46 ++++++++-------- ui-kit/angular/v4/create-group.mdx | 10 ++-- ui-kit/angular/v4/custom-message-guide.mdx | 10 ++-- .../v4/custom-text-formatter-guide.mdx | 2 +- ui-kit/angular/v4/date.mdx | 2 +- ui-kit/angular/v4/document-bubble.mdx | 2 +- ui-kit/angular/v4/dropdown.mdx | 2 +- ui-kit/angular/v4/emoji-keyboard.mdx | 2 +- ui-kit/angular/v4/extensions.mdx | 22 ++++---- ui-kit/angular/v4/file-bubble.mdx | 2 +- ui-kit/angular/v4/getting-started.mdx | 4 +- ui-kit/angular/v4/group-add-members.mdx | 14 ++--- ui-kit/angular/v4/group-banned-members.mdx | 12 ++--- ui-kit/angular/v4/group-details.mdx | 24 ++++----- ui-kit/angular/v4/group-members.mdx | 12 ++--- .../angular/v4/group-transfer-ownership.mdx | 18 +++---- ui-kit/angular/v4/groups-with-messages.mdx | 38 ++++++------- ui-kit/angular/v4/groups.mdx | 16 +++--- ui-kit/angular/v4/icon-button.mdx | 2 +- ui-kit/angular/v4/icon.mdx | 2 +- ui-kit/angular/v4/image-bubble.mdx | 2 +- ui-kit/angular/v4/incoming-call.mdx | 24 ++++----- ui-kit/angular/v4/input.mdx | 2 +- ui-kit/angular/v4/join-protected-group.mdx | 10 ++-- ui-kit/angular/v4/label.mdx | 2 +- ui-kit/angular/v4/list-item.mdx | 6 +-- ui-kit/angular/v4/list.mdx | 6 +-- ui-kit/angular/v4/loader.mdx | 2 +- .../angular/v4/mentions-formatter-guide.mdx | 2 +- ui-kit/angular/v4/message-composer.mdx | 26 ++++----- ui-kit/angular/v4/message-header.mdx | 14 ++--- ui-kit/angular/v4/message-information.mdx | 10 ++-- ui-kit/angular/v4/message-input.mdx | 4 +- ui-kit/angular/v4/message-list.mdx | 26 ++++----- ui-kit/angular/v4/message-template.mdx | 8 +-- ui-kit/angular/v4/messages.mdx | 54 +++++++++---------- ui-kit/angular/v4/modal.mdx | 2 +- ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx | 4 +- .../v4/new-attachment-option-guide.mdx | 6 +-- .../angular/v4/new-message-option-guide.mdx | 4 +- ui-kit/angular/v4/ongoing-call.mdx | 6 +-- ui-kit/angular/v4/outgoing-call.mdx | 8 +-- ui-kit/angular/v4/overview.mdx | 2 +- ui-kit/angular/v4/pop-over.mdx | 4 +- ui-kit/angular/v4/radio-button.mdx | 2 +- ui-kit/angular/v4/reaction-info.mdx | 4 +- ui-kit/angular/v4/reaction-list.mdx | 8 +-- ui-kit/angular/v4/reaction.mdx | 18 +++---- ui-kit/angular/v4/search-input.mdx | 4 +- .../angular/v4/shortcut-formatter-guide.mdx | 4 +- ui-kit/angular/v4/singleselect.mdx | 2 +- ui-kit/angular/v4/text-bubble.mdx | 2 +- ui-kit/angular/v4/threaded-messages.mdx | 22 ++++---- ui-kit/angular/v4/user-details.mdx | 14 ++--- ui-kit/angular/v4/user-member-wrapper.mdx | 8 +-- ui-kit/angular/v4/users-with-messages.mdx | 34 ++++++------ ui-kit/angular/v4/users.mdx | 16 +++--- ui-kit/angular/v4/video-bubble.mdx | 2 +- 83 files changed, 430 insertions(+), 430 deletions(-) diff --git a/sdk/flutter/v4/additional-message-filtering.mdx b/sdk/flutter/v4/additional-message-filtering.mdx index 35f03b472..30c5db1ad 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. diff --git a/sdk/flutter/v4/error-codes.mdx b/sdk/flutter/v4/error-codes.mdx index 06e093208..aeef7b6de 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 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/key-concepts.mdx b/sdk/flutter/v4/key-concepts.mdx index 4e2d9e640..baaeee539 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 diff --git a/sdk/flutter/v4/message-structure-and-hierarchy.mdx b/sdk/flutter/v4/message-structure-and-hierarchy.mdx index fe4c22aeb..400cb87a1 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 diff --git a/sdk/flutter/v4/troubleshooting.mdx b/sdk/flutter/v4/troubleshooting.mdx index de534d190..327431231 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 | 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..907b4bf63 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. @@ -91,7 +91,7 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ 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). -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. @@ -101,7 +101,7 @@ Once you have successfully activated the Profanity Filter Extension from your Co 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). -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. @@ -111,7 +111,7 @@ Once you have successfully activated the Data Masking Extension from your CometC 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). -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 From 3ea8b9b26db7eabbe392b5932ed7a990b170278f Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:21:50 +0530 Subject: [PATCH 5/9] docs: fix remaining unambiguous broken links - angular search/search-messages: point bare /accessibility, /events, /integration at their /ui-kit/angular/ pages - ios v4 conversations-with-messages: fix case-sensitive /Contacts -> /contacts - calls flutter setup: point calling-integration link at the v5 page that exists - react v7 components-overview & guide-message-privately: drop stale cometchat- prefix (users/groups/group-members) and fix ai-assistant -> ai-assistant-chat Co-Authored-By: Claude Opus 4.8 (1M context) --- calls/flutter/setup.mdx | 2 +- ui-kit/angular/components/cometchat-search.mdx | 4 ++-- ui-kit/angular/guides/search-messages.mdx | 2 +- ui-kit/ios/v4/conversations-with-messages.mdx | 2 +- ui-kit/react/v7/components-overview.mdx | 8 ++++---- ui-kit/react/v7/guide-message-privately.mdx | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/calls/flutter/setup.mdx b/calls/flutter/setup.mdx index 36050b780..ae3f287a9 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/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/guides/search-messages.mdx b/ui-kit/angular/guides/search-messages.mdx index 7303d0891..58738b862 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). --- 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/react/v7/components-overview.mdx b/ui-kit/react/v7/components-overview.mdx index 7226b30c0..addb13f4d 100644 --- a/ui-kit/react/v7/components-overview.mdx +++ b/ui-kit/react/v7/components-overview.mdx @@ -122,9 +122,9 @@ All feature components are imported from `@cometchat/chat-uikit-react`. | Component | Purpose | Page | | --- | --- | --- | | `CometChatConversations` | Scrollable list of recent conversations with real-time updates | [Conversations](/ui-kit/react/v7/components/conversations) | -| `CometChatUsers` | Searchable list of users with selection support | [Users](/ui-kit/react/v7/components/cometchat-users) | -| `CometChatGroups` | Searchable list of groups with selection support | [Groups](/ui-kit/react/v7/components/cometchat-groups) | -| `CometChatGroupMembers` | List of group members with role-based actions | [Group Members](/ui-kit/react/v7/components/cometchat-group-members) | +| `CometChatUsers` | Searchable list of users with selection support | [Users](/ui-kit/react/v7/components/users) | +| `CometChatGroups` | Searchable list of groups with selection support | [Groups](/ui-kit/react/v7/components/groups) | +| `CometChatGroupMembers` | List of group members with role-based actions | [Group Members](/ui-kit/react/v7/components/group-members) | ### Messages @@ -154,7 +154,7 @@ All feature components are imported from `@cometchat/chat-uikit-react`. | Component | Purpose | Page | | --- | --- | --- | | `CometChatSearch` | Unified search across conversations and messages | [Search](/ui-kit/react/v7/components/search) | -| `CometChatAIAssistantChat` | AI agent chat with streaming, suggestions, and history | [AI Assistant](/ui-kit/react/v7/components/ai-assistant) | +| `CometChatAIAssistantChat` | AI agent chat with streaming, suggestions, and history | [AI Assistant](/ui-kit/react/v7/components/ai-assistant-chat) | --- diff --git a/ui-kit/react/v7/guide-message-privately.mdx b/ui-kit/react/v7/guide-message-privately.mdx index 3f16d7648..e98740cb6 100644 --- a/ui-kit/react/v7/guide-message-privately.mdx +++ b/ui-kit/react/v7/guide-message-privately.mdx @@ -272,5 +272,5 @@ export default App; - [Message Composer](/ui-kit/react/v7/components/message-composer) — customize the composer for private chats - [Conversations](/ui-kit/react/v7/components/conversations) — manage the conversations list -- [Users](/ui-kit/react/v7/components/cometchat-users) — browse and select users directly +- [Users](/ui-kit/react/v7/components/users) — browse and select users directly - [CometChatProvider](/ui-kit/react/v7/cometchat-provider) — learn about provider configuration From da2df298e715ebaae5fcbd12eb3370c8aa438506 Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:39:43 +0530 Subject: [PATCH 6/9] docs: resolve final 7 broken links with judgment calls - react/react-native/v6 campaigns: point 'UI Kit integration' at the in-version UI Kit overview (the getting-started hub) - flutter v4/v5 message-template: 'Message Categories' -> v4 SDK structure page (v4) and messaging-overview (v5, no structure page exists in current SDK) - react v7 components-overview: unlink CallButtons (v7 component page not yet authored) with a 'coming soon' note instead of a 404 - sdk/android ai-chatbots: bare /ai-chatbots has no page (/overview is a legacy external redirect) -> point to /ai-chatbots/custom-bots Remaining broken link is a template placeholder in the abandoned .kiro/ dir. Co-Authored-By: Claude Opus 4.8 (1M context) --- sdk/android/ai-chatbots-overview.mdx | 2 +- ui-kit/flutter/v4/message-template.mdx | 2 +- ui-kit/flutter/v5/message-template.mdx | 2 +- ui-kit/react-native/campaigns.mdx | 2 +- ui-kit/react/campaigns.mdx | 2 +- ui-kit/react/v6/campaigns.mdx | 2 +- ui-kit/react/v7/components-overview.mdx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/sdk/android/ai-chatbots-overview.mdx b/sdk/android/ai-chatbots-overview.mdx index d77b05e36..f3803a27e 100644 --- a/sdk/android/ai-chatbots-overview.mdx +++ b/sdk/android/ai-chatbots-overview.mdx @@ -5,6 +5,6 @@ description: "Implement custom AI chatbots for automated conversations in your A url: "/ai-chatbots/overview" --- -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). +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/custom-bots). For message payload structures (AIAssistantMessage, AIToolArgumentMessage, AIToolResultMessage), see the [AI Agents](/sdk/android/ai-agents#agentic-message-payload-structures) page. 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..a177b7068 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/messaging-overview) for a deeper understanding of message categories. diff --git a/ui-kit/react-native/campaigns.mdx b/ui-kit/react-native/campaigns.mdx index ff6d26c24..d45e81990 100644 --- a/ui-kit/react-native/campaigns.mdx +++ b/ui-kit/react-native/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-native/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. +Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react-native/overview) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. diff --git a/ui-kit/react/campaigns.mdx b/ui-kit/react/campaigns.mdx index 989cdb05e..e5bae65fa 100644 --- a/ui-kit/react/campaigns.mdx +++ b/ui-kit/react/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/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. +Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react/overview) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. diff --git a/ui-kit/react/v6/campaigns.mdx b/ui-kit/react/v6/campaigns.mdx index 989cdb05e..98d7e1c72 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/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/v7/components-overview.mdx b/ui-kit/react/v7/components-overview.mdx index addb13f4d..4efdb170b 100644 --- a/ui-kit/react/v7/components-overview.mdx +++ b/ui-kit/react/v7/components-overview.mdx @@ -144,7 +144,7 @@ All feature components are imported from `@cometchat/chat-uikit-react`. | Component | Purpose | Page | | --- | --- | --- | -| `CometChatCallButtons` | Voice and video call initiation buttons | [Call Buttons](/ui-kit/react/v7/components/call-buttons) | +| `CometChatCallButtons` | Voice and video call initiation buttons | Call Buttons _(page coming soon)_ | | `CometChatIncomingCall` | Incoming call notification with accept/decline | [Incoming Call](/ui-kit/react/v7/components/incoming-call) | | `CometChatOutgoingCall` | Outgoing call screen with cancel control | [Outgoing Call](/ui-kit/react/v7/components/outgoing-call) | | `CometChatCallLogs` | Scrollable list of call history | [Call Logs](/ui-kit/react/v7/components/call-logs) | From e699d7fb5507f40de3b11311ee94f72c0eed6e5f Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:43:07 +0530 Subject: [PATCH 7/9] docs: demote duplicate body H1 to H2 on two ai-agents pages sdk/flutter/ai-agents and sdk/android/v5/ai-agents each had a body '# AI Agents Overview' H1 that duplicated the frontmatter title (Mintlify renders the title as the page H1). Demote to '## Overview'. Code-block-aware scan now reports zero multiple-H1 files. Co-Authored-By: Claude Opus 4.8 (1M context) --- sdk/android/v5/ai-agents.mdx | 2 +- sdk/flutter/ai-agents.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sdk/android/v5/ai-agents.mdx b/sdk/android/v5/ai-agents.mdx index 853da43a7..957d277cf 100644 --- a/sdk/android/v5/ai-agents.mdx +++ b/sdk/android/v5/ai-agents.mdx @@ -2,7 +2,7 @@ title: "AI Agents" --- -# AI Agents Overview +## Overview AI Agents enable intelligent, automated interactions within your application. They can process user messages, trigger tools, and respond with contextually relevant information. For a broader introduction, see the [AI Agents section](/ai-agents). diff --git a/sdk/flutter/ai-agents.mdx b/sdk/flutter/ai-agents.mdx index 087b6bceb..b898e4006 100644 --- a/sdk/flutter/ai-agents.mdx +++ b/sdk/flutter/ai-agents.mdx @@ -3,7 +3,7 @@ title: "AI Agents" description: "Learn how to integrate AI Agents in your Flutter app to process messages, trigger tools, and respond with context." --- -# AI Agents Overview +## Overview AI Agents enable intelligent, automated interactions within your application. They can process user messages, trigger tools, and respond with contextually relevant information. For a broader introduction, see the [AI Agents section](/ai-agents). From 1f6982f3f348afb8b9155e0fc0e82d94495824df Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:48:22 +0530 Subject: [PATCH 8/9] docs: repair garbled code fences that broke rendering in 5 SDK/agent pages A bad migration mashed the opening fence + code + closing fence onto shared lines (e.g. '```javascript let limit = 30,' ... '.build(); ```'). Because the closing ``` was not on its own line, CommonMark never closed the block, so it swallowed the following / markup and prose until the next fence. Relocate the fence markers onto their own lines (code text untouched) in retrieve-conversations, receive-message, retrieve-group-members, block-users, and mastra-runtime-context. All fence counts now balanced; zero inline-closing fences remain. Co-Authored-By: Claude Opus 4.8 (1M context) --- ai-agents/mastra-runtime-context.mdx | 4 +-- sdk/javascript/block-users.mdx | 12 ++++--- sdk/javascript/receive-message.mdx | 12 ++++--- sdk/javascript/retrieve-conversations.mdx | 42 +++++++++++++++-------- sdk/javascript/retrieve-group-members.mdx | 6 ++-- 5 files changed, 50 insertions(+), 26 deletions(-) diff --git a/ai-agents/mastra-runtime-context.mdx b/ai-agents/mastra-runtime-context.mdx index 33a807e54..3542b3080 100644 --- a/ai-agents/mastra-runtime-context.mdx +++ b/ai-agents/mastra-runtime-context.mdx @@ -183,7 +183,7 @@ export const adminTool = createTool({ // Proceed with admin action return performAdminAction(action); } -});``` +}); ``` ### Session Management @@ -207,7 +207,7 @@ export const sessionTool = createTool({ preferences: messageMetadata.userPreferences || {} }; } -});``` +}); ``` ### Custom Validation Patterns diff --git a/sdk/javascript/block-users.mdx b/sdk/javascript/block-users.mdx index c6295b621..f0f06ed91 100644 --- a/sdk/javascript/block-users.mdx +++ b/sdk/javascript/block-users.mdx @@ -189,10 +189,12 @@ let blockedUsersRequest: CometChat.BlockedUsersRequest = new CometChat.BlockedUs - ```javascript let limit = 30; let blockedUsersRequest = new + ```javascript + let limit = 30; let blockedUsersRequest = new CometChat.BlockedUsersRequestBuilder() .setLimit(limit) .setDirection(CometChat.BlockedUsersRequest.directions.BLOCKED_BY_ME) - .build(); ``` + .build(); + ``` @@ -213,10 +215,12 @@ let blockedUsersRequest = new CometChat.BlockedUsersRequestBuilder() - ```javascript let limit = 30; let blockedUsersRequest = new + ```javascript + let limit = 30; let blockedUsersRequest = new CometChat.BlockedUsersRequestBuilder() .setLimit(limit) .setDirection(CometChat.BlockedUsersRequest.directions.BLOCKED_BY_ME) - .build(); ``` + .build(); + ``` diff --git a/sdk/javascript/receive-message.mdx b/sdk/javascript/receive-message.mdx index 3ecb4256b..6c4140063 100644 --- a/sdk/javascript/receive-message.mdx +++ b/sdk/javascript/receive-message.mdx @@ -389,18 +389,22 @@ Pass `true` as the last argument to any of the methods above: - ```typescript CometChat.getUnreadMessageCountForUser(UID, true); + ```typescript + CometChat.getUnreadMessageCountForUser(UID, true); CometChat.getUnreadMessageCountForGroup(GUID, true); CometChat.getUnreadMessageCount(true); CometChat.getUnreadMessageCountForAllUsers(true); - CometChat.getUnreadMessageCountForAllGroups(true); ``` + CometChat.getUnreadMessageCountForAllGroups(true); + ``` - ```javascript CometChat.getUnreadMessageCountForUser(UID, true); + ```javascript + CometChat.getUnreadMessageCountForUser(UID, true); CometChat.getUnreadMessageCountForGroup(GUID, true); CometChat.getUnreadMessageCount(true); CometChat.getUnreadMessageCountForAllUsers(true); - CometChat.getUnreadMessageCountForAllGroups(true); ``` + CometChat.getUnreadMessageCountForAllGroups(true); + ``` diff --git a/sdk/javascript/retrieve-conversations.mdx b/sdk/javascript/retrieve-conversations.mdx index b014834de..a2e7c7c7a 100644 --- a/sdk/javascript/retrieve-conversations.mdx +++ b/sdk/javascript/retrieve-conversations.mdx @@ -59,9 +59,11 @@ let limit: number = 30, - ```javascript let limit = 30, conversationType= "group", conversationRequest= + ```javascript + let limit = 30, conversationType= "group", conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) - .setConversationType(conversationType) .build(); ``` + .setConversationType(conversationType) .build(); + ``` @@ -92,9 +94,11 @@ let limit: number = 30, - ```javascript let limit = 30, conversationRequest= new + ```javascript + let limit = 30, conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) - .withUserAndGroupTags(true) .build(); ``` + .withUserAndGroupTags(true) .build(); + ``` @@ -124,9 +128,11 @@ let limit: number = 30, - ```javascript let limit = 30, userTags= ["tag1"], conversationRequest= new + ```javascript + let limit = 30, userTags= ["tag1"], conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) - .setUserTags(userTags) .build(); ``` + .setUserTags(userTags) .build(); + ``` @@ -156,9 +162,11 @@ let limit: number = 30, - ```javascript let limit = 30, groupTags= ["tag1"], conversationRequest= new + ```javascript + let limit = 30, groupTags= ["tag1"], conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) - .setGroupTags(groupTags) .build(); ``` + .setGroupTags(groupTags) .build(); + ``` @@ -187,9 +195,11 @@ conversationRequest: CometChat.ConversationsRequest = new CometChat.Conversation - ```javascript let limit = 30, conversationRequest= new + ```javascript + let limit = 30, conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) .withTags(true) - .build(); ``` + .build(); + ``` @@ -217,9 +227,11 @@ let limit: number = 30, - ```javascript let limit = 30, tags= ["archivedChat"], conversationRequest= new + ```javascript + let limit = 30, tags= ["archivedChat"], conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) .setTags(tags) - .build(); ``` + .build(); + ``` @@ -418,9 +430,11 @@ let limit: number = 30, - ```javascript let limit = 30, conversationRequest= new + ```javascript + let limit = 30, conversationRequest= new CometChat.ConversationsRequestBuilder() .setLimit(limit) .setOnlyAgentic(true) - .build(); ``` + .build(); + ``` diff --git a/sdk/javascript/retrieve-group-members.mdx b/sdk/javascript/retrieve-group-members.mdx index 0c1d34d5f..cd44898bd 100644 --- a/sdk/javascript/retrieve-group-members.mdx +++ b/sdk/javascript/retrieve-group-members.mdx @@ -89,10 +89,12 @@ let groupMembersRequest: CometChat.GroupMembersRequest = new CometChat.GroupMemb - ```javascript let GUID = "GUID"; let limit = 30; let scopes = ["admin", + ```javascript + let GUID = "GUID"; let limit = 30; let scopes = ["admin", "moderator"]; let groupMembersRequest = new CometChat.GroupMembersRequestBuilder(GUID) .setLimit(limit) .setScopes(scopes) - .build(); ``` + .build(); + ``` From 3682bfecab36ef8cda39991d4e88e37c28bf236f Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Mon, 15 Jun 2026 02:51:46 +0530 Subject: [PATCH 9/9] docs: add SEO/AEO meta descriptions to 55 pages missing one 54 Android SDK v5 pages plus fundamentals/webhooks-overview had no frontmatter description, so they shipped with no meta description for search/AI answer engines. Add a tailored 60-160 char description to each, derived from the page's title and intro. (3 link/ nav stubs intentionally left minimal.) Co-Authored-By: Claude Opus 4.8 (1M context) --- fundamentals/webhooks-overview.mdx | 1 + sdk/android/v5/additional-message-filtering.mdx | 1 + sdk/android/v5/advanced-overview.mdx | 1 + sdk/android/v5/ai-agents.mdx | 1 + sdk/android/v5/ai-chatbots-overview.mdx | 1 + sdk/android/v5/ai-moderation.mdx | 1 + sdk/android/v5/ai-user-copilot-overview.mdx | 1 + sdk/android/v5/android-overview.mdx | 1 + sdk/android/v5/authentication-overview.mdx | 1 + sdk/android/v5/block-users.mdx | 1 + sdk/android/v5/campaigns.mdx | 1 + sdk/android/v5/changelog.mdx | 1 + sdk/android/v5/connection-behaviour.mdx | 1 + sdk/android/v5/connection-status.mdx | 1 + sdk/android/v5/create-group.mdx | 1 + sdk/android/v5/delete-conversation.mdx | 1 + sdk/android/v5/delete-group.mdx | 1 + sdk/android/v5/delete-message.mdx | 1 + sdk/android/v5/delivery-read-receipts.mdx | 1 + sdk/android/v5/edit-message.mdx | 1 + sdk/android/v5/extensions-overview.mdx | 1 + sdk/android/v5/flag-message.mdx | 1 + sdk/android/v5/group-add-members.mdx | 1 + sdk/android/v5/group-change-member-scope.mdx | 1 + sdk/android/v5/group-kick-member.mdx | 1 + sdk/android/v5/groups-overview.mdx | 1 + sdk/android/v5/interactive-messages.mdx | 1 + sdk/android/v5/join-group.mdx | 1 + sdk/android/v5/key-concepts.mdx | 1 + sdk/android/v5/leave-group.mdx | 1 + sdk/android/v5/login-listeners.mdx | 1 + sdk/android/v5/mentions.mdx | 1 + sdk/android/v5/message-structure-and-hierarchy.mdx | 1 + sdk/android/v5/messaging-overview.mdx | 1 + sdk/android/v5/publishing-app-on-playstore.mdx | 1 + sdk/android/v5/rate-limits.mdx | 1 + sdk/android/v5/reactions.mdx | 1 + sdk/android/v5/real-time-listeners.mdx | 1 + sdk/android/v5/receive-messages.mdx | 1 + sdk/android/v5/resources-overview.mdx | 1 + sdk/android/v5/retrieve-conversations.mdx | 1 + sdk/android/v5/retrieve-group-members.mdx | 1 + sdk/android/v5/retrieve-groups.mdx | 1 + sdk/android/v5/retrieve-users.mdx | 1 + sdk/android/v5/send-message.mdx | 1 + sdk/android/v5/setup.mdx | 1 + sdk/android/v5/threaded-messages.mdx | 1 + sdk/android/v5/transfer-group-ownership.mdx | 1 + sdk/android/v5/transient-messages.mdx | 1 + sdk/android/v5/typing-indicators.mdx | 1 + sdk/android/v5/update-group.mdx | 1 + sdk/android/v5/user-management.mdx | 1 + sdk/android/v5/user-presence.mdx | 1 + sdk/android/v5/users-overview.mdx | 1 + sdk/android/v5/webhooks-overview.mdx | 1 + 55 files changed, 55 insertions(+) diff --git a/fundamentals/webhooks-overview.mdx b/fundamentals/webhooks-overview.mdx index 184619b43..741f3e4f6 100644 --- a/fundamentals/webhooks-overview.mdx +++ b/fundamentals/webhooks-overview.mdx @@ -1,5 +1,6 @@ --- title: "Webhooks Overview" +description: "Learn how CometChat webhooks deliver real-time, event-driven HTTP POST callbacks to your server for messages, user actions, group updates, calls, and moderation." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/additional-message-filtering.mdx b/sdk/android/v5/additional-message-filtering.mdx index 6532fb806..a9e7f0f60 100644 --- a/sdk/android/v5/additional-message-filtering.mdx +++ b/sdk/android/v5/additional-message-filtering.mdx @@ -1,5 +1,6 @@ --- title: "Additional Message Filtering" +description: "Filter fetched messages with advanced MessagesRequest options in the CometChat Android SDK, including by category, type, and more." --- diff --git a/sdk/android/v5/advanced-overview.mdx b/sdk/android/v5/advanced-overview.mdx index 18501a4d5..24576a89f 100644 --- a/sdk/android/v5/advanced-overview.mdx +++ b/sdk/android/v5/advanced-overview.mdx @@ -1,5 +1,6 @@ --- title: "Advanced" +description: "Advanced features and configuration options for the CometChat Android Chat SDK." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/ai-agents.mdx b/sdk/android/v5/ai-agents.mdx index 957d277cf..ff5283c44 100644 --- a/sdk/android/v5/ai-agents.mdx +++ b/sdk/android/v5/ai-agents.mdx @@ -1,5 +1,6 @@ --- title: "AI Agents" +description: "Integrate AI Agents into your Android app with the CometChat SDK to process messages, trigger tools, and respond with contextually relevant information." --- ## Overview diff --git a/sdk/android/v5/ai-chatbots-overview.mdx b/sdk/android/v5/ai-chatbots-overview.mdx index 453c5e30f..9c06d4487 100644 --- a/sdk/android/v5/ai-chatbots-overview.mdx +++ b/sdk/android/v5/ai-chatbots-overview.mdx @@ -1,4 +1,5 @@ --- title: "AI" +description: "Add AI chatbots to your Android app with the CometChat SDK to automate conversations and reply to user messages with contextually relevant responses." url: "/ai-chatbots/overview" --- \ No newline at end of file diff --git a/sdk/android/v5/ai-moderation.mdx b/sdk/android/v5/ai-moderation.mdx index 6696a54f0..cda46cf29 100644 --- a/sdk/android/v5/ai-moderation.mdx +++ b/sdk/android/v5/ai-moderation.mdx @@ -1,5 +1,6 @@ --- title: "AI Moderation" +description: "Automatically review chat messages for inappropriate content in your Android app with AI Moderation in the CometChat SDK." --- ## Overview diff --git a/sdk/android/v5/ai-user-copilot-overview.mdx b/sdk/android/v5/ai-user-copilot-overview.mdx index 3e798a3fb..a3833176e 100644 --- a/sdk/android/v5/ai-user-copilot-overview.mdx +++ b/sdk/android/v5/ai-user-copilot-overview.mdx @@ -1,4 +1,5 @@ --- title: "AI" +description: "Add AI User Copilot features — conversation starters, smart replies, and conversation summaries — to your Android app with the CometChat SDK." url: "/fundamentals/ai-user-copilot/overview" --- \ No newline at end of file diff --git a/sdk/android/v5/android-overview.mdx b/sdk/android/v5/android-overview.mdx index c85f2beb4..7306c8e12 100644 --- a/sdk/android/v5/android-overview.mdx +++ b/sdk/android/v5/android-overview.mdx @@ -1,4 +1,5 @@ --- title: "Java UI Kit" +description: "Get started with CometChat for Android — overview of the Chat SDK and Java UI Kit for adding messaging, users, and groups to your app." url: "/ui-kit/android/overview" --- \ No newline at end of file diff --git a/sdk/android/v5/authentication-overview.mdx b/sdk/android/v5/authentication-overview.mdx index 7e3f45b6b..c249eeea9 100644 --- a/sdk/android/v5/authentication-overview.mdx +++ b/sdk/android/v5/authentication-overview.mdx @@ -1,5 +1,6 @@ --- title: "Authentication" +description: "Authenticate users in your Android app with the CometChat SDK — create users and log them in with auth keys or secure auth tokens." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/block-users.mdx b/sdk/android/v5/block-users.mdx index d48752d66..045c2a8e4 100644 --- a/sdk/android/v5/block-users.mdx +++ b/sdk/android/v5/block-users.mdx @@ -1,5 +1,6 @@ --- title: "Block Users" +description: "Block and unblock users in your Android app with the CometChat SDK to stop all communication to and from blocked users." --- diff --git a/sdk/android/v5/campaigns.mdx b/sdk/android/v5/campaigns.mdx index 71fa9efd8..fac968c0c 100644 --- a/sdk/android/v5/campaigns.mdx +++ b/sdk/android/v5/campaigns.mdx @@ -1,5 +1,6 @@ --- title: "Campaigns" +description: "Deliver targeted, rich in-app notification campaigns to users in your Android app using CometChat Campaigns and the Card Schema JSON format." --- CometChat Campaigns lets you deliver targeted, rich notifications to users via an in-app notification feed. Each notification is a **Card Schema JSON** — a structured layout rendered natively by the CometChat Cards library. diff --git a/sdk/android/v5/changelog.mdx b/sdk/android/v5/changelog.mdx index 2512bedbb..897221abf 100644 --- a/sdk/android/v5/changelog.mdx +++ b/sdk/android/v5/changelog.mdx @@ -1,4 +1,5 @@ --- title: "Changelog" +description: "Release notes and version history for the CometChat Android Chat SDK v5." url: "https://github.com/cometchat/chat-sdk-android/releases" --- \ No newline at end of file diff --git a/sdk/android/v5/connection-behaviour.mdx b/sdk/android/v5/connection-behaviour.mdx index 36afd6ee8..bf15095f4 100644 --- a/sdk/android/v5/connection-behaviour.mdx +++ b/sdk/android/v5/connection-behaviour.mdx @@ -1,5 +1,6 @@ --- title: "Connection Behaviour" +description: "Understand how the CometChat Android SDK manages connections during login, including the operations it performs and the connection lifecycle." --- diff --git a/sdk/android/v5/connection-status.mdx b/sdk/android/v5/connection-status.mdx index 2b330763f..bdbc3c8f4 100644 --- a/sdk/android/v5/connection-status.mdx +++ b/sdk/android/v5/connection-status.mdx @@ -1,5 +1,6 @@ --- title: "Connection Status" +description: "Monitor the real-time connection status to CometChat web-socket servers in your Android app using the SDK ConnectionListener class." --- diff --git a/sdk/android/v5/create-group.mdx b/sdk/android/v5/create-group.mdx index eecf3e26f..93c5e3357 100644 --- a/sdk/android/v5/create-group.mdx +++ b/sdk/android/v5/create-group.mdx @@ -1,5 +1,6 @@ --- title: "Create A Group" +description: "Create public, private, or password-protected groups in your Android app using the CometChat SDK createGroup() method." --- diff --git a/sdk/android/v5/delete-conversation.mdx b/sdk/android/v5/delete-conversation.mdx index 01b3924e8..0c42e894f 100644 --- a/sdk/android/v5/delete-conversation.mdx +++ b/sdk/android/v5/delete-conversation.mdx @@ -1,5 +1,6 @@ --- title: "Delete A Conversation" +description: "Delete a one-on-one or group conversation in your Android app using the CometChat SDK deleteConversation() method." --- diff --git a/sdk/android/v5/delete-group.mdx b/sdk/android/v5/delete-group.mdx index 36d3eb938..9a89d8dcb 100644 --- a/sdk/android/v5/delete-group.mdx +++ b/sdk/android/v5/delete-group.mdx @@ -1,5 +1,6 @@ --- title: "Delete A Group" +description: "Delete a CometChat group in your Android app using the SDK deleteGroup() method, available to group administrators." --- diff --git a/sdk/android/v5/delete-message.mdx b/sdk/android/v5/delete-message.mdx index 493373fed..69c33f56c 100644 --- a/sdk/android/v5/delete-message.mdx +++ b/sdk/android/v5/delete-message.mdx @@ -1,5 +1,6 @@ --- title: "Delete A Message" +description: "Delete messages in your Android app with the CometChat SDK and listen for real-time message-deletion events using the MessageListener." --- diff --git a/sdk/android/v5/delivery-read-receipts.mdx b/sdk/android/v5/delivery-read-receipts.mdx index 93f59de93..05e507171 100644 --- a/sdk/android/v5/delivery-read-receipts.mdx +++ b/sdk/android/v5/delivery-read-receipts.mdx @@ -1,5 +1,6 @@ --- title: "Delivery & Read Receipts" +description: "Send and receive message delivery and read receipts in your Android app using the CometChat SDK markAsDelivered() and markAsRead() methods." --- diff --git a/sdk/android/v5/edit-message.mdx b/sdk/android/v5/edit-message.mdx index a710c009c..f373aac6e 100644 --- a/sdk/android/v5/edit-message.mdx +++ b/sdk/android/v5/edit-message.mdx @@ -1,5 +1,6 @@ --- title: "Edit A Message" +description: "Edit sent messages in your Android app with the CometChat SDK and listen for real-time message-edit events using the MessageListener." --- diff --git a/sdk/android/v5/extensions-overview.mdx b/sdk/android/v5/extensions-overview.mdx index 29c1774bd..316ba7aed 100644 --- a/sdk/android/v5/extensions-overview.mdx +++ b/sdk/android/v5/extensions-overview.mdx @@ -1,4 +1,5 @@ --- title: "Extensions" +description: "Extend your Android chat app with CometChat extensions such as reactions, polls, stickers, link previews, and message translation." url: "/fundamentals/extensions-overview" --- \ No newline at end of file diff --git a/sdk/android/v5/flag-message.mdx b/sdk/android/v5/flag-message.mdx index 0843d2902..0a361ff62 100644 --- a/sdk/android/v5/flag-message.mdx +++ b/sdk/android/v5/flag-message.mdx @@ -1,5 +1,6 @@ --- title: "Flag Message" +description: "Let users flag inappropriate messages for moderator review in your Android app using the CometChat SDK, surfaced in the CometChat Dashboard." --- ## Overview diff --git a/sdk/android/v5/group-add-members.mdx b/sdk/android/v5/group-add-members.mdx index a135b4615..c9a14d10d 100644 --- a/sdk/android/v5/group-add-members.mdx +++ b/sdk/android/v5/group-add-members.mdx @@ -1,5 +1,6 @@ --- title: "Add Members To A Group" +description: "Add members to a CometChat group in your Android app using the SDK addMembersToGroup() method." --- diff --git a/sdk/android/v5/group-change-member-scope.mdx b/sdk/android/v5/group-change-member-scope.mdx index 13303f53b..f48422118 100644 --- a/sdk/android/v5/group-change-member-scope.mdx +++ b/sdk/android/v5/group-change-member-scope.mdx @@ -1,5 +1,6 @@ --- title: "Change Member Scope" +description: "Change a group member's scope (admin, moderator, or participant) in your Android app using the CometChat SDK changeGroupMemberScope() method." --- diff --git a/sdk/android/v5/group-kick-member.mdx b/sdk/android/v5/group-kick-member.mdx index fbbd7cb5c..e05f7ce4a 100644 --- a/sdk/android/v5/group-kick-member.mdx +++ b/sdk/android/v5/group-kick-member.mdx @@ -1,5 +1,6 @@ --- title: "Ban/Kick Member From A Group" +description: "Ban or kick members from a CometChat group in your Android app using the SDK, and manage the list of banned users." --- diff --git a/sdk/android/v5/groups-overview.mdx b/sdk/android/v5/groups-overview.mdx index 99e877026..2395a3388 100644 --- a/sdk/android/v5/groups-overview.mdx +++ b/sdk/android/v5/groups-overview.mdx @@ -1,5 +1,6 @@ --- title: "Groups" +description: "Create and manage public, private, and password-protected groups in your Android app with the CometChat SDK." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/interactive-messages.mdx b/sdk/android/v5/interactive-messages.mdx index d6f468c0e..5050a4976 100644 --- a/sdk/android/v5/interactive-messages.mdx +++ b/sdk/android/v5/interactive-messages.mdx @@ -1,5 +1,6 @@ --- title: "Interactive Messages" +description: "Send InteractiveMessages such as embedded forms and cards that users can act on directly in chat, in your Android app with the CometChat SDK." --- diff --git a/sdk/android/v5/join-group.mdx b/sdk/android/v5/join-group.mdx index 514297a66..177f3cb87 100644 --- a/sdk/android/v5/join-group.mdx +++ b/sdk/android/v5/join-group.mdx @@ -1,5 +1,6 @@ --- title: "Join A Group" +description: "Join a CometChat group in your Android app using the SDK joinGroup() method to start participating in group conversations." --- diff --git a/sdk/android/v5/key-concepts.mdx b/sdk/android/v5/key-concepts.mdx index 2c6833e0b..6521ab5e4 100644 --- a/sdk/android/v5/key-concepts.mdx +++ b/sdk/android/v5/key-concepts.mdx @@ -1,5 +1,6 @@ --- title: "Key Concepts" +description: "Key concepts for building with the CometChat Android SDK, including apps, users, conversations, and the CometChat Dashboard." --- diff --git a/sdk/android/v5/leave-group.mdx b/sdk/android/v5/leave-group.mdx index baa6f2fce..d0dc02678 100644 --- a/sdk/android/v5/leave-group.mdx +++ b/sdk/android/v5/leave-group.mdx @@ -1,5 +1,6 @@ --- title: "Leave A Group" +description: "Leave a joined CometChat group in your Android app using the SDK leaveGroup() method to stop receiving its messages and updates." --- diff --git a/sdk/android/v5/login-listeners.mdx b/sdk/android/v5/login-listeners.mdx index 9acb5ea90..1e7d81423 100644 --- a/sdk/android/v5/login-listeners.mdx +++ b/sdk/android/v5/login-listeners.mdx @@ -1,5 +1,6 @@ --- title: "Login Listeners" +description: "Use the CometChat Android SDK LoginListener to receive real-time login and logout events, including loginSuccess, loginFailure, logoutSuccess, and logoutFailure." --- diff --git a/sdk/android/v5/mentions.mdx b/sdk/android/v5/mentions.mdx index ce0320209..848b812fb 100644 --- a/sdk/android/v5/mentions.mdx +++ b/sdk/android/v5/mentions.mdx @@ -1,5 +1,6 @@ --- title: "Mentions" +description: "Add @mentions to your Android chat app with the CometChat SDK so users can tag and notify specific people within conversations." --- diff --git a/sdk/android/v5/message-structure-and-hierarchy.mdx b/sdk/android/v5/message-structure-and-hierarchy.mdx index f61945388..f9120e98f 100644 --- a/sdk/android/v5/message-structure-and-hierarchy.mdx +++ b/sdk/android/v5/message-structure-and-hierarchy.mdx @@ -1,5 +1,6 @@ --- title: "Message Structure And Hierarchy" +description: "Understand CometChat message categories and types and how they form the message structure and hierarchy in the Android SDK." --- diff --git a/sdk/android/v5/messaging-overview.mdx b/sdk/android/v5/messaging-overview.mdx index 8baac144c..7dff6e828 100644 --- a/sdk/android/v5/messaging-overview.mdx +++ b/sdk/android/v5/messaging-overview.mdx @@ -1,5 +1,6 @@ --- title: "Messaging" +description: "Overview of messaging in the CometChat Android SDK — send, receive, and fetch message history for one-on-one and group conversations." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/publishing-app-on-playstore.mdx b/sdk/android/v5/publishing-app-on-playstore.mdx index 7e2815d76..7816ad95a 100644 --- a/sdk/android/v5/publishing-app-on-playstore.mdx +++ b/sdk/android/v5/publishing-app-on-playstore.mdx @@ -1,5 +1,6 @@ --- title: "Publishing App On PlayStore" +description: "Step-by-step guidance for publishing your CometChat-powered Android app to the Google Play Store." --- diff --git a/sdk/android/v5/rate-limits.mdx b/sdk/android/v5/rate-limits.mdx index 17581b144..b22925b13 100644 --- a/sdk/android/v5/rate-limits.mdx +++ b/sdk/android/v5/rate-limits.mdx @@ -1,5 +1,6 @@ --- title: "Rate Limits" +description: "Reference for CometChat API and SDK rate limits, including default cumulative limits and how they can be adjusted by plan and use-case." --- diff --git a/sdk/android/v5/reactions.mdx b/sdk/android/v5/reactions.mdx index b7a903654..d4e27fb4b 100644 --- a/sdk/android/v5/reactions.mdx +++ b/sdk/android/v5/reactions.mdx @@ -1,5 +1,6 @@ --- title: "Reactions" +description: "Add message reactions to your Android chat app with the CometChat SDK — add, remove, and fetch emoji reactions on messages." --- diff --git a/sdk/android/v5/real-time-listeners.mdx b/sdk/android/v5/real-time-listeners.mdx index 04e653071..1fabca354 100644 --- a/sdk/android/v5/real-time-listeners.mdx +++ b/sdk/android/v5/real-time-listeners.mdx @@ -1,5 +1,6 @@ --- title: "All Real Time Listeners" +description: "Reference for the CometChat Android SDK real-time listeners — message, user, group, and connection listeners for live events." --- diff --git a/sdk/android/v5/receive-messages.mdx b/sdk/android/v5/receive-messages.mdx index 22bd67e07..65dd311bb 100644 --- a/sdk/android/v5/receive-messages.mdx +++ b/sdk/android/v5/receive-messages.mdx @@ -1,5 +1,6 @@ --- title: "Receive A Message" +description: "Receive real-time and missed messages in your Android app with the CometChat SDK using message listeners and the MessagesRequest builder." --- diff --git a/sdk/android/v5/resources-overview.mdx b/sdk/android/v5/resources-overview.mdx index 9a648ce52..eaf9deeff 100644 --- a/sdk/android/v5/resources-overview.mdx +++ b/sdk/android/v5/resources-overview.mdx @@ -1,5 +1,6 @@ --- title: "Resources" +description: "Helpful resources for integrating the CometChat Android SDK, including sample apps, references, and developer guides." --- diff --git a/sdk/android/v5/retrieve-conversations.mdx b/sdk/android/v5/retrieve-conversations.mdx index 0e4fb4513..1ed09ecdb 100644 --- a/sdk/android/v5/retrieve-conversations.mdx +++ b/sdk/android/v5/retrieve-conversations.mdx @@ -1,5 +1,6 @@ --- title: "Retrieve Conversations" +description: "Fetch recent one-on-one and group conversations with their last messages in your Android app using the CometChat SDK to build a recent chats list." --- diff --git a/sdk/android/v5/retrieve-group-members.mdx b/sdk/android/v5/retrieve-group-members.mdx index 46001c72a..d8eeeacef 100644 --- a/sdk/android/v5/retrieve-group-members.mdx +++ b/sdk/android/v5/retrieve-group-members.mdx @@ -1,5 +1,6 @@ --- title: "Retrieve Group Members" +description: "Fetch the members of a CometChat group in your Android app using the SDK GroupMembersRequest and GroupMembersRequestBuilder classes." --- diff --git a/sdk/android/v5/retrieve-groups.mdx b/sdk/android/v5/retrieve-groups.mdx index 7b1878481..efe0c3aa5 100644 --- a/sdk/android/v5/retrieve-groups.mdx +++ b/sdk/android/v5/retrieve-groups.mdx @@ -1,5 +1,6 @@ --- title: "Retrieve Groups" +description: "Fetch and filter the list of groups in your Android app using the CometChat SDK GroupsRequest and GroupsRequestBuilder classes." --- diff --git a/sdk/android/v5/retrieve-users.mdx b/sdk/android/v5/retrieve-users.mdx index ecbf5de36..b7f70333c 100644 --- a/sdk/android/v5/retrieve-users.mdx +++ b/sdk/android/v5/retrieve-users.mdx @@ -1,5 +1,6 @@ --- title: "Retrieve Users" +description: "Retrieve the logged-in user and fetch, search, and filter other users in your Android app using the CometChat SDK." --- diff --git a/sdk/android/v5/send-message.mdx b/sdk/android/v5/send-message.mdx index f3c86b1b5..e8eb7efe0 100644 --- a/sdk/android/v5/send-message.mdx +++ b/sdk/android/v5/send-message.mdx @@ -1,5 +1,6 @@ --- title: "Send A Message" +description: "Send text, media, and custom messages to users and groups in your Android app with the CometChat SDK." --- diff --git a/sdk/android/v5/setup.mdx b/sdk/android/v5/setup.mdx index 289e42f53..a38e33885 100644 --- a/sdk/android/v5/setup.mdx +++ b/sdk/android/v5/setup.mdx @@ -1,5 +1,6 @@ --- title: "Setup" +description: "Set up the CometChat Chat SDK in your Android app — add the dependency, initialize the SDK, and prepare to migrate from earlier versions." --- diff --git a/sdk/android/v5/threaded-messages.mdx b/sdk/android/v5/threaded-messages.mdx index 114e6f114..268983595 100644 --- a/sdk/android/v5/threaded-messages.mdx +++ b/sdk/android/v5/threaded-messages.mdx @@ -1,5 +1,6 @@ --- title: "Threaded Messages" +description: "Build threaded conversations with replies attached to a parent message in your Android app using the CometChat SDK." --- diff --git a/sdk/android/v5/transfer-group-ownership.mdx b/sdk/android/v5/transfer-group-ownership.mdx index 6663488bf..dfe07d491 100644 --- a/sdk/android/v5/transfer-group-ownership.mdx +++ b/sdk/android/v5/transfer-group-ownership.mdx @@ -1,5 +1,6 @@ --- title: "Transfer Group Ownership" +description: "Transfer ownership of a CometChat group to another member in your Android app using the SDK transferGroupOwnership() method." --- diff --git a/sdk/android/v5/transient-messages.mdx b/sdk/android/v5/transient-messages.mdx index efeceec14..16b8ad529 100644 --- a/sdk/android/v5/transient-messages.mdx +++ b/sdk/android/v5/transient-messages.mdx @@ -1,5 +1,6 @@ --- title: "Transient Messages" +description: "Send real-time-only transient messages, such as live reactions, that are not stored or tracked, in your Android app with the CometChat SDK." --- diff --git a/sdk/android/v5/typing-indicators.mdx b/sdk/android/v5/typing-indicators.mdx index 452fd1f4a..1b058cd9a 100644 --- a/sdk/android/v5/typing-indicators.mdx +++ b/sdk/android/v5/typing-indicators.mdx @@ -1,5 +1,6 @@ --- title: "Typing Indicators" +description: "Show typing indicators in your Android chat app with the CometChat SDK startTyping() and endTyping() methods and MessageListener callbacks." --- diff --git a/sdk/android/v5/update-group.mdx b/sdk/android/v5/update-group.mdx index ed81ed1cb..aa652d290 100644 --- a/sdk/android/v5/update-group.mdx +++ b/sdk/android/v5/update-group.mdx @@ -1,5 +1,6 @@ --- title: "Update A Group" +description: "Update an existing CometChat group's details in your Android app using the SDK updateGroup() method." --- diff --git a/sdk/android/v5/user-management.mdx b/sdk/android/v5/user-management.mdx index 785b6c315..dfb653bf7 100644 --- a/sdk/android/v5/user-management.mdx +++ b/sdk/android/v5/user-management.mdx @@ -1,5 +1,6 @@ --- title: "User Management" +description: "Programmatically create and log in CometChat users from your Android app to map your app's own users to CometChat." --- diff --git a/sdk/android/v5/user-presence.mdx b/sdk/android/v5/user-presence.mdx index 47285657f..938b7d756 100644 --- a/sdk/android/v5/user-presence.mdx +++ b/sdk/android/v5/user-presence.mdx @@ -1,5 +1,6 @@ --- title: "User Presence" +description: "Track real-time user presence and online/offline status in your Android app with the CometChat SDK." --- diff --git a/sdk/android/v5/users-overview.mdx b/sdk/android/v5/users-overview.mdx index b26b5c76b..57805879d 100644 --- a/sdk/android/v5/users-overview.mdx +++ b/sdk/android/v5/users-overview.mdx @@ -1,5 +1,6 @@ --- title: "Users" +description: "Retrieve, add, and manage users in your Android app with the CometChat SDK, including fetching user lists and individual user details." sidebarTitle: "Overview" --- diff --git a/sdk/android/v5/webhooks-overview.mdx b/sdk/android/v5/webhooks-overview.mdx index 6c9724091..ed99b81a1 100644 --- a/sdk/android/v5/webhooks-overview.mdx +++ b/sdk/android/v5/webhooks-overview.mdx @@ -1,4 +1,5 @@ --- title: "Webhooks" +description: "Use CometChat webhooks to receive real-time, event-driven HTTP callbacks on your server for messages, users, groups, and call events." url: "/fundamentals/webhooks" --- \ No newline at end of file