Skip to content
OpenSmartRoute
Skillv1.0.0

cometchat-angular-components

Component catalog for the CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone <cometchat-*> selectors, verified @Input bindings, @Output events, @Input callback props, and templ

by cometchat(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from cometchat/cometchat-skills (skills/cometchat-angular-components/SKILL.md). Install upstream with npx skills add cometchat/cometchat-skills --skill cometchat-angular-components. Copyright stays with the author (MIT).

Ground truth: @cometchat/chat-uikit-angular@5.x component catalog (installed package types) + docs/ui-kit/angular. Official docs: https://www.cometchat.com/docs/ui-kit/angular/overview · Docs MCP: claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.

CometChat Angular UI Kit v5 — Component Catalog

Authoritative reference for every component you'll actually use. Verified against @cometchat/chat-uikit-angular@5.0.2 bundled types. Never invent a selector, @Input, or @Output — look it up here (or grep node_modules/@cometchat/chat-uikit-angular/types/cometchat-chat-uikit-angular.d.ts).

Read <cometchat-angular-core> first.

How v5 components work

  • Standalone. Import the component class (with the Component suffix) into a standalone component's imports: []. No NgModule, no CUSTOM_ELEMENTS_SCHEMA.
  • Selector vs class: the HTML selector has no suffix (<cometchat-conversations>); the class does (CometChatConversationsComponent).
  • No composites. There is no <cometchat-conversations-with-messages> / Contacts in v5. Build layouts by composing components (see <cometchat-angular-placement>).

Three binding mechanisms — get these right

Mechanism Syntax Example
@Input (data + config + hide flags) [input]="value" [user]="selectedUser"
@Output (EventEmitter) (output)="handler($event)" (itemClick)="onPick($event)"
@Input callback prop (a function passed as input) [onCallback]="fnRef" [onAccept]="handleAccept"
Slot view (@Input of type TemplateRef/component) [slotView]="tmplRef" [leadingView]="myTmpl"

The @Output vs @Input-callback distinction is the #1 Angular-v5 trap. Most components use @Output EventEmitters ((itemClick), (error), (callEnded)). But the call components also expose @Input callback props (onAccept, onDecline, onError, onVoiceCallClick, …). And <cometchat-incoming-call> exposes both ([onAccept] input AND (callAccepted) output). Bind the one that exists — the tables below mark which is which.

import { Component } from "@angular/core";
import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";
import { CometChat } from "@cometchat/chat-sdk-javascript";

@Component({
  selector: "app-conversations",
  standalone: true,
  imports: [CometChatConversationsComponent],
  template: `
    <cometchat-conversations
      [showSearchBar]="true"
      (itemClick)="onConversation($event)"
      (error)="onError($event)">
    </cometchat-conversations>`,
})
export class AppConversationsComponent {
  onConversation(conversation: CometChat.Conversation) { /* … */ }
  onError(e: CometChat.CometChatException) { /* … */ }
}

List components

CometChatConversationsComponent

Selector: <cometchat-conversations>

The conversation list. Drives the left pane of a chat layout.

  • Key @Input: conversationsRequestBuilder, activeConversation, selectionMode, options, showSearchBar, showScrollbar, lastMessageDateTimeFormat, textFormatters, disableSoundForMessages, customSoundForMessages
  • Hide flags: hideReceipts, hideError, hideDeleteConversation, hideUserStatus, hideGroupType, disableDefaultContextMenu
  • Slot views (@Input): headerView, menuView, loadingView, emptyView, errorView, searchView, itemView, leadingView, titleView, subtitleView, trailingView
  • @Output: itemClick, select, error, searchBarClick, contextMenuOpen, contextMenuClose, scrollToTop, scrollToBottom, selectionChange

CometChatUsersComponent

Selector: <cometchat-users>

  • @Input: usersRequestBuilder, searchRequestBuilder, searchKeyword, activeUser, selectionMode, options, showSectionHeader, sectionHeaderKey, showScrollbar, showSelectedUsersPreview
  • Hide flags: hideSearch, hideError, hideUserStatus, disableLoadingState, disableDefaultContextMenu
  • Slots: headerView, menuView, loadingView, emptyView, errorView, itemView, leadingView, titleView, subtitleView, trailingView
  • @Output: itemClick, select, error, empty, selectionChange

CometChatGroupsComponent

Selector: <cometchat-groups>

  • @Input: groupsRequestBuilder, searchRequestBuilder, activeGroup, selectionMode, options, showScrollbar
  • Hide flags: hideSearch, hideError, hideGroupType, disableDefaultContextMenu
  • Slots: headerView, menuView, loadingView, emptyView, errorView, itemView, leadingView, titleView, subtitleView, trailingView
  • @Output: itemClick, select, error, selectionChange

CometChatGroupMembersComponent

Selector: <cometchat-group-members>

  • @Input: group (required), groupMemberRequestBuilder, searchRequestBuilder, searchKeyword, selectionMode, options, showScrollbar
  • Hide flags: hideSearch, hideError, hideUserStatus, hideKickMemberOption, hideBanMemberOption, hideScopeChangeOption, disableLoadingState, disableDefaultContextMenu
  • Slots: headerView, menuView, loadingView, errorView, emptyView, itemView, leadingView, titleView, subtitleView, trailingView
  • @Output: error, itemClick, selectionChange, empty

Messaging components

CometChatMessageHeaderComponent

Selector: <cometchat-message-header>

Header bar above the message list. Pass user OR group (mutually exclusive).

  • @Input: user, group, callSettingsBuilder, lastActiveAtDateTimeFormat, summaryGenerationMessageCount, enableAutoSummaryGeneration
  • Show/hide: hideUserStatus, showBackButton, hideVoiceCallButton, hideVideoCallButton, showSearchOption, showConversationSummaryButton
  • Slots: headerView, itemView, leadingView, titleView, subtitleView, trailingView, backButtonView, auxiliaryButtonView
  • @Output: backClick, itemClick, searchClick, conversationSummaryClick, error, voiceCallClick, videoCallClick

CometChatMessageListComponent

Selector: <cometchat-message-list>

The message stream. Pass user OR group (and parentMessageId for threads).

  • Key @Input: user, group, parentMessageId, messagesRequestBuilder, reactionsRequestBuilder, textFormatters, messageAlignment, scrollToBottomOnNewMessages, goToMessageId, quickOptionsCount, additionalOptions, optionsOverride
  • AI/replies: showConversationStarters, showSmartReplies, smartRepliesKeywords, smartRepliesDelayDuration
  • Hide flags (many): hideReceipts, hideDateSeparator, hideStickyDate, hideAvatar, hideGroupActionMessages, hideError, hideReplyInThreadOption, hideTranslateMessageOption, hideEditMessageOption, hideDeleteMessageOption, hideReactionOption, hideMessagePrivatelyOption, hideCopyMessageOption, hideMessageInfoOption, hideReplyOption, hideTimestamp, hideModerationView, hideFlagMessageOption, showMarkAsUnreadOption, startFromUnreadMessages, disableInteraction
  • Slots: headerView, footerView, emptyView, errorView, loadingView, bubbleFooterView, appendView
  • @Output: error, threadRepliesClick, reactionClick, reactionListItemClick, smartReplyClick, conversationStarterClick, messagePrivatelyClick, replyClick

CometChatMessageComposerComponent

Selector: <cometchat-message-composer>

The input box. Pass user OR group (and parentMessageId for threads).

  • Key @Input: user, group, parentMessageId, placeholderText, initialComposerText, text, maxHeight, enterKeyBehavior, attachmentOptions, maxAttachments, allowedFileTypes, maxFileSize, layout, textFormatters, messageToEdit, messageToReply, mentionsUsersRequestBuilder, mentionsGroupMembersRequestBuilder
  • Hide flags: hideAttachmentButton, hideImageAttachmentOption, hideVideoAttachmentOption, hideAudioAttachmentOption, hideFileAttachmentOption, hidePollsOption, hideCollaborativeDocumentOption, hideCollaborativeWhiteboardOption, hideEmojiKeyboardButton, hideVoiceRecordingButton, hideStickersButton, hideLiveReaction, hideSendButton, hideRichTextToolbar, disableMentions, disableMentionAll, disableTypingEvents, enableRichText
  • Slots: headerView, footerView, sendButtonView, auxiliaryButtonView, secondaryButtonView, attachmentIconView, voiceRecordingIconView, emojiIconView, errorView
  • @Output: textChange, sendButtonClick, error, closePreview, attachmentAdded, attachmentRemoved, mentionSelected

CometChatMessageInformationComponent

Selector: <cometchat-message-information>

  • @Input: message, dateTimeFormat, textFormatters, showScrollbar · @Output: closeClick

Threads — <cometchat-thread-header> / <cometchat-thread-view>

  • <cometchat-thread-header>: @Input parentMessage, replyCount · @Output closeClick, backClick
  • <cometchat-thread-view>: @Input mode, replyCount, unreadReplyCount, parentMessage, announceOnOpen · @Output threadClick, closeClick
  • For a thread pane, render <cometchat-message-list> + <cometchat-message-composer> with the same [parentMessageId].

CometChatReactionsComponent

Selector: <cometchat-reactions>

  • @Input: message, alignment, reactionsRequestBuilder, hoverDebounceTime · @Output: reactionClick, reactionListItemClick

CometChatSearchComponent

Selector: <cometchat-search>

Unified conversation + message search.

  • Key @Input: searchIn, searchFilters, initialSearchFilter, defaultSearchText, uid, guid, conversationsRequestBuilder, messagesRequestBuilder, hideBackButton (+ per-result slot views)
  • @Output: backClick, conversationClick, messageClick, searchError

Call components

Binding nuance: call components use @Input callback props (onAccept, onDecline, onError, onVoiceCallClick, …) AND some @Output EventEmitters. Bind the form that exists per the tables. <cometchat-incoming-call> exposes both — prefer the @Input callbacks for accept/decline (they carry the kit's call handling) and use the @Outputs for observing.

CometChatCallButtonsComponent

Selector: <cometchat-call-buttons>

Voice/video buttons for a user or group. Drop into a header or contact row.

  • @Input: user, group, callSettingsBuilder, hideVoiceCallButton, hideVideoCallButton, hideOverlays, outgoingCallDisableSoundForCalls, outgoingCallCustomSoundForCalls
  • @Input callbacks: onVoiceCallClick, onVideoCallClick, onError
  • Slots: voiceCallButtonView, videoCallButtonView
  • @Output: error

CometChatIncomingCallComponent

Selector: <cometchat-incoming-call>

Incoming-call banner/overlay. Mount app-wide (see calls skill).

  • @Input: call, disableSoundForCalls, customSoundForCalls
  • @Input callbacks: onAccept, onDecline, onError
  • Slots: itemView, titleView, subtitleView, leadingView, trailingView, acceptButtonView, declineButtonView
  • @Output: callAccepted, callDeclined, error

CometChatOutgoingCallComponent

Selector: <cometchat-outgoing-call>

  • @Input: call, disableSoundForCalls, customSoundForCalls · @Input callback: onError · Slots: titleView, subtitleView, avatarView, cancelButtonView · @Output: callCanceled, error

CometChatOngoingCallComponent

Selector: <cometchat-ongoing-call>

The active WebRTC call surface.

  • @Input: sessionID, callSettingsBuilder, callWorkflow, isAudioOnly · @Input callback: onError · Slot: callScreenView · @Output: callEnded, error

CometChatCallLogsComponent

Selector: <cometchat-call-logs>

  • @Input: activeCall, callLogRequestBuilder, callSettingsBuilder, callInitiatedDateTimeFormat, showScrollbar · @Input callback: onError · Slots: menuView, itemView, leadingView, titleView, subtitleView, trailingView, loadingView, emptyView, errorView · @Output: itemClick, callButtonClicked

AI components

CometChatConversationStarterComponent

<cometchat-conversation-starter> — @Input user, group · @Output starterClick

CometChatConversationSummaryComponent

<cometchat-conversation-summary> — @Input getConversationSummary, closeCallback

CometChatSmartRepliesComponent

<cometchat-smart-replies> — smart-reply chips

CometChatAIAssistantChat

<cometchat-ai-assistant-chat> (+ CometChatAIAssistantChatHistory / CometChatAIAssistantMessageBubble) — AI assistant chat surfaces.

AI views are usually surfaced through <cometchat-message-list>'s showSmartReplies / showConversationStarters inputs and the header's summary button — see the cometchat-angular-features skill.

Other exported components (selectors)

Building blocks + bubbles + dialogs you rarely instantiate directly (the list/message components compose them), but they're exported and available: <cometchat-avatar>, <cometchat-button>, <cometchat-list-item>, <cometchat-date>, <cometchat-search-bar>, <cometchat-emoji-keyboard>, <cometchat-stickers-keyboard>, <cometchat-media-recorder>, <cometchat-reaction-list>, <cometchat-reaction-info>, <cometchat-create-poll>, <cometchat-fullscreen-viewer>, <cometchat-confirm-dialog>, <cometchat-flag-message-dialog>, <cometchat-change-scope>, <cometchat-context-menu>, <cometchat-popover>, <cometchat-toast>, <cometchat-typing-indicator>, and the bubble set (<cometchat-text-bubble>, -image-bubble, -video-bubble, -audio-bubble, -file-bubble, -call-bubble, -poll-bubble, -sticker-bubble, -collaborative-document-bubble, -collaborative-whiteboard-bubble, -action-bubble, -delete-bubble, -message-bubble).

To confirm any of their bindings, grep the bundled .d.ts for ɵɵComponentDeclaration<<Class>, — the input/output names are in the type literal.

Anti-patterns

  1. Don't invent bindings. If a prop isn't in this catalog (or the .d.ts), it doesn't exist. v4 prop names frequently differ from v5.
  2. Don't bind a call @Input callback as an @Output (or vice-versa). [onAccept]="fn" (input) vs (callAccepted)="fn($event)" (output) — use the one listed.
  3. Don't reach for a composite (<cometchat-conversations-with-messages>) — removed in v5. Compose manually.
  4. Don't pass both [user] and [group] to header/list/composer — they're mutually exclusive; pass exactly one.
  5. Don't add CUSTOM_ELEMENTS_SCHEMA — v5 components are real Angular components; importing the class is enough.
  6. Don't forget to import the component class into the standalone component's imports: [] — otherwise the selector renders as an unknown element.

Pointers

  • <cometchat-angular-core> — setup, init, login
  • <cometchat-angular-placement> — composing these into routes/modals/drawers
  • <cometchat-angular-customization> — slot templates, formatters, options overrides
  • <cometchat-angular-calls> — full call flow + incoming-call mounting

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/cometchat-cometchat-skills-cometchat-angular-components/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

cometchat-cometchat-skills-cometchat-angular-components.ocm.jsonjson
{
  "ocm": "1",
  "id": "cometchat-cometchat-skills-cometchat-angular-components",
  "kind": "skill",
  "name": "cometchat-angular-components",
  "description": "Component catalog for the CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone <cometchat-*> selectors, verified @Input bindings, @Output events, @Input callback props, and template slot views. Always loaded before writing any <cometchat-*> HTML. Never invent selectors or bindings — look them up here.",
  "publisher": "cometchat",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "cometchat",
      "angular",
      "components",
      "catalog",
      "selectors",
      "inputs",
      "outputs",
      "standalone",
      "v5"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Component catalog for the CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone <cometchat-*> selectors, verified @Input bindings, @Output events, @Input callback props, and template slot views. Always loaded before writing any <cometchat-*> HTML. Never invent selectors or bindings — look them up here."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/cometchat/cometchat-skills",
      "path": "skills/cometchat-angular-components/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/cometchat/cometchat-skills/blob/HEAD/skills/cometchat-angular-components/SKILL.md",
      "key": "cometchat/cometchat-skills/skills/cometchat-angular-components/SKILL.md"
    },
    "compatibility": "Angular >=17 <22; @cometchat/chat-uikit-angular ^5.0",
    "license": "MIT"
  },
  "instructions": "> **Ground truth:** `@cometchat/chat-uikit-angular@5.x` component catalog (installed package types) + `docs/ui-kit/angular`. **Official docs:** https://www.cometchat.com/docs/ui-kit/angular/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.\n\n# CometChat Angular UI Kit v5 — Component Catalog\n\nAuthoritative reference for every component you'll actually use. Verified against `@cometchat/chat-uikit-angular@5.0.2` bundled type",
  "cost": {
    "context_tokens": 3889
  }
}

Fetch it by URL: GET /api/v1/registry/cometchat-cometchat-skills-cometchat-angular-components/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.