AI Agent Component Spec
AI Agent Component Spec
- Packages:
@cometchat/chat-uikit-react+@cometchat/calls-sdk-javascript(npm install @cometchat/calls-sdk-javascript) - Required setup:
CometChatUIKit.init(UIKitSettings)thenCometChatUIKit.login("UID")— Calls SDK must also be installed - Call features: Incoming Call, Outgoing Call, Call Logs, Call Buttons
- Key components:
CometChatCallButtons→ Call Buttons,CometChatIncomingCall→ Incoming Call,CometChatOutgoingCall→ Outgoing Call,CometChatCallLogs→ Call Logs - Auto-detection: UI Kit automatically detects the Calls SDK and enables call UI components
- CSS class prefix:
.cometchat-
Overview
CometChat’s Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the React UI Kit.Before using call components: Ensure
CometChatUIKit.init(UIKitSettings) has completed and the user is logged in via CometChatUIKit.login("UID"). See React.js Integration.Integration
First, make sure that you’ve correctly integrated the UI Kit library into your project. If you haven’t done this yet or are facing difficulties, refer to our Getting Started guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your React project. Once you’ve successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here’s how you do it: Add the SDK files to your project’s dependencies or libraries:
Features
Incoming Call
The Incoming Call component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
Outgoing Call
The Outgoing Call component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
Call Logs
Call Logs component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
Common Failure Modes
Common Failure Modes
| Symptom | Cause | Fix |
|---|---|---|
| Call buttons not appearing in Message Header | @cometchat/calls-sdk-javascript not installed | Run npm install @cometchat/calls-sdk-javascript — UI Kit auto-detects it |
| Component doesn’t render | CometChatUIKit.init() not called or not awaited | Ensure init completes before rendering. See Methods |
| Component renders but shows no data | User not logged in | Call CometChatUIKit.login("UID") after init |
| Incoming call screen not showing | CometChatIncomingCall not mounted in the component tree | Ensure the component is rendered at the app root level so it can listen for incoming calls |
| SSR hydration error | Component uses browser APIs on server | Wrap in useEffect or dynamic import with ssr: false. See Next.js Integration |