From 9bbeaa349a39ad18c6f181850c87897edc7aaab6 Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Fri, 12 Jun 2026 18:28:04 +0530 Subject: [PATCH 01/27] docs(ui-kit/react): reorganize v7 as default with consolidated structure MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Update default version from v6 to v7 in docs.json - Consolidate integration guides into single files (integration-react, integration-nextjs, integration-react-router, integration-astro) - Reorganize component documentation under components/ subdirectory - Restructure plugin documentation under plugins/ subdirectory - Consolidate guides into focused feature-based documentation - Update navigation paths to reflect new file organization - Remove duplicate v7-specific documentation directory - Clean up legacy changelog link and consolidate links section - Rename navigation labels for consistency (React-Router → React Router) - Consolidate localization documentation under single theming section --- docs.json | 274 +-- ui-kit/react/ai-assistant-chat.mdx | 957 ---------- ui-kit/react/ai-features.mdx | 20 +- ui-kit/react/astro-conversation.mdx | 284 +-- ui-kit/react/astro-integration.mdx | 329 ---- ui-kit/react/astro-one-to-one-chat.mdx | 261 +-- ui-kit/react/astro-tab-based-chat.mdx | 672 +++---- ui-kit/react/call-buttons.mdx | 529 ------ ui-kit/react/call-features.mdx | 38 +- ui-kit/react/call-logs.mdx | 671 ------- ui-kit/react/calling-integration.mdx | 250 ++- ui-kit/react/campaigns.mdx | 215 --- ui-kit/react/{v7 => }/cometchat-provider.mdx | 4 +- ui-kit/react/compact-message-composer.mdx | 1264 ------------- ui-kit/react/components-overview.mdx | 302 +++- .../{v7 => }/components/action-bubble.mdx | 14 +- .../{v7 => }/components/ai-assistant-chat.mdx | 6 +- .../react/{v7 => }/components/call-logs.mdx | 6 +- .../{v7 => }/components/conversations.mdx | 8 +- .../{v7 => }/components/group-members.mdx | 8 +- ui-kit/react/{v7 => }/components/groups.mdx | 8 +- .../{v7 => }/components/incoming-call.mdx | 6 +- .../{v7 => }/components/message-bubble.mdx | 0 .../{v7 => }/components/message-composer.mdx | 6 +- .../{v7 => }/components/message-header.mdx | 8 +- .../components/message-information.mdx | 0 .../{v7 => }/components/message-list.mdx | 8 +- .../{v7 => }/components/outgoing-call.mdx | 6 +- .../{v7 => }/components/reaction-list.mdx | 0 .../react/{v7 => }/components/reactions.mdx | 0 ui-kit/react/{v7 => }/components/search.mdx | 6 +- .../{v7 => }/components/thread-header.mdx | 6 +- ui-kit/react/{v7 => }/components/users.mdx | 8 +- ui-kit/react/conversations.mdx | 1567 ----------------- ui-kit/react/core-features.mdx | 68 +- ui-kit/react/custom-text-formatter-guide.mdx | 397 ----- ui-kit/react/{v7 => }/event-system.mdx | 0 ui-kit/react/events.mdx | 98 -- ui-kit/react/extensions.mdx | 26 +- ui-kit/react/group-members.mdx | 1189 ------------- ui-kit/react/groups.mdx | 1337 -------------- ui-kit/react/guide-block-unblock-user.mdx | 433 +++-- ui-kit/react/guide-call-log-details.mdx | 214 --- .../react/{v7 => }/guide-group-chat-setup.mdx | 12 +- ui-kit/react/guide-group-chat.mdx | 292 --- ui-kit/react/guide-message-privately.mdx | 391 ++-- .../{v7 => }/guide-new-chat-creation.mdx | 12 +- ui-kit/react/guide-new-chat.mdx | 206 --- ui-kit/react/guide-overview.mdx | 60 - ui-kit/react/guide-search-messages.mdx | 324 ++-- ui-kit/react/guide-threaded-messages.mdx | 316 ++-- ui-kit/react/incoming-call.mdx | 492 ------ ui-kit/react/{v7 => }/integration-astro.mdx | 12 +- ui-kit/react/{v7 => }/integration-nextjs.mdx | 12 +- .../{v7 => }/integration-react-router.mdx | 12 +- ui-kit/react/{v7 => }/integration-react.mdx | 12 +- ui-kit/react/link/changelog.mdx | 5 - ui-kit/react/link/sample.mdx | 2 +- ui-kit/react/{v7 => }/localization.mdx | 0 ui-kit/react/localize.mdx | 319 ---- ui-kit/react/mentions-formatter-guide.mdx | 75 - ui-kit/react/message-composer.mdx | 932 ---------- ui-kit/react/message-header.mdx | 901 ---------- ui-kit/react/message-list.mdx | 1285 -------------- ui-kit/react/message-template.mdx | 717 -------- ui-kit/react/methods.mdx | 612 ++----- ui-kit/react/{v7 => }/migration-overview.mdx | 48 +- .../{v7 => }/migration-property-changes.mdx | 6 +- ui-kit/react/next-conversation.mdx | 369 +--- ui-kit/react/next-js-integration.mdx | 368 ---- ui-kit/react/next-one-to-one-chat.mdx | 262 +-- ui-kit/react/next-tab-based-chat.mdx | 696 ++------ ui-kit/react/notification-feed.mdx | 758 -------- ui-kit/react/outgoing-call.mdx | 713 -------- ui-kit/react/overview.mdx | 150 +- ui-kit/react/{v7 => }/plugins/ai.mdx | 0 ui-kit/react/{v7 => }/plugins/audio.mdx | 2 +- ui-kit/react/{v7 => }/plugins/call-action.mdx | 0 .../plugins/collaborative-document.mdx | 0 .../plugins/collaborative-whiteboard.mdx | 0 .../react/{v7 => }/plugins/custom-plugin.mdx | 0 ui-kit/react/{v7 => }/plugins/delete.mdx | 0 ui-kit/react/{v7 => }/plugins/file.mdx | 2 +- .../react/{v7 => }/plugins/group-action.mdx | 0 ui-kit/react/{v7 => }/plugins/image.mdx | 0 ui-kit/react/{v7 => }/plugins/overview.mdx | 34 +- ui-kit/react/{v7 => }/plugins/polls.mdx | 0 ui-kit/react/{v7 => }/plugins/stickers.mdx | 0 .../{v7 => }/plugins/text-formatters.mdx | 0 ui-kit/react/{v7 => }/plugins/text.mdx | 2 +- ui-kit/react/{v7 => }/plugins/video.mdx | 2 +- ui-kit/react/react-conversation.mdx | 376 +--- ui-kit/react/react-js-integration.mdx | 391 ---- ui-kit/react/react-one-to-one-chat.mdx | 186 +- ui-kit/react/react-router-conversation.mdx | 399 +---- ui-kit/react/react-router-integration.mdx | 345 ---- ui-kit/react/react-router-one-to-one-chat.mdx | 283 +-- ui-kit/react/react-router-tab-based-chat.mdx | 715 +++----- ui-kit/react/react-tab-based-chat.mdx | 648 ++----- ui-kit/react/search.mdx | 1254 ------------- ui-kit/react/shortcut-formatter-guide.mdx | 288 --- ui-kit/react/sound-manager.mdx | 123 +- ui-kit/react/theme.mdx | 331 ---- ui-kit/react/theme/color-resources.mdx | 275 ++- ui-kit/react/theme/message-bubble-styling.mdx | 367 ++-- ui-kit/react/{v7 => }/theming.mdx | 4 +- ui-kit/react/thread-header.mdx | 483 ----- ui-kit/react/troubleshooting.mdx | 305 +++- ui-kit/react/upgrading-from-v5.mdx | 287 --- ui-kit/react/url-formatter-guide.mdx | 110 -- ui-kit/react/users.mdx | 1292 -------------- ui-kit/react/v6/overview.mdx | 2 +- ui-kit/react/v7/ai-features.mdx | 73 - ui-kit/react/v7/astro-conversation.mdx | 176 -- ui-kit/react/v7/astro-one-to-one-chat.mdx | 175 -- ui-kit/react/v7/astro-tab-based-chat.mdx | 298 ---- ui-kit/react/v7/call-features.mdx | 90 - ui-kit/react/v7/calling-integration.mdx | 250 --- ui-kit/react/v7/components-overview.mdx | 277 --- ui-kit/react/v7/core-features.mdx | 244 --- ui-kit/react/v7/extensions.mdx | 197 --- ui-kit/react/v7/guide-block-unblock-user.mdx | 309 ---- ui-kit/react/v7/guide-message-privately.mdx | 276 --- ui-kit/react/v7/guide-search-messages.mdx | 254 --- ui-kit/react/v7/guide-threaded-messages.mdx | 219 --- ui-kit/react/v7/link/figma.mdx | 5 - ui-kit/react/v7/link/sample.mdx | 5 - ui-kit/react/v7/methods.mdx | 200 --- ui-kit/react/v7/next-conversation.mdx | 181 -- ui-kit/react/v7/next-one-to-one-chat.mdx | 173 -- ui-kit/react/v7/next-tab-based-chat.mdx | 302 ---- ui-kit/react/v7/overview.mdx | 144 -- .../react/v7/plugins/message-translation.mdx | 103 -- ui-kit/react/v7/react-conversation.mdx | 170 -- ui-kit/react/v7/react-one-to-one-chat.mdx | 171 -- ui-kit/react/v7/react-router-conversation.mdx | 190 -- .../react/v7/react-router-one-to-one-chat.mdx | 189 -- .../react/v7/react-router-tab-based-chat.mdx | 310 ---- ui-kit/react/v7/react-tab-based-chat.mdx | 293 --- ui-kit/react/v7/sound-manager.mdx | 100 -- ui-kit/react/v7/theme/color-resources.mdx | 164 -- .../react/v7/theme/message-bubble-styling.mdx | 983 ----------- ui-kit/react/v7/troubleshooting.mdx | 258 --- 143 files changed, 3871 insertions(+), 33288 deletions(-) delete mode 100644 ui-kit/react/ai-assistant-chat.mdx delete mode 100644 ui-kit/react/astro-integration.mdx delete mode 100644 ui-kit/react/call-buttons.mdx delete mode 100644 ui-kit/react/call-logs.mdx delete mode 100644 ui-kit/react/campaigns.mdx rename ui-kit/react/{v7 => }/cometchat-provider.mdx (98%) delete mode 100644 ui-kit/react/compact-message-composer.mdx rename ui-kit/react/{v7 => }/components/action-bubble.mdx (90%) rename ui-kit/react/{v7 => }/components/ai-assistant-chat.mdx (99%) rename ui-kit/react/{v7 => }/components/call-logs.mdx (98%) rename ui-kit/react/{v7 => }/components/conversations.mdx (99%) rename ui-kit/react/{v7 => }/components/group-members.mdx (98%) rename ui-kit/react/{v7 => }/components/groups.mdx (99%) rename ui-kit/react/{v7 => }/components/incoming-call.mdx (98%) rename ui-kit/react/{v7 => }/components/message-bubble.mdx (100%) rename ui-kit/react/{v7 => }/components/message-composer.mdx (99%) rename ui-kit/react/{v7 => }/components/message-header.mdx (99%) rename ui-kit/react/{v7 => }/components/message-information.mdx (100%) rename ui-kit/react/{v7 => }/components/message-list.mdx (99%) rename ui-kit/react/{v7 => }/components/outgoing-call.mdx (98%) rename ui-kit/react/{v7 => }/components/reaction-list.mdx (100%) rename ui-kit/react/{v7 => }/components/reactions.mdx (100%) rename ui-kit/react/{v7 => }/components/search.mdx (99%) rename ui-kit/react/{v7 => }/components/thread-header.mdx (98%) rename ui-kit/react/{v7 => }/components/users.mdx (98%) delete mode 100644 ui-kit/react/conversations.mdx delete mode 100644 ui-kit/react/custom-text-formatter-guide.mdx rename ui-kit/react/{v7 => }/event-system.mdx (100%) delete mode 100644 ui-kit/react/events.mdx delete mode 100644 ui-kit/react/group-members.mdx delete mode 100644 ui-kit/react/groups.mdx delete mode 100644 ui-kit/react/guide-call-log-details.mdx rename ui-kit/react/{v7 => }/guide-group-chat-setup.mdx (94%) delete mode 100644 ui-kit/react/guide-group-chat.mdx rename ui-kit/react/{v7 => }/guide-new-chat-creation.mdx (95%) delete mode 100644 ui-kit/react/guide-new-chat.mdx delete mode 100644 ui-kit/react/guide-overview.mdx delete mode 100644 ui-kit/react/incoming-call.mdx rename ui-kit/react/{v7 => }/integration-astro.mdx (94%) rename ui-kit/react/{v7 => }/integration-nextjs.mdx (94%) rename ui-kit/react/{v7 => }/integration-react-router.mdx (94%) rename ui-kit/react/{v7 => }/integration-react.mdx (93%) delete mode 100644 ui-kit/react/link/changelog.mdx rename ui-kit/react/{v7 => }/localization.mdx (100%) delete mode 100644 ui-kit/react/localize.mdx delete mode 100644 ui-kit/react/mentions-formatter-guide.mdx delete mode 100644 ui-kit/react/message-composer.mdx delete mode 100644 ui-kit/react/message-header.mdx delete mode 100644 ui-kit/react/message-list.mdx delete mode 100644 ui-kit/react/message-template.mdx rename ui-kit/react/{v7 => }/migration-overview.mdx (87%) rename ui-kit/react/{v7 => }/migration-property-changes.mdx (99%) delete mode 100644 ui-kit/react/next-js-integration.mdx delete mode 100644 ui-kit/react/notification-feed.mdx delete mode 100644 ui-kit/react/outgoing-call.mdx rename ui-kit/react/{v7 => }/plugins/ai.mdx (100%) rename ui-kit/react/{v7 => }/plugins/audio.mdx (93%) rename ui-kit/react/{v7 => }/plugins/call-action.mdx (100%) rename ui-kit/react/{v7 => }/plugins/collaborative-document.mdx (100%) rename ui-kit/react/{v7 => }/plugins/collaborative-whiteboard.mdx (100%) rename ui-kit/react/{v7 => }/plugins/custom-plugin.mdx (100%) rename ui-kit/react/{v7 => }/plugins/delete.mdx (100%) rename ui-kit/react/{v7 => }/plugins/file.mdx (93%) rename ui-kit/react/{v7 => }/plugins/group-action.mdx (100%) rename ui-kit/react/{v7 => }/plugins/image.mdx (100%) rename ui-kit/react/{v7 => }/plugins/overview.mdx (84%) rename ui-kit/react/{v7 => }/plugins/polls.mdx (100%) rename ui-kit/react/{v7 => }/plugins/stickers.mdx (100%) rename ui-kit/react/{v7 => }/plugins/text-formatters.mdx (100%) rename ui-kit/react/{v7 => }/plugins/text.mdx (97%) rename ui-kit/react/{v7 => }/plugins/video.mdx (92%) delete mode 100644 ui-kit/react/react-js-integration.mdx delete mode 100644 ui-kit/react/react-router-integration.mdx delete mode 100644 ui-kit/react/search.mdx delete mode 100644 ui-kit/react/shortcut-formatter-guide.mdx delete mode 100644 ui-kit/react/theme.mdx rename ui-kit/react/{v7 => }/theming.mdx (99%) delete mode 100644 ui-kit/react/thread-header.mdx delete mode 100644 ui-kit/react/upgrading-from-v5.mdx delete mode 100644 ui-kit/react/url-formatter-guide.mdx delete mode 100644 ui-kit/react/users.mdx delete mode 100644 ui-kit/react/v7/ai-features.mdx delete mode 100644 ui-kit/react/v7/astro-conversation.mdx delete mode 100644 ui-kit/react/v7/astro-one-to-one-chat.mdx delete mode 100644 ui-kit/react/v7/astro-tab-based-chat.mdx delete mode 100644 ui-kit/react/v7/call-features.mdx delete mode 100644 ui-kit/react/v7/calling-integration.mdx delete mode 100644 ui-kit/react/v7/components-overview.mdx delete mode 100644 ui-kit/react/v7/core-features.mdx delete mode 100644 ui-kit/react/v7/extensions.mdx delete mode 100644 ui-kit/react/v7/guide-block-unblock-user.mdx delete mode 100644 ui-kit/react/v7/guide-message-privately.mdx delete mode 100644 ui-kit/react/v7/guide-search-messages.mdx delete mode 100644 ui-kit/react/v7/guide-threaded-messages.mdx delete mode 100644 ui-kit/react/v7/link/figma.mdx delete mode 100644 ui-kit/react/v7/link/sample.mdx delete mode 100644 ui-kit/react/v7/methods.mdx delete mode 100644 ui-kit/react/v7/next-conversation.mdx delete mode 100644 ui-kit/react/v7/next-one-to-one-chat.mdx delete mode 100644 ui-kit/react/v7/next-tab-based-chat.mdx delete mode 100644 ui-kit/react/v7/overview.mdx delete mode 100644 ui-kit/react/v7/plugins/message-translation.mdx delete mode 100644 ui-kit/react/v7/react-conversation.mdx delete mode 100644 ui-kit/react/v7/react-one-to-one-chat.mdx delete mode 100644 ui-kit/react/v7/react-router-conversation.mdx delete mode 100644 ui-kit/react/v7/react-router-one-to-one-chat.mdx delete mode 100644 ui-kit/react/v7/react-router-tab-based-chat.mdx delete mode 100644 ui-kit/react/v7/react-tab-based-chat.mdx delete mode 100644 ui-kit/react/v7/sound-manager.mdx delete mode 100644 ui-kit/react/v7/theme/color-resources.mdx delete mode 100644 ui-kit/react/v7/theme/message-bubble-styling.mdx delete mode 100644 ui-kit/react/v7/troubleshooting.mdx diff --git a/docs.json b/docs.json index bd1ec7e32..bf49ef8a5 100644 --- a/docs.json +++ b/docs.json @@ -450,7 +450,7 @@ "icon": "/images/icons/react.svg", "versions": [ { - "version": "v6", + "version": "v7", "default": true, "groups": [ { @@ -463,7 +463,7 @@ { "group": "React.js", "pages": [ - "ui-kit/react/react-js-integration", + "ui-kit/react/integration-react", "ui-kit/react/react-conversation", "ui-kit/react/react-one-to-one-chat", "ui-kit/react/react-tab-based-chat" @@ -472,16 +472,16 @@ { "group": "Next.js", "pages": [ - "ui-kit/react/next-js-integration", + "ui-kit/react/integration-nextjs", "ui-kit/react/next-conversation", "ui-kit/react/next-one-to-one-chat", "ui-kit/react/next-tab-based-chat" ] }, { - "group": "React-Router", + "group": "React Router", "pages": [ - "ui-kit/react/react-router-integration", + "ui-kit/react/integration-react-router", "ui-kit/react/react-router-conversation", "ui-kit/react/react-router-one-to-one-chat", "ui-kit/react/react-router-tab-based-chat" @@ -490,7 +490,7 @@ { "group": "Astro", "pages": [ - "ui-kit/react/astro-integration", + "ui-kit/react/integration-astro", "ui-kit/react/astro-conversation", "ui-kit/react/astro-one-to-one-chat", "ui-kit/react/astro-tab-based-chat" @@ -510,129 +510,150 @@ "ui-kit/react/ai-features" ] }, - "ui-kit/react/call-features", - "ui-kit/react/campaigns" + "ui-kit/react/call-features" ] }, { - "group": "Theming", + "group": "Components", "pages": [ - "ui-kit/react/theme", - "ui-kit/react/theme/color-resources", - "ui-kit/react/theme/message-bubble-styling", - "ui-kit/react/localize", - "ui-kit/react/sound-manager" + "ui-kit/react/components-overview", + "ui-kit/react/components/conversations", + "ui-kit/react/components/users", + "ui-kit/react/components/groups", + "ui-kit/react/components/group-members", + "ui-kit/react/components/message-header", + "ui-kit/react/components/message-list", + "ui-kit/react/components/message-composer", + "ui-kit/react/components/message-bubble", + "ui-kit/react/components/thread-header", + "ui-kit/react/components/message-information", + "ui-kit/react/components/reactions", + "ui-kit/react/components/reaction-list", + "ui-kit/react/components/action-bubble", + "ui-kit/react/components/incoming-call", + "ui-kit/react/components/outgoing-call", + "ui-kit/react/components/call-logs", + "ui-kit/react/components/search", + "ui-kit/react/components/ai-assistant-chat" ] }, { - "group": "Components", + "group": "Plugins", "pages": [ - "ui-kit/react/components-overview", - "ui-kit/react/conversations", - "ui-kit/react/users", - "ui-kit/react/groups", - "ui-kit/react/group-members", - "ui-kit/react/message-header", - "ui-kit/react/message-list", - "ui-kit/react/message-composer", - "ui-kit/react/compact-message-composer", - "ui-kit/react/message-template", - "ui-kit/react/thread-header", - "ui-kit/react/incoming-call", - "ui-kit/react/outgoing-call", - "ui-kit/react/call-buttons", - "ui-kit/react/call-logs", - "ui-kit/react/search", - "ui-kit/react/ai-assistant-chat", - "ui-kit/react/notification-feed" + "ui-kit/react/plugins/overview", + "ui-kit/react/plugins/text", + "ui-kit/react/plugins/image", + "ui-kit/react/plugins/video", + "ui-kit/react/plugins/file", + "ui-kit/react/plugins/audio", + "ui-kit/react/plugins/stickers", + "ui-kit/react/plugins/polls", + "ui-kit/react/plugins/collaborative-document", + "ui-kit/react/plugins/collaborative-whiteboard", + "ui-kit/react/plugins/ai", + "ui-kit/react/plugins/group-action", + "ui-kit/react/plugins/call-action", + "ui-kit/react/plugins/delete", + "ui-kit/react/plugins/custom-plugin", + "ui-kit/react/plugins/text-formatters" ] }, { - "group": "Reference", + "group": "Architecture", + "pages": [ + "ui-kit/react/cometchat-provider", + "ui-kit/react/event-system" + ] + }, + { + "group": "Customization", "pages": [ - "ui-kit/react/methods", - "ui-kit/react/events" + "ui-kit/react/theming", + "ui-kit/react/theme/color-resources", + "ui-kit/react/theme/message-bubble-styling", + "ui-kit/react/localization", + "ui-kit/react/sound-manager" ] }, { "group": "Guides", "pages": [ - "ui-kit/react/guide-overview", - "ui-kit/react/guide-threaded-messages", "ui-kit/react/guide-block-unblock-user", - "ui-kit/react/guide-new-chat", - "ui-kit/react/guide-message-privately", + "ui-kit/react/guide-group-chat-setup", + "ui-kit/react/guide-threaded-messages", "ui-kit/react/guide-search-messages", - "ui-kit/react/guide-call-log-details", - "ui-kit/react/guide-group-chat", - "ui-kit/react/custom-text-formatter-guide", - "ui-kit/react/mentions-formatter-guide", - "ui-kit/react/url-formatter-guide", - "ui-kit/react/shortcut-formatter-guide" + "ui-kit/react/guide-new-chat-creation", + "ui-kit/react/guide-message-privately" + ] + }, + { + "group": "Reference", + "pages": [ + "ui-kit/react/methods" ] }, { "group": "Migration Guide", "pages": [ - "ui-kit/react/upgrading-from-v5" + "ui-kit/react/migration-overview", + "ui-kit/react/migration-property-changes" ] }, "ui-kit/react/troubleshooting", "ui-kit/react/link/sample", - "ui-kit/react/link/changelog", "ui-kit/react/link/figma" ] } ] }, { - "version": "v7", + "version": "v6", "default": false, "groups": [ { "group": " ", "pages": [ - "ui-kit/react/v7/overview", + "ui-kit/react/v6/overview", { "group": "Getting Started", "pages": [ { "group": "React.js", "pages": [ - "ui-kit/react/v7/integration-react", - "ui-kit/react/v7/react-conversation", - "ui-kit/react/v7/react-one-to-one-chat", - "ui-kit/react/v7/react-tab-based-chat" + "ui-kit/react/v6/react-js-integration", + "ui-kit/react/v6/react-conversation", + "ui-kit/react/v6/react-one-to-one-chat", + "ui-kit/react/v6/react-tab-based-chat" ] }, { "group": "Next.js", "pages": [ - "ui-kit/react/v7/integration-nextjs", - "ui-kit/react/v7/next-conversation", - "ui-kit/react/v7/next-one-to-one-chat", - "ui-kit/react/v7/next-tab-based-chat" + "ui-kit/react/v6/next-js-integration", + "ui-kit/react/v6/next-conversation", + "ui-kit/react/v6/next-one-to-one-chat", + "ui-kit/react/v6/next-tab-based-chat" ] }, { - "group": "React Router", + "group": "React-Router", "pages": [ - "ui-kit/react/v7/integration-react-router", - "ui-kit/react/v7/react-router-conversation", - "ui-kit/react/v7/react-router-one-to-one-chat", - "ui-kit/react/v7/react-router-tab-based-chat" + "ui-kit/react/v6/react-router-integration", + "ui-kit/react/v6/react-router-conversation", + "ui-kit/react/v6/react-router-one-to-one-chat", + "ui-kit/react/v6/react-router-tab-based-chat" ] }, { "group": "Astro", "pages": [ - "ui-kit/react/v7/integration-astro", - "ui-kit/react/v7/astro-conversation", - "ui-kit/react/v7/astro-one-to-one-chat", - "ui-kit/react/v7/astro-tab-based-chat" + "ui-kit/react/v6/astro-integration", + "ui-kit/react/v6/astro-conversation", + "ui-kit/react/v6/astro-one-to-one-chat", + "ui-kit/react/v6/astro-tab-based-chat" ] }, - "ui-kit/react/v7/calling-integration" + "ui-kit/react/v6/calling-integration" ] }, { @@ -641,97 +662,82 @@ { "group": "Chat", "pages": [ - "ui-kit/react/v7/core-features", - "ui-kit/react/v7/extensions", - "ui-kit/react/v7/ai-features" + "ui-kit/react/v6/core-features", + "ui-kit/react/v6/extensions", + "ui-kit/react/v6/ai-features" ] }, - "ui-kit/react/v7/call-features" - ] - }, - { - "group": "Components", - "pages": [ - "ui-kit/react/v7/components-overview", - "ui-kit/react/v7/components/conversations", - "ui-kit/react/v7/components/users", - "ui-kit/react/v7/components/groups", - "ui-kit/react/v7/components/group-members", - "ui-kit/react/v7/components/message-header", - "ui-kit/react/v7/components/message-list", - "ui-kit/react/v7/components/message-composer", - "ui-kit/react/v7/components/message-bubble", - "ui-kit/react/v7/components/thread-header", - "ui-kit/react/v7/components/message-information", - "ui-kit/react/v7/components/reactions", - "ui-kit/react/v7/components/reaction-list", - "ui-kit/react/v7/components/action-bubble", - "ui-kit/react/v7/components/incoming-call", - "ui-kit/react/v7/components/outgoing-call", - "ui-kit/react/v7/components/call-logs", - "ui-kit/react/v7/components/search", - "ui-kit/react/v7/components/ai-assistant-chat" + "ui-kit/react/v6/call-features", + "ui-kit/react/v6/campaigns" ] }, { - "group": "Plugins", + "group": "Theming", "pages": [ - "ui-kit/react/v7/plugins/overview", - "ui-kit/react/v7/plugins/text", - "ui-kit/react/v7/plugins/image", - "ui-kit/react/v7/plugins/video", - "ui-kit/react/v7/plugins/file", - "ui-kit/react/v7/plugins/audio", - "ui-kit/react/v7/plugins/stickers", - "ui-kit/react/v7/plugins/polls", - "ui-kit/react/v7/plugins/collaborative-document", - "ui-kit/react/v7/plugins/collaborative-whiteboard", - "ui-kit/react/v7/plugins/ai", - "ui-kit/react/v7/plugins/message-translation", - "ui-kit/react/v7/plugins/group-action", - "ui-kit/react/v7/plugins/call-action", - "ui-kit/react/v7/plugins/delete", - "ui-kit/react/v7/plugins/custom-plugin", - "ui-kit/react/v7/plugins/text-formatters" + "ui-kit/react/v6/theme", + "ui-kit/react/v6/theme/color-resources", + "ui-kit/react/v6/theme/message-bubble-styling", + "ui-kit/react/v6/localize", + "ui-kit/react/v6/sound-manager" ] }, { - "group": "Architecture", + "group": "Components", "pages": [ - "ui-kit/react/v7/cometchat-provider", - "ui-kit/react/v7/event-system" + "ui-kit/react/v6/components-overview", + "ui-kit/react/v6/conversations", + "ui-kit/react/v6/users", + "ui-kit/react/v6/groups", + "ui-kit/react/v6/group-members", + "ui-kit/react/v6/message-header", + "ui-kit/react/v6/message-list", + "ui-kit/react/v6/message-composer", + "ui-kit/react/v6/compact-message-composer", + "ui-kit/react/v6/message-template", + "ui-kit/react/v6/thread-header", + "ui-kit/react/v6/incoming-call", + "ui-kit/react/v6/outgoing-call", + "ui-kit/react/v6/call-buttons", + "ui-kit/react/v6/call-logs", + "ui-kit/react/v6/search", + "ui-kit/react/v6/ai-assistant-chat", + "ui-kit/react/v6/notification-feed" ] }, { - "group": "Customization", + "group": "Reference", "pages": [ - "ui-kit/react/v7/theming", - "ui-kit/react/v7/theme/color-resources", - "ui-kit/react/v7/theme/message-bubble-styling", - "ui-kit/react/v7/localization", - "ui-kit/react/v7/sound-manager" + "ui-kit/react/v6/methods", + "ui-kit/react/v6/events" ] }, { "group": "Guides", "pages": [ - "ui-kit/react/v7/guide-block-unblock-user", - "ui-kit/react/v7/guide-group-chat-setup", - "ui-kit/react/v7/guide-threaded-messages", - "ui-kit/react/v7/guide-search-messages", - "ui-kit/react/v7/guide-new-chat-creation", - "ui-kit/react/v7/guide-message-privately" + "ui-kit/react/v6/guide-overview", + "ui-kit/react/v6/guide-threaded-messages", + "ui-kit/react/v6/guide-block-unblock-user", + "ui-kit/react/v6/guide-new-chat", + "ui-kit/react/v6/guide-message-privately", + "ui-kit/react/v6/guide-search-messages", + "ui-kit/react/v6/guide-call-log-details", + "ui-kit/react/v6/guide-group-chat", + "ui-kit/react/v6/custom-text-formatter-guide", + "ui-kit/react/v6/mentions-formatter-guide", + "ui-kit/react/v6/url-formatter-guide", + "ui-kit/react/v6/shortcut-formatter-guide" ] }, { - "group": "Reference", + "group": "Migration Guide", "pages": [ - "ui-kit/react/v7/methods" + "ui-kit/react/v6/upgrading-from-v5" ] }, - "ui-kit/react/v7/troubleshooting", - "ui-kit/react/v7/link/sample", - "ui-kit/react/v7/link/figma" + "ui-kit/react/v6/troubleshooting", + "ui-kit/react/v6/link/sample", + "ui-kit/react/v6/link/changelog", + "ui-kit/react/v6/link/figma" ] } ] diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx deleted file mode 100644 index 50b37fbea..000000000 --- a/ui-kit/react/ai-assistant-chat.mdx +++ /dev/null @@ -1,957 +0,0 @@ ---- -title: "AI Assistant Chat" -description: "Composite AI agent chat with streaming responses, quick suggestions, new-chat reset, and chat history sidebar." ---- - -```json -{ - "component": "CometChatAIAssistantChat", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";", - "description": "Composite AI agent chat with streaming responses, quick suggestions, new-chat reset, and chat history sidebar.", - "cssRootClass": ".cometchat-ai-assistant-chat", - "requiredProps": { - "user": "CometChat.User — the AI agent user object" - }, - "optionalProps": { - "streamingSpeed": "number", - "suggestedMessages": "string[]", - "hideSuggestedMessages": "boolean", - "hideNewChat": "boolean", - "hideChatHistory": "boolean", - "showBackButton": "boolean", - "showCloseButton": "boolean", - "loadLastAgentConversation": "boolean", - "parentMessageId": "number", - "aiAssistantTools": "CometChatAIAssistantTools", - "templates": "CometChatMessageTemplate[]", - "headerItemView": "JSX.Element", - "headerTitleView": "JSX.Element", - "headerSubtitleView": "JSX.Element", - "headerLeadingView": "JSX.Element", - "headerTrailingView": "JSX.Element", - "headerAuxiliaryButtonView": "JSX.Element", - "emptyChatImageView": "JSX.Element", - "emptyChatGreetingView": "JSX.Element", - "emptyChatIntroMessageView": "JSX.Element", - "emptyView": "JSX.Element", - "loadingView": "JSX.Element", - "errorView": "JSX.Element" - }, - "callbacks": { - "onBackButtonClicked": "() => void", - "onCloseButtonClicked": "() => void", - "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void", - "onError": "(e: CometChat.CometChatException) => void" - }, - "events": null, - "minimalExample": "" -} -``` - - -## Where It Fits - -`CometChatAIAssistantChat` is a standalone AI chat panel. It composes an internal message header, message list, and message composer into a self-contained AI conversation experience. It requires a `CometChat.User` representing the AI agent. - - -**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com). - - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantPanel() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( -
- -
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantDemo() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ; -} -``` - -Root CSS class: `.cometchat-ai-assistant-chat` - ---- - -## Actions and Events - -### Callback Props - -#### onBackButtonClicked - -Fires when the header back button is clicked. Requires `showBackButton={true}`. - -| Detail | Value | -| --- | --- | -| When it fires | User clicks the back button | -| Payload type | `() => void` | - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantWithBack() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - console.log("Back clicked")} - /> - ); -} -``` - -#### onCloseButtonClicked - -Fires when the header close button is clicked. Requires `showCloseButton={true}`. - -| Detail | Value | -| --- | --- | -| When it fires | User clicks the close button | -| Payload type | `() => void` | - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantWithClose() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - console.log("Close clicked")} - /> - ); -} -``` - -#### onSendButtonClick - -Fires when the composer send button is clicked. - -| Detail | Value | -| --- | --- | -| When it fires | User clicks the send button | -| Payload type | `(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void` | - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantWithSend() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - console.log("Sent:", message)} - /> - ); -} -``` - -#### onError - -Fires when the component encounters an internal error. - -| Detail | Value | -| --- | --- | -| When it fires | Any internal error during rendering or data fetching | -| Payload type | `(error: CometChat.CometChatException) => void` | - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantWithError() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - console.error("AI chat error:", error)} - /> - ); -} -``` - -### Global UI Events - -The AI Assistant Chat component does not emit global UI events. Interaction handling uses the callback props above. - -### SDK Events (Real-Time, Automatic) - -The component internally manages SDK communication for AI streaming. No manual listener attachment needed. - ---- - -## Custom View Slots - -| Slot | Type | Replaces | -| --- | --- | --- | -| `headerItemView` | `JSX.Element` | Entire header list item | -| `headerTitleView` | `JSX.Element` | Header title text | -| `headerSubtitleView` | `JSX.Element` | Header subtitle text | -| `headerLeadingView` | `JSX.Element` | Header avatar / left section | -| `headerTrailingView` | `JSX.Element` | Header right section | -| `headerAuxiliaryButtonView` | `JSX.Element` | Header auxiliary buttons (New Chat, History) | -| `emptyChatImageView` | `JSX.Element` | Empty state image | -| `emptyChatGreetingView` | `JSX.Element` | Empty state greeting title | -| `emptyChatIntroMessageView` | `JSX.Element` | Empty state intro subtitle | -| `emptyView` | `JSX.Element` | Message list empty state | -| `loadingView` | `JSX.Element` | Loading state | -| `errorView` | `JSX.Element` | Error state | -| `aiAssistantTools` | `CometChatAIAssistantTools` | Tool/function call handlers | -| `templates` | `CometChatMessageTemplate[]` | Message bubble templates | - -### emptyChatImageView - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantCustomImage() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - } - /> - ); -} -``` - -### emptyChatGreetingView - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantCustomGreeting() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - - Free Plan . - Upgrade - - } - /> - ); -} -``` - - -```css lines -.cometchat-ai-assistant-chat__empty-chat-greeting { - display: flex; - padding: 8px 20px; - justify-content: center; - align-items: center; - gap: 8px; - border-radius: 6px; - border: 1px solid #e8e8e8; - background: #f5f5f5; - width: fit-content; - align-self: center; -} - -.cometchat-ai-assistant-chat__empty-chat-greeting .upgrade-button { - color: #6852d6; -} -``` - - - -### emptyChatIntroMessageView - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function AIAssistantCustomIntro() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - - Hey, nice to see you What's new? - - } - /> - ); -} -``` - - -```css lines -.cometchat-ai-assistant-chat__empty-chat-intro { - display: flex; - padding: 12px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 12px; - background: #f9f8fd; - width: 172px; - color: #141414; - text-align: center; - font-size: 16px; - font-weight: 400; - line-height: 140%; - margin: 10px 0; -} -``` - - - -### aiAssistantTools - -Pass a `CometChatAIAssistantTools` instance to enable tool/function calls during assistant replies. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatAIAssistantChat, - CometChatAIAssistantTools, -} from "@cometchat/chat-uikit-react"; - -function AIAssistantWithTools() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - const tools = new CometChatAIAssistantTools({ - getCurrentWeather: ({ location }: { location: string }) => { - console.log("Fetching weather for", location); - }, - createTicket: ({ title }: { title: string }) => { - console.log("Create ticket:", title); - }, - }); - - if (!agent) return null; - - return ; -} -``` - -### templates - -Custom message templates to control message bubble rendering. See [CometChatMessageTemplate](/ui-kit/react/message-template). - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatAIAssistantChat, - ChatConfigurator, -} from "@cometchat/chat-uikit-react"; - -function AIAssistantWithTemplates() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - const getTemplates = () => { - const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); - templates.map((data) => { - data.footerView = (message) => null; - }); - return templates; - }; - - if (!agent) return null; - - return ; -} -``` - ---- - -## Common Patterns - -### AI assistant with suggestions and history - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function FullFeaturedAssistant() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - console.log("Navigate back")} - /> - ); -} -``` - -### Minimal assistant — no chrome - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -function MinimalAssistant() { - const [agent, setAgent] = useState(); - - useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - if (!agent) return null; - - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-ai-assistant-chat`) consumes these tokens via `var()`. -3. Overrides target `.cometchat-ai-assistant-chat` descendant selectors. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-ai-assistant-chat` | -| Wrapper | `.cometchat-ai-assistant-chat__wrapper` | -| Header wrapper | `.cometchat-ai-assistant-chat__header-wrapper` | -| Header auxiliary view | `.cometchat-ai-assistant-chat__header-auxiliary-view` | -| Message list wrapper | `.cometchat-ai-assistant-chat__message-list-wrapper` | -| Composer wrapper | `.cometchat-ai-assistant-chat__composer-wrapper` | -| Send button | `.cometchat-ai-assistant-chat__send-button-view` | -| Send button (active) | `.cometchat-ai-assistant-chat__send-button-view--active` | -| Send button (streaming) | `.cometchat-ai-assistant-chat__send-button-view--streaming` | -| Empty state | `.cometchat-ai-assistant-chat__empty-state` | -| Empty state content | `.cometchat-ai-assistant-chat__empty-state-content` | -| Empty state icon | `.cometchat-ai-assistant-chat__empty-state-icon` | -| Greeting message | `.cometchat-ai-assistant-chat__empty-state-greeting-message` | -| Intro message | `.cometchat-ai-assistant-chat__empty-state-intro-message` | -| Suggested messages | `.cometchat-ai-assistant-chat__empty-state-suggested-messages` | -| Suggestion pill | `.cometchat-ai-assistant-chat__suggested-message-pill` | -| Suggestion icon | `.cometchat-ai-assistant-chat__suggested-message-icon` | -| Chat history sidebar | `.cometchat-ai-assistant-chat__sidebar` | -| Sidebar open | `.cometchat-ai-assistant-chat__sidebar--open` | -| Sidebar overlay | `.cometchat-ai-assistant-chat__sidebar-overlay` | -| Copy button | `.cometchat-ai-assistant-message-bubble__copy` | - -### Example: Brand-themed AI assistant - - - - - -```css lines -.cometchat-ai-assistant-chat - .cometchat-ai-assistant-chat__suggested-message-pill { - background: #30a46c; - color: #ffffff; - font-size: 9px; -} - -.cometchat-ai-assistant-chat - .cometchat-ai-assistant-chat__suggested-message-pill - .cometchat-ai-assistant-chat__suggested-message-icon { - background: #ffffff; - width: 9.55px; - height: 9.55px; -} - -.cometchat-ai-assistant-chat - .cometchat-ai-assistant-chat__header-auxiliary-view - .cometchat-button - .cometchat-button__icon-default { - background: #30a46c; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onBackButtonClicked={() => navigate(-1)}` | -| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideNewChat={true}` | -| Replace a section of the UI | Component props | View slot props | `emptyChatGreetingView={
Hello
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-ai-assistant-chat` class | `.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { background: #30a46c; }` | - ---- - -## Props - -### aiAssistantTools - -| Key | Value | -| --- | --- | -| Type | `CometChatAIAssistantTools` | -| Default | `undefined` | - -Tool/function call handlers for the AI assistant. - ---- - -### emptyView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom empty state for the message list. - ---- - -### emptyChatGreetingView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom greeting title in the empty chat state. Default uses agent metadata `greetingMessage` or user name. - ---- - -### emptyChatImageView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom image in the empty chat state. - ---- - -### emptyChatIntroMessageView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom intro subtitle in the empty chat state. Default uses agent metadata `introductoryMessage`. - ---- - -### errorView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom error state view. - ---- - -### headerAuxiliaryButtonView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the header auxiliary buttons (New Chat, History). - ---- - -### headerItemView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the entire header list item. - ---- - -### headerLeadingView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the header avatar / left section. - ---- - -### headerSubtitleView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the header subtitle text. - ---- - -### headerTitleView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the header title text. - ---- - -### headerTrailingView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Replaces the header right section. - ---- - -### hideChatHistory - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `undefined` | - -Hides the History button/sidebar. - ---- - -### hideNewChat - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `undefined` | - -Hides the New Chat button in header. - ---- - -### hideSuggestedMessages - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `undefined` | - -Hides the suggested messages section in the empty state. - ---- - -### loadLastAgentConversation - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - -Loads the most recent existing agent conversation on mount. - ---- - -### loadingView - -| Key | Value | -| --- | --- | -| Type | `React.JSX.Element` | -| Default | `undefined` | - -Custom loading state view. - ---- - -### onBackButtonClicked - -| Key | Value | -| --- | --- | -| Type | `() => void` | -| Default | `undefined` | - -Fires when the header back button is clicked. Requires `showBackButton={true}`. - ---- - -### onCloseButtonClicked - -| Key | Value | -| --- | --- | -| Type | `() => void` | -| Default | `undefined` | - -Fires when the header close button is clicked. Requires `showCloseButton={true}`. - ---- - -### onError - -| Key | Value | -| --- | --- | -| Type | `(e: CometChat.CometChatException) => void` | -| Default | `undefined` | - -Fires on internal errors. - ---- - -### onSendButtonClick - -| Key | Value | -| --- | --- | -| Type | `(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void` | -| Default | `undefined` | - -Fires when the composer send button is clicked. - ---- - -### parentMessageId - -| Key | Value | -| --- | --- | -| Type | `number` | -| Default | `undefined` | - -Loads a specific agent conversation. Takes priority over `loadLastAgentConversation`. - ---- - -### showBackButton - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `undefined` | - -Shows back button in header. - ---- - -### showCloseButton - -| Key | Value | -| --- | --- | -| Type | `boolean` | -| Default | `undefined` | - -Shows close button in header. - ---- - -### streamingSpeed - -| Key | Value | -| --- | --- | -| Type | `number` | -| Default | `undefined` | - -Characters-per-second speed for streaming replies. - ---- - -### suggestedMessages - -| Key | Value | -| --- | --- | -| Type | `string[]` | -| Default | `undefined` | - -Quick prompt suggestions displayed in the empty state. - ---- - -### templates - -| Key | Value | -| --- | --- | -| Type | `CometChatMessageTemplate[]` | -| Default | `undefined` | - -Custom message bubble templates. See [CometChatMessageTemplate](/ui-kit/react/message-template). - ---- - -### user - -| Key | Value | -| --- | --- | -| Type | `CometChat.User` | -| Default | — (required) | - -The AI agent user object. Must be fetched via `CometChat.getUser()` before passing. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-ai-assistant-chat` | -| Wrapper | `.cometchat-ai-assistant-chat__wrapper` | -| Header wrapper | `.cometchat-ai-assistant-chat__header-wrapper` | -| Header auxiliary view | `.cometchat-ai-assistant-chat__header-auxiliary-view` | -| Message list wrapper | `.cometchat-ai-assistant-chat__message-list-wrapper` | -| Composer wrapper | `.cometchat-ai-assistant-chat__composer-wrapper` | -| Send button | `.cometchat-ai-assistant-chat__send-button-view` | -| Send button (active) | `.cometchat-ai-assistant-chat__send-button-view--active` | -| Send button (streaming) | `.cometchat-ai-assistant-chat__send-button-view--streaming` | -| Empty state | `.cometchat-ai-assistant-chat__empty-state` | -| Empty state content | `.cometchat-ai-assistant-chat__empty-state-content` | -| Empty state icon | `.cometchat-ai-assistant-chat__empty-state-icon` | -| Greeting message | `.cometchat-ai-assistant-chat__empty-state-greeting-message` | -| Intro message | `.cometchat-ai-assistant-chat__empty-state-intro-message` | -| Suggested messages | `.cometchat-ai-assistant-chat__empty-state-suggested-messages` | -| Suggestion pill | `.cometchat-ai-assistant-chat__suggested-message-pill` | -| Suggestion icon | `.cometchat-ai-assistant-chat__suggested-message-icon` | -| Chat history sidebar | `.cometchat-ai-assistant-chat__sidebar` | -| Sidebar open | `.cometchat-ai-assistant-chat__sidebar--open` | -| Sidebar overlay | `.cometchat-ai-assistant-chat__sidebar-overlay` | -| Copy button | `.cometchat-ai-assistant-message-bubble__copy` | diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index e929a26f5..b2090b6c8 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -8,9 +8,9 @@ description: "AI-powered features in CometChat's React UI Kit: Conversation Star | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) | +| Required setup | Wrap app in `CometChatProvider` with valid credentials + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) | | AI features | Conversation Starter, Smart Replies, Conversation Summary | -| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Smart Replies, Summary), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) | +| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer) (Smart Replies, Summary), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) | | Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required | @@ -19,13 +19,17 @@ description: "AI-powered features in CometChat's React UI Kit: Conversation Star CometChat AI features enhance user interaction by providing contextual suggestions and summaries. Each feature is activated from the Dashboard and auto-integrates into UI Kit components. + +The [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) component requires `CometChatAIPlugin` to be configured in your `CometChatProvider` plugins. See the [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) component page for setup details. + + ## Smart Chat Features ### Conversation Starter Displays AI-generated opening lines when a user starts a new chat. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). -Auto-integrates into [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into [MessageList](/ui-kit/react/components/message-list) when activated. @@ -35,7 +39,7 @@ Auto-integrates into [MessageList](/ui-kit/react/message-list) when activated. AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). -Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/components/message-composer) when activated. @@ -45,7 +49,7 @@ Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/components/message-composer) when activated. @@ -54,13 +58,13 @@ Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message ## Next Steps - + AI-powered assistant component - + Customize the message list where AI features appear - + Customize the composer with Smart Replies and Summary diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 975ac29b3..0dd5a0f59 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -1,7 +1,7 @@ --- title: "Conversation List + Message View" sidebarTitle: "Conversation List + Message View" -description: "Build CometChat UI Kit conversation list and message view layouts in Astro with navigation, headers, lists, and composers." +description: "Build a two-panel conversation list + message view layout in Astro with CometChat UI Kit." --- @@ -9,23 +9,24 @@ description: "Build CometChat UI Kit conversation list and message view layouts | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Astro (with `@astrojs/react` islands) | +| Framework | Astro | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | -| SSR | `client:only="react"` directive — CometChat requires browser APIs | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/integration-astro) first | +| SSR | React island with `client:only="react"` directive | | Pattern | WhatsApp Web, Slack, Microsoft Teams | -This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. +This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/integration-astro) (project created, UI Kit installed, init + login working). - + + --- ## What You're Building @@ -38,233 +39,138 @@ Three sections working together: --- -## Step 1 — Create the React Island - -Create a `ChatApp` component inside `src/components/`. This is a React island that handles init, login, and renders the full chat experience. - - - - - - - - - +## Full Code - - +Create a React island component with the chat UI, then render it in an Astro page with `client:only="react"`. -```tsx title="ChatApp.tsx" lines highlight={15-17, 20} -import { useEffect, useState } from "react"; +```tsx title="src/components/ConversationChat.tsx" +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatProvider, CometChatConversations, - CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; -import "./ChatApp.css"; - -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; - -const UID = "cometchat-uid-1"; // Replace with your actual UID +import "@cometchat/chat-uikit-react/styles"; -export default function ChatApp() { - const [user, setUser] = useState(undefined); +export default function ConversationChat() { const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); - useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login(UID) - .then((u) => { - console.log("Login Successful", { u }); - setUser(u); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); - }, []); - - if (!user) return
Initializing Chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { + const entity = conversation.getConversationWith(); + if (conversation.getConversationType() === "user") { + setSelectedUser(entity as CometChat.User); + setSelectedGroup(undefined); + } else { + setSelectedGroup(entity as CometChat.Group); + setSelectedUser(undefined); + } + }; return ( -
-
- { - let item: any = activeItem; - if (activeItem instanceof CometChat.Conversation) { - item = activeItem.getConversationWith(); - } - if (item instanceof CometChat.User) { - setSelectedUser(item); - setSelectedGroup(undefined); - } else if (item instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(item); - } else { - setSelectedUser(undefined); - setSelectedGroup(undefined); - } - }} - /> -
- - {selectedUser || selectedGroup ? ( -
- - - + +
+
+
- ) : ( -
Select a conversation to start chatting
- )} -
- ); -} -``` - - - - -```css title="ChatApp.css" lines -.conversations-with-messages { - display: flex; - height: 100%; - width: 100%; -} - -.conversations-wrapper { - height: 100%; - width: 480px; - overflow: hidden; - display: flex; - flex-direction: column; -} -.conversations-wrapper > .cometchat { - overflow: hidden; -} - -.messages-wrapper { - width: calc(100% - 480px); - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #F5F5F5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} - -.cometchat .cometchat-message-composer { - border-radius: 0px; + {selectedUser || selectedGroup ? ( +
+ + + +
+ ) : ( +
+ Select a conversation to start chatting +
+ )} +
+ + ); } ``` - - - -**How it works**: -- Init and login happen inside `useEffect` — the component only renders chat UI after login resolves. -- When a conversation is tapped, the `User` or `Group` is extracted from the `Conversation` object. -- `selectedUser` / `selectedGroup` state drives which chat is displayed — pass either `user` or `group` to the message components, never both. - +```astro title="src/pages/chat.astro" --- - -## Step 2 — Render the Astro Page - -Import the island and hydrate it client-side using `client:only="react"`. - -```astro title="src/pages/index.astro" lines ---- -import ChatApp from "../components/ChatApp.tsx"; -import "../styles/globals.css"; +import ConversationChat from '../components/ConversationChat.tsx'; --- - CometChat + Astro + + Chat - - + + ``` -The `client:only="react"` directive ensures the component skips SSR entirely and only renders in the browser — required because CometChat needs `window` and `WebSocket`. +--- + +## How It Works + +1. **`client:only="react"`** tells Astro to skip server-rendering and hydrate the component entirely on the client. This is required because CometChat uses browser APIs. +2. **React island** — the CometChat UI lives in a self-contained React component. Astro handles the page shell, React handles the interactive chat. +3. **CometChatProvider** wraps the entire tree — it supplies theme, locale, and event context to all CometChat components. +4. **CometChatConversations** renders the sidebar list. When a user clicks a conversation, `onItemClick` fires with the `Conversation` object. +5. **handleConversationClick** extracts the `User` or `Group` from the conversation and stores it in state. +6. **Message components** (`MessageHeader`, `MessageList`, `MessageComposer`) receive either `user` or `group` as a prop — never both at the same time. --- -## Step 3 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the conversation list on the left. Tap any conversation to load messages on the right. +Open `http://localhost:4321/chat`. You should see the conversation list on the left. Click any conversation to load messages on the right. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Single chat window without a sidebar + + + Tabbed navigation with Chats, Calls, Users Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> - Back to the main setup guide - - - Chat features included out of the box + + Customize colors, fonts, and styles diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx deleted file mode 100644 index df460f8f8..000000000 --- a/ui-kit/react/astro-integration.mdx +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: "Astro Integration" -sidebarTitle: "Integration" -description: "Integrate CometChat React UI Kit with Astro using client-only rendering, app credentials, package setup, initialization, and login." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Peer deps | `react` >=18, `react-dom` >=18, `@astrojs/react` | -| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | -| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | -| Order | `init()` → `login()` → render. Breaking this order = blank screen | -| Auth Key | Dev/testing only. Use Auth Token in production | -| SSR | CometChat requires browser APIs — use `client:only="react"` directive on Astro islands | -| CSS | `import "@cometchat/chat-uikit-react/css-variables.css"` in your React island | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) | -| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | - - - -This guide walks you through adding CometChat to an Astro app using React islands. By the end you'll have a working chat UI. - - -CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In Astro, always load CometChat components using the `client:only="react"` directive so they only render client-side. - - ---- - -## Integrate with AI Coding Agents - -Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have. - -```bash -npx @cometchat/skills add -``` - -Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs. - -Then in your IDE: - -``` -/cometchat add chat to my app -``` - -The skill detects Astro, verifies `@astrojs/react` is configured, and reads your routes, nav, and components before proposing a placement. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It shows the plan and waits for your approval before writing code. - -After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, floating widget, production auth, user management, and diagnostics. - -Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills). - ---- - -## Prerequisites - -You need three things from the [CometChat Dashboard](https://app.cometchat.com/): - -| Credential | Where to find it | -| --- | --- | -| App ID | Dashboard → Your App → Credentials | -| Auth Key | Dashboard → Your App → Credentials | -| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | - -You also need Node.js (v16+) and npm/yarn installed. - - -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. - - ---- - -## Step 1 — Create an Astro Project - - - -```bash lines -npm create astro@latest my-app -cd my-app -``` - - -```bash lines -pnpm create astro@latest my-app -cd my-app -``` - - -```bash lines -yarn create astro my-app -cd my-app -``` - - - ---- - -## Step 2 — Add React and Install the UI Kit - -First, add the React integration to Astro: - -```bash lines -npx astro add react -``` - -This updates your `astro.config.mjs` automatically. Verify it includes: - -```js title="astro.config.mjs" lines -import { defineConfig } from "astro/config"; -import react from "@astrojs/react"; - -export default defineConfig({ - integrations: [react()], -}); -``` - -Then install the UI Kit: - - - -```bash lines -npm install @cometchat/chat-uikit-react -``` - - -```bash lines -yarn add @cometchat/chat-uikit-react -``` - - - -This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically. - -If you want voice/video calling, also install: - -```bash lines -npm install @cometchat/calls-sdk-javascript -``` - ---- - -## Step 3 — Initialize CometChat - -In Astro, CometChat init and login happen inside your React island component (since they need browser APIs). Here's the pattern: - -```tsx lines highlight={7-9} -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -/** - * CometChat Constants - Replace with your actual credentials - */ -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your actual App ID from CometChat - REGION: "REGION", // Replace with your App's Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token) -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - -CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("CometChat UI Kit initialized successfully."); - }) - .catch((error) => { - console.error("CometChat UI Kit initialization failed:", error); - }); -``` - - -`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently. - - ---- - -## Step 4 — Login - -After init resolves, log the user in. For development, use one of the pre-created test UIDs: - -`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` - -```ts lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -const UID = "UID"; // Replace with your actual UID - -CometChatUIKit.getLoggedinUser().then((user) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful:", { user }); - // Mount your app - }) - .catch(console.log); - } else { - // Already logged in — mount your app - } -}); -``` - -Key points: -- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily. -- `login(uid)` skips the API call if a session already exists and returns the cached user. -- Components must not render until login resolves — use a state flag to gate rendering. - - -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. - - ---- - -## Step 5 — Add the CSS Import - -Import the CometChat CSS inside your React island component: - -```tsx lines -import "@cometchat/chat-uikit-react/css-variables.css"; -``` - -Also ensure your global CSS sets `height: 100%` on the root elements. Create or update `src/styles/globals.css`: - -```css title="src/styles/globals.css" lines -html, -body { - margin: 0; - padding: 0; - height: 100%; -} -``` - -Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport. - ---- - -## Step 6 — Choose a Chat Experience - -Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide. - -### Conversation List + Message View - -Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack. - -- Two-panel layout with conversation list and active chat window -- Switch between one-to-one and group conversations -- Tap-to-view on mobile — tapping a conversation opens the message view -- Real-time updates and message sync across sessions - - - - - - - Step-by-step guide to build this layout - - ---- - -### One-to-One / Group Chat - -Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging. - -- Dedicated chat window for one-on-one or group messaging -- No conversation list — users go directly into the chat -- Full-screen experience optimized for mobile -- Ideal for support chat or community messaging - - - - - - - Step-by-step guide to build this layout - - ---- - -### Tab-Based Chat - -Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps. - -- Tab navigation between Chat, Call Logs, Users, and Settings -- Full-screen messaging within each tab -- Unified experience for conversations, call history, and settings -- Scales well for adding future features like notifications or contacts - - - - - - - Step-by-step guide to build this layout - - ---- - -## Build Your Own Chat Experience - -Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - -- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling -- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK - ---- - -## Next Steps - - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - - Chat features included out of the box - - - Common issues and fixes - - diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index 99d45e160..e2e88a3c9 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -1,7 +1,7 @@ --- title: "One-to-One / Group Chat" sidebarTitle: "One-to-One / Group Chat" -description: "Build focused CometChat UI Kit chat screens in Astro with headers, message lists, composers, users, groups, and direct navigation." +description: "Build a single chat window for one-to-one or group messaging in Astro with CometChat UI Kit." --- @@ -9,23 +9,24 @@ description: "Build focused CometChat UI Kit chat screens in Astro with headers, | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Astro (with `@astrojs/react` islands) | +| Framework | Astro | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | -| SSR | `client:only="react"` directive — CometChat requires browser APIs | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/integration-astro) first | +| SSR | React island with `client:only="react"` directive | | Pattern | Support chat, embedded widgets, focused messaging | This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/integration-astro) (project created, UI Kit installed, init + login working). - + + --- ## What You're Building @@ -38,225 +39,137 @@ Three components stacked vertically: --- -## Step 1 — Create the React Island - -Create a `OneToOneChat` component inside `src/components/`. This handles init, login, fetches the target user, and renders the chat UI. +## Full Code - - - - - - - - +Create a React island component with the chat UI, then render it in an Astro page with `client:only="react"`. - - - -```tsx title="OneToOneChat.tsx" lines highlight={14-16, 37, 55, 62} +```tsx title="src/components/DirectChat.tsx" import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatMessageComposer, + CometChatProvider, CometChatMessageHeader, CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; -import "./OneToOneChat.css"; +import "@cometchat/chat-uikit-react/styles"; -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; +const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with -export default function OneToOneChat() { - const [user, setUser] = useState(undefined); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); +export default function DirectChat() { + const [chatUser, setChatUser] = useState(undefined); useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login("cometchat-uid-2") - .then((u) => { - console.log("Login Successful", { u }); - setUser(u); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); + CometChat.getUser(RECIPIENT_UID).then( + (user) => setChatUser(user), + (error) => console.error("User fetch failed:", error) + ); }, []); - useEffect(() => { - if (user) { - // Fetch the user whose chat you want to load - const UID = "cometchat-uid-1"; - CometChat.getUser(UID).then( - (u) => setSelectedUser(u), - (error) => console.log("User fetching failed with error:", error) - ); - - // To load a group chat instead, uncomment below: - // const GUID = "GUID"; - // CometChat.getGroup(GUID).then( - // (group) => setSelectedGroup(group), - // (error) => console.log("Group fetching failed with error:", error) - // ); - } - }, [user]); - - if (!user) return
Initializing Chat...
; + if (!chatUser) return
Loading chat...
; return ( - <> - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Set a user or group UID in OneToOneChat.tsx to start chatting -
- )} - + +
+ + + +
+ ); } ``` - - - -```css title="OneToOneChat.css" lines -.messages-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #F5F5F5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} +```astro title="src/pages/chat.astro" +--- +import DirectChat from '../components/DirectChat.tsx'; +--- -.cometchat .cometchat-message-composer { - border-radius: 0px; -} + + + + + Chat + + + + + ``` - - - Key points: -- `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one. +- `client:only="react"` ensures the component only runs in the browser — no server-side rendering. +- `CometChat.getUser(UID)` fetches the full user object from the SDK — you need a real user object, not a manually constructed one. - Pass either `user` or `group` to the message components, never both. -- The highlighted lines show where to set your credentials and target UID. +- The `RECIPIENT_UID` should be a user that exists in your CometChat app. Use one of the pre-created test UIDs: `cometchat-uid-1` through `cometchat-uid-5`. --- -## Switching Between User and Group Chat +## Switching to Group Chat -To load a group chat instead of one-to-one, replace the `getUser` call with `getGroup`: +To load a group chat instead of one-to-one, fetch a `Group` object and pass it to the message components: -```tsx lines highlight={1} -const GUID = "GUID"; // Replace with your actual Group ID - -CometChat.getGroup(GUID) - .then((group) => setSelectedGroup(group)) - .catch((error) => console.error("Failed to fetch group:", error)); -``` +```tsx title="src/components/DirectChat.tsx" +import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; ---- +const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID -## Step 2 — Render the Astro Page +export default function DirectChat() { + const [chatGroup, setChatGroup] = useState(undefined); -Import the island and hydrate it client-side using `client:only="react"`. + useEffect(() => { + CometChat.getGroup(GROUP_ID).then( + (group) => setChatGroup(group), + (error) => console.error("Group fetch failed:", error) + ); + }, []); -```astro title="src/pages/index.astro" lines ---- -import OneToOneChat from "../components/OneToOneChat.tsx"; -import "../styles/globals.css"; ---- + if (!chatGroup) return
Loading chat...
; - - - - One-to-One Chat - - - - - + return ( + +
+ + + +
+ + ); +} ``` -The `client:only="react"` directive ensures the component skips SSR entirely and only renders in the browser. +The only difference: use `CometChat.getGroup(GUID)` instead of `CometChat.getUser(UID)`, and pass `group` instead of `user`. --- -## Step 3 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the chat window load with the conversation for the UID you set. +Open `http://localhost:4321/chat`. You should see the chat window load with the conversation for the UID or GUID you set. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Two-panel layout with a sidebar + + + Tabbed navigation with Chats, Calls, Users Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> - Back to the main setup guide - - - Chat features included out of the box - diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index d8912dd91..94559188f 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based messaging UI with chats, calls, users, and groups in Astro with CometChat React UI Kit." +description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in Astro." --- @@ -9,528 +9,290 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Astro (with `@astrojs/react` islands) | -| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | -| SSR | `client:only="react"` directive — CometChat requires browser APIs | +| Framework | Astro | +| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | +| Layout | Tabbed sidebar (Chat, Calls, Users) + message view | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/integration-astro) first | +| SSR | React island with `client:only="react"` directive | | Pattern | Full-featured messaging app with multiple sections | -This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. +This guide builds a tabbed messaging UI — Chat, Calls, and Users tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/integration-astro) (project created, UI Kit installed, init + login working). - + + --- ## What You're Building Three sections working together: -1. **Tab bar** — switches between Chats, Calls, Users, and Groups +1. **Tab bar** — switches between Chat, Calls, and Users 2. **Sidebar** — renders the list for the active tab 3. **Message view** — header + messages + composer for the selected item - ---- - -## Step 1 — Create the Tab Component - - - - - - - - - - - - -Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets). - - - - - - - - - - - - - - - -```tsx title="CometChatTabs.tsx" lines -import { useState } from "react"; -import "./CometChatTabs.css"; - -const chatsIcon = "/assets/chats.svg"; -const callsIcon = "/assets/calls.svg"; -const usersIcon = "/assets/users.svg"; -const groupsIcon = "/assets/groups.svg"; - -export const CometChatTabs = (props: { - onTabClicked?: (tabItem: { name: string; icon?: string }) => void; - activeTab?: string; -}) => { - const { onTabClicked = () => {}, activeTab } = props; - const [hoverTab, setHoverTab] = useState(""); - - const tabItems = [ - { name: "CHATS", icon: chatsIcon }, - { name: "CALLS", icon: callsIcon }, - { name: "USERS", icon: usersIcon }, - { name: "GROUPS", icon: groupsIcon }, - ]; - - return ( -
- {tabItems.map((tabItem) => { - const isActive = - activeTab === tabItem.name.toLowerCase() || - hoverTab === tabItem.name.toLowerCase(); - - return ( -
onTabClicked(tabItem)} - > -
setHoverTab(tabItem.name.toLowerCase())} - onMouseLeave={() => setHoverTab("")} - /> -
setHoverTab(tabItem.name.toLowerCase())} - onMouseLeave={() => setHoverTab("")} - > - {tabItem.name} -
-
- ); - })} -
- ); -}; -``` - - - - -```css title="CometChatTabs.css" lines -.cometchat-tab-component { - display: flex; - width: 100%; - padding: 0px 8px; - align-items: flex-start; - gap: 8px; - border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5); - border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5); - background: var(--cometchat-background-color-01, #FFF); -} - -.cometchat-tab-component__tab { - display: flex; - padding: 12px 0px 10px 0px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 4px; - flex: 1 0 0; - min-height: 48px; -} - -.cometchat-tab-component__tab-icon { - display: flex; - width: 32px; - height: 32px; - justify-content: center; - align-items: center; - background: var(--cometchat-icon-color-secondary); - -webkit-mask-size: contain; - -webkit-mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - cursor: pointer; -} - -.cometchat-tab-component__tab-text { - color: var(--cometchat-text-color-secondary, #727272); - text-align: center; - font: var(--cometchat-font-caption1-medium, 500 12px Roboto); - cursor: pointer; -} - -.cometchat-tab-component__tab-icon-active { - background: var(--cometchat-icon-color-highlight); -} - -.cometchat-tab-component__tab-text-active { - color: var(--cometchat-text-color-highlight); -} -``` - - - - - ---- - -## Step 2 — Create the Sidebar Component - -The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom. - - - - - - - - - - - - - - - -```tsx title="CometChatSelector.tsx" lines -import { useEffect, useState } from "react"; -import { Call, Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallLogs, CometChatConversations, CometChatGroups, CometChatUIKitLoginListener, CometChatUsers } from "@cometchat/chat-uikit-react"; -import { CometChatTabs } from "../CometChatTabs/CometChatTabs"; - -interface SelectorProps { - onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void; -} - -export const CometChatSelector = (props: SelectorProps) => { - const { onSelectorItemClicked = () => {} } = props; - const [loggedInUser, setLoggedInUser] = useState(); - const [activeItem, setActiveItem] = useState(); - const [activeTab, setActiveTab] = useState("chats"); - - useEffect(() => { - const user = CometChatUIKitLoginListener.getLoggedInUser(); - setLoggedInUser(user); - }, []); - - return ( - <> - {loggedInUser && ( - <> - {activeTab === "chats" && ( - { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItem"); }} - /> - )} - {activeTab === "calls" && ( - { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemCall"); }} - /> - )} - {activeTab === "users" && ( - { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemUser"); }} - /> - )} - {activeTab === "groups" && ( - { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemGroup"); }} - /> - )} - - )} - setActiveTab(item.name.toLowerCase())} /> - - ); -}; -``` - - - - -```css title="CometChatSelector.css" lines -.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { - background: var(--cometchat-icon-color-primary); -} -.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover { - background: var(--cometchat-icon-color-highlight); -} -.cometchat-list__header-search-bar { border-right: none; } -.cometchat .cometchat-menu-list__sub-menu-list-item { text-align: left; } -.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list { - width: 212px; top: 40px !important; left: 172px !important; -} -#logged-in-user { border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); } -#logged-in-user .cometchat-menu-list__sub-menu-item-title, -#logged-in-user .cometchat-menu-list__sub-menu-list-item { cursor: default; } -.cometchat-menu-list__sub-menu-list-item-icon-log-out { background-color: var(--cometchat-error-color, #F44649); } -.cometchat-menu-list__sub-menu-item-title-log-out { color: var(--cometchat-error-color, #F44649); } -.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { cursor: pointer; } -.chat-menu .cometchat .cometchat-menu-list__sub-menu { box-shadow: none; } -.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon { - background-color: var(--cometchat-icon-color-primary, #141414); width: 24px; height: 24px; -} -``` - - - - -Key points: -- The `activeTab` state drives which list component renders — `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, or `CometChatGroups`. -- Each list component passes its selection back to the parent via `onSelectorItemClicked`. -- `CometChatTabs` renders at the bottom of the sidebar. - - --- -## Step 3 — Create the TabbedChat Island - -This component handles init, login, and renders the full tabbed chat experience. It runs client-side only via `client:only="react"`. +## Full Code - - - - - - - - +Create a React island component with the tabbed UI, then render it in an Astro page with `client:only="react"`. - - - -```tsx title="TabbedChat.tsx" lines highlight={15-17, 20} -import { useEffect, useState } from "react"; +```tsx title="src/components/TabbedChat.tsx" +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatMessageComposer, + CometChatProvider, + CometChatConversations, + CometChatUsers, + CometChatCallLogs, CometChatMessageHeader, CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatSelector } from "./CometChatSelector/CometChatSelector"; -import "@cometchat/chat-uikit-react/css-variables.css"; -import "./TabbedChat.css"; +import "@cometchat/chat-uikit-react/styles"; -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; - -const UID = "cometchat-uid-4"; // Replace with your actual UID +type Tab = "chat" | "calls" | "users"; export default function TabbedChat() { - const [user, setUser] = useState(undefined); + const [activeTab, setActiveTab] = useState("chat"); const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); - useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login(UID) - .then((u) => { - console.log("Login Successful", { u }); - setUser(u); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); - }, []); - - if (!user) return
Initializing Chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { + const entity = conversation.getConversationWith(); + if (conversation.getConversationType() === "user") { + setSelectedUser(entity as CometChat.User); + setSelectedGroup(undefined); + } else { + setSelectedGroup(entity as CometChat.Group); + setSelectedUser(undefined); + } + }; + + const handleUserClick = (user: CometChat.User) => { + setSelectedUser(user); + setSelectedGroup(undefined); + }; + + const handleCallClick = (call: any) => { + const initiator = call.getInitiator(); + const receiver = call.getReceiver(); + + // Determine the other party in the call + if (receiver instanceof CometChat.User) { + setSelectedUser(receiver); + setSelectedGroup(undefined); + } else if (receiver instanceof CometChat.Group) { + setSelectedUser(undefined); + setSelectedGroup(receiver); + } else if (initiator instanceof CometChat.User) { + setSelectedUser(initiator); + setSelectedGroup(undefined); + } + }; return ( -
-
- { - let item: any = activeItem; - if (activeItem instanceof CometChat.Conversation) { - item = activeItem.getConversationWith(); - } - if (item instanceof CometChat.User) { - setSelectedUser(item); - setSelectedGroup(undefined); - } else if (item instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(item); - } else { - setSelectedUser(undefined); - setSelectedGroup(undefined); - } - }} - /> -
+ +
+
+
+ + + +
- {selectedUser || selectedGroup ? ( -
- - - +
+ {activeTab === "chat" && ( + + )} + {activeTab === "calls" && ( + + )} + {activeTab === "users" && ( + + )} +
- ) : ( -
Select a conversation to start chatting
- )} -
- ); -} -``` - - - -```css title="TabbedChat.css" lines -.conversations-with-messages { - display: flex; - height: 100%; - width: 100%; -} -.conversations-wrapper { - height: 100%; - width: 480px; - overflow: hidden; - display: flex; - flex-direction: column; -} -.conversations-wrapper > .cometchat { overflow: hidden; } -.messages-wrapper { - width: calc(100% - 480px); - height: 100%; - display: flex; - flex-direction: column; -} -.empty-conversation { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #F5F5F5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); + {selectedUser || selectedGroup ? ( +
+ + + +
+ ) : ( +
+ Select a conversation to start chatting +
+ )} +
+ + ); } -.cometchat .cometchat-message-composer { border-radius: 0px; } ``` - - - -How it works: -- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback. -- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`. -- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared. - +```astro title="src/pages/chat.astro" --- - -## Step 4 — Render the Astro Page - -Import the island and hydrate it client-side using `client:only="react"`. - -```astro title="src/pages/index.astro" lines ---- -import TabbedChat from "../components/TabbedChat.tsx"; -import "../styles/globals.css"; +import TabbedChat from '../components/TabbedChat.tsx'; --- - Tabbed Messaging UI + + Chat - + ``` -The `client:only="react"` directive ensures the component skips SSR entirely and only renders in the browser. +--- + +## How It Works + +1. **`client:only="react"`** tells Astro to skip server-rendering and hydrate the component entirely on the client. This is required because CometChat uses browser APIs. +2. **React island** — the CometChat UI lives in a self-contained React component. Astro handles the page shell, React handles the interactive chat. +3. **Tab state** — `activeTab` controls which list component renders in the sidebar. +4. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one. +5. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel. +6. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components. + +--- + +## Adding More Tabs + +To add a Groups tab, import `CometChatGroups` and add another tab button + conditional render: + +```tsx +import { CometChatGroups } from "@cometchat/chat-uikit-react"; + +// Add to Tab type: +type Tab = "chat" | "calls" | "users" | "groups"; + +// Add button in the tab bar: + + +// Add in the sidebar list: +{activeTab === "groups" && ( + { + setSelectedGroup(group); + setSelectedUser(undefined); + }} + /> +)} +``` + +You can follow the same pattern for any additional tabs (Settings, Contacts, etc.). --- -## Step 5 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right. +Open `http://localhost:4321/chat`. You should see the tab bar at the top of the sidebar. Switch between Chats, Calls, and Users — clicking any item loads the message view on the right. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Two-panel layout without tabs Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> - Back to the main setup guide - - - Chat features included out of the box + + Customize colors, fonts, and styles diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx deleted file mode 100644 index 361a67a37..000000000 --- a/ui-kit/react/call-buttons.mdx +++ /dev/null @@ -1,529 +0,0 @@ ---- -title: "Call Buttons" -description: "Add CometChat React UI Kit call buttons for voice and video calls with user or group targets, click callbacks, and error handling." ---- - -```json -{ - "component": "CometChatCallButtons", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Voice and video call initiation buttons for user or group conversations.", - "cssRootClass": ".cometchat-call-button", - "primaryOutput": { - "description": "Initiates calls via SDK, emits CometChatCallEvents" - }, - "props": { - "data": { - "user": { - "type": "CometChat.User", - "default": "undefined", - "note": "Pass either user or group, not both" - }, - "group": { - "type": "CometChat.Group", - "default": "undefined", - "note": "Pass either user or group, not both" - } - }, - "callbacks": { - "onError": "((error: CometChat.CometChatException) => void) | null", - "onVoiceCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void", - "onVideoCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void" - }, - "visibility": { - "hideVoiceCallButton": { "type": "boolean", "default": false }, - "hideVideoCallButton": { "type": "boolean", "default": false } - }, - "configuration": { - "callSettingsBuilder": "(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder", - "outgoingCallConfiguration": { - "type": "OutgoingCallConfiguration", - "default": "new OutgoingCallConfiguration({})", - "properties": { - "disableSoundForCalls": "boolean", - "customSoundForCalls": "string", - "onError": "(error: CometChat.CometChatException) => void", - "onCallCanceled": "Function", - "titleView": "(call: CometChat.Call) => JSX.Element", - "subtitleView": "(call: CometChat.Call) => JSX.Element", - "avatarView": "(call: CometChat.Call) => JSX.Element", - "cancelButtonView": "(call: CometChat.Call) => JSX.Element" - } - } - } - }, - "events": [ - { - "name": "CometChatCallEvents.ccOutgoingCall", - "payload": "CometChat.Call", - "description": "Call initiated" - }, - { - "name": "CometChatCallEvents.ccCallRejected", - "payload": "CometChat.Call", - "description": "Call rejected/cancelled" - }, - { - "name": "CometChatCallEvents.ccCallEnded", - "payload": "CometChat.Call", - "description": "Call session ends" - }, - { - "name": "CometChatMessageEvents.ccMessageSent", - "payload": "IMessages", - "description": "Group call message sent" - } - ], - "sdkListeners": [ - "onIncomingCallReceived", - "onIncomingCallCancelled", - "onOutgoingCallRejected", - "onOutgoingCallAccepted" - ], - "compositionExample": { - "description": "Standalone call buttons or embedded in MessageHeader auxiliary view", - "components": ["CometChatCallButtons", "CometChatOutgoingCall", "CometChatOngoingCall"], - "flow": "user/group prop -> click button -> SDK initiateCall -> CometChatOutgoingCall overlay -> onOutgoingCallAccepted -> CometChatOngoingCall" - } -} -``` - - -## Where It Fits - -`CometChatCallButtons` renders voice and video call buttons. Pass a `user` for 1-on-1 calls or a `group` for group calls. Typically embedded in `CometChatMessageHeader`'s auxiliary view or used standalone. The component handles call initiation, renders `CometChatOutgoingCall` internally, and manages the full call lifecycle. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function CallButtonsDemo() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} - -export default CallButtonsDemo; -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function CallButtonsMinimal() { - return ; -} -``` - -Root CSS class: `.cometchat-call-button` - ---- - -## Actions and Events - -### Callback Props - -#### onVoiceCallClick - -Overrides the default voice call initiation behavior. When set, clicking the voice button invokes this callback instead of initiating a call via the SDK. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -function CallButtonsVoiceOverride() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return ( - { - console.log("Custom voice call logic"); - }} - /> - ); -} -``` - -#### onVideoCallClick - -Overrides the default video call initiation behavior. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -function CallButtonsVideoOverride() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return ( - { - console.log("Custom video call logic"); - }} - /> - ); -} -``` - -#### onError - -Fires on internal errors during call initiation. - -```tsx lines -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CallButtonsWithError() { - return ( - { - console.error("CallButtons error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatCallEvents` emits call lifecycle events subscribable from anywhere. - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccOutgoingCall` | User initiates a voice/video call | `CometChat.Call` | -| `ccCallRejected` | Initiated call is rejected/cancelled | `CometChat.Call` | -| `ccCallEnded` | Call session ends | `CometChat.Call` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatCallEvents } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function useCallButtonEvents() { - useEffect(() => { - const outgoingSub = CometChatCallEvents.ccOutgoingCall.subscribe( - (call: CometChat.Call) => { - console.log("Outgoing call:", call.getSessionId()); - } - ); - const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe( - (call: CometChat.Call) => { - console.log("Call rejected:", call.getSessionId()); - } - ); - const endedSub = CometChatCallEvents.ccCallEnded.subscribe( - (call: CometChat.Call) => { - console.log("Call ended:", call.getSessionId()); - } - ); - - return () => { - outgoingSub?.unsubscribe(); - rejectedSub?.unsubscribe(); - endedSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component attaches SDK call listeners internally: - -| SDK Listener | Internal behavior | -| --- | --- | -| `onIncomingCallReceived` | Disables call buttons to prevent concurrent calls | -| `onIncomingCallCancelled` | Re-enables call buttons | -| `onOutgoingCallRejected` | Hides outgoing call screen, re-enables buttons | -| `onOutgoingCallAccepted` | Transitions to ongoing call screen | - ---- - -## Configuring the Outgoing Call Sub-Component - -`CometChatCallButtons` renders `CometChatOutgoingCall` internally. Customize it via `outgoingCallConfiguration`. - -```tsx lines -import { CometChatCallButtons, OutgoingCallConfiguration } from "@cometchat/chat-uikit-react"; - -function CallButtonsCustomOutgoing() { - return ( -
{call.getCallReceiver().getName()}
, - }) - } - /> - ); -} -``` - -`OutgoingCallConfiguration` properties: - -| Property | Type | Description | -| --- | --- | --- | -| `disableSoundForCalls` | `boolean` | Disables outgoing call ringtone | -| `customSoundForCalls` | `string` | Custom ringtone URL | -| `onError` | `(error: CometChat.CometChatException) => void` | Error callback | -| `onCallCanceled` | `Function` | Cancel button callback | -| `titleView` | `(call: CometChat.Call) => JSX.Element` | Custom title | -| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Custom subtitle | -| `avatarView` | `(call: CometChat.Call) => JSX.Element` | Custom avatar | -| `cancelButtonView` | `(call: CometChat.Call) => JSX.Element` | Custom cancel button | - -Refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) for details on each view slot. - ---- - -## Call Settings - -Customize the calling experience via `callSettingsBuilder`. - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons, CometChatUIKitCalls } from "@cometchat/chat-uikit-react"; - -function CallButtonsCustomSettings() { - return ( - - new CometChatUIKitCalls.CallSettingsBuilder() - .enableDefaultLayout(true) - .setIsAudioOnlyCall(isAudioOnlyCall) - } - /> - ); -} -``` - ---- - -## Common Patterns - -### Voice-only call button - -```tsx lines -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -function VoiceOnlyCallButtons() { - return ; -} -``` - -### Group call buttons - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -function GroupCallButtons() { - const [group, setGroup] = useState(); - - useEffect(() => { - CometChat.getGroup("guid").then((g) => setGroup(g)); - }, []); - - return group ? : null; -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-call-button`) consumes these tokens via `var()`. -3. Overrides target `.cometchat-call-button` descendant selectors. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-call-button` | -| Voice button wrapper | `.cometchat-call-button__voice` | -| Video button wrapper | `.cometchat-call-button__video` | -| Button element | `.cometchat-call-button .cometchat-button` | -| Button icon | `.cometchat-call-button .cometchat-button__icon` | -| Outgoing call backdrop | `.cometchat-outgoing-call__backdrop` | - -### Example: Themed call buttons - - - - - -```css lines -.cometchat-call-button { - display: flex; - padding: 8px 16px; - justify-content: center; - align-items: center; - background: #fff; -} - -.cometchat .cometchat-button { - border-radius: 8px; - border: 1px solid #e8e8e8; - background: #edeafa; -} - -.cometchat-call-button .cometchat-call-button__video .cometchat-button__icon, -.cometchat-call-button .cometchat-call-button__voice .cometchat-button__icon { - background-color: #6852d6; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override call initiation | Component props | `onVoiceCallClick` / `onVideoCallClick` | `onVoiceCallClick={() => customCall()}` | -| Hide a call button | Component props | `hideVoiceCallButton` / `hideVideoCallButton` | `hideVideoCallButton={true}` | -| Customize outgoing call UI | Component props | `outgoingCallConfiguration` | `outgoingCallConfiguration={new OutgoingCallConfiguration({...})}` | -| Customize call settings | Component props | `callSettingsBuilder` | `callSettingsBuilder={(audio) => builder}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-button` class | `.cometchat-call-button .cometchat-button__icon { background: red; }` | - ---- - -## Props - -All props are optional. Sorted alphabetically. - -### callSettingsBuilder - -Builder function for customizing call settings. - -| | | -| --- | --- | -| Type | `(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder` | -| Default | `undefined` | - ---- - -### group - -The group for group call buttons. Pass either `user` or `group`, not both. - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | `undefined` | - ---- - -### hideVideoCallButton - -Hides the video call button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideVoiceCallButton - -Hides the voice call button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### outgoingCallConfiguration - -Configuration object for the internal `CometChatOutgoingCall` sub-component. - -| | | -| --- | --- | -| Type | `OutgoingCallConfiguration` | -| Default | `new OutgoingCallConfiguration({})` | - -See [Configuring the Outgoing Call Sub-Component](#configuring-the-outgoing-call-sub-component) for properties. - ---- - -### user - -The user for 1-on-1 call buttons. Pass either `user` or `group`, not both. - -| | | -| --- | --- | -| Type | `CometChat.User` | -| Default | `undefined` | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated | -| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Call rejected/cancelled | -| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call session ends | -| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Group call message sent | - -All call events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-call-button` | -| Voice button wrapper | `.cometchat-call-button__voice` | -| Video button wrapper | `.cometchat-call-button__video` | -| Button element | `.cometchat-call-button .cometchat-button` | -| Button icon | `.cometchat-call-button .cometchat-button__icon` | -| Outgoing call backdrop | `.cometchat-outgoing-call__backdrop` | diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index 885bd6fa5..7cb70556a 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -8,31 +8,39 @@ description: "Overview of CometChat React UI Kit calling features, including inc | Field | Value | | --- | --- | | Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`) | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — Calls SDK must also be installed | -| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons | -| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/react/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/call-logs) | -| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components | +| Required setup | Wrap app in `CometChatProvider` with `callingEnabled={true}` — Calls SDK must also be installed | +| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons (in Message Header) | +| Key components | `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header) (includes call buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/components/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/components/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/components/call-logs) | +| Enabling | Set `callingEnabled={true}` on `CometChatProvider` to activate call UI components | | CSS class prefix | `.cometchat-` | ## Overview -CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and the UI Kit auto-detects it, enabling call components. +CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and enable calling via the `callingEnabled` prop on `CometChatProvider` to activate call components. -Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). +Ensure your app is wrapped in `CometChatProvider` with valid credentials and `callingEnabled={true}`. See [React.js Integration](/ui-kit/react/integration-react). ## Integration -Install the Calls SDK: +Install the Calls SDK and enable calling: ```bash lines npm install @cometchat/calls-sdk-javascript ``` -The React UI Kit auto-detects the SDK and activates calling features. [CallButtons](/ui-kit/react/call-buttons) renders in [MessageHeader](/ui-kit/react/message-header). +Then set `callingEnabled={true}` on your `CometChatProvider`: + +```jsx + + {/* your app */} + +``` + +Call buttons render inside [MessageHeader](/ui-kit/react/components/message-header) when calling is enabled. @@ -42,7 +50,7 @@ The React UI Kit auto-detects the SDK and activates calling features. [CallButto ### Incoming Call -The [Incoming Call](/ui-kit/react/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options. +The [Incoming Call](/ui-kit/react/components/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options. @@ -50,7 +58,7 @@ The [Incoming Call](/ui-kit/react/incoming-call) component displays a call scree ### Outgoing Call -The [Outgoing Call](/ui-kit/react/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts. +The [Outgoing Call](/ui-kit/react/components/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts. @@ -58,7 +66,7 @@ The [Outgoing Call](/ui-kit/react/outgoing-call) component displays an outgoing ### Call Logs -The [Call Logs](/ui-kit/react/call-logs) component displays call history — caller, time, and duration. +The [Call Logs](/ui-kit/react/components/call-logs) component displays call history — caller, time, and duration. @@ -67,13 +75,13 @@ The [Call Logs](/ui-kit/react/call-logs) component displays call history — cal ## Next Steps - - Audio and video call buttons + + Message header with integrated call buttons - + Incoming call notifications and UI - + Call history and details diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx deleted file mode 100644 index 9218d65b2..000000000 --- a/ui-kit/react/call-logs.mdx +++ /dev/null @@ -1,671 +0,0 @@ ---- -title: "Call Logs" -description: "Display CometChat React UI Kit call logs with call type, duration, participants, timestamps, request builders, and selection callbacks." ---- - -```json -{ - "component": "CometChatCallLogs", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Scrollable list of call history entries with filtering, call-back actions, and custom views.", - "cssRootClass": ".cometchat-call-logs", - "primaryOutput": { - "prop": "onItemClick", - "type": "(call: any) => void" - }, - "props": { - "data": { - "callLogRequestBuilder": { - "type": "any (CallLogRequestBuilder)", - "default": "SDK default (30 per page)" - }, - "activeCall": { - "type": "any", - "default": "undefined" - }, - "callInitiatedDateTimeFormat": { - "type": "CalendarObject", - "default": "DD MMM, hh:mm A" - } - }, - "callbacks": { - "onItemClick": "(call: any) => void", - "onCallButtonClicked": "(call: any) => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "visibility": { - "showScrollbar": { "type": "boolean", "default": false } - }, - "viewSlots": { - "itemView": "(call: any) => JSX.Element", - "leadingView": "(call: any) => JSX.Element", - "titleView": "(call: any) => JSX.Element", - "subtitleView": "(call: any) => JSX.Element", - "trailingView": "(call: any) => JSX.Element", - "loadingView": "JSX.Element", - "emptyView": "JSX.Element", - "errorView": "JSX.Element" - } - }, - "events": [ - { - "name": "CometChatMessageEvents.ccMessageSent", - "payload": "IMessages", - "description": "Call message sent" - } - ], - "types": { - "CalendarObject": { - "today": "string | undefined", - "yesterday": "string | undefined", - "lastWeek": "string | undefined", - "otherDays": "string | undefined" - } - } -} -``` - - -## Where It Fits - -`CometChatCallLogs` is a standalone list component that renders call history entries. Each entry shows the caller/callee, call type (audio/video), direction (incoming/outgoing/missed), and timestamp. The `onItemClick` callback emits the selected call log, and `onCallButtonClicked` fires when the call-back button is tapped. - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function CallLogPanel() { - return ( -
- { - console.log("Call log selected:", callLog); - }} - onCallButtonClicked={(callLog: any) => { - console.log("Call back:", callLog); - }} - /> -
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function CallLogsDemo() { - return ( -
- -
- ); -} - -export default CallLogsDemo; -``` - -Root CSS class: `.cometchat-call-logs` - ---- - -## Filtering Call Logs - -Pass a `CallLogRequestBuilder` from `@cometchat/calls-sdk-javascript` to `callLogRequestBuilder`. - -```tsx lines -import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript"; -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function FilteredCallLogs() { - return ( - - ); -} -``` - -### Filter Recipes - -| Recipe | Code | -| --- | --- | -| Limit to 5 per page | `new CallLogRequestBuilder().setAuthToken(token).setLimit(5)` | -| Cancelled calls only | `new CallLogRequestBuilder().setAuthToken(token).setCallStatus("cancelled")` | -| Video calls only | `new CallLogRequestBuilder().setAuthToken(token).setCallType("video")` | -| Calls with recordings | `new CallLogRequestBuilder().setAuthToken(token).setHasRecording(true)` | -| Calls for a specific user | `new CallLogRequestBuilder().setAuthToken(token).setUid("user_uid")` | -| Calls for a specific group | `new CallLogRequestBuilder().setAuthToken(token).setGuid("group_guid")` | - -Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full builder API. - ---- - -## Actions and Events - -### Callback Props - -#### onItemClick - -Fires when a call log entry is tapped. - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function CallLogsWithClick() { - return ( - { - console.log("Selected call log:", callLog); - }} - /> - ); -} -``` - -#### onCallButtonClicked - -Fires when the call-back button in the trailing view is tapped. - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function CallLogsWithCallback() { - return ( - { - console.log("Call back:", callLog); - }} - /> - ); -} -``` - -#### onError - -Fires on internal errors (network failure, auth issue, SDK exception). - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CallLogsWithError() { - return ( - { - console.error("CometChatCallLogs error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -The component subscribes to `CometChatMessageEvents.ccMessageSent` to detect when a call message is sent and refresh the list. - -### SDK Events (Real-Time, Automatic) - -The component listens to SDK call events internally for real-time updates. No manual attachment needed. - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally. - - ---- - -## Custom View Slots - -Each slot replaces a section of the default UI. Slots that accept a call log parameter receive the call log object for that row. - -| Slot | Signature | Replaces | -| --- | --- | --- | -| `itemView` | `(call: any) => JSX.Element` | Entire list item row | -| `leadingView` | `(call: any) => JSX.Element` | Avatar / left section | -| `titleView` | `(call: any) => JSX.Element` | Name / title text | -| `subtitleView` | `(call: any) => JSX.Element` | Call type, direction, timestamp | -| `trailingView` | `(call: any) => JSX.Element` | Call-back button area | -| `loadingView` | `JSX.Element` | Loading spinner | -| `emptyView` | `JSX.Element` | Empty state | -| `errorView` | `JSX.Element` | Error state | - -### itemView - -Replace the entire call log list item. - - - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function CustomItemViewCallLogs() { - const getItemView = (callLog: any) => { - return ( -
-
- {callLog?.getInitiator()?.getName()} -
-
- {callLog?.getStatus()} -
-
- ); - }; - - return ; -} -``` - - -```css lines -.custom-call-log-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 16px; - border-bottom: 1px solid var(--cometchat-border-color-light); -} - -.custom-call-log-item__name { - font: var(--cometchat-font-heading4-medium); - color: var(--cometchat-text-color-primary); -} - -.custom-call-log-item__status { - font: var(--cometchat-font-body-regular); - color: var(--cometchat-text-color-secondary); -} -``` - - - -### subtitleView - -Replace the subtitle text (call type, duration). - - - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function SubtitleCallLogs() { - const getSubtitleView = (callLog: any) => { - return ( -
- {callLog?.getStatus()} • {callLog?.getType()} -
- ); - }; - - return ; -} -``` - - -```css lines -.custom-call-log-subtitle { - font: var(--cometchat-font-body-regular); - color: var(--cometchat-text-color-secondary); -} -``` - - - -### trailingView - -Replace the right section (call-back button area). - - - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function TrailingViewCallLogs() { - const getTrailingView = (callLog: any) => { - return ( -
- -
- ); - }; - - return ; -} -``` - - -```css lines -.custom-call-log-trailing button { - background: var(--cometchat-primary-color); - color: var(--cometchat-static-white); - border: none; - border-radius: var(--cometchat-radius-2); - padding: 4px 12px; - cursor: pointer; -} -``` - - - -### callInitiatedDateTimeFormat - -Customize the call initiated timestamp format using a `CalendarObject`. - -```tsx lines -import { - CometChatCallLogs, - CalendarObject, -} from "@cometchat/chat-uikit-react"; - -function CustomDateCallLogs() { - const dateFormat = new CalendarObject({ - today: "hh:mm A", - yesterday: "[yesterday]", - otherDays: "DD MM YYYY", - }); - - return ; -} -``` - - -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. - - ---- - -## Common Patterns - -### Custom empty state - -```tsx lines -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function EmptyStateCallLogs() { - return ( - -

No call history

-
- } - /> - ); -} -``` - -### Filtered to video calls only - -```tsx lines -import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript"; -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -function VideoCallLogs({ authToken }: { authToken: string }) { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens are set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-call-logs`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-call-logs` descendant selectors in a global stylesheet. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-call-logs` | -| List item | `.cometchat-call-logs .cometchat-list-item` | -| Active item | `.cometchat-call-logs__list-item-active .cometchat-list-item` | -| Trailing view (video) | `.cometchat-call-logs__list-item-trailing-view-video` | -| Trailing view (audio) | `.cometchat-call-logs__list-item-trailing-view-audio` | -| Subtitle | `.cometchat-call-logs__list-item-subtitle` | -| Subtitle date | `.cometchat-call-logs__list-item-subtitle .cometchat-date` | -| Missed call icon | `.cometchat-call-logs__list-item-subtitle-icon-missed-call` | -| Outgoing call icon | `.cometchat-call-logs__list-item-subtitle-icon-outgoing-call` | -| Incoming call icon | `.cometchat-call-logs__list-item-subtitle-icon-incoming-call` | -| Empty state | `.cometchat-call-logs__empty-state-view` | -| Error state | `.cometchat-call-logs__error-state-view` | -| Shimmer loading | `.cometchat-call-logs__shimmer` | -| Outgoing call overlay | `.cometchat-call-logs__outgoing-call` | - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(c) => showDetails(c)}` | -| Filter which call logs appear | Component props | `callLogRequestBuilder` | `callLogRequestBuilder={new CallLogRequestBuilder().setLimit(5)}` | -| Replace a section of the list item | Component props | `View` render props | `subtitleView={(c) =>
{c.getStatus()}
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-logs` class | `.cometchat-call-logs .cometchat-list-item { background: #f9f8fd; }` | - ---- - -## Props - -All props are optional. - ---- - -### activeCall - -Highlights the currently active/selected call log entry. - -| | | -| --- | --- | -| Type | `any` | -| Default | `undefined` | - ---- - -### callInitiatedDateTimeFormat - -Format for displaying the call initiated timestamp. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default (`DD MMM, hh:mm A`) | - -Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set. - ---- - -### callLogRequestBuilder - -Controls which call logs load and in what order. - -| | | -| --- | --- | -| Type | `any` (CallLogRequestBuilder from `@cometchat/calls-sdk-javascript`) | -| Default | SDK default (30 per page) | - ---- - -### emptyView - -Custom component displayed when there are no call logs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in empty state | - ---- - -### errorView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in error state | - ---- - -### itemView - -Custom renderer for the entire call log list item. - -| | | -| --- | --- | -| Type | `(call: any) => JSX.Element` | -| Default | Built-in list item | - ---- - -### leadingView - -Custom renderer for the avatar / left section. - -| | | -| --- | --- | -| Type | `(call: any) => JSX.Element` | -| Default | Built-in avatar | - ---- - -### loadingView - -Custom component displayed during the loading state. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in shimmer | - ---- - -### onCallButtonClicked - -Callback fired when the call-back button is clicked. - -| | | -| --- | --- | -| Type | `(call: any) => void` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when a call log entry is clicked. - -| | | -| --- | --- | -| Type | `(call: any) => void` | -| Default | `undefined` | - ---- - -### showScrollbar - -Shows the scrollbar in the call log list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### subtitleView - -Custom renderer for the subtitle text. - -| | | -| --- | --- | -| Type | `(call: any) => JSX.Element` | -| Default | Built-in subtitle | - ---- - -### titleView - -Custom renderer for the name / title text. - -| | | -| --- | --- | -| Type | `(call: any) => JSX.Element` | -| Default | Built-in title | - ---- - -### trailingView - -Custom renderer for the right section. - -| | | -| --- | --- | -| Type | `(call: any) => JSX.Element` | -| Default | Built-in trailing view | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Call message sent | - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-call-logs` | -| List item | `.cometchat-call-logs .cometchat-list-item` | -| Active item | `.cometchat-call-logs__list-item-active .cometchat-list-item` | -| Trailing view (video) | `.cometchat-call-logs__list-item-trailing-view-video` | -| Trailing view (audio) | `.cometchat-call-logs__list-item-trailing-view-audio` | -| Subtitle | `.cometchat-call-logs__list-item-subtitle` | -| Subtitle date | `.cometchat-call-logs__list-item-subtitle .cometchat-date` | -| Missed call icon | `.cometchat-call-logs__list-item-subtitle-icon-missed-call` | -| Outgoing call icon | `.cometchat-call-logs__list-item-subtitle-icon-outgoing-call` | -| Incoming call icon | `.cometchat-call-logs__list-item-subtitle-icon-incoming-call` | -| Empty state | `.cometchat-call-logs__empty-state-view` | -| Error state | `.cometchat-call-logs__error-state-view` | -| Shimmer loading | `.cometchat-call-logs__shimmer` | -| Outgoing call overlay | `.cometchat-call-logs__outgoing-call` | diff --git a/ui-kit/react/calling-integration.mdx b/ui-kit/react/calling-integration.mdx index 4760a85b9..9c2480aa2 100644 --- a/ui-kit/react/calling-integration.mdx +++ b/ui-kit/react/calling-integration.mdx @@ -1,28 +1,250 @@ --- title: "Calling Integration" -description: "Add voice and video calling to CometChat React UI Kit with Calls SDK installation, setup checks, and CallButtons verification." +description: "Step-by-step guide to integrate voice and video calling into your React app using CometChat UI Kit v7." --- -## Overview +## Goal -This guide walks you through adding voice and video calling capabilities to your React application using the CometChat UI Kit. +By the end of this guide you will have voice and video calling working in your React app — including the `CometChatCallButtons` component, incoming call notifications, and outgoing call screens. - -Make sure you've completed the [Getting Started](/ui-kit/react/react-js-integration) guide before proceeding. - +## Prerequisites -## Add the Calls SDK +- A working CometChat React UI Kit v7 setup (completed the [Integration Guide](/ui-kit/react/integration-react)) +- `CometChatProvider` configured with valid credentials +- A CometChat plan that includes calling features enabled in your [dashboard](https://app.cometchat.com) -Install the CometChat Calls SDK: +## Step 1: Install the Calls SDK -```bash +The calling feature requires the optional `@cometchat/calls-sdk-javascript` peer dependency: + + + +```bash npm npm install @cometchat/calls-sdk-javascript ``` -## Verify Integration +```bash yarn +yarn add @cometchat/calls-sdk-javascript +``` + +```bash pnpm +pnpm add @cometchat/calls-sdk-javascript +``` + + + +This package provides the WebRTC layer for voice and video calls. It is loaded lazily by the UI Kit — no additional bundle cost until calling is actually used. + +## Step 2: Enable calling in CometChatProvider + +Set the `callingEnabled` prop to `true` on your `CometChatProvider`: + +```tsx +import { CometChatProvider } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +function App() { + return ( + + + + ); +} +``` + +When `callingEnabled` is `true`, the UI Kit: +- Registers the `CallingPlugin` for call-related message rendering +- Lazy-loads call components (`CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatOngoingCall`) only when needed +- Enables the `CometChatCallButtons` component to initiate calls + +When `callingEnabled` is `false` (the default), call components are not loaded and `CometChatCallButtons` renders nothing. + +## Step 3: Configure call settings + +The Calls SDK uses the same `appId` and `region` as your chat SDK — no separate configuration is needed. `CometChatProvider` passes these credentials to the Calls SDK automatically when `callingEnabled` is `true`. + +If your app uses a dedicated calling app ID (separate from the chat app ID), pass it via the `config` prop: + +```tsx + + + +``` + +In most cases the chat and calling app IDs are the same, so this extra configuration is not needed. + +## Step 4: Add Call Buttons via CometChatMessageHeader + +`CometChatMessageHeader` automatically renders voice and video call buttons when `callingEnabled` is `true` on your provider. No extra configuration needed — just render the header with a `user` or `group`: + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; + +function ChatPanel({ user }: { user: CometChat.User }) { + return ( +
+ + + +
+ ); +} +``` + +The header shows call buttons by default. To hide them, use `hideVoiceCallButton` or `hideVideoCallButton`: + +```tsx + +``` + +For group calls, pass the `group` prop instead: + +```tsx + +``` + + +`CometChatMessageHeader.CallButtons` is a sub-component of `CometChatMessageHeader`. It is not a standalone component — you don't need to import or render it separately. + + +## Step 5: Verify with a voice call + +With the setup complete, test a voice call: + +1. Open your app with two different users in separate browser tabs +2. Click the **voice call** button (phone icon) in the chat header +3. The caller sees the `CometChatOutgoingCall` screen with a "Calling..." indicator +4. The receiver sees the `CometChatIncomingCall` overlay with accept/reject buttons +5. Once accepted, both users enter the `CometChatOngoingCall` view with live audio + +```tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +export default function App() { + const [user, setUser] = useState(null); + + const handleConversationClick = (conversation: CometChat.Conversation) => { + const conversationWith = conversation.getConversationWith(); + if (conversationWith instanceof CometChat.User) { + setUser(conversationWith); + } + }; + + return ( + +
+
+ +
+
+ {user && ( + <> + + + + + )} +
+
+ + ); +} +``` + +## Step 6: Verify with a video call + +Video calls work identically — click the **video call** button (camera icon) instead. The `CometChatOngoingCall` component renders a full video interface with: + +- Local and remote video streams +- Mute/unmute audio toggle +- Camera on/off toggle +- End call button + +No additional configuration is needed to switch between audio-only and video calls. The call type is determined by which button the user clicks. + +## Step 7: Handle incoming and outgoing calls + +`CometChatIncomingCall` and `CometChatOutgoingCall` are automatically rendered by the UI Kit when `callingEnabled` is `true`. They listen for SDK call events via `SDKBridgeProvider` and display themselves as overlays when a call is initiated or received. + +You do not need to render these components manually — they are managed internally. However, you can customize their behavior with callbacks: + +```tsx +import { + CometChatProvider, + CometChatIncomingCall, + CometChatOutgoingCall, +} from "@cometchat/chat-uikit-react"; + +function App() { + return ( + + {/* These override the default auto-rendered call screens */} + console.log("Call accepted:", call)} + onReject={(call) => console.log("Call rejected:", call)} + /> + console.log("Call cancelled:", call)} + /> + + + ); +} +``` + +## Summary + +| Step | Action | +|------|--------| +| 1 | Install `@cometchat/calls-sdk-javascript` | +| 2 | Set `callingEnabled={true}` on `CometChatProvider` | +| 3 | (Optional) Configure separate calling app settings via `config` prop | +| 4 | Add `CometChatCallButtons` with a `user` or `group` prop | +| 5 | Test voice calls between two users | +| 6 | Test video calls between two users | +| 7 | (Optional) Customize incoming/outgoing call handlers | -After adding the dependency, the React UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/react/call-buttons) rendered in the [MessageHeader](/ui-kit/react/message-header) component. +## Next Steps - - - +- [Message Header](/ui-kit/react/components/message-header) — full props reference including call button visibility +- [Call Logs](/ui-kit/react/components/call-logs) — display call history +- [CometChatProvider](/ui-kit/react/cometchat-provider) — all provider configuration options diff --git a/ui-kit/react/campaigns.mdx b/ui-kit/react/campaigns.mdx deleted file mode 100644 index 989cdb05e..000000000 --- a/ui-kit/react/campaigns.mdx +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: "Campaigns" -description: "Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer." ---- - -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. - - - - - - ---- - -## Overview - -Campaigns delivers notifications as **Card Schema JSON** — a structured format that defines the visual layout of each notification card. The system consists of three layers: - -1. **CometChat Chat SDK** — Fetches feed items, manages read/delivered state, provides real-time listeners, handles push notification tracking -2. **CometChat Cards Library** (`@cometchat/cards-react`) — Renders Card Schema JSON into native DOM elements -3. **CometChat UI Kit** — Provides the ready-to-use `CometChatNotificationFeed` component that wires everything together - -### Architecture Flow - -``` -Dashboard / API → Campaign Created → Push + WebSocket Delivery - ↓ - SDK: NotificationFeedRequestBuilder.fetchNext() - ↓ - NotificationFeedItem.getContent() → Card Schema JSON - ↓ - Cards Library: CometChatCardView - ↓ - Native Rendered Card (images, text, buttons, layouts) - ↓ - User clicks button → onAction callback → Your code handles it -``` - ---- - -## How Cards Work - -Each `NotificationFeedItem` from the SDK contains a `content` field — an object holding the Card Schema JSON. This JSON is passed directly to the CometChat Cards renderer which produces a DOM element. - -The Cards library is a **pure renderer**: -- **Input**: Card Schema JSON string + theme mode + optional action callback -- **Output**: Native DOM element hierarchy - -It does not execute actions, manage message state, or call any SDK methods. When users click interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc. - -### Card Schema JSON Example - -```json -{ - "version": "1.0", - "body": [ - { - "type": "column", - "backgroundColor": { - "light": "transparent", - "dark": "transparent" - }, - "gap": 5, - "items": [ - { - "type": "text", - "content": "📢 Announcement", - "variant": "heading2", - "id": "txt_99323141-2459-4e33-88d3-ca39c5fd2f50" - }, - { - "type": "text", - "content": "Your announcement message here.", - "variant": "body", - "id": "txt_61a417bc-5e4a-4ba2-bfe7-b7bc64dbaf35" - }, - { - "type": "divider", - "id": "div_80f5c7fb-fd10-41d1-8c2f-51498f0f62d0" - }, - { - "type": "button", - "label": "Learn More", - "backgroundColor": { - "light": "transparent", - "dark": "transparent" - }, - "textColor": { - "light": "#6C5CE7", - "dark": "#6C5CE7" - }, - "size": 40, - "fontSize": 13, - "borderRadius": 6, - "padding": { - "top": 0, - "right": 16, - "bottom": 0, - "left": 16 - }, - "action": { - "type": "openUrl", - "url": "" - }, - "id": "btn_9b87a3f1-b0c6-45b9-a4c2-e22ea590f17f" - } - ], - "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2" - } - ], - "fallbackText": "", - "style": { - "background": { - "light": "#E8E8E8", - "dark": "#E8E8E8" - }, - "borderRadius": 16, - "borderColor": { - "light": "#DFE6E9", - "dark": "#DFE6E9" - }, - "padding": 12 - } -} -``` - -The schema supports **20 element types** (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table) and **9 action types** (openUrl, chatWithUser, chatWithGroup, sendMessage, copyToClipboard, downloadFile, initiateCall, apiCall, customCallback). - ---- - -## How Cards Work in the UI Kit - -The `CometChatNotificationFeed` component uses the **CometChat Cards** library internally to render each notification. Here's what happens under the hood: - -1. The component fetches `NotificationFeedItem` objects from the SDK -2. For each item, it extracts the `content` field (Card Schema JSON) -3. It passes the JSON to `CometChatCardView` from `@cometchat/cards-react` -4. The Cards renderer produces native UI — text, images, buttons, layouts — directly from the JSON -5. When users click buttons/links inside a card, the action is emitted back to the component which handles navigation (open URL, navigate to chat, etc.) - -You don't need to interact with the Cards library directly when using `CometChatNotificationFeed` — it's all wired up. But if you want to render cards outside the feed (e.g., a standalone card in a modal), you can use the Cards library directly. See the [SDK Campaigns documentation](/sdk/javascript/campaigns#rendering-cards) for standalone usage. - ---- - -## Handling Push Notifications for Campaigns - -When a campaign push notification arrives via Web Push or FCM, you should: - -1. **Report delivery** — Call `CometChat.markPushNotificationDelivered()` when the notification is received -2. **Report click** — Call `CometChat.markPushNotificationClicked()` when the user clicks the notification -3. **Deep link** — Use the announcement ID from the push payload to fetch the full item via `CometChat.getNotificationFeedItem(id)` and display it - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -// When push notification is received (e.g., in service worker) -const pushNotification = new CometChat.PushNotification(pushPayloadData); -CometChat.markPushNotificationDelivered(pushNotification); - -// When user clicks the notification -CometChat.markPushNotificationClicked(pushNotification); - -// Navigate to feed or show specific item -const item = await CometChat.getNotificationFeedItem(pushNotification.getId()); -``` - -See the [SDK Campaigns documentation](/sdk/javascript/campaigns) for the complete push notification tracking API. - ---- - -## Sending Campaigns - -Before integrating the frontend, you need to set up channels, categories, templates, and campaigns in the CometChat Dashboard. Follow the [Dashboard Setup Guide](/campaigns#setup-flow) for step-by-step instructions with screenshots. - ---- - -## Using the UI Kit Component - -The easiest way to add a notification feed to your app is the `CometChatNotificationFeed` component. It handles fetching, rendering, pagination, filtering, real-time updates, and engagement reporting out of the box. - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function NotificationsScreen() { - return ( - { - // Handle item click - }} - onBackPress={() => { - // Navigate back - }} - /> - ); -} -``` - -See the full [CometChatNotificationFeed component documentation](/ui-kit/react/notification-feed) for all configuration options, styling, and customization. - ---- - -## Next Steps - - - - Full API reference for feed items, categories, engagement, and push tracking - - - Ready-to-use component with filtering, real-time updates, and styling - - diff --git a/ui-kit/react/v7/cometchat-provider.mdx b/ui-kit/react/cometchat-provider.mdx similarity index 98% rename from ui-kit/react/v7/cometchat-provider.mdx rename to ui-kit/react/cometchat-provider.mdx index fb341f58e..0c0b74844 100644 --- a/ui-kit/react/v7/cometchat-provider.mdx +++ b/ui-kit/react/cometchat-provider.mdx @@ -57,7 +57,7 @@ That's it. No `CometChatUIKit.init()`, no `UIKitSettingsBuilder`, no manual logi | `callingEnabled` | `boolean` | No | `false` | Enable voice/video calling (requires `@cometchat/calls-sdk-javascript`) | | `plugins` | `CometChatMessagePlugin[]` | No | — | Additional plugins beyond the defaults | | `theme` | `"light" \| "dark"` | No | `"light"` | Active theme | -| `locale` | `string` | No | `"en-us"` | Language code for i18n | +| `locale` | `string` | No | `"en-us"` | Language code for localization | | `config` | `CometChatGlobalConfig` | No | `{}` | Global flags (`hideReceipts`, `hideUserStatus`, etc.) | | `onError` | `(error: Error) => void` | No | — | Called on init or login failure | | `onLoginSuccess` | `(user: CometChat.User) => void` | No | — | Called when login succeeds | @@ -251,7 +251,7 @@ CometChatProvider └─ PluginRegistryContext — plugin registry from CometChatUIKit └─ GlobalConfigProvider — hideReceipts, hideUserStatus, etc. └─ ThemeProvider — data-theme attribute + CSS variables - └─ LocaleProvider — i18n translations + └─ LocaleProvider — localization translations └─ EventsProvider — SDK listeners + UI events (mounted after login) └─ {children} ``` diff --git a/ui-kit/react/compact-message-composer.mdx b/ui-kit/react/compact-message-composer.mdx deleted file mode 100644 index 6f8ee5365..000000000 --- a/ui-kit/react/compact-message-composer.mdx +++ /dev/null @@ -1,1264 +0,0 @@ ---- -title: "Compact Message Composer" -description: "A compact, single-line message input component with rich text formatting, attachments, mentions, and voice recording support." ---- - - - -```json -{ - "component": "CometChatCompactMessageComposer", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatCompactMessageComposer } from \"@cometchat/chat-uikit-react\";", - "description": "Compact single-line message input with optional rich text formatting (bold, italic, underline, strikethrough, code, links, lists, blockquotes), attachments, mentions, voice recording, and message editing support.", - "primaryOutput": { - "prop": "onSendButtonClick", - "type": "(message: CometChat.BaseMessage) => void" - }, - "props": { - "data": { - "user": { "type": "CometChat.User", "default": "undefined" }, - "group": { "type": "CometChat.Group", "default": "undefined" }, - "parentMessageId": { "type": "number", "default": "undefined" }, - "initialComposerText": { "type": "string", "default": "\"\"" }, - "placeholderText": { "type": "string", "default": "\"Type a message...\"" } - }, - "callbacks": { - "onSendButtonClick": "(message: CometChat.BaseMessage) => void", - "onTextChange": "(text: string) => void", - "onError": "(error: CometChat.CometChatException) => void" - }, - "visibility": { - "hideImageAttachmentOption": { "type": "boolean", "default": false }, - "hideVideoAttachmentOption": { "type": "boolean", "default": false }, - "hideAudioAttachmentOption": { "type": "boolean", "default": false }, - "hideFileAttachmentOption": { "type": "boolean", "default": false }, - "hidePollsOption": { "type": "boolean", "default": false }, - "hideCollaborativeDocumentOption": { "type": "boolean", "default": false }, - "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false }, - "hideAttachmentButton": { "type": "boolean", "default": false }, - "hideVoiceRecordingButton": { "type": "boolean", "default": false }, - "hideEmojiKeyboardButton": { "type": "boolean", "default": false }, - "hideStickersButton": { "type": "boolean", "default": false }, - "hideSendButton": { "type": "boolean", "default": false } - }, - "richText": { - "enableRichTextEditor": { "type": "boolean", "default": false }, - "hideRichTextFormattingOptions": { "type": "boolean", "default": false }, - "showToolbarOnSelection": { "type": "boolean", "default": false }, - "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" } - }, - "behavior": { - "disableTypingEvents": { "type": "boolean", "default": false }, - "disableMentions": { "type": "boolean", "default": false }, - "disableMentionAll": { "type": "boolean", "default": false }, - "mentionAllLabel": { "type": "string", "default": "\"all\"" }, - "disableSoundForMessage": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "viewSlots": { - "headerView": "JSX.Element", - "auxiliaryButtonView": "JSX.Element", - "sendButtonView": "JSX.Element" - }, - "formatting": { - "textFormatters": { - "type": "CometChatTextFormatter[]", - "default": "default formatters from data source" - }, - "attachmentOptions": { - "type": "CometChatMessageComposerAction[]", - "note": "Custom attachment options list (replaces defaults)" - } - } - }, - "events": [ - { - "name": "ccMessageSent", - "payload": "{ message: CometChat.BaseMessage, status: string }", - "description": "Triggers when a message is sent with status: inProgress, success, or error" - }, - { - "name": "ccMessageEdited", - "payload": "{ message: CometChat.BaseMessage, status: string }", - "description": "Triggers when a message is edited with status: inProgress, success, or error" - }, - { - "name": "ccReplyToMessage", - "payload": "{ message: CometChat.BaseMessage, status: string }", - "description": "Triggers when a user replies to a message with status: inProgress, success, or error" - } - ], - "compositionExample": { - "description": "Compact message composer wired with message header and list for complete chat view", - "components": [ - "CometChatMessageHeader", - "CometChatMessageList", - "CometChatCompactMessageComposer" - ], - "flow": "Pass user or group prop to composer -> onSendButtonClick fires with CometChat.BaseMessage -> message appears in MessageList" - } -} -``` - - -## Overview - -`CometChatCompactMessageComposer` is a [Component](/ui-kit/react/components-overview#components) that provides a compact, single-line message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, code, links, lists, and blockquotes. - -This is a compact variant of [CometChatMessageComposer](/ui-kit/react/message-composer). It shares a similar props API but provides a streamlined, single-line interface with rich text formatting controls. - -Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view. - -Features such as **Rich Text Formatting**, **Attachments**, **Message Editing**, **Mentions**, **Link Previews**, and **Voice Recording** are supported. - - - - - - -**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). - - - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - - ---- - -## Minimal Render - -```tsx -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -function CompactComposerDemo() { - return ; -} - -export default CompactComposerDemo; -``` - ---- - -## Usage - -### Integration - -The following code snippet illustrates how you can directly incorporate the CompactMessageComposer component into your app. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - -```jsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - - -**Expected result:** -- The `CometChatCompactMessageComposer` component renders a compact, single-line message input -- The input supports typing, sending messages, attachments, emoji, stickers, and voice recording -- Clicking the send button dispatches the message to the specified `user` - ---- - -## Actions and Events - -### Callback Props - -[Actions](/ui-kit/react/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. - -#### onSendButtonClick - -Fires when the send message button is clicked. Overrides the default send behavior. - -```tsx -onSendButtonClick?: (message: CometChat.BaseMessage) => void -``` - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleSendButtonClick(message: CometChat.BaseMessage): void { - console.log("your custom on send button click action"); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - -```jsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleSendButtonClick(message) { - console.log("your custom on send button click action"); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - - -#### onError - -Fires on internal errors (network failure, auth issue, SDK exception). This action doesn't change the behavior of the component but rather listens for any errors that occur in the CompactMessageComposer component. - -```tsx -onError?: (error: CometChat.CometChatException) => void -``` - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleError(error: CometChat.CometChatException) { - throw new Error("your custom error action"); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - -```jsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleError(error) { - throw new Error("your custom error action"); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - - -#### onTextChange - -Fires as the user types in the composer input. - -```tsx -onTextChange?: (text: string) => void -``` - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleTextChange(text: string) { - console.log("onTextChange", text); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - -```jsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - function handleTextChange(text) { - console.log("onTextChange", text); - } - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - - -#### Custom Mentions Request Builders - -You can customize how mentioned users and group members are fetched by providing custom request builders. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - const [chatGroup, setChatGroup] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - CometChat.getGroup("guid").then((group) => { - setChatGroup(group); - }); - }, []); - - // Custom Users Request Builder for mentions - const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder() - .setLimit(10) - .setSearchKeyword("") - .setRoles(["default", "moderator"]); - - // Custom Group Members Request Builder for group mentions - const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid") - .setLimit(15) - .setSearchKeyword("") - .setScopes(["admin", "moderator", "participant"]); - - return chatUser ? ( -
- {/* For user chat with custom users mentions */} - - - {/* For group chat with custom group members mentions */} - {chatGroup && ( - - )} -
- ) : null; -} -``` - - - - -```jsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - const [chatGroup, setChatGroup] = React.useState(null); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - CometChat.getGroup("guid").then((group) => { - setChatGroup(group); - }); - }, []); - - // Custom Users Request Builder for mentions - const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder() - .setLimit(10) - .setSearchKeyword("") - .setRoles(["default", "moderator"]); - - // Custom Group Members Request Builder for group mentions - const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid") - .setLimit(15) - .setSearchKeyword("") - .setScopes(["admin", "moderator", "participant"]); - - return chatUser ? ( -
- {/* For user chat with custom users mentions */} - - - {/* For group chat with custom group members mentions */} - {chatGroup && ( - - )} -
- ) : null; -} -``` - - - - - -*** - -### Filters - -CompactMessageComposer component does not have any available filters. - -*** - -### Global UI Events - -[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. - -`CometChatMessageEvents` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup. - -| Event | Fires when | Payload | -| --- | --- | --- | -| **ccMessageSent** | A message is sent | `{ message: CometChat.BaseMessage, status: string }` | -| **ccMessageEdited** | A message is edited | `{ message: CometChat.BaseMessage, status: string }` | -| **ccReplyToMessage** | A user replies to a message | `{ message: CometChat.BaseMessage, status: string }` | - -Each event has three states: `inProgress`, `success`, and `error`. - -When to use: sync external UI with message state changes. For example, update a notification badge when messages are sent, or trigger analytics when a message is edited. - - - -```tsx -import React, { useEffect } from "react"; -import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; - -function useCompactComposerEvents() { - useEffect(() => { - const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe( - (item) => { - console.log("Message edited:", item); - } - ); - - const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe( - (item) => { - console.log("Reply to message:", item); - } - ); - - const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe( - (item) => { - console.log("Message sent:", item); - } - ); - - // Cleanup on unmount - return () => { - ccMessageEdited?.unsubscribe(); - ccReplyToMessage?.unsubscribe(); - ccMessageSent?.unsubscribe(); - }; - }, []); -} -``` - - - - -```jsx -import React, { useEffect } from "react"; -import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; - -function useCompactComposerEvents() { - useEffect(() => { - const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe( - (item) => { - console.log("Message edited:", item); - } - ); - - const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe( - (item) => { - console.log("Reply to message:", item); - } - ); - - const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe( - (item) => { - console.log("Message sent:", item); - } - ); - - // Cleanup on unmount - return () => { - ccMessageEdited?.unsubscribe(); - ccReplyToMessage?.unsubscribe(); - ccMessageSent?.unsubscribe(); - }; - }, []); -} -``` - - - - - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling. - - -*** - -## Customization - -To fit your app's design requirements, you can customize the appearance of the CompactMessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. - - - -*** - -### Functionality - -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. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -; -``` - - - - - -Below is a list of customizations along with corresponding code snippets - -| Property | Type | Default | Description | Code | -| --- | --- | --- | --- | --- | -| **user** | `CometChat.User` | `undefined` | Specifies the recipient of the message (user object). | `user={chatUser}` | -| **group** | `CometChat.Group` | `undefined` | Specifies the group to send messages to. Used if the `user` prop is not provided. | `group={chatGroup}` | -| **parentMessageId** | `number` | `undefined` | Specifies the ID of the parent message for threading or replying to a specific message. | `parentMessageId={12345}` | -| **initialComposerText** | `string` | `""` | The initial text pre-filled in the message input when the component mounts. | `initialComposerText="Hello"` | -| **placeholderText** | `string` | `"Type a message..."` | The placeholder text displayed in the message input when it is empty. | `placeholderText="Type a message..."` | -| **disableTypingEvents** | `boolean` | `false` | Disables the typing indicator for the current message composer. | `disableTypingEvents={true}` | -| **disableMentions** | `boolean` | `false` | Disables the mentions functionality in the message composer. | `disableMentions={true}` | -| **disableMentionAll** | `boolean` | `false` | Controls whether group mentions like @all appear in suggestions. | `disableMentionAll={true}` | -| **mentionAllLabel** | `string` | `"all"` | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). | `mentionAllLabel="all"` | -| **mentionsUsersRequestBuilder** | `CometChat.UsersRequestBuilder` | `undefined` | Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched. | `mentionsUsersRequestBuilder={usersRequestBuilder}` | -| **mentionsGroupMembersRequestBuilder** | `CometChat.GroupMembersRequestBuilder` | `undefined` | Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved. | `mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}` | -| **enableRichTextEditor** | `boolean` | `false` | Master switch to enable rich text formatting. When false, the composer works as plain text only. | `enableRichTextEditor={true}` | -| **showToolbarOnSelection** | `boolean` | `false` | Shows a floating toolbar when text is selected. Ignored on mobile devices. | `showToolbarOnSelection={true}` | -| **hideRichTextFormattingOptions** | `boolean` | `false` | Hides the rich text formatting toolbar. Keyboard shortcuts still work. | `hideRichTextFormattingOptions={true}` | -| **hideImageAttachmentOption** | `boolean` | `false` | Hides the image attachment option in the message composer. | `hideImageAttachmentOption={true}` | -| **hideVideoAttachmentOption** | `boolean` | `false` | Hides the video attachment option in the message composer. | `hideVideoAttachmentOption={true}` | -| **hideAudioAttachmentOption** | `boolean` | `false` | Hides the audio attachment option in the message composer. | `hideAudioAttachmentOption={true}` | -| **hideFileAttachmentOption** | `boolean` | `false` | Hides the file attachment option in the message composer. | `hideFileAttachmentOption={true}` | -| **hidePollsOption** | `boolean` | `false` | Hides the polls option in the message composer. | `hidePollsOption={true}` | -| **hideCollaborativeDocumentOption** | `boolean` | `false` | Hides the collaborative document option in the message composer. | `hideCollaborativeDocumentOption={true}` | -| **hideCollaborativeWhiteboardOption** | `boolean` | `false` | Hides the collaborative whiteboard option in the message composer. | `hideCollaborativeWhiteboardOption={true}` | -| **hideAttachmentButton** | `boolean` | `false` | Hides the attachment button in the message composer. | `hideAttachmentButton={true}` | -| **hideVoiceRecordingButton** | `boolean` | `false` | Hides the voice recording button in the message composer. | `hideVoiceRecordingButton={true}` | -| **hideEmojiKeyboardButton** | `boolean` | `false` | Hides the emoji keyboard button in the message composer. | `hideEmojiKeyboardButton={true}` | -| **hideStickersButton** | `boolean` | `false` | Hides the stickers button in the message composer. | `hideStickersButton={true}` | -| **hideSendButton** | `boolean` | `false` | Hides the send button in the message composer. | `hideSendButton={true}` | -| **showScrollbar** | `boolean` | `false` | Controls the visibility of the scrollbar in the composer. | `showScrollbar={true}` | -| **enterKeyBehavior** | `EnterKeyBehavior` | `EnterKeyBehavior.SendMessage` | Determines the behavior of the Enter key (e.g., send message or add a new line). | `enterKeyBehavior={EnterKeyBehavior.SendMessage}` | -| **disableSoundForMessage** | `boolean` | `false` | Disables sound for incoming messages. | `disableSoundForMessage={true}` | -| **customSoundForMessage** | `string` | `undefined` | Specifies a custom audio sound for incoming messages. | `customSoundForMessage="sound.mp3"` | - -*** - -## Rich Text Formatting - -The CompactMessageComposer includes a built-in rich text editor. Rich text must be explicitly enabled via `enableRichTextEditor={true}` (defaults to `false`). - -### Formatting Toolbar - -The toolbar provides the following formatting tools in a fixed order: - -| Tool | Icon | Shortcut | Description | -|------|------|----------|-------------| -| Bold | B | Cmd/Ctrl+B | Bold text | -| Italic | I | Cmd/Ctrl+I | Italic text | -| Underline | U | Cmd/Ctrl+U | Underline text | -| Strikethrough | S | Cmd/Ctrl+Shift+S | Strikethrough text | -| Inline Code | `` | Cmd/Ctrl+E | Inline code | -| Code Block | ``` | Cmd/Ctrl+Shift+C | Multi-line code block | -| Link | 🔗 | Cmd/Ctrl+K | Add/edit hyperlink | -| Bullet List | • | Cmd/Ctrl+Shift+8 | Unordered list | -| Ordered List | 1. | Cmd/Ctrl+Shift+7 | Numbered list | -| Blockquote | ❝ | Cmd/Ctrl+Shift+9 | Quote block | - -### Toolbar Visibility Modes - -The toolbar supports multiple display modes controlled via props. When multiple props are set, they follow this priority order: - -1. `enableRichTextEditor={false}` — Highest priority, disables all rich text features (plain text only) -2. `hideRichTextFormattingOptions={true}` — Toolbar visible by default above input -3. `showToolbarOnSelection={true}` — Floating toolbar appears on text selection (desktop only) - -If none of the toolbar props are enabled, the toolbar is hidden but keyboard shortcuts still work. - -### Behavior Matrix - -| `enableRichTextEditor` | `hideRichTextFormattingOptions` | `showToolbarOnSelection` | Result | -|------------------------|-------------------------------|--------------------------|--------| -| `false` | - | - | Plain text, no formatting UI | -| `true` | `false` | `true` | Floating toolbar appears on text selection (desktop) | -| `true` | `true` | `false` | Toolbar visible by default above input | -| `true` | `false` | `false` | No toolbar UI, only keyboard shortcuts work | - -### Mobile Behavior - -On mobile devices, only the fixed toolbar is supported. The floating selection toolbar is disabled for better touch UX. - -| Props | Mobile Behavior | -|-------|-----------------| -| `showToolbarOnSelection={true}` | **Ignored on mobile** — Falls back to fixed toolbar | -| `hideRichTextFormattingOptions={true}` | Fixed toolbar visible by default above input | - -### Toolbar Configuration Examples - - - -```tsx -// Floating toolbar appears on text selection (desktop only) - -``` - - - - -```tsx -// Toolbar visible by default above input - -``` - - - - -```tsx -// Rich text enabled but no toolbar (keyboard shortcuts only) - -``` - - - - -```tsx -// Selection toolbar + always-visible toolbar - -``` - - - - - -*** - -## Custom View Slots - -Each slot replaces a section of the default UI. Slots that accept parameters receive the relevant data for customization. - -| Slot | Type | Replaces | -| --- | --- | --- | -| `headerView` | `JSX.Element` | Area above the composer input | -| `auxiliaryButtonView` | `JSX.Element` | Sticker and AI button area | -| `sendButtonView` | `JSX.Element` | Send button | -| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list (replaces defaults) | -| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in composer | - -### Advanced - -For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. - -*** - -#### AttachmentOptions - -By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the CompactMessageComposer Component. This will override the existing list of `MessageComposerActions`. - - - - - -Use the following code to achieve the customization shown above. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatCompactMessageComposer, - CometChatMessageComposerAction, -} from "@cometchat/chat-uikit-react"; - -function getAttachments() { - return [ - new CometChatMessageComposerAction({ - id: "custom1", - title: "Custom Option 1", - iconURL: "Icon URL", - }), - new CometChatMessageComposerAction({ - id: "custom2", - title: "Custom Option 2", - iconURL: "Icon URL", - }), - new CometChatMessageComposerAction({ - id: "custom3", - title: "Custom Option 3", - iconURL: "Icon URL", - }), - new CometChatMessageComposerAction({ - id: "custom4", - title: "Custom Option 4", - iconURL: "Icon URL", - }), - ]; -} - -; -``` - - - - -```css -.cometchat-compact-message-composer__secondary-button-view-attachment-button - .cometchat-action-sheet { - border: none; - border-radius: inherit; - background: transparent; - box-shadow: none; - width: 100%; -} - -.cometchat-compact-message-composer__secondary-button-view-attachment-button - .cometchat-popover__content - > .cometchat { - border-radius: inherit; -} - -.cometchat-compact-message-composer__secondary-button-view-attachment-button - .cometchat-popover__content { - height: 240px; -} - -.cometchat-compact-message-composer__secondary-button-view-attachment-button - .cometchat-action-sheet__item-icon { - background: #141414; -} -``` - - - - - -**Expected result:** The default attachment options (image, video, audio, file, polls, etc.) are replaced with four custom options. The action sheet styling is customized with transparent background and custom icon colors. - -*** - -#### AuxiliaryButtonView - -You can insert a custom view into the CompactMessageComposer component to add additional functionality using the following method. - - -The CompactMessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality. - - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatCompactMessageComposer, - CometChatButton, -} from "@cometchat/chat-uikit-react"; - -const auxiliaryButtonView = ( - { - // logic here - }} - /> -); - -; -``` - - - - - -*** - -#### SendButtonView - -You can set a custom view in place of the already existing send button view. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatCompactMessageComposer, - CometChatButton, -} from "@cometchat/chat-uikit-react"; - -const sendButtonView = ( - { - // logic here - }} - /> -); - -; -``` - - - - -```css -.cometchat-compact-message-composer - div:not([class]) - .cometchat-compact-message-composer__send-button - .cometchat-button { - background: #edeafa; -} - -.cometchat-compact-message-composer - div:not([class]) - .cometchat-compact-message-composer__send-button - .cometchat-button__icon { - background: #6852d6; -} -``` - - - - - -**Expected result:** The default send button is replaced with a custom button. The CSS overrides give the button a light purple background (#edeafa) with a purple icon (#6852d6). - -*** - -#### HeaderView - -You can set custom headerView to the CompactMessageComposer component using the following method. - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; - -const getHeaderView = () => { - return ( -
-
-
- User has paused their notifications -
-
- ); -}; - -; -``` - - - - -```css -.cometchat-compact-message-composer .compact-composer__header-view { - display: flex; - align-items: center; - align-content: center; - gap: 8px var(--cometchat-padding-2, 8px); - align-self: stretch; - flex-wrap: wrap; - width: 100%; -} - -.cometchat-compact-message-composer__header { - background: #dcd7f6; - border-radius: var(--cometchat-radius-max, 1000px); - padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px); -} - -.cometchat-compact-message-composer - .compact-composer__header-view - .compact-composer__header-view-text { - overflow: hidden; - color: var(--cometchat-text-color-primary, #141414); - text-overflow: ellipsis; - font: var(--cometchat-font-body-regular); -} - -.cometchat-compact-message-composer - .compact-composer__header-view - .compact-composer__header-view-icon { - display: flex; - width: 24px; - height: 24px; - justify-content: center; - align-items: center; - background: var(--cometchat-primary-color); - -webkit-mask: url("icon url") center center no-repeat; - -webkit-mask-size: contain; - mask: url("icon url") center center no-repeat; - mask-size: contain; -} -``` - - - - - -**Expected result:** A custom header bar appears above the composer input with an icon and notification text ("User has paused their notifications"), styled with a light purple background and rounded corners. - -*** - -#### 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/react/mentions-formatter-guide) - - - -```ts -import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; -import DialogHelper from "./Dialog"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -class ShortcutFormatter extends CometChatTextFormatter { - private shortcuts: { [key: string]: string } = {}; - private dialogIsOpen: boolean = false; - private dialogHelper = new DialogHelper(); - private currentShortcut: string | null = null; - - constructor() { - super(); - this.setTrackingCharacter("!"); - CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined) - .then((data: any) => { - if (data && data.shortcuts) { - this.shortcuts = data.shortcuts; - } - }) - .catch((error) => console.log("error fetching shortcuts", error)); - } - - onKeyDown(event: KeyboardEvent) { - const caretPosition = - this.currentCaretPosition instanceof Selection - ? this.currentCaretPosition.anchorOffset - : 0; - const textBeforeCaret = this.getTextBeforeCaret(caretPosition); - - const match = textBeforeCaret.match(/!([a-zA-Z]+)$/); - if (match) { - const shortcut = match[0]; - const replacement = this.shortcuts[shortcut]; - if (replacement) { - if (this.dialogIsOpen && this.currentShortcut !== shortcut) { - this.closeDialog(); - } - this.openDialog(replacement, shortcut); - } - } - } - - getCaretPosition() { - if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 }; - const range = this.currentCaretPosition?.getRangeAt(0); - const rect = range.getBoundingClientRect(); - return { - x: rect.left, - y: rect.top, - }; - } - - openDialog(buttonText: string, shortcut: string) { - this.dialogHelper.createDialog( - () => this.handleButtonClick(buttonText), - buttonText - ); - this.dialogIsOpen = true; - this.currentShortcut = shortcut; - } - - closeDialog() { - this.dialogHelper.closeDialog(); - this.dialogIsOpen = false; - this.currentShortcut = null; - } - - handleButtonClick = (buttonText: string) => { - if (this.currentCaretPosition && this.currentRange) { - const shortcut = Object.keys(this.shortcuts).find( - (key) => this.shortcuts[key] === buttonText - ); - if (shortcut) { - const replacement = this.shortcuts[shortcut]; - this.addAtCaretPosition( - replacement, - this.currentCaretPosition, - this.currentRange - ); - } - } - if (this.dialogIsOpen) { - this.closeDialog(); - } - }; - - getFormattedText(text: string): string { - return text; - } - - private getTextBeforeCaret(caretPosition: number): string { - if ( - this.currentRange && - this.currentRange.startContainer && - typeof this.currentRange.startContainer.textContent === "string" - ) { - const textContent = this.currentRange.startContainer.textContent; - if (textContent.length >= caretPosition) { - return textContent.substring(0, caretPosition); - } - } - return ""; - } -} - -export default ShortcutFormatter; -``` - - - - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react"; -import ShortcutFormatter from "./ShortCutFormatter"; - -export function CompactComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }); - }, []); - - return chatUser ? ( -
- -
- ) : null; -} -``` - - - - - -*** - - - ---- - -## Next Steps - - - - Full-featured multi-line message composer component. - - - Display messages with real-time updates. - - - Implement @mentions in your chat application. - - - Customize colors, fonts, and styling. - - diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 4418f1c8d..40493781d 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -1,92 +1,209 @@ --- title: "Overview" -description: "Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI." +description: "Understand the component architecture, usage patterns, and all available components in the CometChat React UI Kit." --- - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component | -| Callback actions | `on={(param) => {}}` | -| Data filtering | `RequestBuilder={new CometChat.RequestBuilder()}` | -| Toggle features | `hide={true}` or `show={true}` | -| Custom rendering | `View={() => JSX}` | -| CSS overrides | Target `.cometchat-` class in global CSS | -| Calling | Requires separate `@cometchat/calls-sdk-javascript` package | - - - ## Architecture -The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components: +The UI Kit provides a set of independent, composable React components that wire together into complete chat layouts. A typical two-panel layout uses four core components: -- **CometChatConversations** — sidebar listing recent conversations (users and groups) -- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator +- **CometChatConversations** — sidebar listing recent conversations +- **CometChatMessageHeader** — toolbar showing avatar, name, status, and typing indicator - **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads - **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes -Data flow: selecting a conversation in CometChatConversations yields a `CometChat.User` or `CometChat.Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners. +Data flow: selecting a conversation yields a `CometChat.User` or `CometChat.Group` object. Pass that object as a prop (`user` or `group`) to the message components. They handle SDK calls internally — the composer sends messages, the list receives them via real-time listeners. + +All components must be rendered inside a `` which initializes the SDK connection and provides shared context (theme, locale, events). + + + + + +```tsx +import { + CometChatProvider, + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; + +function ChatApp() { + const [user, setUser] = useState(); + + return ( + +
+ setUser(conv.getConversationWith())} /> +
+ + + +
+
+ + ); +} +``` + +--- + +## Flat API -Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/react/events) for the full list. +Every feature component can be rendered in a single line. Pass props directly, the component handles its own layout internally. + +```tsx + +``` -Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and CSS variable overrides on `.cometchat-` classes. +This is the quickest way to get started. The component renders all its default sub-components (header, list, empty state, loading state, etc.) automatically. --- -## Component Catalog +## Compound Composition + +For full layout control, use the compound pattern. Each feature component is a namespace with sub-components: + +```tsx + + {/* Only render what you need, and omit sub-components to hide them */} + + + +``` + +Key principles: +- **Root** initializes state, fetches data, and provides context to children. +- **Sub-components** read from context and render when their state is active. +- **Omit a sub-component** to hide it, no boolean props needed. +- **Add custom elements** anywhere inside Root alongside the sub-components. + +Both APIs produce the same result. The flat API is shorthand for rendering Root with all sub-components in their default order. + +--- + +## Component Categories + +Components are organized into three categories: + +### Feature Components + +Feature components integrate with the CometChat SDK for data fetching, real-time events, and state management. They follow the compound pattern and support both flat and compound APIs. + +Feature components: +- Own their data lifecycle (fetch, paginate, refresh) +- Subscribe to real-time SDK events (new messages, presence changes, typing indicators) +- Manage complex state via hooks and reducers +- Provide context to their sub-components + +### Base Components + +Base components are pure UI building blocks with no SDK integration. They accept props and render UI — no network calls, no real-time events. Feature components compose these internally. + +Base components use a plain namespace object (compound sub-components) but don't have the callable flat API shorthand. + +Examples: Avatar, Button, Date, ContextMenu, SearchBar, ConfirmDialog, Popover, MediaRecorder, MessageBubble, Reactions. -All components are imported from `@cometchat/chat-uikit-react`. +### Bubble Components (Plugins) + +Message bubble components (TextBubble, ImageBubble, FileBubble, AudioBubble, VideoBubble, StickerBubble, PollBubble, etc.) are part of the **Plugin system**. Each plugin handles a specific message type and provides the bubble component that renders it. + +Bubble components are documented in the [Plugins](/ui-kit/react/plugins/overview) section alongside their parent plugin. See [Plugins Overview](/ui-kit/react/plugins/overview) for how to customize message rendering. + +--- + +## Feature Components + +All feature components are imported from `@cometchat/chat-uikit-react`. ### Conversations and Lists -| Component | Purpose | Key Props | Page | -| --- | --- | --- | --- | -| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/conversations) | -| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemClick`, `onError` | [Users](/ui-kit/react/users) | -| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemClick`, `onError` | [Groups](/ui-kit/react/groups) | -| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemClick` | [Group Members](/ui-kit/react/group-members) | +| Component | Purpose | Page | +| --- | --- | --- | +| `CometChatConversations` | Scrollable list of recent conversations with real-time updates | [Conversations](/ui-kit/react/components/conversations) | +| `CometChatUsers` | Searchable list of users with selection support | [Users](/ui-kit/react/components/cometchat-users) | +| `CometChatGroups` | Searchable list of groups with selection support | [Groups](/ui-kit/react/components/cometchat-groups) | +| `CometChatGroupMembers` | List of group members with role-based actions | [Group Members](/ui-kit/react/components/cometchat-group-members) | ### Messages -| Component | Purpose | Key Props | Page | -| --- | --- | --- | --- | -| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `enableAutoSummaryGeneration` | [Message Header](/ui-kit/react/message-header) | -| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/message-list) | -| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonClick`, `placeholderText` | [Message Composer](/ui-kit/react/message-composer) | -| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/react/message-template) | -| CometChatThreadHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters` | [Thread Header](/ui-kit/react/thread-header) | +| Component | Purpose | Page | +| --- | --- | --- | +| `CometChatMessageHeader` | Toolbar with avatar, name, status, typing indicator, and call buttons | [Message Header](/ui-kit/react/components/message-header) | +| `CometChatMessageList` | Scrollable message feed with plugin-based bubble rendering | [Message List](/ui-kit/react/components/message-list) | +| `CometChatMessageComposer` | Rich text input with attachments, emoji, voice recording, and formatting | [Message Composer](/ui-kit/react/components/message-composer) | +| `CometChatMessageBubble` | Message bubble container with alignment, receipts, options, and reactions | [Message Bubble](/ui-kit/react/components/message-bubble) | +| `CometChatThreadHeader` | Parent message bubble and reply count for threaded conversations | [Thread Header](/ui-kit/react/components/thread-header) | +| `CometChatMessageInformation` | Message delivery and read receipt details panel | [Message Information](/ui-kit/react/components/message-information) | +| `CometChatReactions` | Reaction chips bar with reactor list popover | [Reactions](/ui-kit/react/components/reactions) | +| `CometChatReactionList` | Full reactor list with tabs and pagination | [Reaction List](/ui-kit/react/components/reaction-list) | +| `CometChatActionBubble` | Renders group action and call action system messages | [Action Bubble](/ui-kit/react/components/action-bubble) | ### Calling -| Component | Purpose | Key Props | Page | -| --- | --- | --- | --- | -| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/call-buttons) | -| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)` | [Incoming Call](/ui-kit/react/incoming-call) | -| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `onCloseClicked` | [Outgoing Call](/ui-kit/react/outgoing-call) | -| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/react/call-logs) | +| Component | Purpose | Page | +| --- | --- | --- | +| `CometChatCallButtons` | Voice and video call initiation buttons | [Call Buttons](/ui-kit/react/components/call-buttons) | +| `CometChatIncomingCall` | Incoming call notification with accept/decline | [Incoming Call](/ui-kit/react/components/incoming-call) | +| `CometChatOutgoingCall` | Outgoing call screen with cancel control | [Outgoing Call](/ui-kit/react/components/outgoing-call) | +| `CometChatCallLogs` | Scrollable list of call history | [Call Logs](/ui-kit/react/components/call-logs) | ### Search and AI -| Component | Purpose | Key Props | Page | -| --- | --- | --- | --- | -| CometChatSearch | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/search) | -| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools` | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) | +| Component | Purpose | Page | +| --- | --- | --- | +| `CometChatSearch` | Unified search across conversations and messages | [Search](/ui-kit/react/components/search) | +| `CometChatAIAssistantChat` | AI agent chat with streaming, suggestions, and history | [AI Assistant](/ui-kit/react/components/ai-assistant) | -## Component API Pattern +--- + +## Base Components + +Base components are imported from `@cometchat/chat-uikit-react`. They don't have individual doc pages — use the source types and Storybook for reference. -All components share a consistent API surface. +| Component | Purpose | +| --- | --- | +| `CometChatAvatar` | User/group avatar with image and initials fallback | +| `CometChatButton` | Styled button with icon, text, loading, and variant support | +| `CometChatCheckbox` | Checkbox input with label and controlled/uncontrolled support | +| `CometChatChangeScope` | Group member role/scope change selector | +| `CometChatConfirmDialog` | Confirmation dialog with customizable message and buttons | +| `CometChatContextMenu` | Options menu with top-row icons and overflow dropdown | +| `CometChatConversationStarter` | AI-generated conversation starter suggestions as clickable pills | +| `CometChatConversationSummary` | AI-generated conversation summary display | +| `CometChatDate` | Formatted date/time display with temporal bucketing | +| `CometChatDownloadButton` | Download button for file and media attachments | +| `CometChatEmojiKeyboard` | Emoji picker with category tabs and search | +| `CometChatErrorBoundary` | Error isolation wrapper with fallback UI and retry | +| `CometChatFlagMessageDialog` | Modal dialog for reporting/flagging messages with reason selection | +| `CometChatFormattingToolbar` | Rich text formatting toolbar (bold, italic, lists, links, code) | +| `CometChatFullScreenViewer` | Full-screen image/media viewer with download | +| `CometChatLinkDialog` | Dialog for inserting or editing hyperlinks | +| `CometChatLinkPopover` | Popover for previewing and editing links inline | +| `CometChatListItem` | Standardized list item with avatar, title, subtitle, and tail | +| `CometChatMediaRecorder` | Audio recording with timer, preview, and submit | +| `CometChatModerationView` | Content moderation indicator and action view | +| `CometChatPopover` | Positioning utility component for popovers and dropdowns | +| `CometChatRadioButton` | Radio button input with label support | +| `CometChatSearchBar` | Search input with clear button and keyboard handling | +| `CometChatActionSheet` | Bottom sheet with grouped action items | +| `CometChatSmartReplies` | AI-powered reply suggestions as clickable chips | +| `CometChatThreadView` | Inline thread reply indicator with reply count and unread dot | +| `CometChatToast` | Toast notification for transient feedback messages | +| `CometChatTypingIndicator` | Animated typing indicator with user attribution | + +--- -### Actions +## Component API Pattern -Actions control component behavior. They split into two categories: +All components share a consistent API surface for customization. -**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed. +### Actions (Callbacks) -**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior: +Callback props fire on user interactions. Override them to customize behavior: -```tsx lines +```tsx openThreadPanel(message)} @@ -94,74 +211,67 @@ Actions control component behavior. They split into two categories: /> ``` -### Events - -Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references. +### Filters (RequestBuilder) -```tsx lines -import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; +List components accept `RequestBuilder` props to control which data loads: -const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => { - // react to sent message -}); - -// cleanup -sub?.unsubscribe(); +```tsx + ``` -Each component page documents its emitted events in the Events section. +Pass the builder instance — not the result of `.build()`. -### Filters +### View Props -List-based components accept `RequestBuilder` props to control which data loads: +View props replace the visual content inside a component slot while keeping the default behavior wired: -```tsx lines -} + headerView={} + auxiliaryButtonView={} /> ``` -### Custom View Slots +For deeper control, use compound composition to replace entire slots including their behavior. -Components expose named view slots to replace sections of the default UI: +### CSS Styling -```tsx lines -} - subtitleView={} - leadingView={} -/> -``` +Components use CSS custom properties (design tokens). Override them on the `.cometchat` root or on component-specific selectors: -### CSS Overrides - -Every component has a root CSS class (`.cometchat-`) for style customization: +```css +.cometchat { + --cometchat-primary-color: #6851d6; + --cometchat-font-family: "Inter", sans-serif; +} -```css lines -.cometchat-message-list .cometchat-text-bubble__body-text { - font-family: "SF Pro"; +.cometchat-message-list { + --cometchat-background-color-01: #fafafa; } ``` +Component class names follow BEM convention: `.cometchat-component-name__element--modifier`. + --- ## Next Steps - - Chat features included out of the box + + Customize colors, fonts, and spacing with CSS variables - - Customize colors, fonts, and styles + + Customize message rendering with the plugin system - - Add-on features like polls, stickers, and translation + + Subscribe to real-time events across components - + Task-oriented tutorials for common patterns diff --git a/ui-kit/react/v7/components/action-bubble.mdx b/ui-kit/react/components/action-bubble.mdx similarity index 90% rename from ui-kit/react/v7/components/action-bubble.mdx rename to ui-kit/react/components/action-bubble.mdx index 903a67914..e44910036 100644 --- a/ui-kit/react/v7/components/action-bubble.mdx +++ b/ui-kit/react/components/action-bubble.mdx @@ -43,7 +43,7 @@ description: "A centered pill-shaped system message bubble used for group action ## Overview -`CometChatActionBubble` renders a centered, pill-shaped system message. It is used internally by the [Group Action Plugin](/ui-kit/react/v7/plugins/group-action) for group membership messages and the [Call Action Plugin](/ui-kit/react/v7/plugins/call-action) for call status messages. +`CometChatActionBubble` renders a centered, pill-shaped system message. It is used internally by the [Group Action Plugin](/ui-kit/react/plugins/group-action) for group membership messages and the [Call Action Plugin](/ui-kit/react/plugins/call-action) for call status messages. The component renders nothing if `messageText` is empty or whitespace-only. @@ -202,9 +202,9 @@ Override a specific icon: It is consumed by two plugins: -1. **[Group Action Plugin](/ui-kit/react/v7/plugins/group-action)** — passes only `messageText` (no icon). Handles group membership changes (join, leave, kick, ban, scope change). +1. **[Group Action Plugin](/ui-kit/react/plugins/group-action)** — passes only `messageText` (no icon). Handles group membership changes (join, leave, kick, ban, scope change). -2. **[Call Action Plugin](/ui-kit/react/v7/plugins/call-action)** — passes `messageText`, `iconClassName`, and `iconErrorColor`. Handles call status messages (missed, outgoing, incoming, ended). +2. **[Call Action Plugin](/ui-kit/react/plugins/call-action)** — passes `messageText`, `iconClassName`, and `iconErrorColor`. Handles call status messages (missed, outgoing, incoming, ended). You can also use it directly in custom plugins for any centered system message: @@ -234,16 +234,16 @@ const MyCustomPlugin = { ## Next Steps - + System messages for group membership changes - + System messages for call status - + Build your own message plugin - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/ai-assistant-chat.mdx b/ui-kit/react/components/ai-assistant-chat.mdx similarity index 99% rename from ui-kit/react/v7/components/ai-assistant-chat.mdx rename to ui-kit/react/components/ai-assistant-chat.mdx index e0b13a988..27e70f3b8 100644 --- a/ui-kit/react/v7/components/ai-assistant-chat.mdx +++ b/ui-kit/react/components/ai-assistant-chat.mdx @@ -788,13 +788,13 @@ Custom auxiliary button view for the header. Replaces the default New Chat + His ## Next Steps - + Display messages in a conversation - + Compose and send messages - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/call-logs.mdx b/ui-kit/react/components/call-logs.mdx similarity index 98% rename from ui-kit/react/v7/components/call-logs.mdx rename to ui-kit/react/components/call-logs.mdx index 37cc424d8..ea8e79549 100644 --- a/ui-kit/react/v7/components/call-logs.mdx +++ b/ui-kit/react/components/call-logs.mdx @@ -474,13 +474,13 @@ Show the native scrollbar on the call logs list. ## Next Steps - + Handle incoming call notifications with accept/decline actions - + Display the outgoing call screen while waiting for the receiver to answer - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/conversations.mdx b/ui-kit/react/components/conversations.mdx similarity index 99% rename from ui-kit/react/v7/components/conversations.mdx rename to ui-kit/react/components/conversations.mdx index de328d2f4..24a409067 100644 --- a/ui-kit/react/v7/components/conversations.mdx +++ b/ui-kit/react/components/conversations.mdx @@ -1171,16 +1171,16 @@ Overrides survive component updates because the component never sets inline styl ## Next Steps - + Browse and select users for new conversations - + Display messages for the selected conversation - + Search across conversations and messages - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/group-members.mdx b/ui-kit/react/components/group-members.mdx similarity index 98% rename from ui-kit/react/v7/components/group-members.mdx rename to ui-kit/react/components/group-members.mdx index 7230f929d..deb918978 100644 --- a/ui-kit/react/v7/components/group-members.mdx +++ b/ui-kit/react/components/group-members.mdx @@ -906,16 +906,16 @@ Callback when the back button in the header is clicked. ## Next Steps - + Browse and select groups - + View and unban banned group members - + Add new members to a group - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/groups.mdx b/ui-kit/react/components/groups.mdx similarity index 99% rename from ui-kit/react/v7/components/groups.mdx rename to ui-kit/react/components/groups.mdx index faa878a6a..cde3d6ad9 100644 --- a/ui-kit/react/v7/components/groups.mdx +++ b/ui-kit/react/components/groups.mdx @@ -781,16 +781,16 @@ Callback when the group list is empty after the initial fetch completes. ## Next Steps - + View and manage members of a group - + View recent conversations including group chats - + Display messages for the selected group - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/incoming-call.mdx b/ui-kit/react/components/incoming-call.mdx similarity index 98% rename from ui-kit/react/v7/components/incoming-call.mdx rename to ui-kit/react/components/incoming-call.mdx index db57f429c..7e068493d 100644 --- a/ui-kit/react/v7/components/incoming-call.mdx +++ b/ui-kit/react/components/incoming-call.mdx @@ -499,13 +499,13 @@ Additional CSS class name applied to the root element. ## Next Steps - + Display the outgoing call screen while waiting for the receiver to answer - + Browse call history and re-initiate calls - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/message-bubble.mdx b/ui-kit/react/components/message-bubble.mdx similarity index 100% rename from ui-kit/react/v7/components/message-bubble.mdx rename to ui-kit/react/components/message-bubble.mdx diff --git a/ui-kit/react/v7/components/message-composer.mdx b/ui-kit/react/components/message-composer.mdx similarity index 99% rename from ui-kit/react/v7/components/message-composer.mdx rename to ui-kit/react/components/message-composer.mdx index d4c815383..3aa870fa1 100644 --- a/ui-kit/react/v7/components/message-composer.mdx +++ b/ui-kit/react/components/message-composer.mdx @@ -1120,13 +1120,13 @@ Called when a mention is selected from the suggestions list. ## Next Steps - + Display messages for the selected conversation - + Show threaded replies for a parent message - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/message-header.mdx b/ui-kit/react/components/message-header.mdx similarity index 99% rename from ui-kit/react/v7/components/message-header.mdx rename to ui-kit/react/components/message-header.mdx index 4e805aee5..fd3ead0ba 100644 --- a/ui-kit/react/v7/components/message-header.mdx +++ b/ui-kit/react/components/message-header.mdx @@ -794,16 +794,16 @@ Callback when an SDK error occurs during call operations or other internal proce ## Next Steps - + Display messages for the active conversation - + Compose and send messages - + Header for threaded message views - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/message-information.mdx b/ui-kit/react/components/message-information.mdx similarity index 100% rename from ui-kit/react/v7/components/message-information.mdx rename to ui-kit/react/components/message-information.mdx diff --git a/ui-kit/react/v7/components/message-list.mdx b/ui-kit/react/components/message-list.mdx similarity index 99% rename from ui-kit/react/v7/components/message-list.mdx rename to ui-kit/react/components/message-list.mdx index 6f2f8294e..f782c443d 100644 --- a/ui-kit/react/v7/components/message-list.mdx +++ b/ui-kit/react/components/message-list.mdx @@ -1383,16 +1383,16 @@ Custom error state shown when message fetching fails. ## Next Steps - + Add a composer below the message list for sending messages - + Display thread context above a threaded message list - + Learn how plugins register custom bubble renderers - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/outgoing-call.mdx b/ui-kit/react/components/outgoing-call.mdx similarity index 98% rename from ui-kit/react/v7/components/outgoing-call.mdx rename to ui-kit/react/components/outgoing-call.mdx index 923c3ba6a..e01549eda 100644 --- a/ui-kit/react/v7/components/outgoing-call.mdx +++ b/ui-kit/react/components/outgoing-call.mdx @@ -467,13 +467,13 @@ Additional CSS class name applied to the root element. ## Next Steps - + Handle incoming call notifications with accept/decline actions - + Browse call history and re-initiate calls - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/reaction-list.mdx b/ui-kit/react/components/reaction-list.mdx similarity index 100% rename from ui-kit/react/v7/components/reaction-list.mdx rename to ui-kit/react/components/reaction-list.mdx diff --git a/ui-kit/react/v7/components/reactions.mdx b/ui-kit/react/components/reactions.mdx similarity index 100% rename from ui-kit/react/v7/components/reactions.mdx rename to ui-kit/react/components/reactions.mdx diff --git a/ui-kit/react/v7/components/search.mdx b/ui-kit/react/components/search.mdx similarity index 99% rename from ui-kit/react/v7/components/search.mdx rename to ui-kit/react/components/search.mdx index 6b1142f60..5b0282572 100644 --- a/ui-kit/react/v7/components/search.mdx +++ b/ui-kit/react/components/search.mdx @@ -920,13 +920,13 @@ Callback when an SDK error occurs during search. ## Next Steps - + Display the conversation list alongside search - + Navigate to matched messages in the message list - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/thread-header.mdx b/ui-kit/react/components/thread-header.mdx similarity index 98% rename from ui-kit/react/v7/components/thread-header.mdx rename to ui-kit/react/components/thread-header.mdx index 32e616d87..bc4ec9345 100644 --- a/ui-kit/react/v7/components/thread-header.mdx +++ b/ui-kit/react/components/thread-header.mdx @@ -529,13 +529,13 @@ Custom subtitle view below the title. ## Next Steps - + Display threaded replies below the parent message - + Compose replies in the thread - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/v7/components/users.mdx b/ui-kit/react/components/users.mdx similarity index 98% rename from ui-kit/react/v7/components/users.mdx rename to ui-kit/react/components/users.mdx index 8464abfcf..3ce1c30d4 100644 --- a/ui-kit/react/v7/components/users.mdx +++ b/ui-kit/react/components/users.mdx @@ -830,16 +830,16 @@ Callback when the user list is empty after the initial fetch completes. ## Next Steps - + View recent conversations for the logged-in user - + Browse and join groups - + Display messages for the selected user - + Customize colors, fonts, and spacing diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx deleted file mode 100644 index b664728b4..000000000 --- a/ui-kit/react/conversations.mdx +++ /dev/null @@ -1,1567 +0,0 @@ ---- -title: "Conversations" -description: "Display CometChat React UI Kit conversations with last messages, unread counts, typing indicators, presence, filters, and item callbacks." ---- - -```json -{ - "component": "CometChatConversations", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatConversations } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.", - "cssRootClass": ".cometchat-conversations", - "primaryOutput": { - "prop": "onItemClick", - "type": "(conversation: CometChat.Conversation) => void" - }, - "props": { - "data": { - "conversationsRequestBuilder": { - "type": "CometChat.ConversationsRequestBuilder", - "default": "SDK default (30 per page)", - "note": "Pass the builder, not the result of .build()" - }, - "activeConversation": { - "type": "CometChat.Conversation", - "default": "undefined" - }, - "lastMessageDateTimeFormat": { - "type": "CalendarObject", - "default": "Component default (hh:mm A today, [yesterday], DD/MM/YYYY other days)", - "note": "Falls back to global CometChatLocalize.calendarObject if not set" - } - }, - "callbacks": { - "onItemClick": "(conversation: CometChat.Conversation) => void", - "onSelect": "(conversation: CometChat.Conversation, selected: boolean) => void", - "onError": "((error: CometChat.CometChatException) => void) | null", - "onSearchBarClicked": "() => void" - }, - "visibility": { - "hideReceipts": { "type": "boolean", "default": false }, - "hideError": { "type": "boolean", "default": false }, - "hideDeleteConversation": { "type": "boolean", "default": false }, - "hideUserStatus": { "type": "boolean", "default": false }, - "hideGroupType": { "type": "boolean", "default": false }, - "showSearchBar": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "sound": { - "disableSoundForMessages": { "type": "boolean", "default": false }, - "customSoundForMessages": { "type": "string", "default": "built-in" } - }, - "selection": { - "selectionMode": { - "type": "SelectionMode", - "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"], - "default": "SelectionMode.none" - } - }, - "viewSlots": { - "itemView": "(conversation: CometChat.Conversation) => JSX.Element", - "leadingView": "(conversation: CometChat.Conversation) => JSX.Element", - "titleView": "(conversation: CometChat.Conversation) => JSX.Element", - "subtitleView": "(conversation: CometChat.Conversation) => JSX.Element", - "trailingView": "(conversation: CometChat.Conversation) => JSX.Element", - "headerView": "JSX.Element", - "searchView": "JSX.Element", - "loadingView": "JSX.Element", - "emptyView": "JSX.Element", - "errorView": "JSX.Element", - "options": "((conversation: CometChat.Conversation) => CometChatOption[]) | null" - }, - "formatting": { - "textFormatters": { - "type": "CometChatTextFormatter[]", - "default": "default formatters from data source" - } - } - }, - "events": [ - { - "name": "CometChatConversationEvents.ccConversationDeleted", - "payload": "CometChat.Conversation", - "description": "Conversation deleted from list" - }, - { - "name": "CometChatConversationEvents.ccUpdateConversation", - "payload": "CometChat.Conversation", - "description": "Conversation updated" - }, - { - "name": "CometChatConversationEvents.ccMarkConversationAsRead", - "payload": "CometChat.Conversation", - "description": "Conversation marked as read" - } - ], - "sdkListeners": [ - "onTextMessageReceived", - "onMediaMessageReceived", - "onCustomMessageReceived", - "onTypingStarted", - "onTypingEnded", - "onMessagesDelivered", - "onMessagesRead", - "onMessagesDeliveredToAll", - "onMessagesReadByAll", - "onUserOnline", - "onUserOffline", - "onGroupMemberJoined", - "onGroupMemberLeft", - "onGroupMemberKicked", - "onGroupMemberBanned", - "onMemberAddedToGroup" - ], - "compositionExample": { - "description": "Sidebar conversations wired to message view", - "components": [ - "CometChatConversations", - "CometChatMessageHeader", - "CometChatMessageList", - "CometChatMessageComposer" - ], - "flow": "onItemClick emits CometChat.Conversation -> extract User/Group via getConversationWith() -> pass to MessageHeader, MessageList, MessageComposer" - }, - "types": { - "CalendarObject": { - "today": "string | undefined", - "yesterday": "string | undefined", - "lastWeek": "string | undefined", - "otherDays": "string | undefined", - "relativeTime": { - "minute": "string | undefined", - "minutes": "string | undefined", - "hour": "string | undefined", - "hours": "string | undefined" - } - }, - "CometChatOption": { - "id": "string | undefined", - "title": "string | undefined", - "iconURL": "string | undefined", - "onClick": "(() => void) | undefined" - }, - "SelectionMode": { - "single": 0, - "multiple": 1, - "none": 2 - } - } -} -``` - - -## Where It Fits - -`CometChatConversations` is a sidebar list component. It renders recent conversations and emits the selected `CometChat.Conversation` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout. - -```tsx lines -import { useState } from "react"; -import { - CometChatConversations, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function ChatApp() { - const [selectedUser, setSelectedUser] = useState(); - const [selectedGroup, setSelectedGroup] = useState(); - - const handleItemClick = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - if (entity instanceof CometChat.User) { - setSelectedUser(entity); - setSelectedGroup(undefined); - } else if (entity instanceof CometChat.Group) { - setSelectedGroup(entity); - setSelectedUser(undefined); - } - }; - - return ( -
-
- -
- {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation -
- )} -
- ); -} -``` - -[Open in CodeSandbox](https://link.cometchat.com/react-conversation-list-message) - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function ConversationsDemo() { - return ( -
- -
- ); -} - -export default ConversationsDemo; -``` - - - - - -Root CSS class: `.cometchat-conversations` - ---- - -## Filtering Conversations - -Pass a `CometChat.ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`. - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function FilteredConversations() { - return ( - - ); -} -``` - -### Filter Recipes - -| Recipe | Code | -| --- | --- | -| Only user conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("user")` | -| Only group conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("group")` | -| Limit to 10 per page | `new CometChat.ConversationsRequestBuilder().setLimit(10)` | -| With specific tags | `new CometChat.ConversationsRequestBuilder().setTags(["vip"])` | -| Filter by user tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setUserTags(["premium"])` | -| Filter by group tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setGroupTags(["support"])` | - -Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom. - -Refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations) for the full builder API. - ---- - -## Actions and Events - -### Callback Props - -#### onItemClick - -Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view. - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ConversationsWithClick() { - const handleItemClick = (conversation: CometChat.Conversation) => { - console.log("Selected:", conversation.getConversationId()); - }; - - return ; -} -``` - -#### onSelect - -Fires when a conversation is checked/unchecked in multi-select mode. Requires `selectionMode` to be set. - -```tsx lines -import { useState } from "react"; -import { - CometChatConversations, - SelectionMode, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function BatchSelectDemo() { - const [selected, setSelected] = useState>(new Set()); - - const handleSelect = (conversation: CometChat.Conversation, isSelected: boolean) => { - setSelected((prev) => { - const next = new Set(prev); - const id = conversation.getConversationId(); - isSelected ? next.add(id) : next.delete(id); - return next; - }); - }; - - return ( - - ); -} -``` - -#### onError - -Fires on internal errors (network failure, auth issue, SDK exception). - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ConversationsWithErrorHandler() { - return ( - { - console.error("CometChatConversations error:", error); - }} - /> - ); -} -``` - -#### onSearchBarClicked - -Fires when the search bar is clicked. Requires `showSearchBar={true}`. - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function ConversationsWithSearch() { - return ( - { - console.log("Search bar clicked"); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatConversationEvents` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup. - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccConversationDeleted` | A conversation is deleted from the list | `CometChat.Conversation` | -| `ccUpdateConversation` | A conversation is updated (last message change, metadata update) | `CometChat.Conversation` | -| `ccMarkConversationAsRead` | A conversation is marked as read | `CometChat.Conversation` | - -When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when `ccMarkConversationAsRead` fires, or remove a conversation from a custom sidebar when `ccConversationDeleted` fires. - -```tsx lines -import { useEffect } from "react"; -import { CometChatConversationEvents } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function useConversationEvents() { - useEffect(() => { - const deletedSub = CometChatConversationEvents.ccConversationDeleted.subscribe( - (conversation: CometChat.Conversation) => { - console.log("Deleted:", conversation.getConversationId()); - } - ); - const updatedSub = CometChatConversationEvents.ccUpdateConversation.subscribe( - (conversation: CometChat.Conversation) => { - console.log("Updated:", conversation.getConversationId()); - } - ); - const readSub = CometChatConversationEvents.ccMarkConversationAsRead.subscribe( - (conversation: CometChat.Conversation) => { - console.log("Marked as read:", conversation.getConversationId()); - } - ); - - return () => { - deletedSub?.unsubscribe(); - updatedSub?.unsubscribe(); - readSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required. - -| SDK Listener | Internal behavior | -| --- | --- | -| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count | -| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle | -| `onMessagesDelivered` / `onMessagesRead` / `onMessagesDeliveredToAll` / `onMessagesReadByAll` | Updates receipt ticks (unless `hideReceipts={true}`) | -| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `hideUserStatus={true}`) | -| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata | - -Automatic: new messages, typing indicators, receipts, user presence, group membership changes. - -Manual: deleting a conversation via the SDK directly (not through the component's context menu) requires emitting `CometChatConversationEvents.ccConversationDeleted` for the UI to update. - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling. - - ---- - -## Custom View Slots - -Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `CometChat.Conversation` object for that row. - -| Slot | Signature | Replaces | -| --- | --- | --- | -| `itemView` | `(conversation: CometChat.Conversation) => JSX.Element` | Entire list item row | -| `leadingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Avatar / left section | -| `titleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Name / title text | -| `subtitleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Last message preview | -| `trailingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Timestamp / badge / right section | -| `headerView` | `JSX.Element` | Entire header bar | -| `searchView` | `JSX.Element` | Search bar | -| `loadingView` | `JSX.Element` | Loading spinner | -| `emptyView` | `JSX.Element` | Empty state | -| `errorView` | `JSX.Element` | Error state | -| `options` | `(conversation: CometChat.Conversation) => CometChatOption[]` | Context menu / hover actions | - -### itemView - -Replace the entire list item row. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatListItem, - CometChatConversations, - CometChatDate, -} from "@cometchat/chat-uikit-react"; - -function CustomItemViewConversations() { - const getItemView = (conversation: CometChat.Conversation) => { - const title = conversation.getConversationWith().getName(); - const timestamp = conversation?.getLastMessage()?.getSentAt(); - - return ( - } - onListItemClicked={() => { - // handle click - }} - /> - ); - }; - - return ; -} -``` - - -```css lines -.cometchat-conversations .cometchat-avatar { - border-radius: 8px; - width: 32px; - height: 32px; -} - -.cometchat-conversations .cometchat-list-item { - gap: 4px; -} -``` - - - -### leadingView - -Replace the avatar / left section. Typing-aware avatar example. - - - - - -```tsx lines -import { useEffect, useRef, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatConversations, - CometChatAvatar, - CometChatUIKitLoginListener, -} from "@cometchat/chat-uikit-react"; - -function TypingAwareConversations() { - const [isTyping, setIsTyping] = useState(false); - const typingObjRef = useRef(null); - const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser(); - - useEffect(() => { - const listenerId = "typing_demo_" + Date.now(); - CometChat.addMessageListener( - listenerId, - new CometChat.MessageListener({ - onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => { - typingObjRef.current = typingIndicator; - setIsTyping(true); - }, - onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => { - if ( - typingObjRef.current && - typingObjRef.current.getSender().getUid() === - typingIndicator.getSender().getUid() - ) { - typingObjRef.current = null; - setIsTyping(false); - } - }, - }) - ); - return () => { - CometChat.removeMessageListener(listenerId); - }; - }, []); - - const getLeadingView = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - const isUser = entity instanceof CometChat.User; - const isGroup = entity instanceof CometChat.Group; - - const isMyTyping = isUser - ? (entity as CometChat.User).getUid() === - typingObjRef.current?.getSender().getUid() && - loggedInUser?.getUid() === typingObjRef.current?.getReceiverId() - : isGroup && - (entity as CometChat.Group).getGuid() === - typingObjRef.current?.getReceiverId(); - - const avatar = isUser - ? (entity as CometChat.User).getAvatar() - : (entity as CometChat.Group).getIcon(); - - return ( -
- -
- ); - }; - - return ; -} -``` - -### trailingView - -Replace the timestamp / badge / right section. Relative time badge example. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function RelativeTimeConversations() { - const getTrailingView = (conv: CometChat.Conversation) => { - if (!conv.getLastMessage()) return <>; - - const timestamp = conv.getLastMessage()?.getSentAt() * 1000; - const now = Date.now(); - const diffInMinutes = Math.floor((now - timestamp) / (1000 * 60)); - const diffInHours = Math.floor((now - timestamp) / (1000 * 60 * 60)); - - let className = "conversations__trailing-view-min"; - let topLabel = `${diffInMinutes}`; - let bottomLabel = diffInMinutes === 1 ? "Min ago" : "Mins ago"; - - if (diffInHours >= 1 && diffInHours <= 10) { - className = "conversations__trailing-view-hour"; - topLabel = `${diffInHours}`; - bottomLabel = diffInHours === 1 ? "Hour ago" : "Hours ago"; - } else if (diffInHours > 10) { - className = "conversations__trailing-view-date"; - const time = new Date(timestamp); - topLabel = time.toLocaleDateString("en-US", { day: "numeric" }); - bottomLabel = time.toLocaleDateString("en-US", { month: "short", year: "numeric" }); - } - - return ( -
- {topLabel} - {bottomLabel} -
- ); - }; - - return ; -} -``` - - -```css lines -.conversations__trailing-view { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 55px; - height: 40px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.conversations__trailing-view-min { background-color: #e0d4f7; } -.conversations__trailing-view-hour { background-color: #fff3cd; } -.conversations__trailing-view-date { background-color: #f8d7da; } - -.conversations__trailing-view-time { - font: 600 18px Roboto; - color: #4a3f99; - margin-bottom: 4px; -} - -.conversations__trailing-view-status { - font: 600 8px Roboto; - color: #6a5b99; -} - -.cometchat-conversations .cometchat-list-item__trailing-view { - height: 50px; -} -``` - - - -### titleView - -Replace the name / title text. Inline user status example. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function StatusTitleConversations() { - const getTitleView = (conversation: CometChat.Conversation) => { - const user = - conversation.getConversationType() === "user" - ? (conversation.getConversationWith() as CometChat.User) - : undefined; - - return ( -
- - {user - ? conversation.getConversationWith().getName() + " · " - : conversation.getConversationWith().getName()} - - {user && ( - - {user.getStatusMessage()} - - )} -
- ); - }; - - return ; -} -``` - - -```css lines -.cometchat-conversations .conversations__title-view { - display: flex; - gap: 4px; - width: 100%; -} - -.conversations__title-view-name { - color: #141414; - font: 500 16px/19.2px Roboto; -} - -.conversations__title-view-status { - color: #6852d6; - font: 400 16px/19.2px Roboto; -} -``` - - - -### subtitleView - -Replace the last message preview text. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function formatTimestamp(timestamp: number): string { - return new Date(timestamp * 1000).toLocaleString(); -} - -function SubtitleConversations() { - const getSubtitleView = (conversation: CometChat.Conversation) => { - if (conversation.getConversationType() === "user") { - return ( - <> - Last active:{" "} - {formatTimestamp( - (conversation.getConversationWith() as CometChat.User).getLastActiveAt() - )} - - ); - } - return ( - <> - Created:{" "} - {formatTimestamp( - (conversation.getConversationWith() as CometChat.Group).getCreatedAt() - )} - - ); - }; - - return ; -} -``` - - -```css lines -.cometchat-conversations .cometchat-list-item__body-subtitle { - overflow: hidden; - color: var(--cometchat-text-color-secondary, #727272); - text-overflow: ellipsis; - white-space: nowrap; - font: var(--cometchat-font-body-regular); -} -``` - - - -### headerView - -Replace the entire header bar. - - - - - - - -```tsx lines -import { - CometChatButton, - CometChatConversations, - getLocalizedString, -} from "@cometchat/chat-uikit-react"; - -function CustomHeaderConversations() { - return ( - -
- {getLocalizedString("CHATS")} -
- { /* handle click */ }} /> -
- } - /> - ); -} -``` - - -```css lines -.conversations__header { - display: flex; - width: 100%; - padding: 8px 16px; - align-items: center; - justify-content: space-between; - gap: 12px; - border-radius: 10px; - border: 1px solid #e8e8e8; - background: #edeafa; -} - -.conversations__header__title { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 700 24px Roboto; -} - -.conversations__header .cometchat-button .cometchat-button__icon { - background: #141414; -} - -.conversations__header .cometchat-button { - width: 24px; - border: none; - background: transparent; - border-radius: 0; -} -``` - - - -### options - -Replace the context menu / hover actions on each conversation item. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOption, - CometChatConversations, -} from "@cometchat/chat-uikit-react"; - -function CustomOptionsConversations() { - const getOptions = (conversation: CometChat.Conversation) => [ - new CometChatOption({ - title: "Delete", - id: "delete", - onClick: () => { /* delete logic */ }, - }), - new CometChatOption({ - title: "Mute Notification", - id: "mute", - onClick: () => { /* mute logic */ }, - }), - new CometChatOption({ - title: "Mark as Unread", - id: "unread", - onClick: () => { /* mark unread logic */ }, - }), - new CometChatOption({ - title: "Block", - id: "block", - onClick: () => { /* block logic */ }, - }), - ]; - - return ; -} -``` - - -```css lines -.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { - background: red; -} - -.cometchat-conversations .cometchat-menu-list__sub-menu { - background: transparent; - box-shadow: none; -} -``` - - - -```ts lines -// CometChatOption interface -interface CometChatOption { - id?: string; // Unique identifier - title?: string; // Display text - iconURL?: string; // Icon asset URL - onClick?: () => void; // Click handler -} -``` - -### textFormatters - -Custom text formatters for the conversation subtitle. Array of `CometChatTextFormatter` instances. If not provided, default formatters from the data source are used. - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import ShortcutFormatter from "./ShortCutFormatter"; - -function FormattedConversations() { - return ( - - ); -} -``` - -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) for mention formatting. - -### lastMessageDateTimeFormat - -Customize the last message timestamp format using a `CalendarObject`. - -```ts lines -// CalendarObject interface (from source) -class CalendarObject { - today?: string; - yesterday?: string; - lastWeek?: string; - otherDays?: string; - relativeTime?: { - minute?: string; - minutes?: string; - hour?: string; - hours?: string; - }; -} -``` - -```tsx lines -import { - CometChatConversations, - CalendarObject, -} from "@cometchat/chat-uikit-react"; - -function CustomDateConversations() { - const dateFormat = new CalendarObject({ - today: "DD MMM, hh:mm A", - yesterday: "DD MMM, hh:mm A", - otherDays: "DD MMM, hh:mm A", - }); - - return ; -} -``` - - -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. - - ---- - -## Common Patterns - -### Custom empty state with CTA - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function EmptyStateConversations() { - return ( - -

No conversations yet

- -
- } - /> - ); -} -``` - -### Hide all chrome — minimal list - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function MinimalConversations() { - return ( - - ); -} -``` - -### Conversations with search - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -function SearchableConversations() { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-conversations`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-conversations` descendant selectors in a global stylesheet. - -To scope overrides to a single instance when multiple `CometChatConversations` exist on the same page, wrap the component in a container and scope selectors: - -```css lines -.sidebar-left .cometchat-conversations .cometchat-badge { - background: #e5484d; -} -``` - -Overrides survive component updates because the component never sets inline styles on these elements — all styling flows through CSS classes and custom properties. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-conversations` | -| Header title | `.cometchat-conversations .cometchat-list__header-title` | -| List item | `.cometchat-conversations .cometchat-list-item` | -| Body title | `.cometchat-conversations .cometchat-list-item__body-title` | -| Avatar | `.cometchat-conversations .cometchat-avatar` | -| Avatar text | `.cometchat-conversations .cometchat-avatar__text` | -| Unread badge | `.cometchat-conversations .cometchat-badge` | -| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` | -| Status indicator | `.cometchat-conversations .cometchat-status-indicator` | -| Read receipts | `.cometchat-conversations .cometchat-receipts-read` | -| Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` | -| Typing indicator | `.cometchat-conversations__subtitle-typing` | -| Trailing view | `.cometchat-conversations__trailing-view` | - -### Example: Brand-themed conversations - - - - - -```css lines -.cometchat-conversations .cometchat-list-item__body-title, -.cometchat-conversations .cometchat-list__header-title, -.cometchat-conversations .cometchat-avatar__text, -.cometchat-conversations .cometchat-badge, -.cometchat-conversations .cometchat-conversations__subtitle-text { - font-family: "SF Pro"; -} - -.cometchat-conversations .cometchat-list__header-title { - background: #fef8f8; - border-bottom: 2px solid #f4b6b8; -} - -.cometchat-conversations .cometchat-avatar { - background: #f0999b; -} - -.cometchat-conversations .cometchat-status-indicator { - min-width: 10px; - height: 10px; -} - -.cometchat-conversations .cometchat-badge { - background: #e5484d; -} - -.cometchat-conversations .cometchat-receipts-read { - background: #e96b6f; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(c) => setActive(c)}` | -| Filter which conversations appear | Component props | `conversationsRequestBuilder` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}` | -| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideReceipts={true}` | -| Replace a section of the list item | Component props | `View` render props | `itemView={(conversation) =>
...
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-conversations` class | `.cometchat-conversations .cometchat-badge { background: #e5484d; }` | - ---- - -## Props - -All props are optional. Sorted alphabetically. - -### activeConversation - -Highlights the specified conversation in the list. - -| | | -| --- | --- | -| Type | `CometChat.Conversation` | -| Default | `undefined` | - -Must be a reference-equal object from the SDK; a manually constructed object will not match. - ---- - -### conversationsRequestBuilder - -Controls which conversations load and in what order. - -| | | -| --- | --- | -| Type | `CometChat.ConversationsRequestBuilder` | -| Default | SDK default (30 per page) | - -Pass the builder instance, not the result of `.build()`. - ---- - -### customSoundForMessages - -URL to a custom audio file for incoming message notifications. - -| | | -| --- | --- | -| Type | `string` | -| Default | Built-in sound | - -Must be a valid audio URL accessible from the browser. - ---- - -### disableSoundForMessages - -Disables the notification sound for incoming messages. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### emptyView - -Custom component displayed when there are no conversations. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in empty state | - ---- - -### errorView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in error state | - -Hidden when `hideError={true}`. - ---- - -### headerView - -Custom component rendered as the entire header bar. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in header with title | - ---- - -### hideDeleteConversation - -Hides the delete option in the context menu. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideError - -Hides the default and custom error views. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - -Also suppresses `errorView` if set. - ---- - -### hideGroupType - -Hides the group type icon (public/private/password). - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideReceipts - -Hides message read/delivery receipt indicators. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideUserStatus - -Hides the online/offline status indicator. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### itemView - -Custom renderer for the entire list item row. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => JSX.Element` | -| Default | Built-in list item | - ---- - -### lastMessageDateTimeFormat - -Format for displaying the timestamp of the last message. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default (`hh:mm A` today, `[yesterday]`, `DD/MM/YYYY` other days) | - -```ts lines -class CalendarObject { - today?: string; - yesterday?: string; - lastWeek?: string; - otherDays?: string; - relativeTime?: { - minute?: string; - minutes?: string; - hour?: string; - hours?: string; - }; -} -``` - -Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set. - ---- - -### leadingView - -Custom renderer for the avatar / left section. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => JSX.Element` | -| Default | Built-in avatar | - ---- - -### loadingView - -Custom component displayed during the loading state. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in shimmer | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when a conversation row is clicked. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => void` | -| Default | `undefined` | - ---- - -### onSearchBarClicked - -Callback fired when the search bar is clicked. Requires `showSearchBar={true}`. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `undefined` | - ---- - -### onSelect - -Callback fired when a conversation is selected/deselected. Requires `selectionMode` to be set. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation, selected: boolean) => void` | -| Default | `undefined` | - ---- - -### options - -Custom context menu / hover actions for each conversation item. - -| | | -| --- | --- | -| Type | `((conversation: CometChat.Conversation) => CometChatOption[]) \| null` | -| Default | Built-in delete option | - -```ts lines -class CometChatOption { - id?: string; - title?: string; - iconURL?: string; - onClick?: () => void; -} -``` - ---- - -### searchView - -Custom search bar component in the header. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in search bar | - ---- - -### selectionMode - -Enables single or multi-select checkboxes on list items. - -| | | -| --- | --- | -| Type | `SelectionMode` | -| Default | `SelectionMode.none` | - -```ts lines -enum SelectionMode { - single, // 0 - multiple, // 1 - none, // 2 -} -``` - -Must pair with `onSelect` to capture selections. - ---- - -### showScrollbar - -Shows the scrollbar in the conversation list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showSearchBar - -Shows a search bar at the top of the list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### subtitleView - -Custom renderer for the last message preview text. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => JSX.Element` | -| Default | Built-in subtitle | - ---- - -### textFormatters - -Custom text formatters for the conversation subtitle. - -| | | -| --- | --- | -| Type | `CometChatTextFormatter[]` | -| Default | Default formatters from data source | - -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) for mention formatting. - ---- - -### titleView - -Custom renderer for the name / title text. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => JSX.Element` | -| Default | Built-in title | - ---- - -### trailingView - -Custom renderer for the timestamp / badge / right section. - -| | | -| --- | --- | -| Type | `(conversation: CometChat.Conversation) => JSX.Element` | -| Default | Built-in trailing view | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatConversationEvents.ccConversationDeleted` | `CometChat.Conversation` | Conversation deleted from list | -| `CometChatConversationEvents.ccUpdateConversation` | `CometChat.Conversation` | Conversation updated | -| `CometChatConversationEvents.ccMarkConversationAsRead` | `CometChat.Conversation` | Conversation marked as read | - -All events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-conversations` | -| Header title | `.cometchat-conversations .cometchat-list__header-title` | -| List item | `.cometchat-conversations .cometchat-list-item` | -| Body title | `.cometchat-conversations .cometchat-list-item__body-title` | -| Avatar | `.cometchat-conversations .cometchat-avatar` | -| Avatar text | `.cometchat-conversations .cometchat-avatar__text` | -| Unread badge | `.cometchat-conversations .cometchat-badge` | -| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` | -| Subtitle sender | `.cometchat-conversations__subtitle-text-sender` | -| Status indicator (online) | `.cometchat-conversations__list-item-online .cometchat-list-item__status` | -| Group type (password) | `.cometchat-conversations__list-item-password .cometchat-list-item__status` | -| Group type (private) | `.cometchat-conversations__list-item-private .cometchat-list-item__status` | -| Read receipts | `.cometchat-conversations__subtitle-receipts-read` | -| Delivered receipts | `.cometchat-conversations__subtitle-receipts-delivered` | -| Sent receipts | `.cometchat-conversations__subtitle-receipts-sent` | -| Error receipts | `.cometchat-conversations__subtitle-receipts-error` | -| Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` | -| Typing indicator | `.cometchat-conversations__subtitle-typing` | -| Trailing view | `.cometchat-conversations__trailing-view` | -| Badge count | `.cometchat-conversations__trailing-view-badge-count` | -| Empty state | `.cometchat-conversations__empty-state-view` | -| Error state | `.cometchat-conversations__error-state-view` | -| Shimmer loading | `.cometchat-conversations__shimmer` | -| Context menu | `.cometchat-conversations__trailing-view-options` | -| Mentions highlight | `.cometchat-conversations__subtitle-text .cometchat-mentions` | -| @you mentions | `.cometchat-conversations__subtitle-text .cometchat-mentions-you` | diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index d6f66ecba..b468b3c66 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -8,11 +8,11 @@ description: "Overview of CometChat React UI Kit core features, including messag | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component | +| Required setup | Wrap app in `CometChatProvider` with valid credentials — must complete before rendering any component | | Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat | -| Key components | `CometChatConversations` → [Conversations](/ui-kit/react/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/message-header), `CometChatUsers` → [Users](/ui-kit/react/users), `CometChatGroups` → [Groups](/ui-kit/react/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/group-members) | +| Key components | `CometChatConversations` → [Conversations](/ui-kit/react/components/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header), `CometChatUsers` → [Users](/ui-kit/react/components/users), `CometChatGroups` → [Groups](/ui-kit/react/components/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/components/group-members) | | CSS class prefix | `.cometchat-` | -| Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) | +| Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theming) | @@ -28,8 +28,8 @@ At the heart of CometChat's functionality is the ability to support real-time te | Components | Functionality | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) is a Component that enables users to write and send a variety of messages. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | +| [Message Composer](/ui-kit/react/components/message-composer) | The [Message Composer](/ui-kit/react/components/message-composer) is a Component that enables users to write and send a variety of messages. | +| [Message List](/ui-kit/react/components/message-list) | The [Message List](/ui-kit/react/components/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | ## Media Sharing @@ -41,8 +41,8 @@ CometChat supports sharing images, videos, audio files, and documents within con | Components | Functionality | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/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. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | +| [Message Composer](/ui-kit/react/components/message-composer) | The [Message Composer](/ui-kit/react/components/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. | +| [Message List](/ui-kit/react/components/message-list) | The [Message List](/ui-kit/react/components/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | ## Read Receipts @@ -54,8 +54,8 @@ CometChat's Read Receipts feature provides visibility into the message status, l | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | | Message Information | 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. | ## Mark as Unread @@ -68,8 +68,8 @@ CometChat's Read Receipts feature provides visibility into the message status, l | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | ## Typing Indicator @@ -81,8 +81,8 @@ The Typing Indicator feature in CometChat shows when a user is typing a response | Components | Functionality | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. 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/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/conversations) is a component that renders conversation list item. 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/react/components/message-header) | [Message Header](/ui-kit/react/components/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | ## User Presence @@ -94,10 +94,10 @@ CometChat's User Presence feature allows users to see whether their contacts are | Components | Functionality | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. | -| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders the list of available users with presence information. | -| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | +| [Message Header](/ui-kit/react/components/message-header) | [Message Header](/ui-kit/react/components/message-header) that renders details of user/group. The Message Header also handles user presence information. | +| [Users](/ui-kit/react/components/users) | [Users](/ui-kit/react/components/users) renders the list of available users with presence information. | +| [Group Members](/ui-kit/react/components/group-members) | [Group Members](/ui-kit/react/components/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | ## Reactions @@ -109,7 +109,7 @@ CometChat's Reactions feature adds a layer of expressiveness to your chat applic | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | ## Mentions @@ -121,9 +121,9 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | Components | Functionality | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/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. | -| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/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. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/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. | +| [Message Composer](/ui-kit/react/components/message-composer) | [Message Composer](/ui-kit/react/components/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. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/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. | ## Rich Text Formatting @@ -135,8 +135,8 @@ Rich Text Formatting allows users to style their messages with bold, italic, und | Components | Functionality | | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [CompactMessageComposer](/ui-kit/react/compact-message-composer) | [CompactMessageComposer](/ui-kit/react/compact-message-composer) provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. | -| [MessageList](/ui-kit/react/message-list) | [MessageList](/ui-kit/react/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. | +| [Message Composer](/ui-kit/react/components/message-composer) | [Message Composer](/ui-kit/react/components/message-composer) with `enableRichTextEditor` provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. | ## Threaded Conversations @@ -160,8 +160,8 @@ Quoted Replies is a robust feature provided by CometChat that enables users to q | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | -| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) shows the quoted reply above the input field, providing context for the response. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | +| [Message Composer](/ui-kit/react/components/message-composer) | [Message Composer](/ui-kit/react/components/message-composer) shows the quoted reply above the input field, providing context for the response. | ## Group Chat @@ -171,7 +171,7 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul -See the [Groups](/ui-kit/react/groups) component page for details. +See the [Groups](/ui-kit/react/components/groups) component page for details. ## Moderation @@ -187,7 +187,7 @@ Learn more about setting up moderation rules and managing content in the [Modera | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. | The **[Report Message](#report-message)** feature enables users to flag messages for review by moderators. @@ -205,7 +205,7 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | ## Conversation and Advanced Search @@ -217,12 +217,12 @@ Conversation and Advanced Search is a powerful feature provided by CometChat tha | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. | +| [Search](/ui-kit/react/components/search) | [Search](/ui-kit/react/components/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [Message Header](/ui-kit/react/components/message-header) | [Message Header](/ui-kit/react/components/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [Message List](/ui-kit/react/components/message-list) | [Message List](/ui-kit/react/components/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [Conversations](/ui-kit/react/components/conversations) | [Conversations](/ui-kit/react/components/conversations) displays the search input. | -See the [Groups](/ui-kit/react/groups) component page for details. +See the [Groups](/ui-kit/react/components/groups) component page for details. --- @@ -232,7 +232,7 @@ See the [Groups](/ui-kit/react/groups) component page for details. Browse all available UI Kit components - + Customize the look and feel of your chat UI diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx deleted file mode 100644 index 5411a5ec3..000000000 --- a/ui-kit/react/custom-text-formatter-guide.mdx +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: "Custom Text Formatter" -description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks | -| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [ShortCut Formatter](/ui-kit/react/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | - - - -`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern. - -| Capability | Description | -| --- | --- | -| Text formatting | Auto-format text based on regex patterns and styles | -| Custom styles | Set colors, fonts, and backgrounds for matched text | -| Dynamic replacement | Regex-based find-and-replace in user input | -| Input integration | Real-time monitoring of the composer input field | -| Key event callbacks | Hooks for `keyUp` and `keyDown` events | - - -Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it. - - ---- - -## Steps - -### 1. Import the base class - -```javascript lines -import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; -``` - -### 2. Extend it - -```javascript lines -class HashTagTextFormatter extends CometChatTextFormatter { - ... -} -``` - -### 3. Configure tracking character and regex - -Set the character that triggers formatting, the regex to match, and the regex to strip formatting back to plain text. - -```javascript lines -this.setTrackingCharacter("#"); -this.setRegexPatterns([/\B#(\w+)\b/g]); -this.setRegexToReplaceFormatting([ - /#(\w+)<\/span>/g, -]); -``` - -### 4. Set key event callbacks - -```javascript lines -this.setKeyUpCallBack(this.onKeyUp.bind(this)); -this.setKeyDownCallBack(this.onKeyDown.bind(this)); -``` - -### 5. Implement formatting methods - -```typescript lines -getFormattedText(inputText:string) { ... } -getOriginalText(inputText:string) { ... } -customLogicToFormatText(inputText: string) { ... } -``` - ---- - -## Example - -A hashtag formatter used with [CometChatMessageList](/ui-kit/react/message-list) and [CometChatMessageComposer](/ui-kit/react/message-composer). - - - - - - - -```ts lines -import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; - -class HashTagTextFormatter extends CometChatTextFormatter { - constructor() { - super(); - this.setTrackingCharacter("#"); - this.setRegexPatterns([/\B#(\w+)\b/g]); - this.setRegexToReplaceFormatting([/#(\w+)/g]); - this.setKeyUpCallBack(this.onKeyUp.bind(this)); - this.setKeyDownCallBack(this.onKeyDown.bind(this)); - this.setReRender(() => { - console.log("Re-rendering message composer to update text content."); - }); - this.initializeComposerTracking(); - } - - initializeComposerTracking() { - const composerInput = document.getElementById("yourComposerInputId"); - this.setInputElementReference(composerInput); - } - - getCaretPosition(): number { - if (!this.inputElementReference) return 0; - const selection = window.getSelection(); - if (!selection || selection.rangeCount === 0) return 0; - const range = selection.getRangeAt(0); - const clonedRange = range.cloneRange(); - clonedRange.selectNodeContents(this.inputElementReference); - clonedRange.setEnd(range.endContainer, range.endOffset); - return clonedRange.toString().length; - } - - setCaretPosition(position: number) { - if (!this.inputElementReference) return; - const range = document.createRange(); - const selection = window.getSelection(); - if (!selection) return; - range.setStart( - this.inputElementReference.childNodes[0] || this.inputElementReference, - position - ); - range.collapse(true); - selection.removeAllRanges(); - selection.addRange(range); - } - - onKeyUp(event: KeyboardEvent) { - if (event.key === this.trackCharacter) { - this.startTracking = true; - } - if (this.startTracking && (event.key === " " || event.key === "Enter")) { - const caretPosition = this.getCaretPosition(); - this.formatText(); - this.setCaretPosition(caretPosition); - } - if ( - this.startTracking && - event.key !== " " && - event.key !== "Enter" && - this.getCaretPosition() === this.inputElementReference?.innerText?.length - ) { - this.startTracking = false; - } - } - - formatText() { - const inputValue = - this.inputElementReference?.innerText || - this.inputElementReference?.textContent || - ""; - const formattedText = this.getFormattedText(inputValue); - if (this.inputElementReference) { - this.inputElementReference.innerHTML = formattedText || ""; - this.reRender(); - } - } - - onKeyDown(event: KeyboardEvent) {} - - getFormattedText(inputText: string) { - if (!inputText) return; - return this.customLogicToFormatText(inputText); - } - - customLogicToFormatText(inputText: string) { - return inputText.replace( - /\B#(\w+)\b/g, - '#$1' - ); - } - - getOriginalText(inputText: string) { - if (!inputText) return ""; - for (let i = 0; i < this.regexToReplaceFormatting.length; i++) { - let regexPattern = this.regexToReplaceFormatting[i]; - if (inputText) { - inputText = inputText.replace(regexPattern, "#$1"); - } - } - return inputText; - } -} - -export default HashTagTextFormatter; -``` - - - - - -Pass the formatter via the `textFormatters` prop. - -```tsx lines -import { HashTagTextFormatter } from "./HashTagTextFormatter"; - -export default function MessageListDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => { - setChatUser(user); - }) - }, []) - - return ( - - ); -} -``` - - - - ---- - -## Methods Reference - -| Field | Setter | Description | -| --- | --- | --- | -| `trackCharacter` | `setTrackingCharacter(char)` | Character that starts tracking (e.g. `#` for hashtags) | -| `currentCaretPosition` | `setCaretPositionAndRange(selection, range)` | Current selection set by the composer | -| `currentRange` | `setCaretPositionAndRange(selection, range)` | Text range or cursor position set by the composer | -| `inputElementReference` | `setInputElementReference(element)` | DOM reference to the composer input field | -| `regexPatterns` | `setRegexPatterns(patterns)` | Regex patterns to match text for formatting | -| `regexToReplaceFormatting` | `setRegexToReplaceFormatting(patterns)` | Regex patterns to strip formatting back to plain text | -| `keyUpCallBack` | `setKeyUpCallBack(fn)` | Callback for key up events | -| `keyDownCallBack` | `setKeyDownCallBack(fn)` | Callback for key down events | -| `reRender` | `setReRender(fn)` | Triggers a re-render of the composer to update displayed text | -| `loggedInUser` | `setLoggedInUser(user)` | Logged-in user object, set by composer and text bubbles | -| `id` | `setId(id)` | Unique identifier for the formatter instance | - - -Don't modify `textContent` or `innerHTML` of the input element directly. Call `reRender` instead — the composer will invoke `getFormattedText` for all formatters in order. - - ---- - -## Override Methods - - - - -Returns formatted HTML from input text, or edits at cursor position if `inputText` is null. - -```js lines -getFormattedText(inputText: string | null, params: any): string | void { - if (!inputText) { - return; // edit at cursor position - } - return this.customLogicToFromatText(inputText); -} -``` - - - - - -Handles `keyup` events. Start tracking when the track character is typed. - -```js lines -onKeyUp(event: KeyboardEvent) { - if (event.key == this.trackCharacter) { - this.startTracking = true; - } - if (this.startTracking && event.key == " ") { - this.debouncedFormatTextOnKeyUp(); - } -} -``` - - - - - -Handles `keydown` events. - -```js lines -onKeyDown(event: KeyboardEvent) {} -``` - - - - - -Called by the composer and text bubbles for each HTML element in the formatted string. Check for your formatter's CSS class before attaching listeners. - -```js lines -registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) { - let classList: string[] = Array.from(domTokenList); - for (let i = 0; i < classList.length; i++) { - if (classList[i] in this.mentionsCssClassMapping) { - element.addEventListener("click", (event: Event) => { - clearTimeout(this.timeoutID); - CometChatUIEvents.ccMouseEvent.next({ - body: { - CometChatUserGroupMembersObject: - this.mentionsCssClassMapping[classList[i]], - message: this.messageObject ?? null, - id: this.getId(), - }, - event, - source: MouseEventSource.mentions, - }); - }); - - element.addEventListener("mouseover", (event: Event) => { - this.timeoutID = setTimeout(() => { - this.mouseOverEventDispatched = true; - CometChatUIEvents.ccMouseEvent.next({ - body: { - CometChatUserGroupMembersObject: - this.mentionsCssClassMapping[classList[i]], - message: this.messageObject ?? null, - id: this.getId(), - }, - event, - source: MouseEventSource.mentions, - }); - }, CometChatUtilityConstants.MentionsFormatter.MENTIONS_HOVER_TIMEOUT); - }); - - element.addEventListener("mouseout", (event: Event) => { - clearTimeout(this.timeoutID); - if (this.mouseOverEventDispatched) { - CometChatUIEvents.ccMouseEvent.next({ - body: { - CometChatUserGroupMembersObject: - this.mentionsCssClassMapping[classList[i]], - message: this.messageObject ?? null, - id: this.getId(), - }, - event, - source: MouseEventSource.mentions, - }); - this.mouseOverEventDispatched = false; - } - }); - } - } - return element; -} -``` - - - - - -Strips formatting and returns plain text. - -```js lines -getOriginalText(inputText: string | null | undefined): string { - if (!inputText) return ""; - for (let i = 0; i < this.regexToReplaceFormatting.length; i++) { - let regexPattern = this.regexToReplaceFormatting[i]; - if (inputText) { - inputText = inputText.replace(regexPattern, "$1"); - } - } - return inputText; -} -``` - - - - ---- - -## Next Steps - - - - Add @mentions with styled tokens. - - - Customize the message input component. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - diff --git a/ui-kit/react/v7/event-system.mdx b/ui-kit/react/event-system.mdx similarity index 100% rename from ui-kit/react/v7/event-system.mdx rename to ui-kit/react/event-system.mdx diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx deleted file mode 100644 index b00bb4989..000000000 --- a/ui-kit/react/events.mdx +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: "Events" -description: "Reference for CometChat React UI Kit events including conversation, user, group, message, and call events." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` | -| User events | `ccUserBlocked`, `ccUserUnblocked` | -| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` | -| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, plus SDK listener events | -| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` | -| UI events | `ccActiveChatChanged` | -| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references | - - - -Events provide decoupled communication between UI Kit components. Components emit events in response to user interactions or state changes, allowing other parts of the application to react without direct component references. - -### CometChatConversationEvents - -`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object. - -| Name | Description | -| ------------------------- | ------------------------------------------------------------------------------------------------ | -| **ccConversationDeleted** | This event is triggered when the user successfully deletes a conversation. | -| **ccUpdateConversation** | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. | - -### CometChatUserEvents - -`CometChatUserEvents` emits events when the logged-in user acts on another user object. - -| Name | Description | -| --------------- | ------------------------------------------------------------------------- | -| **ccUserBlocked** | This event is triggered when the user successfully blocks another user. | -| **ccUserUnblocked** | This event is triggered when the user successfully unblocks another user. | - -### CometChatGroupEvents - -`CometChatGroupEvents` emits events when the logged-in user acts on a group object. - -| Name | Description | -| ------------------------- | ------------------------------------------------------------------------------------ | -| **ccGroupCreated** | This event is triggered when the user creates a group successfully | -| **ccGroupDeleted** | This event is triggered when the group member deletes the group successfully | -| **ccGroupLeft** | This event is triggered when the group member leaves the group successfully | -| **ccGroupMemberScopeChanged** | This event is triggered when the group member's scope is updated successfully | -| **ccGroupMemberKicked** | This event is triggered when the group member is kicked | -| **ccGroupMemberBanned** | This event is triggered when the group member is banned | -| **ccGroupMemberUnbanned** | This event is triggered when the group member is un-banned | -| **ccGroupMemberJoined** | This event is triggered when a user joins the group | -| **ccGroupMemberAdded** | This event is triggered when a user is added to the group | -| **ccOwnershipChanged** | This event is triggered when the group ownership is assigned to another group member | - -### CometChatMessageEvents - -`CometChatMessageEvents` emits events when the logged-in user acts on a message object. - -| Name | Description | -| -------------------------- | --------------------------------------------------------------------------------------------------------- | -| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. | -| **ccMessageEdited** | This event is triggered when the user successfully edits the message. | -| **ccReplyToMessage** | This event is triggered when the user successfully replies to a message. | -| **ccMessageDeleted** | This event is triggered when the user successfully deletes the message. | -| **ccMessageRead** | This event is triggered when the sent message is read by the receiver. | -| **ccLiveReaction** | This event is triggered when the user sends a live reaction. | -| **onTextMessageReceived** | This event is emitted when the CometChat SDK listener emits a text message. | -| **onMediaMessageReceived** | This event is emitted when the CometChat SDK listener emits a media message. | -| **onCustomMessageReceived** | This event is emitted when the CometChat SDK listener emits a custom message. | -| **onTypingStarted** | This event is emitted when the CometChat SDK listener indicates that a user has started typing. | -| **onTypingEnded** | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. | -| **onMessagesDelivered** | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. | -| **onMessagesRead** | This event is emitted when the CometChat SDK listener indicates that messages have been read. | -| **onMessageEdited** | This event is emitted when the CometChat SDK listener indicates that a message has been edited. | -| **onMessageDeleted** | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. | -| **onTransientMessageReceived** | This event is emitted when the CometChat SDK listener emits a transient message. | - -### CometChatCallEvents - -`CometChatCallEvents` emits events when the logged-in user acts on a call object. - -| Name | Description | -| -------------- | ---------------------------------------------------------------------------- | -| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. | -| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. | -| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. | -| **ccCallEnded** | This event is triggered when the initiated call successfully ends. | - -### UI events - -UI events are triggered when a user interacts with UI Kit elements such as buttons, menus, or input fields. - -| Name | Description | -| ------------------- | ---------------------------------------------------------------------------- | -| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. | diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index ebdf35e8e..e61f0b0f8 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -8,19 +8,19 @@ description: "Overview of CometChat extensions for React UI Kit, including engag | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) | +| Required setup | Wrap app in `CometChatProvider` with valid credentials + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) | | Extension categories | User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features | -| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails) | +| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Translation, Link Preview, Thumbnails) | | Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required | ## Overview -CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](/fundamentals/extensions-overview) and auto-integrate into UI Kit components on init and login. +CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](https://app.cometchat.com/) and auto-integrate into UI Kit components. -Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. Extensions must be activated from the [CometChat Dashboard](/fundamentals/extensions-overview). +Ensure your app is wrapped in `CometChatProvider` with valid credentials. Extensions must be activated from the [CometChat Dashboard](/fundamentals/extensions-overview). ## Built-in Extensions @@ -37,7 +37,7 @@ Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamen Displays a summary (title, description, thumbnail) for URLs shared in chat. See [Link Preview Extension](/fundamentals/link-preview). -Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/components/message-list) when activated. @@ -63,7 +63,7 @@ Bookmarks messages for later reference. Saved messages are private to the user. Creates smaller preview images for shared images, reducing bandwidth. See [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). -Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/components/message-list) when activated. @@ -87,7 +87,7 @@ Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy). Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation). -Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the message options menu of [MessageList](/ui-kit/react/components/message-list) when activated. @@ -97,7 +97,7 @@ Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-lis Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated. @@ -111,7 +111,7 @@ Sets reminders for messages or creates personal reminders. A bot sends a notific Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers). -Auto-integrates into [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into [Message Composer](/ui-kit/react/components/message-composer) when activated. @@ -131,7 +131,7 @@ Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor). Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated. @@ -141,7 +141,7 @@ Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/messag Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/components/message-composer) when activated. @@ -182,10 +182,10 @@ AI-generated recap of long conversations. See [Conversation Summary](/fundamenta ## Next Steps - + Customize the composer where most extensions appear - + Customize the message list for extension-rendered content diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx deleted file mode 100644 index d9ef73a8e..000000000 --- a/ui-kit/react/group-members.mdx +++ /dev/null @@ -1,1189 +0,0 @@ ---- -title: "Group Members" -description: "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions." ---- - -```json -{ - "component": "CometChatGroupMembers", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.", - "cssRootClass": ".cometchat-group-members", - "primaryOutput": { - "prop": "onItemClick", - "type": "(groupMember: CometChat.GroupMember) => void" - }, - "props": { - "data": { - "group": { - "type": "CometChat.Group", - "required": true, - "note": "The group whose members are displayed" - }, - "groupMemberRequestBuilder": { - "type": "CometChat.GroupMembersRequestBuilder", - "default": "SDK default (30 per page)", - "note": "Pass the builder, not the result of .build()" - }, - "searchRequestBuilder": { - "type": "CometChat.GroupMembersRequestBuilder", - "default": "undefined" - }, - "searchKeyword": { - "type": "string", - "default": "\"\"" - } - }, - "callbacks": { - "onItemClick": "(groupMember: CometChat.GroupMember) => void", - "onSelect": "(groupMember: CometChat.GroupMember, selected: boolean) => void", - "onEmpty": "() => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "visibility": { - "hideSearch": { "type": "boolean", "default": false }, - "hideError": { "type": "boolean", "default": false }, - "hideKickMemberOption": { "type": "boolean", "default": false }, - "hideBanMemberOption": { "type": "boolean", "default": false }, - "hideScopeChangeOption": { "type": "boolean", "default": false }, - "hideUserStatus": { "type": "boolean", "default": false }, - "disableLoadingState": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "selection": { - "selectionMode": { - "type": "SelectionMode", - "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"], - "default": "SelectionMode.none" - } - }, - "viewSlots": { - "itemView": "(groupMember: CometChat.GroupMember) => JSX.Element", - "leadingView": "(groupMember: CometChat.GroupMember) => JSX.Element", - "titleView": "(groupMember: CometChat.GroupMember) => JSX.Element", - "subtitleView": "(groupMember: CometChat.GroupMember) => JSX.Element", - "trailingView": "(groupMember: CometChat.GroupMember) => JSX.Element", - "headerView": "JSX.Element", - "loadingView": "JSX.Element", - "emptyView": "JSX.Element", - "errorView": "JSX.Element", - "options": "(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]" - } - }, - "events": [ - { - "name": "CometChatGroupEvents.ccGroupMemberKicked", - "payload": "IGroupMemberKickedBanned", - "description": "Member kicked" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberBanned", - "payload": "IGroupMemberKickedBanned", - "description": "Member banned" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", - "payload": "IGroupMemberScopeChanged", - "description": "Member scope changed" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberAdded", - "payload": "IGroupMemberAdded", - "description": "Members added" - } - ], - "sdkListeners": [ - "onGroupMemberScopeChanged", - "onGroupMemberKicked", - "onGroupMemberBanned", - "onMemberAddedToGroup", - "onGroupMemberLeft", - "onGroupMemberJoined", - "onUserOnline", - "onUserOffline" - ], - "types": { - "CometChatOption": { - "id": "string | undefined", - "title": "string | undefined", - "iconURL": "string | undefined", - "onClick": "(() => void) | undefined" - }, - "SelectionMode": { - "single": 0, - "multiple": 1, - "none": 2 - } - } -} -``` - - -## Where It Fits - -`CometChatGroupMembers` is a panel component that renders the member list for a specific group. It requires a `group` prop and provides built-in member management actions (kick, ban, scope change) based on the logged-in user's role. Typically rendered alongside the message view in a group chat layout. - -```tsx lines -import { useEffect, useState } from "react"; -import { - CometChatGroupMembers, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function GroupChatWithMembers() { - const [group, setGroup] = useState(); - - useEffect(() => { - CometChat.getGroup("GROUP_GUID").then(setGroup); - }, []); - - if (!group) return null; - - return ( -
-
- -
-
- - - -
-
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { useEffect, useState } from "react"; -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function GroupMembersDemo() { - const [group, setGroup] = useState(); - - useEffect(() => { - CometChat.getGroup("GROUP_GUID").then(setGroup); - }, []); - - return group ? ( -
- -
- ) : null; -} - -export default GroupMembersDemo; -``` - -Root CSS class: `.cometchat-group-members` - ---- - -## Filtering Group Members - -Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder`. Pass the builder instance — not the result of `.build()`. - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function FilteredGroupMembers({ group }: { group: CometChat.Group }) { - return ( - - ); -} -``` - -### Filter Recipes - -| Recipe | Code | -| --- | --- | -| Limit to 10 per page | `new CometChat.GroupMembersRequestBuilder("GUID").setLimit(10)` | -| Search by keyword | `new CometChat.GroupMembersRequestBuilder("GUID").setSearchKeyword("john")` | -| Admins and moderators only | `new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin", "moderator"])` | - -Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom. - -The `searchRequestBuilder` prop accepts a separate `GroupMembersRequestBuilder` for filtering when the search bar is active. - -Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full builder API. - ---- - -## Actions and Events - -### Callback Props - -#### onItemClick - -Fires when a member row is tapped. - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupMembersWithClick({ group }: { group: CometChat.Group }) { - return ( - { - console.log("Selected member:", member.getName()); - }} - /> - ); -} -``` - -#### onSelect - -Fires when a member is checked/unchecked in multi-select mode. Requires `selectionMode` to be set. - -```tsx lines -import { useState } from "react"; -import { - CometChatGroupMembers, - SelectionMode, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function BatchSelectMembers({ group }: { group: CometChat.Group }) { - const [selected, setSelected] = useState>(new Set()); - - return ( - { - setSelected((prev) => { - const next = new Set(prev); - const uid = member.getUid(); - isSelected ? next.add(uid) : next.delete(uid); - return next; - }); - }} - /> - ); -} -``` - -#### onEmpty - -Fires when the member list has no data to display. - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupMembersWithEmpty({ group }: { group: CometChat.Group }) { - return ( - console.log("No members found")} - /> - ); -} -``` - -#### onError - -Fires on internal errors (network failure, auth issue, SDK exception). - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupMembersWithError({ group }: { group: CometChat.Group }) { - return ( - { - console.error("CometChatGroupMembers error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatGroupEvents` emits events subscribable from anywhere in the application. The component both emits and subscribes to these events. - -Events emitted by this component: - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccGroupMemberKicked` | A member is kicked | `IGroupMemberKickedBanned` | -| `ccGroupMemberBanned` | A member is banned | `IGroupMemberKickedBanned` | -| `ccGroupMemberScopeChanged` | A member's scope changes | `IGroupMemberScopeChanged` | - -Events subscribed internally: - -| Event | Internal behavior | -| --- | --- | -| `ccGroupMemberKicked` | Removes the kicked member from the list | -| `ccGroupMemberBanned` | Removes the banned member from the list | -| `ccGroupMemberScopeChanged` | Updates the member's scope in the list | -| `ccGroupMemberAdded` | Appends newly added members to the list | - -```tsx lines -import { useEffect } from "react"; -import { CometChatGroupEvents } from "@cometchat/chat-uikit-react"; - -function useGroupMemberEvents() { - useEffect(() => { - const kickedSub = CometChatGroupEvents.ccGroupMemberKicked.subscribe( - (item) => { - console.log("Member kicked:", item.kickedUser.getName()); - } - ); - const scopeSub = CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe( - (item) => { - console.log("Scope changed:", item.updatedUser.getName(), "to", item.scopeChangedTo); - } - ); - - return () => { - kickedSub?.unsubscribe(); - scopeSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required. - -| SDK Listener | Internal behavior | -| --- | --- | -| `onGroupMemberScopeChanged` | Updates the member's scope in the list | -| `onGroupMemberKicked` | Removes the kicked member from the list | -| `onGroupMemberBanned` | Removes the banned member from the list | -| `onMemberAddedToGroup` | Appends the new member to the list | -| `onGroupMemberLeft` | Removes the member who left from the list | -| `onGroupMemberJoined` | Appends the joined member to the list | -| `onUserOnline` / `onUserOffline` | Updates the member's online/offline status (disabled when `hideUserStatus={true}`) | - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling. - - ---- - -## Custom View Slots - -Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `CometChat.GroupMember` object for that row. - -| Slot | Signature | Replaces | -| --- | --- | --- | -| `itemView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Entire list item row | -| `leadingView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Avatar / left section | -| `titleView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Name / title text | -| `subtitleView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Subtitle text | -| `trailingView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Right section (scope badge / actions) | -| `headerView` | `JSX.Element` | Entire header bar | -| `loadingView` | `JSX.Element` | Loading spinner | -| `emptyView` | `JSX.Element` | Empty state | -| `errorView` | `JSX.Element` | Error state | -| `options` | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` | Context menu / hover actions | - -### itemView - -Replace the entire list item row. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatAvatar, - CometChatGroupMembers, -} from "@cometchat/chat-uikit-react"; - -function CustomItemViewMembers({ group }: { group: CometChat.Group }) { - const getItemView = (member: CometChat.GroupMember) => { - const scope = member.getScope(); - return ( -
-
- -
-
-
{member.getName()}
-
- {scope} -
-
-
- ); - }; - - return ; -} -``` - - -```css lines -.group-member-list-item { - display: flex; - min-width: 240px; - padding: 8px 16px; - align-items: center; - gap: 12px; - background: #fff; -} - -.group-member-list-item__content { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.group-member-list-item__avatar { - width: 40px; - height: 40px; -} - -.group-member-list-item__content-name { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 500 16px Roboto; -} - -.group-member-list-item__content-tag { - display: flex; - padding: 4px 12px; - border-radius: 1000px; - background: #edeafa; - color: #6852d6; - font: 400 12px Roboto; -} - -.group-member-list-item__content-tag-owner { - background: #6852d6; - color: #fff; -} - -.group-member-list-item__content-tag-admin { - border: 1px solid #6852d6; -} - -.group-member-list-item__content-tag-participant { - display: none; -} -``` - - - -### subtitleView - -Replace the subtitle text. Joined date example. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -function SubtitleMembers({ group }: { group: CometChat.Group }) { - const getSubtitleView = (member: CometChat.GroupMember) => { - const date = new Date(member.getJoinedAt() * 1000).toLocaleDateString(); - return
Joined: {date}
; - }; - - return ; -} -``` - - -```css lines -.group-member-subtitle { - overflow: hidden; - color: #727272; - text-overflow: ellipsis; - white-space: nowrap; - font: 400 14px Roboto; -} -``` - - - -### trailingView - -Replace the right section. Scope tag example. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -function TrailingViewMembers({ group }: { group: CometChat.Group }) { - const getTrailingView = (member: CometChat.GroupMember) => { - return ( -
- {member.getScope()} -
- ); - }; - - return ; -} -``` - - -```css lines -.group-member-scope-tag { - display: flex; - padding: 4px 12px; - border-radius: 1000px; - background: #edeafa; - color: #6852d6; - font: 400 12px Roboto; -} -``` - - - -### headerView - -Replace the entire header bar. - - - - - - - -```tsx lines -import { - CometChatGroupMembers, - CometChatButton, - getLocalizedString, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomHeaderMembers({ group }: { group: CometChat.Group }) { - return ( - -
- {getLocalizedString("GROUP_MEMBERS")} -
- { /* handle click */ }} /> - - } - /> - ); -} -``` - - -```css lines -.group-members__header { - display: flex; - width: 100%; - padding: 8px 16px; - align-items: center; - justify-content: space-between; - gap: 12px; - border-radius: 10px; - border: 1px solid #e8e8e8; - background: #edeafa; -} - -.group-members__header__title { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 700 24px Roboto; -} -``` - - - -### options - -Replace the context menu / hover actions on each member item. The `options` callback receives both the group and the member. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatGroupMembers, - CometChatOption, -} from "@cometchat/chat-uikit-react"; - -function CustomOptionsMembers({ group }: { group: CometChat.Group }) { - return ( - [ - new CometChatOption({ - id: "kick", - title: "Kick User", - onClick: () => { /* kick logic */ }, - }), - ]} - /> - ); -} -``` - - -```css lines -.cometchat-group-members .cometchat-menu-list__main-menu-item-icon { - background: #f44649; -} - -.cometchat-group-members .cometchat-menu-list__menu { - background: transparent; - box-shadow: none; -} -``` - - - ---- - -## Common Patterns - -### Hide member management actions - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ReadOnlyMembers({ group }: { group: CometChat.Group }) { - return ( - - ); -} -``` - -### Admins and moderators only - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function AdminMembers({ group }: { group: CometChat.Group }) { - return ( - - ); -} -``` - -### Minimal chrome - -```tsx lines -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function MinimalMembers({ group }: { group: CometChat.Group }) { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-group-members`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-group-members` descendant selectors in a global stylesheet. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-group-members` | -| Header title | `.cometchat-group-members .cometchat-list__header-title` | -| List item | `.cometchat-group-members .cometchat-list-item` | -| Body title | `.cometchat-group-members .cometchat-list-item__body-title` | -| Trailing view | `.cometchat-group-members .cometchat-list-item__trailing-view` | -| Scope badge | `.cometchat-group-members__trailing-view-options` | -| Admin scope badge | `.cometchat-group-members__trailing-view-options-admin` | -| Owner scope badge | `.cometchat-group-members__trailing-view-options-owner` | -| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant` | -| Online status | `.cometchat-group-members__list-item-online .cometchat-list-item__status` | -| Scope change dropdown | `.cometchat-group-members .cometchat-menu-list__sub-menu` | -| Empty state | `.cometchat-group-members__empty-state-view` | -| Error state | `.cometchat-group-members__error-state-view` | -| Shimmer loading | `.cometchat-group-members__shimmer` | -| Backdrop (modal) | `.cometchat-group-members__backdrop` | - -### Example: Brand-themed group members - - - - - -```css lines -.cometchat-group-members .cometchat-list__header-title { - background: #feede1; - color: #f76808; - font-family: "Times New Roman"; -} - -.cometchat-group-members .cometchat-list-item__body-title { - font-family: "Times New Roman"; -} - -.cometchat-group-members .cometchat-group-members__trailing-view-options { - font-family: "Times New Roman"; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(m) => openProfile(m)}` | -| Filter which members appear | Component props | `groupMemberRequestBuilder` | `groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin"])}` | -| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideKickMemberOption={true}` | -| Replace a section of the list item | Component props | `View` render props | `subtitleView={(m) =>
{m.getScope()}
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-group-members` class | `.cometchat-group-members .cometchat-avatar { border-radius: 8px; }` | - ---- - -## Props - -All props are optional unless noted otherwise. - ---- - -### disableLoadingState - -Skips the loading spinner when re-fetching. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### emptyView - -Custom component displayed when there are no members. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in empty state | - ---- - -### errorView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in error state | - -Hidden when `hideError={true}`. - ---- - -### group - -The group whose members are fetched and displayed. **Required.** - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | — | - ---- - -### groupMemberRequestBuilder - -Controls which members load and in what order. - -| | | -| --- | --- | -| Type | `CometChat.GroupMembersRequestBuilder` | -| Default | SDK default (30 per page) | - -Pass the builder instance, not the result of `.build()`. - ---- - -### headerView - -Custom component rendered as the entire header bar. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in header with title | - ---- - -### hideBanMemberOption - -Hides the option to ban a member from the group. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideError - -Hides the default and custom error views. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideKickMemberOption - -Hides the option to kick a member from the group. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideScopeChangeOption - -Hides the option to change the scope of a group member. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideSearch - -Hides the default search bar. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideUserStatus - -Hides the user's online/offline status indicator. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### itemView - -Custom renderer for the entire list item row. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` | -| Default | Built-in list item | - ---- - -### leadingView - -Custom renderer for the avatar / left section. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` | -| Default | Built-in avatar | - ---- - -### loadingView - -Custom component displayed during the loading state. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in shimmer | - ---- - -### onEmpty - -Callback fired when the member list is empty. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when a member row is clicked. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => void` | -| Default | `undefined` | - ---- - -### onSelect - -Callback fired when a member is selected/deselected. Requires `selectionMode` to be set. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember, selected: boolean) => void` | -| Default | `undefined` | - ---- - -### options - -Custom context menu / hover actions for each member item. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` | -| Default | `undefined` | - ---- - -### searchKeyword - -Pre-fills the search and filters the member list. - -| | | -| --- | --- | -| Type | `string` | -| Default | `""` | - ---- - -### searchRequestBuilder - -Controls filtering when the search bar is active. - -| | | -| --- | --- | -| Type | `CometChat.GroupMembersRequestBuilder` | -| Default | `undefined` | - ---- - -### selectionMode - -Enables single or multi-select checkboxes on list items. - -| | | -| --- | --- | -| Type | `SelectionMode` | -| Default | `SelectionMode.none` | - -```ts lines -enum SelectionMode { - single, // 0 - multiple, // 1 - none, // 2 -} -``` - ---- - -### showScrollbar - -Shows the scrollbar in the member list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### subtitleView - -Custom renderer for the subtitle text. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` | -| Default | Built-in subtitle | - ---- - -### titleView - -Custom renderer for the name / title text. - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` | -| Default | Built-in title | - ---- - -### trailingView - -Custom renderer for the right section (scope badge / actions). - -| | | -| --- | --- | -| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` | -| Default | Built-in trailing view | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatGroupEvents.ccGroupMemberKicked` | `IGroupMemberKickedBanned` | Member kicked | -| `CometChatGroupEvents.ccGroupMemberBanned` | `IGroupMemberKickedBanned` | Member banned | -| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | Member scope changed | -| `CometChatGroupEvents.ccGroupMemberAdded` | `IGroupMemberAdded` | Members added | - -All events are RxJS `Subject` instances. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-group-members` | -| Header title | `.cometchat-group-members .cometchat-list__header-title` | -| List item | `.cometchat-group-members .cometchat-list-item` | -| Body title | `.cometchat-group-members .cometchat-list-item__body-title` | -| Trailing view | `.cometchat-group-members .cometchat-list-item__trailing-view` | -| Scope badge | `.cometchat-group-members__trailing-view-options` | -| Admin scope badge | `.cometchat-group-members__trailing-view-options-admin` | -| Owner scope badge | `.cometchat-group-members__trailing-view-options-owner` | -| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant` | -| Online status | `.cometchat-group-members__list-item-online .cometchat-list-item__status` | -| Scope change dropdown | `.cometchat-group-members .cometchat-menu-list__sub-menu` | -| Scope change list | `.cometchat-group-members .cometchat-menu-list__sub-menu-list` | -| Empty state | `.cometchat-group-members__empty-state-view` | -| Empty state title | `.cometchat-group-members__empty-state-view-body-title` | -| Error state | `.cometchat-group-members__error-state-view` | -| Error state title | `.cometchat-group-members__error-state-view-body-title` | -| Shimmer loading | `.cometchat-group-members__shimmer` | -| Backdrop | `.cometchat-group-members__backdrop` | diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx deleted file mode 100644 index 233b7dadf..000000000 --- a/ui-kit/react/groups.mdx +++ /dev/null @@ -1,1337 +0,0 @@ ---- -title: "Groups" -description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator." ---- - -```json -{ - "component": "CometChatGroups", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatGroups } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.", - "cssRootClass": ".cometchat-groups", - "primaryOutput": { - "prop": "onItemClick", - "type": "(group: CometChat.Group) => void" - }, - "props": { - "data": { - "groupsRequestBuilder": { - "type": "CometChat.GroupsRequestBuilder", - "default": "SDK default (30 per page)", - "note": "Pass the builder, not the result of .build()" - }, - "searchRequestBuilder": { - "type": "CometChat.GroupsRequestBuilder", - "default": "undefined" - }, - "activeGroup": { - "type": "CometChat.Group", - "default": "undefined" - } - }, - "callbacks": { - "onItemClick": "(group: CometChat.Group) => void", - "onSelect": "(group: CometChat.Group, selected: boolean) => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "visibility": { - "hideSearch": { "type": "boolean", "default": false }, - "hideError": { "type": "boolean", "default": false }, - "hideGroupType": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "selection": { - "selectionMode": { - "type": "SelectionMode", - "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"], - "default": "SelectionMode.none" - } - }, - "viewSlots": { - "itemView": "(group: CometChat.Group) => JSX.Element", - "leadingView": "(group: CometChat.Group) => JSX.Element", - "titleView": "(group: CometChat.Group) => JSX.Element", - "subtitleView": "(group: CometChat.Group) => JSX.Element", - "trailingView": "(group: CometChat.Group) => JSX.Element", - "headerView": "JSX.Element", - "loadingView": "JSX.Element", - "emptyView": "JSX.Element", - "errorView": "JSX.Element", - "options": "(group: CometChat.Group) => CometChatOption[]" - } - }, - "events": [ - { - "name": "CometChatGroupEvents.ccGroupCreated", - "payload": "CometChat.Group", - "description": "New group created" - }, - { - "name": "CometChatGroupEvents.ccGroupDeleted", - "payload": "CometChat.Group", - "description": "Group deleted" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberJoined", - "payload": "IGroupMemberJoined", - "description": "User joins a group" - }, - { - "name": "CometChatGroupEvents.ccGroupLeft", - "payload": "IGroupLeft", - "description": "User leaves a group" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberAdded", - "payload": "IGroupMemberAdded", - "description": "Members added to a group" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", - "payload": "IGroupMemberScopeChanged", - "description": "Member scope changed" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberKicked", - "payload": "IGroupMemberKickedBanned", - "description": "Member kicked" - }, - { - "name": "CometChatGroupEvents.ccGroupMemberBanned", - "payload": "IGroupMemberKickedBanned", - "description": "Member banned" - }, - { - "name": "CometChatGroupEvents.ccOwnershipChanged", - "payload": "IOwnershipChanged", - "description": "Ownership transferred" - } - ], - "sdkListeners": [ - "onGroupMemberJoined", - "onGroupMemberLeft", - "onMemberAddedToGroup", - "onGroupMemberKicked", - "onGroupMemberBanned", - "onGroupMemberScopeChanged" - ], - "compositionExample": { - "description": "Group directory wired to message view", - "components": [ - "CometChatGroups", - "CometChatMessageHeader", - "CometChatMessageList", - "CometChatMessageComposer" - ], - "flow": "onItemClick emits CometChat.Group -> pass to MessageHeader, MessageList, MessageComposer" - }, - "types": { - "CometChatOption": { - "id": "string | undefined", - "title": "string | undefined", - "iconURL": "string | undefined", - "onClick": "(() => void) | undefined" - }, - "SelectionMode": { - "single": 0, - "multiple": 1, - "none": 2 - } - } -} -``` - - -## Where It Fits - -`CometChatGroups` is a directory list component. It renders available groups and emits the selected `CometChat.Group` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout. - -```tsx lines -import { useState } from "react"; -import { - CometChatGroups, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function GroupChatApp() { - const [selectedGroup, setSelectedGroup] = useState(); - - return ( -
-
- setSelectedGroup(group)} - /> -
- {selectedGroup ? ( -
- - - -
- ) : ( -
- Select a group -
- )} -
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function GroupsDemo() { - return ( -
- -
- ); -} - -export default GroupsDemo; -``` - -Root CSS class: `.cometchat-groups` - ---- - -## Filtering Groups - -Pass a `CometChat.GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`. - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function FilteredGroups() { - return ( - - ); -} -``` - -### Filter Recipes - -| Recipe | Code | -| --- | --- | -| Joined groups only | `new CometChat.GroupsRequestBuilder().joinedOnly(true)` | -| Limit to 10 per page | `new CometChat.GroupsRequestBuilder().setLimit(10)` | -| Search by keyword | `new CometChat.GroupsRequestBuilder().setSearchKeyword("design")` | -| Filter by tags | `new CometChat.GroupsRequestBuilder().setTags(["vip"])` | -| With tags data | `new CometChat.GroupsRequestBuilder().withTags(true)` | - -Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom. - -The `searchRequestBuilder` prop accepts a separate `GroupsRequestBuilder` for filtering when the search bar is active. - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function SearchFilteredGroups() { - return ( - - ); -} -``` - -Refer to [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) for the full builder API. - ---- - -## Actions and Events - -### Callback Props - -#### onItemClick - -Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view. - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupsWithClick() { - const handleItemClick = (group: CometChat.Group) => { - console.log("Selected:", group.getGuid()); - }; - - return ; -} -``` - -#### onSelect - -Fires when a group is checked/unchecked in multi-select mode. Requires `selectionMode` to be set. - -```tsx lines -import { useState } from "react"; -import { - CometChatGroups, - SelectionMode, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function BatchSelectGroups() { - const [selected, setSelected] = useState>(new Set()); - - const handleSelect = (group: CometChat.Group, isSelected: boolean) => { - setSelected((prev) => { - const next = new Set(prev); - const id = group.getGuid(); - isSelected ? next.add(id) : next.delete(id); - return next; - }); - }; - - return ( - - ); -} -``` - -#### onError - -Fires on internal errors (network failure, auth issue, SDK exception). - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupsWithErrorHandler() { - return ( - { - console.error("CometChatGroups error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatGroupEvents` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup. - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccGroupCreated` | A new group is created | `CometChat.Group` | -| `ccGroupDeleted` | A group is deleted | `CometChat.Group` | -| `ccGroupMemberJoined` | A user joins a group | `IGroupMemberJoined` | -| `ccGroupLeft` | A user leaves a group | `IGroupLeft` | -| `ccGroupMemberAdded` | Members are added to a group | `IGroupMemberAdded` | -| `ccGroupMemberScopeChanged` | A member's scope changes | `IGroupMemberScopeChanged` | -| `ccGroupMemberKicked` | A member is kicked | `IGroupMemberKickedBanned` | -| `ccGroupMemberBanned` | A member is banned | `IGroupMemberKickedBanned` | -| `ccGroupMemberUnbanned` | A member is unbanned | `IGroupMemberUnBanned` | -| `ccOwnershipChanged` | Group ownership is transferred | `IOwnershipChanged` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatGroupEvents } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function useGroupEvents() { - useEffect(() => { - const createdSub = CometChatGroupEvents.ccGroupCreated.subscribe( - (group: CometChat.Group) => { - console.log("Group created:", group.getName()); - } - ); - const deletedSub = CometChatGroupEvents.ccGroupDeleted.subscribe( - (group: CometChat.Group) => { - console.log("Group deleted:", group.getName()); - } - ); - const memberAddedSub = CometChatGroupEvents.ccGroupMemberAdded.subscribe( - (item) => { - console.log("Members added to:", item.userAddedIn.getName()); - } - ); - const leftSub = CometChatGroupEvents.ccGroupLeft.subscribe( - (item) => { - console.log("User left group:", item.leftGroup.getName()); - } - ); - - return () => { - createdSub?.unsubscribe(); - deletedSub?.unsubscribe(); - memberAddedSub?.unsubscribe(); - leftSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required. - -| SDK Listener | Internal behavior | -| --- | --- | -| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined | -| `onGroupMemberLeft` | Updates member count, sets `hasJoined(false)` if current user left | -| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added | -| `onGroupMemberKicked` | Updates member count, sets `hasJoined(false)` if current user was kicked | -| `onGroupMemberBanned` | Removes group if current user was banned, otherwise updates member count | -| `onGroupMemberScopeChanged` | Updates scope if current user's scope changed, updates member count | - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling. - - ---- - -## Custom View Slots - -Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `CometChat.Group` object for that row. - -| Slot | Signature | Replaces | -| --- | --- | --- | -| `itemView` | `(group: CometChat.Group) => JSX.Element` | Entire list item row | -| `leadingView` | `(group: CometChat.Group) => JSX.Element` | Avatar / left section | -| `titleView` | `(group: CometChat.Group) => JSX.Element` | Name / title text | -| `subtitleView` | `(group: CometChat.Group) => JSX.Element` | Member count subtitle | -| `trailingView` | `(group: CometChat.Group) => JSX.Element` | Right section | -| `headerView` | `JSX.Element` | Entire header bar | -| `loadingView` | `JSX.Element` | Loading spinner | -| `emptyView` | `JSX.Element` | Empty state | -| `errorView` | `JSX.Element` | Error state | -| `options` | `(group: CometChat.Group) => CometChatOption[]` | Context menu / hover actions | - -### itemView - -Replace the entire list item row. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function CustomItemViewGroups() { - const getItemView = (group: CometChat.Group) => { - return ( -
-
-
{group.getName()}
-
JOIN
-
-
- {group.getMembersCount()} Members • {group.getDescription()} -
-
- ); - }; - - return ; -} -``` - - -```css lines -.group-list-item { - display: flex; - flex-direction: column; - text-align: left; - min-width: 240px; - padding: 8px 16px; - gap: 4px; - flex: 1 0 0; - border-right: 1px solid #f5f5f5; - background: #fff; -} - -.group-list-item:hover { - background-color: #f5f5f5; -} - -.group-list-item__title-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - align-self: stretch; -} - -.group-list-item__title { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 500 16px Roboto; -} - -.group-list-item__tail { - display: flex; - padding: 4px 12px; - justify-content: center; - align-items: center; - border-radius: 1000px; - background: #edeafa; - overflow: hidden; - color: #6852d6; - text-overflow: ellipsis; - font: 700 12px Roboto; -} - -.group-list-item__subtitle { - overflow: hidden; - color: #727272; - text-overflow: ellipsis; - white-space: nowrap; - font: 400 14px Roboto; -} -``` - - - -### titleView - -Replace the name / title text. Group type badge inline example. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function GroupTypeTitleGroups() { - const getTitleView = (group: CometChat.Group) => { - return ( -
- {group.getName()} - {group.getType()} -
- ); - }; - - return ; -} -``` - - -```css lines -.groups__title-view { - display: flex; - align-items: center; - gap: 4px; - align-self: stretch; -} - -.groups__title-view-name { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 500 16px Roboto; -} - -.groups__title-view-type { - color: #fff; - font: 600 8px Roboto; - display: flex; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - gap: 4px; - border-radius: 7px; - background: #09c26f; -} - -.groups__title-view-public .groups__title-view-type { - background: #0b7bea; -} -``` - - - -### subtitleView - -Replace the member count subtitle text. - -Default: - - - - - -Customized: - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function SubtitleGroups() { - const getSubtitleView = (group: CometChat.Group) => { - return ( -
- {group.getMembersCount()} Members • {group.getDescription()} -
- ); - }; - - return ; -} -``` - - -```css lines -.cometchat .cometchat-groups .group-subtitle { - overflow: hidden; - color: #727272; - text-overflow: ellipsis; - white-space: nowrap; - font: 400 14px Roboto; -} -``` - - - -### leadingView - -Replace the avatar / left section. Joined status badge example. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroups, CometChatAvatar } from "@cometchat/chat-uikit-react"; - -function LeadingViewGroups() { - const getLeadingView = (group: CometChat.Group) => { - return ( - <> - {group.getHasJoined() ? ( -
- - Joined -
- ) : ( -
- - Join -
- )} - - ); - }; - - return ; -} -``` - - -```css lines -.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, -.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar { - border-radius: 8px; - height: 48px; - width: 48px; -} - -.groups__leading-view-info { - display: flex; - width: 48px; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - color: #fff; - font: 600 8px/9.6px Roboto; - background: #ffab00; - position: absolute; - bottom: -2px; -} - -.groups__leading-view-joined .groups__leading-view-info { - background: #09c26f; -} - -.groups__leading-view { - position: relative; -} -``` - - - -### trailingView - -Replace the right section. Join status button example. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function TrailingViewGroups() { - const getTrailingView = (group: CometChat.Group) => { - return ( -
- {group.getHasJoined() ? "JOINED" : "+ JOIN"} -
- ); - }; - - return ; -} -``` - - -```css lines -.groups__trailing-view { - display: flex; - padding: 4px 12px; - justify-content: center; - align-items: center; - border-radius: 1000px; - background: #edeafa; - overflow: hidden; - color: #6852d6; - text-overflow: ellipsis; - font: 700 12px Roboto; -} - -.cometchat-groups .cometchat-list-item__trailing-view { - width: fit-content; - height: fit-content; -} -``` - - - -### headerView - -Replace the entire header bar. - - - - - - - -```tsx lines -import { - CometChatButton, - CometChatGroups, - getLocalizedString, -} from "@cometchat/chat-uikit-react"; - -function CustomHeaderGroups() { - return ( - -
- {getLocalizedString("GROUPS")} -
- { /* handle click */ }} /> - - } - /> - ); -} -``` - - -```css lines -.groups__header { - display: flex; - width: 100%; - padding: 8px 16px; - align-items: center; - justify-content: space-between; - gap: 12px; - border-radius: 10px; - border: 1px solid #e8e8e8; - background: #edeafa; -} - -.groups__header__title { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 700 24px Roboto; -} - -.groups__header .cometchat-button .cometchat-button__icon { - background: #141414; -} - -.groups__header .cometchat-button { - width: 24px; - border: none; - background: transparent; - border-radius: 0; -} -``` - - - -### options - -Replace the context menu / hover actions on each group item. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOption, - CometChatGroups, -} from "@cometchat/chat-uikit-react"; - -function CustomOptionsGroups() { - const getOptions = (group: CometChat.Group) => [ - new CometChatOption({ - title: "Delete", - id: "delete", - onClick: () => { /* delete logic */ }, - }), - ]; - - return ; -} -``` - - -```css lines -.cometchat .cometchat-groups .cometchat-menu-list__menu { - background: none; -} - -.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon { - background: #f44649; -} -``` - - - -```ts lines -// CometChatOption interface -interface CometChatOption { - id?: string; // Unique identifier - title?: string; // Display text - iconURL?: string; // Icon asset URL - onClick?: () => void; // Click handler -} -``` - ---- - -## Common Patterns - -### Custom empty state with CTA - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function EmptyStateGroups() { - return ( - -

No groups available

- - - } - /> - ); -} -``` - -### Hide all chrome — minimal list - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -function MinimalGroups() { - return ( - - ); -} -``` - -### Joined groups only - -```tsx lines -import { CometChatGroups } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function JoinedGroups() { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-groups`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-groups` descendant selectors in a global stylesheet. - -To scope overrides to a single instance when multiple `CometChatGroups` exist on the same page, wrap the component in a container and scope selectors: - -```css lines -.sidebar-left .cometchat-groups .cometchat-avatar { - border-radius: 8px; -} -``` - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-groups` | -| Header title | `.cometchat-groups .cometchat-list__header-title` | -| Search bar input | `.cometchat-groups .cometchat-search-bar__input` | -| List item | `.cometchat-groups .cometchat-list-item` | -| Body title | `.cometchat-groups .cometchat-list-item__body-title` | -| Avatar | `.cometchat-groups__list-item .cometchat-avatar` | -| Subtitle | `.cometchat-groups__subtitle` | -| Active item | `.cometchat-groups__list-item-active .cometchat-list-item` | -| Password group icon | `.cometchat-groups__list-item-password .cometchat-list-item__status` | -| Private group icon | `.cometchat-groups__list-item-private .cometchat-list-item__status` | -| Empty state | `.cometchat-groups__empty-state-view` | -| Error state | `.cometchat-groups__error-state-view` | -| Shimmer loading | `.cometchat-groups__shimmer` | - -### Example: Brand-themed groups - - - - - -```css lines -.cometchat-groups .cometchat-list__header-title { - background-color: #edeafa; - color: #6852d6; - border-width: 0px 1px 1px 0px; - border-style: solid; - border-color: #6852d6; - font-family: "Times New Roman"; - font-size: 24px; - font-weight: 700; -} - -.cometchat-groups__list-item .cometchat-avatar { - background-color: #aa9ee8; - border-radius: 6.67px; -} - -.cometchat-groups .cometchat-list-item__body-title { - font-family: "Times New Roman"; - font-size: 16px; - font-weight: 400; -} - -.cometchat-groups .cometchat-groups__subtitle { - font-family: "Times New Roman"; - font-size: 14px; - font-weight: 400; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(g) => setActive(g)}` | -| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder={new CometChat.GroupsRequestBuilder().joinedOnly(true)}` | -| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideGroupType={true}` | -| Replace a section of the list item | Component props | `View` render props | `itemView={(group) =>
...
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-groups` class | `.cometchat-groups .cometchat-avatar { border-radius: 8px; }` | - ---- - -## Props - -All props are optional unless noted otherwise. - ---- - -### activeGroup - -Highlights the specified group in the list. - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | `undefined` | - -Must be a reference-equal object from the SDK; a manually constructed object will not match. - ---- - -### emptyView - -Custom component displayed when there are no groups. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in empty state | - ---- - -### errorView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in error state | - -Hidden when `hideError={true}`. - ---- - -### groupsRequestBuilder - -Controls which groups load and in what order. - -| | | -| --- | --- | -| Type | `CometChat.GroupsRequestBuilder` | -| Default | SDK default (30 per page) | - -Pass the builder instance, not the result of `.build()`. - ---- - -### headerView - -Custom component rendered as the entire header bar. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in header with title | - ---- - -### hideError - -Hides the default and custom error views. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - -Also suppresses `errorView` if set. - ---- - -### hideGroupType - -Hides the group type icon (public/private/password). - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideSearch - -Hides the default search bar. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### itemView - -Custom renderer for the entire list item row. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => JSX.Element` | -| Default | Built-in list item | - ---- - -### leadingView - -Custom renderer for the avatar / left section. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => JSX.Element` | -| Default | Built-in avatar | - ---- - -### loadingView - -Custom component displayed during the loading state. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in shimmer | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when a group row is clicked. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => void` | -| Default | `undefined` | - ---- - -### onSelect - -Callback fired when a group is selected/deselected. Requires `selectionMode` to be set. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group, selected: boolean) => void` | -| Default | `undefined` | - ---- - -### options - -Custom context menu / hover actions for each group item. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => CometChatOption[]` | -| Default | `undefined` | - -```ts lines -class CometChatOption { - id?: string; - title?: string; - iconURL?: string; - onClick?: () => void; -} -``` - ---- - -### searchRequestBuilder - -Controls filtering when the search bar is active. - -| | | -| --- | --- | -| Type | `CometChat.GroupsRequestBuilder` | -| Default | `undefined` | - ---- - -### selectionMode - -Enables single or multi-select checkboxes on list items. - -| | | -| --- | --- | -| Type | `SelectionMode` | -| Default | `SelectionMode.none` | - -```ts lines -enum SelectionMode { - single, // 0 - multiple, // 1 - none, // 2 -} -``` - -Must pair with `onSelect` to capture selections. - ---- - -### showScrollbar - -Shows the scrollbar in the group list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### subtitleView - -Custom renderer for the member count subtitle text. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => JSX.Element` | -| Default | Built-in subtitle | - ---- - -### titleView - -Custom renderer for the name / title text. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => JSX.Element` | -| Default | Built-in title | - ---- - -### trailingView - -Custom renderer for the right section. - -| | | -| --- | --- | -| Type | `(group: CometChat.Group) => JSX.Element` | -| Default | Built-in trailing view | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatGroupEvents.ccGroupCreated` | `CometChat.Group` | New group created | -| `CometChatGroupEvents.ccGroupDeleted` | `CometChat.Group` | Group deleted | -| `CometChatGroupEvents.ccGroupMemberJoined` | `IGroupMemberJoined` | User joins a group | -| `CometChatGroupEvents.ccGroupLeft` | `IGroupLeft` | User leaves a group | -| `CometChatGroupEvents.ccGroupMemberAdded` | `IGroupMemberAdded` | Members added to a group | -| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | Member scope changed | -| `CometChatGroupEvents.ccGroupMemberKicked` | `IGroupMemberKickedBanned` | Member kicked | -| `CometChatGroupEvents.ccGroupMemberBanned` | `IGroupMemberKickedBanned` | Member banned | -| `CometChatGroupEvents.ccGroupMemberUnbanned` | `IGroupMemberUnBanned` | Member unbanned | -| `CometChatGroupEvents.ccOwnershipChanged` | `IOwnershipChanged` | Ownership transferred | - -All events are RxJS `Subject` instances. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-groups` | -| Header title | `.cometchat-groups .cometchat-list__header-title` | -| Search bar input | `.cometchat-groups .cometchat-search-bar__input` | -| List item | `.cometchat-groups .cometchat-list-item` | -| Body title | `.cometchat-groups .cometchat-list-item__body-title` | -| Avatar | `.cometchat-groups__list-item .cometchat-avatar` | -| Leading view | `.cometchat-groups__list-item .cometchat-list-item__leading-view` | -| Subtitle | `.cometchat-groups__subtitle` | -| Active item | `.cometchat-groups__list-item-active .cometchat-list-item` | -| Password group icon | `.cometchat-groups__list-item-password .cometchat-list-item__status` | -| Password group status icon | `.cometchat-groups__list-item-password .cometchat-list-item__status-icon` | -| Private group icon | `.cometchat-groups__list-item-private .cometchat-list-item__status` | -| Private group status icon | `.cometchat-groups__list-item-private .cometchat-list-item__status-icon` | -| Empty state | `.cometchat-groups__empty-state-view` | -| Empty state title | `.cometchat-groups__empty-state-view-body-title` | -| Empty state description | `.cometchat-groups__empty-state-view-body-description` | -| Error state | `.cometchat-groups__error-state-view` | -| Error state title | `.cometchat-groups__error-state-view-body-title` | -| Error state description | `.cometchat-groups__error-state-view-body-description` | -| Shimmer loading | `.cometchat-groups__shimmer` | -| Shimmer item | `.cometchat-groups__shimmer-item` | -| Shimmer avatar | `.cometchat-groups__shimmer-item-avatar` | -| Shimmer title | `.cometchat-groups__shimmer-item-body-title` | -| Shimmer subtitle | `.cometchat-groups__shimmer-item-body-subtitle` | diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index 163d7b9c1..63ab1bf17 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -1,212 +1,309 @@ --- -title: "Block/Unblock Users" -sidebarTitle: "Block/Unblock Users" -description: "Implement block and unblock user functionality in CometChat React UI Kit with composer state management." +title: "Block/Unblock User" +sidebarTitle: "Block/Unblock User" +description: "Let users block and unblock others directly within chat to control unwanted communication." --- - +## Goal -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Events | `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked` | -| UI helpers | `CometChatConfirmDialog`, `CometChatToast` | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +By the end of this guide you will have a chat interface where users can block and unblock other users, with a confirmation dialog before blocking, the composer automatically hidden for blocked users, and an unblock prompt displayed in its place — all coordinated through UI events so every component stays in sync. - +## Prerequisites -Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt. +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide +- A running `CometChatProvider` setup with valid credentials +- An existing one-on-one chat screen using `CometChatMessageList` and `CometChatMessageComposer` -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +## Components Used ---- +| Component / API | Purpose | +|:----------------|:--------| +| `CometChatConfirmDialog` | Compound dialog for block confirmation | +| `CometChatMessageList` | Displays messages in the conversation | +| `CometChatMessageComposer` | Text input for sending messages | +| `useCometChatEvents` | Subscribe to UI events | +| `usePublishEvent` | Publish UI events | +| `CometChat.blockUsers()` | SDK method to block a user | +| `CometChat.unblockUsers()` | SDK method to unblock a user | +| `ui:user/blocked` | UI event fired after blocking | +| `ui:user/unblocked` | UI event fired after unblocking | -## Components +## Step 1: Block User -| Component / Class | Role | -|:---|:---| -| `CometChat.blockUsers()` | SDK method to block specific users | -| `CometChat.unblockUsers()` | SDK method to unblock previously blocked users | -| `CometChatUserEvents.ccUserBlocked` | Event fired when a user is blocked | -| `CometChatUserEvents.ccUserUnblocked` | Event fired when a user is unblocked | -| `CometChatConfirmDialog` | Confirmation dialog for block/unblock actions | +Call `CometChat.blockUsers()` with the target UID. On success, update the user object and publish the `ui:user/blocked` event so other components (thread panel, details panel) can react. ---- +_File: ChatView.tsx_ -## Integration Steps - -### 1. Block User - -Call `CometChat.blockUsers()` with the target UID. On success, update the local user object with `setBlockedByMe(true)` and emit `ccUserBlocked` so all subscribed components (like the composer) react to the change. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const onBlockUserClicked: () => Promise = () => { - let UID = user.getUid(); - return new Promise(async (resolve, reject) => { - CometChat.blockUsers([UID]).then( - list => { - user.setBlockedByMe(true); - CometChatUserEvents.ccUserBlocked.next(user); - toastTextRef.current = getLocalizedString("blocked_successfully"); - setShowToast(true); - return resolve(); - }, error => { - console.log("Blocking user fails with error", error); - return reject(); - } - ) - }) -} -``` +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { usePublishEvent } from "@cometchat/chat-uikit-react"; ---- +const publish = usePublishEvent(); -### 2. Unblock User - -Call `CometChat.unblockUsers()` with the target UID. On success, reset the action items back to "Block" (instead of "Unblock"), update the local user object, and emit `ccUserUnblocked` to restore the composer. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const onUnblockUserClicked = () => { - let UID = user.getUid(); - CometChat.unblockUsers([UID]).then( - list => { - setActionItems([{ - "name": getLocalizedString("user_details_block"), - "icon": blockIcon, - "id": "block_unblock_user" - }, { - "name": getLocalizedString("delete_chat"), - "icon": deleteIcon, - "id": "delete_chat" - }]); - user.setBlockedByMe(false); - CometChatUserEvents.ccUserUnblocked.next(user); - }, error => { - console.log("Unblocking user fails with error", error); - } - ); +async function handleBlock(user: CometChat.User) { + try { + await CometChat.blockUsers([user.getUid()]); + user.setBlockedByMe(true); + setIsBlocked(true); + setShowBlockDialog(false); + publish({ type: "ui:user/blocked", user }); + } catch (error) { + console.error("Error blocking user:", error); + } } ``` ---- - -### 3. Confirmation Dialog +## Step 2: Unblock User -Show a confirmation dialog before blocking. This prevents accidental blocks. The dialog uses `CometChatConfirmDialog` with localized title, message, and button text. +Call `CometChat.unblockUsers()` to reverse the block. Publish `ui:user/unblocked` so all listening components restore their normal state. -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +_File: ChatView.tsx_ -```tsx lines -const getBlockUserConfirmationDialogView = () => { - return <> -
- { - setShowBlockUserDialog(!showBlockUserDialog); - }} - onSubmitClick={onBlockUserClicked} /> -
- +```tsx +async function handleUnblock(user: CometChat.User) { + try { + await CometChat.unblockUsers([user.getUid()]); + user.setBlockedByMe(false); + setIsBlocked(false); + publish({ type: "ui:user/unblocked", user }); + } catch (error) { + console.error("Error unblocking user:", error); + } } ``` ---- +## Step 3: Confirmation Dialog -### 4. Composer Blocked State +Show a `CometChatConfirmDialog` before blocking. Render it conditionally based on a `showBlockDialog` state flag. -_File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)_ +_File: ChatView.tsx_ -When a user is blocked, the composer is replaced with an unblock prompt: +```tsx +import { useState } from "react"; +import { CometChatConfirmDialog } from "@cometchat/chat-uikit-react"; -```tsx lines -{showComposerState ? ( -
- -
-) : ( -
{ - if (user) { - CometChat.unblockUsers([user?.getUid()]).then(() => { - user.setBlockedByMe(false); - CometChatUserEvents.ccUserUnblocked.next(user); - }) - } - }}> -
- {getLocalizedString("cannot_send_to_blocked_user")} - {getLocalizedString("click_to_unblock")} -
-
+const [showBlockDialog, setShowBlockDialog] = useState(false); + +// In your JSX: +{showBlockDialog && ( + setShowBlockDialog(false)}> + + + handleBlock(user)} + onCancel={() => setShowBlockDialog(false)} + /> + )} ``` ---- +## Step 4: Listen for Block/Unblock Events -### 5. Event Listeners +Use `useCometChatEvents` to subscribe to block/unblock events. This keeps the composer visibility in sync even when the block action originates from a different component (e.g., a details panel). -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +_File: ChatView.tsx_ -Subscribe to block/unblock events to update the UI in real time: +```tsx +import { useCometChatEvents } from "@cometchat/chat-uikit-react"; +import type { CometChatEvent } from "@cometchat/chat-uikit-react"; -```tsx lines -const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => { - if (user.getBlockedByMe()) { - setShowComposer(false); - } - updateUserAfterBlockUnblock(user); -}); +useCometChatEvents( + (event: CometChatEvent) => { + if (!user) return; -const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => { - if (!user.getBlockedByMe()) { - setShowComposer(true); + if (event.type === "ui:user/blocked" && event.user.getUid() === user.getUid()) { + setIsBlocked(true); + } + if (event.type === "ui:user/unblocked" && event.user.getUid() === user.getUid()) { + setIsBlocked(false); } - updateUserAfterBlockUnblock(user); -}); + }, + [user?.getUid()] +); ``` ---- +## Step 5: Blocked Composer State -## Feature Matrix +Conditionally render the composer or a blocked prompt based on the `isBlocked` state. The blocked prompt includes an inline unblock action. -| Feature | Component / Method | File | -|:---|:---|:---| -| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) | -| Block confirmation | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) | -| Block events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Unblock events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | +_File: ChatView.tsx_ ---- +```tsx +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// In your JSX: +{!isBlocked ? ( + +) : ( +
+

Cannot send a message to a blocked user.

+ handleUnblock(user)} + role="button" + tabIndex={0} + style={{ color: "#3399ff", cursor: "pointer" }} + > + Click to unblock. + +
+)} +``` + +## Complete Example + +_File: ChatView.tsx_ + +```tsx +import { useState, useEffect } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, + CometChatConfirmDialog, + usePublishEvent, + useCometChatEvents, +} from "@cometchat/chat-uikit-react"; +import type { CometChatEvent } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +function ChatView({ targetUid }: { targetUid: string }) { + const [user, setUser] = useState(null); + const [isBlocked, setIsBlocked] = useState(false); + const [showBlockDialog, setShowBlockDialog] = useState(false); + const publish = usePublishEvent(); + + useEffect(() => { + async function fetchUser() { + try { + const fetchedUser = await CometChat.getUser(targetUid); + setUser(fetchedUser); + setIsBlocked(fetchedUser.getBlockedByMe()); + } catch (error) { + console.error("Error fetching user:", error); + } + } + fetchUser(); + }, [targetUid]); + + useCometChatEvents( + (event: CometChatEvent) => { + if (!user) return; + if (event.type === "ui:user/blocked" && event.user.getUid() === user.getUid()) { + setIsBlocked(true); + } + if (event.type === "ui:user/unblocked" && event.user.getUid() === user.getUid()) { + setIsBlocked(false); + } + }, + [user?.getUid()] + ); + + async function handleBlock() { + if (!user) return; + try { + await CometChat.blockUsers([user.getUid()]); + user.setBlockedByMe(true); + setIsBlocked(true); + setShowBlockDialog(false); + publish({ type: "ui:user/blocked", user }); + } catch (error) { + console.error("Error blocking user:", error); + } + } + + async function handleUnblock() { + if (!user) return; + try { + await CometChat.unblockUsers([user.getUid()]); + user.setBlockedByMe(false); + setIsBlocked(false); + publish({ type: "ui:user/unblocked", user }); + } catch (error) { + console.error("Error unblocking user:", error); + } + } + + if (!user) return
Loading...
; + + return ( +
+ {/* Confirmation dialog */} + {showBlockDialog && ( + setShowBlockDialog(false)}> + + + setShowBlockDialog(false)} + /> + + )} + + {/* Header with block/unblock action */} + setShowBlockDialog(true)} + style={{ background: "none", border: "none", cursor: "pointer", fontSize: "14px", color: isBlocked ? "#3399ff" : "#f44336" }} + > + {isBlocked ? "Unblock" : "Block"} + + } + /> + + {/* Message list */} +
+ +
+ + {/* Composer or blocked prompt */} + {!isBlocked ? ( + + ) : ( +
+

Cannot send a message to a blocked user.

+ + Click to unblock. + +
+ )} +
+ ); +} + +function App() { + return ( + + + + ); +} + +export default App; +``` ## Next Steps - - - Display and manage user lists. - - - Customize the message input component. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - \ No newline at end of file +- [Message Composer](/ui-kit/react/components/message-composer) — learn about composer customization +- [Conversations](/ui-kit/react/components/conversations) — build a full conversations list +- [CometChatProvider](/ui-kit/react/cometchat-provider) — configure the root provider diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx deleted file mode 100644 index 136921cac..000000000 --- a/ui-kit/react/guide-call-log-details.mdx +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: "Call Log Details" -sidebarTitle: "Call Log Details" -description: "Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` | -| Key components | `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed | -| Purpose | Detailed call insights screen with metadata, participants, and recordings | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | - - - -Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab. - -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework and install `@cometchat/calls-sdk-javascript`. - ---- - -## Components - -| Component / Class | Role | -|:---|:---| -| `CometChatCallDetails` | Main container for call details display | -| `CometChatCallDetailsInfo` | Shows call status, duration, and info | -| `CometChatCallDetailsParticipants` | Displays call participants | -| `CometChatCallDetailsRecording` | Shows call recordings if available | -| `CometChatCallDetailsHistory` | Displays call history | -| `CometChatCallLogs` | Calls list component in the calls tab | - ---- - -## Integration Steps - -### 1. Calls Tab Integration - -Render `CometChatCallLogs` when the "Calls" tab is active. When a call is clicked, dispatch it to the app state so the details panel can display it. - -_File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)_ - -```tsx lines -{activeTab === "calls" ? ( - { - onSelectorItemClicked(e, "updateSelectedItemCall"); - }} - /> -) : null} -``` - ---- - -### 2. Call Details Component - -Guard-check that the selected item is a `CometChat.Call` instance, then render `CometChatCallDetails`. The `onBack` callback clears the selection and returns to the call list. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const CallDetailsView = () => { - if (!selectedItem || !(selectedItem instanceof CometChat.Call)) return null; - - return ( - { - setSelectedItem(undefined); - setAppState({ type: "updateSelectedItemCall", payload: undefined }); - }} - /> - ); -} -``` - ---- - -### 3. Call Details Implementation - -The main details screen. It shows the caller's avatar and name at the top, call info (status, duration) below, and three tabs: Participants, Recording, and History. Tab selection switches the content panel. - -_File: [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)_ - -```tsx lines -export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () => void }) => { - const { selectedItem, onBack } = props; - const callDetailTabItems = [ - getLocalizedString("participants"), - getLocalizedString("recording"), - getLocalizedString("history") - ]; - const [activeTab, setActiveTab] = useState("Participants"); - const [user, setUser] = useState(); - const [subtitleText, setSubtitleText] = useState(); - - return ( -
-
-
- {getLocalizedString("call_details")} -
-
- -
- -
- {callDetailTabItems.map((tabItem) => ( -
setActiveTab(tabItem)} - className={activeTab === tabItem ? "cometchat-call-log-details__tabs-tab-item-active" : "cometchat-call-log-details__tabs-tab-item"} - > - {tabItem} -
- ))} -
- {activeTab === "Participants" ? - : activeTab === "Recording" ? - : activeTab === "History" ? - : null - } -
- ); -} -``` - ---- - -### 4. Call Information Display - -Renders the call status line (incoming/outgoing) based on who initiated the call. Compares the initiator's UID against the logged-in user to determine direction, then maps the SDK call status to a localized label. - -_File: [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)_ - -```tsx lines -export const CometChatCallDetailsInfo = (props: { call: any }) => { - const { call } = props; - const [loggedInUser, setLoggedInUser] = useState(null); - - const getCallStatus = (call: CometChat.Call, loggedInUser: CometChat.User): string => { - const isSentByMe = (call: any, loggedInUser: CometChat.User) => { - const senderUid: string = call.initiator?.getUid(); - return !senderUid || senderUid === loggedInUser?.getUid(); - } - const callStatus: string = call.getStatus(); - const isSentByMeFlag: boolean = isSentByMe(call, loggedInUser!); - - switch (callStatus) { - case CometChatUIKitConstants.calls.initiated: { - return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call'); - } - case CometChatUIKitConstants.calls.ended: { - return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call'); - } - } - } - - return ( -
- -
- ); -} -``` - ---- - -## Feature Matrix - -| Feature | Component / Method | File | -|:---|:---|:---| -| Calls tab integration | `CometChatCallLogs` | [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx) | -| Call details display | `CometChatCallDetails` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | -| Call information | `CometChatCallDetailsInfo` | [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx) | -| Call participants | `CometChatCallDetailsParticipants` | [CometChatCallLogParticipants.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogParticipants.tsx) | -| Call recordings | `CometChatCallDetailsRecording` | [CometChatCallLogRecordings.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogRecordings.tsx) | -| Call history | `CometChatCallDetailsHistory` | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx) | -| Tab navigation | `activeTab` state | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | -| User status monitoring | `CometChat.addUserListener()` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | - ---- - -## Next Steps - - - - The call logs component reference. - - - Overview of calling capabilities. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - \ No newline at end of file diff --git a/ui-kit/react/v7/guide-group-chat-setup.mdx b/ui-kit/react/guide-group-chat-setup.mdx similarity index 94% rename from ui-kit/react/v7/guide-group-chat-setup.mdx rename to ui-kit/react/guide-group-chat-setup.mdx index d4fa0d9b0..cc66a765c 100644 --- a/ui-kit/react/v7/guide-group-chat-setup.mdx +++ b/ui-kit/react/guide-group-chat-setup.mdx @@ -10,9 +10,9 @@ By the end of this guide you will have a working group chat interface where user ## Prerequisites -- Completed the [Integration Guide](/ui-kit/react/v7/integration-react) guide +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide - A running `CometChatProvider` setup with valid credentials -- Familiarity with the [Conversations](/ui-kit/react/v7/components/conversations) and [Message List](/ui-kit/react/v7/components/message-list) components +- Familiarity with the [Conversations](/ui-kit/react/components/conversations) and [Message List](/ui-kit/react/components/message-list) components ## Components Used @@ -362,7 +362,7 @@ export default App; ## Next Steps -- [Groups](/ui-kit/react/v7/components/groups) — browse and join existing groups -- [Group Members](/ui-kit/react/v7/components/group-members) — manage group membership -- [Message Header](/ui-kit/react/v7/components/message-header) — customize the group header -- [CometChatProvider](/ui-kit/react/v7/cometchat-provider) — configure the root provider +- [Groups](/ui-kit/react/components/groups) — browse and join existing groups +- [Group Members](/ui-kit/react/components/group-members) — manage group membership +- [Message Header](/ui-kit/react/components/message-header) — customize the group header +- [CometChatProvider](/ui-kit/react/cometchat-provider) — configure the root provider diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx deleted file mode 100644 index aa08c0532..000000000 --- a/ui-kit/react/guide-group-chat.mdx +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: "Group Chat" -sidebarTitle: "Group Chat" -description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Features | Create public/private/password-protected groups, manage members, roles, ownership transfer | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | - - - -This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership. - -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. - ---- - -## Components - -| Component / Class | Role | -|:---|:---| -| `CometChatCreateGroup` | Creates new groups with different types and settings | -| `CometChatJoinGroup` | Handles joining public and password-protected groups | -| `CometChatGroupMembers` | Displays and manages group member lists | -| `CometChatAddMembers` | Adds new members to existing groups | -| `CometChatBannedMembers` | Manages banned members and unban operations | -| `CometChatTransferOwnership` | Transfers group ownership to other members | - ---- - -## Integration Steps - -### 1. Create Group - -Build a form that collects a group name, type (public/private/password), and optional password. On submit, generate a unique GUID, call `CometChat.createGroup()`, and emit `ccGroupCreated` so the rest of the UI updates. - -_File: [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx)_ - -```tsx lines -export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => { - const [groupType, setGroupType] = useState("public"); - const [groupName, setGroupName] = useState(""); - const [groupPassword, setGroupPassword] = useState(""); - - async function handleSubmit(e: React.FormEvent) { - e.preventDefault(); - const GUID = `group_${new Date().getTime()}`; - const group = new CometChat.Group(GUID, groupName, groupType, groupPassword); - - try { - const createdGroup = await CometChat.createGroup(group); - CometChatGroupEvents.ccGroupCreated.next(createdGroup); - onGroupCreated(createdGroup); - setShowCreateGroup(false); - } catch (error) { - console.error("Group creation failed:", error); - } - } -}; -``` - ---- - -### 2. Join Group - -Handle joining for both public and password-protected groups. Call `CometChat.joinGroup()` with the group's GUID, type, and password (if applicable). On success, emit `ccGroupMemberJoined` to update the member list across the app. - -_File: [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx)_ - -```tsx lines -export const CometChatJoinGroup = ({ group, onProtectedGroupJoin }) => { - const [password, setPassword] = useState(""); - const [error, setError] = useState(false); - const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser(); - - const joinGroup = () => { - CometChat.joinGroup(group.getGuid(), group.getType(), password) - .then((res) => { - onProtectedGroupJoin(group); - CometChatGroupEvents.ccGroupMemberJoined.next({ - joinedGroup: res, - joinedUser: loggedInUser - }); - }) - .catch(() => setError(true)); - }; -}; -``` - ---- - -### 3. View Group Members - -Render the member list for a group using `CometChatGroupMembers`. Pass `onItemClick` to handle member selection and `options` to add context-menu actions like "View Profile". - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const GroupMembersView = ({ group }: { group: CometChat.Group }) => { - return ( -
- { - console.log("Selected member:", member); - }} - options={[ - { - id: "view_profile", - title: getLocalizedString("view_profile"), - iconURL: profileIcon, - onClick: (member) => viewMemberProfile(member) - } - ]} - /> -
- ); -}; -``` - - ---- - -### 4. Add Members - -Let admins select users and add them to the group. Collect selected UIDs, call `CometChat.addMembersToGroup()`, and emit `ccGroupMemberAdded` so the member list refreshes. - -_File: [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)_ - -```tsx lines -export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => { - const [selectedUsers, setSelectedUsers] = useState([]); - const [isLoading, setIsLoading] = useState(false); - - const addMembersToGroup = async () => { - if (selectedUsers.length === 0) return; - setIsLoading(true); - try { - const uids = selectedUsers.map(user => user.getUid()); - await CometChat.addMembersToGroup(uids, group.getGuid(), group.getType() as CometChat.GroupType); - CometChatGroupEvents.ccGroupMemberAdded.next({ - addedBy: CometChatUIKitLoginListener.getLoggedInUser()!, - addedMembers: selectedUsers, - addedIn: group - }); - onBack(); - } catch (error) { - console.error("Failed to add members:", error); - } finally { - setIsLoading(false); - } - }; -}; -``` - ---- - -### 5. Ban Members - -Fetch the list of banned members using `BannedMembersRequestBuilder`. This component displays banned users and provides unban functionality for group admins. - -_File: [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx)_ - -```tsx lines -export const CometChatBannedMembers = ({ group }: bannedMembersProp) => { - const [bannedMembers, setBannedMembers] = useState([]); - const [state, setState] = useState(States.loading); - - useEffect(() => { - const bannedMembersRequest = new CometChat.BannedMembersRequestBuilder(group.getGuid()) - .setLimit(30) - .build(); - - bannedMembersRequest.fetchNext().then( - bannedMembers => { - setBannedMembers(bannedMembers); - setState(States.loaded); - }, - error => { - console.log("Banned members fetch failed:", error); - setState(States.error); - } - ); - }, [group]); -}; -``` - - ---- - -### 6. Change Member Scope - -Promote or demote a member by calling `CometChat.updateGroupMemberScope()`. Pass the member's UID, the new scope (`admin`, `moderator`, or `participant`), and the group GUID. Emit `ccGroupMemberScopeChanged` so the UI reflects the role change. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const changeMemberScope = async (member: CometChat.GroupMember, newScope: string) => { - try { - await CometChat.updateGroupMemberScope(member.getUid(), newScope, group.getGuid()); - const updatedMember = { ...member, scope: newScope }; - CometChatGroupEvents.ccGroupMemberScopeChanged.next({ - changedBy: CometChatUIKitLoginListener.getLoggedInUser()!, - changedUser: updatedMember, - changedIn: group, - newScope: newScope, - oldScope: member.getScope() - }); - } catch (error) { - console.error("Failed to update member scope:", error); - } -}; -``` - ---- - -### 7. Transfer Ownership - -Let the current owner select a member and transfer ownership via `CometChat.transferGroupOwnership()`. The group object is cloned and updated locally, then `ccOwnershipChanged` is emitted to sync the UI. - -_File: [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx)_ - -```tsx lines -export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershipProps) => { - const [selectedMember, setSelectedMember] = useState(null); - const [isLoading, setIsLoading] = useState(false); - const [isError, setIsError] = useState(false); - - const transferOwnership = async () => { - if (!selectedMember) return; - setIsLoading(true); - setIsError(false); - try { - await CometChat.transferGroupOwnership(group.getGuid(), selectedMember.getUid()); - const groupClone = CometChatUIKitUtility.clone(group); - groupClone.setOwner(selectedMember.getUid()); - CometChatGroupEvents.ccOwnershipChanged.next({ - group: groupClone, - newOwner: CometChatUIKitUtility.clone(selectedMember) - }); - onClose(); - } catch (error) { - setIsError(true); - console.error("Ownership transfer failed:", error); - } finally { - setIsLoading(false); - } - }; -}; -``` - ---- - -## Feature Matrix - -| Feature | Component / Method | File | -|:---|:---|:---| -| Create group | `CometChatCreateGroup` | [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx) | -| Join group | `CometChatJoinGroup` | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx) | -| View members | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Add members | `CometChatAddMembers` | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx) | -| Ban members | `CometChatBannedMembers` | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx) | -| Change scope | `updateGroupMemberScope()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) | -| Group events | `CometChatGroupEvents` | Multiple files | - ---- - -## Next Steps - - - - Display and manage group lists. - - - Display and manage group member lists. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - \ No newline at end of file diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index 8095db11e..b65dcb3e9 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -1,189 +1,276 @@ --- title: "Message Privately" sidebarTitle: "Message Privately" -description: "Start private one-to-one chats from CometChat React UI Kit group conversations with message options, user lookup, and navigation." +description: "Let users send a private one-on-one message to another user directly from within a group chat conversation." --- - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Purpose | Launch a direct 1:1 chat from a group member profile | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +## Goal + +By the end of this guide you will have a group chat interface where users can select a group member and open a private one-on-one conversation with them — without leaving the current screen. This is useful for side conversations, follow-ups, or sensitive messages that shouldn't be shared with the entire group. + +## Prerequisites + +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide +- A running `CometChatProvider` setup with valid credentials +- An existing group chat screen using `CometChatMessageList` and `CometChatMessageComposer` + +## Components Used + +| Component / API | Purpose | +|:----------------|:--------| +| `CometChatMessageList` | Displays group messages (publishes `ui:open-chat` internally via "Message Privately" option) | +| `CometChatMessageComposer` | Text input for the private conversation | +| `CometChatMessageHeader` | Displays user/group info | +| `useCometChatEvents` | Subscribe to `ui:open-chat` event | +| `ui:open-chat` | UI event published when user clicks "Message Privately" | + +## Step 1: Set up the main layout with provider + +Start with a layout that includes a conversations sidebar and a main chat area wrapped in `CometChatProvider`. + +```tsx App.tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +function App() { + return ( + + + + ); +} - +export default App; +``` -Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat. +## Step 2: Track group and private chat state -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Maintain state for the active group conversation and a separate state for the private user when a user initiates a private message. ---- +```tsx ChatWithPrivateMessaging.tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; -## Components +function ChatWithPrivateMessaging() { + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [privateUser, setPrivateUser] = useState(null); -| Component / Class | Role | -|:---|:---| -| `CometChatGroupMembers` | Displays group members with click handlers for private messaging | -| `CometChatMessageComposer` | Input component for composing private messages | -| `CometChatMessageList` | Displays private conversation messages | -| `CometChatMessageHeader` | Header showing private chat information | + // ... continued in next steps +} +``` ---- +## Step 3: Handle conversation selection -## Integration Steps +Connect `CometChatConversations` to switch between user and group chats. When switching conversations, close any open private message panel. -### 1. Group Member Click Handler +```tsx +function handleConversationClick(conversation: CometChat.Conversation) { + setPrivateUser(null); // close private panel on conversation switch -When a group member is clicked, cast them to a `User` object and initiate a private chat. The current group is saved so the user can return to it later. `CometChat.getConversation()` fetches or creates the 1:1 conversation. + const entity = conversation.getConversationWith(); + if (entity instanceof CometChat.User) { + setUser(entity); + setGroup(null); + } else if (entity instanceof CometChat.Group) { + setGroup(entity); + setUser(null); + } +} +``` -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +## Step 4: Initiate a private message from a group member -```tsx lines -const handleGroupMemberClick = (groupMember: CometChat.GroupMember) => { - const user = groupMember as CometChat.User; - startPrivateChatFromGroup(user, currentGroup); -} +Use the message header or a custom action to let users pick a group member for private messaging. You can fetch the user from a member click event or from the message sender's info. -const startPrivateChatFromGroup = (user: CometChat.User, group: CometChat.Group) => { - setAppState({ type: "updatePreviousGroup", payload: group }); - - CometChat.getConversation(user.getUid(), CometChatUIKitConstants.MessageReceiverType.user) - .then((conversation) => { - setSelectedItem(conversation); - setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } }); - setShowPrivateChat(true); - }) - .catch((error) => { - console.error("Failed to start private chat:", error); - }); +```tsx +async function handleMessagePrivately(uid: string) { + try { + const targetUser = await CometChat.getUser(uid); + setPrivateUser(targetUser); + } catch (error) { + console.error("Failed to fetch user for private messaging:", error); + } } ``` ---- +## Step 5: Listen for the `ui:open-chat` event -### 2. Group Members with Private Messaging Option - -Add a "Message Privately" option to the group members list. The `options` prop adds a context-menu action that triggers the private chat flow when clicked. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const GroupMembersWithPrivateMessaging = ({ group }: { group: CometChat.Group }) => { - return ( - { - handleGroupMemberClick(member); - } - } - ]} - selectionMode={SelectionMode.none} - /> - ); -} -``` +Use `useCometChatEvents` to subscribe to the `ui:open-chat` event, which is published internally when a user clicks "Message Privately" from the context menu. When the event fires, extract the user and open the private panel. ---- +```tsx +import { useCometChatEvents } from "@cometchat/chat-uikit-react"; +import type { CometChatEvent } from "@cometchat/chat-uikit-react"; -### 3. Private Chat Interface - -Render a full chat view (header, message list, composer) for the 1:1 conversation. The header includes a back button that returns the user to the original group, and a subtitle showing which group the private chat was initiated from. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const PrivateChatFromGroupView = ({ user, previousGroup }: { - user: CometChat.User, - previousGroup: CometChat.Group -}) => { - const returnToGroup = () => { - setShowPrivateChat(false); - CometChat.getConversation(previousGroup.getGuid(), CometChatUIKitConstants.MessageReceiverType.group) - .then((conversation) => { - setSelectedItem(conversation); - }); - }; - - return ( -
- - {}} /> - -
- ); -} +useCometChatEvents( + (event: CometChatEvent) => { + if (event.type === "ui:open-chat" && event.user) { + setPrivateUser(event.user); + } + }, + [group?.getGuid()] +); ``` ---- - -### 4. State Management +## Step 6: Render the private message panel -Add reducer cases to track the group the user came from, whether the private chat is visible, and which user is being messaged. This lets the app restore the group context when the user navigates back. +When `privateUser` is set, show a side panel with a private one-on-one chat. This panel includes a header, message list, and composer scoped to the private user. -_File: [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)_ +```tsx +{privateUser && ( +
+
+ + Private: {privateUser.getName()} + + +
-```tsx lines -interface AppState { - previousGroup?: CometChat.Group; - showPrivateChat?: boolean; - privateChatUser?: CometChat.User; -} +
+ +
-case "updatePreviousGroup": { - return { ...state, ["previousGroup"]: action.payload }; -} -case "updateShowPrivateChat": { - return { ...state, ["showPrivateChat"]: action.payload }; -} -case "updatePrivateChatUser": { - return { ...state, ["privateChatUser"]: action.payload }; -} + +
+)} ``` ---- - -## Feature Matrix +## Step 7: Handle edge cases + +Consider these scenarios when implementing private messaging from a group: + +| Scenario | Behavior | +|:---------|:---------| +| User messages themselves | Disable the private message option for the logged-in user's own messages | +| User is blocked | Check `getBlockedByMe()` before opening the private panel and show a prompt | +| Private panel already open | Replace the current private user with the newly selected one | +| Group conversation changes | Close the private panel when switching to a different conversation | + +## Complete Example + +```tsx App.tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, + useCometChatEvents, +} from "@cometchat/chat-uikit-react"; +import type { CometChatEvent } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +function ChatWithPrivateMessaging() { + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [privateUser, setPrivateUser] = useState(null); + + function handleConversationClick(conversation: CometChat.Conversation) { + setPrivateUser(null); + const entity = conversation.getConversationWith(); + if (entity instanceof CometChat.User) { + setUser(entity); + setGroup(null); + } else if (entity instanceof CometChat.Group) { + setGroup(entity); + setUser(null); + } + } + + async function handleMessagePrivately(uid: string) { + try { + const targetUser = await CometChat.getUser(uid); + setPrivateUser(targetUser); + } catch (error) { + console.error("Failed to fetch user for private messaging:", error); + } + } + + useCometChatEvents( + (event: CometChatEvent) => { + if (event.type === "ui:open-chat" && event.user) { + setPrivateUser(event.user); + } + }, + [group?.getGuid()] + ); + + return ( +
+ {/* Conversations sidebar */} +
+ +
+ + {/* Main chat panel */} +
+ {(user || group) && ( + <> + +
+ +
+ + + )} +
+ + {/* Private message panel */} + {privateUser && ( +
+
+ + Private: {privateUser.getName()} + + +
+ +
+ +
+ + +
+ )} +
+ ); +} -| Feature | Component / Method | File | -|:---|:---|:---| -| Group member selection | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Private chat initiation | `startPrivateChatFromGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Private chat interface | `PrivateChatFromGroupView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Context preservation | `updatePreviousGroup` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) | -| Return to group | `returnToGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Member options | `options` in CometChatGroupMembers | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| State management | `updateShowPrivateChat` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) | +function App() { + return ( + + + + ); +} ---- +export default App; +``` ## Next Steps - - - Display and manage group member lists. - - - Render real-time message threads. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - +- [Message Composer](/ui-kit/react/components/message-composer) — customize the composer for private chats +- [Conversations](/ui-kit/react/components/conversations) — manage the conversations list +- [Users](/ui-kit/react/components/cometchat-users) — browse and select users directly +- [CometChatProvider](/ui-kit/react/cometchat-provider) — learn about provider configuration diff --git a/ui-kit/react/v7/guide-new-chat-creation.mdx b/ui-kit/react/guide-new-chat-creation.mdx similarity index 95% rename from ui-kit/react/v7/guide-new-chat-creation.mdx rename to ui-kit/react/guide-new-chat-creation.mdx index 2e1975d30..d58454a83 100644 --- a/ui-kit/react/v7/guide-new-chat-creation.mdx +++ b/ui-kit/react/guide-new-chat-creation.mdx @@ -10,9 +10,9 @@ By the end of this guide you will have a chat interface where users can initiate ## Prerequisites -- Completed the [Integration Guide](/ui-kit/react/v7/integration-react) guide +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide - A running `CometChatProvider` setup with valid credentials -- Familiarity with [CometChatUsers](/ui-kit/react/v7/components/users) and [CometChatGroups](/ui-kit/react/v7/components/groups) components +- Familiarity with [CometChatUsers](/ui-kit/react/components/users) and [CometChatGroups](/ui-kit/react/components/groups) components ## Components Used @@ -423,7 +423,7 @@ export default App; ## Next Steps -- [CometChatUsers](/ui-kit/react/v7/components/users) — customize the user list appearance and filtering -- [CometChatGroups](/ui-kit/react/v7/components/groups) — browse and manage groups -- [Conversations](/ui-kit/react/v7/components/conversations) — display existing conversations -- [Group Chat Setup](/ui-kit/react/v7/guide-group-chat-setup) — create and configure group conversations +- [CometChatUsers](/ui-kit/react/components/users) — customize the user list appearance and filtering +- [CometChatGroups](/ui-kit/react/components/groups) — browse and manage groups +- [Conversations](/ui-kit/react/components/conversations) — display existing conversations +- [Group Chat Setup](/ui-kit/react/guide-group-chat-setup) — create and configure group conversations diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx deleted file mode 100644 index 40beee2ac..000000000 --- a/ui-kit/react/guide-new-chat.mdx +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: "New Chat" -sidebarTitle: "New Chat" -description: "Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Purpose | Unified new chat entry point for starting 1:1 or group conversations | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | - - - -The New Chat feature lets users start conversations with other users or join group conversations from a single interface. - -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. - ---- - -## Components - -| Component / Class | Role | -|:---|:---| -| `CometChatNewChatView` | Main container for new chat creation interface | -| `CometChatUsers` | Displays list of available users for chat creation | -| `CometChatGroups` | Shows available groups for joining | -| `CometChatJoinGroup` | Handles protected group joining process | -| `CometChatSelector` | Navigation component with new chat button | - ---- - -## Integration Steps - -### 1. New Chat State Management - -Track whether the new chat view is visible and which user/group was selected. When the "New Chat" button is clicked, show the view and hide any open side panels. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const [showNewChat, setShowNewChat] = useState(false); -const [newChat, setNewChat] = useState<{ - user?: CometChat.User, - group?: CometChat.Group -} | undefined>(); - -const onNewChatClicked = () => { - setShowNewChat(true); - setAppState({ type: "updateSideComponent", payload: { type: "", visible: false } }); -} -``` - ---- - -### 2. Conditional Rendering - -Switch between the new chat view, the messages view, or an empty state depending on the current app state. `useCallback` prevents unnecessary re-renders. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const InformationComponent = useCallback(() => { - return ( - <> - {showNewChat ? - : - (selectedItem || newChat?.user || newChat?.group) ? () - : - () - } - - ) -}, [activeTab, showNewChat, selectedItem, newChat, appState.goToMessageId]); -``` - ---- - -### 3. New Chat View - -The main new chat interface with a header, back button, and tabbed navigation between Users and Groups. Selecting a tab switches the list below. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const CometChatNewChatView: React.FC = () => { - const [selectedTab, setSelectedTab] = useState('user'); - const [group, setGroup] = useState(); - const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser(); - - const handleTabClick = (tab: string) => { - setSelectedTab(tab); - }; - - return ( -
-
- { - setShowNewChat(false); - }} /> -
New Chat
-
- -
-
handleTabClick('user')}> {getLocalizedString("user_title")}
-
handleTabClick('group')}> {getLocalizedString("group_title")}
-
- -
- -
-
- ); -}; -``` - ---- - -### 4. User Selection and Chat Creation - -The tab content renders either `CometChatUsers` or `CometChatGroups`. Clicking a user creates a 1:1 chat and closes the new chat view. Clicking a group triggers the join flow. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const TabContent: React.FC = ({ selectedTab }) => { - return selectedTab === 'user' ? { - setNewChat({ user, group: undefined }); - setAppState({ type: "updateSideComponent", payload: { visible: false, type: "" } }); - setShowNewChat(false); - setAppState({ type: "updateSelectedItemUser", payload: user }); - setAppState({ type: "updateSelectedItemGroup", payload: undefined }); - }} - /> - : { - setAppState({ type: "updateSelectedItemUser", payload: undefined }); - setAppState({ type: "updateSelectedItemGroup", payload: e }); - joinGroup(e) - }} />; -}; -``` - ---- - -### 5. Group Joining Logic - -Handle the join flow based on group type. Public groups are joined directly via `CometChat.joinGroup()`. Password-protected groups show a password prompt first. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const joinGroup = (e) => { - if (!e.getHasJoined()) { - if (e.getType() === CometChatUIKitConstants.GroupTypes.public) { - CometChat.joinGroup(...) - .then((response) => { setNewChat({ group: response }); }) - .catch((error) => { console.log(error); }); - } else { - setGroup(e); - showJoinGroupRef.current = true; - } - } -} -``` - ---- - -## Feature Matrix - -| Feature | Component / Method | File | -|:---|:---|:---| -| Open new chat view | `onNewChatClicked()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| New chat interface | `CometChatNewChatView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| User selection | `CometChatUsers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Group selection | `CometChatGroups` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Group joining | `joinGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| State management | `showNewChat` state | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) | -| Chat creation | `setNewChat()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | - ---- - -## Next Steps - - - - Display and manage conversation lists. - - - Display and manage group lists. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx deleted file mode 100644 index 765f2e2f0..000000000 --- a/ui-kit/react/guide-overview.mdx +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: "Overview" -sidebarTitle: "Overview" -description: "Browse React UI Kit feature guides for blocking users, call details, group chat, private messages, search, and threaded conversations." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Purpose | Index of task-oriented feature guides for the React UI Kit | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Components | [Components Overview](/ui-kit/react/components-overview) | -| Guides | [Block/Unblock](/ui-kit/react/guide-block-unblock-user) · [Call Log Details](/ui-kit/react/guide-call-log-details) · [Group Chat](/ui-kit/react/guide-group-chat) · [Message Privately](/ui-kit/react/guide-message-privately) · [New Chat](/ui-kit/react/guide-new-chat) · [Search Messages](/ui-kit/react/guide-search-messages) · [Threaded Messages](/ui-kit/react/guide-threaded-messages) | - - - -> This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components. - -## When to Use These Guides - -Use these guides after completing the base [Getting Started](/ui-kit/react/react-js-integration) (or framework variant: [Next.js](/ui-kit/react/next-js-integration), [React Router](/ui-kit/react/react-router-integration)). They help you layer additional UX without rewriting core chat flows. - -## Guide Directory - -| Guide | Description | -|:------|:------------| -| [Block / Unblock User](/ui-kit/react/guide-block-unblock-user) | Let users block or unblock others in 1:1 chats; hides composer and shows an unblock prompt while preventing message exchange. | -| [Call Log Details](/ui-kit/react/guide-call-log-details) | Detailed call insights screen: metadata, participants, join/leave history, and recordings. | -| [Group Management](/ui-kit/react/guide-group-chat) | Create/join groups, view members, add / ban users, change roles/scopes, transfer ownership. | -| [Message Privately](/ui-kit/react/guide-message-privately) | Launch a direct 1:1 chat from a user profile or list; optionally send a first message to surface conversation. | -| [New Chat](/ui-kit/react/guide-new-chat) | Unified entry for starting new 1:1 or group chats with user & group discovery. | -| [Threaded Messages](/ui-kit/react/guide-threaded-messages) | Threaded replies: open parent context, list replies, compose within focused thread. | -| [Search Messages](/ui-kit/react/guide-search-messages) | Add full‑text message search across conversations with result routing into context. | -| [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | Extend the base formatter to implement custom inline patterns (hashtags, keywords) with regex + callbacks. | -| [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) | Add @mentions with styled tokens, suggestion list, and click handling for users & members. | -| [URL Formatter](/ui-kit/react/url-formatter-guide) | Detect and style plain URLs; render them as clickable links with optional tracking logic. | -| [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide) | Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content. | - -Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new). - ---- - -## Next Steps - - - - Set up the React UI Kit - - - Explore all UI components - - - Customize themes and styling - - - Handle UI Kit events - - diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index e510ead5c..03530a62a 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -1,132 +1,254 @@ --- title: "Search Messages" sidebarTitle: "Search Messages" -description: "Add CometChat React UI Kit message search with query input, scoped results, message selection, and navigation to matching chats." +description: "Add message search to your chat so users can find specific messages within a conversation." --- - +## Goal -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Purpose | Full-text message search across conversations with result routing and navigation | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +By the end of this guide you will have a chat interface with a search panel that lets users query messages in a conversation by keyword, displays matching results, and scrolls to a selected message — all using v7 compound components and the CometChat SDK's `MessagesRequestBuilder`. - +## Prerequisites -Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result. +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide +- A running `CometChatProvider` setup with valid credentials +- An existing chat screen using `CometChatMessageList` and `CometChatMessageHeader` -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +## Components Used ---- - -## Components - -| Component / Class | Role | -|:---|:---| -| `CometChatSearchMessages` | Main container for searching messages | -| `CometChatMessageList` | Displays filtered messages based on search results | -| `CometChatMessageComposer` | Supports navigation after selecting a search result | -| `CometChatMessageHeader` | Displays search context and navigation controls | - ---- +| Component / API | Purpose | +|:----------------|:--------| +| `CometChatSearch` or `CometChat.MessagesRequestBuilder` | SDK builder for querying messages by keyword | +| `CometChatMessageList` | Displays messages and supports `goToMessageId` for scrolling to a result | +| `CometChatMessageHeader` | Header with search trigger button | +| `CometChatConversations` | Sidebar for switching conversations | -## Integration Steps +## Step 1: Set up the chat layout with search state -### 1. Search State Management +Start with a full chat layout that includes a conversations sidebar, message panel, and state to control the search panel visibility and the message to jump to. -Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result. +_File: App.tsx_ -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +```tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; +import MessageSearchPanel from "./MessageSearchPanel"; -```tsx lines -const [searchKeyword, setSearchKeyword] = useState(""); -const [goToMessageId, setGoToMessageId] = useState(undefined); +function ChatWithSearch() { + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [showSearch, setShowSearch] = useState(false); + const [goToMessageId, setGoToMessageId] = useState(undefined); -const onSearch = (keyword: string) => { - setSearchKeyword(keyword); + function handleConversationClick(conversation: CometChat.Conversation) { + setShowSearch(false); setGoToMessageId(undefined); -}; + const entity = conversation.getConversationWith(); + if (entity instanceof CometChat.User) { + setUser(entity); + setGroup(null); + } else if (entity instanceof CometChat.Group) { + setGroup(entity); + setUser(null); + } + } + + function handleMessageSelect(message: CometChat.BaseMessage) { + setGoToMessageId(message.getId()); + setShowSearch(false); + } + + return ( +
+ {/* Conversations sidebar */} +
+ +
+ + {/* Main message panel */} +
+ {(user || group) && ( + <> + setShowSearch((prev) => !prev)} + aria-label="Search messages" + style={{ background: "none", border: "none", cursor: "pointer", fontSize: "18px" }} + > + 🔍 + + } + /> +
+ +
+ + + )} +
+ + {/* Search panel */} + {showSearch && (user || group) && ( + setShowSearch(false)} + /> + )} +
+ ); +} + +function App() { + return ( + + + + ); +} + +export default App; ``` ---- - -### 2. Search Input - -Render the search component and wire its `onSearch` callback to update the keyword state. The placeholder text is localized. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines - onSearch(keyword)} - placeholder={getLocalizedString("search_messages_placeholder")} -/> +## Step 2: Create the search panel component + +Build a `MessageSearchPanel` component that accepts a `user` or `group`, takes a search keyword, queries messages using `MessagesRequestBuilder`, and displays the results. + +_File: MessageSearchPanel.tsx_ + +```tsx +import { useState, useCallback } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +interface MessageSearchPanelProps { + user?: CometChat.User; + group?: CometChat.Group; + onMessageSelect: (message: CometChat.BaseMessage) => void; + onClose: () => void; +} + +function MessageSearchPanel({ user, group, onMessageSelect, onClose }: MessageSearchPanelProps) { + const [keyword, setKeyword] = useState(""); + const [results, setResults] = useState([]); + const [loading, setLoading] = useState(false); + + const handleSearch = useCallback(async () => { + if (!keyword.trim()) return; + + setLoading(true); + try { + const builder = new CometChat.MessagesRequestBuilder() + .setSearchKeyword(keyword) + .setLimit(50); + + if (user) { + builder.setUID(user.getUid()); + } else if (group) { + builder.setGUID(group.getGuid()); + } + + const request = builder.build(); + const messages = await request.fetchPrevious(); + setResults(messages); + } catch (error) { + console.error("Search failed:", error); + } finally { + setLoading(false); + } + }, [keyword, user, group]); + + return ( +
+ {/* Header */} +
+

Search Messages

+ +
+ + {/* Search input */} +
+ setKeyword(e.target.value)} + onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }} + style={{ width: "100%", padding: "8px 12px", borderRadius: "8px", border: "1px solid #e0e0e0" }} + aria-label="Search keyword" + /> +
+ + {/* Results */} +
+ {loading &&

Searching...

} + {!loading && results.length === 0 && keyword &&

No messages found.

} + {results.map((message) => ( + + ))} +
+
+ ); +} + +export default MessageSearchPanel; ``` ---- +## Step 3: Navigate to a selected search result + +When the user clicks a search result, pass the message ID to `CometChatMessageList` via the `goToMessageId` prop. This scrolls the message list to the matching message and highlights it. -### 3. Search Result Integration +_File: ChatWithSearch.tsx_ -Pass `searchKeyword` and `goToMessageId` to `CometChatMessageList`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message. +```tsx +const [goToMessageId, setGoToMessageId] = useState(undefined); -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +function handleMessageSelect(message: CometChat.BaseMessage) { + setGoToMessageId(message.getId()); + setShowSearch(false); +} -```tsx lines ``` ---- - -### 4. Navigate to Search Result - -When a user taps a search result, set `goToMessageId` to that message's ID. The message list will scroll to and highlight the target message. - -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ - -```tsx lines -const handleResultClick = (messageId: number) => { - setGoToMessageId(messageId); -}; -``` - -Attach `handleResultClick` to your message search result selection logic. - ---- - -## Feature Matrix - -| Feature | Component / Method | File | -|:---|:---|:---| -| Search input | `CometChatSearchMessages` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Display results | `CometChatMessageList` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Keyword highlighting | `searchKeyword` prop | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Navigate to result | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| State management | `onSearch` handler | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | - ---- - ## Next Steps - - - The search component reference. - - - Render real-time message threads. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - +- [Message List](/ui-kit/react/components/message-list) — configure message list rendering and scroll behavior +- [Message Header](/ui-kit/react/components/message-header) — customize header actions and auxiliary views +- [CometChatProvider](/ui-kit/react/cometchat-provider) — learn about provider configuration +- [Threaded Messages](/ui-kit/react/guide-threaded-messages) — add threaded replies to your chat diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index da08eeb2e..ead1d71ea 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -1,189 +1,219 @@ --- title: "Threaded Messages" sidebarTitle: "Threaded Messages" -description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit." +description: "Add threaded message replies to your chat so users can create focused sub-conversations on any message." --- - +## Goal -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key components | `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Entry point | `CometChatMessages.onThreadRepliesClick` opens thread view from group messages | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +By the end of this guide you will have a chat interface where users can open a thread panel from any message, view the parent message with its reply count, browse threaded replies, and send new replies — all using v7 compound components and a state-based approach (no custom events needed). - +## Prerequisites -Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused. +- Completed the [Integration Guide](/ui-kit/react/integration-react) guide +- A running `CometChatProvider` setup with valid credentials +- An existing chat screen using `CometChatMessageList` and `CometChatMessageComposer` -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +## Components Used ---- - -## Components - -| Component / Class | Role | -|:---|:---| -| `CometChatThreadedMessages` | Main container for threaded messages | -| `CometChatThreadHeader` | Displays parent message and controls | -| `CometChatMessageList` | Shows messages filtered by `parentMessageId` | -| `CometChatMessageComposer` | Input for composing threaded replies | -| `CometChatMessages.onThreadRepliesClick` | Opens thread view from group messages | +| Component | Purpose | +|:----------|:--------| +| `CometChatThreadHeader` | Displays the parent message and reply count at the top of the thread panel | +| `CometChatMessageList` | Renders threaded replies when given a `parentMessageId` | +| `CometChatMessageComposer` | Sends replies into the thread with `parentMessageId`, `layout="compact"`, and `enableRichTextEditor` | ---- - -## Integration Steps +## Step 1: Thread State Management -### 1. Thread State Management +Store the `threadedMessage` in state. When set, the thread panel renders. When cleared, it closes. This mirrors the pattern used in the sample app's `CometChatThreadPanel` component. -Store the parent message that the user clicked "Reply in Thread" on. When set, update the app state to show the threaded messages side panel. +_File: ChatWithThreads.tsx_ -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +```tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; -```tsx lines -const [threadedMessage, setThreadedMsg] = useState(); +function ChatWithThreads() { + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [threadedMessage, setThreadedMessage] = useState(null); -const updateThreadedMessage = (message: CometChat.BaseMessage) => { - setThreadedMsg(message); - setAppState({ type: "updateSideComponent", payload: { visible: true, type: "threadedMessage" } }); - setAppState({ type: "updateThreadedMessage", payload: message }); -}; + // Thread opens when threadedMessage is set, closes when cleared +} ``` ---- +## Step 2: Wire the Thread Trigger -### 2. Thread Trigger in Group Messages +Use the `onThreadRepliesClick` callback on `CometChatMessageList` to capture when a user clicks "Reply in Thread." This sets the threaded message and opens the panel — no events required. -Wire the `onThreadRepliesClick` callback on `CometChatMessages`. When a user clicks the thread reply icon on any message, this fires with the parent message object. +_File: ChatWithThreads.tsx_ -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +```tsx +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -```tsx lines - updateThreadedMessage(message)} + setThreadedMessage(message)} /> ``` ---- +## Step 3: Build the Thread Panel -### 3. Threaded Messages Component +When `threadedMessage` is set, render a side panel composing `CometChatThreadHeader` + `CometChatMessageList` (with `parentMessageId`) + `CometChatMessageComposer` (with `parentMessageId`, `layout="compact"`, and `enableRichTextEditor`). The `onClose` callback clears the state to dismiss the panel. -Render the thread panel with the parent message, reply list, and composer. `goToMessageId` and `searchKeyword` support in-thread search navigation. +_File: ChatWithThreads.tsx_ -_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_ +```tsx +import { + CometChatThreadHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; -```tsx lines - -``` - ---- - -### 4. App State Management - -Add reducer cases to store the threaded message and control the side panel visibility. These are dispatched by `updateThreadedMessage` in step 1. +{threadedMessage && ( +
+ setThreadedMessage(null)} + onParentDeleted={() => setThreadedMessage(null)} + /> -_File: [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)_ +
+ +
-```tsx lines -case "updateThreadedMessage": { - return { ...state, ["threadedMessage"]: action.payload }; -} -case "updateSideComponent": { - return { - ...state, - ["sideComponent"]: action.payload, - ["sideComponentTop"]: action.payload?.type || "" - }; -} + +
+)} ``` ---- - -## Implementation Flow +## Step 4: Handle Parent Deleted -Fetch the parent message, load replies, send new replies, and handle live updates: - -```tsx lines -const parentMessage = message; -const group = selectedItem as CometChat.Group; -``` +Use the `onParentDeleted` prop on `CometChatThreadHeader` to automatically close the thread panel when the parent message is deleted by another user or a moderation action. -```tsx lines - -``` +_File: ChatWithThreads.tsx_ -```tsx lines - setThreadedMessage(null)} + onParentDeleted={() => setThreadedMessage(null)} /> ``` -When the composer is blocked (e.g. permissions), show a fallback: - -```tsx lines -{showComposer ? ( - -) : ( -
-
- {getLocalizedString("cannot_send_to_group")} - {getLocalizedString("check_permissions")} +## Complete Example + +_File: App.tsx_ + +```tsx +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, + CometChatThreadHeader, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; + +function ChatWithThreads() { + const [user, setUser] = useState(null); + const [group, setGroup] = useState(null); + const [threadedMessage, setThreadedMessage] = useState(null); + + function handleConversationClick(conversation: CometChat.Conversation) { + setThreadedMessage(null); + const entity = conversation.getConversationWith(); + if (entity instanceof CometChat.User) { + setUser(entity); + setGroup(null); + } else if (entity instanceof CometChat.Group) { + setGroup(entity); + setUser(null); + } + } + + return ( +
+ {/* Conversations sidebar */} +
+ +
+ + {/* Main message panel */} +
+ {(user || group) && ( + <> + +
+ setThreadedMessage(message)} + /> +
+ + + )} +
+ + {/* Thread panel */} + {threadedMessage && ( +
+ setThreadedMessage(null)} + onParentDeleted={() => setThreadedMessage(null)} + /> +
+ +
+
+ )}
-)} -``` - ---- - -## Feature Matrix + ); +} -| Feature | Component / Method | File | -|:---|:---|:---| -| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) | -| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) | -| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) | -| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) | -| Search in threads | `TextHighlightFormatter` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) | -| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) | -| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) | +function App() { + return ( + + + + ); +} ---- +export default App; +``` ## Next Steps - - - Render real-time message threads. - - - Customize the thread header component. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - +- [Thread Header](/ui-kit/react/components/thread-header) — customize the thread header appearance +- [Message List](/ui-kit/react/components/message-list) — configure message list rendering and options +- [CometChatProvider](/ui-kit/react/cometchat-provider) — learn about provider configuration diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx deleted file mode 100644 index d8b7d3237..000000000 --- a/ui-kit/react/incoming-call.mdx +++ /dev/null @@ -1,492 +0,0 @@ ---- -title: "Incoming Call" -description: "Handle incoming CometChat React UI Kit voice and video calls with caller details, accept, reject, custom sounds, and view slots." ---- - -```json -{ - "component": "CometChatIncomingCall", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Visual notification for incoming voice/video calls with accept and decline controls.", - "cssRootClass": ".cometchat-incoming-call", - "props": { - "data": { - "call": { "type": "any", "default": "auto-detected" }, - "callSettingsBuilder": { "type": "(call: CometChat.Call) => CallSettingsBuilder", "default": "undefined" } - }, - "callbacks": { - "onAccept": "(call: CometChat.Call) => void", - "onDecline": "(call: CometChat.Call) => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "sound": { - "disableSoundForCalls": { "type": "boolean", "default": false }, - "customSoundForCalls": { "type": "string", "default": "undefined" } - }, - "viewSlots": { - "itemView": "(call: CometChat.Call) => JSX.Element", - "leadingView": "(call: CometChat.Call) => JSX.Element", - "titleView": "(call: CometChat.Call) => JSX.Element", - "subtitleView": "(call: CometChat.Call) => JSX.Element", - "trailingView": "(call: CometChat.Call) => JSX.Element" - } - }, - "events": [ - { "name": "CometChatCallEvents.ccCallRejected", "payload": "CometChat.Call" }, - { "name": "CometChatCallEvents.ccCallAccepted", "payload": "CometChat.Call" }, - { "name": "CometChatCallEvents.ccCallEnded", "payload": "CometChat.Call" } - ] -} -``` - - -## Where It Fits - -`CometChatIncomingCall` is an overlay component that auto-detects incoming calls and renders a notification with accept/decline buttons. Place it at the app root level so it appears above all other content. - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function App() { - return ( -
- - {/* rest of app */} -
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function IncomingCallDemo() { - return ; -} - -export default IncomingCallDemo; -``` - -Root CSS class: `.cometchat-incoming-call` - ---- - -## Actions and Events - -### Callback Props - -#### onAccept - -Fires when the accept button is clicked. - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function IncomingCallWithAccept() { - return ( - { - console.log("Call accepted:", call); - }} - /> - ); -} -``` - -#### onDecline - -Fires when the decline button is clicked. - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function IncomingCallWithDecline() { - return ( - { - console.log("Call declined:", call); - }} - /> - ); -} -``` - -#### onError - -Fires on internal errors. - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function IncomingCallWithError() { - return ( - { - console.error("IncomingCall error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatCallEvents` emits events subscribable from anywhere in the application. - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccCallRejected` | Incoming call is rejected | `CometChat.Call` | -| `ccCallAccepted` | Incoming call is accepted | `CometChat.Call` | -| `ccCallEnded` | Call ends | `CometChat.Call` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatCallEvents } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function useCallEvents() { - useEffect(() => { - const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe( - (call: CometChat.Call) => console.log("Accepted:", call) - ); - const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe( - (call: CometChat.Call) => console.log("Rejected:", call) - ); - - return () => { - acceptedSub?.unsubscribe(); - rejectedSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to SDK call events internally for real-time incoming call detection. No manual attachment needed. - ---- - -## Custom View Slots - -View slots for `CometChatIncomingCall` are functions that receive the `CometChat.Call` object. - -| Slot | Signature | Replaces | -| --- | --- | --- | -| `itemView` | `(call: CometChat.Call) => JSX.Element` | Entire list item | -| `leadingView` | `(call: CometChat.Call) => JSX.Element` | Avatar / left section | -| `titleView` | `(call: CometChat.Call) => JSX.Element` | Name / title text | -| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Subtitle text | -| `trailingView` | `(call: CometChat.Call) => JSX.Element` | Right section | - -### leadingView - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -function CustomLeadingIncoming() { - return ( - ( - - )} - /> - ); -} -``` - -### titleView - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -function CustomTitleIncoming() { - return ( - ( -
{call.getCallInitiator()?.getName()}
- )} - /> - ); -} -``` - -### itemView - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -function CustomItemViewIncoming() { - return ( - ( -
- -
{call.getCallInitiator()?.getName()}
-
{"Incoming " + call.getType() + " call"}
-
- )} - /> - ); -} -``` - ---- - -## Common Patterns - -### Disable ringtone - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -function SilentIncoming() { - return ; -} -``` - -### Custom ringtone - -```tsx lines -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -function CustomSoundIncoming() { - return ; -} -``` - ---- - -## CSS Architecture - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-incoming-call` | -| List item | `.cometchat-incoming-call .cometchat-list-item` | -| Body title | `.cometchat-incoming-call .cometchat-list-item__body-title` | -| Button group | `.cometchat-incoming-call__button-group` | -| Decline button | `.cometchat-incoming-call__button-decline` | -| Accept button | `.cometchat-incoming-call__button-accept` | - -### Example: Brand-themed incoming call - - - - - -```css lines -.cometchat-incoming-call { - border-radius: 18.5px; - border: 1.542px solid #aa9ee8; - background: #fff; -} - -.cometchat-incoming-call__button-decline .cometchat-button__text { - color: #f44649; -} - -.cometchat-incoming-call__button-accept .cometchat-button { - background-color: #6852d6; -} -``` - ---- - -## Props - -All props are optional. - ---- - -### call - -Sets a specific call object for the incoming call display. - -| | | -| --- | --- | -| Type | `any` | -| Default | Auto-detected | - ---- - -### callSettingsBuilder - -Custom call settings builder for the call session. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => typeof CometChatUIKitCalls.CallSettingsBuilder` | -| Default | `undefined` | - ---- - -### customSoundForCalls - -Custom sound file URL for incoming calls. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -### disableSoundForCalls - -Disables the incoming call ringtone. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### itemView - -Custom renderer for the entire list item. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => JSX.Element` | -| Default | `undefined` | - ---- - -### leadingView - -Custom renderer for the avatar / left section. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => JSX.Element` | -| Default | `undefined` | - ---- - -### onAccept - -Callback fired when the accept button is clicked. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => void` | -| Default | `undefined` | - ---- - -### onDecline - -Callback fired when the decline button is clicked. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => void` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### subtitleView - -Custom renderer for the subtitle text. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => JSX.Element` | -| Default | `undefined` | - ---- - -### titleView - -Custom renderer for the name / title text. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => JSX.Element` | -| Default | `undefined` | - ---- - -### trailingView - -Custom renderer for the right section. - -| | | -| --- | --- | -| Type | `(call: CometChat.Call) => JSX.Element` | -| Default | `undefined` | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Call rejected | -| `CometChatCallEvents.ccCallAccepted` | `CometChat.Call` | Call accepted | -| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call ended | - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-incoming-call` | -| List item | `.cometchat-incoming-call .cometchat-list-item` | -| Body title | `.cometchat-incoming-call .cometchat-list-item__body-title` | -| Title container | `.cometchat-incoming-call .cometchat-list-item__title-container` | -| Trailing view | `.cometchat-incoming-call .cometchat-list-item__trailing-view` | -| Button group | `.cometchat-incoming-call__button-group` | -| Decline button | `.cometchat-incoming-call__button-decline` | -| Accept button | `.cometchat-incoming-call__button-accept` | diff --git a/ui-kit/react/v7/integration-astro.mdx b/ui-kit/react/integration-astro.mdx similarity index 94% rename from ui-kit/react/v7/integration-astro.mdx rename to ui-kit/react/integration-astro.mdx index 57bc27c21..ad76cfae8 100644 --- a/ui-kit/react/v7/integration-astro.mdx +++ b/ui-kit/react/integration-astro.mdx @@ -17,7 +17,7 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install, | CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | Use `client:only="react"` directive — CometChat components cannot be server-rendered | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/v7/integration-react) · [Next.js](/ui-kit/react/v7/integration-nextjs) · [React Router](/ui-kit/react/v7/integration-react-router) | +| Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) | @@ -143,7 +143,7 @@ export default function CometChatApp() { } ``` -`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/v7/cometchat-provider) guide. +`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. @@ -227,16 +227,16 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Customize message rendering - + Common issues and fixes diff --git a/ui-kit/react/v7/integration-nextjs.mdx b/ui-kit/react/integration-nextjs.mdx similarity index 94% rename from ui-kit/react/v7/integration-nextjs.mdx rename to ui-kit/react/integration-nextjs.mdx index 5662ad03f..b89359144 100644 --- a/ui-kit/react/v7/integration-nextjs.mdx +++ b/ui-kit/react/integration-nextjs.mdx @@ -15,7 +15,7 @@ description: "Add CometChat to a Next.js (App Router) app in 4 steps: create pro | CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | CometChat components must be loaded with `dynamic(() => import(...), { ssr: false })` | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | -| Other frameworks | [React.js](/ui-kit/react/v7/integration-react) · [React Router](/ui-kit/react/v7/integration-react-router) · [Astro](/ui-kit/react/v7/integration-astro) | +| Other frameworks | [React.js](/ui-kit/react/integration-react) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -141,7 +141,7 @@ export default function CometChatClient() { } ``` -`'use client'` is required because CometChat components use browser APIs. `CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/v7/cometchat-provider) guide. +`'use client'` is required because CometChat components use browser APIs. `CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. @@ -218,16 +218,16 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Customize message rendering - + Common issues and fixes diff --git a/ui-kit/react/v7/integration-react-router.mdx b/ui-kit/react/integration-react-router.mdx similarity index 94% rename from ui-kit/react/v7/integration-react-router.mdx rename to ui-kit/react/integration-react-router.mdx index b315077e4..f06f7532d 100644 --- a/ui-kit/react/v7/integration-react-router.mdx +++ b/ui-kit/react/integration-react-router.mdx @@ -17,7 +17,7 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in | CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | N/A — client-side SPA by default | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/v7/integration-react) · [Next.js](/ui-kit/react/v7/integration-nextjs) · [Astro](/ui-kit/react/v7/integration-astro) | +| Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [Astro](/ui-kit/react/integration-astro) | @@ -170,7 +170,7 @@ export default function ChatPage() { } ``` -`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/v7/cometchat-provider) guide. +`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. @@ -227,16 +227,16 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Customize message rendering - + Common issues and fixes diff --git a/ui-kit/react/v7/integration-react.mdx b/ui-kit/react/integration-react.mdx similarity index 93% rename from ui-kit/react/v7/integration-react.mdx rename to ui-kit/react/integration-react.mdx index 6038b2245..4d4e376d3 100644 --- a/ui-kit/react/v7/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -14,7 +14,7 @@ description: "Add CometChat to a React.js app in 4 steps: create project, instal | Auth Key | Dev/testing only. Use `authToken` prop in production | | CSS | `import "@cometchat/chat-uikit-react/styles";` | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | -| Other frameworks | [Next.js](/ui-kit/react/v7/integration-nextjs) · [React Router](/ui-kit/react/v7/integration-react-router) · [Astro](/ui-kit/react/v7/integration-astro) | +| Other frameworks | [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -149,7 +149,7 @@ function App() { export default App; ``` -`CometChatProvider` handles init, login, plugin registration, theming, locale, and real-time events — no manual setup needed. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/v7/cometchat-provider) guide. +`CometChatProvider` handles init, login, plugin registration, theming, locale, and real-time events — no manual setup needed. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. @@ -206,16 +206,16 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Customize message rendering - + Common issues and fixes diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx deleted file mode 100644 index c5b52da0f..000000000 --- a/ui-kit/react/link/changelog.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: "Changelog" -url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v6&expanded=true" -description: "Navigate to Changelog documentation." ---- diff --git a/ui-kit/react/link/sample.mdx b/ui-kit/react/link/sample.mdx index f0d70f9fd..1af652ece 100644 --- a/ui-kit/react/link/sample.mdx +++ b/ui-kit/react/link/sample.mdx @@ -1,5 +1,5 @@ --- title: "React Sample App" -url: "https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app" +url: "https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app" description: "Navigate to React Sample App documentation." --- diff --git a/ui-kit/react/v7/localization.mdx b/ui-kit/react/localization.mdx similarity index 100% rename from ui-kit/react/v7/localization.mdx rename to ui-kit/react/localization.mdx diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx deleted file mode 100644 index 42f099c0c..000000000 --- a/ui-kit/react/localize.mdx +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: "Localization" -sidebarTitle: "Localize" -description: "Configure multi-language localization, custom translations, and date/time formatting in CometChat React UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Import | `import { CometChatLocalize } from "@cometchat/chat-uikit-react";` | -| Set language | `CometChatLocalize.setCurrentLanguage("fr")` | -| Init with config | `CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false })` | -| Add translations | `CometChatLocalize.addTranslation({ "en-US": { "welcome_message": "Welcome!" } })` | -| Supported languages | 19: en-US, en-GB, nl, fr, de, hi, it, ja, ko, pt, ru, es, tr, zh, zh-TW, ms, sv, lt, hu | -| Date formatting | Use `CalendarObject` for custom date/time patterns | -| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) | - - - -The `CometChatLocalize` class manages multi-language localization for the UI Kit. It handles automatic language detection, manual language switching, custom translations, and date/time formatting. - ---- - -## Supported Languages - -| Language | Code | -| --- | --- | -| English (United States) | `en-US` | -| English (United Kingdom) | `en-GB` | -| Dutch | `nl` | -| French | `fr` | -| German | `de` | -| Hindi | `hi` | -| Italian | `it` | -| Japanese | `ja` | -| Korean | `ko` | -| Portuguese | `pt` | -| Russian | `ru` | -| Spanish | `es` | -| Turkish | `tr` | -| Chinese | `zh` | -| Chinese (Traditional) | `zh-TW` | -| Malay | `ms` | -| Swedish | `sv` | -| Lithuanian | `lt` | -| Hungarian | `hu` | - -[Language JSON files on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources) - ---- - -## LocalizationSettings - -Configuration interface for `CometChatLocalize.init()`. - -| Property | Type | Description | -| --- | --- | --- | -| `language` | `string` | Language code (e.g., `"en"`, `"fr"`) for the current localization | -| `translationsForLanguage` | `{ [key: string]: any }` | Key-value pairs for translations in the current language | -| `disableAutoDetection` | `boolean` | Disables automatic language detection based on browser/device settings | -| `fallbackLanguage` | `string` | Fallback language code if the primary language is not available | -| `disableDateTimeLocalization` | `boolean` | Disables localization for date and time values, forcing the default format | -| `timezone` | `string` | Timezone for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`) | -| `calendarObject` | `CalendarObject` | Custom calendar format for localized date and time formatting | -| `missingKeyHandler` | `(key: string) => void` | Handles missing translation keys with custom error handling or fallbacks | - - -```javascript lines -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -import { CalendarObject } from "@cometchat/chat-uikit-react"; - -CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", - translationsForLanguage: { - "es": { - "welcome_message": "¡Bienvenido a CometChat!", - "logout_message": "Has cerrado sesión con éxito." - }, - "fr": { - "welcome_message": "Bienvenue sur CometChat!", - "logout_message": "Vous vous êtes déconnecté avec succès." - } - }, - disableAutoDetection: false, - disableDateTimeLocalization: false, - timezone: "Europe/Madrid", - calendarObject: new CalendarObject({ - today: "[Hoy a las] hh:mm A", - yesterday: "[Ayer a las] hh:mm A", - lastWeek: "[Última semana el] dddd", - otherDays: "DD MMM YYYY, hh:mm A", - relativeTime: { - minute: "%d minuto atrás", - minutes: "%d minutos atrás", - hour: "%d hora atrás", - hours: "%d horas atrás", - } - }), - missingKeyHandler: (key) => `Missing translation for: ${key}`, -}); -``` - ---- - -## CalendarObject - -Defines customizable formatting for date and time representation. Supports relative time formatting for minutes and hours. - - -Changing this format globally updates the date and time representation wherever it is used. If a component-specific `CalendarObject` is provided, it takes higher precedence over the global settings. - - -| Property | Type | Description | -| --- | --- | --- | -| `today` | `string` | Format for dates on the same day. Example: `"Today at hh:mm A"` | -| `yesterday` | `string` | Format for dates on the previous day. Example: `"Yesterday at hh:mm A"` | -| `lastWeek` | `string` | Format for dates within the last 7 days. Example: `"Last week on dddd"` | -| `otherDays` | `string` | Format for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` | -| `relativeTime` | `object` | Custom formatting for relative time expressions | -| `relativeTime.minute` | `string` | Single minute format. Example: `"%d minute ago"` | -| `relativeTime.minutes` | `string` | Multiple minutes format. Example: `"%d minutes ago"` | -| `relativeTime.hour` | `string` | Single hour format. Example: `"%d hour ago"` | -| `relativeTime.hours` | `string` | Multiple hours format. Example: `"%d hours ago"` | - -```javascript lines -new CalendarObject({ - today: "[Hoy a las] hh:mm A", - yesterday: "[Ayer a las] hh:mm A", - lastWeek: "[Última semana el] dddd", - otherDays: "DD MMM YYYY, hh:mm A", - relativeTime: { - minute: "%d minuto atrás", - minutes: "%d minutos atrás", - hour: "%d hora atrás", - hours: "%d horas atrás", - } -}) -``` - ---- - -## Component Guide - - -The translation configurations in this section are to be defined inside the [CometChat's init() method callback](/ui-kit/react/react-js-integration#step-3:-initialize-cometchat-ui-kit). - - -### Report Message - -To add translations for any flag reason, define a key in the form `flag_message_reason_id_{reason_id}` with the translated strings. Translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default. The reason name is displayed when the required translation is not found. - -```javascript lines -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -CometChatLocalize.addTranslation({ - "en-GB": { - "flag_message_reason_id_dislike": "I just don't like it", - }, - "es": { - "flag_message_reason_id_dislike": "Simplemente no me gusta", - } -}); -``` - -### Mention All - -To add translations for a custom `mentionAllLabel`, define a key in the form `message_composer_mention_{label}`. The translation for `message_composer_mention_all` is present by default. - -```javascript lines -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -CometChatLocalize.addTranslation({ - "en-GB": { - "message_composer_mention_channel": "channel", - }, - "es": { - "message_composer_mention_channel": "canal", - } -}); -``` - ---- - -## Methods - -### init - -Initializes the localization system with default values and optional configurations. - -```javascript lines -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", - disableAutoDetection: false, - timezone: "Europe/Madrid", - missingKeyHandler: (key) => `Missing translation: ${key}`, -}); -``` - -### getBrowserLanguage - -Detects the language set in the user's browser or device settings. - -```javascript lines -const userLang = CometChatLocalize.getBrowserLanguage(); -console.log(userLang); -``` - -### getLocalizedString - -Fetches localized text based on the current language. - -```javascript lines -const translatedText = CometChatLocalize.getLocalizedString("welcome_message"); -``` - -### getCurrentLanguage - -Returns the currently set language for the UI Kit. - -```javascript lines -console.log(CometChatLocalize.getCurrentLanguage()); -``` - -### getDefaultLanguage - -Returns the system-preferred language. If `disableAutoDetection` is enabled, returns the fallback language. Otherwise returns the browser's preferred language. - -```javascript lines -console.log(CometChatLocalize.getDefaultLanguage()); -``` - -### setCurrentLanguage - -Updates the language at runtime without reloading the application. - -```javascript lines -CometChatLocalize.setCurrentLanguage("fr"); -``` - -### addTranslation - -Adds custom translations to the existing ones dynamically. New translations are merged into the existing localization data. - -```javascript lines -CometChatLocalize.addTranslation({ - "en-US": { "welcome_message": "Welcome to CometChat!" } -}); -``` - -### formatDate - -Formats a Unix timestamp (seconds) based on a `CalendarObject` configuration. Uses the timezone set via `init()`. - -| Parameter | Type | Description | -| --- | --- | --- | -| `timestamp` | `number` | Unix timestamp in seconds | -| `calendarObject` | `CalendarObject` | Calendar configuration for formatting | - -Returns a formatted date `string`. - -```javascript lines -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -import { CalendarObject } from "@cometchat/chat-uikit-react"; - -const formatted = CometChatLocalize.formatDate(1700000000, new CalendarObject({ - today: "hh:mm A", - yesterday: "[Yesterday]", - lastWeek: "dddd", - otherDays: "DD MMM YYYY, hh:mm A" -})); -``` - -### getDateLocaleLanguage - -Returns the language code used for date localization. If `disableDateTimeLocalization` is `true`, returns `"en-US"`. Otherwise returns the current language. - -```javascript lines -const dateLang = CometChatLocalize.getDateLocaleLanguage(); -``` - ---- - -## Customization - -### Global Configuration - -Apply a custom date format globally across the whole UI Kit via `CometChatLocalize.init()`: - -```javascript lines -CometChatLocalize.init({ - calendarObject: new CalendarObject({ - today: "hh:mm A", - yesterday: "[Yesterday]", - otherDays: "DD MMM YYYY, hh:mm A" - }) -}); -``` - -### Component-Specific Configuration - -Apply a custom date format only within a specific component. Component-level `CalendarObject` overrides the global settings. - -```tsx lines - -``` - diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx deleted file mode 100644 index d40b2e715..000000000 --- a/ui-kit/react/mentions-formatter-guide.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: "Mentions Formatter" -description: "Format @mentions in CometChat React UI Kit messages with custom styles, mention suggestions, group member mentions, and tap handling." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) | -| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | -| Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members | -| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | - - - -`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions. - -| Capability | Description | -| --- | --- | -| Mention formatting | Auto-formats `<@uid:...>` placeholders into styled tokens | -| Custom styles | Colors, fonts, and backgrounds for mention text | -| User and group mentions | Works with both individual users and group members | -| Suggestion list | Generates mention candidates from user input | -| Click handling | Listener interface for tap/click on rendered mentions | - ---- - -## Usage - -### 1. Initialize the formatter - -```javascript lines -import { CometChatMentionsFormatter } from "path-to-your-file"; - -const mentionsFormatter = new CometChatMentions(); -mentionsFormatter.setCometChatUserGroupMembers(userList); -``` - -### 2. Format a message - -Provide the raw message string containing mention placeholders, then apply the formatter: - -```javascript lines -const unformattedMessage = "<@uid:aliceuid> just shared a photo!"; -const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage); -// Render formattedMessage in your message component -``` - -The output contains HTML with styled mentions ready for rendering. - -### 3. Pass to components - -Use the `textFormatters` prop on [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer), or [CometChatConversations](/ui-kit/react/conversations). - ---- - -## Next Steps - - - - Build custom inline text patterns. - - - Render real-time message threads. - - - Browse all feature and formatter guides. - - - Full working sample application on GitHub. - - diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx deleted file mode 100644 index b45fc7c1b..000000000 --- a/ui-kit/react/message-composer.mdx +++ /dev/null @@ -1,932 +0,0 @@ ---- -title: "Message Composer" -description: "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages." ---- - -```json -{ - "component": "CometChatMessageComposer", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.", - "cssRootClass": ".cometchat-message-composer", - "primaryOutput": { - "prop": "onSendButtonClick", - "type": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void" - }, - "props": { - "data": { - "user": { "type": "CometChat.User", "default": "undefined" }, - "group": { "type": "CometChat.Group", "default": "undefined" }, - "parentMessageId": { "type": "number", "default": "undefined" }, - "initialComposerText": { "type": "string", "default": "\"\"" }, - "placeholderText": { "type": "string", "default": "\"\"" } - }, - "callbacks": { - "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void", - "onTextChange": "(text: string) => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "visibility": { - "hideImageAttachmentOption": { "type": "boolean", "default": false }, - "hideVideoAttachmentOption": { "type": "boolean", "default": false }, - "hideAudioAttachmentOption": { "type": "boolean", "default": false }, - "hideFileAttachmentOption": { "type": "boolean", "default": false }, - "hidePollsOption": { "type": "boolean", "default": false }, - "hideCollaborativeDocumentOption": { "type": "boolean", "default": false }, - "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false }, - "hideAttachmentButton": { "type": "boolean", "default": false }, - "hideVoiceRecordingButton": { "type": "boolean", "default": false }, - "hideEmojiKeyboardButton": { "type": "boolean", "default": false }, - "hideStickersButton": { "type": "boolean", "default": false }, - "hideSendButton": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "behavior": { - "disableTypingEvents": { "type": "boolean", "default": false }, - "disableMentions": { "type": "boolean", "default": false }, - "disableMentionAll": { "type": "boolean", "default": false }, - "mentionAllLabel": { "type": "string", "default": "\"all\"" }, - "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" }, - "disableSoundForMessage": { "type": "boolean", "default": false }, - "customSoundForMessage": { "type": "string", "default": "undefined" } - }, - "mentions": { - "mentionsUsersRequestBuilder": "CometChat.UsersRequestBuilder", - "mentionsGroupMembersRequestBuilder": "CometChat.GroupMembersRequestBuilder" - }, - "viewSlots": { - "attachmentOptions": "CometChatMessageComposerAction[]", - "auxiliaryButtonView": "JSX.Element", - "sendButtonView": "JSX.Element", - "headerView": "JSX.Element" - }, - "formatting": { - "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" } - } - }, - "events": [ - { "name": "CometChatMessageEvents.ccMessageSent", "payload": "IMessages" }, - { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" }, - { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" } - ], - "sdkListeners": [], - "types": { - "EnterKeyBehavior": { "SendMessage": "sendMessage", "NewLine": "newLine", "None": "none" }, - "PreviewMessageMode": { "edit": 0, "none": 1 } - } -} -``` - - -## Where It Fits - -`CometChatMessageComposer` provides a rich text input with attachment, emoji, voice recording, sticker, and send controls. Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function ChatView() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? ( -
- - - -
- ) : null; -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function MessageComposerDemo() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} - -export default MessageComposerDemo; -``` - -Root CSS class: `.cometchat-message-composer` - ---- - -## Actions and Events - -### Callback Props - -#### onSendButtonClick - -Fires when the send button is clicked. Overrides the default send behavior. - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ComposerWithCustomSend() { - return ( - { - console.log("Custom send:", message); - }} - /> - ); -} -``` - -#### onTextChange - -Fires as the user types in the composer input. - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -function ComposerWithTextTracking() { - return ( - { - console.log("Text changed:", text); - }} - /> - ); -} -``` - -#### onError - -Fires on internal errors. - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ComposerWithError() { - return ( - { - console.error("Composer error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -| Event | Fires when | Payload | -| --- | --- | --- | -| `CometChatMessageEvents.ccMessageSent` | A message is sent | `IMessages` | -| `CometChatMessageEvents.ccMessageEdited` | A message is edited | `IMessages` | -| `CometChatMessageEvents.ccReplyToMessage` | User replies to a message | `IMessages` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; - -function useComposerEvents() { - useEffect(() => { - const sentSub = CometChatMessageEvents.ccMessageSent.subscribe( - (data) => console.log("Sent:", data) - ); - const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe( - (data) => console.log("Edited:", data) - ); - - return () => { - sentSub?.unsubscribe(); - editedSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component internally handles typing indicators and message sending. No manual SDK listener attachment needed. - ---- - -## Custom View Slots - -| Slot | Type | Replaces | -| --- | --- | --- | -| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list | -| `auxiliaryButtonView` | `JSX.Element` | Sticker and AI button area | -| `sendButtonView` | `JSX.Element` | Send button | -| `headerView` | `JSX.Element` | Area above the composer input | - -### attachmentOptions - -Override the default attachment options. - - - - - -```tsx lines -import { - CometChatMessageComposer, - CometChatMessageComposerAction, -} from "@cometchat/chat-uikit-react"; - -function ComposerCustomAttachments() { - return ( - - ); -} -``` - -### auxiliaryButtonView - -Replace the sticker and AI button area. - - - - - -```tsx lines -import { - CometChatMessageComposer, - CometChatButton, -} from "@cometchat/chat-uikit-react"; - -function ComposerCustomAuxiliary() { - return ( - {}} /> - } - /> - ); -} -``` - -### sendButtonView - -Replace the send button. - - - - - - - -```tsx lines -import { - CometChatMessageComposer, - CometChatButton, -} from "@cometchat/chat-uikit-react"; - -function ComposerCustomSend() { - return ( - {}} /> - } - /> - ); -} -``` - - -```css lines -.cometchat-message-composer div:not([class]) .message-composer__send-button .cometchat-button { - background: #edeafa; -} - -.cometchat-message-composer div:not([class]) .message-composer__send-button .cometchat-button__icon { - background: #6852d6; -} -``` - - - -### headerView - -Custom view above the composer input. - - - - - - - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -function ComposerWithHeader() { - return ( - -
-
- User has paused their notifications -
-
- } - /> - ); -} -``` - - -```css lines -.cometchat-message-composer .message-composer__header-view { - display: flex; - align-items: center; - gap: 8px; - width: 100%; -} - -.cometchat-message-composer__header { - background: #dcd7f6; - border-radius: var(--cometchat-radius-max, 1000px); - padding: var(--cometchat-padding-2) var(--cometchat-padding-5); -} - -.message-composer__header-view-text { - color: var(--cometchat-text-color-primary); - font: var(--cometchat-font-body-regular); -} -``` - - - ---- - -## Common Patterns - -### Thread composer - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -function ThreadComposer() { - return ( - - ); -} -``` - -### Minimal composer — text only - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -function MinimalComposer() { - return ( - - ); -} -``` - -### Enter key adds new line - -```tsx lines -import { CometChatMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react"; - -function NewLineComposer() { - return ( - - ); -} -``` - -### Pre-filled text - -```tsx lines -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -function PrefilledComposer() { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-message-composer`) consumes these tokens via `var()`. -3. Overrides target `.cometchat-message-composer` descendant selectors. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-composer` | -| Send button | `.cometchat-message-composer__send-button` | -| Send button active | `.cometchat-message-composer__send-button-active` | -| Sticker button popover | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content` | -| Emoji keyboard popover | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content` | -| Attachment popover | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` | -| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content` | -| Header area | `.cometchat-message-composer__header` | - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override send behavior | Component props | `onSendButtonClick` | `onSendButtonClick={(msg) => customSend(msg)}` | -| Track text input | Component props | `onTextChange` | `onTextChange={(text) => track(text)}` | -| Toggle visibility | Component props | `hide` boolean props | `hideAttachmentButton={true}` | -| Custom attachments | Component props | `attachmentOptions` | `attachmentOptions={[new CometChatMessageComposerAction(...)]}` | -| Replace UI sections | Component props | View slot props | `sendButtonView={
...
}` | -| Change Enter key behavior | Component props | `enterKeyBehavior` | `enterKeyBehavior={EnterKeyBehavior.NewLine}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-composer` class | `.cometchat-message-composer__send-button { background: blue; }` | - ---- - -## Props - -All props are optional. Sorted alphabetically. - -### attachmentOptions - -Custom attachment options list. - -| | | -| --- | --- | -| Type | `CometChatMessageComposerAction[]` | -| Default | `undefined` | - ---- - -### auxiliaryButtonView - -Custom JSX replacing the sticker and AI button area. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in sticker/AI buttons | - ---- - -### customSoundForMessage - -URL to a custom audio file for outgoing message notifications. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -### disableMentionAll - -Controls whether group mentions like @all appear in suggestions. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### disableMentions - -Disables the mentions functionality. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### disableSoundForMessage - -Disables sound for outgoing messages. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### disableTypingEvents - -Disables the typing indicator for this composer. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### enterKeyBehavior - -Determines Enter key behavior. - -| | | -| --- | --- | -| Type | `EnterKeyBehavior` | -| Default | `EnterKeyBehavior.SendMessage` | - -```ts lines -enum EnterKeyBehavior { - SendMessage = "sendMessage", - NewLine = "newLine", - None = "none", -} -``` - ---- - -### group - -The recipient group for the composer. - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | `undefined` | - ---- - -### headerView - -Custom component displayed above the composer input. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### hideAttachmentButton - -Hides the entire attachment button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideAudioAttachmentOption - -Hides the audio attachment option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideCollaborativeDocumentOption - -Hides the collaborative document option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideCollaborativeWhiteboardOption - -Hides the collaborative whiteboard option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideEmojiKeyboardButton - -Hides the emoji keyboard button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideFileAttachmentOption - -Hides the file attachment option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideImageAttachmentOption - -Hides the image attachment option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hidePollsOption - -Hides the polls option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideSendButton - -Hides the send button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideStickersButton - -Hides the stickers button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideVideoAttachmentOption - -Hides the video attachment option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideVoiceRecordingButton - -Hides the voice recording button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### initialComposerText - -Pre-fills the text input when the component mounts. - -| | | -| --- | --- | -| Type | `string` | -| Default | `""` | - ---- - -### mentionAllLabel - -Custom alias label for group mentions. - -| | | -| --- | --- | -| Type | `string` | -| Default | `"all"` | - ---- - -### mentionsGroupMembersRequestBuilder - -Custom builder to control how mentioned group members are fetched. - -| | | -| --- | --- | -| Type | `CometChat.GroupMembersRequestBuilder` | -| Default | `undefined` | - ---- - -### mentionsUsersRequestBuilder - -Custom builder to control how mentioned users are fetched. - -| | | -| --- | --- | -| Type | `CometChat.UsersRequestBuilder` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onSendButtonClick - -Callback fired when the send button is clicked. Overrides default send behavior. - -| | | -| --- | --- | -| Type | `(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void` | -| Default | `undefined` | - ---- - -### onTextChange - -Callback fired as the user types. - -| | | -| --- | --- | -| Type | `(text: string) => void` | -| Default | `undefined` | - ---- - -### parentMessageId - -Targets a thread; messages sent as replies to this parent. - -| | | -| --- | --- | -| Type | `number` | -| Default | `undefined` | - ---- - -### placeholderText - -Placeholder text displayed in the message input field when empty. - -| | | -| --- | --- | -| Type | `string` | -| Default | `""` | - ---- - -### sendButtonView - -Custom JSX replacing the send button. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in send button | - ---- - -### showScrollbar - -Shows the scrollbar in the composer input. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### textFormatters - -Custom text formatters for the composer input. - -| | | -| --- | --- | -| Type | `CometChatTextFormatter[]` | -| Default | Default formatters from data source | - -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide). - ---- - -### user - -The recipient user for the composer. - -| | | -| --- | --- | -| Type | `CometChat.User` | -| Default | `undefined` | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Message sent | -| `CometChatMessageEvents.ccMessageEdited` | `IMessages` | Message edited | -| `CometChatMessageEvents.ccReplyToMessage` | `IMessages` | User replies to message | - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-composer` | -| Send button | `.cometchat-message-composer__send-button` | -| Send button active | `.cometchat-message-composer__send-button-active` | -| Sticker popover | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content` | -| Emoji keyboard popover | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content` | -| Attachment popover | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` | -| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content` | -| Header area | `.cometchat-message-composer__header` | diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx deleted file mode 100644 index 90feb1c93..000000000 --- a/ui-kit/react/message-header.mdx +++ /dev/null @@ -1,901 +0,0 @@ ---- -title: "Message Header" -description: "Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation." ---- - -```json -{ - "component": "CometChatMessageHeader", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatMessageHeader } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation.", - "cssRootClass": ".cometchat-message-header", - "note": "View slots are JSX.Element (not functions) — unlike list components.", - "props": { - "data": { - "user": { "type": "CometChat.User", "default": "undefined" }, - "group": { "type": "CometChat.Group", "default": "undefined" }, - "lastActiveAtDateTimeFormat": { "type": "CalendarObject", "default": "component default" }, - "summaryGenerationMessageCount": { "type": "number", "default": 1000 } - }, - "callbacks": { - "onBack": "() => void", - "onError": "((error: CometChat.CometChatException) => void) | null", - "onItemClick": "() => void", - "onSearchOptionClicked": "() => void" - }, - "visibility": { - "showBackButton": { "type": "boolean", "default": false }, - "hideVideoCallButton": { "type": "boolean", "default": false }, - "hideVoiceCallButton": { "type": "boolean", "default": false }, - "hideUserStatus": { "type": "boolean", "default": false }, - "showConversationSummaryButton": { "type": "boolean", "default": false }, - "showSearchOption": { "type": "boolean", "default": false }, - "enableAutoSummaryGeneration": { "type": "boolean", "default": false } - }, - "viewSlots": { - "itemView": "JSX.Element", - "leadingView": "JSX.Element", - "titleView": "JSX.Element", - "subtitleView": "JSX.Element", - "trailingView": "JSX.Element", - "auxiliaryButtonView": "JSX.Element" - } - }, - "sdkListeners": [ - "onUserOnline", - "onUserOffline", - "onTypingStarted", - "onTypingEnded", - "onGroupMemberJoined", - "onGroupMemberLeft", - "onGroupMemberKicked", - "onGroupMemberBanned", - "onMemberAddedToGroup" - ], - "types": { - "CalendarObject": { - "today": "string | undefined", - "yesterday": "string | undefined", - "lastWeek": "string | undefined", - "otherDays": "string | undefined", - "relativeTime": { - "minute": "string | undefined", - "minutes": "string | undefined", - "hour": "string | undefined", - "hours": "string | undefined" - } - } - } -} -``` - - -## Where It Fits - -`CometChatMessageHeader` is a toolbar component that sits above `CometChatMessageList` and `CometChatMessageComposer`. It receives a `user` or `group` prop and displays the conversation's avatar, name, online status, and typing indicator. Call buttons are rendered automatically when the calling extension is enabled. - -```tsx lines -import { useEffect, useState } from "react"; -import { - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function ChatView() { - const [user, setUser] = useState(); - - useEffect(() => { - CometChat.getUser("UID").then(setUser); - }, []); - - if (!user) return null; - - return ( -
- - - -
- ); -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { useEffect, useState } from "react"; -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function MessageHeaderDemo() { - const [user, setUser] = useState(); - - useEffect(() => { - CometChat.getUser("UID").then(setUser); - }, []); - - return user ? : null; -} - -export default MessageHeaderDemo; -``` - -Root CSS class: `.cometchat-message-header` - ---- - -## Actions and Events - -### Callback Props - -#### onBack - -Fires when the back button is clicked. Requires `showBackButton={true}`. - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function HeaderWithBack({ user }: { user: CometChat.User }) { - return ( - console.log("Navigate back")} - /> - ); -} -``` - -#### onItemClick - -Fires when the header list item area (avatar + name) is clicked. - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function HeaderWithItemClick({ user }: { user: CometChat.User }) { - return ( - console.log("Open user detail")} - /> - ); -} -``` - -#### onSearchOptionClicked - -Fires when the search option is clicked. Requires `showSearchOption={true}`. - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function HeaderWithSearch({ user }: { user: CometChat.User }) { - return ( - console.log("Open search")} - /> - ); -} -``` - -#### onError - -Fires on internal errors. - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function HeaderWithError({ user }: { user: CometChat.User }) { - return ( - { - console.error("MessageHeader error:", error); - }} - /> - ); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to these SDK events internally. No manual attachment needed. - -| SDK Listener | Internal behavior | -| --- | --- | -| `onUserOnline` / `onUserOffline` | Updates the user's online/offline status indicator | -| `onTypingStarted` / `onTypingEnded` | Shows/hides the typing indicator in the subtitle area | -| Group member events | Updates group member count when members join/leave | - - -In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally. - - ---- - -## Custom View Slots - -View slots for `CometChatMessageHeader` are `JSX.Element` (not functions) — unlike list components where slots receive a data parameter. - -| Slot | Type | Replaces | -| --- | --- | --- | -| `itemView` | `JSX.Element` | Entire list item (avatar + name + subtitle) | -| `leadingView` | `JSX.Element` | Avatar / left section | -| `titleView` | `JSX.Element` | Name / title text | -| `subtitleView` | `JSX.Element` | Subtitle text (status / typing indicator) | -| `trailingView` | `JSX.Element` | Right section (call buttons area) | -| `auxiliaryButtonView` | `JSX.Element` | Auxiliary button area (next to call buttons) | - -### itemView - -Replace the entire list item (avatar + name + subtitle). - - - - - - - -```tsx lines -import { - CometChatMessageHeader, - CometChatListItem, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomItemViewHeader({ user }: { user: CometChat.User }) { - return ( - - } - showBackButton={true} - /> - ); -} -``` - - -```css lines -.cometchat-message-header .cometchat-list-item .cometchat-avatar { - border-radius: 8px; -} -``` - - - -### titleView - -Replace the name / title text. - - - - - - - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomTitleHeader({ user }: { user: CometChat.User }) { - return ( - - - {user.getName() + " • "} - - - {user.getStatusMessage()} - -
- } - /> - ); -} -``` - - -```css lines -.cometchat-message-header .message-header__title-view { - display: flex; - gap: 4px; - width: 100%; -} - -.message-header__title-view-name { - color: #141414; - font: 500 16px/19.2px Roboto; -} - -.message-header__title-view-status { - color: #6852d6; - font: 400 16px/19.2px Roboto; -} -``` - - - -### subtitleView - -Replace the subtitle text (status / typing indicator area). - - - - - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomSubtitleHeader({ group }: { group: CometChat.Group }) { - return ( - {group.getMembersCount() + " • " + group.getDescription()} - } - /> - ); -} -``` - -### leadingView - -Replace the avatar / left section. - - - - - - - -```tsx lines -import { - CometChatMessageHeader, - CometChatAvatar, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomLeadingHeader({ user }: { user: CometChat.User }) { - return ( - - - - {user.getRole()} - -
- } - /> - ); -} -``` - - -```css lines -.cometchat-message-header .message-header__leading-view .cometchat-avatar { - border-radius: 8px; - height: 48px; - width: 48px; -} - -.message-header__leading-view-role { - display: flex; - width: 48px; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - color: #fff; - font: 600 8px/9.6px Roboto; - background: #0b7bea; - position: absolute; - bottom: -2px; -} - -.message-header__leading-view { - position: relative; -} -``` - - - -### trailingView - -Replace the right section (call buttons area). - - - - - -```tsx lines -import { - CometChatMessageHeader, - CometChatButton, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomTrailingHeader({ user }: { user: CometChat.User }) { - return ( - { /* custom action */ }} /> - } - /> - ); -} -``` - -### auxiliaryButtonView - -Replace the auxiliary button area (next to call buttons). - - - - - -```tsx lines -import { - CometChatMessageHeader, - CometChatButton, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function AuxiliaryButtonHeader({ group }: { group: CometChat.Group }) { - return ( - { /* custom action */ }} /> - } - /> - ); -} -``` - -### lastActiveAtDateTimeFormat - -Customize the "last seen" timestamp format using a `CalendarObject`. - -```tsx lines -import { - CometChatMessageHeader, - CalendarObject, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomDateHeader({ user }: { user: CometChat.User }) { - const dateFormat = new CalendarObject({ - today: "hh:mm A", - yesterday: "[yesterday]", - otherDays: "DD MM YYYY", - }); - - return ( - - ); -} -``` - - -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. - - ---- - -## Common Patterns - -### Header with back button and search - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function FullFeaturedHeader({ user }: { user: CometChat.User }) { - return ( - { /* navigate back */ }} - onSearchOptionClicked={() => { /* open search */ }} - /> - ); -} -``` - -### Hide call buttons - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function NoCalls({ user }: { user: CometChat.User }) { - return ( - - ); -} -``` - -### Group header with AI summary - -```tsx lines -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function GroupHeaderWithSummary({ group }: { group: CometChat.Group }) { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens are set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-message-header`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-message-header` descendant selectors in a global stylesheet. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-header` | -| List item | `.cometchat-message-header .cometchat-list-item` | -| Body title | `.cometchat-message-header .cometchat-list-item__body-title` | -| Avatar | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` | -| Leading view | `.cometchat-message-header .cometchat-list-item__leading-view` | -| Trailing view | `.cometchat-message-header .cometchat-list-item__trailing-view` | -| Subtitle | `.cometchat-message-header__subtitle` | -| Subtitle (typing) | `.cometchat-message-header__subtitle-typing` | -| Back button | `.cometchat-message-header__back-button` | -| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view` | -| List item container | `.cometchat-message-header__listitem` | -| Title container | `.cometchat-message-header .cometchat-list-item__title-container` | - -### Example: Brand-themed header - - - - - -```css lines -.cometchat-message-header .cometchat-list-item .cometchat-avatar { - background: #f0999b; - border-radius: 8px; -} - -.cometchat-message-header .cometchat-avatar__text { - font-family: "SF Pro"; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` callbacks | `onBack={() => navigate(-1)}` | -| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideVideoCallButton={true}` | -| Replace a section of the header | Component props | `View` JSX.Element props | `titleView={
Custom
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-header` class | `.cometchat-message-header .cometchat-avatar { border-radius: 8px; }` | - ---- - -## Props - -All props are optional unless noted otherwise. - ---- - -### auxiliaryButtonView - -Custom component for the auxiliary button area. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### enableAutoSummaryGeneration - -Enables automatic conversation summary generation. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### group - -Displays group details in the header. - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | `undefined` | - -Pass either `user` or `group`, not both. - ---- - -### hideBackButton - -Hides the back navigation button. Deprecated — use `showBackButton` instead. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `true` | - ---- - -### hideUserStatus - -Hides the user's online/offline status indicator. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideVideoCallButton - -Hides the video call button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideVoiceCallButton - -Hides the voice call button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### itemView - -Custom component for the entire list item. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### lastActiveAtDateTimeFormat - -Format for displaying the "last seen" timestamp. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default | - ---- - -### leadingView - -Custom component for the avatar / left section. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### onBack - -Callback fired when the back button is clicked. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `() => {}` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when the header list item is clicked. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `() => {}` | - ---- - -### onSearchOptionClicked - -Callback fired when the search option is clicked. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `() => {}` | - ---- - -### showBackButton - -Shows the back navigation button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showConversationSummaryButton - -Shows the AI conversation summary button. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showSearchOption - -Shows the search option in the header. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### subtitleView - -Custom component for the subtitle text. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### summaryGenerationMessageCount - -Number of messages used for AI summary generation. - -| | | -| --- | --- | -| Type | `number` | -| Default | `1000` | - ---- - -### titleView - -Custom component for the name / title text. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### trailingView - -Custom component for the right section. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### user - -Displays user details in the header. - -| | | -| --- | --- | -| Type | `CometChat.User` | -| Default | `undefined` | - -Pass either `user` or `group`, not both. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-header` | -| List item | `.cometchat-message-header .cometchat-list-item` | -| Body title | `.cometchat-message-header .cometchat-list-item__body-title` | -| Avatar | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` | -| Leading view | `.cometchat-message-header .cometchat-list-item__leading-view` | -| Trailing view | `.cometchat-message-header .cometchat-list-item__trailing-view` | -| Subtitle | `.cometchat-message-header__subtitle` | -| Subtitle (typing) | `.cometchat-message-header__subtitle-typing` | -| Back button | `.cometchat-message-header__back-button` | -| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view` | -| List item container | `.cometchat-message-header__listitem` | -| Title container | `.cometchat-message-header .cometchat-list-item__title-container` | -| Summary button | `.cometchat-message-header__conversation-summary-button` | -| Search button | `.cometchat-message-header__search-button` | -| Menu | `.cometchat-message-header__menu` | diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx deleted file mode 100644 index 97a5313ff..000000000 --- a/ui-kit/react/message-list.mdx +++ /dev/null @@ -1,1285 +0,0 @@ ---- -title: "Message List" -description: "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features." ---- - -```json -{ - "component": "CometChatMessageList", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatMessageList } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features.", - "cssRootClass": ".cometchat-message-list", - "primaryOutput": { - "prop": "onThreadRepliesClick", - "type": "(message: CometChat.BaseMessage) => void" - }, - "props": { - "data": { - "user": { "type": "CometChat.User", "default": "undefined" }, - "group": { "type": "CometChat.Group", "default": "undefined" }, - "messagesRequestBuilder": { "type": "CometChat.MessagesRequestBuilder", "default": "SDK default" }, - "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder", "default": "undefined" }, - "parentMessageId": { "type": "number", "default": "undefined" }, - "templates": { "type": "CometChatMessageTemplate[]", "default": "SDK defaults" }, - "goToMessageId": { "type": "string", "default": "undefined" } - }, - "callbacks": { - "onThreadRepliesClick": "(message: CometChat.BaseMessage) => void", - "onReactionClick": "(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void", - "onReactionListItemClick": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "visibility": { - "hideDateSeparator": { "type": "boolean", "default": false }, - "hideStickyDate": { "type": "boolean", "default": false }, - "hideReceipts": { "type": "boolean", "default": false }, - "hideError": { "type": "boolean", "default": false }, - "hideReplyInThreadOption": { "type": "boolean", "default": false }, - "hideReplyOption": { "type": "boolean", "default": false }, - "hideTranslateMessageOption": { "type": "boolean", "default": false }, - "hideEditMessageOption": { "type": "boolean", "default": false }, - "hideDeleteMessageOption": { "type": "boolean", "default": false }, - "hideReactionOption": { "type": "boolean", "default": false }, - "hideMessagePrivatelyOption": { "type": "boolean", "default": false }, - "hideCopyMessageOption": { "type": "boolean", "default": false }, - "hideMessageInfoOption": { "type": "boolean", "default": false }, - "hideAvatar": { "type": "boolean", "default": false }, - "hideGroupActionMessages": { "type": "boolean", "default": false }, - "hideModerationView": { "type": "boolean", "default": false }, - "hideFlagMessageOption": { "type": "boolean", "default": false }, - "hideFlagRemarkField": { "type": "boolean", "default": false }, - "showConversationStarters": { "type": "boolean", "default": false }, - "showSmartReplies": { "type": "boolean", "default": false }, - "showMarkAsUnreadOption": { "type": "boolean", "default": false }, - "showScrollbar": { "type": "boolean", "default": false } - }, - "behavior": { - "messageAlignment": { "type": "MessageListAlignment", "default": "MessageListAlignment.standard" }, - "scrollToBottomOnNewMessages": { "type": "boolean", "default": false }, - "quickOptionsCount": { "type": "number", "default": 3 }, - "startFromUnreadMessages": { "type": "boolean", "default": false }, - "isAgentChat": { "type": "boolean", "default": false }, - "loadLastAgentConversation": { "type": "boolean", "default": false } - }, - "sound": { - "disableSoundForMessages": { "type": "boolean", "default": true }, - "customSoundForMessages": { "type": "string", "default": "undefined" } - }, - "ai": { - "smartRepliesKeywords": { "type": "string[]", "default": "[\"what\",\"when\",\"why\",\"who\",\"where\",\"how\",\"?\"]" }, - "smartRepliesDelayDuration": { "type": "number", "default": 10000 } - }, - "dateFormatting": { - "separatorDateTimeFormat": "CalendarObject", - "stickyDateTimeFormat": "CalendarObject", - "messageSentAtDateTimeFormat": "CalendarObject", - "messageInfoDateTimeFormat": "CalendarObject" - }, - "viewSlots": { - "headerView": "JSX.Element", - "footerView": "JSX.Element", - "loadingView": "JSX.Element", - "emptyView": "JSX.Element", - "errorView": "JSX.Element" - }, - "formatting": { - "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" } - } - }, - "events": [ - { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" }, - { "name": "CometChatMessageEvents.ccMessageDeleted", "payload": "CometChat.BaseMessage" }, - { "name": "CometChatMessageEvents.ccMessageRead", "payload": "CometChat.BaseMessage" }, - { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" }, - { "name": "CometChatUIEvents.ccOpenChat", "payload": "IOpenChat" }, - { "name": "CometChatUIEvents.ccActiveChatChanged", "payload": "IActiveChatChanged" } - ], - "sdkListeners": [ - "onTextMessageReceived", "onMediaMessageReceived", "onCustomMessageReceived", - "onMessageEdited", "onMessageDeleted", "onMessageModerated", - "onTypingStarted", "onTypingEnded", - "onMessagesDelivered", "onMessagesRead", "onMessagesDeliveredToAll", "onMessagesReadByAll" - ], - "types": { - "MessageListAlignment": { "left": 0, "standard": 1 }, - "CalendarObject": { "today": "string", "yesterday": "string", "lastWeek": "string", "otherDays": "string" } - } -} -``` - - -## Where It Fits - -`CometChatMessageList` renders a scrollable, real-time message feed for a user or group conversation. Wire it alongside `CometChatMessageHeader` and `CometChatMessageComposer` to build a standard chat view. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function ChatView() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? ( -
- - - -
- ) : null; -} -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function MessageListDemo() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} - -export default MessageListDemo; -``` - -Root CSS class: `.cometchat-message-list` - ---- - -## Filtering Messages - -Pass a `CometChat.MessagesRequestBuilder` to `messagesRequestBuilder`. The `UID`/`GUID` parameters are always overridden internally based on the `user`/`group` prop. - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -function FilteredMessageList() { - return ( - - ); -} -``` - -### Reactions Request Builder - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -function ReactionsFilteredList() { - return ( - - ); -} -``` - -Refer to [MessagesRequestBuilder](/sdk/javascript/message-filtering) for the full builder API. - ---- - -## Actions and Events - -### Callback Props - -#### onThreadRepliesClick - -Fires when a threaded message reply count is clicked. - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function MessageListWithThreads() { - return ( - { - console.log("Thread:", message.getId()); - }} - /> - ); -} -``` - -#### onReactionClick - -Fires when a reaction on a message bubble is clicked. - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function MessageListWithReactions() { - return ( - { - console.log("Reaction:", reaction, "on message:", message.getId()); - }} - /> - ); -} -``` - -#### onReactionListItemClick - -Fires when a specific reaction in the reaction detail view is clicked. - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function MessageListWithReactionDetail() { - return ( - { - console.log("Reaction detail:", reaction, message.getId()); - }} - /> - ); -} -``` - -#### onError - -Fires on internal errors. - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function MessageListWithError() { - return ( - { - console.error("MessageList error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -| Event | Fires when | Payload | -| --- | --- | --- | -| `CometChatMessageEvents.ccMessageEdited` | A message is edited | `IMessages` | -| `CometChatMessageEvents.ccMessageDeleted` | A message is deleted | `CometChat.BaseMessage` | -| `CometChatMessageEvents.ccMessageRead` | A message is read | `CometChat.BaseMessage` | -| `CometChatMessageEvents.ccReplyToMessage` | User replies to a message | `IMessages` | -| `CometChatUIEvents.ccOpenChat` | User opens a chat | `IOpenChat` | -| `CometChatUIEvents.ccActiveChatChanged` | Active chat changes | `IActiveChatChanged` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react"; - -function useMessageListEvents() { - useEffect(() => { - const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe( - (data) => console.log("Edited:", data) - ); - const deletedSub = CometChatMessageEvents.ccMessageDeleted.subscribe( - (msg) => console.log("Deleted:", msg) - ); - - return () => { - editedSub?.unsubscribe(); - deletedSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component listens to these SDK events internally: - -| SDK Listener | Internal behavior | -| --- | --- | -| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Appends new message to list | -| `onMessageEdited` / `onMessageDeleted` | Updates/removes message in list | -| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator | -| `onMessagesDelivered` / `onMessagesRead` / `onMessagesDeliveredToAll` / `onMessagesReadByAll` | Updates receipt ticks | -| `onMessageModerated` | Updates moderated message state | - ---- - -## Custom View Slots - -| Slot | Type | Replaces | -| --- | --- | --- | -| `headerView` | `JSX.Element` | Area above the message list | -| `footerView` | `JSX.Element` | Area below the message list | -| `loadingView` | `JSX.Element` | Loading state | -| `emptyView` | `JSX.Element` | Empty state | -| `errorView` | `JSX.Element` | Error state | -| `templates` | `CometChatMessageTemplate[]` | Message bubble rendering | -| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in messages | - -### headerView - -Custom view above the message list. - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react"; - -function MessageListWithHeader() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? ( - - - - -
- } - /> - ) : null; -} -``` - - -```css lines -.header-view { - display: flex; - width: 100%; - padding: 3px 16px; - align-items: flex-start; - gap: 5px; - background: #edeafa; -} - -.header-view .cometchat .cometchat-button { - width: auto; - height: 32px; - border-radius: 1000px; - border: 1px solid #e8e8e8; - background: #fafafa; -} - -.header-view .cometchat .cometchat-button__text { - color: #6852d6; - font: 400 12px/14.4px Roboto; -} -``` - - - -### footerView - -Custom view below the message list. - - - - - - - -```tsx lines -import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react"; - -function MessageListWithFooter() { - return ( - - - - - } - /> - ); -} -``` - - -```css lines -.footer-view { - display: flex; - width: 100%; - padding: 3px 16px; - align-items: flex-start; - gap: 5px; - background: #edeafa; -} - -.footer-view .cometchat .cometchat-button { - width: auto; - height: 32px; - border-radius: 1000px; - border: 1px solid #e8e8e8; - background: #fafafa; -} - -.footer-view .cometchat .cometchat-button__text { - color: #6852d6; - font: 400 12px/14.4px Roboto; -} -``` - - - -### templates - -Custom message bubble templates via [CometChatMessageTemplate](/ui-kit/react/message-template). - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageList, - ChatConfigurator, - CometChatActionsIcon, -} from "@cometchat/chat-uikit-react"; - -function MessageListCustomTemplates() { - const [chatUser, setChatUser] = useState(); - - useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - const getTemplates = () => { - const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); - templates.map((data) => { - data.options = (loggedInUser, message, group) => { - const defaults = ChatConfigurator.getDataSource().getMessageOptions( - loggedInUser, message, group - ); - defaults.push( - new CometChatActionsIcon({ - id: "custom", - title: "Custom Action", - onClick: () => console.log("custom action"), - }) - ); - return defaults; - }; - }); - return templates; - }; - - return chatUser ? ( - - ) : null; -} -``` - -### Date Time Formatting - -Customize timestamps using `CalendarObject`: - -```tsx lines -import { CometChatMessageList, CalendarObject } from "@cometchat/chat-uikit-react"; - -function MessageListCustomDates() { - const dateFormat = new CalendarObject({ - today: "hh:mm A", - yesterday: "[yesterday]", - otherDays: "DD/MM/YYYY", - }); - - return ( - - ); -} -``` - ---- - -## Common Patterns - -### Threaded message list - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -function ThreadedMessageList() { - return ( - - ); -} -``` - -### Hide all chrome — minimal list - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -function MinimalMessageList() { - return ( - - ); -} -``` - -### Left-aligned messages - -```tsx lines -import { CometChatMessageList, MessageListAlignment } from "@cometchat/chat-uikit-react"; - -function LeftAlignedList() { - return ( - - ); -} -``` - -### AI conversation starters and smart replies - -```tsx lines -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -function AIMessageList() { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-message-list`) consumes these tokens via `var()`. -3. Overrides target `.cometchat-message-list` descendant selectors. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-list` | -| Error state | `.cometchat-message-list__error-state-view` | -| Footer smart replies | `.cometchat-message-list__footer-smart-replies` | -| Footer conversation starters | `.cometchat-message-list__footer-conversation-starter` | -| Outgoing message bubble | `.cometchat-message-bubble-outgoing` | -| Incoming message bubble | `.cometchat-message-bubble-incoming` | -| Message bubble status info | `.cometchat-message-bubble__status-info-view` | -| Thread view replies | `.cometchat-message-bubble__thread-view-replies` | -| Text bubble | `.cometchat-message-bubble .cometchat-text-bubble` | -| Date separator | `.cometchat-message-bubble__status-info-view .cometchat-date` | - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle thread clicks | Component props | `onThreadRepliesClick` | `onThreadRepliesClick={(msg) => openThread(msg)}` | -| Filter messages | Component props | `messagesRequestBuilder` | `messagesRequestBuilder={builder}` | -| Toggle visibility | Component props | `hide` boolean props | `hideReceipts={true}` | -| Custom message bubbles | Component props | `templates` | `templates={customTemplates}` | -| Add header/footer | Component props | `headerView` / `footerView` | `headerView={
...
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-list` class | `.cometchat-message-bubble-outgoing { background: blue; }` | - ---- - -## Props - -All props are optional. Sorted alphabetically. - -### customSoundForMessages - -URL to a custom audio file for incoming message notifications. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -### disableSoundForMessages - -Disables the notification sound for incoming messages. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `true` | - ---- - -### emptyView - -Custom component displayed when there are no messages. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in empty state | - ---- - -### errorView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in error state | - ---- - -### footerView - -Custom component displayed below the message list. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### goToMessageId - -Scrolls to the specified message on initial load. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -### group - -The group for group conversation messages. - -| | | -| --- | --- | -| Type | `CometChat.Group` | -| Default | `undefined` | - ---- - -### headerView - -Custom component displayed above the message list. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | `undefined` | - ---- - -### hideAvatar - -Hides avatars on messages. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideCopyMessageOption - -Hides the copy message option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideDateSeparator - -Hides date separators between message groups. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideDeleteMessageOption - -Hides the delete message option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideEditMessageOption - -Hides the edit message option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideError - -Hides the default and custom error views. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideFlagMessageOption - -Hides the "Report Message" option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideFlagRemarkField - -Hides the remark text area in the flag message dialog. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideGroupActionMessages - -Hides group action messages (join, leave, kick, etc.). - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideMessageInfoOption - -Hides the message info option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideMessagePrivatelyOption - -Hides the "Message Privately" option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideModerationView - -Hides the moderation view below moderated messages. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideReactionOption - -Hides the reaction option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideReceipts - -Hides read/delivery receipt indicators. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideReplyInThreadOption - -Hides the "Reply in Thread" option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideReplyOption - -Hides the reply option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideStickyDate - -Hides the sticky date header. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### hideTranslateMessageOption - -Hides the translate message option. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### isAgentChat - -Toggles AI Agent functionality for the message list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### loadingView - -Custom component displayed during the loading state. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in shimmer | - ---- - -### loadLastAgentConversation - -Loads the most recent existing agent conversation on mount. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### messageAlignment - -Controls message alignment. - -| | | -| --- | --- | -| Type | `MessageListAlignment` | -| Default | `MessageListAlignment.standard` | - -```ts lines -enum MessageListAlignment { - left, // 0 - standard, // 1 -} -``` - ---- - -### messageInfoDateTimeFormat - -Format for message info timestamps. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default | - ---- - -### messageSentAtDateTimeFormat - -Format for message sent-at timestamps. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default | - ---- - -### messagesRequestBuilder - -Controls which messages load and in what order. - -| | | -| --- | --- | -| Type | `CometChat.MessagesRequestBuilder` | -| Default | SDK default | - -UID/GUID are always overridden internally. - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### onReactionClick - -Callback fired when a reaction on a message is clicked. - -| | | -| --- | --- | -| Type | `(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void` | -| Default | `undefined` | - ---- - -### onReactionListItemClick - -Callback fired when a reaction list item is clicked. - -| | | -| --- | --- | -| Type | `(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void` | -| Default | `undefined` | - ---- - -### onThreadRepliesClick - -Callback fired when a threaded message reply count is clicked. - -| | | -| --- | --- | -| Type | `(message: CometChat.BaseMessage) => void` | -| Default | `undefined` | - ---- - -### parentMessageId - -Displays threaded conversation for the specified parent message. - -| | | -| --- | --- | -| Type | `number` | -| Default | `undefined` | - ---- - -### quickOptionsCount - -Number of message options visible in the main menu before overflow. - -| | | -| --- | --- | -| Type | `number` | -| Default | `3` | - ---- - -### reactionsRequestBuilder - -Controls how reactions are fetched for messages. - -| | | -| --- | --- | -| Type | `CometChat.ReactionsRequestBuilder` | -| Default | `undefined` | - ---- - -### scrollToBottomOnNewMessages - -Auto-scrolls to bottom when new messages arrive. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### separatorDateTimeFormat - -Format for date separator timestamps. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default | - ---- - -### showConversationStarters - -Shows AI conversation starters. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showMarkAsUnreadOption - -Shows "Mark Unread" option in message actions. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showScrollbar - -Shows the scrollbar in the message list. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showSmartReplies - -Shows AI smart replies. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### smartRepliesDelayDuration - -Delay in milliseconds before smart replies appear. - -| | | -| --- | --- | -| Type | `number` | -| Default | `10000` | - ---- - -### smartRepliesKeywords - -Keywords that trigger smart replies. - -| | | -| --- | --- | -| Type | `string[]` | -| Default | `["what", "when", "why", "who", "where", "how", "?"]` | - ---- - -### startFromUnreadMessages - -Loads from the first unread message if available. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### stickyDateTimeFormat - -Format for sticky date header timestamps. - -| | | -| --- | --- | -| Type | `CalendarObject` | -| Default | Component default | - ---- - -### templates - -Custom message bubble templates. - -| | | -| --- | --- | -| Type | `CometChatMessageTemplate[]` | -| Default | SDK defaults | - -See [CometChatMessageTemplate](/ui-kit/react/message-template). - ---- - -### textFormatters - -Custom text formatters for message content. - -| | | -| --- | --- | -| Type | `CometChatTextFormatter[]` | -| Default | Default formatters from data source | - -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide). - ---- - -### user - -The user for 1-on-1 conversation messages. - -| | | -| --- | --- | -| Type | `CometChat.User` | -| Default | `undefined` | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatMessageEvents.ccMessageEdited` | `IMessages` | Message edited | -| `CometChatMessageEvents.ccMessageDeleted` | `CometChat.BaseMessage` | Message deleted | -| `CometChatMessageEvents.ccMessageRead` | `CometChat.BaseMessage` | Message read | -| `CometChatMessageEvents.ccReplyToMessage` | `IMessages` | User replies to message | -| `CometChatUIEvents.ccOpenChat` | `IOpenChat` | Chat opened | -| `CometChatUIEvents.ccActiveChatChanged` | `IActiveChatChanged` | Active chat changes | - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-message-list` | -| Error state | `.cometchat-message-list__error-state-view` | -| Footer smart replies | `.cometchat-message-list__footer-smart-replies` | -| Footer conversation starters | `.cometchat-message-list__footer-conversation-starter` | -| Outgoing bubble | `.cometchat-message-bubble-outgoing` | -| Incoming bubble | `.cometchat-message-bubble-incoming` | -| Status info view | `.cometchat-message-bubble__status-info-view` | -| Thread view replies | `.cometchat-message-bubble__thread-view-replies` | -| Text bubble | `.cometchat-message-bubble .cometchat-text-bubble` | -| Delete bubble | `.cometchat-message-bubble .cometchat-delete-bubble` | diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx deleted file mode 100644 index c74247d04..000000000 --- a/ui-kit/react/message-template.mdx +++ /dev/null @@ -1,717 +0,0 @@ ---- -title: "Message Template" -description: "Data structure for customizing CometChat React UI Kit message bubbles, including content, header, footer, reply, and status views." ---- - -```json -{ - "component": "CometChatMessageTemplate", - "kind": "model-class", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatMessageTemplate } from \"@cometchat/chat-uikit-react\";", - "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.", - "usage": "Pass an array of CometChatMessageTemplate instances to CometChatMessageList via the templates prop.", - "properties": { - "type": { "type": "string", "required": true, "description": "CometChat message type" }, - "category": { "type": "string", "default": "\"\"", "description": "CometChat message category" }, - "headerView": { "type": "function | null", "default": "null", "description": "Custom header view function" }, - "contentView": { "type": "function | null", "default": "null", "description": "Custom content view function" }, - "footerView": { "type": "function | null", "default": "null", "description": "Custom footer view function" }, - "bottomView": { "type": "function | null", "default": "null", "description": "Custom bottom view function" }, - "bubbleView": { "type": "function | null", "default": "null", "description": "Replaces entire bubble" }, - "statusInfoView": { "type": "function | null", "default": "null", "description": "Custom status info view function" }, - "replyView": { "type": "function | null", "default": "null", "description": "Custom reply preview function" }, - "options": { "type": "function", "description": "Returns action sheet items for long-press" } - }, - "relatedComponents": ["CometChatMessageList"], - "cssRootClass": null, - "events": null -} -``` - - -## What It Is - -`CometChatMessageTemplate` is a model class, not a rendered component. Each instance maps a message `type` + `category` pair to a set of view functions that control how that message renders inside `CometChatMessageList`. Pass an array of templates to the `templates` prop on `CometChatMessageList`. - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatMessageTemplate, - CometChatUIKit, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function CustomTemplateDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const modified = allTemplates.map((t) => { - if ( - t.type === CometChatUIKitConstants.MessageTypes.text && - t.category === CometChatUIKitConstants.MessageCategory.message - ) { - t.headerView = (message: CometChat.BaseMessage) => ( - <>{message.getSender().getName()} • 🗓️ In meeting - ); - } - return t; - }); - setTemplates(modified); - }, []); - - if (!chatGroup) return null; - - return ; -} -``` - ---- - -## Template Structure - -A message bubble is composed of these view slots, each overridable per template: - -| View | Default rendering | Signature | -| --- | --- | --- | -| `headerView` | Sender name | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null` | -| `contentView` | Text / image / video / audio / file bubble | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null` | -| `footerView` | Reactions | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null` | -| `bottomView` | Link previews, "load more" | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null` | -| `statusInfoView` | Receipt + timestamp | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean) => JSX.Element \| null` | -| `replyView` | Reply preview | `(message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (msg: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null` | -| `bubbleView` | Entire bubble (overrides all above) | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null` | -| `options` | Long-press action sheet | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[]` | - ---- - -## Fetching Existing Templates - -Retrieve the built-in templates and modify specific ones: - -```tsx lines -import { - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, -} from "@cometchat/chat-uikit-react"; - -const allTemplates: CometChatMessageTemplate[] = - CometChatUIKit.getDataSource().getAllMessageTemplates(); - -for (let i = 0; i < allTemplates.length; i++) { - if (allTemplates[i].type === CometChatUIKitConstants.MessageTypes.text) { - // customize allTemplates[i] - } -} -``` - ---- - -## Common Patterns - -### Custom header with status badge - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function HeaderViewDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const modified = definedTemplates.map((t) => { - if ( - t.type === CometChatUIKitConstants.MessageTypes.text && - t.category === CometChatUIKitConstants.MessageCategory.message - ) { - t.headerView = (message: CometChat.BaseMessage) => ( - <>{message.getSender().getName()} • 🗓️ In meeting - ); - } - return t; - }); - setTemplates(modified); - }, []); - - if (!chatGroup) return null; - - return ; -} -``` - -### Custom content view for a custom message type - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function ContentViewDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const CUSTOM_MESSAGE_TYPE = "customType"; - const customTemplate = new CometChatMessageTemplate({ - type: CUSTOM_MESSAGE_TYPE, - category: CometChatUIKitConstants.MessageCategory.custom, - contentView: (message: CometChat.BaseMessage) => ( -
-
-
Blazer Casual
-
- Men's Tailored Regular Fit Blazer -
-
- $37.99 $74.00 -
-
-
Buy now
-
- ), - }); - definedTemplates.push(customTemplate); - setTemplates(definedTemplates); - }, []); - - const getMessageRequestBuilder = () => { - const CUSTOM_MESSAGE_TYPE = "customType"; - const categories = CometChatUIKit.getDataSource().getAllMessageCategories(); - categories.push(CometChatUIKitConstants.MessageCategory.custom); - const types = CometChatUIKit.getDataSource().getAllMessageTypes(); - types.push(CUSTOM_MESSAGE_TYPE); - return new CometChat.MessagesRequestBuilder() - .setCategories(categories) - .setTypes(types) - .hideReplies(true) - .setLimit(30); - }; - - if (!chatGroup) return null; - - return ( - - ); -} -``` - - -```css lines -.content-view__body { - height: 105px; - display: flex; - padding: 12px 4px; - flex-direction: column; - text-align: left; - gap: 16px; -} - -.content-view__body-title { - color: #141414; - font: 700 16px/1.2 Roboto; -} - -.content-view__body-description { - color: #727272; - font: 400 14px/1.2 Roboto; -} - -.content-view__body-price { - color: #6852d6; - font: 700 16px/1.2 Roboto; -} - -.content-view__body-price-old { - color: #727272; - font: 400 14px/1.2 Roboto; - text-decoration: line-through; -} - -.content-footer { - display: flex; - height: 40px; - padding: 8px 20px; - justify-content: center; - align-items: center; - border-top: 1px solid #dcdcdc; - color: #6852d6; - font: 500 14px/1.2 Roboto; -} -``` - - - -### Custom bottom view with warning - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function BottomViewDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const modified = definedTemplates.map((t) => { - if ( - t.type === CometChatUIKitConstants.MessageTypes.text && - t.category === CometChatUIKitConstants.MessageCategory.message - ) { - t.bottomView = (message: CometChat.BaseMessage) => ( -
- According to guidelines you cannot share contact -
- ); - } - return t; - }); - setTemplates(modified); - }, []); - - if (!chatGroup) return null; - - return ; -} -``` - - -```css lines -.cometchat .cometchat-message-bubble__body { - border-radius: 12px 12px 0px 0px; -} - -.bottom-view { - display: flex; - height: 19px; - align-items: center; - gap: 4px; - color: #f44649; - font: 400 12px/120% Roboto; - border-radius: 0px 0px 12px 12px; - background: linear-gradient( - 0deg, - rgba(244, 70, 73, 0.2) 0%, - rgba(244, 70, 73, 0.2) 100% - ), - #fff; - padding: 0px 8px 0px 5px; -} -``` - - - -### Replace entire bubble - - - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, - MessageBubbleAlignment, - CometChatUIKitLoginListener, - MessageReceiptUtils, - Receipts, - isMessageSentByMe, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function BubbleViewDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const modified = definedTemplates.map((t) => { - if ( - t.type === CometChatUIKitConstants.MessageTypes.text && - t.category === CometChatUIKitConstants.MessageCategory.message - ) { - t.bubbleView = ( - message: CometChat.BaseMessage, - alignment: MessageBubbleAlignment - ) => { - const isSentByMe = isMessageSentByMe( - message, - CometChatUIKitLoginListener.getLoggedInUser()! - ); - let textMessage = ""; - if (message instanceof CometChat.TextMessage) { - textMessage = message.getText(); - } - return ( -
-
-
{textMessage}
-
-
- ); - }; - } - return t; - }); - setTemplates(modified); - }, []); - - if (!chatGroup) return null; - - return ; -} -``` - - -```css lines -.bubble-view { - display: flex; - flex-direction: column; - width: 100%; - padding: 20px; - gap: 12px; -} - -.bubble-view__outgoing { - align-items: flex-end; -} - -.bubble-view__incoming { - align-items: flex-start; -} - -.bubble-view__content { - max-width: 60%; - display: flex; - flex-direction: column; - align-items: flex-end; -} - -.bubble-view__content__text { - width: fit-content; - padding: 4px; - border-radius: 2px 2px 0px 2px; - background: #6852d6; - color: white; -} - -.bubble-view__incoming .bubble-view__content__text { - background-color: #e8e8e8; - color: #141414; -} -``` - - - -### Custom action sheet options - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, - CometChatActionsIcon, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function OptionsDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const modified = definedTemplates.map((t) => { - if ( - t.type === CometChatUIKitConstants.MessageTypes.text && - t.category === CometChatUIKitConstants.MessageCategory.message - ) { - t.options = ( - loggedInUser: CometChat.User, - message: CometChat.BaseMessage, - group?: CometChat.Group - ) => { - const defaultOptions: any = - CometChatUIKit.getDataSource().getMessageOptions(loggedInUser, message, group); - const myView: any = new CometChatActionsIcon({ - id: "refresh", - title: "Refresh", - iconURL: "", - onClick: () => { /* custom logic */ }, - }); - defaultOptions.splice(1, 0, myView); - return defaultOptions; - }; - } - return t; - }); - setTemplates(modified); - }, []); - - if (!chatGroup) return null; - - return ; -} -``` - -### New template for a custom message type - - - - - -```tsx lines -import { useState, useEffect } from "react"; -import { - CometChatMessageList, - CometChatUIKit, - CometChatUIKitConstants, - CometChatMessageTemplate, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function NewTemplateDemo() { - const [chatGroup, setChatGroup] = useState(); - const [templates, setTemplates] = useState([]); - - useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - - const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); - const CUSTOM_MESSAGE_TYPE = "customType"; - const customTemplate = new CometChatMessageTemplate({ - type: CUSTOM_MESSAGE_TYPE, - category: CometChatUIKitConstants.MessageCategory.custom, - contentView: (message: CometChat.BaseMessage) => ( -
Custom: {JSON.stringify(message.getData())}
- ), - }); - definedTemplates.push(customTemplate); - setTemplates(definedTemplates); - }, []); - - const getMessageRequestBuilder = () => { - const CUSTOM_MESSAGE_TYPE = "customType"; - const categories = CometChatUIKit.getDataSource().getAllMessageCategories(); - categories.push(CometChatUIKitConstants.MessageCategory.custom); - const types = CometChatUIKit.getDataSource().getAllMessageTypes(); - types.push(CUSTOM_MESSAGE_TYPE); - return new CometChat.MessagesRequestBuilder() - .setCategories(categories) - .setTypes(types) - .hideReplies(true) - .setLimit(30); - }; - - if (!chatGroup) return null; - - return ( - - ); -} -``` - ---- - -## Styling - -`CometChatMessageTemplate` renders inside `.cometchat-message-bubble`. Style individual bubble sections using CSS: - -```css lines -.cometchat .cometchat-message-bubble__body { - /* content area overrides */ -} - -.cometchat .cometchat-message-bubble__body-footer-view { - /* footer area overrides */ -} - -.cometchat .cometchat-message-bubble__body-header-view { - /* header area overrides */ -} -``` - ---- - -## Properties - -### bubbleView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Replaces the entire message bubble. When set, `headerView`, `contentView`, `footerView`, `bottomView`, `statusInfoView`, and `replyView` are ignored for that template. - ---- - -### bottomView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom bottom section below the content area. Default renders link previews or "load more" for long messages. - ---- - -### category - -| Key | Value | -| --- | --- | -| Type | `string` | -| Default | `""` | - -Maps the template to a CometChat message category (e.g., `CometChatUIKitConstants.MessageCategory.message`, `CometChatUIKitConstants.MessageCategory.custom`). - ---- - -### contentView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom content area. Default renders text, image, video, audio, or file bubble based on message type. - ---- - -### footerView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom footer below the content area. Default renders reactions. - ---- - -### headerView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom header above the content area. Default renders sender name. - ---- - -### options - -| Key | Value | -| --- | --- | -| Type | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[]` | -| Default | SDK default options | - -Returns the list of action sheet items for long-press on a message bubble. - ---- - -### replyView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (msg: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom reply preview above the content area. - ---- - -### statusInfoView - -| Key | Value | -| --- | --- | -| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean) => Element \| JSX.Element \| null) \| null` | -| Default | `null` | - -Custom status info area. Default renders receipt icon and timestamp. - ---- - -### type - -| Key | Value | -| --- | --- | -| Type | `string` | -| Default | — (required) | - -Maps the template to a CometChat message type (e.g., `CometChatUIKitConstants.MessageTypes.text`, `CometChatUIKitConstants.MessageTypes.image`). - ---- diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 455556ce9..795a3ed59 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -1,594 +1,200 @@ --- title: "Methods" -description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers." +description: "Static methods on CometChatUIKit for initialization, authentication, and message sending." --- | Field | Value | | --- | --- | +| Class | `CometChatUIKit` | | Package | `@cometchat/chat-uikit-react` | -| Import | `import { CometChatUIKit } from "@cometchat/chat-uikit-react";` | -| Init | `CometChatUIKit.init(UIKitSettings)` | -| Login (dev) | `CometChatUIKit.login("UID")` | -| Login (prod) | `CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")` | -| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedinUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` | -| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` | -| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing | +| Usage | Static methods — no instantiation needed | +| Note | Most users don't need these directly — `CometChatProvider` handles init and login automatically | -The UI Kit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls. +## Overview - -`CometChatUIKit.init(UIKitSettings)` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login. - +`CometChatUIKit` is a static class that provides imperative methods for SDK initialization, authentication, and message sending. Most users won't need these directly — `CometChatProvider` handles init and login automatically. These methods are useful for: - -Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code. - +- The [individual providers approach](/ui-kit/react/cometchat-provider#approach-2%3A-individual-providers-advanced) +- Sending messages programmatically outside the composer +- Checking initialization/login state -## Methods - -All methods are accessed via the `CometChatUIKit` class. +--- -### Init +## Initialization -Initializes the [CometChat JavaScript SDK](/sdk/javascript/overview). Must be called on app startup before any other UI Kit method. +### `CometChatUIKit.init(settings)` - -Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production. - +Initialize the CometChat SDK and UIKit. - - -```js lines highlight={4-6} +```tsx import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your App ID - REGION: "REGION", // Replace with your App Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token -}; - -//create the builder -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForFriends() +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("us") + .setAuthKey("AUTH_KEY") + .subscribePresenceForAllUsers() .build(); -//Initialize CometChat -CometChatUIKit.init(UIKitSettings)?.then(() => { - //login your user -}); +const user = await CometChatUIKit.init(settings); +// user is non-null if an existing session was found ``` - +| Parameter | Type | Description | +| --- | --- | --- | +| `settings` | `UIKitSettings` | Built via `UIKitSettingsBuilder` | - +**Returns:** `Promise` — the logged-in user if a session exists, otherwise null. -*** +**What it does:** +1. Initializes the CometChat SDK with app settings +2. Sets source metadata for analytics +3. Creates the plugin registry (default + user plugins) +4. Initializes the localization singleton +5. Resumes existing session (if any) +6. Initializes Calls SDK (if enabled) -### Setting Session Storage Mode - -To use session storage instead of the default local storage, configure it during initialization: +--- - - -```js lines highlight={5-7} -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +## Authentication -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your App ID - REGION: "REGION", // Replace with your App Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key -}; +### `CometChatUIKit.login(uid)` -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .setStorageMode(CometChat.StorageMode.SESSION) - .build(); +Log in a user by UID. Requires `authKey` in UIKitSettings. -//Initialize CometChat UI Kit with Session Storage -CometChatUIKit.init(UIKitSettings)?.then(() => { - console.log("Initialization completed successfully with session storage"); - // You can now call login function. - }) - .catch(console.log); +```tsx +const user = await CometChatUIKit.login("superhero1"); ``` - - - -```ts lines highlight={5-7} -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your App ID - REGION: "REGION", // Replace with your App Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .setStorageMode(CometChat.StorageMode.SESSION) - .build(); -//Initialize CometChat UI Kit with Session Storage -CometChatUIKit.init(UIKitSettings)?.then(() => { - console.log("Initialization completed successfully with session storage"); - // You can now call login function. - }) - .catch(console.log); -``` - - +| Parameter | Type | Description | +| --- | --- | --- | +| `uid` | `string` | The user's UID | -### Get Logged In User +**Returns:** `Promise` -Checks for an existing session in the SDK. Returns the logged-in user details or `null`. +### `CometChatUIKit.loginWithAuthToken(authToken)` - - -```js lines -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package +Log in with a server-generated auth token. Preferred for production. -CometChatUIKit.getLoggedinUser() - .then((user) => { - //Login user - }) - .catch(console.log); +```tsx +const user = await CometChatUIKit.loginWithAuthToken(token); ``` - +| Parameter | Type | Description | +| --- | --- | --- | +| `authToken` | `string` | Server-generated auth token | - +**Returns:** `Promise` -*** +### `CometChatUIKit.logout()` -### Login using Auth Key +Log out the current user. -Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token). - - - -```js lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package - -const UID = "UID"; - -CometChatUIKit.getLoggedinUser() - .then((user) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful:", { user }); - //mount your app - }) - .catch(console.log); - } else { - //user already logged in - //mount your app - } - }) - .catch(console.log); +```tsx +await CometChatUIKit.logout(); ``` - - - -```ts lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package - -const UID: string = "UID"; - -CometChatUIKit.getLoggedinUser() - .then((user: CometChat.User) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user: CometChat.User) => { - console.log("Login Successful:", { user }); - // You can now launch the component - }) - .catch(console.log); - } else { - //user already logged in - //You can now launch the component - } - }) - .catch(console.log); -``` - - - - - -*** +**Returns:** `Promise` -### Login using Auth Token - -Production-safe authentication that does not expose the Auth Key in client code. - -1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app. -2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database. -3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method. +--- - - -```js lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package +## State Getters -const authToken = "AUTH_TOKEN"; +### `CometChatUIKit.getLoggedInUser()` -CometChatUIKit.getLoggedinUser() - .then((user) => { - if (!user) { - //Login user - CometChatUIKit.loginWithAuthToken(authToken) - .then((user) => { - console.log("Login Successful:", { user }); - //mount your app - }) - .catch(console.log); - } else { - //user already logged in - //mount your app - } - }) - .catch(console.log); -``` +Get the currently logged-in user (synchronous). - - - -```ts lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package - -const authToken: string = "AUTH_TOKEN"; - -CometChatUIKit.getLoggedinUser() - .then((user: CometChat.User) => { - if (!user) { - //Login user - CometChatUIKit.loginWithAuthToken(authToken) - .then((user: CometChat.User) => { - console.log("Login Successful:", { user }); - //mount your app - }) - .catch(console.log); - } - }) - .catch(console.log); +```tsx +const user = CometChatUIKit.getLoggedInUser(); ``` - - - - -*** +**Returns:** `CometChat.User | null` -### Logout +### `CometChatUIKit.isInitialized()` -Ends the current user session. +Check if the SDK has been initialized. - - -```js lines -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package - -CometChatUIKit.logout(); +```tsx +if (CometChatUIKit.isInitialized()) { ... } ``` - +**Returns:** `boolean` - +### `CometChatUIKit.isCallingReady()` -*** +Check if the Calls SDK is ready. -### Create user +**Returns:** `boolean` -Takes a `User` object and Auth Key, returns the created `User` object. +### `CometChatUIKit.getPluginRegistry()` - - -```js lines highlight={4-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package +Get the plugin registry instance. -const authKey = "AUTH_KEY"; -const UID = "user1"; -const name = "Kevin"; +**Returns:** `CometChatPluginRegistry | null` -var user = new CometChat.User(UID); -user.setName(name); -CometChatUIKit.createUser(user, authKey) - .then((user) => { - console.log("user created", user); +### `CometChatUIKit.getSettings()` - CometChatUIKit.login(UID, authKey) - .then((user) => { - console.log("Login Successful:", { user }); - //mount your app - }) - .catch(console.log); - }) - .catch(console.log); -``` +Get the UIKitSettings used during initialization. - - - -```ts lines highlight={4-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package - -const authKey: string = "AUTH_KEY"; -const UID: string = "user1"; -const name: string = "Kevin"; - -var user = new CometChat.User(UID); -user.setName(name); -CometChatUIKit.createUser(user, authKey) - .then((user: CometChat.User) => { - console.log("user created", user); - - CometChatUIKit.login(UID, authKey) - .then((user: CometChat.User) => { - console.log("Login Successful:", { user }); - //mount your app - }) - .catch(console.log); - }) - .catch(console.log); -``` +**Returns:** `UIKitSettings | null` - +### `CometChatUIKit.getConversationUpdateSettings()` - +Get conversation update settings fetched from the dashboard. -*** +**Returns:** `CometChat.ConversationUpdateSettings | null` -### Update user +--- -Takes a `User` object and Auth Key, returns the updated `User` object. +## Message Sending - - -```js lines highlight={4-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package + +These methods are low-level utilities. They send messages via the SDK but do **not** publish `ui:message/sent` events. This means: +- The message won't appear in `CometChatMessageList` automatically +- The `CometChatConversations` list won't update -const authKey = "AUTH_KEY"; -const UID = "user1"; -const name = "Kevin Fernandez"; +For messages to appear in the UI, use the `CometChatMessageComposer` component, or manually publish the event after sending: -var user = new CometChat.User(UID); -user.setName(name); -CometChatUIKit.updateUser(user, authKey) - .then((user) => { - console.log("user updated", user); - }) - .catch(console.log); +```tsx +const publish = usePublishEvent(); +const msg = await CometChatUIKit.sendTextMessage(message); +publish({ type: "ui:message/sent", message: msg, status: CometChatMessageStatus.success }); ``` + - - - -```ts lines highlight={4-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package +### `CometChatUIKit.sendTextMessage(message)` -const authKey: string = "AUTH_KEY"; -const UID: string = "user1"; -const name: string = "Kevin Fernandez"; +Send a text message. Sets `muid` and `sentAt` if not already set. -var user = new CometChat.User(UID); -user.setName(name); -CometChatUIKit.updateUser(user, authKey) - .then((user: CometChat.User) => { - console.log("user updated", user); - }) - .catch(console.log); +```tsx +const textMessage = new CometChat.TextMessage("receiverUid", "Hello!", "user"); +const sent = await CometChatUIKit.sendTextMessage(textMessage); ``` - - - - -*** - -### Base Message - -#### Text message - -Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object. - - - -```tsx lines highlight={5-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package +**Returns:** `Promise` -const receiverID = "UID"; -const messageText = "Hello world!"; -const receiverType = CometChatUIKitConstants.MessageReceiverType.user; -const textMessage = new CometChat.TextMessage( - receiverID, - messageText, - receiverType -); +### `CometChatUIKit.sendMediaMessage(message)` -CometChatUIKit.sendTextMessage(textMessage) - .then((message) => { - console.log("Message sent successfully:", message); - }) - .catch(console.log); -``` +Send a media message (image, video, audio, file). - - - -```tsx lines highlight={5-6} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package - -const receiverID = "GUID"; -const messageText = "Hello world!"; -const receiverType = CometChatUIKitConstants.MessageReceiverType.group; -const textMessage = new CometChat.TextMessage( - receiverID, - messageText, - receiverType -); - -CometChatUIKit.sendMessage(textMessage) - .then((message) => { - console.log("Message sent successfully:", message); - }) - .catch(console.log); +```tsx +const mediaMessage = new CometChat.MediaMessage("receiverUid", file, "image", "user"); +const sent = await CometChatUIKit.sendMediaMessage(mediaMessage); ``` - - - - -*** - -#### Media message +**Returns:** `Promise` -Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object. +### `CometChatUIKit.sendCustomMessage(message)` - -Replace `INPUT FILE OBJECT` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object. - +Send a custom message (polls, location, etc.). - - -```tsx lines highlight={5} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package - -const receiverID = "UID"; -const messageType = CometChatUIKitConstants.MessageTypes.file; -const receiverType = CometChatUIKitConstants.MessageReceiverType.user; -const mediaMessage = new CometChat.MediaMessage( - receiverID, - `INPUT FILE OBJECT`, - messageType, - receiverType -); - -CometChatUIKit.sendMediaMessage(mediaMessage) - .then((message) => { - console.log("Media message sent successfully", message); - }) - .catch(console.log); +```tsx +const customMessage = new CometChat.CustomMessage("receiverUid", "user", "location", { latitude: 37.7749, longitude: -122.4194 }); +const sent = await CometChatUIKit.sendCustomMessage(customMessage); ``` - - - -```tsx lines highlight={5} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package - -const receiverID = "GUID"; -const messageType = CometChatUIKitConstants.MessageTypes.file; -const receiverType = CometChatUIKitConstants.MessageReceiverType.group; -const mediaMessage = new CometChat.MediaMessage( - receiverID, - `INPUT FILE OBJECT`, - messageType, - receiverType -); - -CometChatUIKit.sendMediaMessage(mediaMessage) - .then((message) => { - console.log("Media message sent successfully", message); - }) - .catch(console.log); -``` - - - - - -*** - -#### Custom message - -Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object. - - - -```tsx lines highlight={5,7,8} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package - -const receiverID = "UID"; -const customData = { - latitude: "50.6192171633316", - longitude: "-72.68182268750002", -}; -const customType = "location"; -const receiverType = CometChatUIKitConstants.MessageReceiverType.user; -const customMessage = new CometChat.CustomMessage( - receiverID, - receiverType, - customType, - customData -); - -CometChatUIKit.sendCustomMessage(customMessage) - .then((message) => { - console.log("custom message sent successfully", message); - }) - .catch(console.log); -``` - - - - -```tsx lines highlight={5,7,8} -import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package -import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package - -const receiverID = "GUID"; -const customData = { - latitude: "50.6192171633316", - longitude: "-72.68182268750002", -}; -const customType = "location"; -const receiverType = CometChatUIKitConstants.MessageReceiverType.group; -const customMessage = new CometChat.CustomMessage( - receiverID, - receiverType, - customType, - customData -); - -CometChatUIKit.sendCustomMessage(customMessage) - .then((message) => { - console.log("custom message sent successfully", message); - }) - .catch(console.log); -``` - - - - +**Returns:** `Promise` diff --git a/ui-kit/react/v7/migration-overview.mdx b/ui-kit/react/migration-overview.mdx similarity index 87% rename from ui-kit/react/v7/migration-overview.mdx rename to ui-kit/react/migration-overview.mdx index 67e9005d7..16233a6b8 100644 --- a/ui-kit/react/v7/migration-overview.mdx +++ b/ui-kit/react/migration-overview.mdx @@ -10,7 +10,7 @@ description: "Migration guide covering breaking changes, architecture shifts, an | --- | --- | | Package | `@cometchat/chat-uikit-react` v6 → v7 | | React minimum | `>=18.0.0 <21.0.0` | -| New peer dep | `dompurify` ^3.3.1 | +| New peer dep | `dompurify` 3.3.1 | | Removed dep | `rxjs` (no longer needed) | | Init change | `CometChatProvider` (declarative) or manual `CometChatUIKit.init()` (both work) | | Extensibility | `DataSource`/`ChatConfigurator` → `CometChatMessagePlugin` interface | @@ -39,16 +39,16 @@ v7 is a ground-up rewrite that replaces global singletons with React-native patt ### 1. Update Dependencies ```bash -npm install @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@^4.1.9 dompurify@^3.3.1 +npm install @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@^4.1.10 dompurify@3.3.1 npm uninstall rxjs # No longer needed for CometChat ``` | Package | v6 | v7 | | --- | --- | --- | | `@cometchat/chat-uikit-react` | `^6.x` | `^7.0.0` | -| `@cometchat/chat-sdk-javascript` | `^4.x` | `^4.1.9` (peer dep) | +| `@cometchat/chat-sdk-javascript` | `^4.x` | `^4.1.10` (peer dep) | | `react` | `>=18` | `>=18 <21` | -| `dompurify` | — | `^3.3.1` (new peer dep) | +| `dompurify` | — | `3.3.1` (new peer dep) | | `rxjs` | Required | Not needed | | `@cometchat/calls-sdk-javascript` | Optional | Optional (unchanged) | @@ -79,23 +79,9 @@ CometChatUIKit.login("uid").then(() => setLoggedIn(true)); **Option B: Manual (same as v6)** -You can still use `CometChatUIKit.init()` + `login()` and compose individual providers. See [CometChatProvider — Individual Providers](/ui-kit/react/v7/cometchat-provider#approach-2%3A-individual-providers-advanced). +You can still use `CometChatUIKit.init()` + `login()` and compose individual providers. See [CometChatProvider — Individual Providers](/ui-kit/react/cometchat-provider#approach-2%3A-individual-providers-advanced). -### 3. Update CSS Import - -```tsx title="v6" -// App.css -@import url("@cometchat/chat-uikit-react/css-variables.css"); -``` - -```tsx title="v7" -// App.tsx (or main.tsx) -import "@cometchat/chat-uikit-react/styles"; -``` - -The CSS variables are the same — just the import mechanism changed. - -### 4. Replace DataSource/Decorator with Plugins +### 3. Replace DataSource/Decorator with Plugins ```tsx title="v6" class MyDecorator extends DataSourceDecorator { @@ -118,9 +104,9 @@ const MyPlugin: CometChatMessagePlugin = { ``` -See [Plugins Overview](/ui-kit/react/v7/plugins/overview) for the full guide. +See [Plugins Overview](/ui-kit/react/plugins/overview) for the full guide. -### 5. Replace RxJS Event Subscriptions +### 4. Replace RxJS Event Subscriptions ```tsx title="v6" import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; @@ -138,9 +124,9 @@ useCometChatEvents((event) => { }); ``` -See [Event System](/ui-kit/react/v7/event-system) for the full event catalog. +See [Event System](/ui-kit/react/event-system) for the full event catalog. -### 6. Update Component Props +### 5. Update Component Props Most component props are unchanged. Key patterns to watch for: @@ -153,9 +139,9 @@ Most component props are unchanged. Key patterns to watch for: | Templates | `templates` prop | Plugin system (removed from components) | | Text formatters on lists | `textFormatters` prop | Plugin system (removed from list components) | -For the full prop-by-prop reference, see [Property Changes](/ui-kit/react/v7/migration-property-changes). +For the full prop-by-prop reference, see [Property Changes](/ui-kit/react/migration-property-changes). -### 7. Update Theming (Minor) +### 6. Update Theming (Minor) CSS variables are the same between v6 and v7. The only change is how you set the theme: @@ -174,7 +160,7 @@ Or use the `useTheme()` hook for runtime switching: const { theme, setTheme } = useTheme(); ``` -### 8. Enable Calling (If Used) +### 7. Enable Calling (If Used) Calling is now opt-in: @@ -243,16 +229,16 @@ The flat API is fully backward-compatible. Compound composition is optional for ## Next Steps - + Full prop-by-prop migration reference for every component - + New declarative setup with both approaches explained - + The new plugin system that replaces DataSource - + Unified event bus replacing RxJS Subjects diff --git a/ui-kit/react/v7/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx similarity index 99% rename from ui-kit/react/v7/migration-property-changes.mdx rename to ui-kit/react/migration-property-changes.mdx index 5df5b9b42..e968b0b5a 100644 --- a/ui-kit/react/v7/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -8,7 +8,7 @@ description: "Complete prop migration reference for all components from v6 to v7 | Package | Migration from | Key changes | Reference | | --- | --- | --- | --- | -| `@cometchat/chat-uikit-react` | v6 → v7 | Plugin system replaces templates/textFormatters; compound components replace string props; individual hide*Option props consolidated; view props become render props on MessageBubble | [Migration Overview](/ui-kit/react/v7/migration-overview) | +| `@cometchat/chat-uikit-react` | v6 → v7 | Plugin system replaces templates/textFormatters; compound components replace string props; individual hide*Option props consolidated; view props become render props on MessageBubble | [Migration Overview](/ui-kit/react/migration-overview) | @@ -523,10 +523,10 @@ New root-level props: `isOpen`, `onClose`, `layoutMode`, `title`. ## Next Steps - + Architecture changes and step-by-step checklist - + Browse all v7 components diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 0881658c9..8c99865f6 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -1,7 +1,7 @@ --- title: "Conversation List + Message View" sidebarTitle: "Conversation List + Message View" -description: "Build CometChat UI Kit conversation list and message view layouts in Next.js with navigation, headers, lists, and composers." +description: "Build a two-panel conversation list + message view layout in Next.js (App Router) with CometChat UI Kit." --- @@ -9,26 +9,23 @@ description: "Build CometChat UI Kit conversation list and message view layouts | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Next.js | +| Framework | Next.js (App Router) | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | -| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/integration-nextjs) first | +| SSR | Component loaded with `dynamic(() => import(...), { ssr: false })` | | Pattern | WhatsApp Web, Slack, Microsoft Teams | -This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. +This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/integration-nextjs) (project created, UI Kit installed, init + login working). - + -[](https://link.cometchat.com/next-conversation-list-message) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. --- @@ -42,347 +39,143 @@ Three sections working together: --- -## Step 1 — Create the Sidebar Component - - - - - - - - - - - - - - - -```tsx title="CometChatSelector.tsx" lines -import { useEffect, useState } from "react"; -import { Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react"; -import "./CometChatSelector.css"; - -interface SelectorProps { - onSelectorItemClicked?: (input: User | Group | Conversation, type: string) => void; -} - -export const CometChatSelector = (props: SelectorProps) => { - const { onSelectorItemClicked = () => {} } = props; - const [loggedInUser, setLoggedInUser] = useState(); - const [activeItem, setActiveItem] = useState< - CometChat.Conversation | CometChat.User | CometChat.Group | undefined - >(); - - useEffect(() => { - const user = CometChatUIKitLoginListener.getLoggedInUser(); - setLoggedInUser(user); - }, []); - - return ( - <> - {loggedInUser && ( - { - setActiveItem(e); - onSelectorItemClicked(e, "updateSelectedItem"); - }} - /> - )} - - ); -}; -``` - - - - -```css title="CometChatSelector.css" lines -.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { - background: var(--cometchat-icon-color-primary); -} - -.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover { - background: var(--cometchat-icon-color-highlight); -} - -.cometchat-list__header-search-bar { - border-right: none; -} - -.cometchat .cometchat-menu-list__sub-menu-list-item { - text-align: left; -} - -.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list { - width: 212px; - top: 40px !important; - left: 172px !important; -} - -#logged-in-user { - border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); -} - -#logged-in-user .cometchat-menu-list__sub-menu-item-title, -#logged-in-user .cometchat-menu-list__sub-menu-list-item { - cursor: default; -} - -.cometchat-menu-list__sub-menu-list-item-icon-log-out { - background-color: var(--cometchat-error-color, #F44649); -} - -.cometchat-menu-list__sub-menu-item-title-log-out { - color: var(--cometchat-error-color, #F44649); -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { - cursor: pointer; -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu { - box-shadow: none; -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon { - background-color: var(--cometchat-icon-color-primary, #141414); - width: 24px; - height: 24px; -} -``` - - - - ---- - -## Step 2 — Create the CometChatNoSSR Component - -This component handles init, login, and renders the full chat experience. It runs client-side only. +## Full Code - - - - - - - - - - +Create the client component with the chat UI, then import it dynamically in your page. - - +```tsx title="app/chat/CometChatClient.tsx" +'use client'; -```tsx title="CometChatNoSSR.tsx" lines highlight={15-17, 20} -import React, { useEffect, useState } from "react"; +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatMessageComposer, + CometChatProvider, + CometChatConversations, CometChatMessageHeader, CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatSelector } from "../CometChatSelector/CometChatSelector"; -import "./CometChatNoSSR.css"; - -// Replace with your actual credentials -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; - -const UID = "cometchat-uid-1"; // Replace with your actual UID +import "@cometchat/chat-uikit-react/styles"; -const CometChatNoSSR: React.FC = () => { - const [user, setUser] = useState(undefined); +export default function CometChatClient() { const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); - useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful", { user }); - setUser(user); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); - }, []); - - return user ? ( -
-
- { - let item = activeItem; - if (activeItem instanceof CometChat.Conversation) { - item = activeItem.getConversationWith(); - } - if (item instanceof CometChat.User) { - setSelectedUser(item as CometChat.User); - setSelectedGroup(undefined); - } else if (item instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(item as CometChat.Group); - } else { - setSelectedUser(undefined); - setSelectedGroup(undefined); - } - }} - /> -
+ const handleConversationClick = (conversation: CometChat.Conversation) => { + const entity = conversation.getConversationWith(); + if (conversation.getConversationType() === "user") { + setSelectedUser(entity as CometChat.User); + setSelectedGroup(undefined); + } else { + setSelectedGroup(entity as CometChat.Group); + setSelectedUser(undefined); + } + }; - {selectedUser || selectedGroup ? ( -
- - - + return ( + +
+
+
- ) : ( -
Select a conversation to start chatting
- )} -
- ) : undefined; -}; - -export default CometChatNoSSR; -``` - - + {selectedUser || selectedGroup ? ( +
+ + + +
+ ) : ( +
+ Select a conversation to start chatting +
+ )} +
+ + ); +} +``` -```css title="CometChatNoSSR.css" lines +```css title="app/chat/chat.module.css" .conversations-with-messages { display: flex; - height: 100%; + height: 100vh; width: 100%; } .conversations-wrapper { + width: 360px; height: 100%; - width: 480px; + border-right: 1px solid #eee; overflow: hidden; display: flex; flex-direction: column; - height: inherit; -} - -.conversations-wrapper > .cometchat { - overflow: hidden; } .messages-wrapper { - width: calc(100% - 480px); + flex: 1; height: 100%; display: flex; flex-direction: column; } .empty-conversation { - height: 100%; - width: 100%; + flex: 1; display: flex; justify-content: center; align-items: center; - background: white; + background: var(--cometchat-background-color-03, #f5f5f5); color: var(--cometchat-text-color-secondary, #727272); font: var(--cometchat-font-body-regular, 400 14px Roboto); } - -.cometchat .cometchat-message-composer { - border-radius: 0px; -} ``` - - - ---- - -## Step 3 — Disable SSR in Your Page +```tsx title="app/chat/page.tsx" +import dynamic from 'next/dynamic'; -Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side. +const CometChatClient = dynamic(() => import('./CometChatClient'), { ssr: false }); -```tsx title="index.tsx" lines -import dynamic from "next/dynamic"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -const CometChatComponent = dynamic( - () => import("../CometChatNoSSR/CometChatNoSSR"), - { ssr: false } -); - -export default function Home() { - return ; +export default function ChatPage() { + return ; } ``` -CometChat depends on browser APIs (`window`, `WebSocket`, `document`). Setting `ssr: false` ensures the component only renders on the client, avoiding hydration errors. +--- + +## How It Works + +1. **`'use client'`** marks the component as a Client Component — required because CometChat uses browser APIs. +2. **`dynamic(() => import(...), { ssr: false })`** prevents the component from rendering on the server, avoiding `window is not defined` errors. +3. **CometChatProvider** wraps the entire tree — it supplies theme, locale, and event context to all CometChat components. +4. **CometChatConversations** renders the sidebar list. When a user clicks a conversation, `onItemClick` fires with the `Conversation` object. +5. **handleConversationClick** extracts the `User` or `Group` from the conversation and stores it in state. +6. **Message components** (`MessageHeader`, `MessageList`, `MessageComposer`) receive either `user` or `group` as a prop — never both at the same time. --- -## Step 4 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the conversation list on the left. Tap any conversation to load messages on the right. +Open `http://localhost:3000/chat`. You should see the conversation list on the left. Click any conversation to load messages on the right. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Single chat window without a sidebar + + + Tabbed navigation with Chats, Calls, Users Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> - Back to the main setup guide - - - Chat features included out of the box + + Customize colors, fonts, and styles diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx deleted file mode 100644 index 71993f00e..000000000 --- a/ui-kit/react/next-js-integration.mdx +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: "Next.js Integration" -sidebarTitle: "Integration" -description: "Integrate CometChat React UI Kit with Next.js using client components, app credentials, package setup, initialization, and login." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 | -| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | -| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | -| Order | `init()` → `login()` → render. Breaking this order = blank screen | -| Auth Key | Dev/testing only. Use Auth Token in production | -| SSR | CometChat requires browser APIs — use dynamic import with `ssr: false` | -| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) | -| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | - - - -This guide walks you through adding CometChat to a Next.js app. By the end you'll have a working chat UI. - - - - - - -CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In Next.js, always load CometChat components client-side using dynamic imports with `ssr: false`. - - ---- - -## Integrate with AI Coding Agents - -Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have. - -```bash -npx @cometchat/skills add -``` - -Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs. - -Then in your IDE: - -``` -/cometchat add chat to my app -``` - -The skill detects your Next.js version and router type (App Router vs Pages Router), env prefix, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, nav, and components before proposing a placement, shows the plan, and waits for your approval before writing code. - -After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, floating widget, production auth, user management, and diagnostics. - -Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills). - ---- - -## Prerequisites - -You need three things from the [CometChat Dashboard](https://app.cometchat.com/): - -| Credential | Where to find it | -| --- | --- | -| App ID | Dashboard → Your App → Credentials | -| Auth Key | Dashboard → Your App → Credentials | -| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | - -You also need Node.js (v16+) and npm/yarn installed. - - -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. - - ---- - -## Step 1 — Create a Next.js Project - -```bash lines -npx create-next-app@latest my-app --typescript -cd my-app -``` - ---- - -## Step 2 — Install the UI Kit - - - -```bash lines -npm install @cometchat/chat-uikit-react -``` - - -```bash lines -yarn add @cometchat/chat-uikit-react -``` - - - -This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically. - -If you want voice/video calling, also install: - -```bash lines -npm install @cometchat/calls-sdk-javascript -``` - ---- - -## Step 3 — Initialize CometChat - - - - -```ts lines highlight={7-9} -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -/** - * CometChat Constants - Replace with your actual credentials - */ -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your actual App ID from CometChat - REGION: "REGION", // Replace with your App's Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token) -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - -CometChatUIKit.init(UIKitSettings) - ?.then(() => { - console.log("CometChat UI Kit initialized successfully."); - }) - .catch((error) => { - console.error("CometChat UI Kit initialization failed:", error); - }); -``` - - -```js lines highlight={7-9} -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -/** - * CometChat Constants - Replace with your actual credentials - */ -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your actual App ID from CometChat - REGION: "REGION", // Replace with your App's Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token) -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - -CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("CometChat UI Kit initialized successfully."); - }) - .catch((error) => { - console.error("CometChat UI Kit initialization failed:", error); - }); -``` - - - - -`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently. Note the `?.then()` — in Next.js, `init()` may return `undefined` if settings are invalid. - - ---- - -## Step 4 — Login - -After init resolves, log the user in. For development, use one of the pre-created test UIDs: - -`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` - - - -```ts lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -const UID = "UID"; // Replace with your actual UID - -CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user: CometChat.User) => { - console.log("Login Successful:", { user }); - // Mount your app - }) - .catch(console.log); - } else { - // Already logged in — mount your app - } -}); -``` - - -```js lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -const UID = "UID"; // Replace with your actual UID - -CometChatUIKit.getLoggedinUser().then((user) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful:", { user }); - // Mount your app - }) - .catch(console.log); - } else { - // Already logged in — mount your app - } -}); -``` - - - -Key points: -- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily. -- `login(uid)` skips the API call if a session already exists and returns the cached user. -- Components must not render until login resolves — use a state flag to gate rendering. - - -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. - - ---- - -## Step 5 — Add the CSS Import - -Add this line at the top of your global CSS file (e.g. `globals.css`): - -```css title="globals.css" lines -@import url("@cometchat/chat-uikit-react/css-variables.css"); -``` - -Also ensure your global CSS sets `height: 100%` on the root elements: - -```css title="globals.css" lines -html, -body { - height: 100%; -} - -#__next { - height: 100%; -} -``` - -Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport. - ---- - -## Step 6 — Choose a Chat Experience - -Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide. - -### Conversation List + Message View - -Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack. - -- Two-panel layout with conversation list and active chat window -- Switch between one-to-one and group conversations -- Tap-to-view on mobile — tapping a conversation opens the message view -- Real-time updates and message sync across sessions - - - - - -[](https://link.cometchat.com/next-conversation-list-message) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -### One-to-One / Group Chat - -Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging. - -- Dedicated chat window for one-on-one or group messaging -- No conversation list — users go directly into the chat -- Full-screen experience optimized for mobile -- Ideal for support chat or community messaging - - - - - -[](https://link.cometchat.com/next-one-on-one) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -### Tab-Based Chat - -Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps. - -- Tab navigation between Chat, Call Logs, Users, and Settings -- Full-screen messaging within each tab -- Unified experience for conversations, call history, and settings -- Scales well for adding future features like notifications or contacts - - - - - -[](https://link.cometchat.com/next-tabs-sidebar-message) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -## Build Your Own Chat Experience - -Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - -- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling -- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK - ---- - -## Next Steps - - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - - Chat features included out of the box - - - Common issues and fixes - - diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 9f9878096..2ece04914 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -1,7 +1,7 @@ --- title: "One-to-One / Group Chat" sidebarTitle: "One-to-One / Group Chat" -description: "Build focused CometChat UI Kit chat screens in Next.js with headers, message lists, composers, users, groups, and direct navigation." +description: "Build a single chat window for one-to-one or group messaging in Next.js (App Router) with CometChat UI Kit." --- @@ -9,26 +9,23 @@ description: "Build focused CometChat UI Kit chat screens in Next.js with header | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Next.js | +| Framework | Next.js (App Router) | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | -| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/integration-nextjs) first | +| SSR | Component loaded with `dynamic(() => import(...), { ssr: false })` | | Pattern | Support chat, embedded widgets, focused messaging | This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/integration-nextjs) (project created, UI Kit installed, init + login working). - + -[](https://link.cometchat.com/next-one-on-one) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. --- @@ -42,222 +39,135 @@ Three components stacked vertically: --- -## Step 1 — Create the CometChatNoSSR Component - -This component handles init, login, fetches the target user/group, and renders the chat UI. It runs client-side only. +## Full Code - - - - - - - - - - +Create the client component with the chat UI, then import it dynamically in your page. - - +```tsx title="app/chat/CometChatClient.tsx" +'use client'; -```tsx title="CometChatNoSSR.tsx" lines highlight={13-15, 19} -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatMessageComposer, + CometChatProvider, CometChatMessageHeader, CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import "./CometChatNoSSR.css"; +import "@cometchat/chat-uikit-react/styles"; -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; +const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with -// Fetch the user whose chat you want to load -const UID = "cometchat-uid-1"; - -const CometChatNoSSR: React.FC = () => { - const [user, setUser] = useState(undefined); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); +export default function CometChatClient() { + const [chatUser, setChatUser] = useState(undefined); useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login("cometchat-uid-2") - .then((user) => { - console.log("Login Successful", { user }); - setUser(user); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); + CometChat.getUser(RECIPIENT_UID).then( + (user) => setChatUser(user), + (error) => console.error("User fetch failed:", error) + ); }, []); - useEffect(() => { - if (user) { - CometChat.getUser(UID).then( - (user) => setSelectedUser(user), - (error) => console.log("User fetching failed with error:", error) - ); - - // To load a group chat instead, uncomment below: - // const GUID = "GUID"; - // CometChat.getGroup(GUID).then( - // (group) => setSelectedGroup(group), - // (error) => console.log("Group fetching failed with error:", error) - // ); - } - }, [user]); - - return user ? ( - <> - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Set a user or group UID in CometChatNoSSR.tsx to start chatting -
- )} - - ) : undefined; -}; - -export default CometChatNoSSR; + if (!chatUser) return
Loading chat...
; + + return ( + +
+ + + +
+ + ); +} ``` - - - -```css title="CometChatNoSSR.css" lines -.messages-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} +```tsx title="app/chat/page.tsx" +import dynamic from 'next/dynamic'; -.empty-conversation { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - background: white; - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} +const CometChatClient = dynamic(() => import('./CometChatClient'), { ssr: false }); -.cometchat .cometchat-message-composer { - border-radius: 0px; +export default function ChatPage() { + return ; } ``` - - - Key points: -- `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one. +- `'use client'` is required — CometChat components use browser APIs (DOM, WebSocket). +- `dynamic(() => import(...), { ssr: false })` prevents server-side rendering of the chat component. +- `CometChat.getUser(UID)` fetches the full user object from the SDK — you need a real user object, not a manually constructed one. - Pass either `user` or `group` to the message components, never both. -- The highlighted lines show where to set your credentials. +- The `RECIPIENT_UID` should be a user that exists in your CometChat app. Use one of the pre-created test UIDs: `cometchat-uid-1` through `cometchat-uid-5`. --- -## Switching Between User and Group Chat - -To load a group chat instead of one-to-one, replace the `getUser` call with `getGroup`: +## Switching to Group Chat -```tsx highlight={1} lines -const GUID = "GUID"; // Replace with your actual Group ID +To load a group chat instead of one-to-one, fetch a `Group` object and pass it to the message components: -CometChat.getGroup(GUID) - .then((group) => setSelectedGroup(group)) - .catch((error) => console.error("Failed to fetch group:", error)); -``` +```tsx title="app/chat/CometChatClient.tsx" +'use client'; ---- - -## Step 2 — Disable SSR in Your Page +import { useEffect, useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatProvider, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/styles"; -Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side. +const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID -```tsx title="index.tsx" lines -import dynamic from "next/dynamic"; -import "@cometchat/chat-uikit-react/css-variables.css"; +export default function CometChatClient() { + const [chatGroup, setChatGroup] = useState(undefined); -const CometChatComponent = dynamic( - () => import("../CometChatNoSSR/CometChatNoSSR"), - { ssr: false } -); + useEffect(() => { + CometChat.getGroup(GROUP_ID).then( + (group) => setChatGroup(group), + (error) => console.error("Group fetch failed:", error) + ); + }, []); -export default function Home() { - return ; + if (!chatGroup) return
Loading chat...
; + + return ( + +
+ + + +
+ + ); } ``` +The only difference: use `CometChat.getGroup(GUID)` instead of `CometChat.getUser(UID)`, and pass `group` instead of `user`. + --- -## Step 3 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the chat window load with the conversation for the UID you set. +Open `http://localhost:3000/chat`. You should see the chat window load with the conversation for the UID or GUID you set. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Two-panel layout with a sidebar + + + Tabbed navigation with Chats, Calls, Users Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> - Back to the main setup guide - - - Chat features included out of the box - diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 06a788584..901849d5d 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit." +description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in Next.js (App Router)." --- @@ -9,26 +9,23 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-react` | -| Framework | Next.js | -| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | -| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | +| Framework | Next.js (App Router) | +| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | +| Layout | Tabbed sidebar (Chat, Calls, Users) + message view | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/integration-nextjs) first | +| SSR | Component loaded with `dynamic(() => import(...), { ssr: false })` | | Pattern | Full-featured messaging app with multiple sections | -This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. +This guide builds a tabbed messaging UI — Chat, Calls, and Users tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/integration-nextjs) (project created, UI Kit installed, init + login working). - + -[](https://link.cometchat.com/next-tabs-sidebar-message) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. --- @@ -36,573 +33,270 @@ This assumes you've already completed [Next.js Integration](/ui-kit/react/next-j Three sections working together: -1. **Tab bar** — switches between Chats, Calls, Users, and Groups +1. **Tab bar** — switches between Chat, Calls, and Users 2. **Sidebar** — renders the list for the active tab 3. **Message view** — header + messages + composer for the selected item --- -## Step 1 — Create the Tab Component - - - - - - - - - - - - -Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets). - - - - - - - - - - - - - - - -```tsx title="CometChatTabs.tsx" lines -import { useState } from "react"; -import "./CometChatTabs.css"; - -const chatsIcon = "/assets/chats.svg"; -const callsIcon = "/assets/calls.svg"; -const usersIcon = "/assets/users.svg"; -const groupsIcon = "/assets/groups.svg"; - -export const CometChatTabs = (props: { - onTabClicked?: (tabItem: { name: string; icon?: string }) => void; - activeTab?: string; -}) => { - const { onTabClicked = () => {}, activeTab } = props; - const [hoverTab, setHoverTab] = useState(""); - - const tabItems = [ - { name: "CHATS", icon: chatsIcon }, - { name: "CALLS", icon: callsIcon }, - { name: "USERS", icon: usersIcon }, - { name: "GROUPS", icon: groupsIcon }, - ]; - - return ( -
- {tabItems.map((tabItem) => { - const isActive = - activeTab === tabItem.name.toLowerCase() || - hoverTab === tabItem.name.toLowerCase(); - - return ( -
onTabClicked(tabItem)} - > -
setHoverTab(tabItem.name.toLowerCase())} - onMouseLeave={() => setHoverTab("")} - /> -
setHoverTab(tabItem.name.toLowerCase())} - onMouseLeave={() => setHoverTab("")} - > - {tabItem.name} -
-
- ); - })} -
- ); -}; -``` - - - +## Full Code -```css title="CometChatTabs.css" lines -.cometchat-tab-component { - display: flex; - width: 100%; - padding: 0px 8px; - align-items: flex-start; - gap: 8px; - border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5); - border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5); - background: var(--cometchat-background-color-01, #FFF); -} - -.cometchat-tab-component__tab { - display: flex; - padding: 12px 0px 10px 0px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 4px; - flex: 1 0 0; - min-height: 48px; -} - -.cometchat-tab-component__tab-icon { - display: flex; - width: 32px; - height: 32px; - justify-content: center; - align-items: center; - background: var(--cometchat-icon-color-secondary); - -webkit-mask-size: contain; - -webkit-mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - cursor: pointer; -} - -.cometchat-tab-component__tab-text { - color: var(--cometchat-text-color-secondary, #727272); - text-align: center; - font: var(--cometchat-font-caption1-medium, 500 12px Roboto); - cursor: pointer; -} - -.cometchat-tab-component__tab-icon-active { - background: var(--cometchat-icon-color-highlight); -} - -.cometchat-tab-component__tab-text-active { - color: var(--cometchat-text-color-highlight); -} -``` +Create the client component with the tabbed UI, then import it dynamically in your page. - - +```tsx title="app/chat/CometChatClient.tsx" +'use client'; ---- - -## Step 2 — Create the Sidebar Component - -The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom. - - - - - - - - - - - - - - - -```tsx title="CometChatSelector.tsx" lines -import { useEffect, useState } from "react"; -import { - Call, - Conversation, - Group, - User, - CometChat, -} from "@cometchat/chat-sdk-javascript"; +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatCallLogs, + CometChatProvider, CometChatConversations, - CometChatGroups, - CometChatUIKitLoginListener, CometChatUsers, + CometChatCallLogs, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChatTabs } from "../CometChatTabs/CometChatTabs"; +import "@cometchat/chat-uikit-react/styles"; -interface SelectorProps { - onSelectorItemClicked?: ( - input: User | Group | Conversation | Call, - type: string - ) => void; -} +type Tab = "chat" | "calls" | "users"; -export const CometChatSelector = (props: SelectorProps) => { - const { onSelectorItemClicked = () => {} } = props; - const [loggedInUser, setLoggedInUser] = useState(); - const [activeItem, setActiveItem] = useState< - Conversation | User | Group | Call | undefined - >(); - const [activeTab, setActiveTab] = useState("chats"); +export default function CometChatClient() { + const [activeTab, setActiveTab] = useState("chat"); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); - useEffect(() => { - const user = CometChatUIKitLoginListener.getLoggedInUser(); - setLoggedInUser(user); - }, []); + const handleConversationClick = (conversation: CometChat.Conversation) => { + const entity = conversation.getConversationWith(); + if (conversation.getConversationType() === "user") { + setSelectedUser(entity as CometChat.User); + setSelectedGroup(undefined); + } else { + setSelectedGroup(entity as CometChat.Group); + setSelectedUser(undefined); + } + }; + + const handleUserClick = (user: CometChat.User) => { + setSelectedUser(user); + setSelectedGroup(undefined); + }; + + const handleCallClick = (call: any) => { + const initiator = call.getInitiator(); + const receiver = call.getReceiver(); + + // Determine the other party in the call + if (receiver instanceof CometChat.User) { + setSelectedUser(receiver); + setSelectedGroup(undefined); + } else if (receiver instanceof CometChat.Group) { + setSelectedUser(undefined); + setSelectedGroup(receiver); + } else if (initiator instanceof CometChat.User) { + setSelectedUser(initiator); + setSelectedGroup(undefined); + } + }; return ( - <> - {loggedInUser && ( - <> - {activeTab === "chats" && ( - { - setActiveItem(item); - onSelectorItemClicked(item, "updateSelectedItem"); - }} - /> - )} - - {activeTab === "calls" && ( - { - setActiveItem(item); - onSelectorItemClicked(item, "updateSelectedItemCall"); - }} - /> - )} - - {activeTab === "users" && ( - { - setActiveItem(item); - onSelectorItemClicked(item, "updateSelectedItemUser"); - }} - /> - )} - - {activeTab === "groups" && ( - { - setActiveItem(item); - onSelectorItemClicked(item, "updateSelectedItemGroup"); - }} - /> - )} - - )} - - setActiveTab(item.name.toLowerCase())} - /> - - ); -}; -``` - - - - -```css title="CometChatSelector.css" lines -.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { - background: var(--cometchat-icon-color-primary); -} - -.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover { - background: var(--cometchat-icon-color-highlight); -} - -.cometchat-list__header-search-bar { - border-right: none; -} - -.cometchat .cometchat-menu-list__sub-menu-list-item { - text-align: left; -} + +
+
+
+ + + +
-.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list { - width: 212px; - top: 40px !important; - left: 172px !important; -} +
+ {activeTab === "chat" && ( + + )} + {activeTab === "calls" && ( + + )} + {activeTab === "users" && ( + + )} +
+
-#logged-in-user { - border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); + {selectedUser || selectedGroup ? ( +
+ + + +
+ ) : ( +
+ Select a conversation to start chatting +
+ )} +
+ + ); } +``` -#logged-in-user .cometchat-menu-list__sub-menu-item-title, -#logged-in-user .cometchat-menu-list__sub-menu-list-item { - cursor: default; +```css title="app/chat/chat.module.css" +.tabbed-chat { + display: flex; + height: 100vh; + width: 100%; } -.cometchat-menu-list__sub-menu-list-item-icon-log-out { - background-color: var(--cometchat-error-color, #F44649); +.sidebar { + width: 360px; + height: 100%; + display: flex; + flex-direction: column; + border-right: 1px solid #eee; } -.cometchat-menu-list__sub-menu-item-title-log-out { - color: var(--cometchat-error-color, #F44649); +.tab-bar { + display: flex; + border-bottom: 1px solid #eee; + background: var(--cometchat-background-color-01, #fff); } -.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { +.tab-button { + flex: 1; + padding: 12px 0; + border: none; + background: none; cursor: pointer; + font: var(--cometchat-font-body-medium, 500 14px Roboto); + color: var(--cometchat-text-color-secondary, #727272); + border-bottom: 2px solid transparent; + transition: color 0.2s, border-color 0.2s; } -.chat-menu .cometchat .cometchat-menu-list__sub-menu { - box-shadow: none; -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon { - background-color: var(--cometchat-icon-color-primary, #141414); - width: 24px; - height: 24px; +.tab-button:hover { + color: var(--cometchat-text-color-primary, #141414); } -``` - - - - ---- - -## Step 3 — Create the CometChatNoSSR Component - -This component handles init, login, and renders the full tabbed chat experience. It runs client-side only. - - - - - - - - - - - - - - - -```tsx title="CometChatNoSSR.tsx" highlight={15-17, 20} lines -import React, { useEffect, useState } from "react"; -import { - CometChatMessageComposer, - CometChatMessageHeader, - CometChatMessageList, - CometChatUIKit, - UIKitSettingsBuilder, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatSelector } from "../CometChatSelector/CometChatSelector"; -import "./CometChatNoSSR.css"; -// Replace with your actual credentials -const COMETCHAT_CONSTANTS = { - APP_ID: "", // Replace with your App ID - REGION: "", // Replace with your Region - AUTH_KEY: "", // Replace with your Auth Key (dev only) -}; - -const UID = "cometchat-uid-4"; // Replace with your actual UID - -const CometChatNoSSR: React.FC = () => { - const [user, setUser] = useState(undefined); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - - useEffect(() => { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - - CometChatUIKit.init(UIKitSettings) - ?.then(() => { - console.log("Initialization completed successfully"); - CometChatUIKit.getLoggedinUser().then((loggedInUser) => { - if (!loggedInUser) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful", { user }); - setUser(user); - }) - .catch((error) => console.error("Login failed", error)); - } else { - console.log("Already logged-in", { loggedInUser }); - setUser(loggedInUser); - } - }); - }) - .catch((error) => console.error("Initialization failed", error)); - }, []); - - return user ? ( -
-
- { - let item = activeItem; - if (activeItem instanceof CometChat.Conversation) { - item = activeItem.getConversationWith(); - } - if (item instanceof CometChat.User) { - setSelectedUser(item as CometChat.User); - setSelectedGroup(undefined); - } else if (item instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(item as CometChat.Group); - } else { - setSelectedUser(undefined); - setSelectedGroup(undefined); - } - }} - /> -
- - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
Select a conversation to start chatting
- )} -
- ) : undefined; -}; - -export default CometChatNoSSR; -``` - - - - -```css title="CometChatNoSSR.css" lines -.conversations-with-messages { - display: flex; - height: 100%; - width: 100%; +.tab-button--active { + color: var(--cometchat-text-color-highlight, #6851d6); + border-bottom-color: var(--cometchat-primary-color, #6851d6); } -.conversations-wrapper { - height: 100%; - width: 480px; +.sidebar-list { + flex: 1; overflow: hidden; display: flex; flex-direction: column; - height: inherit; -} - -.conversations-wrapper > .cometchat { - overflow: hidden; } .messages-wrapper { - width: calc(100% - 480px); + flex: 1; height: 100%; display: flex; flex-direction: column; } .empty-conversation { - height: 100%; - width: 100%; + flex: 1; display: flex; justify-content: center; align-items: center; - background: white; + background: var(--cometchat-background-color-03, #f5f5f5); color: var(--cometchat-text-color-secondary, #727272); font: var(--cometchat-font-body-regular, 400 14px Roboto); } - -.cometchat .cometchat-message-composer { - border-radius: 0px; -} ``` - - +```tsx title="app/chat/page.tsx" +import dynamic from 'next/dynamic'; -How it works: -- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback. -- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`. -- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared. +const CometChatClient = dynamic(() => import('./CometChatClient'), { ssr: false }); ---- +export default function ChatPage() { + return ; +} +``` -## Step 4 — Disable SSR in Your Page +--- -Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side. +## How It Works -```tsx title="index.tsx" lines -import dynamic from "next/dynamic"; -import "@cometchat/chat-uikit-react/css-variables.css"; +1. **`'use client'`** marks the component as a Client Component — required because CometChat uses browser APIs. +2. **`dynamic(() => import(...), { ssr: false })`** prevents the component from rendering on the server. +3. **Tab state** — `activeTab` controls which list component renders in the sidebar. +4. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one. +5. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel. +6. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components. -const CometChatComponent = dynamic( - () => import("../CometChatNoSSR/CometChatNoSSR"), - { ssr: false } -); +--- -export default function Home() { - return ; -} +## Adding More Tabs + +To add a Groups tab, import `CometChatGroups` and add another tab button + conditional render: + +```tsx +import { CometChatGroups } from "@cometchat/chat-uikit-react"; + +// Add to Tab type: +type Tab = "chat" | "calls" | "users" | "groups"; + +// Add button in tab-bar: + + +// Add in sidebar-list: +{activeTab === "groups" && ( + { + setSelectedGroup(group); + setSelectedUser(undefined); + }} + /> +)} ``` +You can follow the same pattern for any additional tabs (Settings, Contacts, etc.). + --- -## Step 5 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -pnpm dev -``` - - -```bash lines -yarn dev -``` - - -You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right. +Open `http://localhost:3000/chat`. You should see the tab bar at the top of the sidebar. Switch between Chats, Calls, and Users — clicking any item loads the message view on the right. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Two-panel layout without tabs Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> - Back to the main setup guide - - - Chat features included out of the box + + Customize colors, fonts, and styles diff --git a/ui-kit/react/notification-feed.mdx b/ui-kit/react/notification-feed.mdx deleted file mode 100644 index f963cfc39..000000000 --- a/ui-kit/react/notification-feed.mdx +++ /dev/null @@ -1,758 +0,0 @@ ---- -title: "Notification Feed" -description: "Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting." ---- - - -```json -{ - "component": "CometChatNotificationFeed", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatNotificationFeed } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-react, real-time updates, and automatic engagement reporting.", - "cssRootClass": ".cometchat-notification-feed", - "props": { - "data": { - "title": { "type": "string", "default": "\"Notifications\"" }, - "scrollToItemId": { "type": "string", "default": "undefined", "note": "Deep link to a specific feed item" }, - "notificationFeedRequestBuilder": { "type": "NotificationFeedRequestBuilder", "default": "SDK default (20 per page)" }, - "notificationCategoriesRequestBuilder": { "type": "NotificationCategoriesRequestBuilder", "default": "SDK default (50 per page)" } - }, - "callbacks": { - "onItemClick": "(feedItem: NotificationFeedItem) => void", - "onActionClick": "(feedItem: NotificationFeedItem, action: CardAction) => void", - "onError": "(error: CometChat.CometChatException) => void", - "onBackPress": "() => void" - }, - "visibility": { - "showHeader": { "type": "boolean", "default": true }, - "showBackButton": { "type": "boolean", "default": false }, - "showFilterChips": { "type": "boolean", "default": true } - }, - "viewSlots": { - "headerView": "React.ReactNode", - "emptyStateView": "React.ReactNode", - "errorStateView": "React.ReactNode", - "loadingStateView": "React.ReactNode" - }, - "cards": { - "cardThemeMode": { "type": "\"auto\" | \"light\" | \"dark\"", "default": "\"auto\"" }, - "cardThemeOverride": { "type": "Record", "default": "undefined" } - }, - "style": { - "type": "CometChatNotificationFeedStyle", - "properties": { - "backgroundColor": "string", - "width": "string", - "height": "string", - "headerTitleColor": "string", - "headerTitleFont": "string", - "chipActiveBackgroundColor": "string", - "chipActiveTextColor": "string", - "chipInactiveBackgroundColor": "string", - "chipInactiveTextColor": "string", - "chipBorderColor": "string", - "badgeBackgroundColor": "string", - "badgeTextColor": "string", - "separatorColor": "string", - "timestampTextColor": "string", - "timestampFont": "string", - "cardBackgroundColor": "string", - "cardBorderColor": "string", - "cardBorderRadius": "number", - "cardBorderWidth": "number", - "unreadIndicatorColor": "string" - } - } - }, - "automaticBehaviors": [ - "Real-time updates via WebSocket listener", - "Delivery reporting on fetch", - "Read reporting on viewport visibility (IntersectionObserver)", - "Unread count polling every 30 seconds", - "Infinite scroll pagination", - "Timestamp grouping (Today, Yesterday, day name, date)", - "Category filter chips with unread badges", - "Mark all read button", - "Offline connectivity banner" - ], - "additionalExports": { - "CometChatNotificationBadge": "Standalone unread count badge component", - "useNotificationUnreadCount": "Hook for tracking unread count with shared polling" - } -} -``` - - -`CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a card using `@cometchat/cards-react`. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically. - - - - - ---- - -## Where It Fits - -`CometChatNotificationFeed` is a full-screen component. Drop it into a page or route. It manages its own data fetching, state, and real-time listeners — you just handle navigation callbacks. - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function NotificationsPage() { - return ( - window.history.back()} - onItemClick={(item) => { - // Handle item click (e.g., open detail or deep link) - }} - /> - ); -} -``` - ---- - -## Minimal Render - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function NotificationsDemo() { - return ( -
- -
- ); -} - -export default NotificationsDemo; -``` - -Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in. - -Root CSS class: `.cometchat-notification-feed` - ---- - -## Filtering Feed Items - -Control what loads using custom request builders: - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function UnreadNotifications() { - return ( - - ); -} -``` - -### Filter Options - -| Builder Method | Description | -| --- | --- | -| `.setLimit(number)` | Items per page (default 20, max 100) | -| `.setReadState(state)` | `"read"`, `"unread"`, or `"all"` | -| `.setCategory(string)` | Filter by category label | -| `.setChannelId(string)` | Filter by channel | -| `.setTags(string[])` | Filter by tags | -| `.setDateFrom(string)` | ISO 8601 date lower bound | -| `.setDateTo(string)` | ISO 8601 date upper bound | - ---- - -## Actions and Events - -### Callback Props - -#### onItemClick - -Fires when a feed item card is clicked. - -```tsx lines - { - console.log("Item clicked:", item.getId()); - }} -/> -``` - -#### onActionClick - -Fires when an interactive element (button, link) inside a card is clicked. The `action` object contains the action type, parameters, and the element ID that triggered it. - -```tsx lines - { - const { type, params, elementId } = action; - switch (type) { - case "openUrl": - window.open(params.url, "_blank"); - break; - case "chatWithUser": - // Navigate to chat with params.uid - break; - case "chatWithGroup": - // Navigate to group chat with params.guid - break; - } - }} -/> -``` - -#### onError - -Fires when an internal error occurs (network failure, SDK exception). - -```tsx lines - { - console.error("Feed error:", error.message); - }} -/> -``` - -#### onBackPress - -Fires when the back button in the header is clicked. - -```tsx lines - window.history.back()} -/> -``` - -### Automatic Behaviors - -The component handles these automatically — no manual setup needed: - -| Behavior | Description | -| --- | --- | -| Real-time updates | New items appear at the top via WebSocket `NotificationFeedListener` | -| Delivery reporting | Items are reported as delivered when fetched | -| Read reporting | Items are reported as read when visible in viewport (IntersectionObserver) | -| Unread count polling | Polls unread count every 30 seconds to update badges | -| Infinite scroll | Fetches next page when scrolling near the bottom | -| Timestamp grouping | Groups items as "Today", "Yesterday", day name, or date | -| Category filtering | Filter chips row with per-category unread badges | -| Mark all read | Header button to mark all notifications as read | -| Offline banner | Shows connectivity warning when offline | - ---- - -## Custom View Slots - -### headerView - -Replace the entire header: - -```tsx lines - -

My Notifications

-
- } -/> -``` - -### State Views - -```tsx lines - -

No notifications yet

-
- } - errorStateView={ -
-

Something went wrong

-
- } - loadingStateView={ -
-
-
- } -/> -``` - ---- - -## Styling - -The component uses CSS variables from the CometChat theme system. Pass a `style` prop for programmatic overrides, or use CSS classes for full control. - -### Style Prop - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; - -function StyledNotifications() { - return ( - - ); -} -``` - -### Style Properties - -| Property | Type | Description | -| --- | --- | --- | -| `backgroundColor` | string | Root container background | -| `width` | string | Container width | -| `height` | string | Container height | -| `headerTitleColor` | string | Header title text color | -| `headerTitleFont` | string | Header title font | -| `chipActiveBackgroundColor` | string | Selected filter chip background | -| `chipActiveTextColor` | string | Selected filter chip text color | -| `chipInactiveBackgroundColor` | string | Unselected filter chip background | -| `chipInactiveTextColor` | string | Unselected filter chip text color | -| `chipBorderColor` | string | Inactive chip border color | -| `badgeBackgroundColor` | string | Badge background color | -| `badgeTextColor` | string | Badge text color | -| `separatorColor` | string | Separator between items | -| `timestampTextColor` | string | Timestamp text color | -| `timestampFont` | string | Timestamp font | -| `cardBackgroundColor` | string | Card container background | -| `cardBorderColor` | string | Card border color | -| `cardBorderRadius` | number | Card corner radius | -| `cardBorderWidth` | number | Card border width | -| `unreadIndicatorColor` | string | Unread dot color | - -### CSS Classes - -Override styles using these CSS classes: - -| Class | Description | -| --- | --- | -| `.cometchat-notification-feed` | Root container | -| `.cometchat-notification-feed__header` | Header bar | -| `.cometchat-notification-feed__header-title` | Header title text | -| `.cometchat-notification-feed__header-back` | Back button | -| `.cometchat-notification-feed__mark-all-read` | Mark all read button | -| `.cometchat-notification-feed__chips` | Filter chips container | -| `.cometchat-notification-feed__chip` | Individual filter chip | -| `.cometchat-notification-feed__chip--active` | Active filter chip | -| `.cometchat-notification-feed__chip--inactive` | Inactive filter chip | -| `.cometchat-notification-feed__chip--inactive-with-badge` | Inactive chip with unread badge | -| `.cometchat-notification-feed__chip-badge` | Chip unread badge | -| `.cometchat-notification-feed__chip-badge--active` | Active chip badge | -| `.cometchat-notification-feed__chip-badge--inactive` | Inactive chip badge | -| `.cometchat-notification-feed__content` | Scrollable content area | -| `.cometchat-notification-feed__item` | Feed item container | -| `.cometchat-notification-feed__item--unread` | Unread feed item | -| `.cometchat-notification-feed__unread-indicator` | Unread dot indicator | -| `.cometchat-notification-feed__item-meta` | Item metadata row (category + time) | -| `.cometchat-notification-feed__item-category` | Category label | -| `.cometchat-notification-feed__item-time` | Timestamp | -| `.cometchat-notification-feed__card-container` | Card wrapper | -| `.cometchat-notification-feed__loading` | Loading state | -| `.cometchat-notification-feed__empty` | Empty state | -| `.cometchat-notification-feed__error` | Error state | -| `.cometchat-notification-feed__connectivity-banner` | Offline banner | - ---- - -## Props - -All props are optional. - -### cardThemeMode - -Theme mode for the card renderer (`@cometchat/cards-react`). - -| | | -| --- | --- | -| Type | `"auto" \| "light" \| "dark"` | -| Default | `"auto"` | - ---- - -### cardThemeOverride - -Custom theme override passed to the card renderer. - -| | | -| --- | --- | -| Type | `Record` | -| Default | `undefined` | - ---- - -### emptyStateView - -Custom component displayed when there are no notifications. - -| | | -| --- | --- | -| Type | `React.ReactNode` | -| Default | Built-in empty state with illustration | - ---- - -### errorStateView - -Custom component displayed when an error occurs. - -| | | -| --- | --- | -| Type | `React.ReactNode` | -| Default | Built-in error state with retry button | - ---- - -### headerView - -Custom component replacing the entire header. - -| | | -| --- | --- | -| Type | `React.ReactNode` | -| Default | Built-in header with title and mark-all-read button | - ---- - -### loadingStateView - -Custom component displayed during the initial loading state. - -| | | -| --- | --- | -| Type | `React.ReactNode` | -| Default | Built-in loading spinner | - ---- - -### notificationCategoriesRequestBuilder - -Custom request builder for fetching categories. - -| | | -| --- | --- | -| Type | `CometChat.NotificationCategoriesRequestBuilder` | -| Default | SDK default (50 per page) | - ---- - -### notificationFeedRequestBuilder - -Custom request builder for fetching feed items. - -| | | -| --- | --- | -| Type | `CometChat.NotificationFeedRequestBuilder` | -| Default | SDK default (20 per page) | - ---- - -### onActionClick - -Callback fired when an interactive element inside a card is clicked. - -| | | -| --- | --- | -| Type | `(feedItem: NotificationFeedItem, action: CardAction) => void` | -| Default | `undefined` | - -The `CardAction` object contains: -- `type` — Action type (e.g., `"openUrl"`, `"chatWithUser"`) -- `params` — Action parameters (e.g., `{ url: "..." }`, `{ uid: "..." }`) -- `elementId` — ID of the element that triggered the action - ---- - -### onBackPress - -Callback fired when the back button is pressed. - -| | | -| --- | --- | -| Type | `() => void` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `(error: CometChat.CometChatException) => void` | -| Default | `undefined` | - ---- - -### onItemClick - -Callback fired when a feed item card is clicked. - -| | | -| --- | --- | -| Type | `(feedItem: NotificationFeedItem) => void` | -| Default | `undefined` | - ---- - -### scrollToItemId - -Deep link to a specific feed item by ID. The component scrolls to the item once loaded. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -### showBackButton - -Shows/hides the back button in the header. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### showFilterChips - -Shows/hides the category filter chips row. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `true` | - ---- - -### showHeader - -Shows/hides the entire header. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `true` | - ---- - -### style - -Style customization object. - -| | | -| --- | --- | -| Type | `CometChatNotificationFeedStyle` | -| Default | `undefined` | - ---- - -### title - -Header title text. - -| | | -| --- | --- | -| Type | `string` | -| Default | `"Notifications"` | - ---- - -## Additional Exports - -### CometChatNotificationBadge - -A standalone badge component that displays the unread notification count. Uses a shared polling singleton — multiple badges share one interval and listener. - -```tsx lines -import { CometChatNotificationBadge } from "@cometchat/chat-uikit-react"; - -function NavBar() { - return ( - - ); -} -``` - -#### Props - -| Prop | Type | Default | Description | -| --- | --- | --- | --- | -| `category` | string | undefined | Filter count by category | -| `max` | number | 99 | Maximum count before showing "N+" | -| `style.backgroundColor` | string | `"#6852D6"` | Badge background color | -| `style.textColor` | string | `"#fff"` | Badge text color | -| `style.fontSize` | string | `"11px"` | Badge font size | -| `style.borderRadius` | string | `"9999px"` | Badge border radius | - ---- - -### useNotificationUnreadCount - -A React hook for tracking unread notification count. Uses a shared singleton — multiple components share one polling interval and WebSocket listener. - -```tsx lines -import { useNotificationUnreadCount } from "@cometchat/chat-uikit-react"; - -function NotificationIcon() { - const { count, refresh, isLoading } = useNotificationUnreadCount(); - - return ( - - ); -} -``` - -#### Return Value - -| Field | Type | Description | -| --- | --- | --- | -| `count` | number | Current unread count | -| `refresh` | `() => Promise` | Manually refresh the count | -| `isLoading` | boolean | Whether the initial fetch is in progress | - -#### Options - -| Option | Type | Default | Description | -| --- | --- | --- | --- | -| `category` | string | undefined | Filter count by category | -| `pollingInterval` | number | 30000 | Polling interval in milliseconds | - ---- - -## Common Patterns - -### Show only unread items - -```tsx lines - -``` - -### Hide filter chips and header - -```tsx lines - -``` - -### Deep link to a specific notification - -```tsx lines - -``` - -### Embed in a sidebar - -```tsx lines -import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function NotificationsSidebar() { - return ( -
- -
- ); -} -``` - -### Add notification badge to navigation - -```tsx lines -import { - CometChatNotificationFeed, - CometChatNotificationBadge, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function App() { - const [showFeed, setShowFeed] = useState(false); - - return ( - <> - - {showFeed && ( - setShowFeed(false)} - showBackButton={true} - /> - )} - - ); -} -``` - ---- - -## Next Steps - - - - Overview of how campaigns work end-to-end - - - Low-level SDK APIs for feed items, categories, and engagement - - - Customize colors, fonts, and appearance - - - Browse all prebuilt UI components - - diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx deleted file mode 100644 index ab98f2658..000000000 --- a/ui-kit/react/outgoing-call.mdx +++ /dev/null @@ -1,713 +0,0 @@ ---- -title: "Outgoing Call" -description: "Display CometChat React UI Kit outgoing call screens with recipient details, cancel actions, custom sounds, and outgoing call callbacks." ---- - -```json -{ - "component": "CometChatOutgoingCall", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", - "description": "Overlay component displaying an outgoing voice/video call with recipient info and cancel control.", - "cssRootClass": ".cometchat-outgoing-call", - "primaryOutput": { - "prop": "onCallCanceled", - "type": "Function" - }, - "props": { - "data": { - "call": { - "type": "CometChat.Call", - "default": "undefined", - "note": "Must come from CometChat.initiateCall()" - } - }, - "callbacks": { - "onCallCanceled": "Function", - "onError": "((error: CometChat.CometChatException) => void) | null" - }, - "sound": { - "disableSoundForCalls": { "type": "boolean", "default": false }, - "customSoundForCalls": { "type": "string", "default": "built-in" } - }, - "viewSlots": { - "titleView": "JSX.Element", - "subtitleView": "JSX.Element", - "avatarView": "JSX.Element", - "cancelButtonView": "JSX.Element" - } - }, - "events": [ - { - "name": "CometChatCallEvents.ccOutgoingCall", - "payload": "CometChat.Call", - "description": "Call initiated" - }, - { - "name": "CometChatCallEvents.ccCallAccepted", - "payload": "CometChat.Call", - "description": "Recipient accepts" - }, - { - "name": "CometChatCallEvents.ccCallRejected", - "payload": "CometChat.Call", - "description": "Recipient rejects" - }, - { - "name": "CometChatCallEvents.ccCallEnded", - "payload": "CometChat.Call", - "description": "Call session ends" - } - ], - "sdkListeners": [], - "compositionExample": { - "description": "App-level overlay rendered after CometChat.initiateCall()", - "components": ["CometChatOutgoingCall"], - "flow": "CometChat.initiateCall() returns CometChat.Call -> pass to call prop -> onCallCanceled ends session" - } -} -``` - - -## Where It Fits - -`CometChatOutgoingCall` is an overlay component that displays the outgoing call screen with the recipient's name, avatar, and a cancel button. It plays a ringtone while the call is pending. Typically rendered at the app root level after initiating a call via `CometChat.initiateCall()`. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOutgoingCall, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function OutgoingCallDemo() { - const [call, setCall] = useState(); - - useEffect(() => { - const uid = "uid"; - const callObject = new CometChat.Call( - uid, - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user - ); - CometChat.initiateCall(callObject) - .then((c) => setCall(c)) - .catch(console.log); - }, []); - - return call ? : null; -} - -export default OutgoingCallDemo; -``` - - - - - ---- - -## Minimal Render - -```tsx lines -import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; - -function OutgoingCallMinimal() { - // `call` must be a CometChat.Call object from CometChat.initiateCall() - return call ? : null; -} -``` - -Root CSS class: `.cometchat-outgoing-call` - ---- - -## Actions and Events - -### Callback Props - -#### onCallCanceled - -Fires when the cancel button is clicked. Pauses the ringtone internally before invoking the callback. - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOutgoingCall, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; - -function OutgoingCallWithCancel() { - const [call, setCall] = useState(); - - useEffect(() => { - const uid = "uid"; - const callObject = new CometChat.Call( - uid, - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user - ); - CometChat.initiateCall(callObject) - .then((c) => setCall(c)) - .catch(console.log); - }, []); - - const cancelCall = () => { - CometChat.endCall(call!.getSessionId()).then(() => setCall(undefined)); - }; - - return call ? ( - - ) : null; -} -``` - -#### onError - -Fires on internal errors. - -```tsx lines -import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function OutgoingCallWithError() { - return ( - { - console.error("OutgoingCall error:", error); - }} - /> - ); -} -``` - -### Global UI Events - -`CometChatCallEvents` emits call lifecycle events subscribable from anywhere. Subscribe in a `useEffect` and unsubscribe on cleanup. - -| Event | Fires when | Payload | -| --- | --- | --- | -| `ccOutgoingCall` | A call is initiated | `CometChat.Call` | -| `ccCallAccepted` | The recipient accepts the call | `CometChat.Call` | -| `ccCallRejected` | The recipient rejects the call | `CometChat.Call` | -| `ccCallEnded` | The call session ends | `CometChat.Call` | - -```tsx lines -import { useEffect } from "react"; -import { CometChatCallEvents } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function useCallEvents() { - useEffect(() => { - const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe( - (call: CometChat.Call) => { - console.log("Call accepted:", call.getSessionId()); - } - ); - const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe( - (call: CometChat.Call) => { - console.log("Call rejected:", call.getSessionId()); - } - ); - const endedSub = CometChatCallEvents.ccCallEnded.subscribe( - (call: CometChat.Call) => { - console.log("Call ended:", call.getSessionId()); - } - ); - - return () => { - acceptedSub?.unsubscribe(); - rejectedSub?.unsubscribe(); - endedSub?.unsubscribe(); - }; - }, []); -} -``` - -### SDK Events (Real-Time, Automatic) - -The component internally manages call sound playback. It plays the outgoing call ringtone on mount (unless `disableSoundForCalls={true}`) and pauses it on unmount or cancel. No SDK call listeners are attached by the component itself — call status updates are handled by the parent application. - ---- - -## Custom View Slots - -All view slots on `CometChatOutgoingCall` are `JSX.Element` (not functions). They do not receive parameters — pass call data via closure if needed. - -| Slot | Type | Replaces | -| --- | --- | --- | -| `titleView` | `JSX.Element` | Recipient name | -| `subtitleView` | `JSX.Element` | "Calling..." text | -| `avatarView` | `JSX.Element` | Recipient avatar | -| `cancelButtonView` | `JSX.Element` | Cancel call button | - -### titleView - -Replace the recipient name. - - - - - - - -```tsx lines -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOutgoingCall, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; - -function OutgoingCallCustomTitle() { - // assume `call` is a CometChat.Call from CometChat.initiateCall() - const getTitleView = (call: CometChat.Call) => ( -
- {call.getCallInitiator().getName()} {" <> "}{" "} - {call.getCallReceiver().getName()} -
- ); - - return call ? ( - - ) : null; -} -``` - - -```css lines -.outgoing-call__title { - color: #141414; - text-align: center; - font: 500 24px Roboto; -} -``` - - - -### subtitleView - -Replace the "Calling..." text. - - - - - - - -```tsx lines -const getSubtitleView = (call: CometChat.Call) => ( -
-
- {"Calling..."} -
-); - -; -``` - - -```css lines -.outgoing-call__subtitle { - display: flex; - justify-content: center; - align-items: flex-start; - gap: 8px; - color: #727272; - text-align: center; - font: 400 16px Roboto; -} - -.outgoing-call__subtitle-icon { - -webkit-mask: url("") center center no-repeat; - background: #a1a1a1; - height: 24px; - width: 24px; -} -``` - - - -### avatarView - -Replace the recipient avatar. - - - - - - - -```tsx lines -import { - CometChatAvatar, - CometChatOutgoingCall, -} from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -function OutgoingCallCustomAvatar() { - const getAvatarView = (call: CometChat.Call) => ( -
- -
-
- ); - - return call ? ( - - ) : null; -} -``` - - -```css lines -.outgoing-call__avatar .cometchat-avatar, -.outgoing-call__avatar .cometchat-avatar__image { - width: 160px; - height: 160px; - border-radius: 20px; -} - -.outgoing-call__avatar-status { - background-image: url(""); - height: 44px; - width: 44px; - background-size: contain; - position: relative; - top: -45px; - right: -60px; -} -``` - - - -### cancelButtonView - -Replace the cancel call button. - - - - - - - -```tsx lines -function OutgoingCallCustomCancel() { - const getCancelButtonView = (call: CometChat.Call) => ( -
-
-
- {"End Call"} -
-
- ); - - return call ? ( - - ) : null; -} -``` - - -```css lines -.outgoing-call__cancel-button-wrapper { - height: 64px; - display: flex; - justify-content: center; - cursor: pointer; -} - -.outgoing-call__cancel-button { - display: flex; - width: 330px; - padding: 12px 30px; - justify-content: center; - align-items: center; - gap: 12px; - border-radius: 12px; - background-color: #f44649; - color: #fff; - font: 500 20px Roboto; -} - -.outgoing-call__cancel-button-icon { - -webkit-mask: url("") center center no-repeat; - background: #e8e8e8; - height: 32px; - width: 32px; -} -``` - - - ---- - -## Common Patterns - -### Cancel and end the call session - -```tsx lines -import { useState, useEffect } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOutgoingCall, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; - -function OutgoingCallWithEndSession() { - const [call, setCall] = useState(); - - useEffect(() => { - const uid = "uid"; - const callObject = new CometChat.Call( - uid, - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user - ); - CometChat.initiateCall(callObject) - .then((c) => setCall(c)) - .catch(console.log); - }, []); - - const handleCancel = () => { - if (call) { - CometChat.endCall(call.getSessionId()).then(() => setCall(undefined)); - } - }; - - return call ? ( - - ) : null; -} -``` - -### Custom ringtone - -```tsx lines -import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; - -function OutgoingCallCustomSound() { - return ( - - ); -} -``` - -### Silent outgoing call (no ringtone) - -```tsx lines -import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react"; - -function SilentOutgoingCall() { - return ( - - ); -} -``` - ---- - -## CSS Architecture - -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: - -1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-error-color`) set on the `.cometchat` root wrapper. -2. Component CSS (`.cometchat-outgoing-call`) consumes these tokens via `var()` with fallback values. -3. Overrides target `.cometchat-outgoing-call` descendant selectors in a global stylesheet. - -### Key Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-outgoing-call` | -| Title container | `.cometchat-outgoing-call__title-container` | -| Title text | `.cometchat-outgoing-call__title` | -| Subtitle text | `.cometchat-outgoing-call__subtitle` | -| Avatar container | `.cometchat-outgoing-call__avatar` | -| Avatar image | `.cometchat-outgoing-call__avatar .cometchat-avatar` | -| Avatar text | `.cometchat-outgoing-call__avatar .cometchat-avatar__text` | -| Cancel button wrapper | `.cometchat-outgoing-call__button` | -| Cancel button | `.cometchat-outgoing-call__button .cometchat-button` | -| Cancel button icon | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` | - -### Example: Themed outgoing call - - - - - -```css lines -.cometchat-outgoing-call__avatar .cometchat-avatar { - border-radius: 16px; - background: #fbaa75; -} - -.cometchat-outgoing-call__button .cometchat-button { - border-radius: 8px; - background: #f44649; -} - -.cometchat-outgoing-call .cometchat-outgoing-call__title { - text-align: center; - font: 400 32px/38px "Times New Roman"; -} -``` - -### Customization Matrix - -| What to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle cancel action | Component props | `onCallCanceled` | `onCallCanceled={() => endCall()}` | -| Disable ringtone | Component props | `disableSoundForCalls` | `disableSoundForCalls={true}` | -| Custom ringtone | Component props | `customSoundForCalls` | `customSoundForCalls="/sounds/ring.mp3"` | -| Replace UI sections | Component props | View slot props | `titleView={
Custom
}` | -| Change colors, fonts, spacing | Global CSS | Target `.cometchat-outgoing-call` class | `.cometchat-outgoing-call__title { color: red; }` | - ---- - -## Props - -All props are optional unless noted. Sorted alphabetically. - -### avatarView - -Custom JSX replacing the recipient avatar. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in avatar | - ---- - -### call - -The outgoing call object from `CometChat.initiateCall()`. - -| | | -| --- | --- | -| Type | `CometChat.Call` | -| Default | `undefined` | - -Component renders nothing when `call` is not provided. - ---- - -### cancelButtonView - -Custom JSX replacing the cancel call button. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in cancel button | - ---- - -### customSoundForCalls - -URL to a custom audio file for the outgoing call ringtone. - -| | | -| --- | --- | -| Type | `string` | -| Default | Built-in ringtone | - ---- - -### disableSoundForCalls - -Disables the outgoing call ringtone. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### onCallCanceled - -Callback fired when the cancel button is clicked. - -| | | -| --- | --- | -| Type | `Function` | -| Default | `undefined` | - ---- - -### onError - -Callback fired when the component encounters an error. - -| | | -| --- | --- | -| Type | `((error: CometChat.CometChatException) => void) \| null` | -| Default | `undefined` | - ---- - -### subtitleView - -Custom JSX replacing the "Calling..." subtitle text. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in subtitle | - ---- - -### titleView - -Custom JSX replacing the recipient name. - -| | | -| --- | --- | -| Type | `JSX.Element` | -| Default | Built-in title | - ---- - -## Events - -| Event | Payload | Fires when | -| --- | --- | --- | -| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated | -| `CometChatCallEvents.ccCallAccepted` | `CometChat.Call` | Recipient accepts | -| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Recipient rejects | -| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call session ends | - -All events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`. - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root | `.cometchat-outgoing-call` | -| Title container | `.cometchat-outgoing-call__title-container` | -| Title text | `.cometchat-outgoing-call__title` | -| Subtitle text | `.cometchat-outgoing-call__subtitle` | -| Avatar container | `.cometchat-outgoing-call__avatar` | -| Avatar image | `.cometchat-outgoing-call__avatar .cometchat-avatar` | -| Avatar text | `.cometchat-outgoing-call__avatar .cometchat-avatar__text` | -| Cancel button wrapper | `.cometchat-outgoing-call__button` | -| Cancel button | `.cometchat-outgoing-call__button .cometchat-button` | -| Cancel button icon | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` | diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index 4245cf963..ae7935a47 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -4,96 +4,27 @@ sidebarTitle: "Overview" description: "Prebuilt React components for chat, voice, and video calling. Supports React.js, Next.js, React Router, and Astro." --- - -🚀 **CometChat React UI Kit v7 (beta) is now available!** It features a revamped component architecture, improved customization, and enhanced performance. [Switch to v7 →](/ui-kit/react/v7/overview) - - | Field | Value | | --- | --- | -| Package | `@cometchat/chat-uikit-react` v6.3.x | -| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 | +| Package | `@cometchat/chat-uikit-react` v7.0.x | +| Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | | Calling | Optional — `@cometchat/calls-sdk-javascript` | -| SSR | Client-side only. Use `ssr: false` or `client:only="react"` | +| SSR | SSR-safe — no browser APIs at module scope. Next.js App Router compatible. | | Localization | 19 languages built-in | -| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6) | -| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | +| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v7) | The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout. - + --- -## Integrate with AI Coding Agents - -Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any React project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have. One slash — `/cometchat` — works for React, Next.js, React Router, Astro, Expo, bare React Native, Angular, Android, Flutter, and iOS. - -Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills). - -```bash -npx @cometchat/skills add -``` - -Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs. - -Then in your IDE: - -``` -/cometchat add chat to my app -``` - -The skill detects your framework, router, env prefix, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI with no browser round-trip. It reads your routes, nav, and components before proposing a placement, shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. - -After the first integration, re-run `/cometchat` anytime to pick from the iteration menu: - -- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color -- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence -- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states -- **Add a floating widget** — overlay chat button + drawer on top of your existing app -- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint -- **Set up user management** — server endpoints for creating/updating/deleting CometChat users -- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup - - - -For deeper component customization (custom views, SDK events, request builders), install the docs MCP: - -**Claude Code:** -```bash -claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp -``` - -**Cursor** (`.cursor/mcp.json`): -```json -{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } } -``` - -**Windsurf:** -```json -{ "mcpServers": { "cometchat-docs": { "type": "sse", "serverUrl": "https://www.cometchat.com/docs/mcp" } } } -``` - -No authentication required. Not needed for the initial integration — the skill handles it without the MCP. - - - - - - AI-first integration for any React project - - - Claude Code · Cursor · Kiro · VS Code Copilot · Windsurf · Cline - - - ---- - ## Try It @@ -109,42 +40,79 @@ No authentication required. Not needed for the initial integration — the skill ## Get Started - - - - Pick your framework and follow the step-by-step integration guide: - + Vite or Create React App - } href="/ui-kit/react/next-js-integration"> + App Router with client-side rendering - } href="/ui-kit/react/react-router-integration"> + SPA with React Router v6+ - } href="/ui-kit/react/astro-integration"> + React islands with client:only directive --- +## What's Included + +- **Compound components** — compose only what you need using namespace sub-components (Root, View, EmptyState, etc.) +- **Plugin system** — extensible message rendering via `CometChatMessagePlugin` interface +- **Theming** — CSS custom properties (`--cometchat-*`) with built-in light and dark themes +- **Localization** — 19 supported languages with customizable translation keys +- **Calling** — optional voice and video calling via `@cometchat/calls-sdk-javascript` +- **SSR-safe** — no browser-only APIs at module scope; Next.js App Router compatible +- **Tree-shakeable** — ESM-first build with dual ESM + CJS output + +--- + +## Prerequisites + +Before integrating the UI Kit, ensure you have: + +- **Node.js 18+** installed +- A **CometChat account** with the following credentials: + - `appId` — your CometChat application ID + - `region` — your app region (e.g., `"us"` or `"eu"`) + - `authKey` — your CometChat auth key (for client-side authentication) + +You can find these values in the [CometChat Dashboard](https://app.cometchat.com). + +### Installation + +```bash +npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript react react-dom dompurify +``` + +| Package | Version | +|---------|---------| +| `@cometchat/chat-uikit-react` | `^7.0.0` | +| `@cometchat/chat-sdk-javascript` | `^4.1.9` | +| `react` | `>=18.0.0 <21.0.0` | +| `react-dom` | `>=18.0.0 <21.0.0` | +| `dompurify` | `^3.3.1` | +| `@cometchat/calls-sdk-javascript` | Optional — for voice/video calling | + +--- + ## Explore Browse all prebuilt UI components - - Chat, calling, AI, and extensions - - + Colors, fonts, dark mode, and custom styling - + + Customize message rendering with the plugin system + + Threaded messages, new chat, search, and more @@ -154,10 +122,10 @@ Pick your framework and follow the step-by-step integration guide: ## Resources - + Working reference app - + Full UI Kit source on GitHub @@ -169,7 +137,7 @@ Pick your framework and follow the step-by-step integration guide: Open a support ticket - - Upgrading from v5 + + Upgrading from v6 diff --git a/ui-kit/react/v7/plugins/ai.mdx b/ui-kit/react/plugins/ai.mdx similarity index 100% rename from ui-kit/react/v7/plugins/ai.mdx rename to ui-kit/react/plugins/ai.mdx diff --git a/ui-kit/react/v7/plugins/audio.mdx b/ui-kit/react/plugins/audio.mdx similarity index 93% rename from ui-kit/react/v7/plugins/audio.mdx rename to ui-kit/react/plugins/audio.mdx index 286e4ff76..35492f24f 100644 --- a/ui-kit/react/v7/plugins/audio.mdx +++ b/ui-kit/react/plugins/audio.mdx @@ -52,7 +52,7 @@ The Audio plugin handles messages of type `audio` in category `message`. It rend ## Context Menu Options -Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). +Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). --- diff --git a/ui-kit/react/v7/plugins/call-action.mdx b/ui-kit/react/plugins/call-action.mdx similarity index 100% rename from ui-kit/react/v7/plugins/call-action.mdx rename to ui-kit/react/plugins/call-action.mdx diff --git a/ui-kit/react/v7/plugins/collaborative-document.mdx b/ui-kit/react/plugins/collaborative-document.mdx similarity index 100% rename from ui-kit/react/v7/plugins/collaborative-document.mdx rename to ui-kit/react/plugins/collaborative-document.mdx diff --git a/ui-kit/react/v7/plugins/collaborative-whiteboard.mdx b/ui-kit/react/plugins/collaborative-whiteboard.mdx similarity index 100% rename from ui-kit/react/v7/plugins/collaborative-whiteboard.mdx rename to ui-kit/react/plugins/collaborative-whiteboard.mdx diff --git a/ui-kit/react/v7/plugins/custom-plugin.mdx b/ui-kit/react/plugins/custom-plugin.mdx similarity index 100% rename from ui-kit/react/v7/plugins/custom-plugin.mdx rename to ui-kit/react/plugins/custom-plugin.mdx diff --git a/ui-kit/react/v7/plugins/delete.mdx b/ui-kit/react/plugins/delete.mdx similarity index 100% rename from ui-kit/react/v7/plugins/delete.mdx rename to ui-kit/react/plugins/delete.mdx diff --git a/ui-kit/react/v7/plugins/file.mdx b/ui-kit/react/plugins/file.mdx similarity index 93% rename from ui-kit/react/v7/plugins/file.mdx rename to ui-kit/react/plugins/file.mdx index 45c9a5f1d..4f53409a5 100644 --- a/ui-kit/react/v7/plugins/file.mdx +++ b/ui-kit/react/plugins/file.mdx @@ -51,7 +51,7 @@ The File plugin handles messages of type `file` in category `message`. It render ## Context Menu Options -Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). +Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). --- diff --git a/ui-kit/react/v7/plugins/group-action.mdx b/ui-kit/react/plugins/group-action.mdx similarity index 100% rename from ui-kit/react/v7/plugins/group-action.mdx rename to ui-kit/react/plugins/group-action.mdx diff --git a/ui-kit/react/v7/plugins/image.mdx b/ui-kit/react/plugins/image.mdx similarity index 100% rename from ui-kit/react/v7/plugins/image.mdx rename to ui-kit/react/plugins/image.mdx diff --git a/ui-kit/react/v7/plugins/overview.mdx b/ui-kit/react/plugins/overview.mdx similarity index 84% rename from ui-kit/react/v7/plugins/overview.mdx rename to ui-kit/react/plugins/overview.mdx index 8c2bb2779..e56d19f87 100644 --- a/ui-kit/react/v7/plugins/overview.mdx +++ b/ui-kit/react/plugins/overview.mdx @@ -35,18 +35,18 @@ These plugins are included automatically — no configuration needed: | Plugin | Message Type | What it renders | | --- | --- | --- | -| [Text](/ui-kit/react/v7/plugins/text) | `text` | Formatted text with mentions, URLs, markdown | -| [Image](/ui-kit/react/v7/plugins/image) | `image` | Image grid with captions, click-to-fullscreen | -| [Video](/ui-kit/react/v7/plugins/video) | `video` | Video player with thumbnail | -| [File](/ui-kit/react/v7/plugins/file) | `file` | File card with download button | -| [Audio](/ui-kit/react/v7/plugins/audio) | `audio` | Waveform audio player | -| [Polls](/ui-kit/react/v7/plugins/polls) | `extension_poll` | Poll creation + voting bubble | -| [Stickers](/ui-kit/react/v7/plugins/stickers) | `extension_sticker` | Sticker image bubble | -| [Collaborative Document](/ui-kit/react/v7/plugins/collaborative-document) | `extension_document` | Document collaboration link | -| [Collaborative Whiteboard](/ui-kit/react/v7/plugins/collaborative-whiteboard) | `extension_whiteboard` | Whiteboard collaboration link | -| [Group Action](/ui-kit/react/v7/plugins/group-action) | `groupMember` | "User joined", "User left" system messages | -| [Call Action](/ui-kit/react/v7/plugins/call-action) | `audio`, `video` (call category) | "Missed call", "Call ended" system messages | -| [Delete](/ui-kit/react/v7/plugins/delete) | Any (deleted) | "This message was deleted" placeholder | +| [Text](/ui-kit/react/plugins/text) | `text` | Formatted text with mentions, URLs, markdown | +| [Image](/ui-kit/react/plugins/image) | `image` | Image grid with captions, click-to-fullscreen | +| [Video](/ui-kit/react/plugins/video) | `video` | Video player with thumbnail | +| [File](/ui-kit/react/plugins/file) | `file` | File card with download button | +| [Audio](/ui-kit/react/plugins/audio) | `audio` | Waveform audio player | +| [Polls](/ui-kit/react/plugins/polls) | `extension_poll` | Poll creation + voting bubble | +| [Stickers](/ui-kit/react/plugins/stickers) | `extension_sticker` | Sticker image bubble | +| [Collaborative Document](/ui-kit/react/plugins/collaborative-document) | `extension_document` | Document collaboration link | +| [Collaborative Whiteboard](/ui-kit/react/plugins/collaborative-whiteboard) | `extension_whiteboard` | Whiteboard collaboration link | +| [Group Action](/ui-kit/react/plugins/group-action) | `groupMember` | "User joined", "User left" system messages | +| [Call Action](/ui-kit/react/plugins/call-action) | `audio`, `video` (call category) | "Missed call", "Call ended" system messages | +| [Delete](/ui-kit/react/plugins/delete) | Any (deleted) | "This message was deleted" placeholder | --- @@ -161,7 +161,7 @@ Register it: ``` -For a complete tutorial with sending, receiving, and styling, see [Creating a Custom Plugin](/ui-kit/react/v7/plugins/custom-plugin). +For a complete tutorial with sending, receiving, and styling, see [Creating a Custom Plugin](/ui-kit/react/plugins/custom-plugin). --- @@ -236,16 +236,16 @@ The `context` object passed to every plugin method: ## Next Steps - + Text rendering, mentions, markdown, URLs - + Image grid, captions, fullscreen viewer - + Build your own plugin from scratch - + URL, mentions, markdown, and custom formatters diff --git a/ui-kit/react/v7/plugins/polls.mdx b/ui-kit/react/plugins/polls.mdx similarity index 100% rename from ui-kit/react/v7/plugins/polls.mdx rename to ui-kit/react/plugins/polls.mdx diff --git a/ui-kit/react/v7/plugins/stickers.mdx b/ui-kit/react/plugins/stickers.mdx similarity index 100% rename from ui-kit/react/v7/plugins/stickers.mdx rename to ui-kit/react/plugins/stickers.mdx diff --git a/ui-kit/react/v7/plugins/text-formatters.mdx b/ui-kit/react/plugins/text-formatters.mdx similarity index 100% rename from ui-kit/react/v7/plugins/text-formatters.mdx rename to ui-kit/react/plugins/text-formatters.mdx diff --git a/ui-kit/react/v7/plugins/text.mdx b/ui-kit/react/plugins/text.mdx similarity index 97% rename from ui-kit/react/v7/plugins/text.mdx rename to ui-kit/react/plugins/text.mdx index f8f6eed0c..973bba409 100644 --- a/ui-kit/react/v7/plugins/text.mdx +++ b/ui-kit/react/plugins/text.mdx @@ -86,7 +86,7 @@ The text plugin provides three built-in formatters via `getTextFormatters()`: Formatters run in priority order (lower = first). Each receives the output of the previous formatter. -For custom formatters, see [Text Formatters](/ui-kit/react/v7/plugins/text-formatters). +For custom formatters, see [Text Formatters](/ui-kit/react/plugins/text-formatters). --- diff --git a/ui-kit/react/v7/plugins/video.mdx b/ui-kit/react/plugins/video.mdx similarity index 92% rename from ui-kit/react/v7/plugins/video.mdx rename to ui-kit/react/plugins/video.mdx index a048ee769..05636391d 100644 --- a/ui-kit/react/v7/plugins/video.mdx +++ b/ui-kit/react/plugins/video.mdx @@ -51,7 +51,7 @@ The Video plugin handles messages of type `video` in category `message`. Single ## Context Menu Options -Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). +Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). --- diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 7302e81a6..fd4fcabd4 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -1,7 +1,7 @@ --- title: "Conversation List + Message View" sidebarTitle: "Conversation List + Message View" -description: "Build CometChat React UI Kit conversation list and message view layouts with navigation, headers, message lists, and composers." +description: "Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit." --- @@ -12,22 +12,19 @@ description: "Build CometChat React UI Kit conversation list and message view la | Framework | React.js | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first | +| Prerequisite | Complete [React.js Integration](/ui-kit/react/integration-react) first | | Pattern | WhatsApp Web, Slack, Microsoft Teams | -This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. +This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. -This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). +This assumes you've already completed [React.js Integration](/ui-kit/react/integration-react) (project created, UI Kit installed, init + login working). - + -[](https://link.cometchat.com/react-conversation-list-message) - -> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. --- @@ -41,366 +38,133 @@ Three sections working together: --- -## Step 1 — Create the Sidebar Component - -Create a `CometChatSelector` folder inside `src/`: - - - - - - - - - - - - - -```tsx title="CometChatSelector.tsx" lines -import { useEffect, useState } from "react"; -import { - Conversation, - Group, - User, - CometChat, -} from "@cometchat/chat-sdk-javascript"; -import { - CometChatConversations, - CometChatUIKitLoginListener, -} from "@cometchat/chat-uikit-react"; -import "./CometChatSelector.css"; - -interface SelectorProps { - onSelectorItemClicked?: ( - input: User | Group | Conversation, - type: string - ) => void; -} - -export const CometChatSelector = (props: SelectorProps) => { - const { onSelectorItemClicked = () => {} } = props; - const [loggedInUser, setLoggedInUser] = useState(); - const [activeItem, setActiveItem] = useState< - CometChat.Conversation | CometChat.User | CometChat.Group | undefined - >(); - - useEffect(() => { - const user = CometChatUIKitLoginListener.getLoggedInUser(); - setLoggedInUser(user); - }, []); - - return ( - <> - {loggedInUser && ( - { - setActiveItem(e); - onSelectorItemClicked(e, "updateSelectedItem"); - }} - /> - )} - - ); -}; -``` - - - - -```css title="CometChatSelector.css" lines -/* Menu icon in conversation header */ -.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { - background: var(--cometchat-icon-color-primary); -} - -.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover { - background: var(--cometchat-icon-color-highlight); -} - -.cometchat-list__header-search-bar { - border-right: none; -} - -.cometchat .cometchat-menu-list__sub-menu-list-item { - text-align: left; -} - -.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list { - width: 212px; - top: 40px !important; - left: 172px !important; -} - -/* Logged-in user section */ -#logged-in-user { - border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); -} - -#logged-in-user .cometchat-menu-list__sub-menu-item-title, -#logged-in-user .cometchat-menu-list__sub-menu-list-item { - cursor: default; -} - -.cometchat-menu-list__sub-menu-list-item-icon-log-out { - background-color: var(--cometchat-error-color, #F44649); -} - -.cometchat-menu-list__sub-menu-item-title-log-out { - color: var(--cometchat-error-color, #F44649); -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { - cursor: pointer; -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu { - box-shadow: none; -} - -.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon { - background-color: var(--cometchat-icon-color-primary, #141414); - width: 24px; - height: 24px; -} - -/* Selector container */ -.cometchat-selector { - display: flex; - width: 100%; - padding: 0px 8px; - align-items: flex-start; - gap: 8px; - border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5); - border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5); - background: var(--cometchat-background-color-01, #FFF); -} - -.cometchat-selector__tab { - display: flex; - padding: 12px 0px 10px 0px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 4px; - flex: 1 0 0; - min-height: 48px; -} - -.cometchat-selector__tab-icon-active { - display: flex; - width: 32px; - height: 32px; - justify-content: center; - align-items: center; - -webkit-mask-size: contain; - mask-size: contain; - cursor: default; - background: var(--cometchat-icon-color-highlight); - -webkit-mask: url('./assets/chats.svg') no-repeat center; - mask: url('./assets/chats.svg') no-repeat center; -} - -.cometchat-selector__tab-text-active { - text-align: center; - font: var(--cometchat-font-caption1-medium, 500 12px Roboto); - cursor: default; - color: var(--cometchat-text-color-highlight); -} -``` - - - - -Key points about the sidebar: -- `CometChatUIKitLoginListener.getLoggedInUser()` checks for an active session — the component only renders if a user is logged in. -- `activeConversation` highlights the currently selected conversation in the list. -- `onItemClick` fires when a user taps a conversation, passing the `Conversation` object to the parent. - ---- - -## Step 2 — Update App.tsx and App.css +## Full Code -Wire the sidebar and message components together in your main app file. +Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - - - -```tsx title="App.tsx" lines +```tsx title="src/App.tsx" import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { - CometChatMessageComposer, + CometChatProvider, + CometChatConversations, CometChatMessageHeader, CometChatMessageList, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatSelector } from "./CometChatSelector/CometChatSelector"; +import "@cometchat/chat-uikit-react/styles"; import "./App.css"; -import "@cometchat/chat-uikit-react/css-variables.css"; function App() { - const [selectedUser, setSelectedUser] = useState< - CometChat.User | undefined - >(undefined); - const [selectedGroup, setSelectedGroup] = useState< - CometChat.Group | undefined - >(undefined); + const [selectedUser, setSelectedUser] = useState(undefined); + const [selectedGroup, setSelectedGroup] = useState(undefined); + + const handleConversationClick = (conversation: CometChat.Conversation) => { + const entity = conversation.getConversationWith(); + if (conversation.getConversationType() === "user") { + setSelectedUser(entity as CometChat.User); + setSelectedGroup(undefined); + } else { + setSelectedGroup(entity as CometChat.Group); + setSelectedUser(undefined); + } + }; return ( -
- {/* Sidebar — conversation list */} -
- { - let item = activeItem; - - // Extract user/group from Conversation object - if (activeItem instanceof CometChat.Conversation) { - item = activeItem.getConversationWith(); - } - - if (item instanceof CometChat.User) { - setSelectedUser(item as CometChat.User); - setSelectedGroup(undefined); - } else if (item instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(item as CometChat.Group); - } else { - setSelectedUser(undefined); - setSelectedGroup(undefined); - } - }} - /> -
- - {/* Message view — header + messages + composer */} - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation to start chatting + +
+
+
- )} -
+ + {selectedUser || selectedGroup ? ( +
+ + + +
+ ) : ( +
+ Select a conversation to start chatting +
+ )} +
+ ); } export default App; ``` - - - -```css title="App.css" lines -@import url("@cometchat/chat-uikit-react/css-variables.css"); - -#root { - text-align: center; - width: 100vw; - height: 100vh; - background-color: #282c34; -} - -/* Two-panel layout */ +```css title="src/App.css" .conversations-with-messages { display: flex; - height: 100%; + height: 100vh; width: 100%; - flex-direction: row; } -/* Left panel — conversation list */ .conversations-wrapper { - height: 100vh; - width: 480px; + width: 360px; + height: 100%; + border-right: 1px solid #eee; overflow: hidden; display: flex; flex-direction: column; } -.conversations-wrapper > .cometchat { - overflow: hidden; -} - -/* Right panel — messages */ .messages-wrapper { - width: 100%; + flex: 1; height: 100%; display: flex; flex-direction: column; } -/* Empty state */ .empty-conversation { - height: 100vh; - width: 100%; + flex: 1; display: flex; justify-content: center; align-items: center; - background: var(--cometchat-background-color-03, #F5F5F5); + background: var(--cometchat-background-color-03, #f5f5f5); color: var(--cometchat-text-color-secondary, #727272); font: var(--cometchat-font-body-regular, 400 14px Roboto); } - -.cometchat .cometchat-message-composer { - border-radius: 0px; -} ``` - - +--- + +## How It Works -How it works: -- When a conversation is tapped, `onSelectorItemClicked` extracts the `User` or `Group` from the `Conversation` object. -- `selectedUser` / `selectedGroup` state drives which chat is displayed — pass either `user` or `group` to the message components, never both. -- The empty state shows until a conversation is selected. +1. **CometChatProvider** wraps the entire tree — it supplies theme, locale, and event context to all CometChat components. +2. **CometChatConversations** renders the sidebar list. When a user clicks a conversation, `onItemClick` fires with the `Conversation` object. +3. **handleConversationClick** extracts the `User` or `Group` from the conversation and stores it in state. +4. **Message components** (`MessageHeader`, `MessageList`, `MessageComposer`) receive either `user` or `group` as a prop — never both at the same time. +5. When the user switches conversations, state updates and the message panel re-renders with the new chat. --- -## Step 3 — Run the Project +## Run - - -```bash lines +```bash npm run dev ``` - - -```bash lines -npm start -``` - - -You should see the conversation list on the left. Tap any conversation to load messages on the right. +Open `http://localhost:5173`. You should see the conversation list on the left. Click any conversation to load messages on the right. --- ## Next Steps - - Customize colors, fonts, and styles to match your brand + + Single chat window without a sidebar + + + Tabbed navigation with Chats, Calls, Users Browse all prebuilt UI components - - Back to the main setup guide - - - Chat features included out of the box + + Customize colors, fonts, and styles diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx deleted file mode 100644 index e01ac0648..000000000 --- a/ui-kit/react/react-js-integration.mdx +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: "React.js Integration" -sidebarTitle: "Integration" -description: "Integrate CometChat React UI Kit with React.js using app credentials, package setup, initialization, login, and chat rendering." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 | -| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | -| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | -| Order | `init()` → `login()` → render. Breaking this order = blank screen | -| Auth Key | Dev/testing only. Use Auth Token in production | -| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) | -| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | - - - -This guide walks you through adding CometChat to a React.js app. By the end you'll have a working chat UI. - - - - - ---- - -## Integrate with AI Coding Agents - -Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have. - -```bash -npx @cometchat/skills add -``` - -Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs. - -Then in your IDE: - -``` -/cometchat add chat to my app -``` - -The skill detects your bundler (Vite or CRA), env prefix (`VITE_` or `REACT_APP_`), router, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, nav, and components before proposing a placement, shows the plan, and waits for your approval before writing code. - -After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, floating widget, production auth, user management, and diagnostics. - -Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills). - ---- - -## Prerequisites - -You need three things from the [CometChat Dashboard](https://app.cometchat.com/): - -| Credential | Where to find it | -| --- | --- | -| App ID | Dashboard → Your App → Credentials | -| Auth Key | Dashboard → Your App → Credentials | -| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) | - -You also need Node.js (v16+) and npm/yarn installed. - - -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. - - ---- - -## Step 1 — Create a React Project - - - -```bash lines -npm create vite@latest my-app -- --template react-ts -cd my-app -``` - - -```bash lines -npx create-react-app my-app --template typescript -cd my-app -``` - - - ---- - -## Step 2 — Install the UI Kit - - - -```bash lines -npm install @cometchat/chat-uikit-react -``` - - -```bash lines -yarn add @cometchat/chat-uikit-react -``` - - - -This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically. - -If you want voice/video calling, also install: - -```bash lines -npm install @cometchat/calls-sdk-javascript -``` - ---- - -## Step 3 — Initialize CometChat - -Create a constants file and initialize the UI Kit before anything else. - -```ts title="src/AppConstants.ts" lines -export const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your App ID - REGION: "REGION", // Replace with your Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (dev only) -}; -``` - - - -```ts lines highlight={7-9} -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -/** - * CometChat Constants - Replace with your actual credentials - */ -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your actual App ID from CometChat - REGION: "REGION", // Replace with your App's Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token) -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - -CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("CometChat UI Kit initialized successfully."); - }) - .catch((error) => { - console.error("CometChat UI Kit initialization failed:", error); - }); -``` - - -```js lines highlight={7-9} -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -/** - * CometChat Constants - Replace with your actual credentials - */ -const COMETCHAT_CONSTANTS = { - APP_ID: "APP_ID", // Replace with your actual App ID from CometChat - REGION: "REGION", // Replace with your App's Region - AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token) -}; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId(COMETCHAT_CONSTANTS.APP_ID) - .setRegion(COMETCHAT_CONSTANTS.REGION) - .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) - .subscribePresenceForAllUsers() - .build(); - -CometChatUIKit.init(UIKitSettings) - .then(() => { - console.log("CometChat UI Kit initialized successfully."); - }) - .catch((error) => { - console.error("CometChat UI Kit initialization failed:", error); - }); -``` - - - - -`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently. - - - -By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/methods#setting-session-storage-mode). - - ---- - -## Step 4 — Login - -After init resolves, log the user in. For development, use one of the pre-created test UIDs: - -`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` - - - -```ts lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -const UID = "UID"; // Replace with your actual UID - -CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user: CometChat.User) => { - console.log("Login Successful:", { user }); - // Mount your app - }) - .catch(console.log); - } else { - // Already logged in — mount your app - } -}); -``` - - -```js lines highlight={3} -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -const UID = "UID"; // Replace with your actual UID - -CometChatUIKit.getLoggedinUser().then((user) => { - if (!user) { - CometChatUIKit.login(UID) - .then((user) => { - console.log("Login Successful:", { user }); - // Mount your app - }) - .catch(console.log); - } else { - // Already logged in — mount your app - } -}); -``` - - - -Key points: -- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily. -- `login(uid)` skips the API call if a session already exists and returns the cached user. -- Components must not render until login resolves — use a state flag to gate rendering. - - -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. - - ---- - -## Step 5 — Add the CSS Import - -Add this line at the top of your global CSS file (e.g. `src/App.css` or `src/index.css`): - -```css title="src/App.css" lines -@import url("@cometchat/chat-uikit-react/css-variables.css"); -``` - -Without this import, components will render with broken or missing styles. - ---- - -## Step 6 — Choose a Chat Experience - -Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide. - -### Conversation List + Message View - -Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack. - -- Two-panel layout with conversation list and active chat window -- Switch between one-to-one and group conversations -- Tap-to-view on mobile — tapping a conversation opens the message view -- Real-time updates and message sync across sessions - - - - - -[](https://link.cometchat.com/react-conversation-list-message) - -> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -### One-to-One / Group Chat - -Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging. - -- Dedicated chat window for one-on-one or group messaging -- No conversation list — users go directly into the chat -- Full-screen experience optimized for mobile -- Ideal for support chat or community messaging - - - - - -[](https://link.cometchat.com/react-one-on-one) - -> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -### Tab-Based Chat - -Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps. - -- Tab navigation between Chat, Call Logs, Users, and Settings -- Full-screen messaging within each tab -- Unified experience for conversations, call history, and settings -- Scales well for adding future features like notifications or contacts - - - - - -[](https://link.cometchat.com/react-tabs-sidebar-message) - -> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - - - Step-by-step guide to build this layout - - ---- - -## Build Your Own Chat Experience - -Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - -- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling -- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK - ---- - -## iFrame Embedding - -If your React app runs inside an ` - ---- - -## How It Works - -1. User hovers/long-presses a text message → context menu appears -2. "Translate" option is shown (for non-deleted text messages only) -3. User clicks "Translate" → plugin calls the translation extension API -4. Translated text is stored in the message's metadata (`translated_message` key) -5. The text bubble re-renders showing the translation below the original - ---- - -## Plugin Details - -| Field | Value | -| --- | --- | -| Plugin ID | `message-translation` | -| Message Types | `[]` (none — enhancer only) | -| Message Categories | `[]` (none — enhancer only) | -| Renders Bubble | No (`renderBubble` returns `null`) | -| Provides Options | Yes — "Translate" for text messages | - ---- - -## Context Menu Option - -| Option | Condition | Action | -| --- | --- | --- | -| Translate | Text messages only, not deleted | Translates to browser language via extension API | - -The translation target language is detected from `navigator.language` (e.g., `en`, `fr`, `de`). - ---- - -## Conversation Preview - -Returns empty string — this plugin doesn't handle conversation previews. - ---- - -## Requirements - -The CometChat **Message Translation** extension must be enabled in your [CometChat Dashboard](https://app.cometchat.com) under Extensions. - ---- - -## Installation - -The Message Translation plugin is NOT included in the default plugins. Add it explicitly: - -```tsx -import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatMessageTranslationPlugin } from "@cometchat/chat-uikit-react"; - - - - -``` diff --git a/ui-kit/react/v7/react-conversation.mdx b/ui-kit/react/v7/react-conversation.mdx deleted file mode 100644 index df09c3d00..000000000 --- a/ui-kit/react/v7/react-conversation.mdx +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: "Conversation List + Message View" -sidebarTitle: "Conversation List + Message View" -description: "Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React.js | -| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/v7/integration-react) first | -| Pattern | WhatsApp Web, Slack, Microsoft Teams | - - - -This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. - -This assumes you've already completed [React.js Integration](/ui-kit/react/v7/integration-react) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three sections working together: - -1. **Sidebar (conversation list)** — shows all active conversations (users and groups) -2. **Message view** — displays chat messages for the selected conversation in real time -3. **Message composer** — text input with support for media, emojis, and reactions - ---- - -## Full Code - -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/App.tsx" -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatConversations, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./App.css"; - -function App() { - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - - const handleConversationClick = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); - setSelectedGroup(undefined); - } else { - setSelectedGroup(entity as CometChat.Group); - setSelectedUser(undefined); - } - }; - - return ( - -
-
- -
- - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation to start chatting -
- )} -
- - ); -} - -export default App; -``` - -```css title="src/App.css" -.conversations-with-messages { - display: flex; - height: 100vh; - width: 100%; -} - -.conversations-wrapper { - width: 360px; - height: 100%; - border-right: 1px solid #eee; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.messages-wrapper { - flex: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #f5f5f5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} -``` - ---- - -## How It Works - -1. **CometChatProvider** wraps the entire tree — it supplies theme, locale, and event context to all CometChat components. -2. **CometChatConversations** renders the sidebar list. When a user clicks a conversation, `onItemClick` fires with the `Conversation` object. -3. **handleConversationClick** extracts the `User` or `Group` from the conversation and stores it in state. -4. **Message components** (`MessageHeader`, `MessageList`, `MessageComposer`) receive either `user` or `group` as a prop — never both at the same time. -5. When the user switches conversations, state updates and the message panel re-renders with the new chat. - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173`. You should see the conversation list on the left. Click any conversation to load messages on the right. - ---- - -## Next Steps - - - - Single chat window without a sidebar - - - Tabbed navigation with Chats, Calls, Users - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - diff --git a/ui-kit/react/v7/react-one-to-one-chat.mdx b/ui-kit/react/v7/react-one-to-one-chat.mdx deleted file mode 100644 index 804f8bf8b..000000000 --- a/ui-kit/react/v7/react-one-to-one-chat.mdx +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: "One-to-One / Group Chat" -sidebarTitle: "One-to-One / Group Chat" -description: "Build a single chat window for one-to-one or group messaging in React.js with CometChat UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React.js | -| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/v7/integration-react) first | -| Pattern | Support chat, embedded widgets, focused messaging | - - - -This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. - -This assumes you've already completed [React.js Integration](/ui-kit/react/v7/integration-react) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three components stacked vertically: - -1. **Chat header** — displays recipient name, avatar, online status, and optional call buttons -2. **Message list** — real-time chat history with scrolling -3. **Message composer** — text input with media, emojis, and reactions - ---- - -## Full Code - -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/App.tsx" -import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./App.css"; - -const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with - -function App() { - const [chatUser, setChatUser] = useState(undefined); - - useEffect(() => { - CometChat.getUser(RECIPIENT_UID).then( - (user) => setChatUser(user), - (error) => console.error("User fetch failed:", error) - ); - }, []); - - if (!chatUser) return
Loading chat...
; - - return ( - -
- - - -
- - ); -} - -export default App; -``` - -```css title="src/App.css" -.chat-window { - display: flex; - flex-direction: column; - height: 100vh; - width: 100%; -} -``` - -Key points: -- `CometChat.getUser(UID)` fetches the full user object from the SDK — you need a real user object, not a manually constructed one. -- Pass either `user` or `group` to the message components, never both. -- The `RECIPIENT_UID` should be a user that exists in your CometChat app. Use one of the pre-created test UIDs: `cometchat-uid-1` through `cometchat-uid-5`. - ---- - -## Switching to Group Chat - -To load a group chat instead of one-to-one, fetch a `Group` object and pass it to the message components: - -```tsx title="src/App.tsx" -import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./App.css"; - -const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID - -function App() { - const [chatGroup, setChatGroup] = useState(undefined); - - useEffect(() => { - CometChat.getGroup(GROUP_ID).then( - (group) => setChatGroup(group), - (error) => console.error("Group fetch failed:", error) - ); - }, []); - - if (!chatGroup) return
Loading chat...
; - - return ( - -
- - - -
- - ); -} - -export default App; -``` - -The only difference: use `CometChat.getGroup(GUID)` instead of `CometChat.getUser(UID)`, and pass `group` instead of `user`. - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173`. You should see the chat window load with the conversation for the UID or GUID you set. - ---- - -## Next Steps - - - - Two-panel layout with a sidebar - - - Tabbed navigation with Chats, Calls, Users - - - Browse all prebuilt UI components - - diff --git a/ui-kit/react/v7/react-router-conversation.mdx b/ui-kit/react/v7/react-router-conversation.mdx deleted file mode 100644 index a7a2a0896..000000000 --- a/ui-kit/react/v7/react-router-conversation.mdx +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: "Conversation List + Message View" -sidebarTitle: "Conversation List + Message View" -description: "Build a two-panel conversation list + message view layout in React Router with CometChat UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React Router | -| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/v7/integration-react-router) first | -| SSR | N/A — client-side SPA by default | -| Pattern | WhatsApp Web, Slack, Microsoft Teams | - - - -This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. - -This assumes you've already completed [React Router Integration](/ui-kit/react/v7/integration-react-router) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three sections working together: - -1. **Sidebar (conversation list)** — shows all active conversations (users and groups) -2. **Message view** — displays chat messages for the selected conversation in real time -3. **Message composer** — text input with support for media, emojis, and reactions - ---- - -## Full Code - -Create a chat route component. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/pages/ChatPage.tsx" -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatConversations, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./ChatPage.css"; - -export default function ChatPage() { - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - - const handleConversationClick = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); - setSelectedGroup(undefined); - } else { - setSelectedGroup(entity as CometChat.Group); - setSelectedUser(undefined); - } - }; - - return ( - -
-
- -
- - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation to start chatting -
- )} -
- - ); -} -``` - -```css title="src/pages/ChatPage.css" -.conversations-with-messages { - display: flex; - height: 100vh; - width: 100%; -} - -.conversations-wrapper { - width: 360px; - height: 100%; - border-right: 1px solid #eee; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.messages-wrapper { - flex: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #f5f5f5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} -``` - -Register the route in your `App.tsx`: - -```tsx title="src/App.tsx" -import { Routes, Route, Navigate } from "react-router-dom"; -import ChatPage from "./pages/ChatPage"; - -function App() { - // ... login logic from integration guide ... - - return ( - - } /> - } /> - - ); -} - -export default App; -``` - ---- - -## How It Works - -1. **CometChatProvider** wraps the entire tree — it supplies theme, locale, and event context to all CometChat components. -2. **CometChatConversations** renders the sidebar list. When a user clicks a conversation, `onItemClick` fires with the `Conversation` object. -3. **handleConversationClick** extracts the `User` or `Group` from the conversation and stores it in state. -4. **Message components** (`MessageHeader`, `MessageList`, `MessageComposer`) receive either `user` or `group` as a prop — never both at the same time. -5. When the user switches conversations, state updates and the message panel re-renders with the new chat. -6. **React Router** handles navigation — the chat page is a route component at `/chat`. - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173/chat`. You should see the conversation list on the left. Click any conversation to load messages on the right. - ---- - -## Next Steps - - - - Single chat window without a sidebar - - - Tabbed navigation with Chats, Calls, Users - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - diff --git a/ui-kit/react/v7/react-router-one-to-one-chat.mdx b/ui-kit/react/v7/react-router-one-to-one-chat.mdx deleted file mode 100644 index fb8b30e21..000000000 --- a/ui-kit/react/v7/react-router-one-to-one-chat.mdx +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: "One-to-One / Group Chat" -sidebarTitle: "One-to-One / Group Chat" -description: "Build a single chat window for one-to-one or group messaging in React Router with CometChat UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React Router | -| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/v7/integration-react-router) first | -| SSR | N/A — client-side SPA by default | -| Pattern | Support chat, embedded widgets, focused messaging | - - - -This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. - -This assumes you've already completed [React Router Integration](/ui-kit/react/v7/integration-react-router) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three components stacked vertically: - -1. **Chat header** — displays recipient name, avatar, online status, and optional call buttons -2. **Message list** — real-time chat history with scrolling -3. **Message composer** — text input with media, emojis, and reactions - ---- - -## Full Code - -Create a route component for the chat page. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/pages/DirectChatPage.tsx" -import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./DirectChatPage.css"; - -const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with - -export default function DirectChatPage() { - const [chatUser, setChatUser] = useState(undefined); - - useEffect(() => { - CometChat.getUser(RECIPIENT_UID).then( - (user) => setChatUser(user), - (error) => console.error("User fetch failed:", error) - ); - }, []); - - if (!chatUser) return
Loading chat...
; - - return ( - -
- - - -
- - ); -} -``` - -```css title="src/pages/DirectChatPage.css" -.chat-window { - display: flex; - flex-direction: column; - height: 100vh; - width: 100%; -} -``` - -Register the route in your `App.tsx`: - -```tsx title="src/App.tsx" -import { Routes, Route, Navigate } from "react-router-dom"; -import DirectChatPage from "./pages/DirectChatPage"; - -function App() { - // ... login logic from integration guide ... - - return ( - - } /> - } /> - - ); -} - -export default App; -``` - -Key points: -- `CometChat.getUser(UID)` fetches the full user object from the SDK — you need a real user object, not a manually constructed one. -- Pass either `user` or `group` to the message components, never both. -- The `RECIPIENT_UID` should be a user that exists in your CometChat app. Use one of the pre-created test UIDs: `cometchat-uid-1` through `cometchat-uid-5`. -- The chat page is a route component — React Router handles navigation. - ---- - -## Switching to Group Chat - -To load a group chat instead of one-to-one, fetch a `Group` object and pass it to the message components: - -```tsx title="src/pages/DirectChatPage.tsx" -import { useEffect, useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./DirectChatPage.css"; - -const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID - -export default function DirectChatPage() { - const [chatGroup, setChatGroup] = useState(undefined); - - useEffect(() => { - CometChat.getGroup(GROUP_ID).then( - (group) => setChatGroup(group), - (error) => console.error("Group fetch failed:", error) - ); - }, []); - - if (!chatGroup) return
Loading chat...
; - - return ( - -
- - - -
- - ); -} -``` - -The only difference: use `CometChat.getGroup(GUID)` instead of `CometChat.getUser(UID)`, and pass `group` instead of `user`. - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173/chat`. You should see the chat window load with the conversation for the UID or GUID you set. - ---- - -## Next Steps - - - - Two-panel layout with a sidebar - - - Tabbed navigation with Chats, Calls, Users - - - Browse all prebuilt UI components - - diff --git a/ui-kit/react/v7/react-router-tab-based-chat.mdx b/ui-kit/react/v7/react-router-tab-based-chat.mdx deleted file mode 100644 index 6686018d5..000000000 --- a/ui-kit/react/v7/react-router-tab-based-chat.mdx +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: "Tab-Based Chat" -sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in React Router." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React Router | -| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Tabbed sidebar (Chat, Calls, Users) + message view | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/v7/integration-react-router) first | -| SSR | N/A — client-side SPA by default | -| Pattern | Full-featured messaging app with multiple sections | - - - -This guide builds a tabbed messaging UI — Chat, Calls, and Users tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. - -This assumes you've already completed [React Router Integration](/ui-kit/react/v7/integration-react-router) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three sections working together: - -1. **Tab bar** — switches between Chat, Calls, and Users -2. **Sidebar** — renders the list for the active tab -3. **Message view** — header + messages + composer for the selected item - ---- - -## Full Code - -Create a route component for the tabbed chat page. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/pages/TabbedChatPage.tsx" -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatConversations, - CometChatUsers, - CometChatCallLogs, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./TabbedChatPage.css"; - -type Tab = "chat" | "calls" | "users"; - -export default function TabbedChatPage() { - const [activeTab, setActiveTab] = useState("chat"); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - - const handleConversationClick = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); - setSelectedGroup(undefined); - } else { - setSelectedGroup(entity as CometChat.Group); - setSelectedUser(undefined); - } - }; - - const handleUserClick = (user: CometChat.User) => { - setSelectedUser(user); - setSelectedGroup(undefined); - }; - - const handleCallClick = (call: any) => { - const initiator = call.getInitiator(); - const receiver = call.getReceiver(); - - // Determine the other party in the call - if (receiver instanceof CometChat.User) { - setSelectedUser(receiver); - setSelectedGroup(undefined); - } else if (receiver instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(receiver); - } else if (initiator instanceof CometChat.User) { - setSelectedUser(initiator); - setSelectedGroup(undefined); - } - }; - - return ( - -
-
-
- - - -
- -
- {activeTab === "chat" && ( - - )} - {activeTab === "calls" && ( - - )} - {activeTab === "users" && ( - - )} -
-
- - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation to start chatting -
- )} -
- - ); -} -``` - -```css title="src/pages/TabbedChatPage.css" -.tabbed-chat { - display: flex; - height: 100vh; - width: 100%; -} - -.sidebar { - width: 360px; - height: 100%; - display: flex; - flex-direction: column; - border-right: 1px solid #eee; -} - -.tab-bar { - display: flex; - border-bottom: 1px solid #eee; - background: var(--cometchat-background-color-01, #fff); -} - -.tab-button { - flex: 1; - padding: 12px 0; - border: none; - background: none; - cursor: pointer; - font: var(--cometchat-font-body-medium, 500 14px Roboto); - color: var(--cometchat-text-color-secondary, #727272); - border-bottom: 2px solid transparent; - transition: color 0.2s, border-color 0.2s; -} - -.tab-button:hover { - color: var(--cometchat-text-color-primary, #141414); -} - -.tab-button--active { - color: var(--cometchat-text-color-highlight, #6851d6); - border-bottom-color: var(--cometchat-primary-color, #6851d6); -} - -.sidebar-list { - flex: 1; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.messages-wrapper { - flex: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #f5f5f5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} -``` - -Register the route in your `App.tsx`: - -```tsx title="src/App.tsx" -import { Routes, Route, Navigate } from "react-router-dom"; -import TabbedChatPage from "./pages/TabbedChatPage"; - -function App() { - // ... login logic from integration guide ... - - return ( - - } /> - } /> - - ); -} - -export default App; -``` - ---- - -## How It Works - -1. **Tab state** — `activeTab` controls which list component renders in the sidebar. -2. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one. -3. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel. -4. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components. -5. **React Router** handles navigation — the tabbed chat page is a route component at `/chat`. - ---- - -## Adding More Tabs - -To add a Groups tab, import `CometChatGroups` and add another tab button + conditional render: - -```tsx -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -// Add to Tab type: -type Tab = "chat" | "calls" | "users" | "groups"; - -// Add button in tab-bar: - - -// Add in sidebar-list: -{activeTab === "groups" && ( - { - setSelectedGroup(group); - setSelectedUser(undefined); - }} - /> -)} -``` - -You can follow the same pattern for any additional tabs (Settings, Contacts, etc.). - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173/chat`. You should see the tab bar at the top of the sidebar. Switch between Chats, Calls, and Users — clicking any item loads the message view on the right. - ---- - -## Next Steps - - - - Two-panel layout without tabs - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - diff --git a/ui-kit/react/v7/react-tab-based-chat.mdx b/ui-kit/react/v7/react-tab-based-chat.mdx deleted file mode 100644 index 3ddf5b177..000000000 --- a/ui-kit/react/v7/react-tab-based-chat.mdx +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: "Tab-Based Chat" -sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in React.js." ---- - - - -| Field | Value | -| --- | --- | -| Package | `@cometchat/chat-uikit-react` | -| Framework | React.js | -| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | -| Layout | Tabbed sidebar (Chat, Calls, Users) + message view | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/v7/integration-react) first | -| Pattern | Full-featured messaging app with multiple sections | - - - -This guide builds a tabbed messaging UI — Chat, Calls, and Users tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. - -This assumes you've already completed [React.js Integration](/ui-kit/react/v7/integration-react) (project created, UI Kit installed, init + login working). - - - - - - ---- - -## What You're Building - -Three sections working together: - -1. **Tab bar** — switches between Chat, Calls, and Users -2. **Sidebar** — renders the list for the active tab -3. **Message view** — header + messages + composer for the selected item - ---- - -## Full Code - -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). - -```tsx title="src/App.tsx" -import { useState } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatProvider, - CometChatConversations, - CometChatUsers, - CometChatCallLogs, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer, -} from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; -import "./App.css"; - -type Tab = "chat" | "calls" | "users"; - -function App() { - const [activeTab, setActiveTab] = useState("chat"); - const [selectedUser, setSelectedUser] = useState(undefined); - const [selectedGroup, setSelectedGroup] = useState(undefined); - - const handleConversationClick = (conversation: CometChat.Conversation) => { - const entity = conversation.getConversationWith(); - if (conversation.getConversationType() === "user") { - setSelectedUser(entity as CometChat.User); - setSelectedGroup(undefined); - } else { - setSelectedGroup(entity as CometChat.Group); - setSelectedUser(undefined); - } - }; - - const handleUserClick = (user: CometChat.User) => { - setSelectedUser(user); - setSelectedGroup(undefined); - }; - - const handleCallClick = (call: any) => { - const initiator = call.getInitiator(); - const receiver = call.getReceiver(); - const loggedInUser = CometChat.getLoggedinUser - ? undefined - : undefined; - - // Determine the other party in the call - if (receiver instanceof CometChat.User) { - setSelectedUser(receiver); - setSelectedGroup(undefined); - } else if (receiver instanceof CometChat.Group) { - setSelectedUser(undefined); - setSelectedGroup(receiver); - } else if (initiator instanceof CometChat.User) { - setSelectedUser(initiator); - setSelectedGroup(undefined); - } - }; - - return ( - -
-
-
- - - -
- -
- {activeTab === "chat" && ( - - )} - {activeTab === "calls" && ( - - )} - {activeTab === "users" && ( - - )} -
-
- - {selectedUser || selectedGroup ? ( -
- - - -
- ) : ( -
- Select a conversation to start chatting -
- )} -
- - ); -} - -export default App; -``` - -```css title="src/App.css" -.tabbed-chat { - display: flex; - height: 100vh; - width: 100%; -} - -.sidebar { - width: 360px; - height: 100%; - display: flex; - flex-direction: column; - border-right: 1px solid #eee; -} - -.tab-bar { - display: flex; - border-bottom: 1px solid #eee; - background: var(--cometchat-background-color-01, #fff); -} - -.tab-button { - flex: 1; - padding: 12px 0; - border: none; - background: none; - cursor: pointer; - font: var(--cometchat-font-body-medium, 500 14px Roboto); - color: var(--cometchat-text-color-secondary, #727272); - border-bottom: 2px solid transparent; - transition: color 0.2s, border-color 0.2s; -} - -.tab-button:hover { - color: var(--cometchat-text-color-primary, #141414); -} - -.tab-button--active { - color: var(--cometchat-text-color-highlight, #6851d6); - border-bottom-color: var(--cometchat-primary-color, #6851d6); -} - -.sidebar-list { - flex: 1; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.messages-wrapper { - flex: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.empty-conversation { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - background: var(--cometchat-background-color-03, #f5f5f5); - color: var(--cometchat-text-color-secondary, #727272); - font: var(--cometchat-font-body-regular, 400 14px Roboto); -} -``` - ---- - -## How It Works - -1. **Tab state** — `activeTab` controls which list component renders in the sidebar. -2. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one. -3. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel. -4. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components. - ---- - -## Adding More Tabs - -To add a Groups tab, import `CometChatGroups` and add another tab button + conditional render: - -```tsx -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -// Add to Tab type: -type Tab = "chat" | "calls" | "users" | "groups"; - -// Add button in tab-bar: - - -// Add in sidebar-list: -{activeTab === "groups" && ( - { - setSelectedGroup(group); - setSelectedUser(undefined); - }} - /> -)} -``` - -You can follow the same pattern for any additional tabs (Settings, Contacts, etc.). - ---- - -## Run - -```bash -npm run dev -``` - -Open `http://localhost:5173`. You should see the tab bar at the top of the sidebar. Switch between Chats, Calls, and Users — clicking any item loads the message view on the right. - ---- - -## Next Steps - - - - Two-panel layout without tabs - - - Browse all prebuilt UI components - - - Customize colors, fonts, and styles - - diff --git a/ui-kit/react/v7/sound-manager.mdx b/ui-kit/react/v7/sound-manager.mdx deleted file mode 100644 index f39c16864..000000000 --- a/ui-kit/react/v7/sound-manager.mdx +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: "Sound Manager" -description: "Play notification sounds for incoming/outgoing messages and calls with custom sound URL support." ---- - - - -| Field | Value | -| --- | --- | -| Class | `CometChatSoundManager` | -| Package | `@cometchat/chat-uikit-react` | -| Sound types | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` | -| Custom sounds | Pass URL as second argument: `CometChatSoundManager.play('incomingMessage', '/my-sound.mp3')` | -| Disable | Use `disableSoundForMessages` / `disableSoundForCalls` in `config` prop | - - - -## Overview - -`CometChatSoundManager` handles audio notifications for chat events. It plays sounds when messages are sent/received and when calls are initiated/received. Components use it internally — you don't need to call it manually unless you want custom behavior. - ---- - -## Sound Types - -| Type | When it plays | Loops | -| --- | --- | --- | -| `outgoingMessage` | User sends a message | No | -| `incomingMessage` | Message received in the active conversation | No | -| `incomingMessageFromOther` | Message received in a different conversation | No | -| `incomingCall` | Incoming call notification | Yes | -| `outgoingCall` | Outgoing call ringing | Yes | - ---- - -## Disabling Sounds - -Use the `config` prop on `CometChatProvider`: - -```tsx - - - -``` - -You can also disable sounds per-component via props like `disableSoundForMessages` on `CometChatConversations` and `CometChatMessageComposer`. - ---- - -## Custom Sound URLs - -Replace default sounds with your own audio files: - -```tsx -import { CometChatSoundManager } from "@cometchat/chat-uikit-react"; - -// Play a custom notification sound -CometChatSoundManager.play("incomingMessage", "/sounds/notification.mp3"); - -// Or use convenience methods -CometChatSoundManager.onIncomingMessage("/sounds/notification.mp3"); -CometChatSoundManager.onOutgoingMessage("/sounds/sent.mp3"); -``` - ---- - -## API Reference - -### Static Methods - -| Method | Signature | Description | -| --- | --- | --- | -| `play` | `(sound: SoundType, customUrl?: string) => void` | Play a sound (with optional custom URL) | -| `pause` | `() => void` | Stop the currently playing sound | -| `onOutgoingMessage` | `(customUrl?: string) => void` | Play outgoing message sound | -| `onIncomingMessage` | `(customUrl?: string) => void` | Play incoming message sound | -| `onIncomingOtherMessage` | `(customUrl?: string) => void` | Play incoming message from other conversation | -| `onIncomingCall` | `(customUrl?: string) => void` | Play incoming call sound (loops) | -| `onOutgoingCall` | `(customUrl?: string) => void` | Play outgoing call sound (loops) | - ---- - -## Browser Autoplay Policy - -Browsers require user interaction before playing audio. `CometChatSoundManager` checks `navigator.userActivation` before attempting playback. If the user hasn't interacted with the page yet, sounds are silently skipped. - ---- - -## SSR Safety - -All `Audio` API usage is guarded behind `typeof Audio !== 'undefined'` checks. The sound manager is safe to import in server-side rendering environments — it simply no-ops when `Audio` is unavailable. diff --git a/ui-kit/react/v7/theme/color-resources.mdx b/ui-kit/react/v7/theme/color-resources.mdx deleted file mode 100644 index ae8187b28..000000000 --- a/ui-kit/react/v7/theme/color-resources.mdx +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: "Color Resources" -description: "Complete reference of all color CSS variables with light and dark theme values." ---- - - - -| Field | Value | -| --- | --- | -| Override scope | `.cometchat` (global) or `.cometchat-{component}` (per-component) | -| Key token | `--cometchat-primary-color` — brand/accent color | -| Light theme | Defined in `:root, [data-theme='light']` | -| Dark theme | Defined in `[data-theme='dark']` | -| Import | `import "@cometchat/chat-uikit-react/styles";` | - - - -## Overview - -All colors in the UI Kit are defined as CSS custom properties. Override them to match your brand. Variables cascade — set on `.cometchat` to affect everything, or on a specific component class to scope the change. - -```css title="src/cometchat-overrides.css" -.cometchat { - --cometchat-primary-color: #e91e63; -} -``` - ---- - -## Primary Colors - -The primary color and its extended scale (50 = lightest, 900 = darkest). - -| Token | Light | Dark | -| --- | --- | --- | -| `--cometchat-primary-color` | `#6852d6` | `#6852d6` | -| `--cometchat-extended-primary-color-50` | `#f5f2ff` | `#15102b` | -| `--cometchat-extended-primary-color-100` | `#ebe5ff` | `#1d173c` | -| `--cometchat-extended-primary-color-200` | `#d6ccff` | `#251e4d` | -| `--cometchat-extended-primary-color-300` | `#c2b2ff` | `#2e245e` | -| `--cometchat-extended-primary-color-400` | `#ad99ff` | `#362b6f` | -| `--cometchat-extended-primary-color-500` | `#997fff` | `#3e3180` | -| `--cometchat-extended-primary-color-600` | `#8566ff` | `#473892` | -| `--cometchat-extended-primary-color-700` | `#704cff` | `#4f3ea3` | -| `--cometchat-extended-primary-color-800` | `#5c33ff` | `#5745b4` | -| `--cometchat-extended-primary-color-900` | `#4719ff` | `#7460d9` | - ---- - -## Neutral Colors - -Gray scale used for backgrounds, borders, and text. - -| Token | Light | Dark | -| --- | --- | --- | -| `--cometchat-neutral-color-50` | `#ffffff` | `#141414` | -| `--cometchat-neutral-color-100` | `#fafafa` | `#1a1a1a` | -| `--cometchat-neutral-color-200` | `#f5f5f5` | `#272727` | -| `--cometchat-neutral-color-300` | `#e8e8e8` | `#383838` | -| `--cometchat-neutral-color-400` | `#c4c4c4` | `#4c4c4c` | -| `--cometchat-neutral-color-500` | `#a1a1a1` | `#858585` | -| `--cometchat-neutral-color-600` | `#727272` | `#989898` | -| `--cometchat-neutral-color-700` | `#565656` | `#a8a8a8` | -| `--cometchat-neutral-color-800` | `#333333` | `#c8c8c8` | -| `--cometchat-neutral-color-900` | `#141414` | `#ffffff` | - ---- - -## Alert Colors - -| Token | Light | Dark | Purpose | -| --- | --- | --- | --- | -| `--cometchat-info-color` | `#0f73d6` | `#0d66bf` | Informational | -| `--cometchat-warning-color` | `#ffab00` | `#d08d04` | Warning / mentions | -| `--cometchat-success-color` | `#09b26b` | `#0b9f5d` | Success | -| `--cometchat-error-color` | `#f44649` | `#c73c3e` | Error / danger | -| `--cometchat-message-seen-color` | `#56e8a7` | `#56e8a7` | Read receipts | - ---- - -## Semantic Colors - -These reference the neutral/primary scales and change automatically with the theme. - -### Backgrounds - -| Token | Maps to | -| --- | --- | -| `--cometchat-background-color-01` | `neutral-color-50` (base) | -| `--cometchat-background-color-02` | `neutral-color-100` (surface) | -| `--cometchat-background-color-03` | `neutral-color-200` (elevated) | -| `--cometchat-background-color-04` | `neutral-color-300` (highest) | - -### Borders - -| Token | Maps to | -| --- | --- | -| `--cometchat-border-color-light` | `neutral-color-200` | -| `--cometchat-border-color-default` | `neutral-color-300` | -| `--cometchat-border-color-dark` | `neutral-color-400` | -| `--cometchat-border-color-highlight` | `primary-color` | - -### Text - -| Token | Maps to | -| --- | --- | -| `--cometchat-text-color-primary` | `neutral-color-900` | -| `--cometchat-text-color-secondary` | `neutral-color-600` | -| `--cometchat-text-color-tertiary` | `neutral-color-500` | -| `--cometchat-text-color-disabled` | `neutral-color-400` | -| `--cometchat-text-color-white` | `neutral-color-50` | -| `--cometchat-text-color-highlight` | `primary-color` | - -### Icons - -| Token | Maps to | -| --- | --- | -| `--cometchat-icon-color-primary` | `neutral-color-900` | -| `--cometchat-icon-color-secondary` | `neutral-color-500` | -| `--cometchat-icon-color-tertiary` | `neutral-color-400` | -| `--cometchat-icon-color-white` | `neutral-color-50` | -| `--cometchat-icon-color-highlight` | `primary-color` | - ---- - -## Buttons - -| Token | Light | Dark | -| --- | --- | --- | -| `--cometchat-primary-button-background` | `primary-color` | `primary-color` | -| `--cometchat-primary-button-text` | `static-white` | `static-white` | -| `--cometchat-primary-button-icon` | `static-white` | `static-white` | -| `--cometchat-secondary-button-background` | `neutral-color-900` | `neutral-color-900` | -| `--cometchat-secondary-button-text` | `neutral-color-900` | `neutral-color-900` | -| `--cometchat-fab-button-background` | `primary-color` | `primary-color` | -| `--cometchat-link-button` | `info-color` | `info-color` | - ---- - -## Example: Brand Color Override - -```css title="src/cometchat-overrides.css" -/* Change the primary brand color globally — target .cometchat (the root wrapper) */ -.cometchat { - --cometchat-primary-color: #e91e63; - --cometchat-extended-primary-color-500: #e91e63; - --cometchat-extended-primary-color-600: #d81b60; - --cometchat-extended-primary-color-700: #c2185b; -} -``` - -## Example: Dark Mode Override - -```css -[data-theme="dark"] { - --cometchat-primary-color: #bb86fc; - --cometchat-background-color-01: #121212; - --cometchat-background-color-02: #1e1e1e; -} -``` - - -Always target `.cometchat` or `[data-theme="..."]` for global overrides. For per-component overrides, use the component's BEM class name directly (e.g., `.cometchat-conversations`). See [Theming](/ui-kit/react/v7/theming#component-css-classes) for details. - diff --git a/ui-kit/react/v7/theme/message-bubble-styling.mdx b/ui-kit/react/v7/theme/message-bubble-styling.mdx deleted file mode 100644 index d6197a748..000000000 --- a/ui-kit/react/v7/theme/message-bubble-styling.mdx +++ /dev/null @@ -1,983 +0,0 @@ ---- -title: "Message Bubble Styling" -description: "Customize incoming and outgoing message bubble colors, backgrounds, and styles using CSS variables and class selectors in the CometChat React UI Kit." ---- - - - -| Field | Value | -| --- | --- | -| Goal | Customize message bubble appearance (colors, backgrounds) per direction and message type | -| Where | `App.css` (global) — imported in app entry via `import "./App.css";` | -| Base selector | `.cometchat .cometchat-message-bubble-(incoming\|outgoing) .cometchat-message-bubble__body` | -| Type modifier | Append `.cometchat-message-bubble__-message` to target specific types (`text`, `image`, `video`, `audio`, `file`) | -| Key tokens | `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg) | -| Constraints | Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors | - - - -Message bubble styling uses distinct CSS classes for incoming and outgoing messages. Each message type (text, image, video, audio, file, etc.) has predefined classes for default styling, customizable via CSS variable overrides. - - -**Prerequisites before applying any CSS customization:** -1. All selectors assume the UI Kit renders under a `.cometchat` root wrapper -2. Import your CSS file at the app entry: `import "./App.css";` in `App.tsx` -3. Use **global CSS** (not CSS Modules with hashed class names) — hashed selectors won't match - - ---- - -## Selector Pattern - -Use this table to construct the correct CSS selector for any message bubble target. AI agents should use this pattern to generalize — do not guess selectors. - -| Target | Selector Pattern | -| --- | --- | -| All bubbles | `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body` | -| Outgoing bubbles (all types) | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body` | -| Incoming bubbles (all types) | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body` | -| Specific type (outgoing) | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__-message` | -| Specific type (incoming) | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__-message` | -| Action bubbles (no direction) | `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` | - - - -`` - -`` is one of `text`, `image`, `video`, `audio`, `file` - - - -Link Preview Bubbles - -It reuse the `text-message` type selector since link previews are rendered inside text messages. - - ---- - -## CSS Variable Reference - -These are the CSS variables (tokens) used across message bubble styling. This table tells you exactly what each token controls — do not assume a token affects something not listed here. - -| Variable | What It Controls | Default (Light) | Commonly Used On | -| --- | --- | --- | --- | -| `--cometchat-primary-color` | Outgoing bubble background, primary accent | `#6852d6` | Outgoing bubbles (all types), action bubble accent | -| `--cometchat-neutral-color-300` | Incoming bubble background | `#E8E8E8` | Incoming bubbles (all types) | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade/gradient variant | `#5d49be` | Outgoing text bubble, link preview | -| `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade | `#5745b4` | Direct call outgoing bubble | -| `--cometchat-extended-primary-color-700` | Outgoing bubble tertiary shade | `#4f3ea3` | Poll outgoing bubble | -| `--cometchat-neutral-color-400` | Incoming bubble secondary shade | varies | Link preview incoming | -| `--cometchat-primary-button-background` | Primary button fill inside bubbles | matches primary | Whiteboard/document incoming buttons | -| `--cometchat-text-color-secondary` | Secondary/caption text color | varies | Action bubble text | -| `--cometchat-icon-color-secondary` | Secondary icon color | varies | Action bubble icons | -| `--cometchat-border-color-default` | Default border color | varies | Action bubble borders | - ---- - - -**CSS Specificity & Precedence Rules:** -1. Message-type selectors (e.g., `__text-message`) override "All Message Bubbles" selectors -2. Always keep the `.cometchat` prefix to avoid leaking styles into the host app -3. Component-level variable overrides (`.cometchat-message-list { --var: val }`) override global overrides (`.cometchat { --var: val }`) -4. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing -5. `!important` should never be needed — if it is, your selector specificity is wrong - - ---- - -## Bubble Structure - -Each message bubble has this DOM structure: - -``` -.cometchat-message-bubble - ├── .cometchat-message-bubble__leading-view (avatar) - ├── .cometchat-message-bubble__header-view (sender name) - ├── .cometchat-message-bubble__body-container - │ ├── .cometchat-message-bubble__body-wrapper - │ │ ├── .cometchat-message-bubble__body - │ │ │ ├── .cometchat-message-bubble__body-reply-view (quoted message) - │ │ │ ├── .cometchat-message-bubble__body-content-view (plugin bubble content) - │ │ │ └── .cometchat-message-bubble__body-status-info-view (timestamp + receipts) - │ │ ├── .cometchat-message-bubble__body-footer-view (reactions) - │ │ ├── .cometchat-message-bubble__body-thread-view (reply count) - │ │ └── .cometchat-message-bubble__body-bottom-view (moderation) - │ └── .cometchat-message-bubble__options (context menu) -``` - ---- - -## Incoming & Outgoing Messages - -Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others'. Here, we show both the default view and examples of customizations for these message bubbles. - -Shown below is the default chat interface. - - - - - -*** - -### Styling - -#### Outgoing Message Bubbles - -**Selectors:** -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body -``` - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade | - -The customized chat interface is displayed below. - - - - - -Use the following code to achieve the customization shown above. - -```css title="App.css" -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { - --cometchat-primary-color: #f76808; - --cometchat-extended-primary-color-900: #fbaa75; -} -``` - -**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75). - -*** - -#### Incoming Message Bubbles - -**Selectors:** -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body -``` - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-neutral-color-300` | Incoming bubble background | - -The customized chat interface is displayed below. - - - - - -Use the following code to achieve the customization shown above. - -```css title="App.css" -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { - --cometchat-neutral-color-300: #f76808; -} -``` - -**Expected result:** All incoming message bubbles change from white/light to orange (#f76808). - -*** - -#### All Message Bubbles - -**Selectors:** -```css -.cometchat .cometchat-message-bubble .cometchat-message-bubble__body -``` - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-neutral-color-300` | Incoming bubble background | -| `--cometchat-primary-color` | Outgoing bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade | - -The customized chat interface is displayed below. - - - - - -Use the following code to achieve the customization shown above. - -```css title="App.css" -.cometchat .cometchat-message-bubble .cometchat-message-bubble__body { - --cometchat-neutral-color-300: #f76808; - --cometchat-primary-color: #f76808; - --cometchat-extended-primary-color-900: #fbaa75; -} -``` - -**Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75). - -*** - -### Complete End-to-End Example - -To apply custom bubble colors in your app: - -**Step 1:** Add to `App.css`: - -```css -/* Custom outgoing bubbles */ -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { - --cometchat-primary-color: #f76808; - --cometchat-extended-primary-color-900: #fbaa75; -} - -/* Custom incoming bubbles */ -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { - --cometchat-neutral-color-300: #feede1; -} -``` - -**Step 2:** Ensure `App.tsx` imports the CSS: - -```tsx -import "./App.css"; -// ... render CometChat UI Kit components -``` - -**Expected result:** Outgoing bubbles use orange (#f76808) with lighter shade (#fbaa75); incoming bubbles use light peach (#feede1). - -*** - -## Message Types - -CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly get up to speed with CSS customization. - -*** - -### Text Message Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing text bubble background | -| `--cometchat-neutral-color-300` | Incoming text bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Text Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Text Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1). - -*** - -### Image Message Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing image bubble background | -| `--cometchat-neutral-color-300` | Incoming image bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Image Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__image-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Image Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__image-message { - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1). - -*** - -### Video Message Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing video bubble background | -| `--cometchat-neutral-color-300` | Incoming video bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Video Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__video-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Video Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__video-message { - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1). - -*** - -### Audio Message Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing audio bubble background, incoming audio accent | -| `--cometchat-neutral-color-300` | Incoming audio bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Audio Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__audio-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Audio Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__audio-message { - --cometchat-primary-color: #f76808; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing audio bubbles change to orange (#f76808); incoming audio bubbles change to light peach (#feede1) with orange accent for playback controls. - -*** - -### File Message Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing file bubble background, incoming file accent | -| `--cometchat-neutral-color-300` | Incoming file bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing File Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__file-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming File Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__file-message { - --cometchat-primary-color: #f76808; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing file bubbles change to orange (#f76808); incoming file bubbles change to light peach (#feede1) with orange file icon accent. - -*** - -### Action Message Bubble - -Action messages (e.g., "User joined the group") use a different selector pattern — they are not directional (no incoming/outgoing). - -**Selector:** -- `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Action bubble accent color | -| `background-color` | Action bubble background (direct CSS property, not a variable) | -| `--cometchat-text-color-secondary` | Action bubble text color | -| `--cometchat-icon-color-secondary` | Action bubble icon color | -| `--cometchat-border-color-default` | Action bubble border color | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -.cometchat .cometchat-message-bubble__body .cometchat-action-bubble { - --cometchat-primary-color: #f76808; - background-color: #feede1; - --cometchat-text-color-secondary: #f76808; - --cometchat-icon-color-secondary: #f76808; - --cometchat-border-color-default: #f76808; -} -``` - - - -**Expected result:** Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808). - -*** - -### Extensions - -#### Collaborative Whiteboard Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - - - -In v7, collaborative whiteboard messages use the `text-message` type class internally. - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-primary-button-background` | Incoming whiteboard "Open" button fill | -| `--cometchat-neutral-color-300` | Incoming bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Collaborative Whiteboard Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Collaborative Whiteboard Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; - --cometchat-primary-button-background: #f76808; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing whiteboard bubbles change to orange (#f76808); incoming whiteboard bubbles change to light peach (#feede1) with orange button and accent. - -*** - -#### Collaborative Document Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - - - -In v7, collaborative document messages use the `text-message` type class internally. - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-primary-button-background` | Incoming document "Open" button fill | -| `--cometchat-neutral-color-300` | Incoming bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Collaborative Document Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Collaborative Document Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; - --cometchat-primary-button-background: #f76808; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing document bubbles change to orange (#f76808); incoming document bubbles change to light peach (#feede1) with orange button and accent. - -*** - -#### Polls Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - - - -In v7, poll messages use the `text-message` type class internally. - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-extended-primary-color-700` | Outgoing poll progress bar shade | -| `--cometchat-neutral-color-300` | Incoming bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Poll Message Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; - --cometchat-extended-primary-color-700: #fbaa75; -} - -/* Incoming Poll Message Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing poll bubbles change to orange (#f76808) with lighter progress bars (#fbaa75); incoming poll bubbles change to light peach (#feede1) with orange accent. - -*** - -#### Stickers Bubble - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message -``` - - - - -In v7, sticker messages use the `image-message` type class internally. - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing sticker bubble background | -| `--cometchat-neutral-color-300` | Incoming sticker bubble background | - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Sticker Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__image-message { - --cometchat-primary-color: #f76808; -} - -/* Incoming Sticker Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__image-message { - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1). - -*** - -#### Link Preview Bubble - -Link previews render inside text message bubbles, so they use the `text-message` type selector. - -**Selectors:** - - -```css -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - -```css -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message -``` - - - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing link preview bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing link preview shade | -| `--cometchat-neutral-color-400` | Incoming link preview secondary shade | -| `--cometchat-neutral-color-300` | Incoming link preview bubble background | - - -Styling link preview bubbles also affects regular text message bubbles since they share the same `__text-message` selector. This is by design — link previews are a sub-feature of text messages. - - -Shown below is the default chat interface. - - - - - -The customized chat interface is displayed below. - - - - - -**Complete CSS:** - - - -```css -/* Outgoing Link Preview Bubble */ -.cometchat - .cometchat-message-bubble-outgoing - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-primary-color: #f76808; - --cometchat-extended-primary-color-900: #fbaa75; -} - -/* Incoming Link Preview Bubble */ -.cometchat - .cometchat-message-bubble-incoming - .cometchat-message-bubble__body.cometchat-message-bubble__text-message { - --cometchat-neutral-color-400: #fbaa75; - --cometchat-neutral-color-300: #feede1; -} -``` - - - -**Expected result:** Outgoing link preview bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming link preview bubbles change to light peach (#feede1) with orange secondary shade (#fbaa75). - ---- - -## CSS Selectors Reference - -Class names are plain, stable BEM names that you can target directly: - -| Target | Selector | -| --- | --- | -| Bubble wrapper | `.cometchat-message-bubble` | -| Leading view (avatar) | `.cometchat-message-bubble__leading-view` | -| Header view (sender name) | `.cometchat-message-bubble__header-view` | -| Sender name | `.cometchat-message-bubble__sender-name` | -| Body container | `.cometchat-message-bubble__body-container` | -| Body wrapper | `.cometchat-message-bubble__body-wrapper` | -| Body | `.cometchat-message-bubble__body` | -| Reply view (quoted message) | `.cometchat-message-bubble__body-reply-view` | -| Content view | `.cometchat-message-bubble__body-content-view` | -| Status info (time + receipts) | `.cometchat-message-bubble__body-status-info-view` | -| Footer (reactions) | `.cometchat-message-bubble__body-footer-view` | -| Thread indicator | `.cometchat-message-bubble__body-thread-view` | -| Bottom (moderation) | `.cometchat-message-bubble__body-bottom-view` | -| Options (context menu) | `.cometchat-message-bubble__options` | -| Incoming direction | `.cometchat-message-bubble-incoming` | -| Outgoing direction | `.cometchat-message-bubble-outgoing` | -| Action message | `.cometchat-message-bubble-action` | - - -All class names follow BEM conventions and are stable across builds. You can target them with standard `.class-name` selectors in your CSS. - diff --git a/ui-kit/react/v7/troubleshooting.mdx b/ui-kit/react/v7/troubleshooting.mdx deleted file mode 100644 index 4b96374d8..000000000 --- a/ui-kit/react/v7/troubleshooting.mdx +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: "Troubleshooting" -description: "Solutions for common issues when using CometChat React UI Kit v7" ---- - -## SSR Hydration Errors - -### Symptom - -You see a React hydration mismatch error in the console when rendering your app with a server-side rendering framework (Next.js, Remix, Astro SSR): - -``` -Error: Hydration failed because the initial UI does not match what was rendered on the server. -``` - -### Root Cause - -`CometChatProvider` uses browser-only APIs (WebSocket connections, `window`, `localStorage`) during initialization. When the component renders on the server, it produces different output than the client, causing a hydration mismatch. - -### Solution - -Mark the component boundary containing `CometChatProvider` as client-only. In Next.js App Router, add the `'use client'` directive at the top of the file: - -```tsx -'use client'; - -import { CometChatProvider } from '@cometchat/chat-uikit-react'; -import '@cometchat/chat-uikit-react/styles'; - -export function ChatProvider({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); -} -``` - -For Astro, use a `client:only="react"` directive on the component that wraps `CometChatProvider`: - -```astro - -``` - -This ensures `CometChatProvider` only renders in the browser where its required APIs are available. - ---- - -## React StrictMode Double-Mount - -### Symptom - -You notice duplicate SDK event listeners firing, causing messages to appear twice or callbacks triggering multiple times during development. - -### Root Cause - -React StrictMode intentionally mounts, unmounts, and remounts components in development to help detect side effects that aren't properly cleaned up. If SDK listeners aren't cleaned up on unmount, the remount adds a second listener. - -### Solution - -All v7 hooks handle cleanup automatically. If you're writing custom hooks that attach SDK listeners, always return a cleanup function from `useEffect`: - -```tsx -import { useEffect, useId } from 'react'; -import { CometChat } from '@cometchat/chat-sdk-javascript'; - -function useCustomMessageListener(onMessage: (msg: CometChat.BaseMessage) => void) { - const listenerId = useId(); - - useEffect(() => { - CometChat.addMessageListener( - listenerId, - new CometChat.MessageListener({ - onTextMessageReceived: onMessage, - onMediaMessageReceived: onMessage, - onCustomMessageReceived: onMessage, - }) - ); - - // Cleanup removes the listener on unmount - return () => { - CometChat.removeMessageListener(listenerId); - }; - }, [listenerId, onMessage]); -} -``` - -Key points: -- Use `useId()` for unique listener IDs — it's stable across StrictMode remounts within the same component instance. -- Always remove listeners in the cleanup function returned from `useEffect`. -- The built-in `useSDKEvents` hook already handles this correctly. - ---- - -## SDK Initialization Failures - -### Symptom - -The chat UI shows an error state or nothing renders. The console displays: - -``` -CometChat SDK initialization failed: ERR_INVALID_CREDENTIALS -``` - -or - -``` -CometChat SDK initialization failed: ERR_NETWORK -``` - -### Root Cause - -**Invalid credentials:** The `appId`, `region`, or `authKey` passed to `CometChatProvider` are incorrect, expired, or belong to a different environment (e.g., using production credentials in a development build). - -**Network issues:** The client cannot reach CometChat's servers due to network restrictions, firewall rules, or the CometChat service being temporarily unavailable. - -### Solution - -Verify your credentials match your CometChat dashboard and use the `onError` callback to surface initialization issues: - -```tsx -import { CometChatProvider } from '@cometchat/chat-uikit-react'; -import '@cometchat/chat-uikit-react/styles'; - -function App() { - return ( - { - console.error('CometChat initialization error:', error); - }} - > - {/* Your chat UI */} - - ); -} -``` - -Checklist: -- Confirm `appId` and `region` match the values shown in your [CometChat Dashboard](https://app.cometchat.com) -- Ensure credentials are for the correct environment (development vs. production) -- Check that your network allows outbound WebSocket connections -- Verify the `authKey` has not been rotated since you last copied it - ---- - -## Theme Not Applying - -### Symptom - -Components render with default styling and ignore the theme you've configured. Colors, fonts, or spacing don't match your custom theme. - -### Root Cause - -The theme system relies on two things working together: -1. The CSS styles file being imported (provides the CSS custom property declarations) -2. The `data-theme` attribute being set on a parent element (activates theme-specific variable values) - -If either is missing, the theme won't apply. - -### Solution - -Ensure both the CSS import and the `theme` prop are present: - -```tsx -// 1. Import the styles entry point (required for CSS custom properties) -import '@cometchat/chat-uikit-react/styles'; - -// 2. Set the theme via CometChatProvider -import { CometChatProvider } from '@cometchat/chat-uikit-react'; - -function App() { - return ( - - {/* Components will use dark theme */} - - ); -} -``` - -If you're using a custom theme, make sure your CSS defines variables under a matching `[data-theme]` selector: - -```css -[data-theme="my-brand"] { - --cometchat-primary-color: #6366f1; - --cometchat-background-color: #0f0f23; - --cometchat-text-color: #e2e8f0; - --cometchat-border-color: #334155; -} -``` - -Then pass the custom theme name to the provider: - -```tsx - -``` - ---- - -## Missing CSS Imports - -### Symptom - -Components render as unstyled HTML elements — no backgrounds, no spacing, no borders. The layout is broken and elements stack vertically without proper structure. - -### Root Cause - -The UI Kit's styles are distributed as a separate CSS entry point. Without importing it, none of the CSS custom properties or component styles are available in the document. - -### Solution - -Add the styles import at your application's entry point, before any CometChat components render: - -```tsx -// main.tsx or App.tsx — import styles at the top level -import '@cometchat/chat-uikit-react/styles'; -import { CometChatProvider } from '@cometchat/chat-uikit-react'; - -function App() { - return ( - - {/* Components are now styled */} - - ); -} -``` - -For Next.js, add the import in your root layout: - -```tsx -// app/layout.tsx -import '@cometchat/chat-uikit-react/styles'; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); -} -``` - -The import path `@cometchat/chat-uikit-react/styles` maps to the `"./styles"` export in the package's exports map, which resolves to the compiled CSS file containing all component styles and theme variables. From fc34ab1688a3f9742479ac9fd821936725cac8ae Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Mon, 15 Jun 2026 00:09:35 +0530 Subject: [PATCH 02/27] docs(ui-kit/react): update ownership-changed event payload schema - Add newOwner and previousOwnerUid fields to ui:group/ownership-changed event payload across all affected components - Update group-members.mdx with new event definition and payload documentation - Update groups.mdx event payload and subscription table - Update message-header.mdx event payload and subscription table - Update message-list.mdx subscription table - Update event-system.mdx with complete payload schema including new fields - Ensures consistent ownership change event structure across all components that subscribe to this event --- ui-kit/react/components/group-members.mdx | 6 ++++++ ui-kit/react/components/groups.mdx | 4 ++-- ui-kit/react/components/message-header.mdx | 4 ++-- ui-kit/react/components/message-list.mdx | 2 +- ui-kit/react/event-system.mdx | 2 +- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/components/group-members.mdx b/ui-kit/react/components/group-members.mdx index deb918978..7aa480c6d 100644 --- a/ui-kit/react/components/group-members.mdx +++ b/ui-kit/react/components/group-members.mdx @@ -93,6 +93,11 @@ description: "Scrollable list of members for a specific group with role-based ac "name": "ui:group/member-scope-changed", "payload": "{ group: CometChat.Group, user: CometChat.User, newScope: string }", "description": "Updates the member's scope/role display" + }, + { + "name": "ui:group/ownership-changed", + "payload": "{ group: CometChat.Group, newOwner: CometChat.User, previousOwnerUid: string }", + "description": "Updates new owner's scope to owner and demotes previous owner to admin" } ], "sdkListeners": [ @@ -285,6 +290,7 @@ UI events this component subscribes to (published by other components): | `ui:group/member-kicked` | `{ group, user, message }` | Removes the kicked member from the list | | `ui:group/member-banned` | `{ group, user, message }` | Removes the banned member from the list | | `ui:group/member-scope-changed` | `{ group, user, newScope }` | Updates the member's scope/role display | +| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | Updates the new owner's scope to "owner" and demotes the previous owner to "admin" | ### SDK Listeners (Automatic) diff --git a/ui-kit/react/components/groups.mdx b/ui-kit/react/components/groups.mdx index cde3d6ad9..3d30b214e 100644 --- a/ui-kit/react/components/groups.mdx +++ b/ui-kit/react/components/groups.mdx @@ -111,7 +111,7 @@ description: "Searchable, scrollable list of groups with selection support and r }, { "name": "ui:group/ownership-changed", - "payload": "{ group: CometChat.Group }", + "payload": "{ group: CometChat.Group, newOwner: CometChat.User, previousOwnerUid: string }", "description": "Updates the group" } ], @@ -302,7 +302,7 @@ UI events this component subscribes to (published by other components): | `ui:group/member-kicked` | `{ group, user, message }` | Updates the group | | `ui:group/member-banned` | `{ group, user, message }` | Updates the group | | `ui:group/member-scope-changed` | `{ group, user, newScope }` | Updates the group | -| `ui:group/ownership-changed` | `{ group }` | Updates the group | +| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | Updates the group | ### SDK Listeners (Automatic) diff --git a/ui-kit/react/components/message-header.mdx b/ui-kit/react/components/message-header.mdx index fd3ead0ba..ddf2698c0 100644 --- a/ui-kit/react/components/message-header.mdx +++ b/ui-kit/react/components/message-header.mdx @@ -117,7 +117,7 @@ description: "Toolbar displaying conversation details with avatar, name, presenc }, { "name": "ui:group/ownership-changed", - "payload": "{ group }", + "payload": "{ group: CometChat.Group, newOwner: CometChat.User, previousOwnerUid: string }", "description": "Updates group member count" }, { @@ -322,7 +322,7 @@ UI events this component subscribes to (published by other components): | `ui:group/member-banned` | `{ group, user, message }` | Updates group member count | | `ui:group/left` | `{ group }` | Updates group member count | | `ui:group/member-joined` | `{ joinedGroup }` | Updates group member count | -| `ui:group/ownership-changed` | `{ group }` | Updates group member count | +| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | Updates group member count | | `ui:group/member-scope-changed` | `{ group, user, newScope }` | Updates group member count | ### SDK Listeners (Automatic) diff --git a/ui-kit/react/components/message-list.mdx b/ui-kit/react/components/message-list.mdx index f782c443d..d2a9a6132 100644 --- a/ui-kit/react/components/message-list.mdx +++ b/ui-kit/react/components/message-list.mdx @@ -421,7 +421,7 @@ UI events this component subscribes to (published by other components): | `ui:group/member-unbanned` | `{ group, user, message }` | Appends group action message | | `ui:group/member-scope-changed` | `{ group, user, newScope }` | Appends group action message | | `ui:group/left` | `{ group }` | Appends group action message | -| `ui:group/ownership-changed` | `{ group }` | Appends group action message | +| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | Appends group action message | | `ui:call/outgoing` | `{ call }` | Appends call message | | `ui:call/accepted` | `{ call }` | Appends call message | | `ui:call/rejected` | `{ call }` | Appends call message | diff --git a/ui-kit/react/event-system.mdx b/ui-kit/react/event-system.mdx index 3e1d74699..d47424d8e 100644 --- a/ui-kit/react/event-system.mdx +++ b/ui-kit/react/event-system.mdx @@ -222,7 +222,7 @@ These events are published by UI Kit components for local cross-component commun | `ui:group/member-banned` | `{ message, user, group }` | GroupMembers | | `ui:group/member-unbanned` | `{ message?, user, group }` | GroupMembers | | `ui:group/member-scope-changed` | `{ message, user, group, newScope }` | GroupMembers | -| `ui:group/ownership-changed` | `{ group, newOwner }` | GroupMembers | +| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | GroupMembers | ### Thread From b2a68a95caac6a25a0d0fc3a4499b89a44116291 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Mon, 15 Jun 2026 12:29:28 +0530 Subject: [PATCH 03/27] remove CometChatFlagMessageDialog from components overview --- ui-kit/react/components-overview.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 40493781d..d834c8674 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -176,7 +176,6 @@ Base components are imported from `@cometchat/chat-uikit-react`. They don't have | `CometChatDownloadButton` | Download button for file and media attachments | | `CometChatEmojiKeyboard` | Emoji picker with category tabs and search | | `CometChatErrorBoundary` | Error isolation wrapper with fallback UI and retry | -| `CometChatFlagMessageDialog` | Modal dialog for reporting/flagging messages with reason selection | | `CometChatFormattingToolbar` | Rich text formatting toolbar (bold, italic, lists, links, code) | | `CometChatFullScreenViewer` | Full-screen image/media viewer with download | | `CometChatLinkDialog` | Dialog for inserting or editing hyperlinks | From f2b1e09fcedfd78a797a63a76983d7e25c04e2e1 Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Mon, 15 Jun 2026 12:42:37 +0530 Subject: [PATCH 04/27] docs(ui-kit/react): update internal v6 documentation links - Fix internal documentation links to include `/v6/` path segment across all v6 documentation files - Update cross-references in ai-assistant-chat, ai-features, and all integration guide files - Ensure links point to v6-specific documentation pages instead of root-level pages - Improve navigation consistency and prevent broken cross-references within v6 documentation --- ui-kit/react/v6/ai-assistant-chat.mdx | 4 +- ui-kit/react/v6/ai-features.mdx | 16 ++-- ui-kit/react/v6/astro-conversation.mdx | 12 +-- ui-kit/react/v6/astro-integration.mdx | 26 +++---- ui-kit/react/v6/astro-one-to-one-chat.mdx | 12 +-- ui-kit/react/v6/astro-tab-based-chat.mdx | 12 +-- ui-kit/react/v6/call-buttons.mdx | 2 +- ui-kit/react/v6/call-features.mdx | 20 ++--- ui-kit/react/v6/call-logs.mdx | 4 +- ui-kit/react/v6/calling-integration.mdx | 4 +- ui-kit/react/v6/campaigns.mdx | 6 +- ui-kit/react/v6/compact-message-composer.mdx | 22 +++--- ui-kit/react/v6/components-overview.mdx | 40 +++++----- ui-kit/react/v6/conversations.mdx | 8 +- ui-kit/react/v6/core-features.mdx | 74 +++++++++---------- .../react/v6/custom-text-formatter-guide.mdx | 10 +-- ui-kit/react/v6/extensions.mdx | 30 ++++---- ui-kit/react/v6/guide-block-unblock-user.mdx | 10 +-- ui-kit/react/v6/guide-call-log-details.mdx | 10 +-- ui-kit/react/v6/guide-group-chat.mdx | 10 +-- ui-kit/react/v6/guide-message-privately.mdx | 10 +-- ui-kit/react/v6/guide-new-chat.mdx | 10 +-- ui-kit/react/v6/guide-overview.mdx | 36 ++++----- ui-kit/react/v6/guide-search-messages.mdx | 10 +-- ui-kit/react/v6/guide-threaded-messages.mdx | 10 +-- ui-kit/react/v6/localize.mdx | 2 +- ui-kit/react/v6/mentions-formatter-guide.mdx | 12 +-- ui-kit/react/v6/message-composer.mdx | 2 +- ui-kit/react/v6/message-header.mdx | 2 +- ui-kit/react/v6/message-list.mdx | 6 +- .../react/v6/moved/builder-customisations.mdx | 10 +-- .../react/v6/moved/builder-dir-structure.mdx | 4 +- .../v6/moved/builder-integration-nextjs.mdx | 12 +-- .../builder-integration-react-router.mdx | 12 +-- ui-kit/react/v6/moved/builder-integration.mdx | 12 +-- ui-kit/react/v6/moved/builder-settings.mdx | 4 +- ui-kit/react/v6/next-conversation.mdx | 12 +-- ui-kit/react/v6/next-js-integration.mdx | 26 +++---- ui-kit/react/v6/next-one-to-one-chat.mdx | 12 +-- ui-kit/react/v6/next-tab-based-chat.mdx | 12 +-- ui-kit/react/v6/notification-feed.mdx | 6 +- ui-kit/react/v6/overview.mdx | 20 ++--- ui-kit/react/v6/react-conversation.mdx | 12 +-- ui-kit/react/v6/react-js-integration.mdx | 28 +++---- ui-kit/react/v6/react-one-to-one-chat.mdx | 12 +-- ui-kit/react/v6/react-router-conversation.mdx | 12 +-- ui-kit/react/v6/react-router-integration.mdx | 26 +++---- .../react/v6/react-router-one-to-one-chat.mdx | 12 +-- .../react/v6/react-router-tab-based-chat.mdx | 12 +-- ui-kit/react/v6/react-tab-based-chat.mdx | 12 +-- ui-kit/react/v6/search.mdx | 4 +- ui-kit/react/v6/shortcut-formatter-guide.mdx | 10 +-- ui-kit/react/v6/theme.mdx | 6 +- ui-kit/react/v6/thread-header.mdx | 2 +- ui-kit/react/v6/troubleshooting.mdx | 12 +-- ui-kit/react/v6/upgrading-from-v5.mdx | 18 ++--- ui-kit/react/v6/url-formatter-guide.mdx | 10 +-- 57 files changed, 381 insertions(+), 381 deletions(-) diff --git a/ui-kit/react/v6/ai-assistant-chat.mdx b/ui-kit/react/v6/ai-assistant-chat.mdx index 50b37fbea..0890b1e67 100644 --- a/ui-kit/react/v6/ai-assistant-chat.mdx +++ b/ui-kit/react/v6/ai-assistant-chat.mdx @@ -453,7 +453,7 @@ function AIAssistantWithTools() { ### templates -Custom message templates to control message bubble rendering. See [CometChatMessageTemplate](/ui-kit/react/message-template). +Custom message templates to control message bubble rendering. See [CometChatMessageTemplate](/ui-kit/react/v6/message-template). ```tsx lines import { useState, useEffect } from "react"; @@ -915,7 +915,7 @@ Quick prompt suggestions displayed in the empty state. | Type | `CometChatMessageTemplate[]` | | Default | `undefined` | -Custom message bubble templates. See [CometChatMessageTemplate](/ui-kit/react/message-template). +Custom message bubble templates. See [CometChatMessageTemplate](/ui-kit/react/v6/message-template). --- diff --git a/ui-kit/react/v6/ai-features.mdx b/ui-kit/react/v6/ai-features.mdx index e929a26f5..9caf27b4a 100644 --- a/ui-kit/react/v6/ai-features.mdx +++ b/ui-kit/react/v6/ai-features.mdx @@ -10,7 +10,7 @@ description: "AI-powered features in CometChat's React UI Kit: Conversation Star | Package | `@cometchat/chat-uikit-react` | | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) | | AI features | Conversation Starter, Smart Replies, Conversation Summary | -| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Smart Replies, Summary), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) | +| Key components | `CometChatMessageList` → [Message List](/ui-kit/react/v6/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/v6/message-composer) (Smart Replies, Summary), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/v6/ai-assistant-chat) | | Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required | @@ -25,7 +25,7 @@ CometChat AI features enhance user interaction by providing contextual suggestio Displays AI-generated opening lines when a user starts a new chat. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). -Auto-integrates into [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into [MessageList](/ui-kit/react/v6/message-list) when activated. @@ -35,7 +35,7 @@ Auto-integrates into [MessageList](/ui-kit/react/message-list) when activated. AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). -Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/v6/message-composer) when activated. @@ -45,7 +45,7 @@ Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/v6/message-composer) when activated. @@ -54,16 +54,16 @@ Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message ## Next Steps - + AI-powered assistant component - + Customize the message list where AI features appear - + Customize the composer with Smart Replies and Summary - + Core chat features like messaging and reactions diff --git a/ui-kit/react/v6/astro-conversation.mdx b/ui-kit/react/v6/astro-conversation.mdx index 975ac29b3..bc336e5a4 100644 --- a/ui-kit/react/v6/astro-conversation.mdx +++ b/ui-kit/react/v6/astro-conversation.mdx @@ -12,7 +12,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts | Framework | Astro (with `@astrojs/react` islands) | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/v6/astro-integration) Steps 1–5 first | | SSR | `client:only="react"` directive — CometChat requires browser APIs | | Pattern | WhatsApp Web, Slack, Microsoft Teams | @@ -20,7 +20,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/v6/astro-integration) (project created, React added, UI Kit installed). @@ -255,16 +255,16 @@ You should see the conversation list on the left. Tap any conversation to load m ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> + } href="/ui-kit/react/v6/astro-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/astro-integration.mdx b/ui-kit/react/v6/astro-integration.mdx index df460f8f8..2639b4da0 100644 --- a/ui-kit/react/v6/astro-integration.mdx +++ b/ui-kit/react/v6/astro-integration.mdx @@ -17,7 +17,7 @@ description: "Integrate CometChat React UI Kit with Astro using client-only rend | SSR | CometChat requires browser APIs — use `client:only="react"` directive on Astro islands | | CSS | `import "@cometchat/chat-uikit-react/css-variables.css"` in your React island | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) | +| Other frameworks | [React.js](/ui-kit/react/v6/react-js-integration) · [Next.js](/ui-kit/react/v6/next-js-integration) · [React Router](/ui-kit/react/v6/react-router-integration) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -67,7 +67,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) You also need Node.js (v16+) and npm/yarn installed. -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. +Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token). Never ship Auth Keys in client code. --- @@ -210,7 +210,7 @@ Key points: - Components must not render until login resolves — use a state flag to gate rendering. -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. +For production, use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. --- @@ -255,7 +255,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think - + Step-by-step guide to build this layout @@ -274,7 +274,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f - + Step-by-step guide to build this layout @@ -293,7 +293,7 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo - + Step-by-step guide to build this layout @@ -304,9 +304,9 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling +- [Components](/ui-kit/react/v6/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/v6/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/v6/theme) — Colors, fonts, dark mode, and custom styling - [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK --- @@ -314,16 +314,16 @@ Need full control over the UI? Use individual components, customize themes, and ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Chat features included out of the box - + Common issues and fixes diff --git a/ui-kit/react/v6/astro-one-to-one-chat.mdx b/ui-kit/react/v6/astro-one-to-one-chat.mdx index 99d45e160..488b2076e 100644 --- a/ui-kit/react/v6/astro-one-to-one-chat.mdx +++ b/ui-kit/react/v6/astro-one-to-one-chat.mdx @@ -12,7 +12,7 @@ description: "Build focused CometChat UI Kit chat screens in Astro with headers, | Framework | Astro (with `@astrojs/react` islands) | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/v6/astro-integration) Steps 1–5 first | | SSR | `client:only="react"` directive — CometChat requires browser APIs | | Pattern | Support chat, embedded widgets, focused messaging | @@ -20,7 +20,7 @@ description: "Build focused CometChat UI Kit chat screens in Astro with headers, This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/v6/astro-integration) (project created, React added, UI Kit installed). @@ -247,16 +247,16 @@ You should see the chat window load with the conversation for the UID you set. ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> + } href="/ui-kit/react/v6/astro-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/astro-tab-based-chat.mdx b/ui-kit/react/v6/astro-tab-based-chat.mdx index d8912dd91..23536eb42 100644 --- a/ui-kit/react/v6/astro-tab-based-chat.mdx +++ b/ui-kit/react/v6/astro-tab-based-chat.mdx @@ -12,7 +12,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Framework | Astro (with `@astrojs/react` islands) | | Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [Astro Integration](/ui-kit/react/astro-integration) Steps 1–5 first | +| Prerequisite | Complete [Astro Integration](/ui-kit/react/v6/astro-integration) Steps 1–5 first | | SSR | `client:only="react"` directive — CometChat requires browser APIs | | Pattern | Full-featured messaging app with multiple sections | @@ -20,7 +20,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [Astro Integration](/ui-kit/react/astro-integration) (project created, React added, UI Kit installed). +This assumes you've already completed [Astro Integration](/ui-kit/react/v6/astro-integration) (project created, React added, UI Kit installed). @@ -521,16 +521,16 @@ You should see the tab bar at the bottom of the sidebar. Switch between Chats, C ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/astro-integration"> + } href="/ui-kit/react/v6/astro-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/call-buttons.mdx b/ui-kit/react/v6/call-buttons.mdx index 361a67a37..d7ad7aee8 100644 --- a/ui-kit/react/v6/call-buttons.mdx +++ b/ui-kit/react/v6/call-buttons.mdx @@ -303,7 +303,7 @@ function CallButtonsCustomOutgoing() { | `avatarView` | `(call: CometChat.Call) => JSX.Element` | Custom avatar | | `cancelButtonView` | `(call: CometChat.Call) => JSX.Element` | Custom cancel button | -Refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) for details on each view slot. +Refer to [CometChatOutgoingCall](/ui-kit/react/v6/outgoing-call) for details on each view slot. --- diff --git a/ui-kit/react/v6/call-features.mdx b/ui-kit/react/v6/call-features.mdx index 885bd6fa5..cba3ac061 100644 --- a/ui-kit/react/v6/call-features.mdx +++ b/ui-kit/react/v6/call-features.mdx @@ -10,7 +10,7 @@ description: "Overview of CometChat React UI Kit calling features, including inc | Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`) | | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — Calls SDK must also be installed | | Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons | -| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/react/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/call-logs) | +| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/react/v6/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/v6/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/v6/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/v6/call-logs) | | Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components | | CSS class prefix | `.cometchat-` | @@ -21,7 +21,7 @@ description: "Overview of CometChat React UI Kit calling features, including inc CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and the UI Kit auto-detects it, enabling call components. -Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). +Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/v6/react-js-integration). ## Integration @@ -32,7 +32,7 @@ Install the Calls SDK: npm install @cometchat/calls-sdk-javascript ``` -The React UI Kit auto-detects the SDK and activates calling features. [CallButtons](/ui-kit/react/call-buttons) renders in [MessageHeader](/ui-kit/react/message-header). +The React UI Kit auto-detects the SDK and activates calling features. [CallButtons](/ui-kit/react/v6/call-buttons) renders in [MessageHeader](/ui-kit/react/v6/message-header). @@ -42,7 +42,7 @@ The React UI Kit auto-detects the SDK and activates calling features. [CallButto ### Incoming Call -The [Incoming Call](/ui-kit/react/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options. +The [Incoming Call](/ui-kit/react/v6/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options. @@ -50,7 +50,7 @@ The [Incoming Call](/ui-kit/react/incoming-call) component displays a call scree ### Outgoing Call -The [Outgoing Call](/ui-kit/react/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts. +The [Outgoing Call](/ui-kit/react/v6/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts. @@ -58,7 +58,7 @@ The [Outgoing Call](/ui-kit/react/outgoing-call) component displays an outgoing ### Call Logs -The [Call Logs](/ui-kit/react/call-logs) component displays call history — caller, time, and duration. +The [Call Logs](/ui-kit/react/v6/call-logs) component displays call history — caller, time, and duration. @@ -67,16 +67,16 @@ The [Call Logs](/ui-kit/react/call-logs) component displays call history — cal ## Next Steps - + Audio and video call buttons - + Incoming call notifications and UI - + Call history and details - + Core chat features diff --git a/ui-kit/react/v6/call-logs.mdx b/ui-kit/react/v6/call-logs.mdx index 9218d65b2..3faed4196 100644 --- a/ui-kit/react/v6/call-logs.mdx +++ b/ui-kit/react/v6/call-logs.mdx @@ -386,7 +386,7 @@ function CustomDateCallLogs() { ``` -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. +If no property is passed in the [CalendarObject](/ui-kit/react/v6/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/v6/localize#customisation) first. If also missing there, the component's default formatting applies. --- @@ -496,7 +496,7 @@ Format for displaying the call initiated timestamp. | Type | `CalendarObject` | | Default | Component default (`DD MMM, hh:mm A`) | -Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set. +Falls back to [global calendar configuration](/ui-kit/react/v6/localize#customisation) if not set. --- diff --git a/ui-kit/react/v6/calling-integration.mdx b/ui-kit/react/v6/calling-integration.mdx index 4760a85b9..3eca4ae58 100644 --- a/ui-kit/react/v6/calling-integration.mdx +++ b/ui-kit/react/v6/calling-integration.mdx @@ -8,7 +8,7 @@ description: "Add voice and video calling to CometChat React UI Kit with Calls S This guide walks you through adding voice and video calling capabilities to your React application using the CometChat UI Kit. -Make sure you've completed the [Getting Started](/ui-kit/react/react-js-integration) guide before proceeding. +Make sure you've completed the [Getting Started](/ui-kit/react/v6/react-js-integration) guide before proceeding. ## Add the Calls SDK @@ -21,7 +21,7 @@ npm install @cometchat/calls-sdk-javascript ## Verify Integration -After adding the dependency, the React UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/react/call-buttons) rendered in the [MessageHeader](/ui-kit/react/message-header) component. +After adding the dependency, the React UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/react/v6/call-buttons) rendered in the [MessageHeader](/ui-kit/react/v6/message-header) component. diff --git a/ui-kit/react/v6/campaigns.mdx b/ui-kit/react/v6/campaigns.mdx index 989cdb05e..5fbecdcda 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/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. @@ -199,7 +199,7 @@ function NotificationsScreen() { } ``` -See the full [CometChatNotificationFeed component documentation](/ui-kit/react/notification-feed) for all configuration options, styling, and customization. +See the full [CometChatNotificationFeed component documentation](/ui-kit/react/v6/notification-feed) for all configuration options, styling, and customization. --- @@ -209,7 +209,7 @@ See the full [CometChatNotificationFeed component documentation](/ui-kit/react/n Full API reference for feed items, categories, engagement, and push tracking - + Ready-to-use component with filtering, real-time updates, and styling diff --git a/ui-kit/react/v6/compact-message-composer.mdx b/ui-kit/react/v6/compact-message-composer.mdx index 6f8ee5365..b959423cb 100644 --- a/ui-kit/react/v6/compact-message-composer.mdx +++ b/ui-kit/react/v6/compact-message-composer.mdx @@ -104,9 +104,9 @@ description: "A compact, single-line message input component with rich text form ## Overview -`CometChatCompactMessageComposer` is a [Component](/ui-kit/react/components-overview#components) that provides a compact, single-line message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, code, links, lists, and blockquotes. +`CometChatCompactMessageComposer` is a [Component](/ui-kit/react/v6/components-overview#components) that provides a compact, single-line message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, code, links, lists, and blockquotes. -This is a compact variant of [CometChatMessageComposer](/ui-kit/react/message-composer). It shares a similar props API but provides a streamlined, single-line interface with rich text formatting controls. +This is a compact variant of [CometChatMessageComposer](/ui-kit/react/v6/message-composer). It shares a similar props API but provides a streamlined, single-line interface with rich text formatting controls. Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view. @@ -117,11 +117,11 @@ Features such as **Rich Text Formatting**, **Attachments**, **Message Editing**, -**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/v6/react-js-integration). -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) +**Available via:** [UI Kits](/ui-kit/react/v6/overview) | [SDK](/sdk/javascript/overview) --- @@ -208,7 +208,7 @@ export function CompactComposerDemo() { ### Callback Props -[Actions](/ui-kit/react/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/react/v6/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. #### onSendButtonClick @@ -552,7 +552,7 @@ CompactMessageComposer component does not have any available filters. ### Global UI Events -[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using events 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/react/v6/components-overview#events) are emitted by a `Component`. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. `CometChatMessageEvents` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup. @@ -1095,7 +1095,7 @@ const getHeaderView = () => { #### 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/react/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/react/v6/mentions-formatter-guide) @@ -1249,16 +1249,16 @@ export function CompactComposerDemo() { ## Next Steps - + Full-featured multi-line message composer component. - + Display messages with real-time updates. - + Implement @mentions in your chat application. - + Customize colors, fonts, and styling. diff --git a/ui-kit/react/v6/components-overview.mdx b/ui-kit/react/v6/components-overview.mdx index 4418f1c8d..ff942a383 100644 --- a/ui-kit/react/v6/components-overview.mdx +++ b/ui-kit/react/v6/components-overview.mdx @@ -29,7 +29,7 @@ The UI Kit is a set of independent components that compose into chat layouts. A Data flow: selecting a conversation in CometChatConversations yields a `CometChat.User` or `CometChat.Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners. -Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/react/events) for the full list. +Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/react/v6/events) for the full list. Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and CSS variable overrides on `.cometchat-` classes. @@ -43,36 +43,36 @@ All components are imported from `@cometchat/chat-uikit-react`. | Component | Purpose | Key Props | Page | | --- | --- | --- | --- | -| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/conversations) | -| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemClick`, `onError` | [Users](/ui-kit/react/users) | -| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemClick`, `onError` | [Groups](/ui-kit/react/groups) | -| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemClick` | [Group Members](/ui-kit/react/group-members) | +| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/v6/conversations) | +| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemClick`, `onError` | [Users](/ui-kit/react/v6/users) | +| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemClick`, `onError` | [Groups](/ui-kit/react/v6/groups) | +| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemClick` | [Group Members](/ui-kit/react/v6/group-members) | ### Messages | Component | Purpose | Key Props | Page | | --- | --- | --- | --- | -| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `enableAutoSummaryGeneration` | [Message Header](/ui-kit/react/message-header) | -| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/message-list) | -| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonClick`, `placeholderText` | [Message Composer](/ui-kit/react/message-composer) | -| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/react/message-template) | -| CometChatThreadHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters` | [Thread Header](/ui-kit/react/thread-header) | +| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `enableAutoSummaryGeneration` | [Message Header](/ui-kit/react/v6/message-header) | +| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/v6/message-list) | +| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonClick`, `placeholderText` | [Message Composer](/ui-kit/react/v6/message-composer) | +| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/react/v6/message-template) | +| CometChatThreadHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters` | [Thread Header](/ui-kit/react/v6/thread-header) | ### Calling | Component | Purpose | Key Props | Page | | --- | --- | --- | --- | -| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/call-buttons) | -| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)` | [Incoming Call](/ui-kit/react/incoming-call) | -| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `onCloseClicked` | [Outgoing Call](/ui-kit/react/outgoing-call) | -| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/react/call-logs) | +| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/v6/call-buttons) | +| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)` | [Incoming Call](/ui-kit/react/v6/incoming-call) | +| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `onCloseClicked` | [Outgoing Call](/ui-kit/react/v6/outgoing-call) | +| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/react/v6/call-logs) | ### Search and AI | Component | Purpose | Key Props | Page | | --- | --- | --- | --- | -| CometChatSearch | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/search) | -| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools` | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) | +| CometChatSearch | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/v6/search) | +| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools` | [AI Assistant Chat](/ui-kit/react/v6/ai-assistant-chat) | ## Component API Pattern @@ -152,16 +152,16 @@ Every component has a root CSS class (`.cometchat-`) for style custom ## Next Steps - + Chat features included out of the box - + Customize colors, fonts, and styles - + Add-on features like polls, stickers, and translation - + Task-oriented tutorials for common patterns diff --git a/ui-kit/react/v6/conversations.mdx b/ui-kit/react/v6/conversations.mdx index b664728b4..d4b859729 100644 --- a/ui-kit/react/v6/conversations.mdx +++ b/ui-kit/react/v6/conversations.mdx @@ -964,7 +964,7 @@ function FormattedConversations() { } ``` -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) for mention formatting. +See [CometChatMentionsFormatter](/ui-kit/react/v6/mentions-formatter-guide) for mention formatting. ### lastMessageDateTimeFormat @@ -1004,7 +1004,7 @@ function CustomDateConversations() { ``` -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. +If no property is passed in the [CalendarObject](/ui-kit/react/v6/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/v6/localize#customisation) first. If also missing there, the component's default formatting applies. --- @@ -1333,7 +1333,7 @@ class CalendarObject { } ``` -Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set. +Falls back to [global calendar configuration](/ui-kit/react/v6/localize#customisation) if not set. --- @@ -1497,7 +1497,7 @@ Custom text formatters for the conversation subtitle. | Type | `CometChatTextFormatter[]` | | Default | Default formatters from data source | -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) for mention formatting. +See [CometChatMentionsFormatter](/ui-kit/react/v6/mentions-formatter-guide) for mention formatting. --- diff --git a/ui-kit/react/v6/core-features.mdx b/ui-kit/react/v6/core-features.mdx index d6f66ecba..d39d64667 100644 --- a/ui-kit/react/v6/core-features.mdx +++ b/ui-kit/react/v6/core-features.mdx @@ -10,9 +10,9 @@ description: "Overview of CometChat React UI Kit core features, including messag | Package | `@cometchat/chat-uikit-react` | | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component | | Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat | -| Key components | `CometChatConversations` → [Conversations](/ui-kit/react/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/message-header), `CometChatUsers` → [Users](/ui-kit/react/users), `CometChatGroups` → [Groups](/ui-kit/react/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/group-members) | +| Key components | `CometChatConversations` → [Conversations](/ui-kit/react/v6/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/v6/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/v6/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/v6/message-header), `CometChatUsers` → [Users](/ui-kit/react/v6/users), `CometChatGroups` → [Groups](/ui-kit/react/v6/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/v6/group-members) | | CSS class prefix | `.cometchat-` | -| Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) | +| Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/v6/theme) | @@ -28,8 +28,8 @@ At the heart of CometChat's functionality is the ability to support real-time te | Components | Functionality | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) is a Component that enables users to write and send a variety of messages. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | +| [Message Composer](/ui-kit/react/v6/message-composer) | The [Message Composer](/ui-kit/react/v6/message-composer) is a Component that enables users to write and send a variety of messages. | +| [Message List](/ui-kit/react/v6/message-list) | The [Message List](/ui-kit/react/v6/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | ## Media Sharing @@ -41,8 +41,8 @@ CometChat supports sharing images, videos, audio files, and documents within con | Components | Functionality | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/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. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | +| [Message Composer](/ui-kit/react/v6/message-composer) | The [Message Composer](/ui-kit/react/v6/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. | +| [Message List](/ui-kit/react/v6/message-list) | The [Message List](/ui-kit/react/v6/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | ## Read Receipts @@ -54,8 +54,8 @@ CometChat's Read Receipts feature provides visibility into the message status, l | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | | Message Information | 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. | ## Mark as Unread @@ -68,8 +68,8 @@ CometChat's Read Receipts feature provides visibility into the message status, l | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | ## Typing Indicator @@ -81,8 +81,8 @@ The Typing Indicator feature in CometChat shows when a user is typing a response | Components | Functionality | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. 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/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/conversations) is a component that renders conversation list item. 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/react/v6/message-header) | [Message Header](/ui-kit/react/v6/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | ## User Presence @@ -94,10 +94,10 @@ CometChat's User Presence feature allows users to see whether their contacts are | Components | Functionality | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. | -| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders the list of available users with presence information. | -| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | +| [Message Header](/ui-kit/react/v6/message-header) | [Message Header](/ui-kit/react/v6/message-header) that renders details of user/group. The Message Header also handles user presence information. | +| [Users](/ui-kit/react/v6/users) | [Users](/ui-kit/react/v6/users) renders the list of available users with presence information. | +| [Group Members](/ui-kit/react/v6/group-members) | [Group Members](/ui-kit/react/v6/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | ## Reactions @@ -109,7 +109,7 @@ CometChat's Reactions feature adds a layer of expressiveness to your chat applic | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | ## Mentions @@ -121,9 +121,9 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | Components | Functionality | | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/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. | -| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/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. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/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. | +| [Message Composer](/ui-kit/react/v6/message-composer) | [Message Composer](/ui-kit/react/v6/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. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/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. | ## Rich Text Formatting @@ -135,8 +135,8 @@ Rich Text Formatting allows users to style their messages with bold, italic, und | Components | Functionality | | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [CompactMessageComposer](/ui-kit/react/compact-message-composer) | [CompactMessageComposer](/ui-kit/react/compact-message-composer) provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. | -| [MessageList](/ui-kit/react/message-list) | [MessageList](/ui-kit/react/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. | +| [CompactMessageComposer](/ui-kit/react/v6/compact-message-composer) | [CompactMessageComposer](/ui-kit/react/v6/compact-message-composer) provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. | +| [MessageList](/ui-kit/react/v6/message-list) | [MessageList](/ui-kit/react/v6/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. | ## Threaded Conversations @@ -148,7 +148,7 @@ The Threaded Conversations feature enables users to respond directly to a specif | Components | Functionality | | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -| [Threaded Message Preview](/ui-kit/react/guide-threaded-messages) | [Threaded Message Preview](/ui-kit/react/guide-threaded-messages) component displays the parent message along with the number of replies. | +| [Threaded Message Preview](/ui-kit/react/v6/guide-threaded-messages) | [Threaded Message Preview](/ui-kit/react/v6/guide-threaded-messages) component displays the parent message along with the number of replies. | ## Quoted Replies @@ -160,8 +160,8 @@ Quoted Replies is a robust feature provided by CometChat that enables users to q | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | -| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) shows the quoted reply above the input field, providing context for the response. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | +| [Message Composer](/ui-kit/react/v6/message-composer) | [Message Composer](/ui-kit/react/v6/message-composer) shows the quoted reply above the input field, providing context for the response. | ## Group Chat @@ -171,7 +171,7 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul -See the [Groups](/ui-kit/react/groups) component page for details. +See the [Groups](/ui-kit/react/v6/groups) component page for details. ## Moderation @@ -187,7 +187,7 @@ Learn more about setting up moderation rules and managing content in the [Modera | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. | The **[Report Message](#report-message)** feature enables users to flag messages for review by moderators. @@ -205,7 +205,7 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th | Components | Functionality | | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | ## Conversation and Advanced Search @@ -217,28 +217,28 @@ Conversation and Advanced Search is a powerful feature provided by CometChat tha | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. | +| [Search](/ui-kit/react/v6/search) | [Search](/ui-kit/react/v6/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [Message Header](/ui-kit/react/v6/message-header) | [Message Header](/ui-kit/react/v6/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [Message List](/ui-kit/react/v6/message-list) | [Message List](/ui-kit/react/v6/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [Conversations](/ui-kit/react/v6/conversations) | [Conversations](/ui-kit/react/v6/conversations) displays the search input. | -See the [Groups](/ui-kit/react/groups) component page for details. +See the [Groups](/ui-kit/react/v6/groups) component page for details. --- ## Next Steps - + Browse all available UI Kit components - + Customize the look and feel of your chat UI - + Add audio and video calling - + Explore AI-powered chat capabilities diff --git a/ui-kit/react/v6/custom-text-formatter-guide.mdx b/ui-kit/react/v6/custom-text-formatter-guide.mdx index 5411a5ec3..db9dde36c 100644 --- a/ui-kit/react/v6/custom-text-formatter-guide.mdx +++ b/ui-kit/react/v6/custom-text-formatter-guide.mdx @@ -13,7 +13,7 @@ description: "Extend the CometChatTextFormatter base class to implement custom i | Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks | | Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [ShortCut Formatter](/ui-kit/react/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | +| Related | [ShortCut Formatter](/ui-kit/react/v6/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/react/v6/mentions-formatter-guide) \| [All Guides](/ui-kit/react/v6/guide-overview) | @@ -80,7 +80,7 @@ customLogicToFormatText(inputText: string) { ... } ## Example -A hashtag formatter used with [CometChatMessageList](/ui-kit/react/message-list) and [CometChatMessageComposer](/ui-kit/react/message-composer). +A hashtag formatter used with [CometChatMessageList](/ui-kit/react/v6/message-list) and [CometChatMessageComposer](/ui-kit/react/v6/message-composer). @@ -382,13 +382,13 @@ getOriginalText(inputText: string | null | undefined): string { ## Next Steps - + Add @mentions with styled tokens. - + Customize the message input component. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/extensions.mdx b/ui-kit/react/v6/extensions.mdx index ebdf35e8e..c70af4dc3 100644 --- a/ui-kit/react/v6/extensions.mdx +++ b/ui-kit/react/v6/extensions.mdx @@ -10,7 +10,7 @@ description: "Overview of CometChat extensions for React UI Kit, including engag | Package | `@cometchat/chat-uikit-react` | | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) | | Extension categories | User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features | -| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails) | +| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/v6/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/v6/message-list) (Translation, Link Preview, Thumbnails) | | Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required | @@ -37,7 +37,7 @@ Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamen Displays a summary (title, description, thumbnail) for URLs shared in chat. See [Link Preview Extension](/fundamentals/link-preview). -Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/v6/message-list) when activated. @@ -63,7 +63,7 @@ Bookmarks messages for later reference. Saved messages are private to the user. Creates smaller preview images for shared images, reducing bandwidth. See [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). -Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/v6/message-list) when activated. @@ -87,7 +87,7 @@ Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy). Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation). -Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-list) when activated. +Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/v6/message-list) when activated. @@ -97,7 +97,7 @@ Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-lis Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/v6/message-composer) when activated. @@ -111,7 +111,7 @@ Sets reminders for messages or creates personal reminders. A bot sends a notific Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers). -Auto-integrates into [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into [Message Composer](/ui-kit/react/v6/message-composer) when activated. @@ -131,7 +131,7 @@ Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor). Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/v6/message-composer) when activated. @@ -141,7 +141,7 @@ Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/messag Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). -Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated. +Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/v6/message-composer) when activated. @@ -167,31 +167,31 @@ Integrates Intercom for in-app customer support. See [Intercom Extension](/funda #### Conversation Starter -AI-generated opening messages for new chats. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features). +AI-generated opening messages for new chats. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/v6/ai-features). #### Smart Replies -AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features). +AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/v6/ai-features). #### Conversation Summary -AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features). +AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/v6/ai-features). --- ## Next Steps - + Customize the composer where most extensions appear - + Customize the message list for extension-rendered content - + Core chat features like messaging and reactions - + AI-powered chat capabilities diff --git a/ui-kit/react/v6/guide-block-unblock-user.mdx b/ui-kit/react/v6/guide-block-unblock-user.mdx index 163d7b9c1..c560b459a 100644 --- a/ui-kit/react/v6/guide-block-unblock-user.mdx +++ b/ui-kit/react/v6/guide-block-unblock-user.mdx @@ -14,13 +14,13 @@ description: "Implement block and unblock user functionality in CometChat React | Events | `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked` | | UI helpers | `CometChatConfirmDialog`, `CometChatToast` | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -197,13 +197,13 @@ const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => { ## Next Steps - + Display and manage user lists. - + Customize the message input component. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-call-log-details.mdx b/ui-kit/react/v6/guide-call-log-details.mdx index 136921cac..c7e11e942 100644 --- a/ui-kit/react/v6/guide-call-log-details.mdx +++ b/ui-kit/react/v6/guide-call-log-details.mdx @@ -13,13 +13,13 @@ description: "Build a detailed call insights screen with metadata, participants, | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed | | Purpose | Detailed call insights screen with metadata, participants, and recordings | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework and install `@cometchat/calls-sdk-javascript`. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework and install `@cometchat/calls-sdk-javascript`. --- @@ -199,13 +199,13 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => { ## Next Steps - + The call logs component reference. - + Overview of calling capabilities. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-group-chat.mdx b/ui-kit/react/v6/guide-group-chat.mdx index aa08c0532..ec9151b73 100644 --- a/ui-kit/react/v6/guide-group-chat.mdx +++ b/ui-kit/react/v6/guide-group-chat.mdx @@ -13,13 +13,13 @@ description: "Implement group management including create, join, members, roles, | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Features | Create public/private/password-protected groups, manage members, roles, ownership transfer | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -277,13 +277,13 @@ export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershi ## Next Steps - + Display and manage group lists. - + Display and manage group member lists. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-message-privately.mdx b/ui-kit/react/v6/guide-message-privately.mdx index 8095db11e..03f69cefd 100644 --- a/ui-kit/react/v6/guide-message-privately.mdx +++ b/ui-kit/react/v6/guide-message-privately.mdx @@ -13,13 +13,13 @@ description: "Start private one-to-one chats from CometChat React UI Kit group c | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Purpose | Launch a direct 1:1 chat from a group member profile | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -174,13 +174,13 @@ case "updatePrivateChatUser": { ## Next Steps - + Display and manage group member lists. - + Render real-time message threads. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-new-chat.mdx b/ui-kit/react/v6/guide-new-chat.mdx index 40beee2ac..54e085a1a 100644 --- a/ui-kit/react/v6/guide-new-chat.mdx +++ b/ui-kit/react/v6/guide-new-chat.mdx @@ -13,13 +13,13 @@ description: "Build a unified new chat entry point for starting 1:1 or group con | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Purpose | Unified new chat entry point for starting 1:1 or group conversations | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | The New Chat feature lets users start conversations with other users or join group conversations from a single interface. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -191,13 +191,13 @@ const joinGroup = (e) => { ## Next Steps - + Display and manage conversation lists. - + Display and manage group lists. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-overview.mdx b/ui-kit/react/v6/guide-overview.mdx index 765f2e2f0..24f90d951 100644 --- a/ui-kit/react/v6/guide-overview.mdx +++ b/ui-kit/react/v6/guide-overview.mdx @@ -11,8 +11,8 @@ description: "Browse React UI Kit feature guides for blocking users, call detail | Package | `@cometchat/chat-uikit-react` | | Purpose | Index of task-oriented feature guides for the React UI Kit | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Components | [Components Overview](/ui-kit/react/components-overview) | -| Guides | [Block/Unblock](/ui-kit/react/guide-block-unblock-user) · [Call Log Details](/ui-kit/react/guide-call-log-details) · [Group Chat](/ui-kit/react/guide-group-chat) · [Message Privately](/ui-kit/react/guide-message-privately) · [New Chat](/ui-kit/react/guide-new-chat) · [Search Messages](/ui-kit/react/guide-search-messages) · [Threaded Messages](/ui-kit/react/guide-threaded-messages) | +| Components | [Components Overview](/ui-kit/react/v6/components-overview) | +| Guides | [Block/Unblock](/ui-kit/react/v6/guide-block-unblock-user) · [Call Log Details](/ui-kit/react/v6/guide-call-log-details) · [Group Chat](/ui-kit/react/v6/guide-group-chat) · [Message Privately](/ui-kit/react/v6/guide-message-privately) · [New Chat](/ui-kit/react/v6/guide-new-chat) · [Search Messages](/ui-kit/react/v6/guide-search-messages) · [Threaded Messages](/ui-kit/react/v6/guide-threaded-messages) | @@ -20,23 +20,23 @@ description: "Browse React UI Kit feature guides for blocking users, call detail ## When to Use These Guides -Use these guides after completing the base [Getting Started](/ui-kit/react/react-js-integration) (or framework variant: [Next.js](/ui-kit/react/next-js-integration), [React Router](/ui-kit/react/react-router-integration)). They help you layer additional UX without rewriting core chat flows. +Use these guides after completing the base [Getting Started](/ui-kit/react/v6/react-js-integration) (or framework variant: [Next.js](/ui-kit/react/v6/next-js-integration), [React Router](/ui-kit/react/v6/react-router-integration)). They help you layer additional UX without rewriting core chat flows. ## Guide Directory | Guide | Description | |:------|:------------| -| [Block / Unblock User](/ui-kit/react/guide-block-unblock-user) | Let users block or unblock others in 1:1 chats; hides composer and shows an unblock prompt while preventing message exchange. | -| [Call Log Details](/ui-kit/react/guide-call-log-details) | Detailed call insights screen: metadata, participants, join/leave history, and recordings. | -| [Group Management](/ui-kit/react/guide-group-chat) | Create/join groups, view members, add / ban users, change roles/scopes, transfer ownership. | -| [Message Privately](/ui-kit/react/guide-message-privately) | Launch a direct 1:1 chat from a user profile or list; optionally send a first message to surface conversation. | -| [New Chat](/ui-kit/react/guide-new-chat) | Unified entry for starting new 1:1 or group chats with user & group discovery. | -| [Threaded Messages](/ui-kit/react/guide-threaded-messages) | Threaded replies: open parent context, list replies, compose within focused thread. | -| [Search Messages](/ui-kit/react/guide-search-messages) | Add full‑text message search across conversations with result routing into context. | -| [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | Extend the base formatter to implement custom inline patterns (hashtags, keywords) with regex + callbacks. | -| [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) | Add @mentions with styled tokens, suggestion list, and click handling for users & members. | -| [URL Formatter](/ui-kit/react/url-formatter-guide) | Detect and style plain URLs; render them as clickable links with optional tracking logic. | -| [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide) | Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content. | +| [Block / Unblock User](/ui-kit/react/v6/guide-block-unblock-user) | Let users block or unblock others in 1:1 chats; hides composer and shows an unblock prompt while preventing message exchange. | +| [Call Log Details](/ui-kit/react/v6/guide-call-log-details) | Detailed call insights screen: metadata, participants, join/leave history, and recordings. | +| [Group Management](/ui-kit/react/v6/guide-group-chat) | Create/join groups, view members, add / ban users, change roles/scopes, transfer ownership. | +| [Message Privately](/ui-kit/react/v6/guide-message-privately) | Launch a direct 1:1 chat from a user profile or list; optionally send a first message to surface conversation. | +| [New Chat](/ui-kit/react/v6/guide-new-chat) | Unified entry for starting new 1:1 or group chats with user & group discovery. | +| [Threaded Messages](/ui-kit/react/v6/guide-threaded-messages) | Threaded replies: open parent context, list replies, compose within focused thread. | +| [Search Messages](/ui-kit/react/v6/guide-search-messages) | Add full‑text message search across conversations with result routing into context. | +| [Custom Text Formatter](/ui-kit/react/v6/custom-text-formatter-guide) | Extend the base formatter to implement custom inline patterns (hashtags, keywords) with regex + callbacks. | +| [Mentions Formatter](/ui-kit/react/v6/mentions-formatter-guide) | Add @mentions with styled tokens, suggestion list, and click handling for users & members. | +| [URL Formatter](/ui-kit/react/v6/url-formatter-guide) | Detect and style plain URLs; render them as clickable links with optional tracking logic. | +| [Shortcut Formatter](/ui-kit/react/v6/shortcut-formatter-guide) | Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content. | Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new). @@ -45,16 +45,16 @@ Need another guide? Open a request via our [Support Portal](https://help.cometch ## Next Steps - + Set up the React UI Kit - + Explore all UI components - + Customize themes and styling - + Handle UI Kit events diff --git a/ui-kit/react/v6/guide-search-messages.mdx b/ui-kit/react/v6/guide-search-messages.mdx index e510ead5c..bdbb525f6 100644 --- a/ui-kit/react/v6/guide-search-messages.mdx +++ b/ui-kit/react/v6/guide-search-messages.mdx @@ -13,13 +13,13 @@ description: "Add CometChat React UI Kit message search with query input, scoped | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Purpose | Full-text message search across conversations with result routing and navigation | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -117,13 +117,13 @@ Attach `handleResultClick` to your message search result selection logic. ## Next Steps - + The search component reference. - + Render real-time message threads. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/guide-threaded-messages.mdx b/ui-kit/react/v6/guide-threaded-messages.mdx index da08eeb2e..b79712a7e 100644 --- a/ui-kit/react/v6/guide-threaded-messages.mdx +++ b/ui-kit/react/v6/guide-threaded-messages.mdx @@ -13,13 +13,13 @@ description: "Implement threaded message replies with parent context, reply list | Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Entry point | `CometChatMessages.onThreadRepliesClick` opens thread view from group messages | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [All Guides](/ui-kit/react/guide-overview) | +| Related | [All Guides](/ui-kit/react/v6/guide-overview) | Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused. -Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework. +Before starting, complete the [Getting Started](/ui-kit/react/v6/react-js-integration) guide for your framework. --- @@ -174,13 +174,13 @@ When the composer is blocked (e.g. permissions), show a fallback: ## Next Steps - + Render real-time message threads. - + Customize the thread header component. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/localize.mdx b/ui-kit/react/v6/localize.mdx index 42f099c0c..dabf97a0d 100644 --- a/ui-kit/react/v6/localize.mdx +++ b/ui-kit/react/v6/localize.mdx @@ -145,7 +145,7 @@ new CalendarObject({ ## Component Guide -The translation configurations in this section are to be defined inside the [CometChat's init() method callback](/ui-kit/react/react-js-integration#step-3:-initialize-cometchat-ui-kit). +The translation configurations in this section are to be defined inside the [CometChat's init() method callback](/ui-kit/react/v6/react-js-integration#step-3:-initialize-cometchat-ui-kit). ### Report Message diff --git a/ui-kit/react/v6/mentions-formatter-guide.mdx b/ui-kit/react/v6/mentions-formatter-guide.mdx index d40b2e715..6f996ef66 100644 --- a/ui-kit/react/v6/mentions-formatter-guide.mdx +++ b/ui-kit/react/v6/mentions-formatter-guide.mdx @@ -12,11 +12,11 @@ description: "Format @mentions in CometChat React UI Kit messages with custom st | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | +| Related | [Custom Text Formatter](/ui-kit/react/v6/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/v6/guide-overview) | -`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions. +`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/v6/custom-text-formatter-guide) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions. | Capability | Description | | --- | --- | @@ -53,20 +53,20 @@ The output contains HTML with styled mentions ready for rendering. ### 3. Pass to components -Use the `textFormatters` prop on [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer), or [CometChatConversations](/ui-kit/react/conversations). +Use the `textFormatters` prop on [CometChatMessageList](/ui-kit/react/v6/message-list), [CometChatMessageComposer](/ui-kit/react/v6/message-composer), or [CometChatConversations](/ui-kit/react/v6/conversations). --- ## Next Steps - + Build custom inline text patterns. - + Render real-time message threads. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/message-composer.mdx b/ui-kit/react/v6/message-composer.mdx index b45fc7c1b..dcaf915ce 100644 --- a/ui-kit/react/v6/message-composer.mdx +++ b/ui-kit/react/v6/message-composer.mdx @@ -893,7 +893,7 @@ Custom text formatters for the composer input. | Type | `CometChatTextFormatter[]` | | Default | Default formatters from data source | -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide). +See [CometChatMentionsFormatter](/ui-kit/react/v6/mentions-formatter-guide). --- diff --git a/ui-kit/react/v6/message-header.mdx b/ui-kit/react/v6/message-header.mdx index 90feb1c93..29bca5379 100644 --- a/ui-kit/react/v6/message-header.mdx +++ b/ui-kit/react/v6/message-header.mdx @@ -512,7 +512,7 @@ function CustomDateHeader({ user }: { user: CometChat.User }) { ``` -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. +If no property is passed in the [CalendarObject](/ui-kit/react/v6/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/v6/localize#customisation) first. If also missing there, the component's default formatting applies. --- diff --git a/ui-kit/react/v6/message-list.mdx b/ui-kit/react/v6/message-list.mdx index 97a5313ff..136a45478 100644 --- a/ui-kit/react/v6/message-list.mdx +++ b/ui-kit/react/v6/message-list.mdx @@ -477,7 +477,7 @@ function MessageListWithFooter() { ### templates -Custom message bubble templates via [CometChatMessageTemplate](/ui-kit/react/message-template). +Custom message bubble templates via [CometChatMessageTemplate](/ui-kit/react/v6/message-template). ```tsx lines import { useState, useEffect } from "react"; @@ -1228,7 +1228,7 @@ Custom message bubble templates. | Type | `CometChatMessageTemplate[]` | | Default | SDK defaults | -See [CometChatMessageTemplate](/ui-kit/react/message-template). +See [CometChatMessageTemplate](/ui-kit/react/v6/message-template). --- @@ -1241,7 +1241,7 @@ Custom text formatters for message content. | Type | `CometChatTextFormatter[]` | | Default | Default formatters from data source | -See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide). +See [CometChatMentionsFormatter](/ui-kit/react/v6/mentions-formatter-guide). --- diff --git a/ui-kit/react/v6/moved/builder-customisations.mdx b/ui-kit/react/v6/moved/builder-customisations.mdx index 4d8ecec92..39d05a3d5 100644 --- a/ui-kit/react/v6/moved/builder-customisations.mdx +++ b/ui-kit/react/v6/moved/builder-customisations.mdx @@ -11,12 +11,12 @@ While the `CometChatSettings.ts` file allows basic toggling of features in the U ## **How to Customize Components** 1. **Refer to the UI Kit Documentation**\ - Browse the [**UI Kit components overview**](/ui-kit/react/components-overview) to find the component you'd like to customize.\ - *Example*: [**Message List**](/ui-kit/react/message-list) + Browse the [**UI Kit components overview**](/ui-kit/react/v6/components-overview) to find the component you'd like to customize.\ + *Example*: [**Message List**](/ui-kit/react/v6/message-list) 2. **Locate Customization Options**\ Once you've identified the component, explore its props and features within the documentation.\ - *Example*: [**Sticky DateTime Format**](/ui-kit/react/message-list#sticky-datetime-format) + *Example*: [**Sticky DateTime Format**](/ui-kit/react/v6/message-list#sticky-datetime-format) 3. **Update Props or Modify Code**\ Use supported props to tweak behavior or look. For advanced changes, navigate through the folder structure and directly edit component logic or styling. @@ -47,10 +47,10 @@ Update how the sticky date headers appear in the chat message list. ### Step-by-Step 1. **Component to Customize**:\ - [Message List](/ui-kit/react/message-list) + [Message List](/ui-kit/react/v6/message-list) 2. **Customization Option**:\ - [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format) + [`stickyDateTimeFormat`](/ui-kit/react/v6/message-list#sticky-datetime-format) 3. **Apply the Prop**: diff --git a/ui-kit/react/v6/moved/builder-dir-structure.mdx b/ui-kit/react/v6/moved/builder-dir-structure.mdx index 7c5fff088..873b3e22a 100644 --- a/ui-kit/react/v6/moved/builder-dir-structure.mdx +++ b/ui-kit/react/v6/moved/builder-dir-structure.mdx @@ -210,5 +210,5 @@ This structured breakdown of the **CometChat UI Kit Builder directory** helps de For further customization and integration details, refer to: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. +* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. +* **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. diff --git a/ui-kit/react/v6/moved/builder-integration-nextjs.mdx b/ui-kit/react/v6/moved/builder-integration-nextjs.mdx index df1399d67..63630f59f 100644 --- a/ui-kit/react/v6/moved/builder-integration-nextjs.mdx +++ b/ui-kit/react/v6/moved/builder-integration-nextjs.mdx @@ -168,7 +168,7 @@ export default CometChatNoSSR; To authenticate a user, you need a **`UID`**. You can either: -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/v6/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. 2. **Use pre-generated test users**: @@ -187,7 +187,7 @@ The **Login** method returns a **User object** containing all relevant details o **Security Best Practices** * The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. +* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/v6/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. @@ -521,9 +521,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. +* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. +* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-integration-react-router.mdx b/ui-kit/react/v6/moved/builder-integration-react-router.mdx index a746a3c15..81f5582fb 100644 --- a/ui-kit/react/v6/moved/builder-integration-react-router.mdx +++ b/ui-kit/react/v6/moved/builder-integration-react-router.mdx @@ -175,7 +175,7 @@ export default CometChatNoSSR; To authenticate a user, you need a **`UID`**. You can either: -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/v6/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. 2. **Use pre-generated test users**: @@ -194,7 +194,7 @@ The **Login** method returns a **User object** containing all relevant details o **Security Best Practices** * The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. +* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/v6/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. @@ -541,9 +541,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. +* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. +* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-integration.mdx b/ui-kit/react/v6/moved/builder-integration.mdx index 093989dee..ba4aa643e 100644 --- a/ui-kit/react/v6/moved/builder-integration.mdx +++ b/ui-kit/react/v6/moved/builder-integration.mdx @@ -215,7 +215,7 @@ These values are required for proper authentication and seamless integration. To authenticate a user, you need a **`UID`**. You can either: -1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. +1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/v6/methods#create-user)** or **[via the API](/rest-api/chat-apis)**. 2. **Use pre-generated test users**: @@ -234,7 +234,7 @@ The **Login** method returns a **User object** containing all relevant details o **Security Best Practices** * The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing. -* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. +* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/v6/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access. @@ -464,9 +464,9 @@ The `CometChat` folder contains: Now that you've set up your **chat experience**, explore further configuration options: -* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration. -* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components. -* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand. -* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want. +* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration. +* **[Builder Directory Structure](/ui-kit/react/v6/builder-dir-structure)** – Understand the organization of the builder components. +* **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand. +* **[Additional Customizations](/ui-kit/react/v6/builder-customisations)** – Customise the UI the way you want. *** diff --git a/ui-kit/react/v6/moved/builder-settings.mdx b/ui-kit/react/v6/moved/builder-settings.mdx index 9d2e35c3d..22189e9f8 100644 --- a/ui-kit/react/v6/moved/builder-settings.mdx +++ b/ui-kit/react/v6/moved/builder-settings.mdx @@ -225,5 +225,5 @@ Use this guide as your go-to reference when: ## **Related Links** -* [Directory Structure](/ui-kit/react/builder-dir-structure) -* [Advanced Theming](/ui-kit/react/theme) +* [Directory Structure](/ui-kit/react/v6/builder-dir-structure) +* [Advanced Theming](/ui-kit/react/v6/theme) diff --git a/ui-kit/react/v6/next-conversation.mdx b/ui-kit/react/v6/next-conversation.mdx index 0881658c9..757203b0d 100644 --- a/ui-kit/react/v6/next-conversation.mdx +++ b/ui-kit/react/v6/next-conversation.mdx @@ -12,7 +12,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts | Framework | Next.js | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/v6/next-js-integration) Steps 1–5 first | | SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | | Pattern | WhatsApp Web, Slack, Microsoft Teams | @@ -20,7 +20,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/v6/next-js-integration) (project created, UI Kit installed, CSS imported). @@ -373,16 +373,16 @@ You should see the conversation list on the left. Tap any conversation to load m ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> + } href="/ui-kit/react/v6/next-js-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/next-js-integration.mdx b/ui-kit/react/v6/next-js-integration.mdx index 71993f00e..0cb7c373f 100644 --- a/ui-kit/react/v6/next-js-integration.mdx +++ b/ui-kit/react/v6/next-js-integration.mdx @@ -17,7 +17,7 @@ description: "Integrate CometChat React UI Kit with Next.js using client compone | SSR | CometChat requires browser APIs — use dynamic import with `ssr: false` | | CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) | +| Other frameworks | [React.js](/ui-kit/react/v6/react-js-integration) · [React Router](/ui-kit/react/v6/react-router-integration) · [Astro](/ui-kit/react/v6/astro-integration) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -71,7 +71,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) You also need Node.js (v16+) and npm/yarn installed. -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. +Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token). Never ship Auth Keys in client code. --- @@ -235,7 +235,7 @@ Key points: - Components must not render until login resolves — use a state flag to gate rendering. -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. +For production, use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. --- @@ -286,7 +286,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think > Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -309,7 +309,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f > Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -332,7 +332,7 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo > Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -343,9 +343,9 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling +- [Components](/ui-kit/react/v6/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/v6/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/v6/theme) — Colors, fonts, dark mode, and custom styling - [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK --- @@ -353,16 +353,16 @@ Need full control over the UI? Use individual components, customize themes, and ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Chat features included out of the box - + Common issues and fixes diff --git a/ui-kit/react/v6/next-one-to-one-chat.mdx b/ui-kit/react/v6/next-one-to-one-chat.mdx index 9f9878096..865f6c4ec 100644 --- a/ui-kit/react/v6/next-one-to-one-chat.mdx +++ b/ui-kit/react/v6/next-one-to-one-chat.mdx @@ -12,7 +12,7 @@ description: "Build focused CometChat UI Kit chat screens in Next.js with header | Framework | Next.js | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/v6/next-js-integration) Steps 1–5 first | | SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | | Pattern | Support chat, embedded widgets, focused messaging | @@ -20,7 +20,7 @@ description: "Build focused CometChat UI Kit chat screens in Next.js with header This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/v6/next-js-integration) (project created, UI Kit installed, CSS imported). @@ -248,16 +248,16 @@ You should see the chat window load with the conversation for the UID you set. ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> + } href="/ui-kit/react/v6/next-js-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/next-tab-based-chat.mdx b/ui-kit/react/v6/next-tab-based-chat.mdx index 06a788584..a8f87207a 100644 --- a/ui-kit/react/v6/next-tab-based-chat.mdx +++ b/ui-kit/react/v6/next-tab-based-chat.mdx @@ -12,7 +12,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Framework | Next.js | | Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first | +| Prerequisite | Complete [Next.js Integration](/ui-kit/react/v6/next-js-integration) Steps 1–5 first | | SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs | | Pattern | Full-featured messaging app with multiple sections | @@ -20,7 +20,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [Next.js Integration](/ui-kit/react/v6/next-js-integration) (project created, UI Kit installed, CSS imported). @@ -593,16 +593,16 @@ You should see the tab bar at the bottom of the sidebar. Switch between Chats, C ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - } href="/ui-kit/react/next-js-integration"> + } href="/ui-kit/react/v6/next-js-integration"> Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/notification-feed.mdx b/ui-kit/react/v6/notification-feed.mdx index f963cfc39..792f64875 100644 --- a/ui-kit/react/v6/notification-feed.mdx +++ b/ui-kit/react/v6/notification-feed.mdx @@ -743,16 +743,16 @@ function App() { ## Next Steps - + Overview of how campaigns work end-to-end Low-level SDK APIs for feed items, categories, and engagement - + Customize colors, fonts, and appearance - + Browse all prebuilt UI components diff --git a/ui-kit/react/v6/overview.mdx b/ui-kit/react/v6/overview.mdx index ff8b9e261..e20d8bd98 100644 --- a/ui-kit/react/v6/overview.mdx +++ b/ui-kit/react/v6/overview.mdx @@ -116,16 +116,16 @@ No authentication required. Not needed for the initial integration — the skill Pick your framework and follow the step-by-step integration guide: - + Vite or Create React App - } href="/ui-kit/react/next-js-integration"> + } href="/ui-kit/react/v6/next-js-integration"> App Router with client-side rendering - } href="/ui-kit/react/react-router-integration"> + } href="/ui-kit/react/v6/react-router-integration"> SPA with React Router v6+ - } href="/ui-kit/react/astro-integration"> + } href="/ui-kit/react/v6/astro-integration"> React islands with client:only directive @@ -135,16 +135,16 @@ Pick your framework and follow the step-by-step integration guide: ## Explore - + Browse all prebuilt UI components - + Chat, calling, AI, and extensions - + Colors, fonts, dark mode, and custom styling - + Threaded messages, new chat, search, and more @@ -163,13 +163,13 @@ Pick your framework and follow the step-by-step integration guide: Design resources and prototyping - + Common issues and fixes Open a support ticket - + Upgrading from v5 diff --git a/ui-kit/react/v6/react-conversation.mdx b/ui-kit/react/v6/react-conversation.mdx index 7302e81a6..7ed74725a 100644 --- a/ui-kit/react/v6/react-conversation.mdx +++ b/ui-kit/react/v6/react-conversation.mdx @@ -12,14 +12,14 @@ description: "Build CometChat React UI Kit conversation list and message view la | Framework | React.js | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first | +| Prerequisite | Complete [React.js Integration](/ui-kit/react/v6/react-js-integration) Steps 1–5 first | | Pattern | WhatsApp Web, Slack, Microsoft Teams | This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. -This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). +This assumes you've already completed [React.js Integration](/ui-kit/react/v6/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). @@ -391,16 +391,16 @@ You should see the conversation list on the left. Tap any conversation to load m ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/react-js-integration.mdx b/ui-kit/react/v6/react-js-integration.mdx index e01ac0648..82e0eb866 100644 --- a/ui-kit/react/v6/react-js-integration.mdx +++ b/ui-kit/react/v6/react-js-integration.mdx @@ -16,7 +16,7 @@ description: "Integrate CometChat React UI Kit with React.js using app credentia | Auth Key | Dev/testing only. Use Auth Token in production | | CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) | +| Other frameworks | [Next.js](/ui-kit/react/v6/next-js-integration) · [React Router](/ui-kit/react/v6/react-router-integration) · [Astro](/ui-kit/react/v6/astro-integration) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -66,7 +66,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) You also need Node.js (v16+) and npm/yarn installed. -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. +Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token). Never ship Auth Keys in client code. --- @@ -193,7 +193,7 @@ CometChatUIKit.init(UIKitSettings) -By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/methods#setting-session-storage-mode). +By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/v6/methods#setting-session-storage-mode). --- @@ -253,7 +253,7 @@ Key points: - Components must not render until login resolves — use a state flag to gate rendering. -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. +For production, use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. --- @@ -291,7 +291,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think > **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -314,7 +314,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f > **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -337,7 +337,7 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo > **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time. - + Step-by-step guide to build this layout @@ -348,9 +348,9 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling +- [Components](/ui-kit/react/v6/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/v6/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/v6/theme) — Colors, fonts, dark mode, and custom styling - [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK --- @@ -376,16 +376,16 @@ import { CometChatFrameProvider } from "@cometchat/chat-uikit-react"; ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Chat features included out of the box - + Common issues and fixes diff --git a/ui-kit/react/v6/react-one-to-one-chat.mdx b/ui-kit/react/v6/react-one-to-one-chat.mdx index 202b151cf..67a4f4b8a 100644 --- a/ui-kit/react/v6/react-one-to-one-chat.mdx +++ b/ui-kit/react/v6/react-one-to-one-chat.mdx @@ -12,14 +12,14 @@ description: "Build focused CometChat React UI Kit one-to-one or group chat scre | Framework | React.js | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first | +| Prerequisite | Complete [React.js Integration](/ui-kit/react/v6/react-js-integration) Steps 1–5 first | | Pattern | Support chat, embedded widgets, focused messaging | This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). +This assumes you've already completed [React.js Integration](/ui-kit/react/v6/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). @@ -186,16 +186,16 @@ You should see the chat window load with the conversation for the UID you set. ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/react-router-conversation.mdx b/ui-kit/react/v6/react-router-conversation.mdx index e0a713a8c..c32db31e4 100644 --- a/ui-kit/react/v6/react-router-conversation.mdx +++ b/ui-kit/react/v6/react-router-conversation.mdx @@ -12,7 +12,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts | Framework | React Router | | Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Two-panel — conversation list (left) + message view (right) | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/react-router-integration) Steps 1–5 first | +| Prerequisite | Complete [React Router Integration](/ui-kit/react/v6/react-router-integration) Steps 1–5 first | | SSR | Lazy import + mounted check — CometChat requires browser APIs | | Pattern | WhatsApp Web, Slack, Microsoft Teams | @@ -20,7 +20,7 @@ description: "Build CometChat UI Kit conversation list and message view layouts This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it. -This assumes you've already completed [React Router Integration](/ui-kit/react/react-router-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [React Router Integration](/ui-kit/react/v6/react-router-integration) (project created, UI Kit installed, CSS imported). @@ -396,16 +396,16 @@ Navigate to `/chat` (e.g. `http://localhost:5173/chat`). You should see the conv ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/react-router-integration.mdx b/ui-kit/react/v6/react-router-integration.mdx index f2733d42b..6214ebe20 100644 --- a/ui-kit/react/v6/react-router-integration.mdx +++ b/ui-kit/react/v6/react-router-integration.mdx @@ -17,7 +17,7 @@ description: "Integrate CometChat React UI Kit with React Router using app crede | SSR | React Router SSR — use lazy import + mounted check for CometChat components | | CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | -| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [Astro](/ui-kit/react/astro-integration) | +| Other frameworks | [React.js](/ui-kit/react/v6/react-js-integration) · [Next.js](/ui-kit/react/v6/next-js-integration) · [Astro](/ui-kit/react/v6/astro-integration) | | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -67,7 +67,7 @@ You need three things from the [CometChat Dashboard](https://app.cometchat.com/) You also need Node.js (v16+) and npm/yarn installed. -Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code. +Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token). Never ship Auth Keys in client code. --- @@ -228,7 +228,7 @@ Key points: - Components must not render until login resolves — use a state flag to gate rendering. -For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. +For production, use [`loginWithAuthToken()`](/ui-kit/react/v6/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API. --- @@ -271,7 +271,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think - + Step-by-step guide to build this layout @@ -290,7 +290,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f - + Step-by-step guide to build this layout @@ -309,7 +309,7 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo - + Step-by-step guide to build this layout @@ -320,9 +320,9 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good fo Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. - [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against -- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options -- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities -- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling +- [Components](/ui-kit/react/v6/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/v6/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/v6/theme) — Colors, fonts, dark mode, and custom styling - [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK --- @@ -330,16 +330,16 @@ Need full control over the UI? Use individual components, customize themes, and ## Next Steps - + Browse all prebuilt UI components - + Customize colors, fonts, and styles - + Chat features included out of the box - + Common issues and fixes diff --git a/ui-kit/react/v6/react-router-one-to-one-chat.mdx b/ui-kit/react/v6/react-router-one-to-one-chat.mdx index ff12252a8..68bc075bd 100644 --- a/ui-kit/react/v6/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/v6/react-router-one-to-one-chat.mdx @@ -12,7 +12,7 @@ description: "Build focused CometChat UI Kit chat screens in React Router with h | Framework | React Router | | Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Single chat window — no sidebar, no conversation list | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/react-router-integration) Steps 1–5 first | +| Prerequisite | Complete [React Router Integration](/ui-kit/react/v6/react-router-integration) Steps 1–5 first | | SSR | Lazy import + mounted check — CometChat requires browser APIs | | Pattern | Support chat, embedded widgets, focused messaging | @@ -20,7 +20,7 @@ description: "Build focused CometChat UI Kit chat screens in React Router with h This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience. -This assumes you've already completed [React Router Integration](/ui-kit/react/react-router-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [React Router Integration](/ui-kit/react/v6/react-router-integration) (project created, UI Kit installed, CSS imported). @@ -265,16 +265,16 @@ Navigate to `/chat` (e.g. `http://localhost:5173/chat`). You should see the chat ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/react-router-tab-based-chat.mdx b/ui-kit/react/v6/react-router-tab-based-chat.mdx index ddbb1d418..a86a9e5de 100644 --- a/ui-kit/react/v6/react-router-tab-based-chat.mdx +++ b/ui-kit/react/v6/react-router-tab-based-chat.mdx @@ -12,7 +12,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Framework | React Router | | Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [React Router Integration](/ui-kit/react/react-router-integration) Steps 1–5 first | +| Prerequisite | Complete [React Router Integration](/ui-kit/react/v6/react-router-integration) Steps 1–5 first | | SSR | Lazy import + mounted check — CometChat requires browser APIs | | Pattern | Full-featured messaging app with multiple sections | @@ -20,7 +20,7 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [React Router Integration](/ui-kit/react/react-router-integration) (project created, UI Kit installed, CSS imported). +This assumes you've already completed [React Router Integration](/ui-kit/react/v6/react-router-integration) (project created, UI Kit installed, CSS imported). @@ -608,16 +608,16 @@ Navigate to `/chat` (e.g. `http://localhost:5173/chat`). You should see the tab ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/react-tab-based-chat.mdx b/ui-kit/react/v6/react-tab-based-chat.mdx index 1629f378d..98cb00b71 100644 --- a/ui-kit/react/v6/react-tab-based-chat.mdx +++ b/ui-kit/react/v6/react-tab-based-chat.mdx @@ -12,14 +12,14 @@ description: "Build a tab-based messaging UI with chats, calls, users, and group | Framework | React.js | | Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` | | Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view | -| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first | +| Prerequisite | Complete [React.js Integration](/ui-kit/react/v6/react-js-integration) Steps 1–5 first | | Pattern | Full-featured messaging app with multiple sections | This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations. -This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). +This assumes you've already completed [React.js Integration](/ui-kit/react/v6/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported). @@ -542,16 +542,16 @@ You should see the tab bar at the bottom of the sidebar. Switch between Chats, C ## Next Steps - + Customize colors, fonts, and styles to match your brand - + Browse all prebuilt UI components - + Back to the main setup guide - + Chat features included out of the box diff --git a/ui-kit/react/v6/search.mdx b/ui-kit/react/v6/search.mdx index ed7f8ffae..6f932c440 100644 --- a/ui-kit/react/v6/search.mdx +++ b/ui-kit/react/v6/search.mdx @@ -383,7 +383,7 @@ The component exposes separate view slots for conversation results and message r | `emptyView` | `JSX.Element` | Empty results state | | `errorView` | `JSX.Element` | Error state | -Conversation view slots follow the same pattern as [CometChatConversations](/ui-kit/react/conversations). Refer to that component for detailed examples. +Conversation view slots follow the same pattern as [CometChatConversations](/ui-kit/react/v6/conversations). Refer to that component for detailed examples. ### messageItemView @@ -1055,7 +1055,7 @@ Format for message timestamps. | Type | `CalendarObject` | | Default | Component default | -Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set. +Falls back to [global calendar configuration](/ui-kit/react/v6/localize#customisation) if not set. --- diff --git a/ui-kit/react/v6/shortcut-formatter-guide.mdx b/ui-kit/react/v6/shortcut-formatter-guide.mdx index b2f6f312f..49ec37744 100644 --- a/ui-kit/react/v6/shortcut-formatter-guide.mdx +++ b/ui-kit/react/v6/shortcut-formatter-guide.mdx @@ -12,11 +12,11 @@ description: "Implement shortcut formatting in CometChat React UI Kit with trigg | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Track character | `!` — triggers shortcut expansion in the message composer | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | +| Related | [Custom Text Formatter](/ui-kit/react/v6/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/v6/guide-overview) | -`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text. +`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/react/v6/custom-text-formatter-guide) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text. @@ -273,13 +273,13 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ## Next Steps - + Build custom inline text patterns. - + Customize the message input component. - + Browse all feature and formatter guides. diff --git a/ui-kit/react/v6/theme.mdx b/ui-kit/react/v6/theme.mdx index fd691a6bb..8ec13d316 100644 --- a/ui-kit/react/v6/theme.mdx +++ b/ui-kit/react/v6/theme.mdx @@ -15,7 +15,7 @@ description: "Customize the CometChat React UI Kit appearance using CSS variable | Step 3 (dark mode) | Override on `.cometchat-root[data-theme="dark"] .cometchat` or use `@media (prefers-color-scheme: dark)` | | Key tokens | `--cometchat-primary-color`, `--cometchat-neutral-color-300`, `--cometchat-font-family`, `--cometchat-background-color-03` | | Constraints | Global CSS only (no CSS Modules), no `!important`, component-level overrides beat global | -| Full token list | [Color Resources](/ui-kit/react/theme/color-resources) | [GitHub source](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) | +| Full token list | [Color Resources](/ui-kit/react/v6/theme/color-resources) | [GitHub source](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) | @@ -131,7 +131,7 @@ All primary-colored elements (outgoing bubbles, buttons, active states, links) c ## Top Tokens (Quick Mapping) -For the complete list, see [Color Resources](/ui-kit/react/theme/color-resources). +For the complete list, see [Color Resources](/ui-kit/react/v6/theme/color-resources). | Token | Common usage | | --- | --- | @@ -313,7 +313,7 @@ Only the Conversations component changes; other components stay default. } ``` -Outgoing bubbles use orange; incoming bubbles use a light slate. For more variants, see [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling). +Outgoing bubbles use orange; incoming bubbles use a light slate. For more variants, see [Message Bubble Styling](/ui-kit/react/v6/theme/message-bubble-styling). ## Resources diff --git a/ui-kit/react/v6/thread-header.mdx b/ui-kit/react/v6/thread-header.mdx index 0f5ac5ea6..69d0923cb 100644 --- a/ui-kit/react/v6/thread-header.mdx +++ b/ui-kit/react/v6/thread-header.mdx @@ -233,7 +233,7 @@ function CustomDateThread({ parentMessage }: { parentMessage: CometChat.BaseMess ``` -If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies. +If no property is passed in the [CalendarObject](/ui-kit/react/v6/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/v6/localize#customisation) first. If also missing there, the component's default formatting applies. --- diff --git a/ui-kit/react/v6/troubleshooting.mdx b/ui-kit/react/v6/troubleshooting.mdx index 7e315ac52..5ca779dc8 100644 --- a/ui-kit/react/v6/troubleshooting.mdx +++ b/ui-kit/react/v6/troubleshooting.mdx @@ -18,13 +18,13 @@ description: "Troubleshoot CometChat React UI Kit setup, initialization, login, | Symptom | Cause | Fix | | --- | --- | --- | | `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) | -| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/react/methods) | +| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/react/v6/methods) | | Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | | Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first | | Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | | `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first | | `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages | -| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for production | +| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/react/v6/methods#login-using-auth-token) for production | --- @@ -32,7 +32,7 @@ description: "Troubleshoot CometChat React UI Kit setup, initialization, login, | Symptom | Cause | Fix | | --- | --- | --- | -| SSR hydration error | CometChat components use browser APIs (`window`, `WebSocket`, `document`) on server | Wrap in `useEffect` or use dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | +| SSR hydration error | CometChat components use browser APIs (`window`, `WebSocket`, `document`) on server | Wrap in `useEffect` or use dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/v6/next-js-integration) | | CometChat components fail in Astro | Astro SSR tries to render on server | Use `client:only="react"` directive on CometChat islands | --- @@ -49,7 +49,7 @@ description: "Troubleshoot CometChat React UI Kit setup, initialization, login, | Dark mode unchanged | `data-theme` missing or mismatch | Set `data-theme="dark"` on the wrapper and target `.cometchat-root[data-theme="dark"] .cometchat` | | Font not changing | `--cometchat-font-family` set on wrong element | Set on `.cometchat` | | Styles leak into host app | Missing `.cometchat` scope prefix | Always scope overrides under `.cometchat` | -| Token change has no visible effect | Token doesn't control the expected property | Check the [Color Resources](/ui-kit/react/theme/color-resources) table | +| Token change has no visible effect | Token doesn't control the expected property | Check the [Color Resources](/ui-kit/react/v6/theme/color-resources) table | --- @@ -97,7 +97,7 @@ description: "Troubleshoot CometChat React UI Kit setup, initialization, login, | Symptom | Cause | Fix | | --- | --- | --- | -| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localize](/ui-kit/react/localize) for exact codes (e.g., `en-US` not `en`) | +| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localize](/ui-kit/react/v6/localize) for exact codes (e.g., `en-US` not `en`) | | Custom translations not appearing | `addTranslation` called before `init` | Call `CometChatLocalize.init()` first, then `addTranslation()` | | Date/time format unchanged | `disableDateTimeLocalization` set to `true` | Set `disableDateTimeLocalization: false` in init config | | Component-level CalendarObject ignored | Prop name mismatch | Check the component docs for the exact prop name (e.g., `lastActiveAtDateTimeFormat`) | @@ -120,6 +120,6 @@ description: "Troubleshoot CometChat React UI Kit setup, initialization, login, | Symptom | Cause | Fix | | --- | --- | --- | -| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/react/events) page for exact event names | +| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/react/v6/events) page for exact event names | | Duplicate event triggers | Multiple subscriptions without cleanup | Unsubscribe in `useEffect` cleanup or component unmount | | Event fires but UI doesn't update | State not updated in event handler | Ensure you call `setState` or equivalent in the handler | diff --git a/ui-kit/react/v6/upgrading-from-v5.mdx b/ui-kit/react/v6/upgrading-from-v5.mdx index 2c777173e..cf4018c8b 100644 --- a/ui-kit/react/v6/upgrading-from-v5.mdx +++ b/ui-kit/react/v6/upgrading-from-v5.mdx @@ -8,7 +8,7 @@ description: "Migration guide for upgrading from CometChat React UI Kit v5 to v6 | --- | --- | | Package | `@cometchat/chat-uikit-react` (replaces v5 packages) | | New init pattern | `UIKitSettingsBuilder` + `CometChatUIKit.init()` | -| Theming | CSS variables replace inline style objects. See [Theming](/ui-kit/react/theme) | +| Theming | CSS variables replace inline style objects. See [Theming](/ui-kit/react/v6/theme) | | Localization | `CometChatLocalize.init(settings)` — language codes changed (e.g., `en` → `en-US`), new `CalendarObject` for date formatting | | Key changes | `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString`, `datePattern` → `CalendarObject`-based props | @@ -43,7 +43,7 @@ CometChatLocalize.init("en", { }); ``` -In CometChat v6 UI Kit, the [`CometChatLocalize.init()`](/ui-kit/react/localize#initialize-cometchatlocalize) method accepts a [localization setting](/ui-kit/react/localize#localizationsettings) instead of individual parameters. +In CometChat v6 UI Kit, the [`CometChatLocalize.init()`](/ui-kit/react/v6/localize#initialize-cometchatlocalize) method accepts a [localization setting](/ui-kit/react/v6/localize#localizationsettings) instead of individual parameters. ```js title="V6 UI Kit" lines CometChatLocalize.init({ @@ -92,7 +92,7 @@ CometChatLocalize.init("en", { }); ``` -In CometChat v6 UI Kit, translations can be added or overridden using the [`init()`](/ui-kit/react/localize#initialize-cometchatlocalize) method or the [`addTranslation()`](/ui-kit/react/localize#add-custom-translations) method. +In CometChat v6 UI Kit, translations can be added or overridden using the [`init()`](/ui-kit/react/v6/localize#initialize-cometchatlocalize) method or the [`addTranslation()`](/ui-kit/react/v6/localize#add-custom-translations) method. ```js title="V6 UI Kit" lines CometChatLocalize.addTranslation({ @@ -104,7 +104,7 @@ CometChatLocalize.addTranslation({ ### Handling Date & Time Localization -CometChat v5 UI Kit lacked support for date formatting, but CometChat v6 UI Kit introduces the [`CalendarObject`](/ui-kit/react/localize#calendarobject) for date and time formatting. +CometChat v5 UI Kit lacked support for date formatting, but CometChat v6 UI Kit introduces the [`CalendarObject`](/ui-kit/react/v6/localize#calendarobject) for date and time formatting. ```js title="V6 UI Kit" lines const formattedDate = new CalendarObject({ @@ -121,7 +121,7 @@ CometChatLocalize.init({ ### Handling Missing Translation Keys -CometChat v5 UI Kit did not handle missing translation keys, whereas CometChat v6 UI Kit introduces a [`missingKeyHandler`](/ui-kit/react/localize#initialize-cometchatlocalize) for better control. +CometChat v5 UI Kit did not handle missing translation keys, whereas CometChat v6 UI Kit introduces a [`missingKeyHandler`](/ui-kit/react/v6/localize#initialize-cometchatlocalize) for better control. ```javascript title="V6 UI Kit" lines CometChatLocalize.init({ @@ -270,16 +270,16 @@ In CometChat v6 UI Kit, several props and methods in components and the CometCha ## Next Steps - + Fresh v6 setup guide for React.js. - + Explore all v6 prebuilt UI components. - + New CSS variable-based theming system. - + Init, login, logout, and other UI Kit methods. diff --git a/ui-kit/react/v6/url-formatter-guide.mdx b/ui-kit/react/v6/url-formatter-guide.mdx index fba0dd9ea..d6e88dc06 100644 --- a/ui-kit/react/v6/url-formatter-guide.mdx +++ b/ui-kit/react/v6/url-formatter-guide.mdx @@ -12,11 +12,11 @@ description: "Detect and style plain URLs as clickable links with optional track | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` | | Purpose | Auto-detects URLs in text messages and converts them to clickable links | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) | -| Related | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) | +| Related | [Custom Text Formatter](/ui-kit/react/v6/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/v6/guide-overview) | -`CometChatUrlsFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links. +`CometChatUrlsFormatter` extends [CometChatTextFormatter](/ui-kit/react/v6/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links. @@ -95,13 +95,13 @@ onUrlClick(event) { ## Next Steps - + Build custom inline text patterns. - + Render real-time message threads. - + Browse all feature and formatter guides. From 8a97e14957d64e272ee5515bc662a7463bb70311 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Mon, 15 Jun 2026 13:07:21 +0530 Subject: [PATCH 05/27] add docs for iframe and chat experience in v7 react --- ui-kit/react/integration-astro.mdx | 12 +++++++++ ui-kit/react/integration-nextjs.mdx | 12 +++++++++ ui-kit/react/integration-react-router.mdx | 12 +++++++++ ui-kit/react/integration-react.mdx | 30 +++++++++++++++++++++++ 4 files changed, 66 insertions(+) diff --git a/ui-kit/react/integration-astro.mdx b/ui-kit/react/integration-astro.mdx index ad76cfae8..bc6c15787 100644 --- a/ui-kit/react/integration-astro.mdx +++ b/ui-kit/react/integration-astro.mdx @@ -224,6 +224,18 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. --- +## Build Your Own Chat Experience + +Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. + +- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app) — Working reference app to compare against +- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/theming) — Colors, fonts, dark mode, and custom styling +- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK + +--- + ## Next Steps diff --git a/ui-kit/react/integration-nextjs.mdx b/ui-kit/react/integration-nextjs.mdx index b89359144..3eb40750f 100644 --- a/ui-kit/react/integration-nextjs.mdx +++ b/ui-kit/react/integration-nextjs.mdx @@ -215,6 +215,18 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. --- +## Build Your Own Chat Experience + +Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. + +- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app) — Working reference app to compare against +- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/theming) — Colors, fonts, dark mode, and custom styling +- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK + +--- + ## Next Steps diff --git a/ui-kit/react/integration-react-router.mdx b/ui-kit/react/integration-react-router.mdx index f06f7532d..7f878dfe5 100644 --- a/ui-kit/react/integration-react-router.mdx +++ b/ui-kit/react/integration-react-router.mdx @@ -224,6 +224,18 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. --- +## Build Your Own Chat Experience + +Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. + +- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app) — Working reference app to compare against +- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/theming) — Colors, fonts, dark mode, and custom styling +- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK + +--- + ## Next Steps diff --git a/ui-kit/react/integration-react.mdx b/ui-kit/react/integration-react.mdx index 4d4e376d3..af941c1b3 100644 --- a/ui-kit/react/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -203,6 +203,36 @@ Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. --- +## Build Your Own Chat Experience + +Need full control over the UI? Use individual components, customize themes, and wire up your own layouts. + +- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app) — Working reference app to compare against +- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options +- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities +- [Theming](/ui-kit/react/theming) — Colors, fonts, dark mode, and custom styling +- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK + +--- + +## iFrame Embedding + +If your React app runs inside an ` + +Use it when a user chooses "Report" on a message. The parent owns the open state and decides what happens with the report inside `onSubmit` (e.g., calling a moderation backend). + +```tsx lines +import { useState } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatFlagMessageDialog } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/css-variables.css"; + +function FlagMessageExample({ message }: { message: CometChat.BaseMessage }) { + const [open, setOpen] = useState(false); + + const handleSubmit = async ( + messageId: string, + reasonId: string, + remark?: string + ) => { + // Report the message to your backend / moderation service. + console.log("Reporting", { messageId, reasonId, remark }); + return true; // return false to keep the dialog open and show an error + }; + + return ( + <> + + + setOpen(false)} + onSubmit={handleSubmit} + /> + + ); +} +``` + +## Minimal Render + +```tsx lines +import { CometChatFlagMessageDialog } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/css-variables.css"; + +function Demo({ message }) { + return ; +} +``` + +Root CSS class: `.cometchat-flag-message-dialog` + +## Sub-Components + +`CometChatFlagMessageDialog` is a compound component with these sub-components: + +| Sub-Component | Purpose | +| --- | --- | +| `Root` | Overlay and context provider. Manages open/close state, focus trap, outside-click/Escape, reason fetching, and submission. Renders the default layout when no children are passed. | +| `Header` | Title and subtitle. Defaults to a localized "Report a Message" heading. | +| `Reasons` | Single-select list of report reasons fetched from the SDK. | +| `Remark` | Optional free-text input with a character counter (default max 500). | +| `Actions` | Cancel and submit (Report) buttons. | + +### Custom Layout + +Compose sub-components to customize the layout — for example, omit `Remark` to collect only a reason: + +```tsx lines + setOpen(false)} + onSubmit={handleSubmit} +> + + + + + +``` + +### Custom Header + +Pass `title`/`subtitle` for text changes, or `children` for fully custom header content: + +```tsx lines + + +
+

Custom Report Header

+

This uses children instead of title/subtitle props.

+
+ + + + +``` + +Sub-component props: + +| Sub-component | Prop | Type | Default | +| --- | --- | --- | --- | +| `Header` | `title` | `string` | `"Report a Message"` (localized) | +| `Header` | `subtitle` | `string` | Localized description | +| `Remark` | `label` | `string` | `"Reason"` (localized) | +| `Remark` | `placeholder` | `string` | Localized placeholder | +| `Remark` | `maxLength` | `number` | `500` | +| `Actions` | `cancelText` | `string` | `"Cancel"` (localized) | +| `Actions` | `submitText` | `string` | `"Report"` (localized) | + +Every sub-component also accepts `children` (where applicable) and a `className`. + +## Actions and Events + +### Callback Props + +#### onSubmit + +Called when the user clicks Report with a reason selected. Receives the message ID, the selected reason ID, and the optional remark. Return `true` to close the dialog, or `false` to keep it open and show an inline error. + +```tsx lines + setOpen(false)} + onSubmit={async (messageId, reasonId, remark) => { + const ok = await reportToBackend({ messageId, reasonId, remark }); + return ok; + }} +/> +``` + +#### onClose + +Called when the dialog requests to close — via the cancel button, the Escape key, or an outside click. In controlled mode you own the open state, so update it here. + +```tsx lines + setOpen(false)} +/> +``` + +#### onError + +Called when an SDK error occurs (e.g., while fetching reasons or during submission). + +```tsx lines + setOpen(false)} + onError={(error) => console.error("Flag message error:", error)} +/> +``` + +## Behavior Details + +### Controlled vs Uncontrolled + +- **Controlled** — pass `isOpen` and `onClose`. You own the open state (recommended for most apps). +- **Uncontrolled** — omit `isOpen`. The dialog manages its own internal open state and closes itself on cancel, Escape, outside click, or a successful submit. + +### Reason Fetching + +On open, the dialog calls `CometChat.getFlagReasons()` and renders the result as a single-select list. While loading, a loading state is shown. If the call fails, `onError` is invoked. + +### Remark + +The remark is optional. It is trimmed before submission, and an empty remark is passed as `undefined` to `onSubmit`. A character counter enforces `maxLength` (default 500). + +### Submission + +The submit button is disabled until a reason is selected. On submit: +1. `onSubmit` is awaited. +2. Returning `false` (or throwing) keeps the dialog open and shows an inline error banner. +3. Returning `true` closes the dialog. + +### Focus & Keyboard + +The Root traps focus within the dialog while open, moves focus to the first focusable element on open, restores focus to the previously focused element on close, cycles focus with `Tab` / `Shift+Tab`, and closes on `Escape`. + +## CSS Architecture + +The component uses CSS custom properties defined in `@cometchat/chat-uikit-react/css-variables.css`. + +### Key Selectors + +| Target | Selector | +| --- | --- | +| Backdrop | `.cometchat-flag-message-dialog__backdrop` | +| Dialog container | `.cometchat-flag-message-dialog` | +| Error banner | `.cometchat-flag-message-dialog__error` | +| Header | `.cometchat-flag-message-dialog__header` | +| Header title | `.cometchat-flag-message-dialog__header-title` | +| Header subtitle | `.cometchat-flag-message-dialog__header-subtitle` | +| Reasons list | `.cometchat-flag-message-dialog__reasons` | +| Reason item | `.cometchat-flag-message-dialog__reason` | +| Reason item (selected) | `.cometchat-flag-message-dialog__reason--selected` | +| Reasons loading | `.cometchat-flag-message-dialog__reasons-loading` | +| Remark wrapper | `.cometchat-flag-message-dialog__remark` | +| Remark label | `.cometchat-flag-message-dialog__remark-label` | +| Remark input | `.cometchat-flag-message-dialog__remark-input` | +| Remark counter | `.cometchat-flag-message-dialog__remark-counter` | +| Remark counter (at limit) | `.cometchat-flag-message-dialog__remark-counter--limit` | +| Actions container | `.cometchat-flag-message-dialog__actions` | +| Cancel button | `.cometchat-flag-message-dialog__actions-cancel` | +| Submit button | `.cometchat-flag-message-dialog__actions-submit` | + +### Example: Custom styling + +```css lines title="App.css" +.cometchat-flag-message-dialog { + --cometchat-background-color-01: #ffffff; + --cometchat-text-color-primary: #141414; +} + +.cometchat-flag-message-dialog__reason--selected { + border-color: var(--my-brand-color); +} + +.cometchat-flag-message-dialog__actions-submit { + background: var(--my-brand-color); +} +``` + +## Props + +The `message` prop is required. All other props are optional. The props below belong to `Root` (and to the flat `CometChatFlagMessageDialog`, which forwards them). + +--- + +### message + +The message being flagged. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Default | — | + +--- + +### isOpen + +Whether the dialog is open. When provided, the component is controlled. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `undefined` (uncontrolled) | + +--- + +### onClose + +Callback invoked when the dialog requests to close (outside click, Escape, or cancel). + +| | | +| --- | --- | +| Type | `() => void` | +| Default | `undefined` | + +--- + +### closeOnOutsideClick + +Whether clicking outside the dialog closes it. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### onSubmit + +Custom submit handler. Receives the message ID, the selected reason ID, and the optional remark. Return `true` on success (the dialog closes) or `false` to keep it open and show an error. + +| | | +| --- | --- | +| Type | `(messageId: string, reasonId: string, remark?: string) => Promise` | +| Default | `undefined` | + +--- + +### onError + +Callback when an SDK error occurs. + +| | | +| --- | --- | +| Type | `((error: CometChat.CometChatException) => void) \| null` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the dialog backdrop. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +## Accessibility + +- Root has `role="dialog"` with `aria-modal="true"`. +- The dialog is labelled by its title (`aria-labelledby`) and described by its subtitle (`aria-describedby`). +- Focus moves into the dialog on open and is restored to the previously focused element on close. +- Focus is trapped within the dialog; `Tab` / `Shift+Tab` cycle through focusable elements. +- `Escape` closes the dialog. +- The error banner uses `role="alert"` with `aria-live="assertive"`. From b3b15e102a06d0484107fd4ed17692f81bb7b45c Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Mon, 15 Jun 2026 14:34:11 +0530 Subject: [PATCH 09/27] docs(ui-kit/react): add session storage configuration guide - Add reference link to REST API in authentication note for token generation - Add new note about localStorage as default session storage mechanism - Add "Setting Session Storage Mode" section with code examples showing UIKitSettingsBuilder configuration - Include example for both direct initialization and CometChatProvider usage - Add note explaining session storage lifecycle and use cases - Clarify storage mode options for developers implementing custom authentication flows --- ui-kit/react/integration-react.mdx | 6 +++++- ui-kit/react/methods.mdx | 32 ++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/ui-kit/react/integration-react.mdx b/ui-kit/react/integration-react.mdx index af941c1b3..554050f25 100644 --- a/ui-kit/react/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -152,7 +152,11 @@ export default App; `CometChatProvider` handles init, login, plugin registration, theming, locale, and real-time events — no manual setup needed. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. -For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. +For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the [REST API](/rest-api/chat-apis). Never ship auth keys in client code. + + + +By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/methods#setting-session-storage-mode). --- diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 9b85bd7df..fc81a3b76 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -60,6 +60,38 @@ const user = await CometChatUIKit.init(settings); 5. Resumes existing session (if any) 6. Initializes Calls SDK (if enabled) +### Setting Session Storage Mode + +By default, session data is stored in `localStorage`. To use `sessionStorage` instead, configure it during initialization via the `UIKitSettingsBuilder`: + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .setStorageMode(CometChat.StorageMode.SESSION) + .build(); + +CometChatUIKit.init(settings).then(() => { + console.log("Initialization completed with session storage"); +}); +``` + +When using `CometChatProvider`, pass the pre-built settings object: + +```tsx + + + +``` + + +Session storage is cleared when the browser tab is closed. Use this mode if you want users to re-authenticate on every new tab/session. + + --- ## Authentication From 51482e67fd82926a97e53ba4b09860e8e6f2e346 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Mon, 15 Jun 2026 14:53:57 +0530 Subject: [PATCH 10/27] add campaigns and notification feed docs --- docs.json | 6 +- ui-kit/react/campaigns.mdx | 214 ++++++ ui-kit/react/components/conversations.mdx | 100 ++- ui-kit/react/components/notification-feed.mdx | 635 ++++++++++++++++++ 4 files changed, 952 insertions(+), 3 deletions(-) create mode 100644 ui-kit/react/campaigns.mdx create mode 100644 ui-kit/react/components/notification-feed.mdx diff --git a/docs.json b/docs.json index 59123fce7..c75012b66 100644 --- a/docs.json +++ b/docs.json @@ -510,7 +510,8 @@ "ui-kit/react/ai-features" ] }, - "ui-kit/react/call-features" + "ui-kit/react/call-features", + "ui-kit/react/campaigns" ] }, { @@ -536,7 +537,8 @@ "ui-kit/react/components/outgoing-call", "ui-kit/react/components/call-logs", "ui-kit/react/components/search", - "ui-kit/react/components/ai-assistant-chat" + "ui-kit/react/components/ai-assistant-chat", + "ui-kit/react/components/notification-feed" ] }, { diff --git a/ui-kit/react/campaigns.mdx b/ui-kit/react/campaigns.mdx new file mode 100644 index 000000000..71080b1ec --- /dev/null +++ b/ui-kit/react/campaigns.mdx @@ -0,0 +1,214 @@ +--- +title: "Campaigns" +description: "Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer." +--- + +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/integration-react) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. + + + + + + +--- + +## Overview + +Campaigns delivers notifications as **Card Schema JSON** — a structured format that defines the visual layout of each notification card. The system consists of three layers: + +1. **CometChat Chat SDK** — Fetches feed items, manages read/delivered state, provides real-time listeners, handles push notification tracking +2. **CometChat Cards Library** (`@cometchat/cards-react`) — Renders Card Schema JSON into native DOM elements +3. **CometChat UI Kit** — Provides the ready-to-use `CometChatNotificationFeed` component that wires everything together + +### Architecture Flow + +``` +Dashboard / API → Campaign Created → Push + WebSocket Delivery + ↓ + SDK: NotificationFeedRequestBuilder.fetchNext() + ↓ + NotificationFeedItem.getContent() → Card Schema JSON + ↓ + Cards Library: CometChatCardView + ↓ + Native Rendered Card (images, text, buttons, layouts) + ↓ + User clicks button → onAction callback → Your code handles it +``` + +--- + +## How Cards Work + +Each `NotificationFeedItem` from the SDK contains a `content` field — an object holding the Card Schema JSON. This JSON is passed directly to the CometChat Cards renderer which produces a DOM element. + +The Cards library is a **pure renderer**: +- **Input**: Card Schema JSON string + theme mode + optional action callback +- **Output**: Native DOM element hierarchy + +It does not execute actions, manage message state, or call any SDK methods. When users click interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc. + +### Card Schema JSON Example + +```json +{ + "version": "1.0", + "body": [ + { + "type": "column", + "backgroundColor": { + "light": "transparent", + "dark": "transparent" + }, + "gap": 5, + "items": [ + { + "type": "text", + "content": "📢 Announcement", + "variant": "heading2", + "id": "txt_99323141-2459-4e33-88d3-ca39c5fd2f50" + }, + { + "type": "text", + "content": "Your announcement message here.", + "variant": "body", + "id": "txt_61a417bc-5e4a-4ba2-bfe7-b7bc64dbaf35" + }, + { + "type": "divider", + "id": "div_80f5c7fb-fd10-41d1-8c2f-51498f0f62d0" + }, + { + "type": "button", + "label": "Learn More", + "backgroundColor": { + "light": "transparent", + "dark": "transparent" + }, + "textColor": { + "light": "#6C5CE7", + "dark": "#6C5CE7" + }, + "size": 40, + "fontSize": 13, + "borderRadius": 6, + "padding": { + "top": 0, + "right": 16, + "bottom": 0, + "left": 16 + }, + "action": { + "type": "openUrl", + "url": "" + }, + "id": "btn_9b87a3f1-b0c6-45b9-a4c2-e22ea590f17f" + } + ], + "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2" + } + ], + "fallbackText": "", + "style": { + "background": { + "light": "#E8E8E8", + "dark": "#E8E8E8" + }, + "borderRadius": 16, + "borderColor": { + "light": "#DFE6E9", + "dark": "#DFE6E9" + }, + "padding": 12 + } +} +``` + +The schema supports **20 element types** (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table) and **9 action types** (openUrl, chatWithUser, chatWithGroup, sendMessage, copyToClipboard, downloadFile, initiateCall, apiCall, customCallback). + +--- + +## How Cards Work in the UI Kit + +The `CometChatNotificationFeed` component uses the **CometChat Cards** library internally to render each notification. Here's what happens under the hood: + +1. The component fetches `NotificationFeedItem` objects from the SDK +2. For each item, it extracts the `content` field (Card Schema JSON) +3. It passes the JSON to `CometChatCardView` from `@cometchat/cards-react` +4. The Cards renderer produces native UI — text, images, buttons, layouts — directly from the JSON +5. When users click buttons/links inside a card, the action is emitted back to the component which handles navigation (open URL, navigate to chat, etc.) + +You don't need to interact with the Cards library directly when using `CometChatNotificationFeed` — it's all wired up. But if you want to render cards outside the feed (e.g., a standalone card in a modal), you can use the Cards library directly. See the [SDK Campaigns documentation](/sdk/javascript/campaigns#rendering-cards) for standalone usage. + +--- + +## Handling Push Notifications for Campaigns + +When a campaign push notification arrives via Web Push or FCM, you should: + +1. **Report delivery** — Call `CometChat.markPushNotificationDelivered()` when the notification is received +2. **Report click** — Call `CometChat.markPushNotificationClicked()` when the user clicks the notification +3. **Deep link** — Use the announcement ID from the push payload to fetch the full item via `CometChat.getNotificationFeedItem(id)` and display it + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// When push notification is received (e.g., in service worker) +const pushNotification = new CometChat.PushNotification(pushPayloadData); +CometChat.markPushNotificationDelivered(pushNotification); + +// When user clicks the notification +CometChat.markPushNotificationClicked(pushNotification); + +// Navigate to feed or show specific item +const item = await CometChat.getNotificationFeedItem(pushNotification.getId()); +``` + +See the [SDK Campaigns documentation](/sdk/javascript/campaigns) for the complete push notification tracking API. + +--- + +## Sending Campaigns + +Before integrating the frontend, you need to set up channels, categories, templates, and campaigns in the CometChat Dashboard. Follow the [Dashboard Setup Guide](/campaigns#setup-flow) for step-by-step instructions with screenshots. + +--- + +## Using the UI Kit Component + +The easiest way to add a notification feed to your app is the `CometChatNotificationFeed` component. It handles fetching, rendering, pagination, filtering, real-time updates, and engagement reporting out of the box. + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsScreen() { + return ( + { + // Handle item click + }} + onBackPress={() => { + // Navigate back + }} + /> + ); +} +``` + +See the full [CometChatNotificationFeed component documentation](/ui-kit/react/components/notification-feed) for all configuration options, styling, and customization. + +--- + +## Next Steps + + + + Full API reference for feed items, categories, engagement, and push tracking + + + Ready-to-use component with filtering, real-time updates, and styling + + diff --git a/ui-kit/react/components/conversations.mdx b/ui-kit/react/components/conversations.mdx index e08835f0f..9d8e5d82a 100644 --- a/ui-kit/react/components/conversations.mdx +++ b/ui-kit/react/components/conversations.mdx @@ -77,7 +77,8 @@ description: "Scrollable list of recent one-on-one and group conversations for t "searchView": "ReactNode", "loadingView": "ReactNode", "emptyView": "ReactNode", - "errorView": "ReactNode" + "errorView": "ReactNode", + "options": "(conversation: CometChat.Conversation) => CometChatConversationOption[]" } }, "events": [ @@ -811,6 +812,73 @@ function CustomHeaderConversations() { +#### options + +Replace the context menu / hover actions on each conversation item. + +Default: + + + + + +Customized: + + + + + + + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatConversations, + type CometChatConversationOption, +} from "@cometchat/chat-uikit-react"; + +function CustomOptionsConversations() { + const getOptions = (conversation: CometChat.Conversation): CometChatConversationOption[] => [ + { + id: "delete", + title: "Delete", + onClick: (conv) => { /* delete logic */ }, + }, + { + id: "mute", + title: "Mute Notification", + onClick: (conv) => { /* mute logic */ }, + }, + { + id: "unread", + title: "Mark as Unread", + onClick: (conv) => { /* mark unread logic */ }, + }, + { + id: "block", + title: "Block", + onClick: (conv) => { /* block logic */ }, + }, + ]; + + return ; +} +``` + + +```css +.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { + background: red; +} + +.cometchat-conversations .cometchat-menu-list__sub-menu { + background: transparent; + box-shadow: none; +} +``` + + + ### Compound Composition For full layout control, use sub-components. Omit any sub-component to hide it: @@ -1027,6 +1095,36 @@ Custom sound URL to play when new messages arrive (replaces the built-in sound). --- +### options + +Function that returns context menu options for each conversation item (shown on hover/swipe). + +| | | +| --- | --- | +| Type | `(conversation: CometChat.Conversation) => CometChatConversationOption[]` | +| Default | Default options (delete) | + +```tsx + [ + { + id: "pin", + title: "Pin", + iconURL: pinIcon, + onClick: (conv) => pinConversation(conv), + }, + { + id: "mute", + title: "Mute", + iconURL: muteIcon, + onClick: (conv) => muteConversation(conv), + }, + ]} +/> +``` + +--- + ### onItemClick Callback when a conversation item is clicked. diff --git a/ui-kit/react/components/notification-feed.mdx b/ui-kit/react/components/notification-feed.mdx new file mode 100644 index 000000000..e3dbfa744 --- /dev/null +++ b/ui-kit/react/components/notification-feed.mdx @@ -0,0 +1,635 @@ +--- +title: "Notification Feed" +description: "Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting." +--- + + +```json +{ + "component": "CometChatNotificationFeed", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatNotificationFeed } from \"@cometchat/chat-uikit-react\";", + "description": "Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-react, real-time updates, and automatic engagement reporting.", + "cssRootClass": ".cometchat-notification-feed", + "props": { + "data": { + "title": { "type": "string", "default": "\"Notifications\"" }, + "notificationFeedRequestBuilder": { "type": "NotificationFeedRequestBuilder", "default": "SDK default (20 per page)" }, + "notificationCategoriesRequestBuilder": { "type": "NotificationCategoriesRequestBuilder", "default": "SDK default (50 per page)" } + }, + "callbacks": { + "onItemClick": "(feedItem: NotificationFeedItem) => void", + "onActionClick": "(feedItem: NotificationFeedItem, action: CardAction) => void", + "onError": "(error: CometChat.CometChatException) => void", + "onBackPress": "() => void" + }, + "visibility": { + "showHeader": { "type": "boolean", "default": true }, + "showBackButton": { "type": "boolean", "default": false }, + "showFilterChips": { "type": "boolean", "default": true } + }, + "viewSlots": { + "headerView": "ReactNode", + "emptyView": "ReactNode", + "errorView": "ReactNode", + "loadingView": "ReactNode", + "itemView": "(item: NotificationFeedItem) => ReactNode" + }, + "cards": { + "cardThemeMode": { "type": "\"auto\" | \"light\" | \"dark\"", "default": "\"auto\"" }, + "cardThemeOverride": { "type": "Record", "default": "undefined" } + } + }, + "automaticBehaviors": [ + "Real-time updates via WebSocket listener", + "Delivery reporting on fetch", + "Read reporting on viewport visibility (IntersectionObserver)", + "Unread count polling every 30 seconds", + "Infinite scroll pagination", + "Timestamp grouping (Today, Yesterday, day name, date)", + "Category filter chips with unread badges", + "Mark all read button" + ], + "additionalExports": { + "useNotificationUnreadCount": "Hook for tracking unread count with shared polling" + } +} +``` + + +`CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a card using `@cometchat/cards-react`. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically. + + + + + +--- + +## Where It Fits + +`CometChatNotificationFeed` is a full-screen component. Drop it into a page or route. It manages its own data fetching, state, and real-time listeners — you just handle navigation callbacks. + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsPage() { + return ( + window.history.back()} + onItemClick={(item) => { + // Handle item click (e.g., open detail or deep link) + }} + /> + ); +} +``` + +--- + +## Minimal Render + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsDemo() { + return ( +
+ +
+ ); +} + +export default NotificationsDemo; +``` + +Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in. + +Root CSS class: `.cometchat-notification-feed` + +--- + +## Filtering Feed Items + +Control what loads using custom request builders: + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +function UnreadNotifications() { + return ( + + ); +} +``` + +### Filter Options + +| Builder Method | Description | +| --- | --- | +| `.setLimit(number)` | Items per page (default 20, max 100) | +| `.setReadState(state)` | `"read"`, `"unread"`, or `"all"` | +| `.setCategory(string)` | Filter by category label | +| `.setChannelId(string)` | Filter by channel | +| `.setTags(string[])` | Filter by tags | +| `.setDateFrom(string)` | ISO 8601 date lower bound | +| `.setDateTo(string)` | ISO 8601 date upper bound | + +--- + +## Actions and Events + +### Callback Props + +#### onItemClick + +Fires when a feed item card is clicked. + +```tsx + { + console.log("Item clicked:", item.getId()); + }} +/> +``` + +#### onActionClick + +Fires when an interactive element (button, link) inside a card is clicked. The `action` object contains the action type, parameters, and the element ID that triggered it. + +```tsx + { + const { type, params, elementId } = action; + switch (type) { + case "openUrl": + window.open(params.url as string, "_blank"); + break; + case "chatWithUser": + // Navigate to chat with params.uid + break; + case "chatWithGroup": + // Navigate to group chat with params.guid + break; + } + }} +/> +``` + +#### onError + +Fires when an internal error occurs (network failure, SDK exception). + +```tsx + { + console.error("Feed error:", error.message); + }} +/> +``` + +#### onBackPress + +Fires when the back button in the header is clicked. + +```tsx + window.history.back()} +/> +``` + +### Automatic Behaviors + +The component handles these automatically — no manual setup needed: + +| Behavior | Description | +| --- | --- | +| Real-time updates | New items appear at the top via WebSocket `NotificationFeedListener` | +| Delivery reporting | Items are reported as delivered when fetched | +| Read reporting | Items are reported as read when visible in viewport (IntersectionObserver) | +| Unread count polling | Polls unread count every 30 seconds to update badges | +| Infinite scroll | Fetches next page when scrolling near the bottom | +| Timestamp grouping | Groups items as "Today", "Yesterday", day name, or date | +| Category filtering | Filter chips row with per-category unread badges | +| Mark all read | Header button to mark all notifications as read | + +--- + +## Customization + +### View Props + +```tsx +} + emptyView={} + loadingView={} + errorView={} + itemView={(item) => } +/> +``` + +| Slot | Signature | Replaces | +| --- | --- | --- | +| `headerView` | `ReactNode` | Entire header bar | +| `loadingView` | `ReactNode` | Loading state | +| `emptyView` | `ReactNode` | Empty state | +| `errorView` | `ReactNode` | Error state | +| `itemView` | `(item: NotificationFeedItem) => ReactNode` | Individual feed item rendering | + +### Compound Composition + +For full layout control, use sub-components. Omit any sub-component to hide it: + +```tsx + + + + + +``` + +Available sub-components: + +| Sub-component | Description | Props | Flat API equivalent | +| --- | --- | --- | --- | +| `Root` | Context provider and container | All Root props + `children` | — | +| `Header` | Header bar with title + mark-all-read | `title`, `showBackButton`, `onBackPress`, `children` | `headerView` | +| `FilterChips` | Category filter chips | `children` | — | +| `List` | Scrollable feed list | `itemView` | `itemView` | +| `Item` | Individual feed item | `item`, `cardThemeMode`, `cardThemeOverride` | — | +| `EmptyState` | Empty state | `children` | `emptyView` | +| `ErrorState` | Error state | `children` | `errorView` | +| `LoadingState` | Loading state | `children` | `loadingView` | + +### CSS Styling + +Override design tokens on the component selector: + +```css +.cometchat-notification-feed { + --cometchat-background-color-01: #1a1a2e; + --cometchat-text-color-primary: #ffffff; +} +``` + +### CSS Classes + +| Class | Description | +| --- | --- | +| `.cometchat-notification-feed` | Root container | +| `.cometchat-notification-feed__header` | Header bar | +| `.cometchat-notification-feed__header-title` | Header title text | +| `.cometchat-notification-feed__header-back` | Back button | +| `.cometchat-notification-feed__mark-all-read` | Mark all read button | +| `.cometchat-notification-feed__chips` | Filter chips container | +| `.cometchat-notification-feed__chip` | Individual filter chip | +| `.cometchat-notification-feed__chip--active` | Active filter chip | +| `.cometchat-notification-feed__chip--inactive` | Inactive filter chip | +| `.cometchat-notification-feed__chip-badge` | Chip unread badge | +| `.cometchat-notification-feed__content` | Scrollable content area | +| `.cometchat-notification-feed__item` | Feed item container | +| `.cometchat-notification-feed__item--unread` | Unread feed item | +| `.cometchat-notification-feed__unread-indicator` | Unread dot indicator | +| `.cometchat-notification-feed__item-meta` | Item metadata row (category + time) | +| `.cometchat-notification-feed__card-container` | Card wrapper | +| `.cometchat-notification-feed__loading` | Loading state | +| `.cometchat-notification-feed__empty` | Empty state | +| `.cometchat-notification-feed__error` | Error state | + +--- + +## Props + +All props are optional. + +--- + +### title + +Header title text. + +| | | +| --- | --- | +| Type | `string` | +| Default | `"Notifications"` | + +--- + +### showHeader + +Shows/hides the entire header. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### showBackButton + +Shows/hides the back button in the header. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### showFilterChips + +Shows/hides the category filter chips row. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### notificationFeedRequestBuilder + +Custom request builder for fetching feed items. + +| | | +| --- | --- | +| Type | `CometChat.NotificationFeedRequestBuilder` | +| Default | SDK default (20 per page) | + +--- + +### notificationCategoriesRequestBuilder + +Custom request builder for fetching categories. + +| | | +| --- | --- | +| Type | `CometChat.NotificationCategoriesRequestBuilder` | +| Default | SDK default (50 per page) | + +--- + +### onItemClick + +Callback fired when a feed item card is clicked. + +| | | +| --- | --- | +| Type | `(feedItem: NotificationFeedItem) => void` | +| Default | `undefined` | + +--- + +### onActionClick + +Callback fired when an interactive element inside a card is clicked. + +| | | +| --- | --- | +| Type | `(feedItem: NotificationFeedItem, action: CardAction) => void` | +| Default | `undefined` | + +The `CardAction` object contains: +- `type` — Action type (e.g., `"openUrl"`, `"chatWithUser"`) +- `params` — Action parameters (e.g., `{ url: "..." }`, `{ uid: "..." }`) +- `elementId` — ID of the element that triggered the action + +--- + +### onError + +Callback fired when the component encounters an error. + +| | | +| --- | --- | +| Type | `(error: CometChat.CometChatException) => void` | +| Default | `undefined` | + +--- + +### onBackPress + +Callback fired when the back button is pressed. + +| | | +| --- | --- | +| Type | `() => void` | +| Default | `undefined` | + +--- + +### cardThemeMode + +Theme mode for the card renderer (`@cometchat/cards-react`). + +| | | +| --- | --- | +| Type | `"auto" \| "light" \| "dark"` | +| Default | `"auto"` | + +--- + +### cardThemeOverride + +Custom theme override passed to the card renderer. + +| | | +| --- | --- | +| Type | `Record` | +| Default | `undefined` | + +--- + +### headerView + +Custom component replacing the entire header. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in header with title and mark-all-read button | + +--- + +### loadingView + +Custom component displayed during the initial loading state. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in loading state | + +--- + +### errorView + +Custom component displayed when an error occurs. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in error state with retry button | + +--- + +### emptyView + +Custom component displayed when there are no notifications. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in empty state with illustration | + +--- + +### itemView + +Custom renderer for each feed item. + +| | | +| --- | --- | +| Type | `(item: NotificationFeedItem) => ReactNode` | +| Default | Built-in card renderer | + +--- + +## Additional Exports + +### useNotificationUnreadCount + +A React hook for tracking unread notification count. Uses a shared singleton — multiple components share one polling interval and WebSocket listener. + +```tsx +import { useNotificationUnreadCount } from "@cometchat/chat-uikit-react"; + +function NotificationIcon() { + const { count, refresh, isLoading } = useNotificationUnreadCount(); + + return ( + + ); +} +``` + +#### Options + +| Option | Type | Default | Description | +| --- | --- | --- | --- | +| `category` | string | undefined | Filter count by category | +| `pollingInterval` | number | 30000 | Polling interval in milliseconds | + +#### Return Value + +| Field | Type | Description | +| --- | --- | --- | +| `count` | number | Current unread count | +| `refresh` | `() => Promise` | Manually refresh the count | +| `isLoading` | boolean | Whether the initial fetch is in progress | + +--- + +## Common Patterns + +### Show only unread items + +```tsx + +``` + +### Hide filter chips and header + +```tsx + +``` + +### Embed in a sidebar + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsSidebar() { + return ( +
+ +
+ ); +} +``` + +### Add notification badge to navigation + +```tsx +import { useState } from "react"; +import { + CometChatNotificationFeed, + useNotificationUnreadCount, +} from "@cometchat/chat-uikit-react"; + +function App() { + const [showFeed, setShowFeed] = useState(false); + const { count } = useNotificationUnreadCount(); + + return ( + <> + + {showFeed && ( + setShowFeed(false)} + showBackButton={true} + /> + )} + + ); +} +``` + +--- + +## Next Steps + + + + Overview of how campaigns work end-to-end + + + Low-level SDK APIs for feed items, categories, and engagement + + + Customize colors, fonts, and appearance + + + Browse all prebuilt UI components + + From fe9fedd252a7d06b17059a57c822bef4139c6a3a Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Mon, 15 Jun 2026 17:55:25 +0530 Subject: [PATCH 11/27] add storybook previews for flag-message and notification-feed in v7 --- ui-kit/react/components/flag-message.mdx | 6 +++--- ui-kit/react/components/notification-feed.mdx | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/ui-kit/react/components/flag-message.mdx b/ui-kit/react/components/flag-message.mdx index bfb30c385..ba409ef58 100644 --- a/ui-kit/react/components/flag-message.mdx +++ b/ui-kit/react/components/flag-message.mdx @@ -51,14 +51,14 @@ description: "A dialog for reporting inappropriate messages with reason selectio **Live Preview** — interact with the flag message dialog. -[Open in Storybook ↗](REPLACE_WITH_STORYBOOK_LINK) +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-flag-message-dialog--default) diff --git a/ui-kit/react/components/notification-feed.mdx b/ui-kit/react/components/notification-feed.mdx index e3dbfa744..b3a7cb2f5 100644 --- a/ui-kit/react/components/notification-feed.mdx +++ b/ui-kit/react/components/notification-feed.mdx @@ -63,6 +63,21 @@ description: "Full-screen notification feed component with category filtering, c + +**Live Preview** — interact with the notification feed component. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-notification-feed-cometchat-notification-feed--default) + + + + --- ## Where It Fits From dc1fbb24f31774ed853b82f70ca1de6d9f436756 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Mon, 15 Jun 2026 23:42:18 +0530 Subject: [PATCH 12/27] update docs according to recent v7 react changes --- docs.json | 3 +- ui-kit/react/components-overview.mdx | 5 +- ui-kit/react/components/action-bubble.mdx | 249 ------------------ .../react/components/call-action-bubble.mdx | 180 +++++++++++++ .../react/components/group-action-bubble.mdx | 133 ++++++++++ ui-kit/react/components/message-bubble.mdx | 12 +- ui-kit/react/migration-property-changes.mdx | 28 +- ui-kit/react/plugins/call-action.mdx | 4 +- .../react/plugins/collaborative-document.mdx | 13 +- .../plugins/collaborative-whiteboard.mdx | 13 +- ui-kit/react/plugins/delete.mdx | 4 +- ui-kit/react/plugins/group-action.mdx | 4 +- 12 files changed, 369 insertions(+), 279 deletions(-) delete mode 100644 ui-kit/react/components/action-bubble.mdx create mode 100644 ui-kit/react/components/call-action-bubble.mdx create mode 100644 ui-kit/react/components/group-action-bubble.mdx diff --git a/docs.json b/docs.json index c75012b66..3133488a7 100644 --- a/docs.json +++ b/docs.json @@ -530,7 +530,8 @@ "ui-kit/react/components/message-information", "ui-kit/react/components/reactions", "ui-kit/react/components/reaction-list", - "ui-kit/react/components/action-bubble", + "ui-kit/react/components/call-action-bubble", + "ui-kit/react/components/group-action-bubble", "ui-kit/react/components/flag-message", "ui-kit/react/components/call-buttons", "ui-kit/react/components/incoming-call", diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index d834c8674..d45488006 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -103,7 +103,7 @@ Base components are pure UI building blocks with no SDK integration. They accept Base components use a plain namespace object (compound sub-components) but don't have the callable flat API shorthand. -Examples: Avatar, Button, Date, ContextMenu, SearchBar, ConfirmDialog, Popover, MediaRecorder, MessageBubble, Reactions. +Examples: Avatar, Button, Date, ContextMenu, SearchBar, ConfirmDialog, Popover, MediaRecorder, MessageBubble, Reactions, ActionBubble. ### Bubble Components (Plugins) @@ -138,7 +138,8 @@ All feature components are imported from `@cometchat/chat-uikit-react`. | `CometChatMessageInformation` | Message delivery and read receipt details panel | [Message Information](/ui-kit/react/components/message-information) | | `CometChatReactions` | Reaction chips bar with reactor list popover | [Reactions](/ui-kit/react/components/reactions) | | `CometChatReactionList` | Full reactor list with tabs and pagination | [Reaction List](/ui-kit/react/components/reaction-list) | -| `CometChatActionBubble` | Renders group action and call action system messages | [Action Bubble](/ui-kit/react/components/action-bubble) | +| `CometChatCallActionBubble` | Self-extracting bubble for call status system messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | +| `CometChatGroupActionBubble` | Self-extracting bubble for group membership system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | ### Calling diff --git a/ui-kit/react/components/action-bubble.mdx b/ui-kit/react/components/action-bubble.mdx deleted file mode 100644 index e44910036..000000000 --- a/ui-kit/react/components/action-bubble.mdx +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: "Action Bubble" -description: "A centered pill-shaped system message bubble used for group actions and call status messages." ---- - - -```json -{ - "component": "CometChatActionBubble", - "package": "@cometchat/chat-uikit-react", - "import": "import { CometChatActionBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", - "description": "A centered pill-shaped system message bubble used for group actions and call status messages.", - "cssRootClass": ".cometchat-action-bubble", - "primaryOutput": { - "prop": "messageText", - "type": "string" - }, - "props": { - "data": { - "messageText": { "type": "string", "required": true, "note": "The action text to display (e.g., 'Alice joined the group', 'Missed Call')" }, - "iconClassName": { "type": "string", "default": "undefined", "note": "CSS class name for an optional icon before the text. Icon rendered via CSS mask." }, - "iconErrorColor": { "type": "boolean", "default": "false", "note": "Whether to use error color for icon and text (e.g., missed calls)" }, - "className": { "type": "string", "default": "undefined", "note": "Additional CSS class name for the root element" } - } - }, - "builtInIconClasses": [ - "cometchat-action-bubble__icon--missed-video", - "cometchat-action-bubble__icon--missed-audio", - "cometchat-action-bubble__icon--outgoing-video", - "cometchat-action-bubble__icon--outgoing-audio", - "cometchat-action-bubble__icon--incoming-video", - "cometchat-action-bubble__icon--incoming-audio", - "cometchat-action-bubble__icon--call-ended" - ], - "usedBy": [ - "CometChatGroupActionPlugin (group member join/leave/kick/ban messages)", - "CometChatCallActionPlugin (call status messages)" - ] -} -``` - - -## Overview - -`CometChatActionBubble` renders a centered, pill-shaped system message. It is used internally by the [Group Action Plugin](/ui-kit/react/plugins/group-action) for group membership messages and the [Call Action Plugin](/ui-kit/react/plugins/call-action) for call status messages. - -The component renders nothing if `messageText` is empty or whitespace-only. - -Key characteristics: -- **Centered pill layout** — no left/right alignment, no avatar, no timestamp -- **Optional icon** — rendered via CSS `mask-image`, controlled by a CSS class name (not a URL) -- **Error color state** — for missed calls or error scenarios, colors both icon and text red -- **Accessible** — uses `role="status"` and `aria-label` - ---- - -## Usage - -### Basic (text only) - -```tsx -import { CometChatActionBubble } from "@cometchat/chat-uikit-react"; - -function GroupJoinedMessage() { - return ; -} -``` - -### With Icon (call status) - -```tsx -import { CometChatActionBubble } from "@cometchat/chat-uikit-react"; - -function MissedCallMessage() { - return ( - - ); -} -``` - -### With Custom Icon - -Provide your own CSS class that defines a `mask-image`: - -```tsx - -``` - -```css -.my-custom-icon { - -webkit-mask-image: url('/assets/my-icon.svg'); - mask-image: url('/assets/my-icon.svg'); -} -``` - ---- - -## Props - ---- - -### messageText - -The action text to display. The component renders nothing if this is empty or whitespace-only. - -| | | -| --- | --- | -| Type | `string` | -| Required | Yes | - ---- - -### iconClassName - -Optional CSS class name for the icon displayed before the text. The icon element uses CSS `mask-image` for rendering, which allows color control via `background`. Pass one of the built-in classes or a custom class that defines a `mask-image`. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` (no icon shown) | - -**Built-in icon classes:** - -| Class | Icon | -| --- | --- | -| `cometchat-action-bubble__icon--missed-video` | Missed video call | -| `cometchat-action-bubble__icon--missed-audio` | Missed audio call | -| `cometchat-action-bubble__icon--outgoing-video` | Outgoing video call | -| `cometchat-action-bubble__icon--outgoing-audio` | Outgoing audio call | -| `cometchat-action-bubble__icon--incoming-video` | Incoming video call | -| `cometchat-action-bubble__icon--incoming-audio` | Incoming audio call | -| `cometchat-action-bubble__icon--call-ended` | Call ended | - ---- - -### iconErrorColor - -When `true`, applies error color (red) to both the icon and the text. Used for missed call scenarios. - -| | | -| --- | --- | -| Type | `boolean` | -| Default | `false` | - ---- - -### className - -Additional CSS class name applied to the root element. - -| | | -| --- | --- | -| Type | `string` | -| Default | `undefined` | - ---- - -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Root container | `.cometchat-action-bubble` | -| Icon element | `.cometchat-action-bubble__icon` | -| Icon (error state) | `.cometchat-action-bubble__icon--error` | -| Text element | `.cometchat-action-bubble__text` | -| Text (error state) | `.cometchat-action-bubble__text--error` | - -### CSS Styling - -Override design tokens on the component selector: - -```css -.cometchat-action-bubble { - --cometchat-background-color-02: #2d2d2d; - --cometchat-border-color-default: rgba(255, 255, 255, 0.1); - --cometchat-text-color-secondary: rgba(255, 255, 255, 0.7); -} -``` - -Override a specific icon: - -```css -.cometchat-action-bubble__icon--missed-video { - -webkit-mask-image: url('/my-custom-missed-video.svg'); - mask-image: url('/my-custom-missed-video.svg'); -} -``` - ---- - -## How It Works - -`CometChatActionBubble` is a presentational component — it receives its data as props and renders accordingly. It does not subscribe to events, manage state, or call the SDK. - -It is consumed by two plugins: - -1. **[Group Action Plugin](/ui-kit/react/plugins/group-action)** — passes only `messageText` (no icon). Handles group membership changes (join, leave, kick, ban, scope change). - -2. **[Call Action Plugin](/ui-kit/react/plugins/call-action)** — passes `messageText`, `iconClassName`, and `iconErrorColor`. Handles call status messages (missed, outgoing, incoming, ended). - -You can also use it directly in custom plugins for any centered system message: - -```tsx -import { CometChatActionBubble } from "@cometchat/chat-uikit-react"; - -const MyCustomPlugin = { - id: 'my-custom-action', - messageTypes: ['myType'], - messageCategories: ['action'], - renderBubble(message) { - return ( - - ); - }, - getOptions() { - return []; - }, -}; -``` - ---- - -## Next Steps - - - - System messages for group membership changes - - - System messages for call status - - - Build your own message plugin - - - Customize colors, fonts, and spacing - - diff --git a/ui-kit/react/components/call-action-bubble.mdx b/ui-kit/react/components/call-action-bubble.mdx new file mode 100644 index 000000000..3415dede9 --- /dev/null +++ b/ui-kit/react/components/call-action-bubble.mdx @@ -0,0 +1,180 @@ +--- +title: "Call Action Bubble" +sidebarTitle: "Call Action Bubble" +description: "A self-extracting bubble that renders call status system messages like 'Missed Call', 'Call Ended', and 'Outgoing Call' from an SDK call message." +--- + + +```json +{ + "component": "CometChatCallActionBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatCallActionBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting bubble for call status system messages. Derives the status text, icon, and error color from the SDK call message and the logged-in user.", + "cssRootClass": ".cometchat-action-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The call message (audio/video) in the 'call' category. Drives all extraction." }, + "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" } + } + }, + "rendersThrough": "CometChatActionBubble (base primitive)", + "usedBy": ["CometChatCallActionPlugin"] +} +``` + + +## Overview + +`CometChatCallActionBubble` renders a centered, pill-shaped call status system message — "Missed Call", "Call Ended", "Outgoing Call", etc. It is **self-extracting**: pass the SDK call message and the bubble derives the status text, the status icon, and whether to use the error (missed-call) color itself, reading the logged-in user and locale from hooks. This means it works standalone — no plugin required. + +It is the component the [Call Action Plugin](/ui-kit/react/plugins/call-action) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. + + +**Live Preview** — interact with the call action bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-call-action-bubble--outgoing-calls) + + + + +> The component renders nothing while the logged-in user is unavailable. + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallActionBubble } from "@cometchat/chat-uikit-react"; + +function CallStatusMessage({ message }: { message: CometChat.BaseMessage }) { + return ; +} +``` + +--- + +## What It Derives + +The bubble inspects the call's status and whether it was initiated by the logged-in user to pick the text, icon, and color. + +### Status Text + +**Sent by the logged-in user:** + +| Call status | Text | +| --- | --- | +| `initiated` | Outgoing Call | +| `ongoing` | Answered Call | +| `ended` | Call Ended | +| `cancelled` | Cancelled Call | +| `rejected` | Rejected Call | +| `unanswered` | Unanswered Call | +| `busy` | Missed Call | + +**Received:** + +| Call status | Text | +| --- | --- | +| `initiated` | Incoming Call | +| `ongoing` | Answered Call | +| `ended` | Call Ended | +| `unanswered` / `cancelled` | Missed Call | +| `busy` | Busy Call | +| `rejected` | Rejected Call | + +All text is localized. + +### Status Icon + +| Condition | Icon class | +| --- | --- | +| Missed (received `busy` / `unanswered` / `cancelled`) | `--missed-video` / `--missed-audio` | +| Ended | `--call-ended` | +| Sent by me (other statuses) | `--outgoing-video` / `--outgoing-audio` | +| Received (other statuses) | `--incoming-video` / `--incoming-audio` | + +Missed calls additionally render in the error (red) color. Icons are rendered via CSS `mask-image` — override the mask in your own CSS to use custom icons. + +--- + +## Props + +### message + +The call message (audio/video) in the `call` category. The bubble extracts the status, icon, and text from it. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Required | Yes | + +--- + +### className + +Additional CSS class name applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +The bubble renders through the `CometChatActionBubble` primitive, so it uses the action-bubble selectors. + +| Target | Selector | +| --- | --- | +| Root container | `.cometchat-action-bubble` | +| Icon element | `.cometchat-action-bubble__icon` | +| Icon (error state) | `.cometchat-action-bubble__icon--error` | +| Text element | `.cometchat-action-bubble__text` | +| Text (error state) | `.cometchat-action-bubble__text--error` | +| Missed video icon | `.cometchat-action-bubble__icon--missed-video` | +| Missed audio icon | `.cometchat-action-bubble__icon--missed-audio` | +| Outgoing video icon | `.cometchat-action-bubble__icon--outgoing-video` | +| Outgoing audio icon | `.cometchat-action-bubble__icon--outgoing-audio` | +| Incoming video icon | `.cometchat-action-bubble__icon--incoming-video` | +| Incoming audio icon | `.cometchat-action-bubble__icon--incoming-audio` | +| Call ended icon | `.cometchat-action-bubble__icon--call-ended` | + +Override a specific icon's mask: + +```css +.cometchat-action-bubble__icon--missed-video { + -webkit-mask-image: url('/my-custom-missed-video.svg'); + mask-image: url('/my-custom-missed-video.svg'); +} +``` + +--- + +## Next Steps + + + + How call status messages are resolved and rendered in the message list + + + System messages for group membership changes + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/group-action-bubble.mdx b/ui-kit/react/components/group-action-bubble.mdx new file mode 100644 index 000000000..0826f0acb --- /dev/null +++ b/ui-kit/react/components/group-action-bubble.mdx @@ -0,0 +1,133 @@ +--- +title: "Group Action Bubble" +sidebarTitle: "Group Action Bubble" +description: "A self-extracting bubble that renders group action system messages like 'Alice joined' and 'Bob was kicked' from an SDK group-action message." +--- + + +```json +{ + "component": "CometChatGroupActionBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatGroupActionBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting bubble for group membership system messages. Derives the localized action text from the SDK group-action message.", + "cssRootClass": ".cometchat-action-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The group-action message (member joined/left/added/kicked/banned/scope change). Drives all extraction." }, + "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" } + } + }, + "rendersThrough": "CometChatActionBubble (base primitive)", + "usedBy": ["CometChatGroupActionPlugin"] +} +``` + + +## Overview + +`CometChatGroupActionBubble` renders a centered, pill-shaped group action system message — "Alice joined", "Admin kicked Bob", "Admin made Bob a moderator", etc. It is **self-extracting**: pass the SDK group-action message and the bubble derives the localized action text itself (via the shared action-text utility), reading the locale from hooks. This means it works standalone — no plugin required. + +It is the component the [Group Action Plugin](/ui-kit/react/plugins/group-action) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. Group action bubbles have no icon and no sender attribution. + + +**Live Preview** — interact with the group action bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-group-action-bubble--joined) + + + + +> The component renders nothing if the derived action text is empty. + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatGroupActionBubble } from "@cometchat/chat-uikit-react"; + +function GroupActionMessage({ message }: { message: CometChat.BaseMessage }) { + return ; +} +``` + +--- + +## Supported Actions + +The bubble derives localized text for each group membership change: + +| Action | Example text | +| --- | --- | +| Member joined | "Alice joined" | +| Member left | "Bob left" | +| Member kicked | "Admin kicked Bob" | +| Member banned | "Admin banned Charlie" | +| Member unbanned | "Admin unbanned Charlie" | +| Scope changed | "Admin made Bob a moderator" | +| Member added | "Admin added Dave" | + +--- + +## Props + +### message + +The group-action message (member joined / left / added / kicked / banned / scope change). The bubble extracts the localized action text from it. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Required | Yes | + +--- + +### className + +Additional CSS class name applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +The bubble renders through the `CometChatActionBubble` primitive, so it uses the action-bubble selectors. + +| Target | Selector | +| --- | --- | +| Root container | `.cometchat-action-bubble` | +| Action text | `.cometchat-action-bubble__text` | + +--- + +## Next Steps + + + + How group membership messages are resolved and rendered in the message list + + + System messages for call status + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/message-bubble.mdx b/ui-kit/react/components/message-bubble.mdx index 36f9f36d6..afc1a92d5 100644 --- a/ui-kit/react/components/message-bubble.mdx +++ b/ui-kit/react/components/message-bubble.mdx @@ -23,8 +23,10 @@ description: "A shared wrapper component that renders all message types with com > ```tsx lines -import { CometChatMessageBubble } from "@cometchat/chat-uikit-react"; -import { CometChatTextBubble } from "@cometchat/chat-uikit-react/plugins/core/text"; +import { + CometChatMessageBubble, + CometChatTextBubble, +} from "@cometchat/chat-uikit-react"; function MessageItem({ message, alignment }) { return ( @@ -32,13 +34,17 @@ function MessageItem({ message, alignment }) { message={message} alignment={alignment} contentView={ - + } /> ); } ``` + +Message bubbles are **self-extracting**: each bubble takes the SDK `message` and derives its own content (text, attachments, caption, poll data, call info, action text), reading the logged-in user, theme, and locale from hooks. Pass just `message` to render a bubble standalone — no plugin or pre-extracted props required. `CometChatTextBubble` also accepts an optional `text` override so media bubbles can render captions through it. + + ## Shared Chrome Elements | Element | When Shown | Source | diff --git a/ui-kit/react/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx index e968b0b5a..4275827dd 100644 --- a/ui-kit/react/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -459,24 +459,32 @@ New root-level props: `isOpen`, `onClose`, `layoutMode`, `title`. ## CometChatImageBubble +In v7, image bubbles are **self-extracting**: pass the SDK `message` and the bubble derives its own attachments, caption, and alignment. The pre-extracted data props from v6 are gone. + ### Removed Props | Prop | Replacement | | --- | --- | -| `src` | Replaced by `attachments` array (multi-image support) | -| `isSentByMe` | Replaced by `variant` prop (`"incoming"` / `"outgoing"`) | -| `placeholderImage` | Handled internally | +| `src` | Self-extracted from `message` (multi-image support via the message's attachments) | +| `isSentByMe` | `alignment` (`"left"` / `"right"`), auto-derived from the message sender vs. the logged-in user when omitted | +| `attachments` | Self-extracted from `message` | +| `caption` | Self-extracted from `message` | +| `senderName` | Self-extracted from `message` | -### New Props +### New / Current Props | Prop | Type | Description | | --- | --- | --- | -| `attachments` | `CometChatImageBubbleAttachment[]` | Multi-image support | -| `variant` | `CometChatImageBubbleVariant` | Replaces `isSentByMe` | -| `caption` | `string` | Image caption | -| `message` | `CometChat.MediaMessage` | Source message | -| `senderName` | `string` | Sender name for caption | -| `textFormatters` | `CometChatTextFormatter[]` | Text formatters for caption | +| `message` | `CometChat.MediaMessage` | Source message — drives all extraction (**required**) | +| `alignment` | `"left" \| "right"` | Override incoming/outgoing alignment | +| `textFormatters` | `CometChatTextFormatter[]` | Text formatters for caption rendering | +| `placeholderImage` | `string` | Custom placeholder shown while the image loads | +| `onImageClicked` | `(attachment, index) => void` | Fires when an image is clicked | +| `className` | `string` | Custom root class | + + +This self-extracting pattern applies to all message bubbles in v7 (`CometChatTextBubble`, `CometChatVideoBubble`, `CometChatAudioBubble`, `CometChatFileBubble`, `CometChatPollBubble`, `CometChatStickerBubble`, `CometChatCallBubble`, and the action/collaborative bubbles): each takes the SDK `message` and derives its own data. See [Message Bubble](/ui-kit/react/components/message-bubble). + --- diff --git a/ui-kit/react/plugins/call-action.mdx b/ui-kit/react/plugins/call-action.mdx index 6e2ef3232..fc33eb333 100644 --- a/ui-kit/react/plugins/call-action.mdx +++ b/ui-kit/react/plugins/call-action.mdx @@ -12,7 +12,7 @@ description: "Renders call action system messages like 'Missed Call', 'Call Ende | Message Types | `audio`, `video` | | Message Categories | `call` | | Included by Default | Yes | -| Bubble Component | `CometChatActionBubble` | +| Bubble Component | `CometChatCallActionBubble` (renders the `CometChatActionBubble` primitive) | | Conversation Preview | Video call / Voice call | | Context Menu | None | @@ -22,6 +22,8 @@ description: "Renders call action system messages like 'Missed Call', 'Call Ende The Call Action plugin handles messages of type `audio` and `video` in category `call`. These are system messages generated when calls are initiated, answered, missed, or ended. They render as centered, pill-shaped bubbles with a call status icon. +The plugin's `renderBubble` is a thin forwarder to [`CometChatCallActionBubble`](/ui-kit/react/components/call-action-bubble) — a self-extracting component that derives the call status, icon, and text from the message and the logged-in user, then renders them through the presentational `CometChatActionBubble` base primitive. + --- ## Bubble Rendering diff --git a/ui-kit/react/plugins/collaborative-document.mdx b/ui-kit/react/plugins/collaborative-document.mdx index 754da65b1..8cac836d7 100644 --- a/ui-kit/react/plugins/collaborative-document.mdx +++ b/ui-kit/react/plugins/collaborative-document.mdx @@ -12,7 +12,7 @@ description: "Renders collaborative document messages with a banner and 'Open Do | Message Types | `extension_document` | | Message Categories | `custom` | | Included by Default | Yes | -| Bubble Component | `CometChatCollaborativeBubble` | +| Bubble Component | `CometChatCollaborativeDocumentBubble` | | Conversation Preview | Collaborative Document | | Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | @@ -47,7 +47,7 @@ The Collaborative Document plugin handles messages of type `extension_document` - **Button** — "Open Document" — opens the document URL in a fullscreen popup window - Lazy-loaded — the bubble component is not included in the initial bundle -The document URL is extracted from the message's extension metadata at `@injected.extensions.document.document_url`. +The plugin's `renderBubble` is a thin forwarder to `CometChatCollaborativeDocumentBubble` — a self-extracting component that reads the document URL from the message's extension metadata at `@injected.extensions.document.document_url`. --- @@ -68,7 +68,10 @@ Returns: `Collaborative Document` (localized via `conversation_subtitle_collabor | Target | Selector | | --- | --- | | Bubble root | `.cometchat-collaborative-bubble` | -| Banner image | `.cometchat-collaborative-bubble__banner` | -| Title | `.cometchat-collaborative-bubble__title` | -| Subtitle | `.cometchat-collaborative-bubble__subtitle` | +| Document modifier | `.cometchat-collaborative-bubble--document` | +| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | +| Banner image | `.cometchat-collaborative-bubble__banner-image` | +| Body | `.cometchat-collaborative-bubble__body` | +| Title | `.cometchat-collaborative-bubble__body-content-name` | +| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | | Open button | `.cometchat-collaborative-bubble__button` | diff --git a/ui-kit/react/plugins/collaborative-whiteboard.mdx b/ui-kit/react/plugins/collaborative-whiteboard.mdx index a6a9fe615..44d517d68 100644 --- a/ui-kit/react/plugins/collaborative-whiteboard.mdx +++ b/ui-kit/react/plugins/collaborative-whiteboard.mdx @@ -12,7 +12,7 @@ description: "Renders collaborative whiteboard messages with a banner and 'Open | Message Types | `extension_whiteboard` | | Message Categories | `custom` | | Included by Default | Yes | -| Bubble Component | `CometChatCollaborativeBubble` | +| Bubble Component | `CometChatCollaborativeWhiteboardBubble` | | Conversation Preview | Collaborative Whiteboard | | Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | @@ -47,7 +47,7 @@ The Collaborative Whiteboard plugin handles messages of type `extension_whiteboa - **Button** — "Open Whiteboard" — opens the board URL in a fullscreen popup window - Lazy-loaded — the bubble component is not included in the initial bundle -The whiteboard URL is extracted from the message's extension metadata at `@injected.extensions.whiteboard.board_url`. +The plugin's `renderBubble` is a thin forwarder to `CometChatCollaborativeWhiteboardBubble` — a self-extracting component that reads the board URL from the message's extension metadata at `@injected.extensions.whiteboard.board_url`. --- @@ -68,7 +68,10 @@ Returns: `Collaborative Whiteboard` (localized via `conversation_subtitle_collab | Target | Selector | | --- | --- | | Bubble root | `.cometchat-collaborative-bubble` | -| Banner image | `.cometchat-collaborative-bubble__banner` | -| Title | `.cometchat-collaborative-bubble__title` | -| Subtitle | `.cometchat-collaborative-bubble__subtitle` | +| Whiteboard modifier | `.cometchat-collaborative-bubble--whiteboard` | +| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | +| Banner image | `.cometchat-collaborative-bubble__banner-image` | +| Body | `.cometchat-collaborative-bubble__body` | +| Title | `.cometchat-collaborative-bubble__body-content-name` | +| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | | Open button | `.cometchat-collaborative-bubble__button` | diff --git a/ui-kit/react/plugins/delete.mdx b/ui-kit/react/plugins/delete.mdx index b2c5267d4..870ac326f 100644 --- a/ui-kit/react/plugins/delete.mdx +++ b/ui-kit/react/plugins/delete.mdx @@ -25,11 +25,11 @@ The Delete plugin handles any message that has been deleted (where `getDeletedAt **Live Preview** — interact with the delete message bubble. -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-delete--default) +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/base-elements-delete-bubble--default) + ```tsx import { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; diff --git a/ui-kit/react/components/flag-message.mdx b/ui-kit/react/components/flag-message.mdx index ba409ef58..d61b025b3 100644 --- a/ui-kit/react/components/flag-message.mdx +++ b/ui-kit/react/components/flag-message.mdx @@ -51,11 +51,11 @@ description: "A dialog for reporting inappropriate messages with reason selectio **Live Preview** — interact with the flag message dialog. -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-flag-message-dialog--default) +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-misc-flag-message-dialog--default) diff --git a/ui-kit/react/components/notification-feed.mdx b/ui-kit/react/components/notification-feed.mdx index b3a7cb2f5..79711463c 100644 --- a/ui-kit/react/components/notification-feed.mdx +++ b/ui-kit/react/components/notification-feed.mdx @@ -73,7 +73,7 @@ description: "Full-screen notification feed component with category filtering, c src="https://storybook.cometchat.io/react/iframe.html?id=components-notification-feed-cometchat-notification-feed--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" - style={{height: "700px", border: "1px solid #e0e0e0"}} + style={{height: "800px", border: "1px solid #e0e0e0"}} title="CometChat Notification Feed — Default" allow="clipboard-write" > From 756ad6fb086462210c600f9f4276dda85f310665 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Tue, 16 Jun 2026 14:02:07 +0530 Subject: [PATCH 14/27] create a new dropdown in sidebar to house all the bubbles --- docs.json | 22 ++- ui-kit/react/components-overview.mdx | 6 +- ui-kit/react/components/audio-bubble.mdx | 139 ++++++++++++++ ui-kit/react/components/call-bubble.mdx | 144 +++++++++++++++ .../collaborative-document-bubble.mdx | 150 +++++++++++++++ .../collaborative-whiteboard-bubble.mdx | 150 +++++++++++++++ ui-kit/react/components/delete-bubble.mdx | 118 ++++++++++++ ui-kit/react/components/file-bubble.mdx | 138 ++++++++++++++ ui-kit/react/components/image-bubble.mdx | 166 +++++++++++++++++ ui-kit/react/components/poll-bubble.mdx | 168 +++++++++++++++++ ui-kit/react/components/sticker-bubble.mdx | 122 +++++++++++++ ui-kit/react/components/text-bubble.mdx | 171 ++++++++++++++++++ ui-kit/react/components/video-bubble.mdx | 139 ++++++++++++++ 13 files changed, 1627 insertions(+), 6 deletions(-) create mode 100644 ui-kit/react/components/audio-bubble.mdx create mode 100644 ui-kit/react/components/call-bubble.mdx create mode 100644 ui-kit/react/components/collaborative-document-bubble.mdx create mode 100644 ui-kit/react/components/collaborative-whiteboard-bubble.mdx create mode 100644 ui-kit/react/components/delete-bubble.mdx create mode 100644 ui-kit/react/components/file-bubble.mdx create mode 100644 ui-kit/react/components/image-bubble.mdx create mode 100644 ui-kit/react/components/poll-bubble.mdx create mode 100644 ui-kit/react/components/sticker-bubble.mdx create mode 100644 ui-kit/react/components/text-bubble.mdx create mode 100644 ui-kit/react/components/video-bubble.mdx diff --git a/docs.json b/docs.json index 3133488a7..192ccc97a 100644 --- a/docs.json +++ b/docs.json @@ -525,13 +525,29 @@ "ui-kit/react/components/message-header", "ui-kit/react/components/message-list", "ui-kit/react/components/message-composer", - "ui-kit/react/components/message-bubble", + { + "group": "Message Bubbles", + "pages": [ + "ui-kit/react/components/message-bubble", + "ui-kit/react/components/text-bubble", + "ui-kit/react/components/image-bubble", + "ui-kit/react/components/video-bubble", + "ui-kit/react/components/audio-bubble", + "ui-kit/react/components/file-bubble", + "ui-kit/react/components/poll-bubble", + "ui-kit/react/components/sticker-bubble", + "ui-kit/react/components/collaborative-document-bubble", + "ui-kit/react/components/collaborative-whiteboard-bubble", + "ui-kit/react/components/call-bubble", + "ui-kit/react/components/call-action-bubble", + "ui-kit/react/components/group-action-bubble", + "ui-kit/react/components/delete-bubble" + ] + }, "ui-kit/react/components/thread-header", "ui-kit/react/components/message-information", "ui-kit/react/components/reactions", "ui-kit/react/components/reaction-list", - "ui-kit/react/components/call-action-bubble", - "ui-kit/react/components/group-action-bubble", "ui-kit/react/components/flag-message", "ui-kit/react/components/call-buttons", "ui-kit/react/components/incoming-call", diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index d45488006..c39e27c48 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -105,11 +105,11 @@ Base components use a plain namespace object (compound sub-components) but don't Examples: Avatar, Button, Date, ContextMenu, SearchBar, ConfirmDialog, Popover, MediaRecorder, MessageBubble, Reactions, ActionBubble. -### Bubble Components (Plugins) +### Bubble Components -Message bubble components (TextBubble, ImageBubble, FileBubble, AudioBubble, VideoBubble, StickerBubble, PollBubble, etc.) are part of the **Plugin system**. Each plugin handles a specific message type and provides the bubble component that renders it. +Message bubble components (TextBubble, ImageBubble, VideoBubble, AudioBubble, FileBubble, PollBubble, StickerBubble, CallBubble, the collaborative document/whiteboard bubbles, the call/group action bubbles, and DeleteBubble) are **self-extracting**: each takes the SDK `message` and derives its own content, so it can be rendered standalone. -Bubble components are documented in the [Plugins](/ui-kit/react/plugins/overview) section alongside their parent plugin. See [Plugins Overview](/ui-kit/react/plugins/overview) for how to customize message rendering. +Each has a dedicated page under the **Message Bubbles** group in this section (start with [Message Bubble](/ui-kit/react/components/message-bubble), the wrapper that hosts bubble content). They are also wired into the **Plugin system** — each plugin handles a message type and forwards to its bubble. See [Plugins Overview](/ui-kit/react/plugins/overview) for how to customize message rendering. --- diff --git a/ui-kit/react/components/audio-bubble.mdx b/ui-kit/react/components/audio-bubble.mdx new file mode 100644 index 000000000..f68749379 --- /dev/null +++ b/ui-kit/react/components/audio-bubble.mdx @@ -0,0 +1,139 @@ +--- +title: "Audio Bubble" +sidebarTitle: "Audio Bubble" +description: "A self-extracting bubble that renders an audio attachment with play/pause controls, a progress bar, duration, and download." +--- + + +```json +{ + "component": "CometChatAudioBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatAudioBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting audio bubble. Extracts the audio attachment and caption from a MediaMessage and renders inline playback controls.", + "cssRootClass": ".cometchat-audio-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of audio attachments and caption." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "textFormatters": { "type": "CometChatTextFormatter[]" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatAudioBubble` renders an audio attachment with inline playback. It is **self-extracting**: pass the SDK `message` and the bubble derives the audio attachment(s) and caption itself, reading alignment and localization from hooks, so it works standalone. It shows play/pause controls, a seekable progress bar, elapsed/total time, and a download control. + + +**Live Preview** — interact with the audio bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-audio--default) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatAudioBubble } from "@cometchat/chat-uikit-react"; + +function AudioMessage({ message }: { message: CometChat.MediaMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The audio message. The bubble extracts attachments and caption from it. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.MediaMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### textFormatters + +Text formatters applied to the caption (mentions, URLs). + +| | | +| --- | --- | +| Type | `CometChatTextFormatter[]` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-audio-bubble` | +| Sender / receiver | `.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver` | +| Play button | `.cometchat-audio-bubble__play-button` | +| Pause button | `.cometchat-audio-bubble__pause-button` | +| Progress (foreground) | `.cometchat-audio-bubble__progress-fg` | +| Time | `.cometchat-audio-bubble__time` | +| Download button | `.cometchat-audio-bubble__download-button` | +| Caption | `.cometchat-audio-bubble__caption` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render generic file attachments + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/call-bubble.mdx b/ui-kit/react/components/call-bubble.mdx new file mode 100644 index 000000000..a39d812ee --- /dev/null +++ b/ui-kit/react/components/call-bubble.mdx @@ -0,0 +1,144 @@ +--- +title: "Call Bubble" +sidebarTitle: "Call Bubble" +description: "A self-extracting bubble for direct-call / meeting messages, with a call icon, title, timestamp, and a Join button." +--- + + +```json +{ + "component": "CometChatCallBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatCallBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting call bubble for meeting / direct-call custom messages. Derives the call type, session ID, title, icon, and timestamp from the message.", + "cssRootClass": ".cometchat-call-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The meeting/direct-call message; drives extraction." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "onJoinClick": { "type": "(sessionId: string) => void" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatCallBubble` renders a direct-call / meeting message — a call icon, a title, a timestamp subtitle, and a **Join** button. It is **self-extracting**: pass the SDK `message` and the bubble derives the call type, session ID, title, icon, and timestamp itself, so it works standalone. Use `onJoinClick` to start the call when the user taps Join. + + +**Live Preview** — interact with the call bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-call-bubble--audio-call-outgoing) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallBubble } from "@cometchat/chat-uikit-react"; + +function MeetingMessage({ message }: { message: CometChat.BaseMessage }) { + return ( + { + // Start / join the call session + }} + /> + ); +} +``` + +--- + +## Props + +### message + +The meeting / direct-call custom message. The bubble extracts the call type, session ID, title, icon, and timestamp from it. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### onJoinClick + +Callback when the Join button is clicked. Receives the session ID. + +| | | +| --- | --- | +| Type | `(sessionId: string) => void` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-call-bubble` | +| Incoming / outgoing | `.cometchat-call-bubble-incoming` / `.cometchat-call-bubble-outgoing` | +| Icon wrapper | `.cometchat-call-bubble__icon-wrapper` | +| Title | `.cometchat-call-bubble__body-content-title` | +| Subtitle | `.cometchat-call-bubble__body-content-subtitle` | +| Join button | `.cometchat-call-bubble__button` | + +--- + +## Next Steps + + + + Call status system messages (missed, ended, etc.) + + + Browse call history and re-initiate calls + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/collaborative-document-bubble.mdx b/ui-kit/react/components/collaborative-document-bubble.mdx new file mode 100644 index 000000000..b6b396158 --- /dev/null +++ b/ui-kit/react/components/collaborative-document-bubble.mdx @@ -0,0 +1,150 @@ +--- +title: "Collaborative Document Bubble" +sidebarTitle: "Collaborative Document Bubble" +description: "A self-extracting bubble that renders a collaborative document card with a banner and an 'Open Document' button." +--- + + +```json +{ + "component": "CometChatCollaborativeDocumentBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatCollaborativeDocumentBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting collaborative document bubble. Extracts the document URL from the message metadata and opens it on click.", + "cssRootClass": ".cometchat-collaborative-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "required": true, "note": "Drives extraction of the document URL." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "onButtonClick": { "type": "(url: string) => void", "note": "Defaults to window.open." }, + "disabled": { "type": "boolean", "default": false }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatCollaborativeDocumentBubble` renders a collaborative document card — a banner image, a title, a subtitle, and an "Open Document" button. It is **self-extracting**: pass the SDK `message` and the bubble reads the document URL from the message's extension metadata (`@injected.extensions.document.document_url`), so it works standalone. Clicking the button opens the document (by default in a new window). + + +**Live Preview** — interact with the collaborative document bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-document-message) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCollaborativeDocumentBubble } from "@cometchat/chat-uikit-react"; + +function DocumentMessage({ message }: { message: CometChat.BaseMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The collaborative-document message. The bubble extracts the URL from its metadata. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### onButtonClick + +Click handler for the action button. Receives the document URL. Defaults to `window.open`. + +| | | +| --- | --- | +| Type | `(url: string) => void` | +| Default | `window.open` | + +--- + +### disabled + +Disable the action button (e.g. for a thread header preview). + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-collaborative-bubble` | +| Document modifier | `.cometchat-collaborative-bubble--document` | +| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | +| Banner image | `.cometchat-collaborative-bubble__banner-image` | +| Title | `.cometchat-collaborative-bubble__body-content-name` | +| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | +| Open button | `.cometchat-collaborative-bubble__button` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render collaborative whiteboard messages + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx new file mode 100644 index 000000000..97874d316 --- /dev/null +++ b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx @@ -0,0 +1,150 @@ +--- +title: "Collaborative Whiteboard Bubble" +sidebarTitle: "Collaborative Whiteboard Bubble" +description: "A self-extracting bubble that renders a collaborative whiteboard card with a banner and an 'Open Whiteboard' button." +--- + + +```json +{ + "component": "CometChatCollaborativeWhiteboardBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatCollaborativeWhiteboardBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting collaborative whiteboard bubble. Extracts the board URL from the message metadata and opens it on click.", + "cssRootClass": ".cometchat-collaborative-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "required": true, "note": "Drives extraction of the board URL." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "onButtonClick": { "type": "(url: string) => void", "note": "Defaults to window.open." }, + "disabled": { "type": "boolean", "default": false }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatCollaborativeWhiteboardBubble` renders a collaborative whiteboard card — a banner image, a title, a subtitle, and an "Open Whiteboard" button. It is **self-extracting**: pass the SDK `message` and the bubble reads the board URL from the message's extension metadata (`@injected.extensions.whiteboard.board_url`), so it works standalone. Clicking the button opens the whiteboard (by default in a new window). + + +**Live Preview** — interact with the collaborative whiteboard bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-whiteboard-message) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCollaborativeWhiteboardBubble } from "@cometchat/chat-uikit-react"; + +function WhiteboardMessage({ message }: { message: CometChat.BaseMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The collaborative-whiteboard message. The bubble extracts the URL from its metadata. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### onButtonClick + +Click handler for the action button. Receives the board URL. Defaults to `window.open`. + +| | | +| --- | --- | +| Type | `(url: string) => void` | +| Default | `window.open` | + +--- + +### disabled + +Disable the action button (e.g. for a thread header preview). + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-collaborative-bubble` | +| Whiteboard modifier | `.cometchat-collaborative-bubble--whiteboard` | +| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | +| Banner image | `.cometchat-collaborative-bubble__banner-image` | +| Title | `.cometchat-collaborative-bubble__body-content-name` | +| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | +| Open button | `.cometchat-collaborative-bubble__button` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render collaborative document messages + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/delete-bubble.mdx b/ui-kit/react/components/delete-bubble.mdx new file mode 100644 index 000000000..58f1800ba --- /dev/null +++ b/ui-kit/react/components/delete-bubble.mdx @@ -0,0 +1,118 @@ +--- +title: "Delete Bubble" +sidebarTitle: "Delete Bubble" +description: "A presentational bubble that renders a 'This message was deleted' placeholder." +--- + + +```json +{ + "component": "CometChatDeleteBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatDeleteBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Presentational placeholder bubble for deleted messages.", + "cssRootClass": ".cometchat-delete-bubble", + "props": { + "data": { + "isSentByMe": { "type": "boolean", "note": "Affects sent vs received styling." }, + "text": { "type": "string", "note": "Defaults to localized \"This message was deleted\"." }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatDeleteBubble` renders the placeholder shown in place of a deleted message — italic, muted text reading "This message was deleted". It is a presentational component: pass `isSentByMe` for sent-vs-received styling and an optional `text` override. The [Delete Plugin](/ui-kit/react/plugins/delete) renders it automatically for any message whose `getDeletedAt()` is non-null. + + +**Live Preview** — interact with the delete bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/base-elements-delete-bubble--default) + + + + +--- + +## Usage + +```tsx +import { CometChatDeleteBubble } from "@cometchat/chat-uikit-react"; + +function DeletedMessage() { + return ; +} +``` + +--- + +## Props + +### isSentByMe + +Whether the deleted message was sent by the logged-in user. Affects styling. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `undefined` | + +--- + +### text + +Optional custom text override. Defaults to the localized "This message was deleted". + +| | | +| --- | --- | +| Type | `string` | +| Default | localized default | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-delete-bubble` | +| Sender / receiver | `.cometchat-delete-bubble--sender` / `.cometchat-delete-bubble--receiver` | +| Icon | `.cometchat-delete-bubble__icon` | +| Placeholder text | `.cometchat-delete-bubble__text` | + +--- + +## Next Steps + + + + How deleted messages are resolved and rendered + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/file-bubble.mdx b/ui-kit/react/components/file-bubble.mdx new file mode 100644 index 000000000..15ae54654 --- /dev/null +++ b/ui-kit/react/components/file-bubble.mdx @@ -0,0 +1,138 @@ +--- +title: "File Bubble" +sidebarTitle: "File Bubble" +description: "A self-extracting bubble that renders a file attachment with its name, size, type icon, and a download action." +--- + + +```json +{ + "component": "CometChatFileBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatFileBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting file bubble. Extracts the file attachment (url, name, size, extension) and caption from a MediaMessage.", + "cssRootClass": ".cometchat-file-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of the file attachment and caption." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "textFormatters": { "type": "CometChatTextFormatter[]" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatFileBubble` renders a file attachment. It is **self-extracting**: pass the SDK `message` and the bubble derives the file's URL, name, size, and extension (plus any caption) itself, so it works standalone. It shows a type icon, the file name and size, and a download control. + + +**Live Preview** — interact with the file bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-file--default) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatFileBubble } from "@cometchat/chat-uikit-react"; + +function FileMessage({ message }: { message: CometChat.MediaMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The file message. The bubble extracts the attachment (url, name, size, extension) and caption from it. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.MediaMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### textFormatters + +Text formatters applied to the extracted caption. + +| | | +| --- | --- | +| Type | `CometChatTextFormatter[]` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-file-bubble` | +| Sender / receiver | `.cometchat-file-bubble--sender` / `.cometchat-file-bubble--receiver` | +| Type icon | `.cometchat-file-bubble__icon` | +| File name | `.cometchat-file-bubble__filename` | +| File size | `.cometchat-file-bubble__filesize` | +| Download | `.cometchat-file-bubble__download` | +| Caption | `.cometchat-file-bubble__caption` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render audio attachments + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/image-bubble.mdx b/ui-kit/react/components/image-bubble.mdx new file mode 100644 index 000000000..50bd3db64 --- /dev/null +++ b/ui-kit/react/components/image-bubble.mdx @@ -0,0 +1,166 @@ +--- +title: "Image Bubble" +sidebarTitle: "Image Bubble" +description: "A self-extracting bubble that renders one or more image attachments with grid layouts, a caption, and a fullscreen viewer." +--- + + +```json +{ + "component": "CometChatImageBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatImageBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting image bubble. Extracts image attachments and caption from a MediaMessage; supports single/grid layouts and a fullscreen viewer.", + "cssRootClass": ".cometchat-image-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of attachments and caption." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "textFormatters": { "type": "CometChatTextFormatter[]" }, + "placeholderImage": { "type": "string" }, + "onImageClicked": { "type": "(attachment, index) => void" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatImageBubble` renders the image attachment(s) of a media message. It is **self-extracting**: pass the SDK `message` and the bubble derives its attachments, caption, and alignment itself, so it works standalone. + +It supports multiple images with automatic layouts (single, grid, 2×2, and an overflow tile for extra images) and opens a fullscreen viewer when an image is clicked. + + +**Live Preview** — interact with the image bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-image--default) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatImageBubble } from "@cometchat/chat-uikit-react"; + +function ImageMessage({ message }: { message: CometChat.MediaMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The image message. The bubble extracts its attachments and caption. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.MediaMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### textFormatters + +Text formatters for caption rendering (mentions, URLs). + +| | | +| --- | --- | +| Type | `CometChatTextFormatter[]` | +| Default | `undefined` | + +--- + +### placeholderImage + +Custom placeholder image URL shown while the image loads. Falls back to a default photo icon. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +### onImageClicked + +Fires when an image is clicked (in addition to opening the fullscreen viewer). + +| | | +| --- | --- | +| Type | `(attachment: CometChatImageBubbleAttachment, index: number) => void` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-image-bubble` | +| Incoming / outgoing | `.cometchat-image-bubble--incoming` / `.cometchat-image-bubble--outgoing` | +| Single image | `.cometchat-image-bubble--single` | +| Container | `.cometchat-image-bubble__container` | +| Grid | `.cometchat-image-bubble__grid` | +| Image | `.cometchat-image-bubble__image` | +| Overflow overlay | `.cometchat-image-bubble__overflow-overlay` | +| Placeholder | `.cometchat-image-bubble__placeholder` | +| Caption | `.cometchat-image-bubble__caption` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render video attachments + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/poll-bubble.mdx b/ui-kit/react/components/poll-bubble.mdx new file mode 100644 index 000000000..bdf89abe8 --- /dev/null +++ b/ui-kit/react/components/poll-bubble.mdx @@ -0,0 +1,168 @@ +--- +title: "Poll Bubble" +sidebarTitle: "Poll Bubble" +description: "A self-extracting bubble that renders a poll with its question, selectable options, live vote counts, percentages, and voter avatars." +--- + + +```json +{ + "component": "CometChatPollBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatPollBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting poll bubble. Derives the question, options, vote counts, totals, and the logged-in user's vote from the message metadata.", + "cssRootClass": ".cometchat-poll-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.CustomMessage", "required": true, "note": "Contains poll data in its metadata; drives all extraction." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "disableInteraction": { "type": "boolean", "default": false }, + "onVoteSubmit": { "type": "(event: CometChatPollVoteEvent) => void" }, + "onVoteError": { "type": "(event: CometChatPollVoteErrorEvent) => void" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatPollBubble` renders a poll. It is **self-extracting**: pass the SDK custom `message` and the bubble derives the question, options, per-option vote counts, total votes, and the logged-in user's selected option entirely from the message metadata. Selecting an option submits a vote; the bar fills and counts/avatars update. + + +**Live Preview** — interact with the poll bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--poll-message) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatPollBubble } from "@cometchat/chat-uikit-react"; + +function PollMessage({ message }: { message: CometChat.CustomMessage }) { + return ( + console.log("Voted:", e.optionText)} + /> + ); +} +``` + +--- + +## Props + +### message + +The custom message containing poll data in its metadata. Drives all extraction. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.CustomMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### disableInteraction + +Disable all interaction (e.g. for a thread header preview). + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### onVoteSubmit + +Callback when a vote is submitted successfully. + +| | | +| --- | --- | +| Type | `(event: CometChatPollVoteEvent) => void` | +| Default | `undefined` | + +--- + +### onVoteError + +Callback when a vote submission fails. + +| | | +| --- | --- | +| Type | `(event: CometChatPollVoteErrorEvent) => void` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-poll-bubble` | +| Incoming / outgoing | `.cometchat-poll-bubble--incoming` / `.cometchat-poll-bubble--outgoing` | +| Option | `.cometchat-poll-bubble__option` | +| Option text | `.cometchat-poll-bubble__option-text` | +| Option count | `.cometchat-poll-bubble__option-count` | +| Option progress bar | `.cometchat-poll-bubble__option-progress-bar` | +| Option radio | `.cometchat-poll-bubble__option-radio` | +| Voter avatars | `.cometchat-poll-bubble__option-avatars` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render sticker messages + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/sticker-bubble.mdx b/ui-kit/react/components/sticker-bubble.mdx new file mode 100644 index 000000000..234752037 --- /dev/null +++ b/ui-kit/react/components/sticker-bubble.mdx @@ -0,0 +1,122 @@ +--- +title: "Sticker Bubble" +sidebarTitle: "Sticker Bubble" +description: "A self-extracting bubble that renders a sticker image from a sticker custom message." +--- + + +```json +{ + "component": "CometChatStickerBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatStickerBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting sticker bubble. Extracts the sticker image URL and name from the message metadata.", + "cssRootClass": ".cometchat-sticker-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.CustomMessage", "required": true, "note": "The sticker custom message; drives extraction of the image URL and name." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatStickerBubble` renders a sticker. It is **self-extracting**: pass the SDK custom `message` and the bubble extracts the sticker image URL and name from its metadata, so it works standalone. + + +**Live Preview** — interact with the sticker bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--sticker-message) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatStickerBubble } from "@cometchat/chat-uikit-react"; + +function StickerMessage({ message }: { message: CometChat.CustomMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The sticker custom message. The bubble extracts the image URL and name from its metadata. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.CustomMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-sticker-bubble` | +| Incoming / outgoing | `.cometchat-sticker-bubble--incoming` / `.cometchat-sticker-bubble--outgoing` | +| Sticker image | `.cometchat-sticker-bubble__image` | + +--- + +## Next Steps + + + + Plugin behavior, keyboard, and conversation preview + + + Render poll messages + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/text-bubble.mdx b/ui-kit/react/components/text-bubble.mdx new file mode 100644 index 000000000..ef8ddd289 --- /dev/null +++ b/ui-kit/react/components/text-bubble.mdx @@ -0,0 +1,171 @@ +--- +title: "Text Bubble" +sidebarTitle: "Text Bubble" +description: "A self-extracting bubble that renders text messages with markdown, mentions, clickable URLs, link previews, and read-more truncation." +--- + + +```json +{ + "component": "CometChatTextBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatTextBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting text bubble. Renders message text through the formatter pipeline (markdown, mentions, URLs), with optional read-more truncation.", + "cssRootClass": ".cometchat-text-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.BaseMessage", "note": "When set (and text omitted), the bubble extracts content via message.getText() and configures mention formatting." }, + "text": { "type": "string", "note": "Explicit text override (used for media captions). At least one of text / message should be set." }, + "isSentByMe": { "type": "boolean", "default": true }, + "textFormatters": { "type": "CometChatTextFormatter[]" }, + "disableTruncation": { "type": "boolean", "default": false }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatTextBubble` renders a text message. It is **self-extracting**: pass the SDK `message` and the bubble reads the text via `message.getText()` and configures mention formatting from the message itself, so it works standalone. It also accepts an explicit `text` override, which is how media bubbles render their captions through it. + +Text is run through the formatter pipeline — markdown (`**bold**`, `_italic_`, `~~strike~~`, `` `code` ``, lists, blockquotes), `<@uid:xxx>` mentions resolved to styled chips, and bare URLs converted to clickable links. Long messages are truncated with a "Read more" toggle unless `disableTruncation` is set. + + +**Live Preview** — interact with the text bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-text--default) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatTextBubble } from "@cometchat/chat-uikit-react"; + +function TextMessage({ message }: { message: CometChat.BaseMessage }) { + return ; +} +``` + +Render explicit text (e.g. a caption) instead of extracting from a message: + +```tsx + +``` + +--- + +## Props + +### message + +The message to render. When `text` is omitted, the bubble extracts the content and mention formatting from it. + +| | | +| --- | --- | +| Type | `CometChat.BaseMessage` | +| Default | `undefined` | + +--- + +### text + +Explicit text to display. Overrides `message.getText()` when provided. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +### isSentByMe + +Whether the message was sent by the logged-in user (affects styling). + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### textFormatters + +Text formatters to apply (mentions, URLs, custom syntax). + +| | | +| --- | --- | +| Type | `CometChatTextFormatter[]` | +| Default | `undefined` | + +--- + +### disableTruncation + +Disable the read-more / show-less truncation. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-text-bubble` | +| Incoming / outgoing | `.cometchat-text-bubble--incoming` / `.cometchat-text-bubble--outgoing` | +| Single emoji | `.cometchat-text-bubble--single-emoji` | +| Text content | `.cometchat-text-bubble__text` | +| Mention chip | `.cometchat-text-bubble__mention` | +| Link | `.cometchat-link` | +| Read-more button | `.cometchat-text-bubble__read-more-button` | +| Link preview | `.cometchat-text-bubble__link-preview` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Build custom mention / URL / markdown formatters + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + diff --git a/ui-kit/react/components/video-bubble.mdx b/ui-kit/react/components/video-bubble.mdx new file mode 100644 index 000000000..7db441a29 --- /dev/null +++ b/ui-kit/react/components/video-bubble.mdx @@ -0,0 +1,139 @@ +--- +title: "Video Bubble" +sidebarTitle: "Video Bubble" +description: "A self-extracting bubble that renders video attachments with thumbnails, a play overlay, duration badge, and caption." +--- + + +```json +{ + "component": "CometChatVideoBubble", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatVideoBubble } from \"@cometchat/chat-uikit-react\";", + "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", + "description": "Self-extracting video bubble. Extracts video attachments, thumbnails, and caption from a MediaMessage.", + "cssRootClass": ".cometchat-video-bubble", + "selfExtracting": true, + "props": { + "data": { + "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of video attachments, thumbnails, and caption." }, + "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." }, + "textFormatters": { "type": "CometChatTextFormatter[]" }, + "className": { "type": "string" } + } + } +} +``` + + +## Overview + +`CometChatVideoBubble` renders the video attachment(s) of a media message. It is **self-extracting**: pass the SDK `message` and the bubble derives the video URLs, thumbnails, caption, and alignment itself, so it works standalone. A single video shows its thumbnail as a poster with a play overlay; multiple videos lay out in a grid with an overflow tile. + + +**Live Preview** — interact with the video bubble. + +[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-video--default) + + + + +--- + +## Usage + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatVideoBubble } from "@cometchat/chat-uikit-react"; + +function VideoMessage({ message }: { message: CometChat.MediaMessage }) { + return ; +} +``` + +--- + +## Props + +### message + +The media message. Drives extraction of video attachments, thumbnails, caption, and sender name. **Required.** + +| | | +| --- | --- | +| Type | `CometChat.MediaMessage` | +| Required | Yes | + +--- + +### alignment + +Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user. + +| | | +| --- | --- | +| Type | `"left" \| "right"` | +| Default | derived | + +--- + +### textFormatters + +Text formatters for caption rendering (mentions, URLs). + +| | | +| --- | --- | +| Type | `CometChatTextFormatter[]` | +| Default | `undefined` | + +--- + +### className + +Additional CSS class applied to the root element. + +| | | +| --- | --- | +| Type | `string` | +| Default | `undefined` | + +--- + +## CSS Selectors + +| Target | Selector | +| --- | --- | +| Root | `.cometchat-video-bubble` | +| Incoming / outgoing | `.cometchat-video-bubble--incoming` / `.cometchat-video-bubble--outgoing` | +| Single video | `.cometchat-video-bubble--single` | +| Container | `.cometchat-video-bubble__container` | +| Grid | `.cometchat-video-bubble__grid` | +| Play overlay | `.cometchat-video-bubble__play-overlay` | +| Duration badge | `.cometchat-video-bubble__duration-badge` | +| Caption | `.cometchat-video-bubble__caption` | + +--- + +## Next Steps + + + + Plugin behavior, context menu, and conversation preview + + + Render image attachments + + + The wrapper that hosts bubble content + + + Customize colors, fonts, and spacing + + From 11d77484dff9eecbb9901acc874a7049e923c8bf Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Tue, 16 Jun 2026 15:32:50 +0530 Subject: [PATCH 15/27] docs(ui-kit/react): reorganize components overview and add message bubbles section - Clarify flat API description to include both feature and base components - Simplify base components explanation and consolidate into single paragraph - Remove outdated bubble components subsection and create dedicated Message Bubbles table - Add comprehensive Message Bubbles section with all bubble types, message types, and purposes - Replace CallActionBubble and GroupActionBubble rows with updated entries and add CallBubble - Add FlagMessageDialog to feature components table - Reorganize base components list alphabetically and add missing entries (ActionBubble, ActionSheet, DeleteBubble) - Rename flag-message.mdx to flag-message-dialog.mdx for consistency with component naming - Update migration guides to reflect v7 component changes and API updates --- ui-kit/react/components-overview.mdx | 42 ++++++++++++------- ...ag-message.mdx => flag-message-dialog.mdx} | 4 +- ui-kit/react/migration-overview.mdx | 18 ++++++++ ui-kit/react/migration-property-changes.mdx | 2 +- 4 files changed, 47 insertions(+), 19 deletions(-) rename ui-kit/react/components/{flag-message.mdx => flag-message-dialog.mdx} (99%) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index c39e27c48..633136fee 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -51,7 +51,7 @@ function ChatApp() { ## Flat API -Every feature component can be rendered in a single line. Pass props directly, the component handles its own layout internally. +All components — both feature and base — support the flat API. Render them in a single line with props, and they handle their layout internally. ```tsx @@ -99,17 +99,7 @@ Feature components: ### Base Components -Base components are pure UI building blocks with no SDK integration. They accept props and render UI — no network calls, no real-time events. Feature components compose these internally. - -Base components use a plain namespace object (compound sub-components) but don't have the callable flat API shorthand. - -Examples: Avatar, Button, Date, ContextMenu, SearchBar, ConfirmDialog, Popover, MediaRecorder, MessageBubble, Reactions, ActionBubble. - -### Bubble Components - -Message bubble components (TextBubble, ImageBubble, VideoBubble, AudioBubble, FileBubble, PollBubble, StickerBubble, CallBubble, the collaborative document/whiteboard bubbles, the call/group action bubbles, and DeleteBubble) are **self-extracting**: each takes the SDK `message` and derives its own content, so it can be rendered standalone. - -Each has a dedicated page under the **Message Bubbles** group in this section (start with [Message Bubble](/ui-kit/react/components/message-bubble), the wrapper that hosts bubble content). They are also wired into the **Plugin system** — each plugin handles a message type and forwards to its bubble. See [Plugins Overview](/ui-kit/react/plugins/overview) for how to customize message rendering. +Base components are pure UI building blocks with no SDK integration. They accept props and render UI — no network calls, no real-time events. Feature components compose these internally. Base components support both flat API and compound composition. --- @@ -138,8 +128,26 @@ All feature components are imported from `@cometchat/chat-uikit-react`. | `CometChatMessageInformation` | Message delivery and read receipt details panel | [Message Information](/ui-kit/react/components/message-information) | | `CometChatReactions` | Reaction chips bar with reactor list popover | [Reactions](/ui-kit/react/components/reactions) | | `CometChatReactionList` | Full reactor list with tabs and pagination | [Reaction List](/ui-kit/react/components/reaction-list) | -| `CometChatCallActionBubble` | Self-extracting bubble for call status system messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | -| `CometChatGroupActionBubble` | Self-extracting bubble for group membership system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | +| `CometChatFlagMessageDialog` | Modal dialog for reporting/flagging messages with reason selection | [Flag Message Dialog](/ui-kit/react/components/flag-message-dialog) | + +### Message Bubbles + +Message bubble components accept a `message` object and self-extract all required data (text, attachments, metadata, sender info). Unlike v6 where bubbles were purely presentational, v7 bubbles are self-contained — they derive their rendering state directly from the SDK message. + +| Component | Message Type | Purpose | Page | +| --- | --- | --- | --- | +| `CometChatTextBubble` | `text` | Formatted text with mentions, URLs, markdown, and link previews | [Text Bubble](/ui-kit/react/components/text-bubble) | +| `CometChatImageBubble` | `image` | Image grid with captions and click-to-fullscreen | [Image Bubble](/ui-kit/react/components/image-bubble) | +| `CometChatVideoBubble` | `video` | Video player with thumbnail and caption | [Video Bubble](/ui-kit/react/components/video-bubble) | +| `CometChatAudioBubble` | `audio` | Waveform audio player with caption | [Audio Bubble](/ui-kit/react/components/audio-bubble) | +| `CometChatFileBubble` | `file` | File card with name, size, and download button | [File Bubble](/ui-kit/react/components/file-bubble) | +| `CometChatPollBubble` | `extension_poll` | Poll with options, voting, and results | [Poll Bubble](/ui-kit/react/components/poll-bubble) | +| `CometChatStickerBubble` | `extension_sticker` | Sticker image display | [Sticker Bubble](/ui-kit/react/components/sticker-bubble) | +| `CometChatCollaborativeDocumentBubble` | `extension_document` | Document collaboration link with join button | [Collaborative Document Bubble](/ui-kit/react/components/collaborative-document-bubble) | +| `CometChatCollaborativeWhiteboardBubble` | `extension_whiteboard` | Whiteboard collaboration link with join button | [Collaborative Whiteboard Bubble](/ui-kit/react/components/collaborative-whiteboard-bubble) | +| `CometChatGroupActionBubble` | `groupMember` | Group membership system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | +| `CometChatCallActionBubble` | `audio`, `video` (call category) | Call status system messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | +| `CometChatCallBubble` | `meeting` (custom) | Direct call / meeting invitation bubble | [Call Bubble](/ui-kit/react/components/call-bubble) | ### Calling @@ -165,15 +173,18 @@ Base components are imported from `@cometchat/chat-uikit-react`. They don't have | Component | Purpose | | --- | --- | +| `CometChatActionBubble` | Reusable pill-shaped system message bubble (used by GroupActionBubble and CallActionBubble) | +| `CometChatActionSheet` | Bottom sheet with grouped action items | | `CometChatAvatar` | User/group avatar with image and initials fallback | | `CometChatButton` | Styled button with icon, text, loading, and variant support | -| `CometChatCheckbox` | Checkbox input with label and controlled/uncontrolled support | | `CometChatChangeScope` | Group member role/scope change selector | +| `CometChatCheckbox` | Checkbox input with label and controlled/uncontrolled support | | `CometChatConfirmDialog` | Confirmation dialog with customizable message and buttons | | `CometChatContextMenu` | Options menu with top-row icons and overflow dropdown | | `CometChatConversationStarter` | AI-generated conversation starter suggestions as clickable pills | | `CometChatConversationSummary` | AI-generated conversation summary display | | `CometChatDate` | Formatted date/time display with temporal bucketing | +| `CometChatDeleteBubble` | "This message was deleted" placeholder bubble | | `CometChatDownloadButton` | Download button for file and media attachments | | `CometChatEmojiKeyboard` | Emoji picker with category tabs and search | | `CometChatErrorBoundary` | Error isolation wrapper with fallback UI and retry | @@ -187,7 +198,6 @@ Base components are imported from `@cometchat/chat-uikit-react`. They don't have | `CometChatPopover` | Positioning utility component for popovers and dropdowns | | `CometChatRadioButton` | Radio button input with label support | | `CometChatSearchBar` | Search input with clear button and keyboard handling | -| `CometChatActionSheet` | Bottom sheet with grouped action items | | `CometChatSmartReplies` | AI-powered reply suggestions as clickable chips | | `CometChatThreadView` | Inline thread reply indicator with reply count and unread dot | | `CometChatToast` | Toast notification for transient feedback messages | diff --git a/ui-kit/react/components/flag-message.mdx b/ui-kit/react/components/flag-message-dialog.mdx similarity index 99% rename from ui-kit/react/components/flag-message.mdx rename to ui-kit/react/components/flag-message-dialog.mdx index d61b025b3..bbfa97030 100644 --- a/ui-kit/react/components/flag-message.mdx +++ b/ui-kit/react/components/flag-message-dialog.mdx @@ -1,6 +1,6 @@ --- -title: "Flag Message" -sidebarTitle: "Flag Message" +title: "Flag Message Dialog" +sidebarTitle: "Flag Message Dialog" description: "A dialog for reporting inappropriate messages with reason selection, an optional remark, and submission handling." --- diff --git a/ui-kit/react/migration-overview.mdx b/ui-kit/react/migration-overview.mdx index 16233a6b8..3877fbea1 100644 --- a/ui-kit/react/migration-overview.mdx +++ b/ui-kit/react/migration-overview.mdx @@ -29,6 +29,7 @@ v7 is a ground-up rewrite that replaces global singletons with React-native patt | Extensibility | `DataSource` / `DataSourceDecorator` / `ChatConfigurator` | Plugin system (`CometChatMessagePlugin` interface) | | Events | Multiple RxJS Subject classes | Unified event bus (`useCometChatEvents` hook) | | Component API | Flat props only | Compound components (flat API still works) | +| Message Bubbles | Presentational — receive pre-extracted props from parent | Self-extracting — accept SDK `message` and derive data internally | | Theming | CSS variables + manual `data-theme` setup | CSS variables + `theme` prop on provider (same tokens) | | Dependencies | `rxjs` required | No `rxjs` dependency | @@ -208,6 +209,22 @@ v7 components support both flat API (same as v6) and compound composition: The flat API is fully backward-compatible. Compound composition is optional for advanced customization. +### Presentational Bubbles → Self-Extracting Bubbles + +In v6, message bubble components (TextBubble, ImageBubble, etc.) were **presentational** — they received pre-extracted props like `src`, `text`, `isSentByMe` from the parent. The DataSource/plugin layer did the extraction and passed data down. + +In v7, bubble components are **self-extracting** — they accept the SDK `message` object as their primary input and derive rendering state internally (attachments, text, sender info, alignment). Some bubbles retain optional override props (e.g., `text` and `isSentByMe` on `CometChatTextBubble`), but the standard usage is to pass only `message`. + +```tsx title="v6 — presentational (parent extracts data)" + +``` + +```tsx title="v7 — self-extracting (bubble handles it)" + +``` + +This applies to all message bubbles: `CometChatTextBubble`, `CometChatImageBubble`, `CometChatVideoBubble`, `CometChatAudioBubble`, `CometChatFileBubble`, `CometChatPollBubble`, `CometChatStickerBubble`, `CometChatCallBubble`, `CometChatCollaborativeDocumentBubble`, `CometChatCollaborativeWhiteboardBubble`, `CometChatGroupActionBubble`, and `CometChatCallActionBubble`. + --- ## Removed Concepts @@ -223,6 +240,7 @@ The flat API is fully backward-compatible. Compound composition is optional for | `CometChatMessageTemplate` | Plugin `renderBubble()` method | | `*Configuration` objects | Direct props on compound sub-components | | `MessagesDataSource.getAttachmentOptions()` | Composer handles attachments directly | +| Presentational bubble props (`src`, `text`, etc.) as required inputs | Bubbles now accept `message` as the primary prop and self-extract data — optional overrides like `text` or `isSentByMe` still exist on some bubbles | --- diff --git a/ui-kit/react/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx index 4275827dd..c988731f3 100644 --- a/ui-kit/react/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -296,7 +296,7 @@ These 10 patterns apply across all components. You do not need to look them up p | `hideReceipts` | `boolean` | Hide delivery receipts | | `messageSentAtDateTimeFormat` | `CometChatDateFormatConfig` | Timestamp format | | `onAvatarClick` | `(user) => void` | Avatar click callback | -| `onThreadClick` | `(message) => void` | Thread click callback | +| `onThreadRepliesClick` | `(message) => void` | Thread click callback | | `onOptionClick` | `(option, message) => void` | Option click callback | | `onReactionChipClick` | `(messageId, emoji) => void` | Reaction chip click | | `isSelected` | `boolean` | Selection state | From f013aa0703fd8783be2fc53ad5a3d43e46cc6644 Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Tue, 16 Jun 2026 15:55:29 +0530 Subject: [PATCH 16/27] docs(ui-kit/react): specify v6 version in package installation - Update npm install command to use @cometchat/chat-uikit-react@6 in astro-integration.mdx - Update npm install command to use @cometchat/chat-uikit-react@6 in next-js-integration.mdx - Update npm install command to use @cometchat/chat-uikit-react@6 in react-js-integration.mdx - Update npm install command to use @cometchat/chat-uikit-react@6 in react-router-integration.mdx - Ensures users install the correct v6 version when following integration guides --- ui-kit/react/v6/astro-integration.mdx | 2 +- ui-kit/react/v6/next-js-integration.mdx | 2 +- ui-kit/react/v6/react-js-integration.mdx | 2 +- ui-kit/react/v6/react-router-integration.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/react/v6/astro-integration.mdx b/ui-kit/react/v6/astro-integration.mdx index 2639b4da0..b27e7a677 100644 --- a/ui-kit/react/v6/astro-integration.mdx +++ b/ui-kit/react/v6/astro-integration.mdx @@ -121,7 +121,7 @@ Then install the UI Kit: ```bash lines -npm install @cometchat/chat-uikit-react +npm install @cometchat/chat-uikit-react@6 ``` diff --git a/ui-kit/react/v6/next-js-integration.mdx b/ui-kit/react/v6/next-js-integration.mdx index 0cb7c373f..8ed0cdeef 100644 --- a/ui-kit/react/v6/next-js-integration.mdx +++ b/ui-kit/react/v6/next-js-integration.mdx @@ -90,7 +90,7 @@ cd my-app ```bash lines -npm install @cometchat/chat-uikit-react +npm install @cometchat/chat-uikit-react@6 ``` diff --git a/ui-kit/react/v6/react-js-integration.mdx b/ui-kit/react/v6/react-js-integration.mdx index 82e0eb866..6779546e6 100644 --- a/ui-kit/react/v6/react-js-integration.mdx +++ b/ui-kit/react/v6/react-js-integration.mdx @@ -95,7 +95,7 @@ cd my-app ```bash lines -npm install @cometchat/chat-uikit-react +npm install @cometchat/chat-uikit-react@6 ``` diff --git a/ui-kit/react/v6/react-router-integration.mdx b/ui-kit/react/v6/react-router-integration.mdx index 6214ebe20..b7d80b51c 100644 --- a/ui-kit/react/v6/react-router-integration.mdx +++ b/ui-kit/react/v6/react-router-integration.mdx @@ -86,7 +86,7 @@ cd my-app ```bash lines -npm install @cometchat/chat-uikit-react +npm install @cometchat/chat-uikit-react@6 ``` From cf76085b8b09c5760e489d11c7ff5ba9caa3625b Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Tue, 16 Jun 2026 16:15:12 +0530 Subject: [PATCH 17/27] docs(ui-kit/react): update flag-message component reference to flag-message-dialog --- docs.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs.json b/docs.json index 192ccc97a..d8fa2f72f 100644 --- a/docs.json +++ b/docs.json @@ -548,7 +548,7 @@ "ui-kit/react/components/message-information", "ui-kit/react/components/reactions", "ui-kit/react/components/reaction-list", - "ui-kit/react/components/flag-message", + "ui-kit/react/components/flag-message-dialog", "ui-kit/react/components/call-buttons", "ui-kit/react/components/incoming-call", "ui-kit/react/components/outgoing-call", From b770bf6afe3b0942b33e10266194f25539eaf834 Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Tue, 16 Jun 2026 18:16:08 +0530 Subject: [PATCH 18/27] docs(ui-kit/react): remove bubble rendering and CSS selector sections from plugin documentation - Remove "Bubble Rendering" section from ai, audio, call-action, collaborative-document, collaborative-whiteboard, delete, file, group-action, image, polls, stickers, text, and video plugins - Remove "CSS Selectors" reference tables from all affected plugin documentation files - Consolidate plugin overview to reference component documentation directly instead of duplicating bubble implementation details - Simplify plugin docs to focus on plugin responsibilities rather than component-level rendering details - Bubble documentation is now maintained centrally in component documentation, reducing duplication across plugin guides --- ui-kit/react/plugins/ai.mdx | 23 -------- ui-kit/react/plugins/audio.mdx | 36 +---------- ui-kit/react/plugins/call-action.mdx | 59 +------------------ .../react/plugins/collaborative-document.mdx | 41 +------------ .../plugins/collaborative-whiteboard.mdx | 41 +------------ ui-kit/react/plugins/delete.mdx | 37 +----------- ui-kit/react/plugins/file.mdx | 38 +----------- ui-kit/react/plugins/group-action.mdx | 29 +-------- ui-kit/react/plugins/image.mdx | 36 +---------- ui-kit/react/plugins/overview.mdx | 4 +- ui-kit/react/plugins/polls.mdx | 45 +------------- ui-kit/react/plugins/stickers.mdx | 35 +---------- ui-kit/react/plugins/text.mdx | 38 +----------- ui-kit/react/plugins/video.mdx | 36 +---------- 14 files changed, 15 insertions(+), 483 deletions(-) diff --git a/ui-kit/react/plugins/ai.mdx b/ui-kit/react/plugins/ai.mdx index 4c3aaf582..2f0e96f71 100644 --- a/ui-kit/react/plugins/ai.mdx +++ b/ui-kit/react/plugins/ai.mdx @@ -63,21 +63,6 @@ import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; --- -## Bubble Rendering - -### Assistant Bubble -Renders the AI response with full markdown support (headings, lists, code blocks, bold, italic, links). Uses `CometChatAIAssistantBubble`. - -### Streaming Bubble -Shows a real-time streaming animation while the AI is generating. Connects to the streaming service keyed by `chatId`. Uses `CometChatStreamMessageBubble`. - -### Tool Call Bubbles -Display tool invocation details as collapsible JSON blocks. Useful for debugging AI agent workflows. - -All bubble components are **lazy-loaded** — they're not included in the initial bundle until an AI message is actually rendered. - ---- - ## Context Menu Options None — AI messages are system-generated and have no context menu options. @@ -107,11 +92,3 @@ onMouseEnter={() => preloadAIAssistantChat()} --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Assistant bubble | `.cometchat-ai-assistant-bubble` | -| Streaming bubble | `.cometchat-stream-message-bubble` | -| Tool argument bubble | `.cometchat-tool-call-argument-bubble` | -| Tool result bubble | `.cometchat-tool-call-result-bubble` | diff --git a/ui-kit/react/plugins/audio.mdx b/ui-kit/react/plugins/audio.mdx index 35492f24f..e4b5a3340 100644 --- a/ui-kit/react/plugins/audio.mdx +++ b/ui-kit/react/plugins/audio.mdx @@ -20,33 +20,9 @@ description: "Renders audio messages with waveform visualization, playback contr ## Overview -The Audio plugin handles messages of type `audio` in category `message`. It renders an audio player with waveform visualization (via WaveSurfer.js), play/pause controls, duration display, and a download button. +The Audio plugin handles messages of type `audio` in category `message`. It renders an audio player with waveform visualization (via WaveSurfer.js), play/pause controls, duration display, and a download button. The plugin routes audio messages to [`CometChatAudioBubble`](/ui-kit/react/components/audio-bubble). - -**Live Preview** — interact with the audio message bubble. -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-audio--default) - - - - ---- - -## Bubble Rendering - -- **Waveform player** — WaveSurfer.js-powered waveform visualization with play/pause toggle -- **Duration** — displays total duration and current playback position -- **Download button** — download with progress indicator -- **Multiple audio files** — expand/collapse list -- **Caption** — rendered below the player, formatted with text formatters -- **Pending state** — renders from local blob URL while uploading --- @@ -62,13 +38,3 @@ Returns: `Audio` (localized via `conversation_subtitle_audio` key) --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-audio-bubble` | -| Waveform container | `.cometchat-audio-bubble__waveform` | -| Play/pause button | `.cometchat-audio-bubble__play-button` | -| Duration text | `.cometchat-audio-bubble__duration` | -| Download button | `.cometchat-audio-bubble__download` | -| Caption | `.cometchat-audio-bubble__caption` | diff --git a/ui-kit/react/plugins/call-action.mdx b/ui-kit/react/plugins/call-action.mdx index fc33eb333..d9b881838 100644 --- a/ui-kit/react/plugins/call-action.mdx +++ b/ui-kit/react/plugins/call-action.mdx @@ -22,39 +22,7 @@ description: "Renders call action system messages like 'Missed Call', 'Call Ende The Call Action plugin handles messages of type `audio` and `video` in category `call`. These are system messages generated when calls are initiated, answered, missed, or ended. They render as centered, pill-shaped bubbles with a call status icon. -The plugin's `renderBubble` is a thin forwarder to [`CometChatCallActionBubble`](/ui-kit/react/components/call-action-bubble) — a self-extracting component that derives the call status, icon, and text from the message and the logged-in user, then renders them through the presentational `CometChatActionBubble` base primitive. - ---- - -## Bubble Rendering - -- **Centered pill** — same style as action bubbles -- **Status icon** — colored icon indicating call direction and outcome -- **Status text** — localized description (e.g., "Missed Call", "Outgoing Call", "Call Ended") - -### Call Status Icons - -| Status | Sent by me | Received | Icon | -| --- | --- | --- | --- | -| Initiated | Outgoing call icon | Incoming call icon | Phone/video arrow | -| Ended | Call end icon | Call end icon | Red phone | -| Missed/Cancelled/Unanswered | Unanswered icon | Missed call icon (red) | Red phone with X | -| Ongoing/Answered | Outgoing icon | Incoming icon | Green phone | - -### Status Text Mapping - -**Sent by me:** -- `initiated` → "Outgoing Call" -- `cancelled` → "Cancelled Call" -- `rejected` → "Rejected Call" -- `ended` → "Call Ended" -- `unanswered` → "Unanswered Call" - -**Received:** -- `initiated` → "Incoming Call" -- `ended` → "Call Ended" -- `unanswered`/`cancelled` → "Missed Call" -- `busy` → "Busy Call" +The plugin routes call messages to [`CometChatCallActionBubble`](/ui-kit/react/components/call-action-bubble). --- @@ -70,28 +38,3 @@ Returns: `Video call` or `Voice call` based on the call type (localized). --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-action-bubble` | -| Icon | `.cometchat-action-bubble__icon` | -| Icon (error) | `.cometchat-action-bubble__icon--error` | -| Text | `.cometchat-action-bubble__text` | -| Text (error) | `.cometchat-action-bubble__text--error` | -| Missed video icon | `.cometchat-action-bubble__icon--missed-video` | -| Missed audio icon | `.cometchat-action-bubble__icon--missed-audio` | -| Outgoing video icon | `.cometchat-action-bubble__icon--outgoing-video` | -| Outgoing audio icon | `.cometchat-action-bubble__icon--outgoing-audio` | -| Incoming video icon | `.cometchat-action-bubble__icon--incoming-video` | -| Incoming audio icon | `.cometchat-action-bubble__icon--incoming-audio` | -| Call ended icon | `.cometchat-action-bubble__icon--call-ended` | - -Icons are rendered via CSS `mask-image`. Override the mask in your own CSS to use custom icons: - -```css -.cometchat-action-bubble__icon--missed-video { - -webkit-mask-image: url('/my-custom-missed-video-icon.svg'); - mask-image: url('/my-custom-missed-video-icon.svg'); -} -``` diff --git a/ui-kit/react/plugins/collaborative-document.mdx b/ui-kit/react/plugins/collaborative-document.mdx index 8cac836d7..2a5d7f179 100644 --- a/ui-kit/react/plugins/collaborative-document.mdx +++ b/ui-kit/react/plugins/collaborative-document.mdx @@ -20,34 +20,7 @@ description: "Renders collaborative document messages with a banner and 'Open Do ## Overview -The Collaborative Document plugin handles messages of type `extension_document` in category `custom`. It renders a card with a document banner image, title, subtitle, and an "Open Document" button that launches the collaborative editor in a new window. - - -**Live Preview** — interact with the collaborative document bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-document-message) - - - - ---- - -## Bubble Rendering - -- **Banner image** — themed (light/dark) document illustration -- **Title** — "Collaborative Document" -- **Subtitle** — "Open document to edit content together" -- **Button** — "Open Document" — opens the document URL in a fullscreen popup window -- Lazy-loaded — the bubble component is not included in the initial bundle - -The plugin's `renderBubble` is a thin forwarder to `CometChatCollaborativeDocumentBubble` — a self-extracting component that reads the document URL from the message's extension metadata at `@injected.extensions.document.document_url`. +The Collaborative Document plugin handles messages of type `extension_document` in category `custom`. It renders a card with a document banner image, title, subtitle, and an "Open Document" button that launches the collaborative editor in a new window. The plugin routes document messages to [`CometChatCollaborativeDocumentBubble`](/ui-kit/react/components/collaborative-document-bubble). --- @@ -63,15 +36,3 @@ Returns: `Collaborative Document` (localized via `conversation_subtitle_collabor --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-collaborative-bubble` | -| Document modifier | `.cometchat-collaborative-bubble--document` | -| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | -| Banner image | `.cometchat-collaborative-bubble__banner-image` | -| Body | `.cometchat-collaborative-bubble__body` | -| Title | `.cometchat-collaborative-bubble__body-content-name` | -| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | -| Open button | `.cometchat-collaborative-bubble__button` | diff --git a/ui-kit/react/plugins/collaborative-whiteboard.mdx b/ui-kit/react/plugins/collaborative-whiteboard.mdx index 44d517d68..62fea785d 100644 --- a/ui-kit/react/plugins/collaborative-whiteboard.mdx +++ b/ui-kit/react/plugins/collaborative-whiteboard.mdx @@ -20,34 +20,7 @@ description: "Renders collaborative whiteboard messages with a banner and 'Open ## Overview -The Collaborative Whiteboard plugin handles messages of type `extension_whiteboard` in category `custom`. It renders a card with a whiteboard banner image, title, subtitle, and an "Open Whiteboard" button that launches the whiteboard in a new window. - - -**Live Preview** — interact with the collaborative whiteboard bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-whiteboard-message) - - - - ---- - -## Bubble Rendering - -- **Banner image** — themed (light/dark) whiteboard illustration -- **Title** — "Collaborative Whiteboard" -- **Subtitle** — "Open whiteboard to draw together" -- **Button** — "Open Whiteboard" — opens the board URL in a fullscreen popup window -- Lazy-loaded — the bubble component is not included in the initial bundle - -The plugin's `renderBubble` is a thin forwarder to `CometChatCollaborativeWhiteboardBubble` — a self-extracting component that reads the board URL from the message's extension metadata at `@injected.extensions.whiteboard.board_url`. +The Collaborative Whiteboard plugin handles messages of type `extension_whiteboard` in category `custom`. It renders a card with a whiteboard banner image, title, subtitle, and an "Open Whiteboard" button that launches the whiteboard in a new window. The plugin routes whiteboard messages to [`CometChatCollaborativeWhiteboardBubble`](/ui-kit/react/components/collaborative-whiteboard-bubble). --- @@ -63,15 +36,3 @@ Returns: `Collaborative Whiteboard` (localized via `conversation_subtitle_collab --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-collaborative-bubble` | -| Whiteboard modifier | `.cometchat-collaborative-bubble--whiteboard` | -| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` | -| Banner image | `.cometchat-collaborative-bubble__banner-image` | -| Body | `.cometchat-collaborative-bubble__body` | -| Title | `.cometchat-collaborative-bubble__body-content-name` | -| Subtitle | `.cometchat-collaborative-bubble__body-content-description` | -| Open button | `.cometchat-collaborative-bubble__button` | diff --git a/ui-kit/react/plugins/delete.mdx b/ui-kit/react/plugins/delete.mdx index 870ac326f..fd23351e0 100644 --- a/ui-kit/react/plugins/delete.mdx +++ b/ui-kit/react/plugins/delete.mdx @@ -20,36 +20,7 @@ description: "Renders deleted messages with a 'This message was deleted' placeho ## Overview -The Delete plugin handles any message that has been deleted (where `getDeletedAt()` returns a non-null value). It renders a placeholder bubble indicating the message was removed. - - -**Live Preview** — interact with the delete message bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/base-elements-delete-bubble--default) - - - - ---- - -## Bubble Rendering - -- **Placeholder text** — "This message was deleted" (localized) -- **Styling** — italic, muted text color, no bubble background for incoming -- **Variant** — different styling for sent vs received deleted messages - -### Resolution - -The Delete plugin is special — it's matched by the Plugin Registry's **deleted-message fast path**, not by type+category. When the registry encounters a message with `getDeletedAt() !== null`, it immediately returns the Delete plugin regardless of the message's original type. - -This means a deleted text message, deleted image, deleted poll — all render the same "deleted" placeholder. +The Delete plugin handles any message that has been deleted (where `getDeletedAt()` returns a non-null value). It renders a placeholder bubble indicating the message was removed. The plugin renders [`CometChatDeleteBubble`](/ui-kit/react/components/delete-bubble) with the appropriate styling based on the message sender. --- @@ -65,9 +36,3 @@ Returns: `This message was deleted` (localized via `message_deleted` key) --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-delete-bubble` | -| Placeholder text | `.cometchat-delete-bubble__text` | diff --git a/ui-kit/react/plugins/file.mdx b/ui-kit/react/plugins/file.mdx index 4f53409a5..b478193c5 100644 --- a/ui-kit/react/plugins/file.mdx +++ b/ui-kit/react/plugins/file.mdx @@ -20,32 +20,7 @@ description: "Renders file messages with file icon, name, size, and download but ## Overview -The File plugin handles messages of type `file` in category `message`. It renders a file card showing the file name, size, extension icon, and a download button with progress indicator. - - -**Live Preview** — interact with the file message bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-file--default) - - - - ---- - -## Bubble Rendering - -- **File card** — displays file icon (based on extension), file name, and formatted file size -- **Download button** — click to download with progress indicator (uses `downloadWithProgress` utility) -- **Multiple files** — expand/collapse list showing all attachments -- **Caption** — rendered below the file card, formatted with text formatters -- **Pending state** — shows file info from local metadata while uploading (no download button) +The File plugin handles messages of type `file` in category `message`. It renders a file card showing the file name, size, extension icon, and a download button with progress indicator. The plugin routes file messages to [`CometChatFileBubble`](/ui-kit/react/components/file-bubble). --- @@ -61,14 +36,3 @@ Returns: `File` (localized via `conversation_subtitle_file` key) --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-file-bubble` | -| File card | `.cometchat-file-bubble__card` | -| File icon | `.cometchat-file-bubble__icon` | -| File name | `.cometchat-file-bubble__name` | -| File size | `.cometchat-file-bubble__size` | -| Download button | `.cometchat-file-bubble__download` | -| Caption | `.cometchat-file-bubble__caption` | diff --git a/ui-kit/react/plugins/group-action.mdx b/ui-kit/react/plugins/group-action.mdx index 02fef43d3..490fd1328 100644 --- a/ui-kit/react/plugins/group-action.mdx +++ b/ui-kit/react/plugins/group-action.mdx @@ -22,27 +22,7 @@ description: "Renders group action system messages like 'User joined', 'User lef The Group Action plugin handles messages of type `groupMember` in category `action`. These are system messages generated by the SDK when group membership changes occur. They render as centered, pill-shaped bubbles with no sender attribution. -The plugin's `renderBubble` is a thin forwarder to [`CometChatGroupActionBubble`](/ui-kit/react/components/group-action-bubble) — a self-extracting component that derives the localized action text from the message, then renders it through the presentational `CometChatActionBubble` base primitive. - ---- - -## Bubble Rendering - -- **Centered pill** — no left/right alignment, no avatar, no timestamp -- **Action text** — localized description of what happened (e.g., "Alice joined", "Bob was kicked by Admin") -- Uses the shared `getActionMessageText()` utility for localized text generation - -### Supported Actions - -| Action | Example text | -| --- | --- | -| Member joined | "Alice joined" | -| Member left | "Bob left" | -| Member kicked | "Admin kicked Bob" | -| Member banned | "Admin banned Charlie" | -| Member unbanned | "Admin unbanned Charlie" | -| Scope changed | "Admin made Bob a moderator" | -| Member added | "Admin added Dave" | +The plugin routes group action messages to [`CometChatGroupActionBubble`](/ui-kit/react/components/group-action-bubble). --- @@ -58,10 +38,3 @@ Returns the action text (truncated to 100 characters). Falls back to `Group acti --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-action-bubble` | -| Icon (when present) | `.cometchat-action-bubble__icon` | -| Action text | `.cometchat-action-bubble__text` | diff --git a/ui-kit/react/plugins/image.mdx b/ui-kit/react/plugins/image.mdx index 097f4b1b7..d55b2532c 100644 --- a/ui-kit/react/plugins/image.mdx +++ b/ui-kit/react/plugins/image.mdx @@ -20,33 +20,7 @@ description: "Renders image messages with multi-image grid, captions, and fullsc ## Overview -The Image plugin handles messages of type `image` in category `message`. It renders images in a responsive grid layout with optional captions. Clicking an image opens a fullscreen gallery viewer. - - -**Live Preview** — interact with the image message bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-image--default) - - - - ---- - -## Bubble Rendering - -- **Single image** — full-width image with rounded corners -- **Multiple images** — responsive grid (2 images side-by-side, 3+ in a masonry-style layout) -- **Caption** — rendered below the image grid, formatted with text formatters (mentions, URLs, markdown) -- **Pending state** — shows a placeholder while the image uploads - -Clicking any image opens the `CometChatFullScreenViewer` gallery with swipe navigation between images. +The Image plugin handles messages of type `image` in category `message`. It renders images in a responsive grid layout with optional captions. Clicking an image opens a fullscreen gallery viewer. The plugin routes image messages to [`CometChatImageBubble`](/ui-kit/react/components/image-bubble). --- @@ -71,11 +45,3 @@ Returns: `Photo` (localized via `conversation_subtitle_image` key) --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-image-bubble` | -| Image grid | `.cometchat-image-bubble__grid` | -| Single image | `.cometchat-image-bubble__image` | -| Caption | `.cometchat-image-bubble__caption` | diff --git a/ui-kit/react/plugins/overview.mdx b/ui-kit/react/plugins/overview.mdx index e56d19f87..4bcbf1c2c 100644 --- a/ui-kit/react/plugins/overview.mdx +++ b/ui-kit/react/plugins/overview.mdx @@ -20,9 +20,11 @@ Every message that appears in the UI is rendered by a plugin. If no plugin match ## Where Plugins Are Used +Plugins act as a routing layer — they decide which bubble component to render for a given message type and provide context menu options and conversation previews. The bubble components themselves are standalone and can be used independently of the plugin system. + | Location | Plugin Method | What it does | | --- | --- | --- | -| **Message List** | `renderBubble()` | Renders the bubble content (text, image grid, poll, etc.) | +| **Message List** | `renderBubble()` | Routes to the appropriate bubble component (e.g., `CometChatTextBubble`, `CometChatImageBubble`) | | **Message List** | `getOptions()` | Provides context menu items (reply, edit, delete, copy, react) | | **Conversations List** | `getLastMessagePreview()` | Returns subtitle text ("📷 Photo", "You: Hello", "🎥 Video") | | **Message Bubble** | `renderHeaderView()`, `renderFooterView()`, etc. | Customizes bubble regions beyond content | diff --git a/ui-kit/react/plugins/polls.mdx b/ui-kit/react/plugins/polls.mdx index 538bebd69..431ad3fac 100644 --- a/ui-kit/react/plugins/polls.mdx +++ b/ui-kit/react/plugins/polls.mdx @@ -20,41 +20,7 @@ description: "Renders poll messages with question, voting options, and real-time ## Overview -The Polls plugin handles messages of type `extension_poll` in category `custom`. It renders an interactive poll bubble where users can vote on options and see real-time results. - - -**Live Preview** — interact with the poll bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--poll-message) - - - - ---- - -## Bubble Rendering - -- **Question** — displayed as the poll title -- **Options** — clickable vote buttons with option text -- **Results** — percentage bars showing vote distribution after voting -- **Vote count** — total number of votes -- Lazy-loaded — the bubble component is not included in the initial bundle - -The poll data is extracted from the message's `customData`: -```json -{ - "question": "What's for lunch?", - "options": { "1": "Pizza", "2": "Sushi", "3": "Tacos" }, - "results": { "total": 5, "options": { "1": 3, "2": 1, "3": 1 }, "voters": {} } -} -``` +The Polls plugin handles messages of type `extension_poll` in category `custom`. It renders an interactive poll bubble where users can vote on options and see real-time results. The plugin routes poll messages to [`CometChatPollBubble`](/ui-kit/react/components/poll-bubble). --- @@ -70,12 +36,3 @@ Returns the poll question text (truncated to 80 characters). Falls back to `Poll --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-poll-bubble` | -| Question | `.cometchat-poll-bubble__question` | -| Option | `.cometchat-poll-bubble__option` | -| Progress bar | `.cometchat-poll-bubble__progress` | -| Vote count | `.cometchat-poll-bubble__vote-count` | diff --git a/ui-kit/react/plugins/stickers.mdx b/ui-kit/react/plugins/stickers.mdx index c238787c3..89e1f679d 100644 --- a/ui-kit/react/plugins/stickers.mdx +++ b/ui-kit/react/plugins/stickers.mdx @@ -20,34 +20,7 @@ description: "Renders sticker messages as full-size sticker images." ## Overview -The Stickers plugin handles messages of type `extension_sticker` in category `custom`. It renders a sticker image extracted from the message's custom data. - - -**Live Preview** — interact with the sticker bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--sticker-message) - - - - ---- - -## Bubble Rendering - -- Renders the sticker as a full-size image (no bubble background) -- Extracts the sticker URL from the message's custom data or extension metadata -- Lazy-loaded — the bubble component is not included in the initial bundle - - -Stickers use a separate keyboard button in the composer (the smiley icon), not the attachment menu. The sticker keyboard is a standalone component (`CometChatStickersKeyboard`) rendered by the composer. - +The Stickers plugin handles messages of type `extension_sticker` in category `custom`. It renders a sticker image extracted from the message's custom data. The plugin routes sticker messages to [`CometChatStickerBubble`](/ui-kit/react/components/sticker-bubble). --- @@ -63,9 +36,3 @@ Returns: `Sticker` (localized via `conversation_subtitle_sticker` key) --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-sticker-bubble` | -| Sticker image | `.cometchat-sticker-bubble__image` | diff --git a/ui-kit/react/plugins/text.mdx b/ui-kit/react/plugins/text.mdx index 973bba409..895cbeb37 100644 --- a/ui-kit/react/plugins/text.mdx +++ b/ui-kit/react/plugins/text.mdx @@ -20,34 +20,7 @@ description: "Renders text messages with mentions, URLs, and markdown formatting ## Overview -The Text plugin handles messages of type `text` in category `message`. It renders formatted text with support for @mentions, clickable URLs, and markdown syntax (bold, italic, strikethrough, code, blockquotes, lists). - - -**Live Preview** — interact with the text message bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-text--default) - - - - ---- - -## Bubble Rendering - -The text bubble displays the message text after running it through the formatter pipeline: - -1. **Markdown** — `**bold**`, `_italic_`, `~~strike~~`, `` `code` ``, `> blockquote`, lists -2. **Mentions** — `<@uid:xxx>` tokens → styled `@DisplayName` chips -3. **URLs** — bare URLs → clickable links with `target="_blank"` - -Long messages are truncated with a "Read more" toggle (configurable via `disableTruncation` in the plugin context). +The Text plugin handles messages of type `text` in category `message`. It renders formatted text with support for @mentions, clickable URLs, and markdown syntax (bold, italic, strikethrough, code, blockquotes, lists). The plugin routes text messages to [`CometChatTextBubble`](/ui-kit/react/components/text-bubble). --- @@ -90,12 +63,3 @@ For custom formatters, see [Text Formatters](/ui-kit/react/plugins/text-formatte --- -## CSS Selectors - -| Target | Selector | -| --- | --- | -| Bubble root | `.cometchat-text-bubble` | -| Text content | `.cometchat-text-bubble__text` | -| Mention chip | `.cometchat-text-bubble__mention` | -| Link | `.cometchat-link` | -| Read more toggle | `.cometchat-text-bubble__read-more` | diff --git a/ui-kit/react/plugins/video.mdx b/ui-kit/react/plugins/video.mdx index 05636391d..a9b3c3be3 100644 --- a/ui-kit/react/plugins/video.mdx +++ b/ui-kit/react/plugins/video.mdx @@ -20,32 +20,7 @@ description: "Renders video messages with inline player, thumbnail grid, and cap ## Overview -The Video plugin handles messages of type `video` in category `message`. Single videos render with an inline HTML5 player. Multiple videos display as a thumbnail grid with play overlays. - - -**Live Preview** — interact with the video message bubble. - -[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-video--default) - - - - ---- - -## Bubble Rendering - -- **Single video** — inline `
-
- {selectedCall && } +
+ {selectedCall && ( + // Render your own details panel for the selected call log + 
{JSON.stringify(selectedCall, null, 2)}
+ )}
); @@ -177,13 +177,14 @@ function CallsTab() { Pass a custom `callLogRequestBuilder` to control which call logs are fetched. The default fetches up to 30 call logs with category "call". Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full builder API. ```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatUIKitCalls } from "@cometchat/chat-uikit-react"; ``` @@ -192,7 +193,8 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; | Recipe | Code | | --- | --- | -| Increase page size | `new CometChat.MessagesRequestBuilder().setLimit(50).setCategory("call")` | +| Increase page size | `new CometChatUIKitCalls.CallLogRequestBuilder().setLimit(50).setCallCategory("call")` | +| Calls with a specific user | `new CometChatUIKitCalls.CallLogRequestBuilder().setUid("uid").setAuthToken(authToken)` | | Only missed calls | Custom filtering via `itemView` with conditional rendering | --- diff --git a/ui-kit/react/components/incoming-call.mdx b/ui-kit/react/components/incoming-call.mdx index 7e068493d..cde1cd05b 100644 --- a/ui-kit/react/components/incoming-call.mdx +++ b/ui-kit/react/components/incoming-call.mdx @@ -100,7 +100,7 @@ The component handles: > **Placement:** Render `CometChatIncomingCall` at your app's root level. It manages its own visibility internally and only appears when an incoming call is detected. -> **Note:** In v7, `CallButtons` is not a standalone component — call button functionality is part of `CometChatMessageHeader`. Use `CometChatIncomingCall` separately to handle the incoming call notification flow. +> **Note:** Call **initiation** buttons are provided by the standalone [`CometChatCallButtons`](/ui-kit/react/components/call-buttons) component (also rendered automatically inside `CometChatMessageHeader`). `CometChatIncomingCall` is separate — it handles the incoming call notification flow. --- diff --git a/ui-kit/react/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx index c988731f3..c182868b1 100644 --- a/ui-kit/react/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -335,6 +335,8 @@ All string/callback props moved to compound sub-components: New root-level props: `isOpen`, `onClose`, `closeOnOutsideClick`, `variant`. +The compound sub-components are `CometChatConfirmDialog.Root`, `.Icon` (optional leading icon, new in v7), `.Content`, and `.Actions`. + --- ## CometChatActionSheet From 51796163117ec31583d7a5712e0b9ca1b786aaa8 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Tue, 16 Jun 2026 19:52:47 +0530 Subject: [PATCH 21/27] more fixes from P2, P3 & p$ --- ui-kit/react/astro-tab-based-chat.mdx | 2 +- ui-kit/react/migration-property-changes.mdx | 2 +- ui-kit/react/next-conversation.mdx | 2 +- ui-kit/react/next-tab-based-chat.mdx | 4 ++-- ui-kit/react/react-router-tab-based-chat.mdx | 2 +- ui-kit/react/react-tab-based-chat.mdx | 5 +---- ui-kit/react/theme/color-resources.mdx | 2 +- ui-kit/react/troubleshooting.mdx | 2 +- 8 files changed, 9 insertions(+), 12 deletions(-) diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index 94559188f..1ce59c500 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in Astro." +description: "Build a tab-based chat interface with Chat, Call Logs, and Users tabs in Astro." --- diff --git a/ui-kit/react/migration-property-changes.mdx b/ui-kit/react/migration-property-changes.mdx index c182868b1..17191e648 100644 --- a/ui-kit/react/migration-property-changes.mdx +++ b/ui-kit/react/migration-property-changes.mdx @@ -14,7 +14,7 @@ description: "Complete prop migration reference for all components from v6 to v7 ## Common Patterns -These 10 patterns apply across all components. You do not need to look them up per-component: +These 8 patterns apply across all components. You do not need to look them up per-component: | # | Pattern | v6 | v7 | Action Required | | --- | --- | --- | --- | --- | diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 8c99865f6..510b307de 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -96,7 +96,7 @@ export default function CometChatClient() { } ``` -```css title="app/chat/chat.module.css" +```css title="app/chat/chat.css" .conversations-with-messages { display: flex; height: 100vh; diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 901849d5d..e97d7f0b0 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in Next.js (App Router)." +description: "Build a tab-based chat interface with Chat, Call Logs, and Users tabs in Next.js (App Router)." --- @@ -154,7 +154,7 @@ export default function CometChatClient() { } ``` -```css title="app/chat/chat.module.css" +```css title="app/chat/chat.css" .tabbed-chat { display: flex; height: 100vh; diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index 59a87b63e..b1a614bfe 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in React Router." +description: "Build a tab-based chat interface with Chat, Call Logs, and Users tabs in React Router." --- diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index 3fb2be2f6..a93d60af6 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -1,7 +1,7 @@ --- title: "Tab-Based Chat" sidebarTitle: "Tab-Based Chat" -description: "Build a tab-based chat interface with Chat, Call Logs, Users, and Settings tabs in React.js." +description: "Build a tab-based chat interface with Chat, Call Logs, and Users tabs in React.js." --- @@ -83,9 +83,6 @@ function App() { const handleCallClick = (call: any) => { const initiator = call.getInitiator(); const receiver = call.getReceiver(); - const loggedInUser = CometChat.getLoggedinUser - ? undefined - : undefined; // Determine the other party in the call if (receiver instanceof CometChat.User) { diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index 87598a420..ced9448e2 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -43,7 +43,7 @@ The primary color and its extended scale (50 = lightest, 900 = darkest). | `--cometchat-extended-primary-color-600` | `#8566ff` | `#473892` | | `--cometchat-extended-primary-color-700` | `#704cff` | `#4f3ea3` | | `--cometchat-extended-primary-color-800` | `#5c33ff` | `#5745b4` | -| `--cometchat-extended-primary-color-900` | `#4719ff` | `#7460d9` | +| `--cometchat-extended-primary-color-900` | `#5d49be` | `#7460d9` | --- diff --git a/ui-kit/react/troubleshooting.mdx b/ui-kit/react/troubleshooting.mdx index 4b96374d8..79a1bc2fe 100644 --- a/ui-kit/react/troubleshooting.mdx +++ b/ui-kit/react/troubleshooting.mdx @@ -92,7 +92,7 @@ function useCustomMessageListener(onMessage: (msg: CometChat.BaseMessage) => voi Key points: - Use `useId()` for unique listener IDs — it's stable across StrictMode remounts within the same component instance. - Always remove listeners in the cleanup function returned from `useEffect`. -- The built-in `useSDKEvents` hook already handles this correctly. +- The built-in `useCometChatEvents` hook already handles this correctly. --- From 98d8272aecb49993c7e1739cc57d8a7fbecf4831 Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Tue, 16 Jun 2026 20:34:48 +0530 Subject: [PATCH 22/27] update docs and add changelog, sample app links --- docs.json | 13 ++-- ui-kit/react/astro-conversation.mdx | 8 ++- ui-kit/react/astro-one-to-one-chat.mdx | 16 +++-- ui-kit/react/astro-tab-based-chat.mdx | 8 ++- ui-kit/react/calling-integration.mdx | 2 - ui-kit/react/cometchat-provider.mdx | 3 - ui-kit/react/components-overview.mdx | 7 +- ui-kit/react/components/ai-assistant-chat.mdx | 1 - ui-kit/react/components/audio-bubble.mdx | 1 - .../react/components/call-action-bubble.mdx | 1 - ui-kit/react/components/call-bubble.mdx | 1 - ui-kit/react/components/call-buttons.mdx | 5 +- ui-kit/react/components/call-logs.mdx | 1 - .../collaborative-document-bubble.mdx | 1 - .../collaborative-whiteboard-bubble.mdx | 1 - ui-kit/react/components/conversations.mdx | 1 - ui-kit/react/components/delete-bubble.mdx | 1 - ui-kit/react/components/file-bubble.mdx | 1 - .../react/components/flag-message-dialog.mdx | 5 +- .../react/components/group-action-bubble.mdx | 1 - ui-kit/react/components/group-members.mdx | 1 - ui-kit/react/components/groups.mdx | 1 - ui-kit/react/components/image-bubble.mdx | 1 - ui-kit/react/components/incoming-call.mdx | 1 - ui-kit/react/components/message-bubble.mdx | 1 - ui-kit/react/components/message-composer.mdx | 1 - ui-kit/react/components/message-header.mdx | 1 - .../react/components/message-information.mdx | 4 -- ui-kit/react/components/message-list.mdx | 1 - ui-kit/react/components/outgoing-call.mdx | 1 - ui-kit/react/components/poll-bubble.mdx | 1 - ui-kit/react/components/reaction-list.mdx | 5 +- ui-kit/react/components/reactions.mdx | 5 +- ui-kit/react/components/search.mdx | 1 - ui-kit/react/components/sticker-bubble.mdx | 1 - ui-kit/react/components/text-bubble.mdx | 1 - ui-kit/react/components/thread-header.mdx | 1 - ui-kit/react/components/users.mdx | 1 - ui-kit/react/components/video-bubble.mdx | 1 - ui-kit/react/guide-block-unblock-user.mdx | 2 +- ui-kit/react/guide-group-chat-setup.mdx | 2 - ui-kit/react/guide-message-privately.mdx | 2 - ui-kit/react/guide-new-chat-creation.mdx | 2 - ui-kit/react/guide-search-messages.mdx | 1 - ui-kit/react/guide-threaded-messages.mdx | 1 - ui-kit/react/integration-astro.mdx | 2 - ui-kit/react/integration-nextjs.mdx | 2 - ui-kit/react/integration-react-router.mdx | 2 - ui-kit/react/integration-react.mdx | 2 - ui-kit/react/link/changelog.mdx | 5 ++ ui-kit/react/methods.mdx | 42 ++++++++++++ ui-kit/react/next-conversation.mdx | 8 ++- ui-kit/react/next-one-to-one-chat.mdx | 16 +++-- ui-kit/react/next-tab-based-chat.mdx | 8 ++- ui-kit/react/react-conversation.mdx | 10 ++- ui-kit/react/react-one-to-one-chat.mdx | 18 +++-- ui-kit/react/react-router-conversation.mdx | 10 ++- ui-kit/react/react-router-one-to-one-chat.mdx | 18 +++-- ui-kit/react/react-router-tab-based-chat.mdx | 10 ++- ui-kit/react/react-tab-based-chat.mdx | 10 ++- ui-kit/react/theme/color-resources.mdx | 1 - ui-kit/react/theming.mdx | 2 - ui-kit/react/troubleshooting.mdx | 65 +------------------ ui-kit/react/v4/link/changelog.mdx | 5 ++ ui-kit/react/v4/link/figma.mdx | 5 ++ ui-kit/react/v4/link/sample.mdx | 5 ++ ui-kit/react/v5/link/changelog.mdx | 5 ++ ui-kit/react/v5/link/figma.mdx | 5 ++ ui-kit/react/v5/link/sample.mdx | 5 ++ 69 files changed, 199 insertions(+), 180 deletions(-) create mode 100644 ui-kit/react/link/changelog.mdx create mode 100644 ui-kit/react/v4/link/changelog.mdx create mode 100644 ui-kit/react/v4/link/figma.mdx create mode 100644 ui-kit/react/v4/link/sample.mdx create mode 100644 ui-kit/react/v5/link/changelog.mdx create mode 100644 ui-kit/react/v5/link/figma.mdx create mode 100644 ui-kit/react/v5/link/sample.mdx diff --git a/docs.json b/docs.json index d8fa2f72f..696320d4f 100644 --- a/docs.json +++ b/docs.json @@ -622,6 +622,7 @@ }, "ui-kit/react/troubleshooting", "ui-kit/react/link/sample", + "ui-kit/react/link/changelog", "ui-kit/react/link/figma" ] } @@ -843,9 +844,9 @@ "ui-kit/react/v5/property-changes" ] }, - "ui-kit/react/link/sample", - "ui-kit/react/link/changelog", - "ui-kit/react/link/figma" + "ui-kit/react/v5/link/sample", + "ui-kit/react/v5/link/changelog", + "ui-kit/react/v5/link/figma" ] } ] @@ -1039,9 +1040,9 @@ "ui-kit/react/v4/property-changes" ] }, - "ui-kit/react/link/sample", - "ui-kit/react/link/changelog", - "ui-kit/react/link/figma" + "ui-kit/react/v4/link/sample", + "ui-kit/react/v4/link/changelog", + "ui-kit/react/v4/link/figma" ] } ] diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 0dd5a0f59..8bed4a418 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -53,7 +53,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export default function ConversationChat() { const [selectedUser, setSelectedUser] = useState(undefined); @@ -71,7 +70,12 @@ export default function ConversationChat() { }; return ( - +
Loading chat...
; return ( - +
@@ -118,7 +122,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID @@ -135,7 +138,12 @@ export default function DirectChat() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index 1ce59c500..6283f0ab9 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -55,7 +55,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; type Tab = "chat" | "calls" | "users"; @@ -98,7 +97,12 @@ export default function TabbedChat() { }; return ( - +
(null); diff --git a/ui-kit/react/cometchat-provider.mdx b/ui-kit/react/cometchat-provider.mdx index 0c0b74844..0f03a2084 100644 --- a/ui-kit/react/cometchat-provider.mdx +++ b/ui-kit/react/cometchat-provider.mdx @@ -20,7 +20,6 @@ Every CometChat component must be rendered inside a provider tree that supplies ```tsx import { CometChatProvider, CometChatConversations } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function App() { return ( @@ -210,7 +209,6 @@ import { CometChatPluginRegistry, defaultPlugins, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; const pluginRegistry = new CometChatPluginRegistry(defaultPlugins); @@ -268,7 +266,6 @@ The `EventsProvider` only mounts after login succeeds. Before that, children ren "use client"; import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export function ChatProviders({ children }: { children: React.ReactNode }) { return ( diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 633136fee..6093d6db9 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -33,7 +33,12 @@ function ChatApp() { const [user, setUser] = useState(); return ( - +
setUser(conv.getConversationWith())} />
diff --git a/ui-kit/react/components/ai-assistant-chat.mdx b/ui-kit/react/components/ai-assistant-chat.mdx index 27e70f3b8..090a1c8ec 100644 --- a/ui-kit/react/components/ai-assistant-chat.mdx +++ b/ui-kit/react/components/ai-assistant-chat.mdx @@ -9,7 +9,6 @@ description: "AI agent chat interface with streaming responses, suggested messag "component": "CometChatAIAssistantChat", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "AI agent chat interface with streaming responses, suggested messages, tool calling, and conversation history.", "cssRootClass": ".cometchat-ai-assistant-chat", "primaryOutput": { diff --git a/ui-kit/react/components/audio-bubble.mdx b/ui-kit/react/components/audio-bubble.mdx index f68749379..85a51144d 100644 --- a/ui-kit/react/components/audio-bubble.mdx +++ b/ui-kit/react/components/audio-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders an audio attachment with pla "component": "CometChatAudioBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatAudioBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting audio bubble. Extracts the audio attachment and caption from a MediaMessage and renders inline playback controls.", "cssRootClass": ".cometchat-audio-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/call-action-bubble.mdx b/ui-kit/react/components/call-action-bubble.mdx index 3415dede9..c34cb50ab 100644 --- a/ui-kit/react/components/call-action-bubble.mdx +++ b/ui-kit/react/components/call-action-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders call status system messages "component": "CometChatCallActionBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCallActionBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting bubble for call status system messages. Derives the status text, icon, and error color from the SDK call message and the logged-in user.", "cssRootClass": ".cometchat-action-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/call-bubble.mdx b/ui-kit/react/components/call-bubble.mdx index a39d812ee..8a5bd8541 100644 --- a/ui-kit/react/components/call-bubble.mdx +++ b/ui-kit/react/components/call-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble for direct-call / meeting messages, with "component": "CometChatCallBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCallBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting call bubble for meeting / direct-call custom messages. Derives the call type, session ID, title, icon, and timestamp from the message.", "cssRootClass": ".cometchat-call-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/call-buttons.mdx b/ui-kit/react/components/call-buttons.mdx index 455ec99c3..33e323647 100644 --- a/ui-kit/react/components/call-buttons.mdx +++ b/ui-kit/react/components/call-buttons.mdx @@ -9,7 +9,6 @@ description: "Voice and video call buttons for user or group conversations, with "component": "CometChatCallButtons", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Voice and video call initiation buttons for user or group conversations. Manages the full call lifecycle (outgoing + ongoing) internally.", "cssRootClass": ".cometchat-call-buttons", "primaryOutput": { @@ -109,7 +108,6 @@ description: "Voice and video call buttons for user or group conversations, with import { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function CallButtonsDemo() { const [chatUser, setChatUser] = useState(); @@ -134,7 +132,6 @@ export default CallButtonsDemo; ```tsx import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function CallButtonsMinimal({ chatUser }: { chatUser: CometChat.User }) { return ; @@ -358,7 +355,7 @@ function GroupCallButtons() { ## CSS Architecture -The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade: +The component uses CSS custom properties (design tokens) provided by the UI Kit. The cascade: 1. Global tokens set on the `.cometchat` root wrapper. 2. Component CSS (`.cometchat-call-buttons`) consumes these tokens via `var()`. diff --git a/ui-kit/react/components/call-logs.mdx b/ui-kit/react/components/call-logs.mdx index d4b6b3841..5f30f2500 100644 --- a/ui-kit/react/components/call-logs.mdx +++ b/ui-kit/react/components/call-logs.mdx @@ -9,7 +9,6 @@ description: "Scrollable list of call history with call details, duration, and t "component": "CometChatCallLogs", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Scrollable list of call history with call details, duration, and the ability to initiate new calls.", "cssRootClass": ".cometchat-call-logs", "primaryOutput": { diff --git a/ui-kit/react/components/collaborative-document-bubble.mdx b/ui-kit/react/components/collaborative-document-bubble.mdx index b6b396158..094ceb715 100644 --- a/ui-kit/react/components/collaborative-document-bubble.mdx +++ b/ui-kit/react/components/collaborative-document-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders a collaborative document car "component": "CometChatCollaborativeDocumentBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCollaborativeDocumentBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting collaborative document bubble. Extracts the document URL from the message metadata and opens it on click.", "cssRootClass": ".cometchat-collaborative-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx index 97874d316..ed7b81f9d 100644 --- a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx +++ b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders a collaborative whiteboard c "component": "CometChatCollaborativeWhiteboardBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatCollaborativeWhiteboardBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting collaborative whiteboard bubble. Extracts the board URL from the message metadata and opens it on click.", "cssRootClass": ".cometchat-collaborative-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/conversations.mdx b/ui-kit/react/components/conversations.mdx index 9d8e5d82a..37424cbd1 100644 --- a/ui-kit/react/components/conversations.mdx +++ b/ui-kit/react/components/conversations.mdx @@ -9,7 +9,6 @@ description: "Scrollable list of recent one-on-one and group conversations for t "component": "CometChatConversations", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatConversations } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user with real-time updates.", "cssRootClass": ".cometchat-conversations", "primaryOutput": { diff --git a/ui-kit/react/components/delete-bubble.mdx b/ui-kit/react/components/delete-bubble.mdx index 58f1800ba..456bfc7f5 100644 --- a/ui-kit/react/components/delete-bubble.mdx +++ b/ui-kit/react/components/delete-bubble.mdx @@ -10,7 +10,6 @@ description: "A presentational bubble that renders a 'This message was deleted' "component": "CometChatDeleteBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatDeleteBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Presentational placeholder bubble for deleted messages.", "cssRootClass": ".cometchat-delete-bubble", "props": { diff --git a/ui-kit/react/components/file-bubble.mdx b/ui-kit/react/components/file-bubble.mdx index 15ae54654..2f8e26c2f 100644 --- a/ui-kit/react/components/file-bubble.mdx +++ b/ui-kit/react/components/file-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders a file attachment with its n "component": "CometChatFileBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatFileBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting file bubble. Extracts the file attachment (url, name, size, extension) and caption from a MediaMessage.", "cssRootClass": ".cometchat-file-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/flag-message-dialog.mdx b/ui-kit/react/components/flag-message-dialog.mdx index bbfa97030..b5d5ef220 100644 --- a/ui-kit/react/components/flag-message-dialog.mdx +++ b/ui-kit/react/components/flag-message-dialog.mdx @@ -10,7 +10,6 @@ description: "A dialog for reporting inappropriate messages with reason selectio "component": "CometChatFlagMessageDialog", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatFlagMessageDialog } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Dialog for reporting/flagging an inappropriate message. Fetches flag reasons from the SDK, captures an optional remark, and submits the report.", "cssRootClass": ".cometchat-flag-message-dialog", "primaryOutput": { @@ -69,7 +68,6 @@ Use it when a user chooses "Report" on a message. The parent owns the open state import { useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatFlagMessageDialog } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function FlagMessageExample({ message }: { message: CometChat.BaseMessage }) { const [open, setOpen] = useState(false); @@ -103,7 +101,6 @@ function FlagMessageExample({ message }: { message: CometChat.BaseMessage }) { ```tsx lines import { CometChatFlagMessageDialog } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function Demo({ message }) { return ; @@ -246,7 +243,7 @@ The Root traps focus within the dialog while open, moves focus to the first focu ## CSS Architecture -The component uses CSS custom properties defined in `@cometchat/chat-uikit-react/css-variables.css`. +The component uses CSS custom properties provided by the UI Kit. ### Key Selectors diff --git a/ui-kit/react/components/group-action-bubble.mdx b/ui-kit/react/components/group-action-bubble.mdx index a0b90df37..e9be54aa0 100644 --- a/ui-kit/react/components/group-action-bubble.mdx +++ b/ui-kit/react/components/group-action-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders group action system messages "component": "CometChatGroupActionBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatGroupActionBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting bubble for group membership system messages. Derives the localized action text from the SDK group-action message.", "cssRootClass": ".cometchat-action-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/group-members.mdx b/ui-kit/react/components/group-members.mdx index 70b61cb27..385e4febb 100644 --- a/ui-kit/react/components/group-members.mdx +++ b/ui-kit/react/components/group-members.mdx @@ -9,7 +9,6 @@ description: "Scrollable list of members for a specific group with role-based ac "component": "CometChatGroupMembers", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Scrollable list of members for a specific group with role-based actions like kick, ban, and scope change.", "cssRootClass": ".cometchat-group-members", "primaryOutput": { diff --git a/ui-kit/react/components/groups.mdx b/ui-kit/react/components/groups.mdx index 210262084..c9595f707 100644 --- a/ui-kit/react/components/groups.mdx +++ b/ui-kit/react/components/groups.mdx @@ -9,7 +9,6 @@ description: "Searchable, scrollable list of groups with selection support and r "component": "CometChatGroups", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatGroups } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Searchable, scrollable list of groups with selection support and real-time membership updates.", "cssRootClass": ".cometchat-groups", "primaryOutput": { diff --git a/ui-kit/react/components/image-bubble.mdx b/ui-kit/react/components/image-bubble.mdx index 50bd3db64..b86404252 100644 --- a/ui-kit/react/components/image-bubble.mdx +++ b/ui-kit/react/components/image-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders one or more image attachment "component": "CometChatImageBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatImageBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting image bubble. Extracts image attachments and caption from a MediaMessage; supports single/grid layouts and a fullscreen viewer.", "cssRootClass": ".cometchat-image-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/incoming-call.mdx b/ui-kit/react/components/incoming-call.mdx index cde1cd05b..31ae55f5d 100644 --- a/ui-kit/react/components/incoming-call.mdx +++ b/ui-kit/react/components/incoming-call.mdx @@ -9,7 +9,6 @@ description: "Displays an incoming call notification with caller info, accept/de "component": "CometChatIncomingCall", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Displays an incoming call notification with caller info, accept/decline buttons, and transitions to the ongoing call screen.", "cssRootClass": ".cometchat-incoming-call", "primaryOutput": { diff --git a/ui-kit/react/components/message-bubble.mdx b/ui-kit/react/components/message-bubble.mdx index e695f6b05..ff35e8223 100644 --- a/ui-kit/react/components/message-bubble.mdx +++ b/ui-kit/react/components/message-bubble.mdx @@ -9,7 +9,6 @@ description: "A shared wrapper component that renders all message types with com "component": "CometChatMessageBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatMessageBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Layout shell that wraps plugin-rendered bubble content with shared chrome — avatar, sender name, bubble background, timestamp, receipts, thread replies, reactions, and context menu.", "cssRootClass": ".cometchat-message-bubble", "props": { diff --git a/ui-kit/react/components/message-composer.mdx b/ui-kit/react/components/message-composer.mdx index b3a43f37d..34312bb7c 100644 --- a/ui-kit/react/components/message-composer.mdx +++ b/ui-kit/react/components/message-composer.mdx @@ -9,7 +9,6 @@ description: "Rich text input with attachments, emoji, voice recording, mentions "component": "CometChatMessageComposer", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Rich text input with attachments, emoji, voice recording, mentions, and formatting for sending messages.", "cssRootClass": ".cometchat-message-composer", "primaryOutput": { diff --git a/ui-kit/react/components/message-header.mdx b/ui-kit/react/components/message-header.mdx index 4ad61c5db..5a507f97f 100644 --- a/ui-kit/react/components/message-header.mdx +++ b/ui-kit/react/components/message-header.mdx @@ -9,7 +9,6 @@ description: "Toolbar displaying conversation details with avatar, name, presenc "component": "CometChatMessageHeader", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatMessageHeader } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Toolbar displaying conversation details with avatar, name, presence status, typing indicator, and call buttons.", "cssRootClass": ".cometchat-message-header", "primaryOutput": { diff --git a/ui-kit/react/components/message-information.mdx b/ui-kit/react/components/message-information.mdx index c3ad9d3e8..13aafd2e0 100644 --- a/ui-kit/react/components/message-information.mdx +++ b/ui-kit/react/components/message-information.mdx @@ -9,7 +9,6 @@ description: "Displays detailed message information including delivery and read "component": "CometChatMessageInformation", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatMessageInformation } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Displays detailed message information including delivery and read receipts for 1-on-1 and group conversations.", "cssRootClass": ".cometchat-message-information", "primaryOutput": { @@ -74,7 +73,6 @@ It offers **two usage modes**: ```tsx import { CometChatMessageInformation } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function MessageInfoPanel({ message, onClose }) { return ( @@ -103,7 +101,6 @@ When using `` directly (without `.Root`), these a ```tsx import { CometChatMessageInformation } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function MessageInfoPanel({ message, onClose }) { return ( @@ -124,7 +121,6 @@ function MessageInfoPanel({ message, onClose }) { ```tsx import { CometChatMessageInformation } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function Demo({ message }) { return ; diff --git a/ui-kit/react/components/message-list.mdx b/ui-kit/react/components/message-list.mdx index a2f5ced32..74d698780 100644 --- a/ui-kit/react/components/message-list.mdx +++ b/ui-kit/react/components/message-list.mdx @@ -9,7 +9,6 @@ description: "Scrollable message feed with plugin-based bubble rendering, reacti "component": "CometChatMessageList", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatMessageList } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Scrollable message feed with plugin-based bubble rendering, reactions, receipts, threads, and real-time updates.", "cssRootClass": ".cometchat-message-list", "primaryOutput": { diff --git a/ui-kit/react/components/outgoing-call.mdx b/ui-kit/react/components/outgoing-call.mdx index e01549eda..aee19e4ea 100644 --- a/ui-kit/react/components/outgoing-call.mdx +++ b/ui-kit/react/components/outgoing-call.mdx @@ -9,7 +9,6 @@ description: "Displays the outgoing call screen with receiver info and a cancel "component": "CometChatOutgoingCall", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Displays the outgoing call screen with receiver info and a cancel button while waiting for the call to be answered.", "cssRootClass": ".cometchat-outgoing-call", "primaryOutput": { diff --git a/ui-kit/react/components/poll-bubble.mdx b/ui-kit/react/components/poll-bubble.mdx index bdf89abe8..17db19ac7 100644 --- a/ui-kit/react/components/poll-bubble.mdx +++ b/ui-kit/react/components/poll-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders a poll with its question, se "component": "CometChatPollBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatPollBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting poll bubble. Derives the question, options, vote counts, totals, and the logged-in user's vote from the message metadata.", "cssRootClass": ".cometchat-poll-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/reaction-list.mdx b/ui-kit/react/components/reaction-list.mdx index e5f34c654..26e56de93 100644 --- a/ui-kit/react/components/reaction-list.mdx +++ b/ui-kit/react/components/reaction-list.mdx @@ -9,7 +9,6 @@ description: "Standalone panel showing who reacted to a message, with emoji tab "component": "CometChatReactionList", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatReactionList } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Standalone panel showing who reacted to a message, with emoji tab filtering, pagination, and optimistic removal for the current user.", "cssRootClass": ".cometchat-reaction-list", "primaryOutput": { @@ -65,7 +64,6 @@ The parent component (typically `CometChatMessageList`) owns the SDK reaction ad ```tsx lines import { CometChatReactionList } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function ReactionPanel({ message, onClose }) { return ( @@ -85,7 +83,6 @@ function ReactionPanel({ message, onClose }) { ```tsx lines import { CometChatReactionList } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function Demo({ message }) { return ; @@ -223,7 +220,7 @@ const builder = new CometChat.ReactionsRequestBuilder().setLimit(50); ## CSS Architecture -The component uses CSS custom properties defined in `@cometchat/chat-uikit-react/css-variables.css`. +The component uses CSS custom properties provided by the UI Kit. ### Key Selectors diff --git a/ui-kit/react/components/reactions.mdx b/ui-kit/react/components/reactions.mdx index 973555b6a..193d56f04 100644 --- a/ui-kit/react/components/reactions.mdx +++ b/ui-kit/react/components/reactions.mdx @@ -9,7 +9,6 @@ description: "Displays emoji reaction chips on message bubbles with hover toolti "component": "CometChatReactions", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatReactions } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Displays emoji reaction chips on message bubbles with hover tooltips, a full reactor list, and overflow handling.", "cssRootClass": ".cometchat-reactions", "primaryOutput": { @@ -63,7 +62,6 @@ description: "Displays emoji reaction chips on message bubbles with hover toolti ```tsx lines import { CometChatReactions } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function MessageBubbleFooter({ message, onReactionClick }) { return ( @@ -80,7 +78,6 @@ function MessageBubbleFooter({ message, onReactionClick }) { ```tsx lines import { CometChatReactions } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; function Demo({ message }) { return ; @@ -158,7 +155,7 @@ Called when an error occurs during reactor detail fetching. ## CSS Architecture -The component uses CSS custom properties defined in `@cometchat/chat-uikit-react/css-variables.css`. +The component uses CSS custom properties provided by the UI Kit. ### Key Selectors diff --git a/ui-kit/react/components/search.mdx b/ui-kit/react/components/search.mdx index 5b0282572..fa56f643b 100644 --- a/ui-kit/react/components/search.mdx +++ b/ui-kit/react/components/search.mdx @@ -9,7 +9,6 @@ description: "Unified search across conversations and messages with filter chips "component": "CometChatSearch", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatSearch } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Unified search across conversations and messages with filter chips, scoped search, and customizable result views.", "cssRootClass": ".cometchat-search", "primaryOutput": { diff --git a/ui-kit/react/components/sticker-bubble.mdx b/ui-kit/react/components/sticker-bubble.mdx index 234752037..23a546ba7 100644 --- a/ui-kit/react/components/sticker-bubble.mdx +++ b/ui-kit/react/components/sticker-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders a sticker image from a stick "component": "CometChatStickerBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatStickerBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting sticker bubble. Extracts the sticker image URL and name from the message metadata.", "cssRootClass": ".cometchat-sticker-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/text-bubble.mdx b/ui-kit/react/components/text-bubble.mdx index ef8ddd289..1194791b5 100644 --- a/ui-kit/react/components/text-bubble.mdx +++ b/ui-kit/react/components/text-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders text messages with markdown, "component": "CometChatTextBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatTextBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting text bubble. Renders message text through the formatter pipeline (markdown, mentions, URLs), with optional read-more truncation.", "cssRootClass": ".cometchat-text-bubble", "selfExtracting": true, diff --git a/ui-kit/react/components/thread-header.mdx b/ui-kit/react/components/thread-header.mdx index bc4ec9345..c217723ca 100644 --- a/ui-kit/react/components/thread-header.mdx +++ b/ui-kit/react/components/thread-header.mdx @@ -9,7 +9,6 @@ description: "Displays the parent message bubble and reply count for threaded co "component": "CometChatThreadHeader", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatThreadHeader } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Displays the parent message bubble and reply count for threaded conversations.", "cssRootClass": ".cometchat-thread-header", "primaryOutput": { diff --git a/ui-kit/react/components/users.mdx b/ui-kit/react/components/users.mdx index 70be7b569..44e988e5d 100644 --- a/ui-kit/react/components/users.mdx +++ b/ui-kit/react/components/users.mdx @@ -9,7 +9,6 @@ description: "Searchable, scrollable list of users with selection support and re "component": "CometChatUsers", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatUsers } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";", "description": "Searchable, scrollable list of users with selection support and real-time presence updates.", "cssRootClass": ".cometchat-users", "primaryOutput": { diff --git a/ui-kit/react/components/video-bubble.mdx b/ui-kit/react/components/video-bubble.mdx index 7db441a29..4bc000912 100644 --- a/ui-kit/react/components/video-bubble.mdx +++ b/ui-kit/react/components/video-bubble.mdx @@ -10,7 +10,6 @@ description: "A self-extracting bubble that renders video attachments with thumb "component": "CometChatVideoBubble", "package": "@cometchat/chat-uikit-react", "import": "import { CometChatVideoBubble } from \"@cometchat/chat-uikit-react\";", - "cssImport": "import \"@cometchat/chat-uikit-react/styles\";", "description": "Self-extracting video bubble. Extracts video attachments, thumbnails, and caption from a MediaMessage.", "cssRootClass": ".cometchat-video-bubble", "selfExtracting": true, diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index 63ab1bf17..406db2ddd 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -170,7 +170,6 @@ import { useCometChatEvents, } from "@cometchat/chat-uikit-react"; import type { CometChatEvent } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function ChatView({ targetUid }: { targetUid: string }) { const [user, setUser] = useState(null); @@ -293,6 +292,7 @@ function App() { appId="YOUR_APP_ID" region="YOUR_REGION" authKey="YOUR_AUTH_KEY" + uid="cometchat-uid-1" > diff --git a/ui-kit/react/guide-group-chat-setup.mdx b/ui-kit/react/guide-group-chat-setup.mdx index cc66a765c..d54137f9d 100644 --- a/ui-kit/react/guide-group-chat-setup.mdx +++ b/ui-kit/react/guide-group-chat-setup.mdx @@ -34,7 +34,6 @@ Wrap your application in `CometChatProvider` and create a layout with a sidebar import { useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import { GroupChat } from "./GroupChat"; function App() { @@ -234,7 +233,6 @@ import { CometChatMessageComposer, CometChatMessageHeader, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function CreateGroupForm({ onCreate }: { onCreate: (group: CometChat.Group) => void }) { const [name, setName] = useState(""); diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index b65dcb3e9..674cbf439 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -38,7 +38,6 @@ import { CometChatMessageComposer, CometChatMessageHeader, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function App() { return ( @@ -172,7 +171,6 @@ import { useCometChatEvents, } from "@cometchat/chat-uikit-react"; import type { CometChatEvent } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function ChatWithPrivateMessaging() { const [user, setUser] = useState(null); diff --git a/ui-kit/react/guide-new-chat-creation.mdx b/ui-kit/react/guide-new-chat-creation.mdx index d58454a83..7f5ec9312 100644 --- a/ui-kit/react/guide-new-chat-creation.mdx +++ b/ui-kit/react/guide-new-chat-creation.mdx @@ -34,7 +34,6 @@ Wrap your application in `CometChatProvider` and create a layout that will hold import { useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import { NewChatApp } from "./NewChatApp"; function App() { @@ -266,7 +265,6 @@ import { CometChatMessageComposer, CometChatMessageHeader, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; type ChatTarget = | { type: "user"; entity: CometChat.User } diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index 03530a62a..7705dac4d 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -39,7 +39,6 @@ import { CometChatMessageComposer, CometChatMessageHeader, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import MessageSearchPanel from "./MessageSearchPanel"; function ChatWithSearch() { diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index ead1d71ea..31ad677e2 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -126,7 +126,6 @@ import { CometChatMessageHeader, CometChatThreadHeader, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function ChatWithThreads() { const [user, setUser] = useState(null); diff --git a/ui-kit/react/integration-astro.mdx b/ui-kit/react/integration-astro.mdx index bc6c15787..b03f44aab 100644 --- a/ui-kit/react/integration-astro.mdx +++ b/ui-kit/react/integration-astro.mdx @@ -14,7 +14,6 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install, | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | | Order | `init()` → `login()` → render. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | -| CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | Use `client:only="react"` directive — CometChat components cannot be server-rendered | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) | @@ -100,7 +99,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export default function CometChatApp() { const [chatUser, setChatUser] = useState(); diff --git a/ui-kit/react/integration-nextjs.mdx b/ui-kit/react/integration-nextjs.mdx index 3eb40750f..1e0eddae7 100644 --- a/ui-kit/react/integration-nextjs.mdx +++ b/ui-kit/react/integration-nextjs.mdx @@ -12,7 +12,6 @@ description: "Add CometChat to a Next.js (App Router) app in 4 steps: create pro | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | | Setup | Wrap app in `` | | Auth Key | Dev/testing only. Use `authToken` prop in production | -| CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | CometChat components must be loaded with `dynamic(() => import(...), { ssr: false })` | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -98,7 +97,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export default function CometChatClient() { const [chatUser, setChatUser] = useState(); diff --git a/ui-kit/react/integration-react-router.mdx b/ui-kit/react/integration-react-router.mdx index 7f878dfe5..deeb98cac 100644 --- a/ui-kit/react/integration-react-router.mdx +++ b/ui-kit/react/integration-react-router.mdx @@ -14,7 +14,6 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | | Order | `init()` → `login()` → render. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | -| CSS | `import "@cometchat/chat-uikit-react/styles";` | | SSR | N/A — client-side SPA by default | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [Astro](/ui-kit/react/integration-astro) | @@ -127,7 +126,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export default function ChatPage() { const [chatUser, setChatUser] = useState(); diff --git a/ui-kit/react/integration-react.mdx b/ui-kit/react/integration-react.mdx index 554050f25..186f0be3f 100644 --- a/ui-kit/react/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -12,7 +12,6 @@ description: "Add CometChat to a React.js app in 4 steps: create project, instal | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | | Setup | Wrap app in `` | | Auth Key | Dev/testing only. Use `authToken` prop in production | -| CSS | `import "@cometchat/chat-uikit-react/styles";` | | Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | | Other frameworks | [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -104,7 +103,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; function App() { const [chatUser, setChatUser] = useState(); diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx new file mode 100644 index 000000000..27b90da45 --- /dev/null +++ b/ui-kit/react/link/changelog.mdx @@ -0,0 +1,5 @@ +--- +title: "Changelog" +url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v7&expanded=true" +description: "Navigate to Changelog documentation." +--- diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index fc81a3b76..d052d2e9d 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -136,6 +136,48 @@ await CometChatUIKit.logout(); --- +## User Management + +Both methods require `authKey` in your UIKitSettings — they throw if it is missing. Intended for development/testing; in production, create and update users server-side via the REST API. + +### `CometChatUIKit.createUser(user)` + +Create a new user. + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +const user = new CometChat.User("new-uid"); +user.setName("Alice"); + +const created = await CometChatUIKit.createUser(user); +``` + +| Parameter | Type | Description | +| --- | --- | --- | +| `user` | `CometChat.User` | The user to create | + +**Returns:** `Promise` + +### `CometChatUIKit.updateUser(user)` + +Update an existing user. + +```tsx +const user = new CometChat.User("existing-uid"); +user.setName("Alice Updated"); + +const updated = await CometChatUIKit.updateUser(user); +``` + +| Parameter | Type | Description | +| --- | --- | --- | +| `user` | `CometChat.User` | The user to update | + +**Returns:** `Promise` + +--- + ## State Getters ### `CometChatUIKit.getLoggedInUser()` diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 510b307de..749e57b96 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -55,7 +55,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; export default function CometChatClient() { const [selectedUser, setSelectedUser] = useState(undefined); @@ -73,7 +72,12 @@ export default function CometChatClient() { }; return ( - +
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 2ece04914..50b2dbcdd 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -54,7 +54,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with @@ -71,7 +70,12 @@ export default function CometChatClient() { if (!chatUser) return
Loading chat...
; return ( - +
@@ -116,7 +120,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID @@ -133,7 +136,12 @@ export default function CometChatClient() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index e97d7f0b0..aa8e8b2bf 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -57,7 +57,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; type Tab = "chat" | "calls" | "users"; @@ -100,7 +99,12 @@ export default function CometChatClient() { }; return ( - +
diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index fd4fcabd4..dd1859407 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -40,7 +40,7 @@ Three sections working together: ## Full Code -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/App.tsx" import { useState } from "react"; @@ -52,7 +52,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./App.css"; function App() { @@ -71,7 +70,12 @@ function App() { }; return ( - +
diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 404833ab0..5d91456e4 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -40,7 +40,7 @@ Three components stacked vertically: ## Full Code -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/App.tsx" import { useEffect, useState } from "react"; @@ -51,7 +51,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./App.css"; const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with @@ -69,7 +68,12 @@ function App() { if (!chatUser) return
Loading chat...
; return ( - +
@@ -111,7 +115,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./App.css"; const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID @@ -129,7 +132,12 @@ function App() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index 12f61ae46..25f0fa839 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -41,7 +41,7 @@ Three sections working together: ## Full Code -Create a chat route component. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Create a chat route component. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/pages/ChatPage.tsx" import { useState } from "react"; @@ -53,7 +53,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./ChatPage.css"; export default function ChatPage() { @@ -72,7 +71,12 @@ export default function ChatPage() { }; return ( - +
diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index 64139db4d..fb3daa399 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -41,7 +41,7 @@ Three components stacked vertically: ## Full Code -Create a route component for the chat page. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Create a route component for the chat page. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/pages/DirectChatPage.tsx" import { useEffect, useState } from "react"; @@ -52,7 +52,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./DirectChatPage.css"; const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with @@ -70,7 +69,12 @@ export default function DirectChatPage() { if (!chatUser) return
Loading chat...
; return ( - +
@@ -131,7 +135,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./DirectChatPage.css"; const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID @@ -149,7 +152,12 @@ export default function DirectChatPage() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index b1a614bfe..5a31e8643 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -41,7 +41,7 @@ Three sections working together: ## Full Code -Create a route component for the tabbed chat page. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Create a route component for the tabbed chat page. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/pages/TabbedChatPage.tsx" import { useState } from "react"; @@ -55,7 +55,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./TabbedChatPage.css"; type Tab = "chat" | "calls" | "users"; @@ -99,7 +98,12 @@ export default function TabbedChatPage() { }; return ( - +
diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index a93d60af6..cd73f1b4b 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -40,7 +40,7 @@ Three sections working together: ## Full Code -Replace your `src/App.tsx` with the following. This assumes `init()` and `login()` already happen in `src/main.tsx` (as shown in the integration guide). +Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. ```tsx title="src/App.tsx" import { useState } from "react"; @@ -54,7 +54,6 @@ import { CometChatMessageList, CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/styles"; import "./App.css"; type Tab = "chat" | "calls" | "users"; @@ -98,7 +97,12 @@ function App() { }; return ( - +
diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index ced9448e2..64cb4a3b2 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -11,7 +11,6 @@ description: "Complete reference of all color CSS variables with light and dark | Key token | `--cometchat-primary-color` — brand/accent color | | Light theme | Defined in `:root, [data-theme='light']` | | Dark theme | Defined in `[data-theme='dark']` | -| Import | `import "@cometchat/chat-uikit-react/styles";` | diff --git a/ui-kit/react/theming.mdx b/ui-kit/react/theming.mdx index 14ca5fc53..bba83501f 100644 --- a/ui-kit/react/theming.mdx +++ b/ui-kit/react/theming.mdx @@ -8,7 +8,6 @@ description: "Customize colors, fonts, spacing, and component styles using CSS c | Field | Value | | --- | --- | | Theme prop | `theme="light"` or `theme="dark"` on `CometChatProvider` | -| CSS import | `import "@cometchat/chat-uikit-react/styles";` | | Root selector | `.cometchat` (wrapper div with `data-theme` attribute) | | Token prefix | `--cometchat-*` | | Built-in themes | `light` (default), `dark` | @@ -79,7 +78,6 @@ Override CSS variables to change the look of all components at once: Import this file after the UI Kit styles: ```tsx -import "@cometchat/chat-uikit-react/styles"; import "./cometchat-overrides.css"; ``` diff --git a/ui-kit/react/troubleshooting.mdx b/ui-kit/react/troubleshooting.mdx index 79a1bc2fe..20f8b32d9 100644 --- a/ui-kit/react/troubleshooting.mdx +++ b/ui-kit/react/troubleshooting.mdx @@ -25,7 +25,6 @@ Mark the component boundary containing `CometChatProvider` as client-only. In Ne 'use client'; import { CometChatProvider } from '@cometchat/chat-uikit-react'; -import '@cometchat/chat-uikit-react/styles'; export function ChatProvider({ children }: { children: React.ReactNode }) { return ( @@ -124,7 +123,6 @@ Verify your credentials match your CometChat dashboard and use the `onError` cal ```tsx import { CometChatProvider } from '@cometchat/chat-uikit-react'; -import '@cometchat/chat-uikit-react/styles'; function App() { return ( @@ -158,21 +156,13 @@ Components render with default styling and ignore the theme you've configured. C ### Root Cause -The theme system relies on two things working together: -1. The CSS styles file being imported (provides the CSS custom property declarations) -2. The `data-theme` attribute being set on a parent element (activates theme-specific variable values) - -If either is missing, the theme won't apply. +The theme is activated by the `data-theme` attribute on a parent element, which `CometChatProvider`'s `theme` prop sets for you. If the `theme` prop is missing — or set to a custom theme with no matching variable definitions — the theme won't apply. ### Solution -Ensure both the CSS import and the `theme` prop are present: +Set the `theme` prop on `CometChatProvider`: ```tsx -// 1. Import the styles entry point (required for CSS custom properties) -import '@cometchat/chat-uikit-react/styles'; - -// 2. Set the theme via CometChatProvider import { CometChatProvider } from '@cometchat/chat-uikit-react'; function App() { @@ -205,54 +195,3 @@ Then pass the custom theme name to the provider: ```tsx ``` - ---- - -## Missing CSS Imports - -### Symptom - -Components render as unstyled HTML elements — no backgrounds, no spacing, no borders. The layout is broken and elements stack vertically without proper structure. - -### Root Cause - -The UI Kit's styles are distributed as a separate CSS entry point. Without importing it, none of the CSS custom properties or component styles are available in the document. - -### Solution - -Add the styles import at your application's entry point, before any CometChat components render: - -```tsx -// main.tsx or App.tsx — import styles at the top level -import '@cometchat/chat-uikit-react/styles'; -import { CometChatProvider } from '@cometchat/chat-uikit-react'; - -function App() { - return ( - - {/* Components are now styled */} - - ); -} -``` - -For Next.js, add the import in your root layout: - -```tsx -// app/layout.tsx -import '@cometchat/chat-uikit-react/styles'; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); -} -``` - -The import path `@cometchat/chat-uikit-react/styles` maps to the `"./styles"` export in the package's exports map, which resolves to the compiled CSS file containing all component styles and theme variables. diff --git a/ui-kit/react/v4/link/changelog.mdx b/ui-kit/react/v4/link/changelog.mdx new file mode 100644 index 000000000..f28929d23 --- /dev/null +++ b/ui-kit/react/v4/link/changelog.mdx @@ -0,0 +1,5 @@ +--- +title: "Changelog" +url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v4&expanded=true" +description: "Navigate to Changelog documentation." +--- diff --git a/ui-kit/react/v4/link/figma.mdx b/ui-kit/react/v4/link/figma.mdx new file mode 100644 index 000000000..d33e50f01 --- /dev/null +++ b/ui-kit/react/v4/link/figma.mdx @@ -0,0 +1,5 @@ +--- +title: "Figma Design" +url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web" +description: "Navigate to Figma Design documentation." +--- diff --git a/ui-kit/react/v4/link/sample.mdx b/ui-kit/react/v4/link/sample.mdx new file mode 100644 index 000000000..03eee2e0f --- /dev/null +++ b/ui-kit/react/v4/link/sample.mdx @@ -0,0 +1,5 @@ +--- +title: "React Sample App" +url: "https://github.com/cometchat/cometchat-sample-app-react/tree/v4" +description: "Navigate to React Sample App documentation." +--- diff --git a/ui-kit/react/v5/link/changelog.mdx b/ui-kit/react/v5/link/changelog.mdx new file mode 100644 index 000000000..5f7ffa69a --- /dev/null +++ b/ui-kit/react/v5/link/changelog.mdx @@ -0,0 +1,5 @@ +--- +title: "Changelog" +url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v5&expanded=true" +description: "Navigate to Changelog documentation." +--- diff --git a/ui-kit/react/v5/link/figma.mdx b/ui-kit/react/v5/link/figma.mdx new file mode 100644 index 000000000..d33e50f01 --- /dev/null +++ b/ui-kit/react/v5/link/figma.mdx @@ -0,0 +1,5 @@ +--- +title: "Figma Design" +url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web" +description: "Navigate to Figma Design documentation." +--- diff --git a/ui-kit/react/v5/link/sample.mdx b/ui-kit/react/v5/link/sample.mdx new file mode 100644 index 000000000..fb4ec549e --- /dev/null +++ b/ui-kit/react/v5/link/sample.mdx @@ -0,0 +1,5 @@ +--- +title: "React Sample App" +url: "https://github.com/cometchat/cometchat-uikit-react/tree/v5/sample-app" +description: "Navigate to React Sample App documentation." +--- From 55a58b4174be44de7905cd566bcc182298c64ace Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Wed, 17 Jun 2026 17:37:05 +0530 Subject: [PATCH 23/27] plugins docs fix --- docs.json | 13 -- ui-kit/react/components/audio-bubble.mdx | 2 +- .../react/components/call-action-bubble.mdx | 4 +- .../collaborative-document-bubble.mdx | 2 +- .../collaborative-whiteboard-bubble.mdx | 2 +- ui-kit/react/components/delete-bubble.mdx | 4 +- ui-kit/react/components/file-bubble.mdx | 2 +- .../react/components/group-action-bubble.mdx | 4 +- ui-kit/react/components/image-bubble.mdx | 2 +- ui-kit/react/components/poll-bubble.mdx | 2 +- ui-kit/react/components/sticker-bubble.mdx | 2 +- ui-kit/react/components/text-bubble.mdx | 2 +- ui-kit/react/components/video-bubble.mdx | 2 +- ui-kit/react/plugins/ai.mdx | 94 -------- ui-kit/react/plugins/audio.mdx | 40 ---- ui-kit/react/plugins/call-action.mdx | 40 ---- .../react/plugins/collaborative-document.mdx | 38 ---- .../plugins/collaborative-whiteboard.mdx | 38 ---- ui-kit/react/plugins/custom-plugin.mdx | 93 ++++---- ui-kit/react/plugins/delete.mdx | 38 ---- ui-kit/react/plugins/file.mdx | 38 ---- ui-kit/react/plugins/group-action.mdx | 40 ---- ui-kit/react/plugins/image.mdx | 47 ---- ui-kit/react/plugins/overview.mdx | 211 +++++------------- ui-kit/react/plugins/polls.mdx | 38 ---- ui-kit/react/plugins/stickers.mdx | 38 ---- ui-kit/react/plugins/text-formatters.mdx | 53 +---- ui-kit/react/plugins/text.mdx | 65 ------ ui-kit/react/plugins/video.mdx | 38 ---- 29 files changed, 132 insertions(+), 860 deletions(-) delete mode 100644 ui-kit/react/plugins/ai.mdx delete mode 100644 ui-kit/react/plugins/audio.mdx delete mode 100644 ui-kit/react/plugins/call-action.mdx delete mode 100644 ui-kit/react/plugins/collaborative-document.mdx delete mode 100644 ui-kit/react/plugins/collaborative-whiteboard.mdx delete mode 100644 ui-kit/react/plugins/delete.mdx delete mode 100644 ui-kit/react/plugins/file.mdx delete mode 100644 ui-kit/react/plugins/group-action.mdx delete mode 100644 ui-kit/react/plugins/image.mdx delete mode 100644 ui-kit/react/plugins/polls.mdx delete mode 100644 ui-kit/react/plugins/stickers.mdx delete mode 100644 ui-kit/react/plugins/text.mdx delete mode 100644 ui-kit/react/plugins/video.mdx diff --git a/docs.json b/docs.json index 696320d4f..50c8578ce 100644 --- a/docs.json +++ b/docs.json @@ -562,19 +562,6 @@ "group": "Plugins", "pages": [ "ui-kit/react/plugins/overview", - "ui-kit/react/plugins/text", - "ui-kit/react/plugins/image", - "ui-kit/react/plugins/video", - "ui-kit/react/plugins/file", - "ui-kit/react/plugins/audio", - "ui-kit/react/plugins/stickers", - "ui-kit/react/plugins/polls", - "ui-kit/react/plugins/collaborative-document", - "ui-kit/react/plugins/collaborative-whiteboard", - "ui-kit/react/plugins/ai", - "ui-kit/react/plugins/group-action", - "ui-kit/react/plugins/call-action", - "ui-kit/react/plugins/delete", "ui-kit/react/plugins/custom-plugin", "ui-kit/react/plugins/text-formatters" ] diff --git a/ui-kit/react/components/audio-bubble.mdx b/ui-kit/react/components/audio-bubble.mdx index 85a51144d..789c504ae 100644 --- a/ui-kit/react/components/audio-bubble.mdx +++ b/ui-kit/react/components/audio-bubble.mdx @@ -123,7 +123,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/call-action-bubble.mdx b/ui-kit/react/components/call-action-bubble.mdx index c34cb50ab..16032d5a1 100644 --- a/ui-kit/react/components/call-action-bubble.mdx +++ b/ui-kit/react/components/call-action-bubble.mdx @@ -29,7 +29,7 @@ description: "A self-extracting bubble that renders call status system messages `CometChatCallActionBubble` renders a centered, pill-shaped call status system message — "Missed Call", "Call Ended", "Outgoing Call", etc. It is **self-extracting**: pass the SDK call message and the bubble derives the status text, the status icon, and whether to use the error (missed-call) color itself, reading the logged-in user and locale from hooks. This means it works standalone — no plugin required. -It is the component the [Call Action Plugin](/ui-kit/react/plugins/call-action) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. +It is the component the [Call Action Plugin](/ui-kit/react/plugins/overview#built-in-plugins) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. **Live Preview** — interact with the call action bubble. @@ -164,7 +164,7 @@ Override a specific icon's mask: ## Next Steps - + How call status messages are resolved and rendered in the message list diff --git a/ui-kit/react/components/collaborative-document-bubble.mdx b/ui-kit/react/components/collaborative-document-bubble.mdx index 094ceb715..daeeef335 100644 --- a/ui-kit/react/components/collaborative-document-bubble.mdx +++ b/ui-kit/react/components/collaborative-document-bubble.mdx @@ -134,7 +134,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx index ed7b81f9d..7ad4dd731 100644 --- a/ui-kit/react/components/collaborative-whiteboard-bubble.mdx +++ b/ui-kit/react/components/collaborative-whiteboard-bubble.mdx @@ -134,7 +134,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/delete-bubble.mdx b/ui-kit/react/components/delete-bubble.mdx index 456bfc7f5..87511df46 100644 --- a/ui-kit/react/components/delete-bubble.mdx +++ b/ui-kit/react/components/delete-bubble.mdx @@ -25,7 +25,7 @@ description: "A presentational bubble that renders a 'This message was deleted' ## Overview -`CometChatDeleteBubble` renders the placeholder shown in place of a deleted message — italic, muted text reading "This message was deleted". It is a presentational component: pass `isSentByMe` for sent-vs-received styling and an optional `text` override. The [Delete Plugin](/ui-kit/react/plugins/delete) renders it automatically for any message whose `getDeletedAt()` is non-null. +`CometChatDeleteBubble` renders the placeholder shown in place of a deleted message — italic, muted text reading "This message was deleted". It is a presentational component: pass `isSentByMe` for sent-vs-received styling and an optional `text` override. The [Delete Plugin](/ui-kit/react/plugins/overview#built-in-plugins) renders it automatically for any message whose `getDeletedAt()` is non-null. **Live Preview** — interact with the delete bubble. @@ -105,7 +105,7 @@ Additional CSS class applied to the root element. ## Next Steps - + How deleted messages are resolved and rendered diff --git a/ui-kit/react/components/file-bubble.mdx b/ui-kit/react/components/file-bubble.mdx index 2f8e26c2f..eef4c8d72 100644 --- a/ui-kit/react/components/file-bubble.mdx +++ b/ui-kit/react/components/file-bubble.mdx @@ -122,7 +122,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/group-action-bubble.mdx b/ui-kit/react/components/group-action-bubble.mdx index e9be54aa0..64b9882e5 100644 --- a/ui-kit/react/components/group-action-bubble.mdx +++ b/ui-kit/react/components/group-action-bubble.mdx @@ -29,7 +29,7 @@ description: "A self-extracting bubble that renders group action system messages `CometChatGroupActionBubble` renders a centered, pill-shaped group action system message — "Alice joined", "Admin kicked Bob", "Admin made Bob a moderator", etc. It is **self-extracting**: pass the SDK group-action message and the bubble derives the localized action text itself (via the shared action-text utility), reading the locale from hooks. This means it works standalone — no plugin required. -It is the component the [Group Action Plugin](/ui-kit/react/plugins/group-action) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. Group action bubbles have no icon and no sender attribution. +It is the component the [Group Action Plugin](/ui-kit/react/plugins/overview#built-in-plugins) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. Group action bubbles have no icon and no sender attribution. **Live Preview** — interact with the group action bubble. @@ -117,7 +117,7 @@ The bubble renders through the `CometChatActionBubble` primitive, so it uses the ## Next Steps - + How group membership messages are resolved and rendered in the message list diff --git a/ui-kit/react/components/image-bubble.mdx b/ui-kit/react/components/image-bubble.mdx index b86404252..31f9ea946 100644 --- a/ui-kit/react/components/image-bubble.mdx +++ b/ui-kit/react/components/image-bubble.mdx @@ -150,7 +150,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/poll-bubble.mdx b/ui-kit/react/components/poll-bubble.mdx index 17db19ac7..5d0304e1d 100644 --- a/ui-kit/react/components/poll-bubble.mdx +++ b/ui-kit/react/components/poll-bubble.mdx @@ -152,7 +152,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/sticker-bubble.mdx b/ui-kit/react/components/sticker-bubble.mdx index 23a546ba7..786f159aa 100644 --- a/ui-kit/react/components/sticker-bubble.mdx +++ b/ui-kit/react/components/sticker-bubble.mdx @@ -106,7 +106,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, keyboard, and conversation preview diff --git a/ui-kit/react/components/text-bubble.mdx b/ui-kit/react/components/text-bubble.mdx index 1194791b5..2e6b421cb 100644 --- a/ui-kit/react/components/text-bubble.mdx +++ b/ui-kit/react/components/text-bubble.mdx @@ -155,7 +155,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/components/video-bubble.mdx b/ui-kit/react/components/video-bubble.mdx index 4bc000912..ef506d87f 100644 --- a/ui-kit/react/components/video-bubble.mdx +++ b/ui-kit/react/components/video-bubble.mdx @@ -123,7 +123,7 @@ Additional CSS class applied to the root element. ## Next Steps - + Plugin behavior, context menu, and conversation preview diff --git a/ui-kit/react/plugins/ai.mdx b/ui-kit/react/plugins/ai.mdx deleted file mode 100644 index 2f0e96f71..000000000 --- a/ui-kit/react/plugins/ai.mdx +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: "AI Plugin" -description: "Renders AI assistant messages including streaming responses, tool call arguments, and tool results." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `ai` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `assistant`, `toolArguments`, `toolResults`, `run_started` | -| Message Categories | `agentic`, `custom` | -| Included by Default | No (add via `plugins` prop) | -| Bubble Component | `CometChatAIAssistantBubble`, `CometChatStreamMessageBubble`, `CometChatToolCallArgumentBubble`, `CometChatToolCallResultBubble` | -| Conversation Preview | First 80 chars of response / Tool call / Tool result | -| Context Menu | None | - - - -## Overview - -The AI plugin handles messages in the `agentic` category. It renders three types of AI-generated content: - -- **Assistant messages** — completed AI responses with markdown formatting -- **Tool call arguments** — JSON display of arguments passed to a tool -- **Tool results** — JSON display of results returned by a tool -- **Streaming messages** — real-time streaming bubble while the AI is generating a response - - - ---- - -## Installation - -The AI plugin is NOT included in the default plugins. Add it explicitly: - -```tsx -import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; - - - - -``` - ---- - -## Message Types - -| Type | Category | What it renders | -| --- | --- | --- | -| `assistant` | `agentic` | Completed AI response with markdown | -| `toolArguments` | `agentic` | Tool call arguments as formatted JSON | -| `toolResults` | `agentic` | Tool call results as formatted JSON | -| `run_started` | `custom` | Streaming placeholder while AI generates | - ---- - -## Context Menu Options - -None — AI messages are system-generated and have no context menu options. - ---- - -## Conversation Preview - -| Type | Preview text | -| --- | --- | -| `assistant` | First 80 characters of the response (markdown stripped) | -| `toolArguments` | "Tool call" | -| `toolResults` | "Tool result" | - ---- - -## Preloading - -The AI Assistant Chat panel can be preloaded on hover/focus to reduce perceived latency: - -```tsx -import { preloadAIAssistantChat } from "@cometchat/chat-uikit-react/plugins/ai"; - -// Call on AI button hover -onMouseEnter={() => preloadAIAssistantChat()} -``` - ---- - diff --git a/ui-kit/react/plugins/audio.mdx b/ui-kit/react/plugins/audio.mdx deleted file mode 100644 index e4b5a3340..000000000 --- a/ui-kit/react/plugins/audio.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "Audio Plugin" -description: "Renders audio messages with waveform visualization, playback controls, and download." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `audio` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `audio` | -| Message Categories | `message` | -| Included by Default | Yes | -| Bubble Component | `CometChatAudioBubble` | -| Conversation Preview | Audio | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Audio plugin handles messages of type `audio` in category `message`. It renders an audio player with waveform visualization (via WaveSurfer.js), play/pause controls, duration display, and a download button. The plugin routes audio messages to [`CometChatAudioBubble`](/ui-kit/react/components/audio-bubble). - - - ---- - -## Context Menu Options - -Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). - ---- - -## Conversation Preview - -Returns: `Audio` (localized via `conversation_subtitle_audio` key) - ---- - diff --git a/ui-kit/react/plugins/call-action.mdx b/ui-kit/react/plugins/call-action.mdx deleted file mode 100644 index d9b881838..000000000 --- a/ui-kit/react/plugins/call-action.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "Call Action Plugin" -description: "Renders call action system messages like 'Missed Call', 'Call Ended', 'Incoming Call'." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `call-action` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `audio`, `video` | -| Message Categories | `call` | -| Included by Default | Yes | -| Bubble Component | `CometChatCallActionBubble` (renders the `CometChatActionBubble` primitive) | -| Conversation Preview | Video call / Voice call | -| Context Menu | None | - - - -## Overview - -The Call Action plugin handles messages of type `audio` and `video` in category `call`. These are system messages generated when calls are initiated, answered, missed, or ended. They render as centered, pill-shaped bubbles with a call status icon. - -The plugin routes call messages to [`CometChatCallActionBubble`](/ui-kit/react/components/call-action-bubble). - ---- - -## Context Menu Options - -None — call action messages have no context menu. - ---- - -## Conversation Preview - -Returns: `Video call` or `Voice call` based on the call type (localized). - ---- - diff --git a/ui-kit/react/plugins/collaborative-document.mdx b/ui-kit/react/plugins/collaborative-document.mdx deleted file mode 100644 index 2a5d7f179..000000000 --- a/ui-kit/react/plugins/collaborative-document.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Collaborative Document Plugin" -description: "Renders collaborative document messages with a banner and 'Open Document' button." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `collaborative-document` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `extension_document` | -| Message Categories | `custom` | -| Included by Default | Yes | -| Bubble Component | `CometChatCollaborativeDocumentBubble` | -| Conversation Preview | Collaborative Document | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Collaborative Document plugin handles messages of type `extension_document` in category `custom`. It renders a card with a document banner image, title, subtitle, and an "Open Document" button that launches the collaborative editor in a new window. The plugin routes document messages to [`CometChatCollaborativeDocumentBubble`](/ui-kit/react/components/collaborative-document-bubble). - ---- - -## Context Menu Options - -Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately. - ---- - -## Conversation Preview - -Returns: `Collaborative Document` (localized via `conversation_subtitle_collaborative_document` key) - ---- - diff --git a/ui-kit/react/plugins/collaborative-whiteboard.mdx b/ui-kit/react/plugins/collaborative-whiteboard.mdx deleted file mode 100644 index 62fea785d..000000000 --- a/ui-kit/react/plugins/collaborative-whiteboard.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Collaborative Whiteboard Plugin" -description: "Renders collaborative whiteboard messages with a banner and 'Open Whiteboard' button." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `collaborative-whiteboard` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `extension_whiteboard` | -| Message Categories | `custom` | -| Included by Default | Yes | -| Bubble Component | `CometChatCollaborativeWhiteboardBubble` | -| Conversation Preview | Collaborative Whiteboard | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Collaborative Whiteboard plugin handles messages of type `extension_whiteboard` in category `custom`. It renders a card with a whiteboard banner image, title, subtitle, and an "Open Whiteboard" button that launches the whiteboard in a new window. The plugin routes whiteboard messages to [`CometChatCollaborativeWhiteboardBubble`](/ui-kit/react/components/collaborative-whiteboard-bubble). - ---- - -## Context Menu Options - -Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately. - ---- - -## Conversation Preview - -Returns: `Collaborative Whiteboard` (localized via `conversation_subtitle_collaborative_whiteboard` key) - ---- - diff --git a/ui-kit/react/plugins/custom-plugin.mdx b/ui-kit/react/plugins/custom-plugin.mdx index 11c7e10b5..44bada84e 100644 --- a/ui-kit/react/plugins/custom-plugin.mdx +++ b/ui-kit/react/plugins/custom-plugin.mdx @@ -1,21 +1,14 @@ --- title: "Creating a Custom Plugin" -description: "Step-by-step guide to building a custom message plugin for rendering, context menus, and conversation previews." +sidebarTitle: "Custom Plugin" +description: "Build a custom message plugin for rendering, context menus, and conversation previews, plus the plugin interface and context reference." --- -## Overview - -Custom plugins let you handle any message type with your own rendering logic. This guide walks through building a complete "Location" plugin that: - -1. Renders a map preview bubble -2. Provides context menu options -3. Shows a preview in the conversations list - ---- +Custom plugins let you handle any message type with your own rendering logic. This walkthrough builds a complete "Location" plugin that renders a map preview, provides context menu options, and shows a conversation preview. ## Step 1: Define the Plugin -Create a file for your plugin that implements `CometChatMessagePlugin`: +Create a file that implements `CometChatMessagePlugin`: ```tsx title="src/plugins/LocationPlugin.tsx" import React from "react"; @@ -111,8 +104,6 @@ export const LocationPlugin: CometChatMessagePlugin = { }; ``` ---- - ## Step 2: Register the Plugin Pass your plugin to `CometChatProvider`: @@ -138,8 +129,6 @@ function App() { Your plugin is appended after the default plugins. Since resolution is first-match, default plugins handle their types first, and your plugin handles `"location"` messages. ---- - ## Step 3: Send a Location Message Use the CometChat SDK to send a custom message with type `"location"`: @@ -160,12 +149,8 @@ async function sendLocation(receiverUid: string, lat: number, lng: number) { } ``` ---- - ## Step 4: Style the Bubble -Add CSS for your bubble: - ```css title="src/plugins/LocationPlugin.css" .location-bubble { padding: 4px; @@ -178,36 +163,64 @@ Add CSS for your bubble: } ``` ---- - -## Plugin Interface Quick Reference +## Plugin Interface Reference ```typescript interface CometChatMessagePlugin { - id: string; // Unique identifier - messageTypes: string[]; // SDK message types to handle - messageCategories: string[]; // SDK message categories to handle + /** Unique plugin identifier. */ + id: string; + + /** SDK message types this plugin handles (e.g., ["text"], ["image"]). */ + messageTypes: string[]; - // Required - renderBubble(message, context): ReactNode; + /** SDK message categories this plugin handles (e.g., ["message"], ["custom"]). */ + messageCategories: string[]; - // Optional - getOptions?(message, context): MessageOption[]; - getLastMessagePreview?(message, loggedInUser, t?): string; + /** Render the bubble content for a message. */ + renderBubble(message: BaseMessage, context: PluginContext): ReactNode; + + /** Return context menu options for a message. */ + getOptions?(message: BaseMessage, context: PluginContext): MessageOption[]; + + /** Return plain-text preview for the conversation list subtitle. */ + getLastMessagePreview?(message: BaseMessage, loggedInUser: User, t?: (key: string) => string): string; + + /** Return text formatters (only relevant for text plugin). */ getTextFormatters?(): CometChatTextFormatter[]; - // View slot overrides (optional) - renderLeadingView?(message, context): ReactNode; - renderHeaderView?(message, context): ReactNode; - renderFooterView?(message, context): ReactNode; - renderBottomView?(message, context): ReactNode; - renderStatusInfoView?(message, context): ReactNode; - renderReplyView?(message, context): ReactNode; - renderThreadView?(message, context): ReactNode; + // --- View Slot Methods (optional) --- + renderLeadingView?(message: BaseMessage, context: PluginContext): ReactNode; + renderHeaderView?(message: BaseMessage, context: PluginContext): ReactNode; + renderFooterView?(message: BaseMessage, context: PluginContext): ReactNode; + renderBottomView?(message: BaseMessage, context: PluginContext): ReactNode; + renderStatusInfoView?(message: BaseMessage, context: PluginContext): ReactNode; + renderReplyView?(message: BaseMessage, context: PluginContext): ReactNode; + renderThreadView?(message: BaseMessage, context: PluginContext): ReactNode; } ``` ---- +## Plugin Context + +The `context` object passed to every plugin method: + +| Field | Type | Description | +| --- | --- | --- | +| `loggedInUser` | `CometChat.User` | The currently logged-in user | +| `group` | `CometChat.Group \| undefined` | The group (if group chat) | +| `alignment` | `"left" \| "right" \| "center"` | Bubble alignment | +| `theme` | `"light" \| "dark"` | Current theme | +| `getLocalizedString` | `(key: string) => string` | Localization function | +| `onDeleteMessage` | `(msg) => void` | Delete a message | +| `onEditMessage` | `(msg) => void` | Enter edit mode | +| `onReplyMessage` | `(msg) => void` | Set reply-to target | +| `onThreadClick` | `(msg) => void` | Open thread view | +| `onReactToMessage` | `(msg) => void` | Open emoji picker | +| `onMessageInfo` | `(msg) => void` | Open message info panel | +| `onMarkAsUnread` | `(msg) => void` | Mark as unread | +| `onFlagMessage` | `(msg) => void` | Open flag/report dialog | +| `showToast` | `(text) => void` | Show a toast notification | +| `getTextFormatters` | `() => Formatter[]` | Get text formatters for caption rendering | +| `publish` | `(event) => void` | Publish a UI event | ## Tips @@ -215,4 +228,4 @@ interface CometChatMessagePlugin { - **Use `context.getLocalizedString`** — for any user-facing text in options or bubbles - **Return `[]` from `getOptions`** — for system messages that shouldn't have a context menu - **Keep `getLastMessagePreview` short** — max ~100 characters, plain text only (no HTML) -- **Test with `messageTypes` array** — a single plugin can handle multiple types (like the Call Action plugin handles both `audio` and `video` in the `call` category) +- **A single plugin can handle multiple types** — like the Call Action plugin handles both `audio` and `video` in the `call` category diff --git a/ui-kit/react/plugins/delete.mdx b/ui-kit/react/plugins/delete.mdx deleted file mode 100644 index fd23351e0..000000000 --- a/ui-kit/react/plugins/delete.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Delete Plugin" -description: "Renders deleted messages with a 'This message was deleted' placeholder." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `delete` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | (any deleted message) | -| Message Categories | (any) | -| Included by Default | Yes | -| Bubble Component | `CometChatDeleteBubble` | -| Conversation Preview | This message was deleted | -| Context Menu | None | - - - -## Overview - -The Delete plugin handles any message that has been deleted (where `getDeletedAt()` returns a non-null value). It renders a placeholder bubble indicating the message was removed. The plugin renders [`CometChatDeleteBubble`](/ui-kit/react/components/delete-bubble) with the appropriate styling based on the message sender. - ---- - -## Context Menu Options - -None — deleted messages have no context menu options. - ---- - -## Conversation Preview - -Returns: `This message was deleted` (localized via `message_deleted` key) - ---- - diff --git a/ui-kit/react/plugins/file.mdx b/ui-kit/react/plugins/file.mdx deleted file mode 100644 index b478193c5..000000000 --- a/ui-kit/react/plugins/file.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "File Plugin" -description: "Renders file messages with file icon, name, size, and download button." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `file` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `file` | -| Message Categories | `message` | -| Included by Default | Yes | -| Bubble Component | `CometChatFileBubble` | -| Conversation Preview | File | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The File plugin handles messages of type `file` in category `message`. It renders a file card showing the file name, size, extension icon, and a download button with progress indicator. The plugin routes file messages to [`CometChatFileBubble`](/ui-kit/react/components/file-bubble). - ---- - -## Context Menu Options - -Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately). - ---- - -## Conversation Preview - -Returns: `File` (localized via `conversation_subtitle_file` key) - ---- - diff --git a/ui-kit/react/plugins/group-action.mdx b/ui-kit/react/plugins/group-action.mdx deleted file mode 100644 index 490fd1328..000000000 --- a/ui-kit/react/plugins/group-action.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "Group Action Plugin" -description: "Renders group action system messages like 'User joined', 'User left', 'User was kicked'." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `group-action` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `groupMember` | -| Message Categories | `action` | -| Included by Default | Yes | -| Bubble Component | `CometChatGroupActionBubble` (renders the `CometChatActionBubble` primitive) | -| Conversation Preview | Action text (e.g., 'Alice joined') | -| Context Menu | None | - - - -## Overview - -The Group Action plugin handles messages of type `groupMember` in category `action`. These are system messages generated by the SDK when group membership changes occur. They render as centered, pill-shaped bubbles with no sender attribution. - -The plugin routes group action messages to [`CometChatGroupActionBubble`](/ui-kit/react/components/group-action-bubble). - ---- - -## Context Menu Options - -None — group action messages have no context menu. - ---- - -## Conversation Preview - -Returns the action text (truncated to 100 characters). Falls back to `Group action` if text generation fails. - ---- - diff --git a/ui-kit/react/plugins/image.mdx b/ui-kit/react/plugins/image.mdx deleted file mode 100644 index d55b2532c..000000000 --- a/ui-kit/react/plugins/image.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: "Image Plugin" -description: "Renders image messages with multi-image grid, captions, and fullscreen gallery viewer." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `image` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `image` | -| Message Categories | `message` | -| Included by Default | Yes | -| Bubble Component | `CometChatImageBubble` | -| Conversation Preview | Photo | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Image plugin handles messages of type `image` in category `message`. It renders images in a responsive grid layout with optional captions. Clicking an image opens a fullscreen gallery viewer. The plugin routes image messages to [`CometChatImageBubble`](/ui-kit/react/components/image-bubble). - ---- - -## Context Menu Options - -| Option | Condition | Action | -| --- | --- | --- | -| React | Always | Opens emoji picker | -| Reply | Always | Sets reply-to in composer | -| Reply in Thread | Not in thread | Opens thread view | -| Info | Sender only | Opens message info panel | -| Delete | Sender only | Shows delete confirmation | -| Report | Receiver only | Opens flag/report dialog | -| Mark Unread | Receiver only | Marks message as unread | -| Message Privately | Receiver, group only | Opens 1:1 chat with sender | - ---- - -## Conversation Preview - -Returns: `Photo` (localized via `conversation_subtitle_image` key) - ---- - diff --git a/ui-kit/react/plugins/overview.mdx b/ui-kit/react/plugins/overview.mdx index 4bcbf1c2c..a74553a70 100644 --- a/ui-kit/react/plugins/overview.mdx +++ b/ui-kit/react/plugins/overview.mdx @@ -1,7 +1,7 @@ --- title: "Plugins" sidebarTitle: "Overview" -description: "The plugin system controls how messages are rendered, what options appear in context menus, and what preview text shows in conversations." +description: "How the plugin system renders messages, the built-in plugins, and the AI plugin." --- ## What is a Plugin? @@ -14,14 +14,12 @@ A plugin owns one or more message types. It tells the UI Kit: Every message that appears in the UI is rendered by a plugin. If no plugin matches a message type, the message is not displayed. -{/* TODO:IMAGE - Diagram showing a message bubble with labeled regions: header, content (plugin), footer, status info */} +Plugins are a thin routing layer — they decide which bubble component renders a message and provide context menu options and conversation previews. The **bubble components themselves are standalone** and documented under [Message Bubbles](/ui-kit/react/components/message-bubble); this page links each plugin to its component instead of repeating that detail. --- ## Where Plugins Are Used -Plugins act as a routing layer — they decide which bubble component to render for a given message type and provide context menu options and conversation previews. The bubble components themselves are standalone and can be used independently of the plugin system. - | Location | Plugin Method | What it does | | --- | --- | --- | | **Message List** | `renderBubble()` | Routes to the appropriate bubble component (e.g., `CometChatTextBubble`, `CometChatImageBubble`) | @@ -31,27 +29,6 @@ Plugins act as a routing layer — they decide which bubble component to render --- -## Default Plugins - -These plugins are included automatically — no configuration needed: - -| Plugin | Message Type | What it renders | -| --- | --- | --- | -| [Text](/ui-kit/react/plugins/text) | `text` | Formatted text with mentions, URLs, markdown | -| [Image](/ui-kit/react/plugins/image) | `image` | Image grid with captions, click-to-fullscreen | -| [Video](/ui-kit/react/plugins/video) | `video` | Video player with thumbnail | -| [File](/ui-kit/react/plugins/file) | `file` | File card with download button | -| [Audio](/ui-kit/react/plugins/audio) | `audio` | Waveform audio player | -| [Polls](/ui-kit/react/plugins/polls) | `extension_poll` | Poll creation + voting bubble | -| [Stickers](/ui-kit/react/plugins/stickers) | `extension_sticker` | Sticker image bubble | -| [Collaborative Document](/ui-kit/react/plugins/collaborative-document) | `extension_document` | Document collaboration link | -| [Collaborative Whiteboard](/ui-kit/react/plugins/collaborative-whiteboard) | `extension_whiteboard` | Whiteboard collaboration link | -| [Group Action](/ui-kit/react/plugins/group-action) | `groupMember` | "User joined", "User left" system messages | -| [Call Action](/ui-kit/react/plugins/call-action) | `audio`, `video` (call category) | "Missed call", "Call ended" system messages | -| [Delete](/ui-kit/react/plugins/delete) | Any (deleted) | "This message was deleted" placeholder | - ---- - ## How Plugin Resolution Works When the UI Kit needs to render a message, it asks the **Plugin Registry** to find the right plugin: @@ -92,162 +69,78 @@ function App() { } ``` -Your custom plugins are appended after the defaults. Since first match wins, default plugins take priority for their message types. To override a default plugin, you'd need to use the manual approach with a custom plugin array. +--- + +## Built-in Plugins + +These plugins are included automatically — no configuration needed. Each routes its message type to a bubble component; follow the component link for the full rendering behavior, props, and CSS. + +| Plugin | Message type(s) | What it renders | Component | +| --- | --- | --- | --- | +| **Text** | `text` | Formatted text with @mentions, clickable URLs, and markdown | [Text Bubble](/ui-kit/react/components/text-bubble) | +| **Image** | `image` | Responsive image grid with captions and a fullscreen viewer | [Image Bubble](/ui-kit/react/components/image-bubble) | +| **Video** | `video` | Inline player (single) or thumbnail grid with play overlays (multiple) | [Video Bubble](/ui-kit/react/components/video-bubble) | +| **File** | `file` | File card with name, size, type icon, and download | [File Bubble](/ui-kit/react/components/file-bubble) | +| **Audio** | `audio` | Audio player with waveform, play/pause, duration, and download | [Audio Bubble](/ui-kit/react/components/audio-bubble) | +| **Polls** | `extension_poll` | Interactive poll with voting and live results | [Poll Bubble](/ui-kit/react/components/poll-bubble) | +| **Stickers** | `extension_sticker` | Sticker image extracted from the message metadata | [Sticker Bubble](/ui-kit/react/components/sticker-bubble) | +| **Collaborative Document** | `extension_document` | Document card with an "Open Document" button | [Collaborative Document Bubble](/ui-kit/react/components/collaborative-document-bubble) | +| **Collaborative Whiteboard** | `extension_whiteboard` | Whiteboard card with an "Open Whiteboard" button | [Collaborative Whiteboard Bubble](/ui-kit/react/components/collaborative-whiteboard-bubble) | +| **Group Action** | `groupMember` (action) | Centered system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | +| **Call Action** | `audio` / `video` (call) | Centered call status messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | +| **Delete** | any (deleted) | "This message was deleted" placeholder | [Delete Bubble](/ui-kit/react/components/delete-bubble) | --- -## Creating a Custom Plugin +## AI Plugin -Implement the `CometChatMessagePlugin` interface. Here's a minimal "location" message plugin: +The AI plugin handles messages in the `agentic` category. It renders completed assistant responses (with markdown), tool call arguments and results (as formatted JSON), and a streaming bubble while the AI is generating. It is **not included by default** — add it via the `plugins` prop. -```tsx -import React from "react"; -import type { CometChat } from "@cometchat/chat-sdk-javascript"; -import type { - CometChatMessagePlugin, - CometChatMessagePluginContext, - CometChatMessageOption, -} from "@cometchat/chat-uikit-react"; - -export const LocationPlugin: CometChatMessagePlugin = { - id: "location", - messageTypes: ["location"], - messageCategories: ["custom"], - - renderBubble(message: CometChat.BaseMessage, context: CometChatMessagePluginContext) { - const customMessage = message as CometChat.CustomMessage; - const data = customMessage.getData() as { customData?: { latitude: number; longitude: number } }; - const { latitude, longitude } = data.customData ?? { latitude: 0, longitude: 0 }; - - return React.createElement("div", { className: "location-bubble" }, - React.createElement("img", { - src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=15&size=300x200&key=YOUR_KEY`, - alt: "Location", - style: { borderRadius: 8, width: "100%" }, - }), - React.createElement("p", { style: { margin: "8px 0 0", fontSize: 12 } }, - `${latitude.toFixed(4)}, ${longitude.toFixed(4)}` - ) - ); - }, - - getOptions(message: CometChat.BaseMessage, context: CometChatMessagePluginContext): CometChatMessageOption[] { - // Minimal options — just delete for sender - return [ - { - id: "delete", - title: context.getLocalizedString?.("delete") ?? "Delete", - senderOnly: true, - onClick: (msg) => context.onDeleteMessage?.(msg), - }, - ]; - }, - - getLastMessagePreview(): string { - return "📍 Location"; - }, -}; -``` + -Register it: +### Installation ```tsx +import { CometChatProvider } from "@cometchat/chat-uikit-react"; +import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; + ``` -For a complete tutorial with sending, receiving, and styling, see [Creating a Custom Plugin](/ui-kit/react/plugins/custom-plugin). +### Message Types ---- +| Type | Category | What it renders | +| --- | --- | --- | +| `assistant` | `agentic` | Completed AI response with markdown | +| `toolArguments` | `agentic` | Tool call arguments as formatted JSON | +| `toolResults` | `agentic` | Tool call results as formatted JSON | +| `run_started` | `custom` | Streaming placeholder while the AI generates | -## Plugin Interface Reference - -```typescript -interface CometChatMessagePlugin { - /** Unique plugin identifier. */ - id: string; - - /** SDK message types this plugin handles (e.g., ["text"], ["image"]). */ - messageTypes: string[]; - - /** SDK message categories this plugin handles (e.g., ["message"], ["custom"]). */ - messageCategories: string[]; - - /** Render the bubble content for a message. */ - renderBubble(message: BaseMessage, context: PluginContext): ReactNode; - - /** Return context menu options for a message. */ - getOptions?(message: BaseMessage, context: PluginContext): MessageOption[]; - - /** Return plain-text preview for the conversation list subtitle. */ - getLastMessagePreview?(message: BaseMessage, loggedInUser: User, t?: (key: string) => string): string; - - /** Return text formatters (only relevant for text plugin). */ - getTextFormatters?(): CometChatTextFormatter[]; - - // --- View Slot Methods (optional) --- - /** Custom leading view (avatar area). */ - renderLeadingView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom header view (sender name area). */ - renderHeaderView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom footer view (reactions area). */ - renderFooterView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom bottom view (moderation area). */ - renderBottomView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom status info view (timestamp + receipts). */ - renderStatusInfoView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom reply view (quoted message preview). */ - renderReplyView?(message: BaseMessage, context: PluginContext): ReactNode; - /** Custom thread view (reply count indicator). */ - renderThreadView?(message: BaseMessage, context: PluginContext): ReactNode; -} -``` +Bubble components: `CometChatAIAssistantBubble`, `CometChatStreamMessageBubble`, `CometChatToolCallArgumentBubble`, `CometChatToolCallResultBubble`. AI messages are system-generated and have no context menu. For the full chat experience, see [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat). -### Plugin Context +### Conversation Preview -The `context` object passed to every plugin method: +| Type | Preview text | +| --- | --- | +| `assistant` | First 80 characters of the response (markdown stripped) | +| `toolArguments` | "Tool call" | +| `toolResults` | "Tool result" | -| Field | Type | Description | -| --- | --- | --- | -| `loggedInUser` | `CometChat.User` | The currently logged-in user | -| `group` | `CometChat.Group \| undefined` | The group (if group chat) | -| `alignment` | `"left" \| "right" \| "center"` | Bubble alignment | -| `theme` | `"light" \| "dark"` | Current theme | -| `getLocalizedString` | `(key: string) => string` | Localization function | -| `onDeleteMessage` | `(msg) => void` | Delete a message | -| `onEditMessage` | `(msg) => void` | Enter edit mode | -| `onReplyMessage` | `(msg) => void` | Set reply-to target | -| `onThreadClick` | `(msg) => void` | Open thread view | -| `onReactToMessage` | `(msg) => void` | Open emoji picker | -| `onMessageInfo` | `(msg) => void` | Open message info panel | -| `onMarkAsUnread` | `(msg) => void` | Mark as unread | -| `onFlagMessage` | `(msg) => void` | Open flag/report dialog | -| `showToast` | `(text) => void` | Show a toast notification | -| `getTextFormatters` | `() => Formatter[]` | Get text formatters for caption rendering | -| `publish` | `(event) => void` | Publish a UI event | +### Preloading ---- +The AI Assistant Chat panel can be preloaded on hover/focus to reduce perceived latency: -## Next Steps - - - - Text rendering, mentions, markdown, URLs - - - Image grid, captions, fullscreen viewer - - - Build your own plugin from scratch - - - URL, mentions, markdown, and custom formatters - - +```tsx +import { preloadAIAssistantChat } from "@cometchat/chat-uikit-react/plugins/ai"; + +// Call on AI button hover +onMouseEnter={() => preloadAIAssistantChat()} +``` diff --git a/ui-kit/react/plugins/polls.mdx b/ui-kit/react/plugins/polls.mdx deleted file mode 100644 index 431ad3fac..000000000 --- a/ui-kit/react/plugins/polls.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Polls Plugin" -description: "Renders poll messages with question, voting options, and real-time vote counts." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `polls` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `extension_poll` | -| Message Categories | `custom` | -| Included by Default | Yes | -| Bubble Component | `CometChatPollBubble` | -| Conversation Preview | Poll question text (truncated) | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Polls plugin handles messages of type `extension_poll` in category `custom`. It renders an interactive poll bubble where users can vote on options and see real-time results. The plugin routes poll messages to [`CometChatPollBubble`](/ui-kit/react/components/poll-bubble). - ---- - -## Context Menu Options - -Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately. - ---- - -## Conversation Preview - -Returns the poll question text (truncated to 80 characters). Falls back to `Poll` if no question is found. - ---- - diff --git a/ui-kit/react/plugins/stickers.mdx b/ui-kit/react/plugins/stickers.mdx deleted file mode 100644 index 89e1f679d..000000000 --- a/ui-kit/react/plugins/stickers.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Stickers Plugin" -description: "Renders sticker messages as full-size sticker images." ---- - - - -| Field | Value | -| --- | --- | -| Plugin ID | `stickers` | -| Package | `@cometchat/chat-uikit-react` | -| Message Types | `extension_sticker` | -| Message Categories | `custom` | -| Included by Default | Yes | -| Bubble Component | `CometChatStickerBubble` | -| Conversation Preview | Sticker | -| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately | - - - -## Overview - -The Stickers plugin handles messages of type `extension_sticker` in category `custom`. It renders a sticker image extracted from the message's custom data. The plugin routes sticker messages to [`CometChatStickerBubble`](/ui-kit/react/components/sticker-bubble). - ---- - -## Context Menu Options - -Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately. - ---- - -## Conversation Preview - -Returns: `Sticker` (localized via `conversation_subtitle_sticker` key) - ---- - diff --git a/ui-kit/react/plugins/text-formatters.mdx b/ui-kit/react/plugins/text-formatters.mdx index 285328099..882862092 100644 --- a/ui-kit/react/plugins/text-formatters.mdx +++ b/ui-kit/react/plugins/text-formatters.mdx @@ -1,27 +1,10 @@ --- title: "Text Formatters" -description: "Transform plain text into formatted HTML in message bubbles. Built-in formatters handle URLs, mentions, and markdown." +sidebarTitle: "Text Formatters" +description: "Transform plain text into formatted HTML in message bubbles, with built-in URL, mention, and markdown formatters plus custom formatters." --- - - -| Field | Value | -| --- | --- | -| Base Class | `CometChatTextFormatter` | -| Package | `@cometchat/chat-uikit-react` | -| Built-in Formatters | `CometChatMarkdownFormatter`, `CometChatMentionsFormatter`, `CometChatUrlFormatter` | -| Pipeline Order | Sorted by `priority` (lower = first) | -| Used By | Text plugin (`getTextFormatters()`), media plugins (caption rendering) | - - - -## Overview - -Text formatters detect patterns in message text and transform them into formatted HTML for display in bubbles. They run as a pipeline — each formatter receives the output of the previous one, sorted by priority (lower number = runs first). - -The Text plugin provides three built-in formatters. You can add custom formatters to extend the pipeline. - ---- +Text formatters detect patterns in message text and transform them into formatted HTML for display in bubbles. They run as a pipeline — each formatter receives the output of the previous one, sorted by priority (lower number = runs first). The Text plugin provides three built-in formatters, and you can add your own. ## Built-in Formatters @@ -31,8 +14,6 @@ The Text plugin provides three built-in formatters. You can add custom formatter | `CometChatMentionsFormatter` | 50 | `<@uid:xxx>` tokens | Styled `@DisplayName` chips | | `CometChatUrlFormatter` | 100 | `https://...`, `www.` | Clickable `` links | -### Pipeline Flow - ``` Raw text: "Hey **@Alice**, check https://example.com" ↓ MarkdownFormatter (priority 10) @@ -43,8 +24,6 @@ Raw text: "Hey **@Alice**, check https://example.com" "Hey @Alice, check https://example.com" ``` ---- - ## The Formatter Interface All formatters extend the abstract `CometChatTextFormatter` class: @@ -71,8 +50,6 @@ abstract class CometChatTextFormatter { } ``` ---- - ## Creating a Custom Formatter Here's a hashtag formatter that wraps `#word` patterns in a styled span: @@ -122,8 +99,6 @@ export class HashtagFormatter extends CometChatTextFormatter { } ``` ---- - ## Registering Custom Formatters Custom formatters are registered by creating a custom text plugin that extends the default one: @@ -131,9 +106,11 @@ Custom formatters are registered by creating a custom text plugin that extends t ```typescript title="src/plugins/CustomTextPlugin.ts" import { CometChatTextPlugin } from "@cometchat/chat-uikit-react"; import type { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; -import { CometChatMarkdownFormatter } from "@cometchat/chat-uikit-react"; -import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-react"; -import { CometChatUrlFormatter } from "@cometchat/chat-uikit-react"; +import { + CometChatMarkdownFormatter, + CometChatMentionsFormatter, + CometChatUrlFormatter, +} from "@cometchat/chat-uikit-react"; import { HashtagFormatter } from "../formatters/HashtagFormatter"; export const CustomTextPlugin = { @@ -175,15 +152,12 @@ const settings = new UIKitSettingsBuilder() ``` ---- - ## Formatter Details ### CometChatMarkdownFormatter Converts markdown syntax to HTML. Runs first (priority 10) so subsequent formatters operate on HTML output. -**Supported syntax:** - `**bold**` → `bold` - `_italic_` → `italic` - `__underline__` or `++underline++` → `underline` @@ -192,23 +166,20 @@ Converts markdown syntax to HTML. Runs first (priority 10) so subsequent formatt - ` ```code block``` ` → `
code block
` - `> blockquote` → `
blockquote
` - `[text](url)` → `text` -- `1. item` → ordered list -- `• item` or `- item` → unordered list +- `1. item` → ordered list; `• item` / `- item` → unordered list ### CometChatMentionsFormatter -Resolves SDK mention tokens (`<@uid:xxx>` and `<@all:label>`) into styled mention chips. Requires the mentioned users list from the message to resolve UIDs to display names. +Resolves SDK mention tokens (`<@uid:xxx>` and `<@all:label>`) into styled mention chips. Requires the mentioned-users list from the message to resolve UIDs to display names. ### CometChatUrlFormatter Detects bare URLs (`https://...` and `www.`) and wraps them in clickable `` tags with `target="_blank"` and `rel="noopener noreferrer"`. Protects existing markdown links and `` tags from double-processing. ---- - ## Tips - **Priority matters** — markdown must run before mentions/URLs so it doesn't break HTML tags - **Protect code blocks** — formatters should skip content inside `` and `
` tags
-- **Keep it fast** — formatters run on every text message render, avoid expensive operations
-- **Use `shouldFormat()`** — override to skip formatting for specific messages (e.g., skip hashtags in system messages)
+- **Keep it fast** — formatters run on every text message render; avoid expensive operations
+- **Use `shouldFormat()`** — override to skip formatting for specific messages
 - **Store metadata** — use `this.metadata` to expose extracted data (URLs, hashtags, mentions) to consumers
diff --git a/ui-kit/react/plugins/text.mdx b/ui-kit/react/plugins/text.mdx
deleted file mode 100644
index 895cbeb37..000000000
--- a/ui-kit/react/plugins/text.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: "Text Plugin"
-description: "Renders text messages with mentions, URLs, and markdown formatting."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Plugin ID | `text` |
-| Package | `@cometchat/chat-uikit-react` |
-| Message Types | `text` |
-| Message Categories | `message` |
-| Included by Default | Yes |
-| Bubble Component | `CometChatTextBubble` |
-| Conversation Preview | Message text (markdown stripped, mentions resolved) |
-| Context Menu | React, Reply, Reply in Thread, Copy, Edit, Info, Delete, Report, Mark Unread, Message Privately |
-
-
-
-## Overview
-
-The Text plugin handles messages of type `text` in category `message`. It renders formatted text with support for @mentions, clickable URLs, and markdown syntax (bold, italic, strikethrough, code, blockquotes, lists). The plugin routes text messages to [`CometChatTextBubble`](/ui-kit/react/components/text-bubble).
-
----
-
-## Context Menu Options
-
-| Option | Condition | Action |
-| --- | --- | --- |
-| React | Always | Opens emoji picker |
-| Reply | Always | Sets reply-to in composer |
-| Reply in Thread | Not in thread | Opens thread view |
-| Copy | Always | Copies plain text (markdown stripped, mentions resolved) to clipboard |
-| Edit | Sender only | Enters edit mode in composer |
-| Info | Sender only | Opens message info panel |
-| Delete | Sender only | Shows delete confirmation |
-| Report | Receiver only | Opens flag/report dialog |
-| Mark Unread | Receiver only | Marks message as unread |
-| Message Privately | Receiver, group only | Opens 1:1 chat with sender |
-
----
-
-## Conversation Preview
-
-Returns the message text with markdown stripped and mentions resolved to display names. Example: `@John: Check the **docs**` → `@John: Check the docs`
-
----
-
-## Text Formatters
-
-The text plugin provides three built-in formatters via `getTextFormatters()`:
-
-| Formatter | Priority | What it does |
-| --- | --- | --- |
-| `CometChatMarkdownFormatter` | 10 | Converts markdown syntax to HTML |
-| `CometChatMentionsFormatter` | 50 | Resolves `<@uid:xxx>` tokens to styled mention chips |
-| `CometChatUrlFormatter` | 100 | Converts bare URLs to clickable `` tags |
-
-Formatters run in priority order (lower = first). Each receives the output of the previous formatter.
-
-For custom formatters, see [Text Formatters](/ui-kit/react/plugins/text-formatters).
-
----
-
diff --git a/ui-kit/react/plugins/video.mdx b/ui-kit/react/plugins/video.mdx
deleted file mode 100644
index a9b3c3be3..000000000
--- a/ui-kit/react/plugins/video.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Video Plugin"
-description: "Renders video messages with inline player, thumbnail grid, and caption support."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Plugin ID | `video` |
-| Package | `@cometchat/chat-uikit-react` |
-| Message Types | `video` |
-| Message Categories | `message` |
-| Included by Default | Yes |
-| Bubble Component | `CometChatVideoBubble` |
-| Conversation Preview | Video |
-| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
-
-
-
-## Overview
-
-The Video plugin handles messages of type `video` in category `message`. Single videos render with an inline HTML5 player. Multiple videos display as a thumbnail grid with play overlays. The plugin routes video messages to [`CometChatVideoBubble`](/ui-kit/react/components/video-bubble).
-
----
-
-## Context Menu Options
-
-Same as [Image Plugin](/ui-kit/react/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately).
-
----
-
-## Conversation Preview
-
-Returns: `Video` (localized via `conversation_subtitle_video` key)
-
----
-

From 125d749cde66038b850aa955aad5b8001afd3aa1 Mon Sep 17 00:00:00 2001
From: shagun-cometchat 
Date: Wed, 17 Jun 2026 17:47:55 +0530
Subject: [PATCH 24/27] fix search messages guide

---
 ui-kit/react/guide-search-messages.mdx | 170 ++++++++-----------------
 1 file changed, 52 insertions(+), 118 deletions(-)

diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx
index 7705dac4d..3f533b8f2 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,31 +1,33 @@
 ---
 title: "Search Messages"
 sidebarTitle: "Search Messages"
-description: "Add message search to your chat so users can find specific messages within a conversation."
+description: "Add message search to your chat so users can find specific messages within a conversation using the built-in CometChatSearch component."
 ---
 
 ## Goal
 
-By the end of this guide you will have a chat interface with a search panel that lets users query messages in a conversation by keyword, displays matching results, and scrolls to a selected message — all using v7 compound components and the CometChat SDK's `MessagesRequestBuilder`.
+By the end of this guide you will have a chat interface with a search panel that lets users find messages in a conversation by keyword and scroll to a selected result — using the built-in [`CometChatSearch`](/ui-kit/react/components/search) component instead of building your own search UI.
+
+`CometChatSearch` already handles the input, debouncing, SDK queries, result rendering, pagination, loading/empty/error states, and keyword highlighting — so you only wire it to your message list.
 
 ## Prerequisites
 
-- Completed the [Integration Guide](/ui-kit/react/integration-react) guide
+- Completed the [Integration Guide](/ui-kit/react/integration-react)
 - A running `CometChatProvider` setup with valid credentials
 - An existing chat screen using `CometChatMessageList` and `CometChatMessageHeader`
 
 ## Components Used
 
-| Component / API | Purpose |
-|:----------------|:--------|
-| `CometChatSearch` or `CometChat.MessagesRequestBuilder` | SDK builder for querying messages by keyword |
+| Component | Purpose |
+|:----------|:--------|
+| `CometChatSearch` | Built-in search panel — input, message queries, result list, and states |
 | `CometChatMessageList` | Displays messages and supports `goToMessageId` for scrolling to a result |
-| `CometChatMessageHeader` | Header with search trigger button |
+| `CometChatMessageHeader` | Header with a search trigger button |
 | `CometChatConversations` | Sidebar for switching conversations |
 
 ## Step 1: Set up the chat layout with search state
 
-Start with a full chat layout that includes a conversations sidebar, message panel, and state to control the search panel visibility and the message to jump to.
+Start with a full chat layout — a conversations sidebar, message panel, and state to control the search panel visibility and the message to jump to.
 
 _File: App.tsx_
 
@@ -38,8 +40,9 @@ import {
   CometChatMessageList,
   CometChatMessageComposer,
   CometChatMessageHeader,
+  CometChatSearch,
+  type CometChatSearchMessageClickEvent,
 } from "@cometchat/chat-uikit-react";
-import MessageSearchPanel from "./MessageSearchPanel";
 
 function ChatWithSearch() {
   const [user, setUser] = useState(null);
@@ -60,9 +63,9 @@ function ChatWithSearch() {
     }
   }
 
-  function handleMessageSelect(message: CometChat.BaseMessage) {
-    setGoToMessageId(message.getId());
-    setShowSearch(false);
+  // Fired by CometChatSearch when a message result is clicked
+  function handleMessageClick(event: CometChatSearchMessageClickEvent) {
+    setGoToMessageId(event.message.getId());
   }
 
   return (
@@ -101,14 +104,17 @@ function ChatWithSearch() {
         )}
- {/* Search panel */} + {/* Built-in search panel, scoped to the open conversation */} {showSearch && (user || group) && ( - setShowSearch(false)} - /> +
+ setShowSearch(false)} + /> +
)}
); @@ -120,6 +126,7 @@ function App() { appId="YOUR_APP_ID" region="YOUR_REGION" authKey="YOUR_AUTH_KEY" + uid="cometchat-uid-1" > @@ -129,113 +136,36 @@ function App() { export default App; ``` -## Step 2: Create the search panel component - -Build a `MessageSearchPanel` component that accepts a `user` or `group`, takes a search keyword, queries messages using `MessagesRequestBuilder`, and displays the results. +## Step 2: Scope CometChatSearch to the conversation -_File: MessageSearchPanel.tsx_ +`CometChatSearch` is a complete, self-contained search panel — there's no custom input or result list to build. A few props tailor it to in-conversation message search: ```tsx -import { useState, useCallback } from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -interface MessageSearchPanelProps { - user?: CometChat.User; - group?: CometChat.Group; - onMessageSelect: (message: CometChat.BaseMessage) => void; - onClose: () => void; -} - -function MessageSearchPanel({ user, group, onMessageSelect, onClose }: MessageSearchPanelProps) { - const [keyword, setKeyword] = useState(""); - const [results, setResults] = useState([]); - const [loading, setLoading] = useState(false); - - const handleSearch = useCallback(async () => { - if (!keyword.trim()) return; - - setLoading(true); - try { - const builder = new CometChat.MessagesRequestBuilder() - .setSearchKeyword(keyword) - .setLimit(50); - - if (user) { - builder.setUID(user.getUid()); - } else if (group) { - builder.setGUID(group.getGuid()); - } - - const request = builder.build(); - const messages = await request.fetchPrevious(); - setResults(messages); - } catch (error) { - console.error("Search failed:", error); - } finally { - setLoading(false); - } - }, [keyword, user, group]); - - return ( -
- {/* Header */} -
-

Search Messages

- -
- - {/* Search input */} -
- setKeyword(e.target.value)} - onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }} - style={{ width: "100%", padding: "8px 12px", borderRadius: "8px", border: "1px solid #e0e0e0" }} - aria-label="Search keyword" - /> -
+ setShowSearch(false)} +/> +``` - {/* Results */} -
- {loading &&

Searching...

} - {!loading && results.length === 0 && keyword &&

No messages found.

} - {results.map((message) => ( - - ))} -
-
- ); -} +| Prop | What it does | +|:-----|:-------------| +| `searchIn={["messages"]}` | Shows only message results (omit it to also search conversations) | +| `uid` / `guid` | Scopes the search to a single user or group conversation. Pass whichever matches the open chat | +| `onMessageClicked` | Fired when a result is tapped. The event payload is `{ message, searchKeyword }` | +| `onBack` | Fired when the back button is clicked — use it to close the panel | -export default MessageSearchPanel; -``` +The component handles the search input, debouncing, SDK queries, pagination, and the loading/empty/error states internally. For the full prop list and customization (filter chips, custom result item views, request builders), see the [Search component reference](/ui-kit/react/components/search). ## Step 3: Navigate to a selected search result -When the user clicks a search result, pass the message ID to `CometChatMessageList` via the `goToMessageId` prop. This scrolls the message list to the matching message and highlights it. - -_File: ChatWithSearch.tsx_ +When a result is clicked, `onMessageClicked` gives you the selected `message`. Pass its ID to `CometChatMessageList` via the `goToMessageId` prop — the list scrolls to the matching message and highlights it. ```tsx -const [goToMessageId, setGoToMessageId] = useState(undefined); - -function handleMessageSelect(message: CometChat.BaseMessage) { - setGoToMessageId(message.getId()); - setShowSearch(false); +function handleMessageClick(event: CometChatSearchMessageClickEvent) { + setGoToMessageId(event.message.getId()); } ``` + +Reset `goToMessageId` to `undefined` when switching conversations (as in `handleConversationClick` above) so the list doesn't try to jump to a message ID from a previous chat. + + ## Next Steps -- [Message List](/ui-kit/react/components/message-list) — configure message list rendering and scroll behavior +- [Search](/ui-kit/react/components/search) — full `CometChatSearch` reference: filters, scopes, custom result views, and request builders +- [Message List](/ui-kit/react/components/message-list) — configure message rendering and scroll behavior - [Message Header](/ui-kit/react/components/message-header) — customize header actions and auxiliary views -- [CometChatProvider](/ui-kit/react/cometchat-provider) — learn about provider configuration - [Threaded Messages](/ui-kit/react/guide-threaded-messages) — add threaded replies to your chat From 2dbdb9479117ce569610857bd0191d3f6fb6a0ec Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Thu, 18 Jun 2026 16:57:11 +0530 Subject: [PATCH 25/27] docs(ui-kit/react): update initialization pattern to use updated init + login + CometChatProvider approach - Move CometChatUIKit initialization from CometChatProvider props to useEffect hook - Add UIKitSettingsBuilder for centralized configuration management - Implement proper async initialization with loading states across all framework integrations - Update Astro, Next.js, React, and React Router example code to use new pattern - Replace inline provider props (appId, region, authKey, uid) with UIKitSettingsBuilder setup - Add ready state checks to prevent rendering before SDK initialization completes - Standardize login flow across conversation, one-to-one, and tab-based chat examples - Update plugin documentation and integration guides to reflect new initialization approach --- ui-kit/react/astro-conversation.mdx | 28 +- ui-kit/react/astro-one-to-one-chat.mdx | 58 ++-- ui-kit/react/astro-tab-based-chat.mdx | 28 +- ui-kit/react/call-features.mdx | 24 +- ui-kit/react/calling-integration.mdx | 122 ++++---- ui-kit/react/cometchat-provider.mdx | 290 ++++++------------ ui-kit/react/components-overview.mdx | 9 +- ui-kit/react/guide-block-unblock-user.mdx | 7 +- ui-kit/react/guide-group-chat-setup.mdx | 12 +- ui-kit/react/guide-message-privately.mdx | 12 +- ui-kit/react/guide-new-chat-creation.mdx | 12 +- ui-kit/react/guide-search-messages.mdx | 7 +- ui-kit/react/guide-threaded-messages.mdx | 6 +- ui-kit/react/integration-astro.mdx | 40 ++- ui-kit/react/integration-nextjs.mdx | 44 ++- ui-kit/react/integration-react-router.mdx | 43 +-- ui-kit/react/integration-react.mdx | 43 ++- ui-kit/react/localization.mdx | 12 +- ui-kit/react/methods.mdx | 9 +- ui-kit/react/migration-overview.mdx | 75 +++-- ui-kit/react/next-conversation.mdx | 30 +- ui-kit/react/next-one-to-one-chat.mdx | 58 ++-- ui-kit/react/next-tab-based-chat.mdx | 30 +- ui-kit/react/plugins/custom-plugin.mdx | 8 +- ui-kit/react/plugins/overview.mdx | 16 +- ui-kit/react/plugins/text-formatters.mdx | 23 +- ui-kit/react/react-conversation.mdx | 9 +- ui-kit/react/react-one-to-one-chat.mdx | 16 +- ui-kit/react/react-router-conversation.mdx | 9 +- ui-kit/react/react-router-one-to-one-chat.mdx | 16 +- ui-kit/react/react-router-tab-based-chat.mdx | 9 +- ui-kit/react/react-tab-based-chat.mdx | 9 +- ui-kit/react/sound-manager.mdx | 22 +- ui-kit/react/theming.mdx | 10 +- ui-kit/react/troubleshooting.mdx | 69 +++-- 35 files changed, 593 insertions(+), 622 deletions(-) diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 8bed4a418..22f15a876 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -44,9 +44,11 @@ Three sections working together: Create a React island component with the chat UI, then render it in an Astro page with `client:only="react"`. ```tsx title="src/components/ConversationChat.tsx" -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatMessageHeader, @@ -55,9 +57,26 @@ import { } from "@cometchat/chat-uikit-react"; export default function ConversationChat() { + const [ready, setReady] = useState(false); const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -70,12 +89,7 @@ export default function ConversationChat() { }; return ( - +
(undefined); useEffect(() => { - CometChat.getUser(RECIPIENT_UID).then( - (user) => setChatUser(user), - (error) => console.error("User fetch failed:", error) - ); + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + const user = await CometChat.getUser(RECIPIENT_UID); + setChatUser(user); + setReady(true); + }); }, []); - if (!chatUser) return
Loading chat...
; + if (!ready || !chatUser) return
Loading chat...
; return ( - +
@@ -117,6 +124,8 @@ To load a group chat instead of one-to-one, fetch a `Group` object and pass it t import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatMessageHeader, CometChatMessageList, @@ -126,24 +135,29 @@ import { const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID export default function DirectChat() { + const [ready, setReady] = useState(false); const [chatGroup, setChatGroup] = useState(undefined); useEffect(() => { - CometChat.getGroup(GROUP_ID).then( - (group) => setChatGroup(group), - (error) => console.error("Group fetch failed:", error) - ); + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + const group = await CometChat.getGroup(GROUP_ID); + setChatGroup(group); + setReady(true); + }); }, []); - if (!chatGroup) return
Loading chat...
; + if (!ready || !chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index 6283f0ab9..3d6b45ee0 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -44,9 +44,11 @@ Three sections working together: Create a React island component with the tabbed UI, then render it in an Astro page with `client:only="react"`. ```tsx title="src/components/TabbedChat.tsx" -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatUsers, @@ -59,10 +61,27 @@ import { type Tab = "chat" | "calls" | "users"; export default function TabbedChat() { + const [ready, setReady] = useState(false); const [activeTab, setActiveTab] = useState("chat"); const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -97,12 +116,7 @@ export default function TabbedChat() { }; return ( - +
## Overview -CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and enable calling via the `callingEnabled` prop on `CometChatProvider` to activate call components. +CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and enable calling via `.setCallingEnabled(true)` on `UIKitSettingsBuilder` to activate call components. -Ensure your app is wrapped in `CometChatProvider` with valid credentials and `callingEnabled={true}`. See [React.js Integration](/ui-kit/react/integration-react). +Ensure you have called `CometChatUIKit.init()` with `.setCallingEnabled(true)` and `CometChatUIKit.login()` before rendering. See [React.js Integration](/ui-kit/react/integration-react). ## Integration @@ -32,12 +32,18 @@ Install the Calls SDK and enable calling: npm install @cometchat/calls-sdk-javascript ``` -Then set `callingEnabled={true}` on your `CometChatProvider`: +Then set `.setCallingEnabled(true)` on your `UIKitSettingsBuilder`: -```jsx - - {/* your app */} - +```tsx +const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .setCallingEnabled(true) + .build(); + +await CometChatUIKit.init(settings); +await CometChatUIKit.login("cometchat-uid-1"); ``` Call buttons render inside [MessageHeader](/ui-kit/react/components/message-header) when calling is enabled. diff --git a/ui-kit/react/calling-integration.mdx b/ui-kit/react/calling-integration.mdx index dbe5a2782..48857f176 100644 --- a/ui-kit/react/calling-integration.mdx +++ b/ui-kit/react/calling-integration.mdx @@ -10,7 +10,7 @@ By the end of this guide you will have voice and video calling working in your R ## Prerequisites - A working CometChat React UI Kit v7 setup (completed the [Integration Guide](/ui-kit/react/integration-react)) -- `CometChatProvider` configured with valid credentials +- `CometChatUIKit.init()` and `login()` completed before rendering - A CometChat plan that includes calling features enabled in your [dashboard](https://app.cometchat.com) ## Step 1: Install the Calls SDK @@ -35,37 +35,37 @@ pnpm add @cometchat/calls-sdk-javascript This package provides the WebRTC layer for voice and video calls. It is loaded lazily by the UI Kit — no additional bundle cost until calling is actually used. -## Step 2: Enable calling in CometChatProvider +## Step 2: Enable Calling in UIKitSettingsBuilder -Set the `callingEnabled` prop to `true` on your `CometChatProvider`: +Set `.setCallingEnabled(true)` on your `UIKitSettingsBuilder` during initialization: -```tsx -import { CometChatProvider } from "@cometchat/chat-uikit-react"; +```tsx title="src/main.tsx" +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -function App() { - return ( - - - - ); -} +const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .setCallingEnabled(true) + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + // Render your app +}); ``` -When `callingEnabled` is `true`, the UI Kit: +When calling is enabled, the UI Kit: - Registers the `CallingPlugin` for call-related message rendering - Lazy-loads call components (`CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatOngoingCall`) only when needed - Enables the `CometChatCallButtons` component to initiate calls -When `callingEnabled` is `false` (the default), call components are not loaded and `CometChatCallButtons` renders nothing. +When calling is not enabled (the default), call components are not loaded and `CometChatCallButtons` renders nothing. ## Step 3: Configure call settings -The Calls SDK uses the same `appId` and `region` as your chat SDK — no separate configuration is needed. `CometChatProvider` passes these credentials to the Calls SDK automatically when `callingEnabled` is `true`. +The Calls SDK uses the same `appId` and `region` from your `UIKitSettings` — no separate configuration is needed. The UI Kit passes these credentials to the Calls SDK automatically when calling is enabled. The `config` prop on `CometChatProvider` accepts a `CometChatGlobalConfig` object for UI/behavior flags (`hideReceipts`, `hideUserStatus`, `disableSoundForCalls`, `customSoundForCalls`, `callSettingsBuilder`). It does **not** take a separate calling app ID or region. @@ -73,7 +73,7 @@ The `config` prop on `CometChatProvider` accepts a `CometChatGlobalConfig` objec ## Step 4: Add Call Buttons via CometChatMessageHeader -`CometChatMessageHeader` automatically renders voice and video call buttons when `callingEnabled` is `true` on your provider. No extra configuration needed — just render the header with a `user` or `group`: +`CometChatMessageHeader` automatically renders voice and video call buttons when calling is enabled. No extra configuration needed — just render the header with a `user` or `group`: ```tsx import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -142,13 +142,7 @@ export default function App() { }; return ( - +
@@ -179,49 +173,73 @@ Video calls work identically — click the **video call** button (camera icon) i No additional configuration is needed to switch between audio-only and video calls. The call type is determined by which button the user clicks. -## Step 7: Handle incoming and outgoing calls +## Step 7: Render CometChatIncomingCall -`CometChatIncomingCall` and `CometChatOutgoingCall` are automatically rendered by the UI Kit when `callingEnabled` is `true`. They listen for SDK call events via `SDKBridgeProvider` and display themselves as overlays when a call is initiated or received. - -You do not need to render these components manually — they are managed internally. However, you can customize their behavior with callbacks: +`CometChatIncomingCall` must be rendered in your app — it is NOT auto-rendered by the UI Kit. Place it at the root level of your authenticated layout so it can display the incoming call overlay from anywhere: ```tsx import { CometChatProvider, CometChatIncomingCall, - CometChatOutgoingCall, + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, } from "@cometchat/chat-uikit-react"; -function App() { +export default function App() { + const [user, setUser] = useState(null); + + const handleConversationClick = (conversation: CometChat.Conversation) => { + const conversationWith = conversation.getConversationWith(); + if (conversationWith instanceof CometChat.User) { + setUser(conversationWith); + } + }; + return ( - - {/* These override the default auto-rendered call screens */} - console.log("Call accepted:", call)} - onReject={(call) => console.log("Call rejected:", call)} - /> - console.log("Call cancelled:", call)} - /> - + +
+
+ +
+
+ {user && ( + <> + + + + + )} +
+
+ + {/* Incoming call overlay — renders at root level, listens for call events */} + ); } ``` +`CometChatIncomingCall` listens for incoming call events and displays an accept/reject overlay. When the user accepts, it transitions to the `CometChatOngoingCall` screen internally. You can customize its behavior with callbacks: + +```tsx + console.log("Call accepted:", call)} + onDecline={(call) => console.log("Call declined:", call)} +/> +``` + +`CometChatOutgoingCall` is rendered automatically by the `CometChatCallButtons` component when the user initiates a call — you do not need to place it manually. + ## Summary | Step | Action | |------|--------| | 1 | Install `@cometchat/calls-sdk-javascript` | -| 2 | Set `callingEnabled={true}` on `CometChatProvider` | -| 3 | (Optional) Configure separate calling app settings via `config` prop | -| 4 | Add `CometChatCallButtons` with a `user` or `group` prop | +| 2 | Set `.setCallingEnabled(true)` on `UIKitSettingsBuilder` | +| 3 | (Optional) Configure call behavior via `config` prop on `CometChatProvider` | +| 4 | Call buttons appear in `CometChatMessageHeader` automatically | | 5 | Test voice calls between two users | | 6 | Test video calls between two users | | 7 | (Optional) Customize incoming/outgoing call handlers | diff --git a/ui-kit/react/cometchat-provider.mdx b/ui-kit/react/cometchat-provider.mdx index 0f03a2084..a9dd8dc40 100644 --- a/ui-kit/react/cometchat-provider.mdx +++ b/ui-kit/react/cometchat-provider.mdx @@ -1,156 +1,105 @@ --- title: "CometChatProvider" -description: "The root provider that initializes the CometChat SDK, manages authentication, and composes all internal contexts for the React UI Kit." +description: "The root provider that composes all internal contexts (plugin registry, theme, locale, global config, events) for the React UI Kit." --- ## Overview -Every CometChat component must be rendered inside a provider tree that supplies theme, locale, plugin registry, and real-time events. The UI Kit offers two ways to set this up: +Every CometChat component must be rendered inside a `` which supplies theme, locale, plugin registry, global config, and real-time events to the component tree. -| Approach | Best for | Init & login | Provider setup | -| --- | --- | --- | --- | -| **CometChatProvider** (recommended) | Most apps | Automatic — just pass credentials | Single component wraps everything | -| **Individual providers** | Advanced control (custom login flows, multiple instances) | Manual — call `CometChatUIKit.init()` + `login()` yourself | Compose `ThemeProvider`, `LocaleProvider`, `EventsProvider`, `PluginRegistryContext` manually | +`CometChatProvider` does **not** handle SDK initialization or user login. You must call `CometChatUIKit.init()` and `CometChatUIKit.login()` (or `loginWithAuthToken()`) imperatively before mounting the provider. --- -## Approach 1: CometChatProvider (Recommended) +## Setup Pattern -`CometChatProvider` is a single component that handles SDK initialization, user login, plugin registration, theming, localization, and real-time events — all declaratively via props. +The setup is always the same: initialize, login, then render. -```tsx +```tsx title="src/main.tsx" +import ReactDOM from "react-dom/client"; +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import App from "./App"; + +const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("us") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .setCallingEnabled(true) + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + ReactDOM.createRoot(document.getElementById("root")!).render(); +}); +``` + +```tsx title="src/App.tsx" import { CometChatProvider, CometChatConversations } from "@cometchat/chat-uikit-react"; function App() { return ( - + ); } + +export default App; ``` -That's it. No `CometChatUIKit.init()`, no `UIKitSettingsBuilder`, no manual login. The provider handles the full lifecycle: +For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login(uid)`. -1. Builds `UIKitSettings` from your props -2. Calls `CometChatUIKit.init(settings)` internally -3. Logs in the user (via `uid` + `authKey`, or `authToken`) -4. Sets up the plugin registry (default plugins included automatically) -5. Provides theme, locale, and event contexts to all child components +--- -### Props +## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | -| `appId` | `string` | Yes* | — | CometChat app ID from the dashboard | -| `region` | `string` | Yes* | — | App region (`"us"`, `"eu"`, `"in"`) | -| `authToken` | `string` | — | — | Auth token for production login (server-generated) | -| `uid` | `string` | — | — | User UID for development login (used with `authKey`) | -| `authKey` | `string` | — | — | Auth key for development login (used with `uid`) | -| `settings` | `UIKitSettings` | — | — | Pre-built settings object for full control. When provided, `appId`/`region`/`callingEnabled`/`plugins` props are ignored | -| `callingEnabled` | `boolean` | No | `false` | Enable voice/video calling (requires `@cometchat/calls-sdk-javascript`) | | `plugins` | `CometChatMessagePlugin[]` | No | — | Additional plugins beyond the defaults | +| `config` | `CometChatGlobalConfig` | No | `{}` | Global flags (`hideReceipts`, `hideUserStatus`, etc.) | | `theme` | `"light" \| "dark"` | No | `"light"` | Active theme | | `locale` | `string` | No | `"en-us"` | Language code for localization | -| `config` | `CometChatGlobalConfig` | No | `{}` | Global flags (`hideReceipts`, `hideUserStatus`, etc.) | -| `onError` | `(error: Error) => void` | No | — | Called on init or login failure | -| `onLoginSuccess` | `(user: CometChat.User) => void` | No | — | Called when login succeeds | - -*Required unless `settings` is provided. +| `children` | `ReactNode` | Yes | — | Your app content | -### Authentication +--- -Provide one of: -- `authToken` — for production (generated server-side via REST API) -- `uid` + `authKey` — for development/testing only +## With Custom Theme and Locale ```tsx -{/* Production */} - - -{/* Development */} - + + + ``` -### Advanced: Pre-built Settings - -For full control over SDK configuration (presence subscription mode, custom hosts, storage mode), pass a `UIKitSettings` object: - -```tsx -import { CometChatProvider, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -const settings = new UIKitSettingsBuilder() - .setAppId("YOUR_APP_ID") - .setRegion("us") - .setAuthKey("YOUR_AUTH_KEY") - .subscribePresenceForRoles(["admin", "support"]) - .setCallingEnabled(true) - .setAutoEstablishSocketConnection(true) - .build(); +--- -function App() { - return ( - - - - ); -} -``` +## With Additional Plugins -### With Calling Enabled +Default plugins (text, image, file, audio, video) are always included. Pass additional plugins via the `plugins` prop: ```tsx - - - -``` - -### With Custom Theme and Locale +import { CometChatProvider } from "@cometchat/chat-uikit-react"; +import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; -```tsx - + ``` -### With Additional Plugins +--- -Default plugins (text, image, file, audio, video) are always included. Pass additional plugins via the `plugins` prop: +## With Global Config ```tsx -import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; - - + ``` -### Accessing the Logged-In User +--- + +## Accessing the Logged-In User Inside your components (children of `CometChatProvider`), access the logged-in user via the `useLoggedInUser()` hook or `CometChatUIKit.getLoggedInUser()`: @@ -160,7 +109,7 @@ import { useLoggedInUser } from "@cometchat/chat-uikit-react"; function MyComponent() { const loggedInUser = useLoggedInUser(); - if (!loggedInUser) return
Logging in...
; + if (!loggedInUser) return
Loading...
; return
Welcome, {loggedInUser.getName()}
; } @@ -168,78 +117,6 @@ function MyComponent() { --- -## Approach 2: Individual Providers (Advanced) - -For apps that need custom login flows, multiple CometChat instances, or fine-grained control over the provider tree, you can initialize manually and compose providers yourself. - -### Step 1: Initialize and Login - -Call `CometChatUIKit.init()` and `CometChatUIKit.login()` before rendering: - -```tsx title="src/main.tsx" -import ReactDOM from "react-dom/client"; -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -import App from "./App"; - -const settings = new UIKitSettingsBuilder() - .setAppId("YOUR_APP_ID") - .setRegion("us") - .setAuthKey("YOUR_AUTH_KEY") - .subscribePresenceForAllUsers() - .setCallingEnabled(true) - .build(); - -CometChatUIKit.init(settings).then(async () => { - // Login — use loginWithAuthToken() in production - await CometChatUIKit.login("cometchat-uid-1"); - ReactDOM.createRoot(document.getElementById("root")!).render(); -}); -``` - -### Step 2: Compose Providers - -After init and login, wrap your app with the individual providers: - -```tsx title="src/App.tsx" -import { - CometChatThemeProvider, - CometChatEventsProvider, - LocaleProvider, - CometChatPluginRegistryContext, - CometChatPluginRegistry, - defaultPlugins, -} from "@cometchat/chat-uikit-react"; - -const pluginRegistry = new CometChatPluginRegistry(defaultPlugins); - -function App() { - return ( - - - - - - - - - - ); -} -``` - -### When to Use This Approach - -- **Custom login flows** — your app has its own auth system and you need to control when login happens -- **Multiple chat instances** — you need separate plugin registries or themes for different parts of the app -- **Gradual migration** — you're migrating from v6 and want to keep the imperative init pattern temporarily -- **Server-side rendering** — you need to defer initialization to a specific lifecycle point - - -Even with individual providers, `CometChatUIKit.init()` must be called before rendering any CometChat components. The individual providers do not handle initialization — they only provide React context. - - ---- - ## Internal Architecture `CometChatProvider` composes these internal providers in order: @@ -250,31 +127,43 @@ CometChatProvider └─ GlobalConfigProvider — hideReceipts, hideUserStatus, etc. └─ ThemeProvider — data-theme attribute + CSS variables └─ LocaleProvider — localization translations - └─ EventsProvider — SDK listeners + UI events (mounted after login) + └─ EventsProvider — SDK listeners + UI events └─ {children} ``` -The `EventsProvider` only mounts after login succeeds. Before that, children render without real-time event subscriptions (which is correct since there's no authenticated session to listen on). - --- ## Next.js App Router -`CometChatProvider` uses browser APIs internally, so it must be placed inside a Client Component: +`CometChatProvider` uses browser APIs internally, so it must be placed inside a Client Component. Additionally, init and login must happen client-side. ```tsx title="app/providers.tsx" "use client"; -import { CometChatProvider } from "@cometchat/chat-uikit-react"; +import { useEffect, useState } from "react"; +import { CometChatUIKit, UIKitSettingsBuilder, CometChatProvider } from "@cometchat/chat-uikit-react"; export function ChatProviders({ children }: { children: React.ReactNode }) { + const [ready, setReady] = useState(false); + + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId(process.env.NEXT_PUBLIC_COMETCHAT_APP_ID!) + .setRegion(process.env.NEXT_PUBLIC_COMETCHAT_REGION!) + .setAuthKey(process.env.NEXT_PUBLIC_COMETCHAT_AUTH_KEY!) + .setCallingEnabled(true) + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.loginWithAuthToken(getAuthToken()); + setReady(true); + }); + }, []); + + if (!ready) return null; + return ( - + {children} ); @@ -285,7 +174,7 @@ export function ChatProviders({ children }: { children: React.ReactNode }) { ## Migration from v6 -In v6, initialization was always imperative: +In v6, initialization was imperative — call `init()` then `login()`, then render. v7 works the same way: ```tsx title="v6 (before)" import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; @@ -298,17 +187,34 @@ const settings = new UIKitSettingsBuilder() await CometChatUIKit.init(settings); await CometChatUIKit.login("USER_ID"); +// Then render your app ``` ```tsx title="v7 (after)" - - - +import { CometChatUIKit, UIKitSettingsBuilder, CometChatProvider } from "@cometchat/chat-uikit-react"; + +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + +await CometChatUIKit.init(settings); +await CometChatUIKit.login("USER_ID"); + +// Then render with CometChatProvider wrapping your components +function App() { + return ( + + + + ); +} ``` Key differences: -- No manual `init()` or `login()` calls needed -- No `UIKitSettingsBuilder` required for basic usage +- v7 uses `CometChatProvider` to supply React context (theme, locale, plugins, events) +- Init and login are still imperative — same as v6 - Default plugins are included automatically -- Theme and locale are props, not separate configuration steps +- Theme and locale are props on the provider - Real-time events are managed internally (no RxJS, no manual listener setup) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 6093d6db9..b30e86e52 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -14,7 +14,7 @@ The UI Kit provides a set of independent, composable React components that wire Data flow: selecting a conversation yields a `CometChat.User` or `CometChat.Group` object. Pass that object as a prop (`user` or `group`) to the message components. They handle SDK calls internally — the composer sends messages, the list receives them via real-time listeners. -All components must be rendered inside a `` which initializes the SDK connection and provides shared context (theme, locale, events). +All components must be rendered inside a `` which provides shared context (theme, locale, events). SDK initialization and login must be completed before the provider mounts. @@ -33,12 +33,7 @@ function ChatApp() { const [user, setUser] = useState(); return ( - +
setUser(conv.getConversationWith())} />
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index 406db2ddd..95eb9cb06 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -288,12 +288,7 @@ function ChatView({ targetUid }: { targetUid: string }) { function App() { return ( - + ); diff --git a/ui-kit/react/guide-group-chat-setup.mdx b/ui-kit/react/guide-group-chat-setup.mdx index d54137f9d..ac2667ad9 100644 --- a/ui-kit/react/guide-group-chat-setup.mdx +++ b/ui-kit/react/guide-group-chat-setup.mdx @@ -38,11 +38,7 @@ import { GroupChat } from "./GroupChat"; function App() { return ( - + ); @@ -345,11 +341,7 @@ function GroupChat() { function App() { return ( - + ); diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index 674cbf439..2c3edee72 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -41,11 +41,7 @@ import { function App() { return ( - + ); @@ -253,11 +249,7 @@ function ChatWithPrivateMessaging() { function App() { return ( - + ); diff --git a/ui-kit/react/guide-new-chat-creation.mdx b/ui-kit/react/guide-new-chat-creation.mdx index 7f5ec9312..2572cbc7f 100644 --- a/ui-kit/react/guide-new-chat-creation.mdx +++ b/ui-kit/react/guide-new-chat-creation.mdx @@ -38,11 +38,7 @@ import { NewChatApp } from "./NewChatApp"; function App() { return ( - + ); @@ -406,11 +402,7 @@ function NewChatApp() { function App() { return ( - + ); diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index 3f533b8f2..b917e2ce8 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -122,12 +122,7 @@ function ChatWithSearch() { function App() { return ( - + ); diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index 31ad677e2..ced528be6 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -198,11 +198,7 @@ function ChatWithThreads() { function App() { return ( - + ); diff --git a/ui-kit/react/integration-astro.mdx b/ui-kit/react/integration-astro.mdx index b03f44aab..0a6fb3764 100644 --- a/ui-kit/react/integration-astro.mdx +++ b/ui-kit/react/integration-astro.mdx @@ -1,7 +1,7 @@ --- title: "Astro Integration" sidebarTitle: "Integration" -description: "Add CometChat to an Astro app in 5 steps: create project, install, init, login, render." +description: "Add CometChat to an Astro app in 5 steps: create project, install, init + login, render island, run." --- @@ -12,10 +12,10 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install, | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | -| Order | `init()` → `login()` → render. Breaking this order = blank screen | +| Order | `init()` → `login()` → render ``. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | | SSR | Use `client:only="react"` directive — CometChat components cannot be server-rendered | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | +| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and call `.setCallingEnabled(true)` on `UIKitSettingsBuilder` | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) | @@ -83,16 +83,18 @@ npm install @cometchat/calls-sdk-javascript ## Step 3 — Create the React Island Component -CometChat components live inside a React island (a `.tsx` file in `src/components/`). Wrap your chat UI in `CometChatProvider` which handles init and login automatically. +CometChat components live inside a React island (a `.tsx` file in `src/components/`). Initialize the SDK, login, then render inside `CometChatProvider`. For development, use one of the pre-created test UIDs: `cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` ```tsx title="src/components/CometChatApp.tsx" -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatMessageHeader, @@ -101,9 +103,26 @@ import { } from "@cometchat/chat-uikit-react"; export default function CometChatApp() { + const [ready, setReady] = useState(false); const [chatUser, setChatUser] = useState(); const [chatGroup, setChatGroup] = useState(); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -116,12 +135,7 @@ export default function CometChatApp() { }; return ( - +
@@ -141,10 +155,10 @@ export default function CometChatApp() { } ``` -`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. +`CometChatProvider` supplies theme, locale, plugin registry, and event context to all child components. Init and login happen in `useEffect` and the provider only mounts after login succeeds. See the [CometChatProvider](/ui-kit/react/cometchat-provider) guide for all props. -For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. +For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login(uid)`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. --- diff --git a/ui-kit/react/integration-nextjs.mdx b/ui-kit/react/integration-nextjs.mdx index 1e0eddae7..ccdb3a670 100644 --- a/ui-kit/react/integration-nextjs.mdx +++ b/ui-kit/react/integration-nextjs.mdx @@ -1,7 +1,7 @@ --- title: "Next.js Integration" sidebarTitle: "Integration" -description: "Add CometChat to a Next.js (App Router) app in 4 steps: create project, install, wrap in CometChatProvider, run." +description: "Add CometChat to a Next.js (App Router) app in 5 steps: create project, install, init + login, render, run." --- @@ -10,10 +10,12 @@ description: "Add CometChat to a Next.js (App Router) app in 4 steps: create pro | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.0.x | | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | -| Setup | Wrap app in `` | -| Auth Key | Dev/testing only. Use `authToken` prop in production | +| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | +| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | +| Order | `init()` → `login()` → render ``. Breaking this order = blank screen | +| Auth Key | Dev/testing only. Use `loginWithAuthToken` in production | | SSR | CometChat components must be loaded with `dynamic(() => import(...), { ssr: false })` | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | +| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and call `.setCallingEnabled(true)` on `UIKitSettingsBuilder` | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -79,7 +81,7 @@ npm install @cometchat/calls-sdk-javascript ## Step 3 — Create the CometChat Client Component -CometChat uses browser APIs and cannot run in Server Components. Create a `'use client'` component that wraps your chat UI in `CometChatProvider`. +CometChat uses browser APIs and cannot run in Server Components. Create a `'use client'` component that initializes the SDK, logs in, and renders your chat UI inside `CometChatProvider`. For development, use one of the pre-created test UIDs: @@ -88,9 +90,11 @@ For development, use one of the pre-created test UIDs: ```tsx title="app/CometChatClient.tsx" 'use client'; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatMessageHeader, @@ -99,9 +103,26 @@ import { } from "@cometchat/chat-uikit-react"; export default function CometChatClient() { + const [ready, setReady] = useState(false); const [chatUser, setChatUser] = useState(); const [chatGroup, setChatGroup] = useState(); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -114,12 +135,7 @@ export default function CometChatClient() { }; return ( - +
@@ -139,10 +155,10 @@ export default function CometChatClient() { } ``` -`'use client'` is required because CometChat components use browser APIs. `CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. +`'use client'` is required because CometChat components use browser APIs. Init and login happen in a `useEffect`, and the provider only mounts after login succeeds. See the [CometChatProvider](/ui-kit/react/cometchat-provider) guide for all provider props. -For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. +For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login(uid)`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. --- diff --git a/ui-kit/react/integration-react-router.mdx b/ui-kit/react/integration-react-router.mdx index deeb98cac..3cc261677 100644 --- a/ui-kit/react/integration-react-router.mdx +++ b/ui-kit/react/integration-react-router.mdx @@ -1,7 +1,7 @@ --- title: "React Router Integration" sidebarTitle: "Integration" -description: "Add CometChat to a React Router app in 5 steps: create project, install, init, login, render." +description: "Add CometChat to a React Router app in 5 steps: create project, install, init + login, render, run." --- @@ -12,10 +12,10 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | | Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | | Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | -| Order | `init()` → `login()` → render. Breaking this order = blank screen | +| Order | `init()` → `login()` → render ``. Breaking this order = blank screen | | Auth Key | Dev/testing only. Use Auth Token in production | | SSR | N/A — client-side SPA by default | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable | +| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and call `.setCallingEnabled(true)` on `UIKitSettingsBuilder` | | Other frameworks | [React.js](/ui-kit/react/integration-react) · [Next.js](/ui-kit/react/integration-nextjs) · [Astro](/ui-kit/react/integration-astro) | @@ -79,9 +79,9 @@ npm install @cometchat/calls-sdk-javascript --- -## Step 3 — Set Up Routes and Render +## Step 3 — Initialize, Login, and Set Up Routes -Create your route structure with a chat route. `CometChatProvider` handles init and login automatically. +Call `CometChatUIKit.init()` and `CometChatUIKit.login()` before rendering. Then wrap your chat route in `CometChatProvider`. For development, use one of the pre-created test UIDs: @@ -90,14 +90,24 @@ For development, use one of the pre-created test UIDs: ```tsx title="src/main.tsx" import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; import App from "./App"; -const root = ReactDOM.createRoot(document.getElementById("root")!); -root.render( - - - -); +const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + ReactDOM.createRoot(document.getElementById("root")!).render( + + + + ); +}); ``` ```tsx title="src/App.tsx" @@ -143,12 +153,7 @@ export default function ChatPage() { }; return ( - +
@@ -168,10 +173,10 @@ export default function ChatPage() { } ``` -`CometChatProvider` handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. +Init and login complete before the app renders. `CometChatProvider` then supplies theme, locale, plugin registry, and event context. See the [CometChatProvider](/ui-kit/react/cometchat-provider) guide for all props. -For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. +For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login(uid)`. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code. --- diff --git a/ui-kit/react/integration-react.mdx b/ui-kit/react/integration-react.mdx index 186f0be3f..be1b58400 100644 --- a/ui-kit/react/integration-react.mdx +++ b/ui-kit/react/integration-react.mdx @@ -1,7 +1,7 @@ --- title: "React.js Integration" sidebarTitle: "Integration" -description: "Add CometChat to a React.js app in 4 steps: create project, install, wrap in CometChatProvider, run." +description: "Add CometChat to a React.js app in 4 steps: create project, install, init + login, render." --- @@ -10,9 +10,11 @@ description: "Add CometChat to a React.js app in 4 steps: create project, instal | --- | --- | | Package | `@cometchat/chat-uikit-react` v7.0.x | | Peer deps | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 | -| Setup | Wrap app in `` | -| Auth Key | Dev/testing only. Use `authToken` prop in production | -| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and set `callingEnabled` prop | +| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` | +| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components | +| Order | `init()` → `login()` → render ``. Breaking this order = blank screen | +| Auth Key | Dev/testing only. Use Auth Token in production | +| Calling | Optional. Install `@cometchat/calls-sdk-javascript` and call `.setCallingEnabled(true)` on `UIKitSettingsBuilder` | | Other frameworks | [Next.js](/ui-kit/react/integration-nextjs) · [React Router](/ui-kit/react/integration-react-router) · [Astro](/ui-kit/react/integration-astro) | @@ -85,14 +87,32 @@ npm install @cometchat/calls-sdk-javascript --- -## Step 3 — Render with CometChatProvider +## Step 3 — Initialize, Login, and Render -Wrap your app in `CometChatProvider` with your credentials. It handles SDK initialization, login, and all internal context setup automatically. +Call `CometChatUIKit.init()` and `CometChatUIKit.login()` before rendering your app. Then wrap your components in `CometChatProvider`. For development, use one of the pre-created test UIDs: `cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5` +```tsx title="src/main.tsx" +import ReactDOM from "react-dom/client"; +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import App from "./App"; + +const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + ReactDOM.createRoot(document.getElementById("root")!).render(); +}); +``` + ```tsx title="src/App.tsx" import { useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -120,12 +140,7 @@ function App() { }; return ( - +
@@ -147,10 +162,10 @@ function App() { export default App; ``` -`CometChatProvider` handles init, login, plugin registration, theming, locale, and real-time events — no manual setup needed. For advanced use cases (custom login flows, individual providers), see the [CometChatProvider](/ui-kit/react/cometchat-provider) guide. +`CometChatProvider` supplies theme, locale, plugin registry, and event context to all child components. Init and login must complete before the provider mounts. See the [CometChatProvider](/ui-kit/react/cometchat-provider) guide for all props. -For production, use the `authToken` prop instead of `authKey` + `uid`. Generate auth tokens server-side via the [REST API](/rest-api/chat-apis). Never ship auth keys in client code. +For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login(uid)`. Generate auth tokens server-side via the [REST API](/rest-api/chat-apis). Never ship auth keys in client code. diff --git a/ui-kit/react/localization.mdx b/ui-kit/react/localization.mdx index 397af0259..e7b179d0c 100644 --- a/ui-kit/react/localization.mdx +++ b/ui-kit/react/localization.mdx @@ -25,13 +25,7 @@ The UI Kit ships with translations for 19 languages. All user-facing text (butto ## Setting the Language ```tsx - + ``` @@ -139,6 +133,6 @@ const text = t?.("message_deleted") ?? "This message was deleted"; | v6 | v7 | | --- | --- | | `CometChatLocalize.setLanguage("fr")` | `locale="fr"` prop on `CometChatProvider` | -| Global static state | React context via `LocaleProvider` | -| Manual init required | Automatic — provider handles it | +| Global static state | React context via provider | +| Manual init required | Provider handles locale context | | Same 19 languages | Same 19 languages | diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index d052d2e9d..8e62a71cb 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -10,7 +10,7 @@ description: "Static methods on CometChatUIKit for initialization, authenticatio | Class | `CometChatUIKit` | | Package | `@cometchat/chat-uikit-react` | | Usage | Static methods — no instantiation needed | -| Note | Most users don't need these directly — `CometChatProvider` handles init and login automatically | +| Note | You must call `init()` and `login()` before rendering `CometChatProvider` | @@ -18,9 +18,8 @@ description: "Static methods on CometChatUIKit for initialization, authenticatio `CometChatUIKit` is a static class that provides imperative methods for SDK initialization, authentication, and message sending. The UI Kit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls. -Most users won't need these directly — `CometChatProvider` handles init and login automatically. These methods are useful for: +You must call `CometChatUIKit.init()` and `CometChatUIKit.login()` (or `loginWithAuthToken()`) before mounting `CometChatProvider`. These methods are also useful for: -- The [individual providers approach](/ui-kit/react/cometchat-provider#approach-2%3A-individual-providers-advanced) - Sending messages programmatically outside the composer - Checking initialization/login state @@ -80,10 +79,10 @@ CometChatUIKit.init(settings).then(() => { }); ``` -When using `CometChatProvider`, pass the pre-built settings object: +When using `sessionStorage`, configure it in your `UIKitSettingsBuilder` before calling `CometChatUIKit.init()`: ```tsx - + ``` diff --git a/ui-kit/react/migration-overview.mdx b/ui-kit/react/migration-overview.mdx index 3877fbea1..586d92323 100644 --- a/ui-kit/react/migration-overview.mdx +++ b/ui-kit/react/migration-overview.mdx @@ -12,10 +12,10 @@ description: "Migration guide covering breaking changes, architecture shifts, an | React minimum | `>=18.0.0 <21.0.0` | | New peer dep | `dompurify` 3.3.1 | | Removed dep | `rxjs` (no longer needed) | -| Init change | `CometChatProvider` (declarative) or manual `CometChatUIKit.init()` (both work) | +| Init change | Same as v6: `CometChatUIKit.init()` + `login()` imperatively, then wrap in `CometChatProvider` | | Extensibility | `DataSource`/`ChatConfigurator` → `CometChatMessagePlugin` interface | | Events | RxJS Subjects → `useCometChatEvents` hook | -| Theming | Same CSS variables, simpler setup via `theme` prop | +| Theming | Same CSS variables, simpler setup via `theme` prop on provider | @@ -25,7 +25,7 @@ v7 is a ground-up rewrite that replaces global singletons with React-native patt | Area | v6 | v7 | | --- | --- | --- | -| Initialization | `CometChatUIKit.init()` + `login()` (imperative) | `CometChatProvider` (declarative) OR manual init (both supported) | +| Initialization | `CometChatUIKit.init()` + `login()` (imperative) | Same: `CometChatUIKit.init()` + `login()` then wrap in `CometChatProvider` | | Extensibility | `DataSource` / `DataSourceDecorator` / `ChatConfigurator` | Plugin system (`CometChatMessagePlugin` interface) | | Events | Multiple RxJS Subject classes | Unified event bus (`useCometChatEvents` hook) | | Component API | Flat props only | Compound components (flat API still works) | @@ -55,32 +55,44 @@ npm uninstall rxjs # No longer needed for CometChat ### 2. Update Initialization -**Option A: Declarative (recommended)** - -Replace manual `init()` + `login()` with `CometChatProvider`: +The initialization pattern is nearly identical between v6 and v7. The only addition in v7 is wrapping your app in `CometChatProvider`: ```tsx title="v6" // main.tsx -CometChatUIKit.init(settings).then(() => render()); - -// App.tsx -CometChatUIKit.login("uid").then(() => setLoggedIn(true)); +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("us") + .setAuthKey("AUTH_KEY") + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("uid"); + render(); +}); ``` ```tsx title="v7" - - - -``` - -**Option B: Manual (same as v6)** +// main.tsx — same init + login, just add CometChatProvider in your component tree +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("us") + .setAuthKey("AUTH_KEY") + .build(); + +CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("uid"); + render(); +}); -You can still use `CometChatUIKit.init()` + `login()` and compose individual providers. See [CometChatProvider — Individual Providers](/ui-kit/react/cometchat-provider#approach-2%3A-individual-providers-advanced). +// App.tsx — wrap in CometChatProvider +function App() { + return ( + + + + ); +} +``` ### 3. Replace DataSource/Decorator with Plugins @@ -153,7 +165,7 @@ CSS variables are the same between v6 and v7. The only change is how you set the ```tsx title="v7" // theme prop on provider - + ``` Or use the `useTheme()` hook for runtime switching: @@ -163,13 +175,20 @@ const { theme, setTheme } = useTheme(); ### 7. Enable Calling (If Used) -Calling is now opt-in: +Calling is now configured via `UIKitSettingsBuilder` rather than a provider prop: ```tsx title="v7" - +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("us") + .setAuthKey("AUTH_KEY") + .setCallingEnabled(true) + .build(); + +await CometChatUIKit.init(settings); ``` -Without `callingEnabled`, call buttons are hidden and the Calls SDK is not loaded. +Without `.setCallingEnabled(true)`, call buttons are hidden and the Calls SDK is not loaded. --- @@ -182,7 +201,7 @@ v6 used a decorator pattern (`DataSourceDecorator`) to customize message renderi - Each plugin owns one or more message types - Plugins provide `renderBubble()`, `getOptions()`, `getLastMessagePreview()` - Default plugins are included automatically -- Custom plugins are passed via the `plugins` prop +- Custom plugins are passed via the `plugins` prop on `CometChatProvider` ### RxJS Subjects → Unified Event Bus @@ -251,7 +270,7 @@ This applies to all message bubbles: `CometChatTextBubble`, `CometChatImageBubbl Full prop-by-prop migration reference for every component - New declarative setup with both approaches explained + Provider setup with all props explained The new plugin system that replaces DataSource diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 749e57b96..cae559c83 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -41,14 +41,16 @@ Three sections working together: ## Full Code -Create the client component with the chat UI, then import it dynamically in your page. +Create the client component with the chat UI, then import it dynamically in your page. Init and login happen in a `useEffect` before the provider mounts. ```tsx title="app/chat/CometChatClient.tsx" 'use client'; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatMessageHeader, @@ -57,9 +59,26 @@ import { } from "@cometchat/chat-uikit-react"; export default function CometChatClient() { + const [ready, setReady] = useState(false); const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -72,12 +91,7 @@ export default function CometChatClient() { }; return ( - +
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 50b2dbcdd..8d743a646 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -49,6 +49,8 @@ Create the client component with the chat UI, then import it dynamically in your import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatMessageHeader, CometChatMessageList, @@ -58,24 +60,29 @@ import { const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with export default function CometChatClient() { + const [ready, setReady] = useState(false); const [chatUser, setChatUser] = useState(undefined); useEffect(() => { - CometChat.getUser(RECIPIENT_UID).then( - (user) => setChatUser(user), - (error) => console.error("User fetch failed:", error) - ); + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + const user = await CometChat.getUser(RECIPIENT_UID); + setChatUser(user); + setReady(true); + }); }, []); - if (!chatUser) return
Loading chat...
; + if (!ready || !chatUser) return
Loading chat...
; return ( - +
@@ -115,6 +122,8 @@ To load a group chat instead of one-to-one, fetch a `Group` object and pass it t import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatMessageHeader, CometChatMessageList, @@ -124,24 +133,29 @@ import { const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID export default function CometChatClient() { + const [ready, setReady] = useState(false); const [chatGroup, setChatGroup] = useState(undefined); useEffect(() => { - CometChat.getGroup(GROUP_ID).then( - (group) => setChatGroup(group), - (error) => console.error("Group fetch failed:", error) - ); + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + const group = await CometChat.getGroup(GROUP_ID); + setChatGroup(group); + setReady(true); + }); }, []); - if (!chatGroup) return
Loading chat...
; + if (!ready || !chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index aa8e8b2bf..35b9649ed 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -41,14 +41,16 @@ Three sections working together: ## Full Code -Create the client component with the tabbed UI, then import it dynamically in your page. +Create the client component with the tabbed UI, then import it dynamically in your page. Init and login happen in a `useEffect` before the provider mounts. ```tsx title="app/chat/CometChatClient.tsx" 'use client'; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { + CometChatUIKit, + UIKitSettingsBuilder, CometChatProvider, CometChatConversations, CometChatUsers, @@ -61,10 +63,27 @@ import { type Tab = "chat" | "calls" | "users"; export default function CometChatClient() { + const [ready, setReady] = useState(false); const [activeTab, setActiveTab] = useState("chat"); const [selectedUser, setSelectedUser] = useState(undefined); const [selectedGroup, setSelectedGroup] = useState(undefined); + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return
Loading chat...
; + const handleConversationClick = (conversation: CometChat.Conversation) => { const entity = conversation.getConversationWith(); if (conversation.getConversationType() === "user") { @@ -99,12 +118,7 @@ export default function CometChatClient() { }; return ( - +
diff --git a/ui-kit/react/plugins/custom-plugin.mdx b/ui-kit/react/plugins/custom-plugin.mdx index 44bada84e..e12959a5f 100644 --- a/ui-kit/react/plugins/custom-plugin.mdx +++ b/ui-kit/react/plugins/custom-plugin.mdx @@ -114,13 +114,7 @@ import { LocationPlugin } from "./plugins/LocationPlugin"; function App() { return ( - + ); diff --git a/ui-kit/react/plugins/overview.mdx b/ui-kit/react/plugins/overview.mdx index a74553a70..fcbbd5d45 100644 --- a/ui-kit/react/plugins/overview.mdx +++ b/ui-kit/react/plugins/overview.mdx @@ -56,13 +56,7 @@ import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; function App() { return ( - + ); @@ -104,13 +98,7 @@ The AI plugin handles messages in the `agentic` category. It renders completed a import { CometChatProvider } from "@cometchat/chat-uikit-react"; import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; - + ``` diff --git a/ui-kit/react/plugins/text-formatters.mdx b/ui-kit/react/plugins/text-formatters.mdx index 882862092..e908319ad 100644 --- a/ui-kit/react/plugins/text-formatters.mdx +++ b/ui-kit/react/plugins/text-formatters.mdx @@ -101,7 +101,7 @@ export class HashtagFormatter extends CometChatTextFormatter { ## Registering Custom Formatters -Custom formatters are registered by creating a custom text plugin that extends the default one: +Custom formatters are registered by creating a custom text plugin that provides them: ```typescript title="src/plugins/CustomTextPlugin.ts" import { CometChatTextPlugin } from "@cometchat/chat-uikit-react"; @@ -128,30 +128,19 @@ export const CustomTextPlugin = { }; ``` -Then use it in your provider with a custom plugin array (replacing the default text plugin): +Then pass it in your provider's `plugins` prop: ```tsx -import { CometChatProvider, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -import { defaultPlugins } from "@cometchat/chat-uikit-react"; +import { CometChatProvider } from "@cometchat/chat-uikit-react"; import { CustomTextPlugin } from "./plugins/CustomTextPlugin"; -// Replace the default text plugin with our custom one -const plugins = defaultPlugins.map(p => - p.id === "text" ? CustomTextPlugin : p -); - -const settings = new UIKitSettingsBuilder() - .setAppId("YOUR_APP_ID") - .setRegion("us") - .setAuthKey("YOUR_AUTH_KEY") - .setPlugins(plugins) - .build(); - - + ``` +Since user plugins are prepended before the defaults in the registry, your custom text plugin takes precedence over the built-in one (first match wins) + ## Formatter Details ### CometChatMarkdownFormatter diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index dd1859407..e4f13a2e3 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -40,7 +40,7 @@ Three sections working together: ## Full Code -Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Replace your `src/App.tsx` with the following. Init and login must complete before the provider mounts — see the [React.js Integration](/ui-kit/react/integration-react) guide for the `src/main.tsx` setup. ```tsx title="src/App.tsx" import { useState } from "react"; @@ -70,12 +70,7 @@ function App() { }; return ( - +
diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 5d91456e4..db2594c3b 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -40,7 +40,7 @@ Three components stacked vertically: ## Full Code -Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Replace your `src/App.tsx` with the following. Init and login must complete before the provider mounts — see the [React.js Integration](/ui-kit/react/integration-react) guide for the `src/main.tsx` setup. ```tsx title="src/App.tsx" import { useEffect, useState } from "react"; @@ -68,12 +68,7 @@ function App() { if (!chatUser) return
Loading chat...
; return ( - +
@@ -132,12 +127,7 @@ function App() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index 25f0fa839..fc8325b47 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -41,7 +41,7 @@ Three sections working together: ## Full Code -Create a chat route component. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Create a chat route component. Init and login must complete before the provider mounts — see the [React Router Integration](/ui-kit/react/integration-react-router) guide for the `src/main.tsx` setup. ```tsx title="src/pages/ChatPage.tsx" import { useState } from "react"; @@ -71,12 +71,7 @@ export default function ChatPage() { }; return ( - +
diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index fb3daa399..35dffdddb 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -41,7 +41,7 @@ Three components stacked vertically: ## Full Code -Create a route component for the chat page. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Create a route component for the chat page. Init and login are completed in `src/main.tsx` (see [React Router Integration](/ui-kit/react/integration-react-router)). ```tsx title="src/pages/DirectChatPage.tsx" import { useEffect, useState } from "react"; @@ -69,12 +69,7 @@ export default function DirectChatPage() { if (!chatUser) return
Loading chat...
; return ( - +
@@ -152,12 +147,7 @@ export default function DirectChatPage() { if (!chatGroup) return
Loading chat...
; return ( - +
diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index 5a31e8643..e6ee11cf7 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -41,7 +41,7 @@ Three sections working together: ## Full Code -Create a route component for the tabbed chat page. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Create a route component for the tabbed chat page. Init and login are completed in `src/main.tsx` (see [React Router Integration](/ui-kit/react/integration-react-router)). ```tsx title="src/pages/TabbedChatPage.tsx" import { useState } from "react"; @@ -98,12 +98,7 @@ export default function TabbedChatPage() { }; return ( - +
diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index cd73f1b4b..ba4b4146d 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -40,7 +40,7 @@ Three sections working together: ## Full Code -Replace your `src/App.tsx` with the following. `CometChatProvider` handles SDK init and login from the credentials you pass it, the same setup as the integration guide. +Replace your `src/App.tsx` with the following. Init and login must complete before the provider mounts — see the [React.js Integration](/ui-kit/react/integration-react) guide for the `src/main.tsx` setup. ```tsx title="src/App.tsx" import { useState } from "react"; @@ -97,12 +97,7 @@ function App() { }; return ( - +
diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx index f39c16864..d8aebaa90 100644 --- a/ui-kit/react/sound-manager.mdx +++ b/ui-kit/react/sound-manager.mdx @@ -11,7 +11,8 @@ description: "Play notification sounds for incoming/outgoing messages and calls | Package | `@cometchat/chat-uikit-react` | | Sound types | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` | | Custom sounds | Pass URL as second argument: `CometChatSoundManager.play('incomingMessage', '/my-sound.mp3')` | -| Disable | Use `disableSoundForMessages` / `disableSoundForCalls` in `config` prop | +| Disable (calls) | Use `disableSoundForCalls` / `customSoundForCalls` in `config` prop | +| Disable (messages) | Use `disableSoundForMessages` prop on individual components (e.g. `CometChatConversations`, `CometChatMessageComposer`) | @@ -35,24 +36,29 @@ description: "Play notification sounds for incoming/outgoing messages and calls ## Disabling Sounds -Use the `config` prop on `CometChatProvider`: +### Call Sounds (Global Config) + +Use the `config` prop on `CometChatProvider` to disable or customize call sounds globally: ```tsx ``` -You can also disable sounds per-component via props like `disableSoundForMessages` on `CometChatConversations` and `CometChatMessageComposer`. +### Message Sounds (Per-Component Props) + +Disable message sounds on individual components using the `disableSoundForMessages` prop: + +```tsx + + +``` --- diff --git a/ui-kit/react/theming.mdx b/ui-kit/react/theming.mdx index bba83501f..0c26f48d4 100644 --- a/ui-kit/react/theming.mdx +++ b/ui-kit/react/theming.mdx @@ -28,13 +28,7 @@ Theming works through the `data-theme` attribute on the `.cometchat` wrapper div Pass the `theme` prop to `CometChatProvider`: ```tsx - + ``` @@ -241,7 +235,7 @@ Define a complete set of tokens under a custom `data-theme` value: Then pass your theme name: ```tsx - + ``` diff --git a/ui-kit/react/troubleshooting.mdx b/ui-kit/react/troubleshooting.mdx index 20f8b32d9..5530b0602 100644 --- a/ui-kit/react/troubleshooting.mdx +++ b/ui-kit/react/troubleshooting.mdx @@ -15,7 +15,7 @@ Error: Hydration failed because the initial UI does not match what was rendered ### Root Cause -`CometChatProvider` uses browser-only APIs (WebSocket connections, `window`, `localStorage`) during initialization. When the component renders on the server, it produces different output than the client, causing a hydration mismatch. +`CometChatProvider` uses browser-only APIs (WebSocket connections, `window`, `localStorage`). When a parent component renders on the server, it produces different output than the client, causing a hydration mismatch. ### Solution @@ -24,15 +24,29 @@ Mark the component boundary containing `CometChatProvider` as client-only. In Ne ```tsx 'use client'; -import { CometChatProvider } from '@cometchat/chat-uikit-react'; +import { useEffect, useState } from 'react'; +import { CometChatUIKit, UIKitSettingsBuilder, CometChatProvider } from '@cometchat/chat-uikit-react'; export function ChatProvider({ children }: { children: React.ReactNode }) { + const [ready, setReady] = useState(false); + + useEffect(() => { + const settings = new UIKitSettingsBuilder() + .setAppId("YOUR_APP_ID") + .setRegion("YOUR_REGION") + .setAuthKey("YOUR_AUTH_KEY") + .build(); + + CometChatUIKit.init(settings).then(async () => { + await CometChatUIKit.login("cometchat-uid-1"); + setReady(true); + }); + }, []); + + if (!ready) return null; + return ( - + {children} ); @@ -113,30 +127,28 @@ CometChat SDK initialization failed: ERR_NETWORK ### Root Cause -**Invalid credentials:** The `appId`, `region`, or `authKey` passed to `CometChatProvider` are incorrect, expired, or belong to a different environment (e.g., using production credentials in a development build). +**Invalid credentials:** The `appId`, `region`, or `authKey` passed to `UIKitSettingsBuilder` are incorrect, expired, or belong to a different environment (e.g., using production credentials in a development build). **Network issues:** The client cannot reach CometChat's servers due to network restrictions, firewall rules, or the CometChat service being temporarily unavailable. ### Solution -Verify your credentials match your CometChat dashboard and use the `onError` callback to surface initialization issues: +Verify your credentials match your CometChat dashboard and add error handling to your init/login flow: ```tsx -import { CometChatProvider } from '@cometchat/chat-uikit-react'; - -function App() { - return ( - { - console.error('CometChat initialization error:', error); - }} - > - {/* Your chat UI */} - - ); +import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-react'; + +const settings = new UIKitSettingsBuilder() + .setAppId(import.meta.env.VITE_COMETCHAT_APP_ID) + .setRegion(import.meta.env.VITE_COMETCHAT_REGION) + .setAuthKey(import.meta.env.VITE_COMETCHAT_AUTH_KEY) + .build(); + +try { + await CometChatUIKit.init(settings); + await CometChatUIKit.login("cometchat-uid-1"); +} catch (error) { + console.error('CometChat initialization error:', error); } ``` @@ -167,12 +179,7 @@ import { CometChatProvider } from '@cometchat/chat-uikit-react'; function App() { return ( - + {/* Components will use dark theme */} ); @@ -193,5 +200,5 @@ If you're using a custom theme, make sure your CSS defines variables under a mat Then pass the custom theme name to the provider: ```tsx - + ``` From c6faef6e554160a19b8a77c9fa133f0a5d0640bc Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Thu, 18 Jun 2026 18:41:08 +0530 Subject: [PATCH 26/27] docs(ui-kit/react): clarify sound manager configuration levels - Restructure documentation to distinguish between global config and component-level props - Add detailed table explaining `disableSoundForMessages`, `customSoundForMessages`, `disableSoundForCalls`, and `customSoundForCalls` properties - Update quick reference table to show global config approach via `CometChatProvider` - Document component-level override pattern with examples for `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatIncomingCall`, and `CometChatOutgoingCall` - Add clarification note that component props take precedence over global config - Consolidate "Disabling Sounds" section into "Disabling & Customizing Sounds" with two-level configuration hierarchy --- ui-kit/react/sound-manager.mdx | 54 ++++++++++++++++++++++++++++------ 1 file changed, 45 insertions(+), 9 deletions(-) diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx index d8aebaa90..96ede84de 100644 --- a/ui-kit/react/sound-manager.mdx +++ b/ui-kit/react/sound-manager.mdx @@ -11,8 +11,8 @@ description: "Play notification sounds for incoming/outgoing messages and calls | Package | `@cometchat/chat-uikit-react` | | Sound types | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` | | Custom sounds | Pass URL as second argument: `CometChatSoundManager.play('incomingMessage', '/my-sound.mp3')` | -| Disable (calls) | Use `disableSoundForCalls` / `customSoundForCalls` in `config` prop | -| Disable (messages) | Use `disableSoundForMessages` prop on individual components (e.g. `CometChatConversations`, `CometChatMessageComposer`) | +| Global config | `disableSoundForMessages`, `customSoundForMessages`, `disableSoundForCalls`, `customSoundForCalls` via `config` prop on `CometChatProvider` | +| Component override | Same props on individual components (props take precedence over global config) | @@ -34,15 +34,22 @@ description: "Play notification sounds for incoming/outgoing messages and calls --- -## Disabling Sounds +## Disabling & Customizing Sounds -### Call Sounds (Global Config) +Sound behavior can be configured at two levels: -Use the `config` prop on `CometChatProvider` to disable or customize call sounds globally: +1. **Global config** — Set on `CometChatProvider` via the `config` prop. Applies to all components. +2. **Component props** — Set directly on individual components. Takes precedence over global config. + +### Global Config + +Use the `config` prop on `CometChatProvider` to control sound behavior across all components: ```tsx ``` -### Message Sounds (Per-Component Props) +| Property | Type | Description | +| --- | --- | --- | +| `disableSoundForMessages` | `boolean` | Disable sound for incoming messages across all components. Default: `false` | +| `customSoundForMessages` | `string` | Custom sound URL for incoming message notifications | +| `disableSoundForCalls` | `boolean` | Disable sound for incoming/outgoing calls. Default: `false` | +| `customSoundForCalls` | `string` | Custom sound URL for calls | + +### Component-Level Props (Override) -Disable message sounds on individual components using the `disableSoundForMessages` prop: +Individual components accept the same props. When set, they override the global config for that component only. ```tsx - - +{/* Override global config for this specific component */} + + + ``` +**Components that accept sound props:** + +| Component | Props | +| --- | --- | +| `CometChatConversations` | `disableSoundForMessages`, `customSoundForMessages` | +| `CometChatMessageList` | `disableSoundForMessages`, `customSoundForMessages` | +| `CometChatMessageComposer` | `disableSoundForMessage`, `customSoundForMessage` | +| `CometChatIncomingCall` | `disableSoundForCalls`, `customSoundForCalls` | +| `CometChatOutgoingCall` | `disableSoundForCalls`, `customSoundForCalls` | + + +Component-level props always take precedence over the global config. If a prop is not set on a component, it falls back to the global config value. + + --- ## Custom Sound URLs From 5d289b88a4d9c5e4f74915deaf37b614f1f7aaec Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Fri, 19 Jun 2026 15:44:19 +0530 Subject: [PATCH 27/27] move AI Plugin to default plugin --- ui-kit/react/ai-features.mdx | 3 -- ui-kit/react/cometchat-provider.mdx | 6 +-- ui-kit/react/plugins/overview.mdx | 75 +++++++++++++++++------------ 3 files changed, 48 insertions(+), 36 deletions(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index b2090b6c8..d2109453c 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -19,9 +19,6 @@ description: "AI-powered features in CometChat's React UI Kit: Conversation Star CometChat AI features enhance user interaction by providing contextual suggestions and summaries. Each feature is activated from the Dashboard and auto-integrates into UI Kit components. - -The [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) component requires `CometChatAIPlugin` to be configured in your `CometChatProvider` plugins. See the [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) component page for setup details. - ## Smart Chat Features diff --git a/ui-kit/react/cometchat-provider.mdx b/ui-kit/react/cometchat-provider.mdx index a9dd8dc40..47229eba4 100644 --- a/ui-kit/react/cometchat-provider.mdx +++ b/ui-kit/react/cometchat-provider.mdx @@ -76,13 +76,13 @@ For production, use `CometChatUIKit.loginWithAuthToken(token)` instead of `login ## With Additional Plugins -Default plugins (text, image, file, audio, video) are always included. Pass additional plugins via the `plugins` prop: +All default plugins (text, image, file, audio, video, AI, etc.) are always included. Pass your own custom plugins via the `plugins` prop: ```tsx import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; +import { MyCustomPlugin } from "./plugins/MyCustomPlugin"; - + ``` diff --git a/ui-kit/react/plugins/overview.mdx b/ui-kit/react/plugins/overview.mdx index fcbbd5d45..65f3f6f87 100644 --- a/ui-kit/react/plugins/overview.mdx +++ b/ui-kit/react/plugins/overview.mdx @@ -29,6 +29,31 @@ Plugins are a thin routing layer — they decide which bubble component renders --- +## The Plugin Interface + +Every plugin implements the `CometChatMessagePlugin` interface. Three members are **required**; everything else is optional and lets you override a specific bubble region or behavior. + +| Member | Signature | Required | Purpose | +| --- | --- | --- | --- | +| `id` | `string` | Yes | Unique plugin identifier (e.g. `'text'`, `'polls'`) | +| `messageTypes` | `string[]` | Yes | SDK message types this plugin handles | +| `messageCategories` | `string[]` | Yes | SDK message categories this plugin handles | +| `renderBubble` | `(message, context) => ReactNode` | Yes | Render the inner bubble content (the outer wrapper is handled by `CometChatMessageBubble`) | +| `getOptions` | `(message, context) => CometChatMessageOption[]` | Optional | Context menu options for the message (return `[]` for none) | +| `getLastMessagePreview` | `(message, loggedInUser, t?) => string` | Optional | Plain-text subtitle shown in the Conversations list | +| `getTextFormatters` | `() => CometChatTextFormatter[]` | Optional | Text formatters this plugin provides (only the text plugin uses this) | +| `renderLeadingView` | `(message, context) => ReactNode` | Optional | Override the leading view (avatar area) | +| `renderHeaderView` | `(message, context) => ReactNode` | Optional | Override the header view (sender name area) | +| `renderFooterView` | `(message, context) => ReactNode` | Optional | Override the footer view (reactions area) | +| `renderBottomView` | `(message, context) => ReactNode` | Optional | Override the bottom view (moderation / error footer) | +| `renderStatusInfoView` | `(message, context) => ReactNode` | Optional | Override the status info (timestamp + receipts + "edited") | +| `renderReplyView` | `(message, context) => ReactNode` | Optional | Override the reply view (quoted-message preview) | +| `renderThreadView` | `(message, context) => ReactNode` | Optional | Override the thread view (reply-count indicator) | + +For the view-slot methods (`render*View`), return a `ReactNode` to override the region, `null` to suppress it, or `undefined` to keep the built-in default. The full TypeScript interface and the `context` object reference are documented in [Creating a Custom Plugin](/ui-kit/react/plugins/custom-plugin). + +--- + ## How Plugin Resolution Works When the UI Kit needs to render a message, it asks the **Plugin Registry** to find the right plugin: @@ -48,15 +73,15 @@ Message { type: "image", category: "message" } ## Adding Plugins -Default plugins are always included. To add extra plugins (like AI), pass them via the `plugins` prop on `CometChatProvider`: +All default plugins are always included. To add your own custom plugins, pass them via the `plugins` prop on `CometChatProvider`. They are appended after the defaults, so default plugins keep priority for their message types: ```tsx import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; +import { MyCustomPlugin } from "./plugins/MyCustomPlugin"; function App() { return ( - + ); @@ -69,40 +94,30 @@ function App() { These plugins are included automatically — no configuration needed. Each routes its message type to a bubble component; follow the component link for the full rendering behavior, props, and CSS. -| Plugin | Message type(s) | What it renders | Component | -| --- | --- | --- | --- | -| **Text** | `text` | Formatted text with @mentions, clickable URLs, and markdown | [Text Bubble](/ui-kit/react/components/text-bubble) | -| **Image** | `image` | Responsive image grid with captions and a fullscreen viewer | [Image Bubble](/ui-kit/react/components/image-bubble) | -| **Video** | `video` | Inline player (single) or thumbnail grid with play overlays (multiple) | [Video Bubble](/ui-kit/react/components/video-bubble) | -| **File** | `file` | File card with name, size, type icon, and download | [File Bubble](/ui-kit/react/components/file-bubble) | -| **Audio** | `audio` | Audio player with waveform, play/pause, duration, and download | [Audio Bubble](/ui-kit/react/components/audio-bubble) | -| **Polls** | `extension_poll` | Interactive poll with voting and live results | [Poll Bubble](/ui-kit/react/components/poll-bubble) | -| **Stickers** | `extension_sticker` | Sticker image extracted from the message metadata | [Sticker Bubble](/ui-kit/react/components/sticker-bubble) | -| **Collaborative Document** | `extension_document` | Document card with an "Open Document" button | [Collaborative Document Bubble](/ui-kit/react/components/collaborative-document-bubble) | -| **Collaborative Whiteboard** | `extension_whiteboard` | Whiteboard card with an "Open Whiteboard" button | [Collaborative Whiteboard Bubble](/ui-kit/react/components/collaborative-whiteboard-bubble) | -| **Group Action** | `groupMember` (action) | Centered system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | -| **Call Action** | `audio` / `video` (call) | Centered call status messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | -| **Delete** | any (deleted) | "This message was deleted" placeholder | [Delete Bubble](/ui-kit/react/components/delete-bubble) | +| Plugin | Message type(s) | Category | What it renders | Component | +| --- | --- | --- | --- | --- | +| **Text** | `text` | `message` | Formatted text with @mentions, clickable URLs, and markdown | [Text Bubble](/ui-kit/react/components/text-bubble) | +| **Image** | `image` | `message` | Responsive image grid with captions and a fullscreen viewer | [Image Bubble](/ui-kit/react/components/image-bubble) | +| **Video** | `video` | `message` | Inline player (single) or thumbnail grid with play overlays (multiple) | [Video Bubble](/ui-kit/react/components/video-bubble) | +| **File** | `file` | `message` | File card with name, size, type icon, and download | [File Bubble](/ui-kit/react/components/file-bubble) | +| **Audio** | `audio` | `message` | Audio player with waveform, play/pause, duration, and download | [Audio Bubble](/ui-kit/react/components/audio-bubble) | +| **Polls** | `extension_poll` | `custom` | Interactive poll with voting and live results | [Poll Bubble](/ui-kit/react/components/poll-bubble) | +| **Stickers** | `extension_sticker` | `custom` | Sticker image extracted from the message metadata | [Sticker Bubble](/ui-kit/react/components/sticker-bubble) | +| **Collaborative Document** | `extension_document` | `custom` | Document card with an "Open Document" button | [Collaborative Document Bubble](/ui-kit/react/components/collaborative-document-bubble) | +| **Collaborative Whiteboard** | `extension_whiteboard` | `custom` | Whiteboard card with an "Open Whiteboard" button | [Collaborative Whiteboard Bubble](/ui-kit/react/components/collaborative-whiteboard-bubble) | +| **Group Action** | `groupMember` | `action` | Centered system messages (joined, left, kicked, banned, scope change) | [Group Action Bubble](/ui-kit/react/components/group-action-bubble) | +| **Call Action** | `audio` / `video` | `call` | Centered call status messages (missed, outgoing, incoming, ended) | [Call Action Bubble](/ui-kit/react/components/call-action-bubble) | +| **AI** | `assistant`, `toolArguments`, `toolResults`, `run_started` | `agentic`, `custom` | AI assistant responses, tool call arguments/results, and a streaming bubble | [AI Plugin ↓](#ai-plugin) | +| **Delete** | any (deleted) | any | "This message was deleted" placeholder | [Delete Bubble](/ui-kit/react/components/delete-bubble) | --- ## AI Plugin -The AI plugin handles messages in the `agentic` category. It renders completed assistant responses (with markdown), tool call arguments and results (as formatted JSON), and a streaming bubble while the AI is generating. It is **not included by default** — add it via the `plugins` prop. +The AI plugin handles messages in the `agentic` category. It renders completed assistant responses (with markdown), tool call arguments and results (as formatted JSON), and a streaming bubble while the AI is generating. It is **included by default** — no installation or `plugins` configuration is required. -### Installation - -```tsx -import { CometChatProvider } from "@cometchat/chat-uikit-react"; -import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai"; - - - - -``` - ### Message Types | Type | Category | What it renders | @@ -127,7 +142,7 @@ Bubble components: `CometChatAIAssistantBubble`, `CometChatStreamMessageBubble`, The AI Assistant Chat panel can be preloaded on hover/focus to reduce perceived latency: ```tsx -import { preloadAIAssistantChat } from "@cometchat/chat-uikit-react/plugins/ai"; +import { preloadAIAssistantChat } from "@cometchat/chat-uikit-react"; // Call on AI button hover onMouseEnter={() => preloadAIAssistantChat()}