Call Log Details - CometChat Docs

AI Agent Component Spec

Packages: @cometchat/chat-uikit-react + @cometchat/calls-sdk-javascript
Key components: CometChatCallDetails, CometChatCallDetailsInfo, CometChatCallDetailsParticipants, CometChatCallDetailsRecording
Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID") + Calls SDK installed
Purpose: Detailed call insights screen with metadata, participants, and recordings
Sample app: GitHub
Related: All Guides

Display comprehensive call information and history when users select calls from the calls tab in your React chat app.

Overview

The Calls Log Details feature provides users with detailed information about specific calls, including call status, participants, duration, recordings, and call history.

Provides detailed information about specific calls when selected from the calls tab.
Enables users to review call details, understand outcomes, view participants, and access recordings for reference.
Users can view call details with tabbed navigation showing participants, recordings, and call history.

Prerequisites

React v18.2.0+
CometChat React UI Kit v6.1.0+
CometChat Chat SDK JavaScript v4.0.13+
CometChat Calls SDK JavaScript v4.0.11+
Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
TypeScript support (recommended)
Call functionality implemented
Calls tab navigation configured

Components

Component / Class	Role
CometChatCallDetails	Main container for call details display
CometChatCallDetailsInfo	Shows call status, duration, and info
CometChatCallDetailsParticipants	Displays call participants
CometChatCallDetailsRecording	Shows call recordings if available
CometChatCallDetailsHistory	Displays call history
CometChatCallLogs	Calls list component in the calls tab

Integration Steps

1. Calls Tab Integration Setup

File: CometChatSelector.tsx

{activeTab == "calls" ? (
    <CometChatCallLogs
        activeCall={activeItem as CometChat.Call}
        onItemClick={(e: CometChat.Call) => {
            onSelectorItemClicked(e, "updateSelectedItemCall");
        }}
    />
) : null}

2. Call Details Component Integration

File: CometChatHome.tsx

const CallDetailsView = () => {
    if (!selectedItem || !(selectedItem instanceof CometChat.Call)) return null;
    
    return (
        <CometChatCallDetails
            selectedItem={selectedItem}
            onBack={() => {
                setSelectedItem(undefined);
                setAppState({ type: "updateSelectedItemCall", payload: undefined });
            }}
        />
    );
}

3. Call Details Main Component Implementation

File: CometChatCallLogDetails.tsx

export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () => void }) => {
    const { selectedItem, onBack } = props;
    const callDetailTabItems = [
        getLocalizedString("participants"), 
        getLocalizedString("recording"), 
        getLocalizedString("history")
    ];
    const [activeTab, setActiveTab] = useState("Participants");
    const [user, setUser] = useState<CometChat.User>();
    const [subtitleText, setSubtitleText] = useState<string>();

    return (
        <div className="cometchat-call-log-details">
            <div className="cometchat-call-log-details__header">
                <div className="cometchat-call-log-details__header-back" onClick={onBack} />
                {getLocalizedString("call_details")}
            </div>
            <div className="cometchat-call-log-details__call-log-item">
                <CometChatListItem 
                    avatarName={user?.getName()}
                    avatarURL={user?.getAvatar()}
                    title={user?.getName() || ""} 
                    subtitleView={getSubtitleView()} 
                    trailingView={getTrailingView()}
                />
            </div>
            <CometChatCallDetailsInfo call={selectedItem} />
            <div className="cometchat-call-log-details__tabs">
                {callDetailTabItems.map((tabItem) => (
                    <div
                        onClick={() => setActiveTab(tabItem)}
                        className={activeTab === tabItem ? "cometchat-call-log-details__tabs-tab-item-active" : "cometchat-call-log-details__tabs-tab-item"}
                    >
                        {tabItem}
                    </div>
                ))}
            </div>
            {activeTab === "Participants" ? <CometChatCallDetailsParticipants call={selectedItem} />
                : activeTab === "Recording" ? <CometChatCallDetailsRecording call={selectedItem} />
                    : activeTab === "History" ? <CometChatCallDetailsHistory call={selectedItem} />
                        : null
            }
        </div>
    );
}

4. Call Information Display Component

File: CometChatCallLogInfo.tsx

export const CometChatCallDetailsInfo = (props: { call: any }) => {
    const { call } = props;
    const [loggedInUser, setLoggedInUser] = useState<CometChat.User | null>(null);

    const getCallStatus = (call: CometChat.Call, loggedInUser: CometChat.User): string => {
        const isSentByMe = (call: any, loggedInUser: CometChat.User) => {
            const senderUid: string = call.initiator?.getUid();
            return !senderUid || senderUid === loggedInUser?.getUid();
        }
        const callStatus: string = call.getStatus();
        const isSentByMeFlag: boolean = isSentByMe(call, loggedInUser!);
        
        switch (callStatus) {
            case CometChatUIKitConstants.calls.initiated: {
                return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call');
            }
            case CometChatUIKitConstants.calls.ended: {
                return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call');
            }
            // ... other status cases
        }
    }

    return (
        <div className="cometchat-call-log-info">
            <CometChatListItem
                title={getCallStatus(call, loggedInUser!)}
                avatarURL={getAvatarUrlForCall(call)}
                subtitleView={getListItemSubtitleView(call)}
                trailingView={getListItemTailView(call)}
            />
        </div>
    );
}

Implementation Flow

Fetch Data / Call Selection

const onSelectorItemClicked = (e: CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call, type: string) => {
    if (type === "updateSelectedItemCall") {
        setSelectedItem(e as CometChat.Call);
        setAppState({ type: "updateSelectedItemCall", payload: e as CometChat.Call });
    }
}

Load Call Data / Associated Information

useEffect(() => {
    const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
    const callUser = verifyCallUser(selectedItem, loggedInUser!);
    
    if (selectedItem.receiverType === CometChatUIKitConstants.MessageReceiverType.user) {
        CometChat.getUser(callUser.uid).then((response: CometChat.User) => {
            setUser(response);
        });
    }
}, [selectedItem]);

Display Call Details / Tab Navigation

const [activeTab, setActiveTab] = useState("Participants");

const renderTabContent = () => {
    switch (activeTab) {
        case "Participants":
            return <CometChatCallDetailsParticipants call={selectedItem} />;
        case "Recording":
            return <CometChatCallDetailsRecording call={selectedItem} />;
        case "History":
            return <CometChatCallDetailsHistory call={selectedItem} />;
        default:
            return null;
    }
}

Live Updates / User Status Monitoring

useEffect(() => {
    let isBlocked = new MessageUtils().getUserStatusVisible(user);
    const userListenerId = "users_custom" + Date.now();
    
    if (isBlocked) {
        setSubtitleText("");
        return;
    }
    
    setSubtitleText(user?.getStatus());
    
    CometChat.addUserListener(
        userListenerId,
        new CometChat.UserListener({
            onUserOnline: (onlineUser: CometChat.User) => {
                if (user?.getUid() === onlineUser.getUid()) {
                    setSubtitleText(onlineUser?.getStatus());
                }
            },
            onUserOffline: (offlineUser: CometChat.User) => {
                if (user?.getUid() === offlineUser?.getUid()) {
                    setSubtitleText(offlineUser?.getStatus());
                }
            },
        })
    );
    
    return () => {
        CometChat.removeUserListener(userListenerId);
    };
}, [user]);

Customization Options

Styling overrides via CSS
Custom tab configurations
Custom call status labels and icons
User profile customization
Duration and date formatting
Icon replacements

Filtering / Edge Cases

Different call types (audio/video/group)
Call status variations (missed, rejected, busy, etc.)
Unavailable users
Missing duration or recording data
Large call history handling

Error Handling & Data Validation

Includes try-catch blocks for duration, history, and call list fetching.

Summary / Feature Matrix

Feature	Component / Method	File Reference
Calls tab integration	`CometChatCallLogs`	CometChatSelector.tsx
Call details display	`CometChatCallDetails`	CometChatCallLogDetails.tsx
Call information	`CometChatCallDetailsInfo`	CometChatCallLogInfo.tsx
Call participants	`CometChatCallDetailsParticipants`	CometChatCallLogParticipants.tsx
Call recordings	`CometChatCallDetailsRecording`	CometChatCallLogRecordings.tsx
Call history	`CometChatCallDetailsHistory`	CometChatCallLogHistory.tsx
Tab navigation	`activeTab` state	CometChatCallLogDetails.tsx
User status monitoring	`CometChat.addUserListener()`	CometChatCallLogDetails.tsx

Next Steps

Call Logs

The call logs component reference.

Call Features

Overview of calling capabilities.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Overview

​Prerequisites

​Components

​Integration Steps

​1. Calls Tab Integration Setup

​2. Call Details Component Integration

​3. Call Details Main Component Implementation

​4. Call Information Display Component

​Implementation Flow

​Customization Options

​Filtering / Edge Cases

​Error Handling & Data Validation

​Summary / Feature Matrix

​Next Steps