diff --git a/ui-kit/angular/api-reference/chat-state-service.mdx b/ui-kit/angular/api-reference/chat-state-service.mdx index 36681ba60..00f692e71 100644 --- a/ui-kit/angular/api-reference/chat-state-service.mdx +++ b/ui-kit/angular/api-reference/chat-state-service.mdx @@ -2,6 +2,24 @@ title: "Chat State Service" description: "Service Reference for the centralized chat state management service in CometChat Angular UIKit" --- + + + +| Field | Value | +| --- | --- | +| Purpose | The single source of truth for the ACTIVE chat (user / group / conversation). Use it instead of a local `selected` field — two sources drift and the list stops highlighting the open row. | +| Class | `ChatStateService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { ChatStateService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(ChatStateService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `setActiveUser` · `setActiveGroup` · `setActiveConversation` · `getActiveUser` · `getActiveGroup` · `getActiveConversation` … +2 | +| Reactive state (signals) | `activeUser` · `activeGroup` · `activeConversation` — use directly in templates, no subscription | +| Reactive state (observables) | `activeUser$` · `activeGroup$` · `activeConversation$` — `takeUntil(destroy$)` in `ngOnDestroy` | +| Full API | See [Setter Methods](#setter-methods) | +| Usage | See [Usage Examples](#usage-examples) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + ## Overview `ChatStateService` is the centralized Angular service for managing active chat state across the CometChat Angular UIKit. It provides a single source of truth for the currently active chat entity (User, Group, or Conversation) in your application. diff --git a/ui-kit/angular/api-reference/formatter-config-service.mdx b/ui-kit/angular/api-reference/formatter-config-service.mdx index a2cdc3eb6..d31bd089e 100644 --- a/ui-kit/angular/api-reference/formatter-config-service.mdx +++ b/ui-kit/angular/api-reference/formatter-config-service.mdx @@ -1,3 +1,23 @@ +--- +title: "Formatter Config Service" +description: "Service Reference for the centralized text-formatter configuration service in CometChat Angular UIKit" +--- + + + +| Field | Value | +| --- | --- | +| Purpose | App-wide default text formatters, so mentions/URLs/hashtags are configured once rather than per component instance. | +| Class | `FormatterConfigService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { FormatterConfigService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(FormatterConfigService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `getDefaultFormatters` · `setDefaultFormatters` · `addFormatters` · `resetToDefaults` · `getFormattersWithContext` | +| Full API | See [Core Methods](#core-methods) | +| Usage | See [Usage Patterns](#usage-patterns) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `FormatterConfigService` is a centralized Angular service for managing default text formatters across the CometChat UIKit. It provides a single source of truth for formatter configuration, allowing you to set formatters once and have them automatically applied across all text-displaying components. diff --git a/ui-kit/angular/api-reference/introduction.mdx b/ui-kit/angular/api-reference/introduction.mdx index bc365ee1a..306fcbe13 100644 --- a/ui-kit/angular/api-reference/introduction.mdx +++ b/ui-kit/angular/api-reference/introduction.mdx @@ -2,6 +2,18 @@ title: Services description: "Reference for CometChat UIKit Angular injectable services." --- + + + +| Field | Value | +| --- | --- | +| Purpose | Index of the Angular UI Kit's injectable services — start here to find the right one | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Services | `ChatStateService` · `FormatterConfigService` · `MessageBubbleConfigService` · `RichTextEditorService` · `SearchConversationsService` · `SearchMessagesService` · `CometChatTemplatesService` | +| Injected with | `inject()` — all are `providedIn: 'root'` | +| Full list | See [Services](#services) | + + This section documents the Angular services provided by the CometChat UIKit. These are injectable services you use via Angular's dependency injection to manage state, configure components, and customize behavior. ## Core Classes diff --git a/ui-kit/angular/api-reference/message-bubble-config-service.mdx b/ui-kit/angular/api-reference/message-bubble-config-service.mdx index 79111b0b7..9dae82625 100644 --- a/ui-kit/angular/api-reference/message-bubble-config-service.mdx +++ b/ui-kit/angular/api-reference/message-bubble-config-service.mdx @@ -2,6 +2,23 @@ title: "Message Bubble Config Service" description: "API reference for the centralized message bubble view configuration service in CometChat Angular UIKit" --- + + + +| Field | Value | +| --- | --- | +| Purpose | App-wide message-bubble configuration with per-component overrides; priority logic decides which wins. | +| Class | `MessageBubbleConfigService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { MessageBubbleConfigService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(MessageBubbleConfigService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `setBubbleView` · `setGlobalView` · `setGlobalViews` · `getView` · `setMessageTemplates` · `clearAll` … +2 | +| Reactive state (signals) | `configVersion` — use directly in templates, no subscription | +| Full API | See [Methods](#methods) | +| Usage | See [Usage Examples](#usage-examples) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + `MessageBubbleConfigService` is the centralized Angular service for configuring how message bubbles are rendered across the CometChat Angular UIKit. It lets you customize individual sections of any message bubble — globally or per message type — without touching component templates. The service is `providedIn: 'root'` (singleton by default). All `cometchat-message-list` instances share the same configuration unless you [scope the service](#scoping-for-multiple-instances). diff --git a/ui-kit/angular/api-reference/rich-text-editor-service.mdx b/ui-kit/angular/api-reference/rich-text-editor-service.mdx index ebcb49dc5..ba69354e3 100644 --- a/ui-kit/angular/api-reference/rich-text-editor-service.mdx +++ b/ui-kit/angular/api-reference/rich-text-editor-service.mdx @@ -1,4 +1,23 @@ -# RichTextEditorService API Reference +--- +title: "Rich Text Editor Service" +description: "Service Reference for the native-API rich text editor service in CometChat Angular UIKit" +--- + + + +| Field | Value | +| --- | --- | +| Purpose | Drives the composer's rich text editing (bold, lists, links, undo) on native browser APIs — no third-party editor. | +| Class | `RichTextEditorService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { RichTextEditorService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(RichTextEditorService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `createEditor` · `destroyEditor` · `resetFormatState` · `getFormatState` · `toggleBold` · `toggleItalic` … +28 | +| Reactive state (signals) | `formatState` — use directly in templates, no subscription | +| Full API | see the page body | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `RichTextEditorService` is an Angular service that provides rich text editing capabilities using native browser APIs. It is a lightweight, custom implementation with no external dependencies. diff --git a/ui-kit/angular/api-reference/search-conversations-service.mdx b/ui-kit/angular/api-reference/search-conversations-service.mdx index 540718d81..7581e143f 100644 --- a/ui-kit/angular/api-reference/search-conversations-service.mdx +++ b/ui-kit/angular/api-reference/search-conversations-service.mdx @@ -3,6 +3,22 @@ title: Search Conversations Service description: Signal-based service for conversation search state, SDK queries, pagination, and real-time listener management. --- + + +| Field | Value | +| --- | --- | +| Purpose | Headless conversation search: reactive results without mounting a search component. | +| Class | `SearchConversationsService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { SearchConversationsService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(SearchConversationsService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `search` · `loadMore` · `attachListeners` · `detachListeners` · `reset` | +| Full API | See [Methods](#methods) | +| Usage | See [Usage](#usage) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + The `SearchConversationsService` manages conversation search state using Angular signals. It handles SDK query building, pagination, and attaches real-time listeners for message, user status, group, call, typing, and receipt events to keep results up to date. ## Import diff --git a/ui-kit/angular/api-reference/search-messages-service.mdx b/ui-kit/angular/api-reference/search-messages-service.mdx index e87577f10..3f6f35cf7 100644 --- a/ui-kit/angular/api-reference/search-messages-service.mdx +++ b/ui-kit/angular/api-reference/search-messages-service.mdx @@ -3,6 +3,22 @@ title: Search Messages Service description: Signal-based service for message search state, SDK queries, attachment-type filtering, and pagination. --- + + +| Field | Value | +| --- | --- | +| Purpose | Headless message search: reactive results without mounting a search component. | +| Class | `SearchMessagesService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { SearchMessagesService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(SearchMessagesService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `search` · `loadMore` · `reset` | +| Full API | See [Methods](#methods) | +| Usage | See [Usage](#usage) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + The `SearchMessagesService` manages message search state using Angular signals. It handles SDK query building with keyword, attachment-type, and user/group scoping, plus pagination for loading more results. ## Import diff --git a/ui-kit/angular/api-reference/templates-service.mdx b/ui-kit/angular/api-reference/templates-service.mdx index 2eb695740..3774b91d4 100644 --- a/ui-kit/angular/api-reference/templates-service.mdx +++ b/ui-kit/angular/api-reference/templates-service.mdx @@ -2,6 +2,24 @@ title: CometChat Templates Service description: SDK-wide template customization service for all list components --- + + + +| Field | Value | +| --- | --- | +| Purpose | DI alternative to `*View` inputs — set a template once app-wide instead of passing it to every instance. NOT a custom-message-type registry. | +| Class | `CometChatTemplatesService` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatTemplatesService } from "@cometchat/chat-uikit-angular";` | +| Injected with | `private svc = inject(CometChatTemplatesService);` — `providedIn: 'root'`, no module wiring | +| Key methods | `setSharedTemplates` · `getSharedTemplates` · `clearSharedTemplates` · `setConversationItemTemplate` · `setConversationLeadingTemplate` · `setConversationTitleTemplate` … +29 | +| Reactive state (signals) | `sharedTemplates` · `conversationTemplates` · `userTemplates` · `groupTemplates` · `groupMemberTemplates` · `callLogTemplates` … +3 — use directly in templates, no subscription | +| Reactive state (observables) | `sharedTemplates$` · `conversationTemplates$` · `userTemplates$` · `groupTemplates$` · `groupMemberTemplates$` · `callLogTemplates$` … +3 — `takeUntil(destroy$)` in `ngOnDestroy` | +| Full API | See [Methods](#methods) | +| Usage | See [Usage Examples](#usage-examples) | +| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatTemplatesService` provides centralized template customization across all CometChat list components. Register templates once and have them apply to conversations, users, groups, group members, call logs, and message list components. ## Import diff --git a/ui-kit/angular/components/cometchat-action-bubble.mdx b/ui-kit/angular/components/cometchat-action-bubble.mdx index 05de0050d..0067fd705 100644 --- a/ui-kit/angular/components/cometchat-action-bubble.mdx +++ b/ui-kit/angular/components/cometchat-action-bubble.mdx @@ -2,6 +2,24 @@ title: "Action Bubble" description: "A simple Angular component for displaying action/system messages in a chat interface" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatActionBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatActionBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-action-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | — (no outputs) | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatActionBubble` component is a simple presentational Angular component that displays action/system messages in a chat interface. These are messages like "User joined the group", "User left the group", or "Group name changed to X". ## Overview diff --git a/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx b/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx index 6eabdfe0a..c869bc665 100644 --- a/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx +++ b/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx @@ -3,6 +3,26 @@ title: "CometChatAIAssistantChat" description: "Top-level orchestrator component for the AI assistant chat experience with real-time streaming, tool call dispatch, chat history, and suggestion pills." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatAIAssistantChat` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-ai-assistant-chat` | +| Standalone | Add `CometChatAIAssistantChat` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(backClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | see the page body | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview `CometChatAIAssistantChat` is the top-level orchestrator for the AI assistant chat experience. It wires together `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`, and the `CometChatAIAssistantChatHistory` sidebar into a single cohesive interface. diff --git a/ui-kit/angular/components/cometchat-audio-bubble.mdx b/ui-kit/angular/components/cometchat-audio-bubble.mdx index 74da4982e..a515cb1a9 100644 --- a/ui-kit/angular/components/cometchat-audio-bubble.mdx +++ b/ui-kit/angular/components/cometchat-audio-bubble.mdx @@ -2,6 +2,25 @@ title: "Audio Bubble" description: "A comprehensive Angular component for rendering audio messages with real-time waveform visualization, playback controls, download functionality, and caption support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatAudioBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatAudioBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-audio-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(playStateChange)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatAudioBubble` component is a sophisticated audio message display component that renders audio messages with real-time waveform visualization and playback controls. It serves as the primary content renderer for audio-based messages in the CometChat Angular UIKit, handling everything from single audio display to complex multi-audio layouts with expand/collapse behavior. ## Overview diff --git a/ui-kit/angular/components/cometchat-call-bubble.mdx b/ui-kit/angular/components/cometchat-call-bubble.mdx index 468173643..bec828b2a 100644 --- a/ui-kit/angular/components/cometchat-call-bubble.mdx +++ b/ui-kit/angular/components/cometchat-call-bubble.mdx @@ -2,6 +2,25 @@ title: "Call Bubble" description: "An Angular component for displaying call messages in a chat interface with call type, status, duration, and optional action button" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatCallBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCallBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-call-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(buttonClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatCallBubble` component is a standalone Angular component that renders call messages within chat conversations. It displays call information including call type (audio/video), call status, duration, and an optional action button for call-back functionality. ## Overview diff --git a/ui-kit/angular/components/cometchat-call-buttons.mdx b/ui-kit/angular/components/cometchat-call-buttons.mdx index a4c70c387..a032e3f62 100644 --- a/ui-kit/angular/components/cometchat-call-buttons.mdx +++ b/ui-kit/angular/components/cometchat-call-buttons.mdx @@ -3,6 +3,28 @@ title: "Call Buttons" description: "A standalone Angular component that provides voice and video call initiation buttons for user-to-user and group calls" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatCallButtonsComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCallButtonsComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-call-buttons` | +| Standalone | Add `CometChatCallButtonsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(error)` — call initiation failures | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind `[user]`/`[group]`. The message header already renders call buttons, so check before adding a second set. | +| Automatic behaviour | Call initiation and permission prompts are internal | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatCallButtons component renders voice and video call buttons for initiating calls to a user or group. It delegates call state management and initiation logic to an internal service, and displays the outgoing call overlay and ongoing call screen automatically when a call is in progress. diff --git a/ui-kit/angular/components/cometchat-call-logs.mdx b/ui-kit/angular/components/cometchat-call-logs.mdx index 822588078..0d06062cc 100644 --- a/ui-kit/angular/components/cometchat-call-logs.mdx +++ b/ui-kit/angular/components/cometchat-call-logs.mdx @@ -3,6 +3,27 @@ title: "Call Logs" description: "A comprehensive Angular component for displaying call history with support for audio/video call initiation, custom templates, and real-time call overlays" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatCallLogsComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCallLogsComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-call-logs` | +| Standalone | Add `CometChatCallLogsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` — emits the selected call log | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Wire `(itemClick)` → a detail view; see [Call Log Details](/ui-kit/angular/guides/call-log-details). | +| Automatic behaviour | Pagination and live updates are automatic | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatCallLogs component displays a paginated, scrollable list of call history records for the logged-in user. Each call log entry shows the other party's avatar and name, the call direction (incoming, outgoing, or missed), the call type (audio or video), and the timestamp. Users can initiate new calls directly from the list and view real-time call overlays for outgoing and ongoing calls. diff --git a/ui-kit/angular/components/cometchat-card-bubble.mdx b/ui-kit/angular/components/cometchat-card-bubble.mdx index e59984deb..8f9fee095 100644 --- a/ui-kit/angular/components/cometchat-card-bubble.mdx +++ b/ui-kit/angular/components/cometchat-card-bubble.mdx @@ -3,6 +3,25 @@ title: "Card Bubble" description: "Angular component that renders a developer Card Message inside a message bubble using the prebuilt CometChat Cards renderer, with pure-forwarded card actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatCardBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCardBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-card-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(onCardAction)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + The `CometChatCardBubbleComponent` renders a **developer Card Message** (`message.category === "card"`) as a card bubble inside a conversation. It is the card equivalent of [`CometChatTextBubble`](/ui-kit/angular/components/cometchat-text-bubble): the surrounding [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble) wrapper supplies the container, receipts, reactions, long-press options, reply and thread view — this component only replaces the **content view** with the rendered card. ## Overview diff --git a/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx b/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx index 939418a0e..75ad7c4d7 100644 --- a/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx +++ b/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx @@ -2,6 +2,25 @@ title: "Collaborative Document Bubble" description: "An Angular component for rendering collaborative document messages with banner images, localized text, and action buttons" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatCollaborativeDocumentBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCollaborativeDocumentBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-collaborative-document-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(buttonClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatCollaborativeDocumentBubble` component renders collaborative document messages within chat. It displays a banner image, title, subtitle, and an action button that opens the document in a new fullscreen window. ## Overview diff --git a/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx b/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx index 34ba29a95..bd42eae3a 100644 --- a/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx +++ b/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx @@ -2,6 +2,25 @@ title: "Collaborative Whiteboard Bubble" description: "An Angular component for rendering collaborative whiteboard messages with banner images, localized text, and action buttons" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatCollaborativeWhiteboardBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatCollaborativeWhiteboardBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-collaborative-whiteboard-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(buttonClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatCollaborativeWhiteboardBubble` component renders collaborative whiteboard messages within chat. It displays a banner image, title, subtitle, and an action button that opens the whiteboard in a new fullscreen window. ## Overview diff --git a/ui-kit/angular/components/cometchat-conversation-item.mdx b/ui-kit/angular/components/cometchat-conversation-item.mdx index 2cc5f2946..da6bec312 100644 --- a/ui-kit/angular/components/cometchat-conversation-item.mdx +++ b/ui-kit/angular/components/cometchat-conversation-item.mdx @@ -3,6 +3,25 @@ title: "Conversation Item" description: "A focused Angular component for rendering a single conversation item with slot-based customization and granular event handling" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatConversationItemComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatConversationItemComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-conversation-item` | +| Standalone | Add `CometChatConversationItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatConversationItem component is a standalone Angular component designed to render a single conversation item. It is part of the enterprise refactoring that decomposes the monolithic CometChatConversations component into smaller, focused pieces. diff --git a/ui-kit/angular/components/cometchat-conversation-starter.mdx b/ui-kit/angular/components/cometchat-conversation-starter.mdx index b2fb4ceda..1e9c06e95 100644 --- a/ui-kit/angular/components/cometchat-conversation-starter.mdx +++ b/ui-kit/angular/components/cometchat-conversation-starter.mdx @@ -2,6 +2,26 @@ title: "Conversation Starter" description: "An AI-powered component that displays conversation starter suggestions for new or empty conversations" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatConversationStarterComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatConversationStarterComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-conversation-starter` | +| Standalone | Add `CometChatConversationStarterComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(starterClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatConversationStarter` component displays AI-generated conversation starter suggestions as clickable chips. It integrates with the CometChat AI extension to generate up to 4 contextual prompts for starting a conversation. ## Overview diff --git a/ui-kit/angular/components/cometchat-conversation-summary.mdx b/ui-kit/angular/components/cometchat-conversation-summary.mdx index 82d0e2632..d4e2282b0 100644 --- a/ui-kit/angular/components/cometchat-conversation-summary.mdx +++ b/ui-kit/angular/components/cometchat-conversation-summary.mdx @@ -2,6 +2,26 @@ title: "Conversation Summary" description: "An AI-powered component that displays a conversation summary panel with loading, empty, and error states" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatConversationSummaryComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatConversationSummaryComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-conversation-summary` | +| Standalone | Add `CometChatConversationSummaryComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | — (no outputs) | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatConversationSummary` component displays an AI-generated conversation summary in a panel with a localized title, close button, and body area. It fetches the summary via a provided callback on initialization, showing a loading shimmer during the fetch, then transitions to loaded, empty, or error state. ## Overview diff --git a/ui-kit/angular/components/cometchat-conversations.mdx b/ui-kit/angular/components/cometchat-conversations.mdx index 695589a0f..f269cb019 100644 --- a/ui-kit/angular/components/cometchat-conversations.mdx +++ b/ui-kit/angular/components/cometchat-conversations.mdx @@ -3,6 +3,27 @@ title: "Conversations" description: "A comprehensive Angular component for displaying and managing real-time chat conversations with extensive customization options" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatConversationsComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-conversations` | +| Standalone | Add `CometChatConversationsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` — emits the clicked conversation | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Wire `(itemClick)` → derive the subject with `conversation.getConversationWith()` → bind it to `` / `` / ``. Pass the same value back as `[activeConversation]` or the open row never highlights. Prefer the exported `ChatStateService` over a local field — see [New Chat](/ui-kit/angular/guides/new-chat). | +| Automatic behaviour | Messages, typing, receipts, presence and unread counts are handled internally — wire no SDK listeners | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatConversations component displays a real-time list of conversations (both user and group conversations) for the logged-in user. It provides a rich set of features including real-time updates, search functionality, selection modes, keyboard navigation, and extensive customization through templates and styling. diff --git a/ui-kit/angular/components/cometchat-delete-bubble.mdx b/ui-kit/angular/components/cometchat-delete-bubble.mdx index b7642dcea..636792f38 100644 --- a/ui-kit/angular/components/cometchat-delete-bubble.mdx +++ b/ui-kit/angular/components/cometchat-delete-bubble.mdx @@ -2,6 +2,24 @@ title: "Delete Bubble" description: "A simple Angular component for displaying deleted message placeholders in a chat interface" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatDeleteBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatDeleteBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-delete-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | — (no outputs) | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatDeleteBubble` component is a simple presentational Angular component that displays a placeholder indicating a message has been deleted. Unlike other message bubble components, it does NOT accept a CometChat message object - only simple inputs for styling and text customization. ## Overview diff --git a/ui-kit/angular/components/cometchat-file-bubble.mdx b/ui-kit/angular/components/cometchat-file-bubble.mdx index 8fcabf9d0..eed2bce14 100644 --- a/ui-kit/angular/components/cometchat-file-bubble.mdx +++ b/ui-kit/angular/components/cometchat-file-bubble.mdx @@ -2,6 +2,24 @@ title: "File Bubble" description: "A comprehensive Angular component for rendering file attachment messages with inline expand/collapse, file type icons, and caption support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatFileBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatFileBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-file-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | — (no outputs) | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The File Bubble component renders file attachments within chat messages while maintaining visual consistency with the design system and ensuring full accessibility: - **Message Object Processing**: Extracts attachments and metadata from CometChat.MediaMessage objects diff --git a/ui-kit/angular/components/cometchat-group-item.mdx b/ui-kit/angular/components/cometchat-group-item.mdx index 52f9c8209..ff6e07e4f 100644 --- a/ui-kit/angular/components/cometchat-group-item.mdx +++ b/ui-kit/angular/components/cometchat-group-item.mdx @@ -3,6 +3,26 @@ title: "Group Item" description: "A standalone Angular component for rendering a single group item with avatar, group type indicator, member count, and context menu support" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroupItemComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatGroupItemComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-group-item` | +| Standalone | Add `CometChatGroupItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatGroupItem component renders a single group entry within a list. It displays the group's icon/avatar, name, type indicator (public, private, password-protected), and member count. The component supports custom templates for all visual sections, integrates a context menu for group-specific actions, and provides full keyboard accessibility with ARIA support. diff --git a/ui-kit/angular/components/cometchat-group-member-item.mdx b/ui-kit/angular/components/cometchat-group-member-item.mdx index 963344c5c..4442a72db 100644 --- a/ui-kit/angular/components/cometchat-group-member-item.mdx +++ b/ui-kit/angular/components/cometchat-group-member-item.mdx @@ -3,6 +3,26 @@ title: "Group Member Item" description: "A standalone Angular component for rendering a single group member item with avatar, role badge, status indicator, and context menu support" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroupMemberItemComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatGroupMemberItemComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-group-member-item` | +| Standalone | Add `CometChatGroupMemberItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatGroupMemberItem component renders a single group member entry within a member list. It displays the member's avatar, name, online/offline status indicator, and a role badge (owner, admin, moderator). The component supports custom templates for all visual sections, integrates a context menu for member-specific actions (kick, ban, change scope), and provides full keyboard accessibility with ARIA support. diff --git a/ui-kit/angular/components/cometchat-group-members.mdx b/ui-kit/angular/components/cometchat-group-members.mdx index 68fbdf5de..34e63c41a 100644 --- a/ui-kit/angular/components/cometchat-group-members.mdx +++ b/ui-kit/angular/components/cometchat-group-members.mdx @@ -3,6 +3,27 @@ title: "Group Members" description: "A comprehensive Angular component for displaying and managing group members with search, scope management, and extensive customization options" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroupMembersComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatGroupMembersComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-group-members` | +| Standalone | Add `CometChatGroupMembersComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` — emits the selected member | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind `[group]`. View/kick/ban/scope-change are built in; the BANNED list has no component and comes from the SDK. Scope change uses ``. | +| Automatic behaviour | Membership updates arrive in real time | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatGroupMembers component displays a real-time, scrollable list of members belonging to a specific CometChat group. It provides built-in search functionality, allowing you to locate any specific member swiftly. For each member listed, the component displays the member's name and avatar, along with their scope (owner, admin, moderator, or participant) and online/offline status. diff --git a/ui-kit/angular/components/cometchat-groups.mdx b/ui-kit/angular/components/cometchat-groups.mdx index fc43b0c46..f996d7dd2 100644 --- a/ui-kit/angular/components/cometchat-groups.mdx +++ b/ui-kit/angular/components/cometchat-groups.mdx @@ -3,6 +3,27 @@ title: "Groups" description: "A comprehensive Angular component for displaying and managing real-time group lists with extensive customization options" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroupsComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatGroupsComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-groups` | +| Standalone | Add `CometChatGroupsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` — emits the selected group | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Wire `(itemClick)` → set the active group → bind it to the message pane. | +| Automatic behaviour | Membership changes and pagination are automatic | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatGroups component displays a real-time, scrollable list of groups with support for search, selection modes, and extensive customization. It provides an integral search functionality, allowing you to locate any specific group swiftly and easily. For each group listed, the component displays the group's name by default, in conjunction with their avatar when available. Furthermore, it includes a group type indicator (public, private, or password-protected) and member count. diff --git a/ui-kit/angular/components/cometchat-image-bubble.mdx b/ui-kit/angular/components/cometchat-image-bubble.mdx index 2d4601ec9..2ab94ed60 100644 --- a/ui-kit/angular/components/cometchat-image-bubble.mdx +++ b/ui-kit/angular/components/cometchat-image-bubble.mdx @@ -2,6 +2,25 @@ title: "Image Bubble" description: "A comprehensive Angular component for rendering image messages with grid layouts, fullscreen gallery viewer, and caption support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatImageBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatImageBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-image-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(imageClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatImageBubble` component is a sophisticated image message display component that renders image messages with advanced layout capabilities. It serves as the primary content renderer for image-based messages in the CometChat Angular UIKit, handling everything from single image display to complex multi-image grid layouts with fullscreen viewing capabilities. ## Overview diff --git a/ui-kit/angular/components/cometchat-incoming-call.mdx b/ui-kit/angular/components/cometchat-incoming-call.mdx index 15dbc27fd..dc482154e 100644 --- a/ui-kit/angular/components/cometchat-incoming-call.mdx +++ b/ui-kit/angular/components/cometchat-incoming-call.mdx @@ -3,6 +3,28 @@ title: "Incoming Call" description: "A standalone Angular component that displays an incoming call notification with accept and decline actions" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatIncomingCallComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatIncomingCallComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-incoming-call` | +| Standalone | Add `CometChatIncomingCallComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(callAccepted)` — emits the accepted call | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Mount at **app root**, not inside the chat route, or calls stop ringing on every other route. Requires `@cometchat/calls-sdk-javascript` and calling enabled in the dashboard. | +| Automatic behaviour | Ringing, decline and the ongoing-call handoff are internal | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatIncomingCall component renders an incoming call notification card when a user receives a voice or video call. It displays the caller's name, avatar, and call type icon using a `CometChatListItem`, along with Accept and Decline buttons. After accepting, it automatically renders the ongoing call screen. diff --git a/ui-kit/angular/components/cometchat-markdown-renderer.mdx b/ui-kit/angular/components/cometchat-markdown-renderer.mdx index 0d202021f..7b7fbf01c 100644 --- a/ui-kit/angular/components/cometchat-markdown-renderer.mdx +++ b/ui-kit/angular/components/cometchat-markdown-renderer.mdx @@ -3,6 +3,23 @@ title: "CometChatMarkdownRenderer" description: "Zero-dependency Angular component that parses and renders markdown to HTML with streaming support, XSS sanitization, and a copy button per code block." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMarkdownRenderer` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMarkdownRenderer } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| Standalone | Add `CometChatMarkdownRenderer` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(imageClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | see the page body | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview `CometChatMarkdownRenderer` converts a markdown string to sanitized HTML using a custom TypeScript parser — no third-party markdown library is required. It is used internally by `CometChatAIAssistantMessageBubble` (completed messages) and `CometChatStreamMessageBubble` (live streaming), but can be used standalone anywhere you need markdown rendering. diff --git a/ui-kit/angular/components/cometchat-message-bubble.mdx b/ui-kit/angular/components/cometchat-message-bubble.mdx index b4d7c8c12..6cf0fda50 100644 --- a/ui-kit/angular/components/cometchat-message-bubble.mdx +++ b/ui-kit/angular/components/cometchat-message-bubble.mdx @@ -2,6 +2,23 @@ title: "Message Bubble" description: "A flexible container component for rendering chat messages with configurable view slots, message options, and support for multiple message types" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMessageBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-message-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(optionClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | see the page body | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatMessageBubble` component is a versatile container component that renders chat messages with configurable view slots. It serves as the primary wrapper for displaying messages in the CometChat Angular UIKit, handling message alignment, options menus, status indicators, and content rendering based on message type. ## Overview diff --git a/ui-kit/angular/components/cometchat-message-composer.mdx b/ui-kit/angular/components/cometchat-message-composer.mdx index 08ed8c3af..aa2be6653 100644 --- a/ui-kit/angular/components/cometchat-message-composer.mdx +++ b/ui-kit/angular/components/cometchat-message-composer.mdx @@ -3,6 +3,27 @@ title: "Message Composer" description: "A comprehensive Angular component for composing and sending messages with rich text editing, attachments, emoji picker, voice recording, and @mentions" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageComposerComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-message-composer` | +| Standalone | Add `CometChatMessageComposerComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(sendButtonClick)` — fires after the message is sent | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind the same `[user]`/`[group]` as the header and list, and `[parentMessageId]` when composing inside a thread. Sending is handled internally; the output is for reacting, not for sending yourself. | +| Automatic behaviour | Attachments, voice notes, emoji, mentions and typing events are built in | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatMessageComposer is a feature-rich Angular component for composing and sending messages in chat applications. It provides a comprehensive set of features including text input, file attachments, emoji picker, voice recording, @mentions, and optional rich text editing capabilities similar to Slack. diff --git a/ui-kit/angular/components/cometchat-message-header.mdx b/ui-kit/angular/components/cometchat-message-header.mdx index 609d5bff2..f3764176f 100644 --- a/ui-kit/angular/components/cometchat-message-header.mdx +++ b/ui-kit/angular/components/cometchat-message-header.mdx @@ -3,6 +3,27 @@ title: "Message Header" description: "A feature-rich Angular component for displaying the header section of a chat conversation with real-time status updates, typing indicators, and action buttons" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageHeaderComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMessageHeaderComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-message-header` | +| Standalone | Add `CometChatMessageHeaderComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(backClick)` — for the mobile one-pane layout | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind the same subject as the list and composer. On mobile wire `(backClick)` to clear the active chat so the list returns — see [Placement](/ui-kit/angular/angular-tab-based-chat). | +| Automatic behaviour | Presence, typing indicator and the voice/video call buttons render automatically (call buttons respect `COMETCHAT_GLOBAL_CONFIG`) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatMessageHeader component displays the header section of a chat conversation. It shows information about the user or group being chatted with, including real-time status updates, typing indicators, and provides action buttons for calls, search, and AI-powered conversation summary. diff --git a/ui-kit/angular/components/cometchat-message-information.mdx b/ui-kit/angular/components/cometchat-message-information.mdx index e95952cc4..87654f6c7 100644 --- a/ui-kit/angular/components/cometchat-message-information.mdx +++ b/ui-kit/angular/components/cometchat-message-information.mdx @@ -2,6 +2,26 @@ title: "Message Information" description: "A panel component for displaying detailed message information including delivery and read receipts" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageInformationComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMessageInformationComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-message-information` | +| Standalone | Add `CometChatMessageInformationComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(closeClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatMessageInformation` component displays detailed information about a message, including its content preview, sent timestamp, and delivery/read receipts with user avatars, names, and timestamps. It supports both one-on-one and group conversations with pagination for large groups. ## Overview diff --git a/ui-kit/angular/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx index 262b6c0dd..b55d82aee 100644 --- a/ui-kit/angular/components/cometchat-message-list.mdx +++ b/ui-kit/angular/components/cometchat-message-list.mdx @@ -3,6 +3,27 @@ title: "Message List" description: "A comprehensive Angular component for displaying real-time chat messages with extensive customization option and accessibility features" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageListComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-message-list` | +| Standalone | Add `CometChatMessageListComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(threadRepliesClick)` — emits the parent message to open in a thread | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind `[user]` **or** `[group]` (never both). Wire `(threadRepliesClick)` → render `` plus a second list with `[parentMessageId]`, or hide the reply affordance — a wired-but-dead reply button is a defect. See [Threaded Messages](/ui-kit/angular/guides/threaded-messages). | +| Automatic behaviour | Real-time delivery, receipts, reactions, and every message-type bubble are rendered by the list — do not hand-roll bubbles | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | see the page body | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatMessageList component displays a real-time list of messages for the active conversation. It is a composite component that effectively manages real-time operations and includes various types of messages such as Text Messages, Media Messages, Stickers, and more. diff --git a/ui-kit/angular/components/cometchat-outgoing-call.mdx b/ui-kit/angular/components/cometchat-outgoing-call.mdx index 1921e8286..991e69dfe 100644 --- a/ui-kit/angular/components/cometchat-outgoing-call.mdx +++ b/ui-kit/angular/components/cometchat-outgoing-call.mdx @@ -3,6 +3,26 @@ title: "Outgoing Call" description: "A standalone Angular component that displays an outgoing call overlay with receiver information and a cancel button" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatOutgoingCallComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatOutgoingCallComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-outgoing-call` | +| Standalone | Add `CometChatOutgoingCallComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(callCanceled)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatOutgoingCall component renders a full-screen outgoing call overlay when a user initiates a voice or video call. It displays the receiver's name, a "Calling..." subtitle, the receiver's avatar, and a cancel button. The component plays an outgoing ringtone and provides focus-trapped dialog behavior. diff --git a/ui-kit/angular/components/cometchat-poll-bubble.mdx b/ui-kit/angular/components/cometchat-poll-bubble.mdx index 6e5ad24bb..3be18fa6a 100644 --- a/ui-kit/angular/components/cometchat-poll-bubble.mdx +++ b/ui-kit/angular/components/cometchat-poll-bubble.mdx @@ -2,6 +2,25 @@ title: "Poll Bubble" description: "An Angular component for displaying poll messages with voting functionality in a chat interface" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatPollBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatPollBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-poll-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(voteSubmit)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatPollBubble` component is a standalone Angular component that renders poll messages with voting functionality within chat conversations. It extracts poll data from CometChat CustomMessage metadata and displays the poll question, voting options with radio buttons, vote counts, progress bars, and voter avatars. ## Overview diff --git a/ui-kit/angular/components/cometchat-reaction-info.mdx b/ui-kit/angular/components/cometchat-reaction-info.mdx index 32bb21e0b..1b98ce123 100644 --- a/ui-kit/angular/components/cometchat-reaction-info.mdx +++ b/ui-kit/angular/components/cometchat-reaction-info.mdx @@ -2,6 +2,26 @@ title: "Reaction Info" description: "A tooltip component that displays who reacted with a specific emoji on a message" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatReactionInfoComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatReactionInfoComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-reaction-info` | +| Standalone | Add `CometChatReactionInfoComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | — (no outputs) | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatReactionInfo` component displays a tooltip showing the names of users who reacted with a specific emoji on a message. It fetches reaction details from the CometChat SDK and formats the display with "You" for the logged-in user and an "and X others" suffix when there are more reactors than the fetch limit. ## Overview diff --git a/ui-kit/angular/components/cometchat-reaction-list.mdx b/ui-kit/angular/components/cometchat-reaction-list.mdx index 8d8d5aa10..98f2910e0 100644 --- a/ui-kit/angular/components/cometchat-reaction-list.mdx +++ b/ui-kit/angular/components/cometchat-reaction-list.mdx @@ -2,6 +2,25 @@ title: "Reaction List" description: "A component for displaying all users who reacted to a message, with emoji filtering and pagination support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatReactionListComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatReactionListComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-reaction-list` | +| Standalone | Add `CometChatReactionListComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | see the page body | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatReactionList` component displays all users who have reacted to a message. It groups reactions by emoji type and allows filtering by specific emoji, providing a comprehensive view of message reactions with pagination support. ## Overview diff --git a/ui-kit/angular/components/cometchat-reactions.mdx b/ui-kit/angular/components/cometchat-reactions.mdx index 1a7aa5a9b..e67378c12 100644 --- a/ui-kit/angular/components/cometchat-reactions.mdx +++ b/ui-kit/angular/components/cometchat-reactions.mdx @@ -2,6 +2,26 @@ title: "Reactions" description: "A component that renders emoji reaction pills on a message bubble with overflow handling and popover support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatReactionsComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatReactionsComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-reactions` | +| Standalone | Add `CometChatReactionsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(reactionClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatReactions` component renders emoji reaction pills on a message bubble's footer area. It dynamically calculates how many pills to show based on the parent container width and provides overflow handling via a "+N" button with a popover list. ## Overview diff --git a/ui-kit/angular/components/cometchat-search.mdx b/ui-kit/angular/components/cometchat-search.mdx index b11eab162..f81563490 100644 --- a/ui-kit/angular/components/cometchat-search.mdx +++ b/ui-kit/angular/components/cometchat-search.mdx @@ -3,6 +3,27 @@ title: "CometChatSearch" description: "A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatSearchComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatSearchComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-search` | +| Standalone | Add `CometChatSearchComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(messageClick)` — emits the matched message to jump to | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Set scope via `[searchIn]` / `[searchFilters]`; pass `[uid]`/`[guid]` to scope to one chat. Render as a column, not an overlay — see [Search Messages](/ui-kit/angular/guides/search-messages). | +| Automatic behaviour | Debounce and pagination are handled internally | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatSearch component provides a unified search experience across conversations and messages. It combines a debounced search input, a filter chip bar, and two lazy-loaded result sections (conversations and messages) into a single, cohesive UI. diff --git a/ui-kit/angular/components/cometchat-smart-replies.mdx b/ui-kit/angular/components/cometchat-smart-replies.mdx index b1e2460a2..1194dcf6e 100644 --- a/ui-kit/angular/components/cometchat-smart-replies.mdx +++ b/ui-kit/angular/components/cometchat-smart-replies.mdx @@ -2,6 +2,26 @@ title: "Smart Replies" description: "An AI-powered component that displays smart reply suggestions based on the last received message" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatSmartRepliesComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatSmartRepliesComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-smart-replies` | +| Standalone | Add `CometChatSmartRepliesComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(replyClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatSmartReplies` component displays AI-generated reply suggestions as clickable chips. It integrates with the CometChat AI extension to analyze the last received message and generate up to 3 contextual reply options. ## Overview diff --git a/ui-kit/angular/components/cometchat-sticker-bubble.mdx b/ui-kit/angular/components/cometchat-sticker-bubble.mdx index ca06a9984..edd1e4f0f 100644 --- a/ui-kit/angular/components/cometchat-sticker-bubble.mdx +++ b/ui-kit/angular/components/cometchat-sticker-bubble.mdx @@ -2,6 +2,24 @@ title: "Sticker Bubble" description: "A standalone Angular component for rendering sticker messages with automatic URL extraction and alignment support" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatStickerBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatStickerBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-sticker-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | — (no outputs) | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatStickerBubble` component is a presentational Angular component that renders sticker messages as images within the chat interface. It extracts the sticker image URL from the message's metadata or custom data using a priority-based fallback chain and displays it with proper sizing, alignment, and accessibility support. ## Overview diff --git a/ui-kit/angular/components/cometchat-stickers-keyboard.mdx b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx index 127faaffa..feabf746e 100644 --- a/ui-kit/angular/components/cometchat-stickers-keyboard.mdx +++ b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx @@ -2,6 +2,26 @@ title: "Stickers Keyboard" description: "A component for browsing and selecting stickers organized by category tabs with a grid layout" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatStickersKeyboardComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatStickersKeyboardComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-stickers-keyboard` | +| Standalone | Add `CometChatStickersKeyboardComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(stickerClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatStickersKeyboard` component provides a browsable sticker picker that fetches stickers from the CometChat stickers extension. Stickers are organized by category tabs with a grid layout, supporting loading, empty, and error states. ## Overview diff --git a/ui-kit/angular/components/cometchat-text-bubble.mdx b/ui-kit/angular/components/cometchat-text-bubble.mdx index 2554b9abf..8f3d67fa9 100644 --- a/ui-kit/angular/components/cometchat-text-bubble.mdx +++ b/ui-kit/angular/components/cometchat-text-bubble.mdx @@ -2,6 +2,25 @@ title: "Text Bubble" description: "A comprehensive Angular component for rendering text messages with rich formatting, link previews, translations, mentions, and intelligent content truncation" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatTextBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatTextBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-text-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(linkClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatTextBubble` component is a sophisticated message display component that renders text messages with rich formatting capabilities. It serves as the primary content renderer for text-based messages in the CometChat Angular UIKit, handling everything from simple text display to complex features like link previews, translations, mentions, and rich text formatting. ## Overview diff --git a/ui-kit/angular/components/cometchat-thread-header.mdx b/ui-kit/angular/components/cometchat-thread-header.mdx index f4a4cd6ba..844a95fa0 100644 --- a/ui-kit/angular/components/cometchat-thread-header.mdx +++ b/ui-kit/angular/components/cometchat-thread-header.mdx @@ -2,6 +2,28 @@ title: "Thread Header" description: "A header component for threaded message views displaying the parent message preview, reply count, and close button" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatThreadHeaderComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatThreadHeaderComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-thread-header` | +| Standalone | Add `CometChatThreadHeaderComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(closeClick)` — emits when the thread panel should close | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Bind `[parentMessage]` from the list's `(threadRepliesClick)`. Closing must restore the prior layout exactly. | +| Automatic behaviour | Reply count updates live | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatThreadHeader` component displays a header bar for threaded message views. It shows a truncated preview of the parent message, the reply count, and a close button to return to the main chat. Media parent messages display an appropriate icon (image, video, audio, file). ## Overview diff --git a/ui-kit/angular/components/cometchat-user-item.mdx b/ui-kit/angular/components/cometchat-user-item.mdx index d6ad6a7c1..58f4792c6 100644 --- a/ui-kit/angular/components/cometchat-user-item.mdx +++ b/ui-kit/angular/components/cometchat-user-item.mdx @@ -3,6 +3,26 @@ title: "User Item" description: "A standalone Angular component for rendering a single user item with avatar, status indicator, custom templates, and context menu support" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatUserItemComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatUserItemComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-user-item` | +| Standalone | Add `CometChatUserItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatUserItem component renders a single user entry within a list. It displays the user's avatar, name, and online/offline status indicator, and supports custom templates for all visual sections. The component integrates a context menu for user-specific actions and provides full keyboard accessibility with ARIA support. diff --git a/ui-kit/angular/components/cometchat-users.mdx b/ui-kit/angular/components/cometchat-users.mdx index 671e47d29..6e8107f22 100644 --- a/ui-kit/angular/components/cometchat-users.mdx +++ b/ui-kit/angular/components/cometchat-users.mdx @@ -3,6 +3,27 @@ title: "Users" description: "A comprehensive Angular component for displaying and managing real-time user lists with extensive customization options" --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatUsersComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatUsersComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-users` | +| Standalone | Add `CometChatUsersComponent` to the consuming component's `imports: []` or it renders **nothing**, silently | +| Primary output | `(itemClick)` — emits the selected user | +| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) | +| Stitching | Wire `(itemClick)` → set the active user → bind it to the message pane. Same shape as conversations. | +| Automatic behaviour | Presence and pagination are automatic | +| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChatUsers component displays a real-time, scrollable list of users with support for search, selection modes, and extensive customization. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the component displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline. diff --git a/ui-kit/angular/components/cometchat-video-bubble.mdx b/ui-kit/angular/components/cometchat-video-bubble.mdx index 230b3cec4..58e532e7b 100644 --- a/ui-kit/angular/components/cometchat-video-bubble.mdx +++ b/ui-kit/angular/components/cometchat-video-bubble.mdx @@ -2,6 +2,25 @@ title: "Video Bubble" description: "A comprehensive Angular component for rendering video messages with thumbnails, play overlays, duration badges, and fullscreen video player" --- + + + +| Field | Value | +| --- | --- | +| Component | `CometChatVideoBubbleComponent` | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Import | `import { CometChatVideoBubbleComponent } from "@cometchat/chat-uikit-angular";` | +| Selector | `` — the class name is NOT a valid tag | +| CSS root class | `.cometchat-video-bubble` | +| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself | +| Primary output | `(videoClick)` | +| Prerequisites | A rendered `` — the bubble has no standalone lifecycle | +| Full props | See [Properties](#properties) | +| Events | See [Events](#events) | +| Customization | See [Customization](#customization) | +| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The `CometChatVideoBubble` component is a sophisticated video message display component that renders video messages with advanced layout capabilities. It serves as the primary content renderer for video-based messages in the CometChat Angular UIKit, handling everything from single video display to complex multi-video grid layouts with fullscreen playback capabilities. ## Overview diff --git a/ui-kit/angular/customization/global-config.mdx b/ui-kit/angular/customization/global-config.mdx index 17cfe3652..760a3f4f1 100644 --- a/ui-kit/angular/customization/global-config.mdx +++ b/ui-kit/angular/customization/global-config.mdx @@ -3,6 +3,19 @@ title: "Global Configuration" description: "Centralized configuration for CometChat Angular UIKit components using the COMETCHAT_GLOBAL_CONFIG injection token" --- + + +| Field | Value | +| --- | --- | +| Purpose | App-wide kit defaults through one injection token, instead of repeating the same input on every component instance. | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Key symbols | `COMETCHAT_GLOBAL_CONFIG` | +| Common trap | Not knowing it is there — a component appearing to ignore a default (call buttons hidden, say) is usually global config, not the component. | +| On this page | [Setup](#setup) · [Configuration Properties](#configuration-properties) · [Components That Read GlobalConfig](#components-that-read-globalconfig) | +| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChat Angular UIKit provides a centralized configuration system through the `COMETCHAT_GLOBAL_CONFIG` injection token. This allows you to set default values for common properties across all UIKit components from a single location, without having to pass the same inputs to every component instance. diff --git a/ui-kit/angular/customization/theming.mdx b/ui-kit/angular/customization/theming.mdx index 305fca53c..135f2745e 100644 --- a/ui-kit/angular/customization/theming.mdx +++ b/ui-kit/angular/customization/theming.mdx @@ -2,6 +2,19 @@ title: Theming description: "Customize the look and feel of CometChat UIKit using CSS variables" --- + + + +| Field | Value | +| --- | --- | +| Purpose | Brand the kit with `--cometchat-*` CSS variables, and switch or follow light/dark. | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Key symbols | `ThemeService` · `initFromPreference()` · `toggleTheme()` · `--cometchat-primary-color` | +| Common trap | Targeting generated class names, or fighting the kit with `!important`. If a token is not applying, the kit stylesheet is not registered in `angular.json` — override variables, not internals. Note `ThemeService` applies and follows the OS but does **not** persist a manual choice. | +| On this page | [How It Works](#how-it-works) · [Light / Dark Mode](#light-dark-mode) · [Customizing Colors](#customizing-colors) | +| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + The Angular UIKit uses a CSS variable-based theming system. There are no theme objects or style input props — all customization is done by overriding CSS variables in your global stylesheet. ## How It Works diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx index b81bd7ebc..4b05f9437 100644 --- a/ui-kit/angular/guides/rich-text-formatting.mdx +++ b/ui-kit/angular/guides/rich-text-formatting.mdx @@ -1,4 +1,21 @@ -# Rich Text Formatting Guide +--- +title: "Rich Text Formatting" +sidebarTitle: "Rich Text Formatting" +description: "Apply rich text formatting — bold, italic, links and mentions — in the CometChat Angular UIKit." +--- + + + +| Field | Value | +| --- | --- | +| Purpose | The composer's built-in rich text editing — bold, italic, lists, links, undo/redo — on native browser APIs. | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Key symbols | `RichTextEditorService` · `[enableRichText]` · `[hideRichTextToolbar]` | +| Common trap | Bolting on a third-party editor. It fights the composer's own state; the kit ships this with no external dependency. | +| On this page | [Basic Usage](#basic-usage) · [Text Formatting](#text-formatting) · [Content Management](#content-management) | +| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more. diff --git a/ui-kit/angular/guides/state-management.mdx b/ui-kit/angular/guides/state-management.mdx index 20a36879f..f0fd3e13c 100644 --- a/ui-kit/angular/guides/state-management.mdx +++ b/ui-kit/angular/guides/state-management.mdx @@ -3,6 +3,19 @@ title: "State Management" description: "Understanding the Hybrid Approach architecture for managing chat state in the CometChat Angular UIKit" --- + + +| Field | Value | +| --- | --- | +| Purpose | How to hold the ACTIVE chat and pass it between the list and the message pane — the decision every Angular integration makes first. | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Key symbols | `ChatStateService` · `activeUser` / `activeGroup` / `activeConversation` signals | +| Common trap | Keeping a local `selected` field **as well as** the service. The two drift and the list stops highlighting the open conversation — which reads as a styling bug and is not. | +| On this page | [Decision Matrix](#decision-matrix) · [Service-Based Pattern](#service-based-pattern) · [Mutual Exclusivity](#mutual-exclusivity) | +| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview The CometChat Angular UIKit uses a **Hybrid Approach** for managing active chat state. At its core, `ChatStateService` acts as a single source of truth for the currently active chat entity — a `CometChat.User`, `CometChat.Group`, or `CometChat.Conversation`. diff --git a/ui-kit/angular/guides/subscription-patterns.mdx b/ui-kit/angular/guides/subscription-patterns.mdx index eb16718b8..2bd414588 100644 --- a/ui-kit/angular/guides/subscription-patterns.mdx +++ b/ui-kit/angular/guides/subscription-patterns.mdx @@ -3,6 +3,19 @@ title: "RxJS Subscription Patterns" description: "Approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit to prevent memory leaks." --- + + +| Field | Value | +| --- | --- | +| Purpose | RxJS lifecycle rules for CometChat streams and SDK listeners in Angular components. | +| Package | `@cometchat/chat-uikit-angular` v5.x | +| Key symbols | `takeUntil(destroy$)` · `ngOnDestroy` · `CometChat.removeMessageListener` | +| Common trap | No teardown. Subscriptions and listeners outlive the component, so memory grows on every route change and stale handlers fire against destroyed views — often surfacing as duplicate messages. | +| On this page | [Approved Patterns](#approved-patterns) · [Anti-Patterns to Avoid](#anti-patterns-to-avoid) | +| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) | + + + ## Overview This guide documents the approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit. Following these patterns ensures that subscriptions are automatically cleaned up when components and services are destroyed, preventing memory leaks in long-running sessions. diff --git a/ui-kit/angular/llms-angular-v5.mdx b/ui-kit/angular/llms-angular-v5.mdx new file mode 100644 index 000000000..4be4c090f --- /dev/null +++ b/ui-kit/angular/llms-angular-v5.mdx @@ -0,0 +1,156 @@ +--- +title: "Angular UI Kit v5 — LLM docs index" +description: "Machine-readable, Angular-v5-scoped index of every UI Kit page as a clean .md twin. Built for AI coding agents; kept out of the human sidebar." +--- + +{/* + SCOPED LLM INDEX for the Angular v5 UI Kit. + - UNLISTED, NOT hidden: intentionally omitted from docs.json navigation so it never shows in + the human sidebar — but it IS built, served as a clean .md twin, and INDEXED for search + + AI assistants (so AI tools, and the skills pack via its docs-map, can discover and read it). + - We deliberately do NOT use `hidden: true`/`noindex` here: in Mintlify `hidden` auto-applies + noindex, which would drop this page from search AND the auto global llms.txt / AI context. + We want it discoverable, so it stays indexable. + - Scope is v5 ONLY. The 2.0/, 3.0/ and v4/ trees are deliberately excluded — linking them + would route agents at dead API surfaces. +*/} + +# Angular UI Kit v5 — LLM docs index (Latest) + +> Stateful, drop-in Angular chat/calling UI. Package `@cometchat/chat-uikit-angular@5` + +> `@cometchat/chat-sdk-javascript@4` (peers also include `@cometchat/cards-angular@^1` and +> `dompurify@^3`). This page is an **Angular-v5-only** routing index for AI agents — a scoped +> alternative to the site-wide `/docs/llms.txt`. + +## How to use this index +Each link points to the docs page; **append `.md`** to its URL to fetch the clean Markdown twin +(verbatim code + an "AI Integration Quick Reference" block with input/output names, types, and +defaults). Pick the page for the intent, then read the API there. +- Convention: any docs page URL + `.md` → raw Markdown. +- Fallback: if a `.md` twin 404s, fetch the same URL **without** `.md` (HTML). Never read a + package `.d.ts` and never answer inputs/outputs from memory. +- Angular specifics: components are used as kebab-case selectors in templates + (``), configured via `@Input()`, and customized through + content-projection slots / `TemplateRef` — not React-style render props. + +## Hot path — usually no fetch needed +For a plain "add chat" the install, `init → login → render` ordering, standalone/NgModule imports, +and the core drop-in inputs are stable; a well-built agent skill bakes them. Fetch below only for +exhaustive inputs, long-tail components, theming tokens, or feature enablement. +- Setup: [Integration](/ui-kit/angular/integration) · [Quickstart](/ui-kit/angular/quickstart) +- Environment config lives in `src/environments/environment.ts` (not `.env`). +- Core drop-ins: [Conversations](/ui-kit/angular/components/cometchat-conversations) · [Message Header](/ui-kit/angular/components/cometchat-message-header) · [Message List](/ui-kit/angular/components/cometchat-message-list) · [Message Composer](/ui-kit/angular/components/cometchat-message-composer) + +## Getting started / integration +- [Angular UI Kit](/ui-kit/angular/overview) +- [Quickstart](/ui-kit/angular/quickstart) +- [Integration](/ui-kit/angular/integration) + +## Core & configuration +- [Core Features](/ui-kit/angular/core-features) +- [Methods](/ui-kit/angular/methods) +- [Events](/ui-kit/angular/events) +- [Sound Manager](/ui-kit/angular/sound-manager) +- [Extensions](/ui-kit/angular/extensions) +- [Campaigns](/ui-kit/angular/campaigns) +- [Accessibility](/ui-kit/angular/accessibility) +- [Troubleshooting](/ui-kit/angular/troubleshooting) +- [Services](/ui-kit/angular/api-reference/introduction) +- [Chat State Service](/ui-kit/angular/api-reference/chat-state-service) +- [CometChat Templates Service](/ui-kit/angular/api-reference/templates-service) +- [Formatter Config Service](/ui-kit/angular/api-reference/formatter-config-service) +- [Message Bubble Config Service](/ui-kit/angular/api-reference/message-bubble-config-service) +- [Rich Text Editor Service](/ui-kit/angular/api-reference/rich-text-editor-service) +- [Search Conversations Service](/ui-kit/angular/api-reference/search-conversations-service) +- [Search Messages Service](/ui-kit/angular/api-reference/search-messages-service) + +## Theming & customization +- [Theming](/ui-kit/angular/customization/theming) +- [Global Configuration](/ui-kit/angular/customization/global-config) +- [Localization](/ui-kit/angular/customization/localization) +- [Date & Time Formatting](/ui-kit/angular/customization/date-time-formatting) +- [Message Bubble Styling](/ui-kit/angular/message-bubble-styling) + +## Components — conversations & lists +- [Overview](/ui-kit/angular/components/components-overview) +- [Conversations](/ui-kit/angular/components/cometchat-conversations) +- [Conversation Item](/ui-kit/angular/components/cometchat-conversation-item) +- [Users](/ui-kit/angular/components/cometchat-users) +- [User Item](/ui-kit/angular/components/cometchat-user-item) +- [Groups](/ui-kit/angular/components/cometchat-groups) +- [Group Item](/ui-kit/angular/components/cometchat-group-item) +- [Group Members](/ui-kit/angular/components/cometchat-group-members) +- [Group Member Item](/ui-kit/angular/components/cometchat-group-member-item) + +## Components — messages +- [Message List](/ui-kit/angular/components/cometchat-message-list) +- [Message Composer](/ui-kit/angular/components/cometchat-message-composer) +- [Message Header](/ui-kit/angular/components/cometchat-message-header) +- [Message Information](/ui-kit/angular/components/cometchat-message-information) +- [Thread Header](/ui-kit/angular/components/cometchat-thread-header) +- [Reactions](/ui-kit/angular/components/cometchat-reactions) +- [Reaction Info](/ui-kit/angular/components/cometchat-reaction-info) +- [Reaction List](/ui-kit/angular/components/cometchat-reaction-list) +- [Stickers Keyboard](/ui-kit/angular/components/cometchat-stickers-keyboard) + +## Components — message bubbles +- [Action Bubble](/ui-kit/angular/components/cometchat-action-bubble) +- [Audio Bubble](/ui-kit/angular/components/cometchat-audio-bubble) +- [Call Bubble](/ui-kit/angular/components/cometchat-call-bubble) +- [Card Bubble](/ui-kit/angular/components/cometchat-card-bubble) +- [Collaborative Document Bubble](/ui-kit/angular/components/cometchat-collaborative-document-bubble) +- [Collaborative Whiteboard Bubble](/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble) +- [Delete Bubble](/ui-kit/angular/components/cometchat-delete-bubble) +- [File Bubble](/ui-kit/angular/components/cometchat-file-bubble) +- [Image Bubble](/ui-kit/angular/components/cometchat-image-bubble) +- [CometChatMarkdownRenderer](/ui-kit/angular/components/cometchat-markdown-renderer) +- [Message Bubble](/ui-kit/angular/components/cometchat-message-bubble) +- [Poll Bubble](/ui-kit/angular/components/cometchat-poll-bubble) +- [Sticker Bubble](/ui-kit/angular/components/cometchat-sticker-bubble) +- [Text Bubble](/ui-kit/angular/components/cometchat-text-bubble) +- [Video Bubble](/ui-kit/angular/components/cometchat-video-bubble) + +## Components — calling +- [Call Features](/ui-kit/angular/call-features) +- [Call Buttons](/ui-kit/angular/components/cometchat-call-buttons) +- [Call Logs](/ui-kit/angular/components/cometchat-call-logs) +- [Incoming Call](/ui-kit/angular/components/cometchat-incoming-call) +- [Outgoing Call](/ui-kit/angular/components/cometchat-outgoing-call) + +## Components — search, AI & notifications +- [AI Smart Chat Features](/ui-kit/angular/ai-features) +- [CometChatSearch](/ui-kit/angular/components/cometchat-search) +- [CometChatAIAssistantChat](/ui-kit/angular/components/cometchat-ai-assistant-chat) +- [Smart Replies](/ui-kit/angular/components/cometchat-smart-replies) +- [Conversation Starter](/ui-kit/angular/components/cometchat-conversation-starter) +- [Conversation Summary](/ui-kit/angular/components/cometchat-conversation-summary) +- [Notification Feed](/ui-kit/angular/components/notification-feed) + +## Task guides (recipes) +- [Block/Unblock Users](/ui-kit/angular/guides/block-unblock-user) +- [Call Log Details](/ui-kit/angular/guides/call-log-details) +- [Card Messages](/ui-kit/angular/guides/card-messages) +- [Custom Message Types](/ui-kit/angular/guides/custom-message-types) +- [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) +- [Group Chat](/ui-kit/angular/guides/group-chat) +- [Hashtag Formatter](/ui-kit/angular/guides/hashtag-formatter) +- [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) +- [Message Privately](/ui-kit/angular/guides/message-privately) +- [New Chat](/ui-kit/angular/guides/new-chat) +- [Rich Text Formatting](/ui-kit/angular/guides/rich-text-formatting) +- [Search Messages](/ui-kit/angular/guides/search-messages) +- [ShortCut Formatter](/ui-kit/angular/guides/shortcut-formatter) +- [State Management](/ui-kit/angular/guides/state-management) +- [RxJS Subscription Patterns](/ui-kit/angular/guides/subscription-patterns) +- [Threaded Messages](/ui-kit/angular/guides/threaded-messages) +- [URL Formatter](/ui-kit/angular/guides/url-formatter) + +## Framework recipes (full-page layouts) +- [Conversation List + Message View](/ui-kit/angular/angular-conversation) +- [One-to-One / Group Chat](/ui-kit/angular/angular-one-to-one-chat) +- [Tab-Based Chat](/ui-kit/angular/angular-tab-based-chat) + +## Migration & misc +- [Guides](/ui-kit/angular/guides/guides-overview) +- [Upgrading From V4](/ui-kit/angular/customization/migration-guide) + diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx index a363c55c2..ee0f4ebb8 100644 --- a/ui-kit/angular/overview.mdx +++ b/ui-kit/angular/overview.mdx @@ -9,7 +9,7 @@ description: "Use CometChat Angular UI Kit to add standalone chat components, vo | Field | Value | | --- | --- | | Package | `@cometchat/chat-uikit-angular` v5.x | -| Peer deps | `@cometchat/chat-sdk-javascript`, `dompurify` | +| Peer deps | `@cometchat/chat-sdk-javascript`, `@cometchat/cards-angular`, `dompurify` | | Calling | Optional — `@cometchat/calls-sdk-javascript` | | Angular | v18, v19, v20, v21, v22 (v22 requires Node.js 24+) | | Localization | 19 languages built-in |