# CometChat Docs: Chat & Messaging UI Kits Angular v5‎‎‎‎‎

> Technical documentation & Implementation guides to add In-app Messaging & Voice & Video Calling to your apps and websites in minutes.

## v5‎‎‎‎‎

###  

- [Angular UI Kit](https://www.cometchat.com/docs/ui-kit/angular/overview.md): Use CometChat Angular UI Kit to add standalone chat components, voice and video calling, theming, localization, and customization.
- [Upgrading From V4](https://www.cometchat.com/docs/ui-kit/angular/customization/migration-guide.md): Upgrading from CometChat Angular UIKit v4 to v5 — architecture changes, theming, properties, and shared dependencies.

#### Getting Started

- [Quickstart](https://www.cometchat.com/docs/ui-kit/angular/quickstart.md): Get started with CometChat UIKit for Angular in minutes
- [Integration](https://www.cometchat.com/docs/ui-kit/angular/integration.md): Add CometChat to an Angular app in 6 steps: create project, install, init, login, add CSS, render.
- [Conversation List + Message View](https://www.cometchat.com/docs/ui-kit/angular/angular-conversation.md): Build a two-panel conversation list + message view layout in Angular with CometChat UI Kit.
- [One-to-One / Group Chat](https://www.cometchat.com/docs/ui-kit/angular/angular-one-to-one-chat.md): Build a focused one-to-one or group chat experience in Angular with CometChat UI Kit.
- [Tab-Based Chat](https://www.cometchat.com/docs/ui-kit/angular/angular-tab-based-chat.md): Build a tab-based messaging UI with chats, calls, users, and groups in Angular with CometChat UI Kit.

#### Features

- [Call Features](https://www.cometchat.com/docs/ui-kit/angular/call-features.md): Add CometChat Angular UI Kit call features for voice and video calls, call logs, ongoing calls, incoming calls, and call buttons.
- [Campaigns](https://www.cometchat.com/docs/ui-kit/angular/campaigns.md): Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer.

##### Chat

- [Core Features](https://www.cometchat.com/docs/ui-kit/angular/core-features.md): Review CometChat Angular UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search.
- [Extensions](https://www.cometchat.com/docs/ui-kit/angular/extensions.md): Enable CometChat Angular UI Kit extensions for stickers, polls, collaboration tools, reactions, moderation, smart replies, and link previews.
- [AI Smart Chat Features](https://www.cometchat.com/docs/ui-kit/angular/ai-features.md): Enable CometChat Angular UI Kit AI Smart Chat features for conversation starters, smart replies, and conversation summaries.

#### Theming

- [Theming](https://www.cometchat.com/docs/ui-kit/angular/customization/theming.md): Customize the look and feel of CometChat UIKit using CSS variables
- [Message Bubble Styling](https://www.cometchat.com/docs/ui-kit/angular/message-bubble-styling.md): Style the Angular message bubbles with CSS custom properties and BEM selectors, including the multi-attachment bubbles for images, videos, audio, and files.
- [Localization](https://www.cometchat.com/docs/ui-kit/angular/customization/localization.md): Configure multi-language support, override translations globally, and add custom languages.
- [Global Configuration](https://www.cometchat.com/docs/ui-kit/angular/customization/global-config.md): Centralized configuration for CometChat Angular UIKit components using the COMETCHAT_GLOBAL_CONFIG injection token
- [Date & Time Formatting](https://www.cometchat.com/docs/ui-kit/angular/customization/date-time-formatting.md): Customize date and time display globally or per-component with language-aware defaults.
- [Sound Manager](https://www.cometchat.com/docs/ui-kit/angular/sound-manager.md): Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Angular UIKit.

#### Components

- [Overview](https://www.cometchat.com/docs/ui-kit/angular/components/components-overview.md): Overview of all available UI components
- [Notification Feed](https://www.cometchat.com/docs/ui-kit/angular/components/notification-feed.md): Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting.

##### Conversations

- [Conversations](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-conversations.md): A comprehensive Angular component for displaying and managing real-time chat conversations with extensive customization options
- [Conversation Item](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-conversation-item.md): A focused Angular component for rendering a single conversation item with slot-based customization and granular event handling

##### Users

- [Users](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-users.md): A comprehensive Angular component for displaying and managing real-time user lists with extensive customization options
- [User Item](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-user-item.md): A standalone Angular component for rendering a single user item with avatar, status indicator, custom templates, and context menu support

##### Groups

- [Groups](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-groups.md): A comprehensive Angular component for displaying and managing real-time group lists with extensive customization options
- [Group Item](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-group-item.md): A standalone Angular component for rendering a single group item with avatar, group type indicator, member count, and context menu support

##### Group Members

- [Group Members](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-group-members.md): A comprehensive Angular component for displaying and managing group members with search, scope management, and extensive customization options
- [Group Member Item](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-group-member-item.md): A standalone Angular component for rendering a single group member item with avatar, role badge, status indicator, and context menu support

##### Message Header

- [Message Header](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-message-header.md): A feature-rich Angular component for displaying the header section of a chat conversation with real-time status updates, typing indicators, and action buttons

##### Search

- [CometChatSearch](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-search.md): A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization

##### Message List

- [Message List](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-message-list.md): A comprehensive Angular component for displaying real-time chat messages with extensive customization option and accessibility features

##### Message Composer

- [Message Composer](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-message-composer.md): A comprehensive Angular component for composing and sending messages with rich text editing, attachments, emoji picker, voice recording, and @mentions

##### Message Bubble

- [Message Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-message-bubble.md): A flexible container component for rendering chat messages with configurable view slots, message options, and support for multiple message types

##### Message Information

- [Message Information](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-message-information.md): A panel component for displaying detailed message information including delivery and read receipts

##### Thread Header

- [Thread Header](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-thread-header.md): A header component for threaded message views displaying the parent message preview, reply count, and close button

##### Pinned & Saved

- [Pinned Messages](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-pinned-messages.md): A panel component listing the pinned messages of a one-on-one or group conversation
- [Saved Messages](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-saved-messages.md): A panel component listing the messages the logged-in user has saved, across every conversation

##### Message Bubbles

- [Text Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-text-bubble.md): A comprehensive Angular component for rendering text messages with rich formatting, link previews, translations, mentions, and intelligent content truncation
- [Card Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-card-bubble.md): Angular component that renders a developer Card Message inside a message bubble using the prebuilt CometChat Cards renderer, with pure-forwarded card actions.
- [Image Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-image-bubble.md): A comprehensive Angular component for rendering image messages with grid layouts, fullscreen gallery viewer, and caption support
- [Video Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-video-bubble.md): A comprehensive Angular component for rendering video messages with thumbnails, play overlays, duration badges, and fullscreen video player
- [Audio Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-audio-bubble.md): A comprehensive Angular component for rendering audio messages with real-time waveform visualization, playback controls, download functionality, and caption support
- [File Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-file-bubble.md): A comprehensive Angular component for rendering file attachment messages with inline expand/collapse, file type icons, and caption support
- [Action Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-action-bubble.md): A simple Angular component for displaying action/system messages in a chat interface
- [Delete Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-delete-bubble.md): A simple Angular component for displaying deleted message placeholders in a chat interface
- [Call Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-call-bubble.md): An Angular component for displaying call messages in a chat interface with call type, status, duration, and optional action button
- [Poll Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-poll-bubble.md): An Angular component for displaying poll messages with voting functionality in a chat interface
- [Collaborative Document Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-collaborative-document-bubble.md): An Angular component for rendering collaborative document messages with banner images, localized text, and action buttons
- [Collaborative Whiteboard Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.md): An Angular component for rendering collaborative whiteboard messages with banner images, localized text, and action buttons
- [Sticker Bubble](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-sticker-bubble.md): A standalone Angular component for rendering sticker messages with automatic URL extraction and alignment support
- [Stickers Keyboard](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-stickers-keyboard.md): A component for browsing and selecting stickers organized by category tabs with a grid layout

##### Reactions

- [Reactions](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-reactions.md): A component that renders emoji reaction pills on a message bubble with overflow handling and popover support
- [Reaction List](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-reaction-list.md): A component for displaying all users who reacted to a message, with emoji filtering and pagination support
- [Reaction Info](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-reaction-info.md): A tooltip component that displays who reacted with a specific emoji on a message

##### Calls

- [Call Buttons](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-call-buttons.md): A standalone Angular component that provides voice and video call initiation buttons for user-to-user and group calls
- [Incoming Call](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-incoming-call.md): A standalone Angular component that displays an incoming call notification with accept and decline actions
- [Outgoing Call](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-outgoing-call.md): A standalone Angular component that displays an outgoing call overlay with receiver information and a cancel button
- [Call Logs](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-call-logs.md): A comprehensive Angular component for displaying call history with support for audio/video call initiation, custom templates, and real-time call overlays

##### AI

- [Smart Replies](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-smart-replies.md): An AI-powered component that displays smart reply suggestions based on the last received message
- [Conversation Starter](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-conversation-starter.md): An AI-powered component that displays conversation starter suggestions for new or empty conversations
- [Conversation Summary](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-conversation-summary.md): An AI-powered component that displays a conversation summary panel with loading, empty, and error states
- [CometChatAIAssistantChat](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-ai-assistant-chat.md): Top-level orchestrator component for the AI assistant chat experience with real-time streaming, tool call dispatch, chat history, and suggestion pills.
- [CometChatMarkdownRenderer](https://www.cometchat.com/docs/ui-kit/angular/components/cometchat-markdown-renderer.md): Zero-dependency Angular component that parses and renders markdown to HTML with streaming support, XSS sanitization, and a copy button per code block.

#### Reference

- [Events](https://www.cometchat.com/docs/ui-kit/angular/events.md): Reference for CometChat Angular UIKit events including conversation, user, group, message, call, and UI events.
- [Methods](https://www.cometchat.com/docs/ui-kit/angular/methods.md): Use CometChat Angular UI Kit methods for initialization, login, logout, users, groups, messages, calls, and session handling.
- [Accessibility](https://www.cometchat.com/docs/ui-kit/angular/accessibility.md): Overview of accessibility support in the CometChat Angular UIKit, including WCAG compliance, keyboard navigation, and ARIA attributes.
- [Troubleshooting](https://www.cometchat.com/docs/ui-kit/angular/troubleshooting.md): Common failure modes and fixes for the CometChat Angular UIKit.

#### Guides

- [Guides](https://www.cometchat.com/docs/ui-kit/angular/guides/guides-overview.md): Index of task-oriented feature guides for the CometChat Angular UIKit.
- [State Management](https://www.cometchat.com/docs/ui-kit/angular/guides/state-management.md): Understanding the Hybrid Approach architecture for managing chat state in the CometChat Angular UIKit
- [Threaded Messages](https://www.cometchat.com/docs/ui-kit/angular/guides/threaded-messages.md): Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Angular UIKit.
- [Thread Subscription](https://www.cometchat.com/docs/ui-kit/angular/guides/thread-subscription.md): Let users follow and unfollow message threads so they are notified about new replies, using the CometChat Angular UIKit.
- [Pin and Save Messages](https://www.cometchat.com/docs/ui-kit/angular/guides/pin-and-save-messages.md): Pin messages for everyone in a conversation, save messages privately, and pin conversations to the top of the list with the CometChat Angular UIKit.
- [Group Chat](https://www.cometchat.com/docs/ui-kit/angular/guides/group-chat.md): Implement group management including create, join, members, roles, and ownership transfer in CometChat Angular UIKit.
- [New Chat](https://www.cometchat.com/docs/ui-kit/angular/guides/new-chat.md): Build a unified new chat entry point for starting 1:1 or group conversations in CometChat Angular UIKit.
- [Block/Unblock Users](https://www.cometchat.com/docs/ui-kit/angular/guides/block-unblock-user.md): Implement block and unblock user functionality in CometChat Angular UIKit with composer state management.
- [Message Privately](https://www.cometchat.com/docs/ui-kit/angular/guides/message-privately.md): Launch a direct 1:1 chat from a group member profile in CometChat Angular UIKit.
- [Call Log Details](https://www.cometchat.com/docs/ui-kit/angular/guides/call-log-details.md): Build a detailed call insights screen with metadata, participants, and recordings in CometChat Angular UIKit.
- [Search Messages](https://www.cometchat.com/docs/ui-kit/angular/guides/search-messages.md): Add full-text message search across conversations with result routing in CometChat Angular UIKit.
- [Rich Text Formatting](https://www.cometchat.com/docs/ui-kit/angular/guides/rich-text-formatting.md): Apply rich text formatting — bold, italic, links and mentions — in the CometChat Angular UIKit.
- [Custom Message Types](https://www.cometchat.com/docs/ui-kit/angular/guides/custom-message-types.md): Register custom message bubble types, override conversation subtitles, and include custom messages in fetching.
- [Card Messages](https://www.cometchat.com/docs/ui-kit/angular/guides/card-messages.md): How the Angular UIKit renders Card Messages — developer cards, persisted agent cards, and streaming agent cards — and how to handle card actions.
- [Custom Text Formatter](https://www.cometchat.com/docs/ui-kit/angular/guides/custom-text-formatter.md): Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular.
- [Mentions Formatter](https://www.cometchat.com/docs/ui-kit/angular/guides/mentions-formatter.md): Add @mentions with styled tokens, suggestion list, and click handling in CometChat Angular UI Kit.
- [ShortCut Formatter](https://www.cometchat.com/docs/ui-kit/angular/guides/shortcut-formatter.md): Implement !shortcut style text expansions with extension APIs or dialogs in CometChat Angular UI Kit.
- [Hashtag Formatter](https://www.cometchat.com/docs/ui-kit/angular/guides/hashtag-formatter.md): Build a custom hashtag formatter that highlights #tags in the message composer, message bubbles, conversation last message, and edit view.
- [URL Formatter](https://www.cometchat.com/docs/ui-kit/angular/guides/url-formatter.md): Detect and style plain URLs as clickable links with optional tracking logic in CometChat Angular UI Kit.
- [RxJS Subscription Patterns](https://www.cometchat.com/docs/ui-kit/angular/guides/subscription-patterns.md): Approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit to prevent memory leaks.

#### Services

- [Services](https://www.cometchat.com/docs/ui-kit/angular/api-reference/introduction.md): Reference for CometChat UIKit Angular injectable services.
- [Chat State Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/chat-state-service.md): Service Reference for the centralized chat state management service in CometChat Angular UIKit
- [Message Bubble Config Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/message-bubble-config-service.md): API reference for the centralized message bubble view configuration service in CometChat Angular UIKit
- [CometChat Templates Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/templates-service.md): SDK-wide template customization service for all list components
- [Search Conversations Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/search-conversations-service.md): Signal-based service for conversation search state, SDK queries, pagination, and real-time listener management.
- [Search Messages Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/search-messages-service.md): Signal-based service for message search state, SDK queries, attachment-type filtering, and pagination.
- [Formatter Config Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/formatter-config-service.md): Service Reference for the centralized text-formatter configuration service in CometChat Angular UIKit
- [Rich Text Editor Service](https://www.cometchat.com/docs/ui-kit/angular/api-reference/rich-text-editor-service.md): Service Reference for the native-API rich text editor service in CometChat Angular UIKit