Call Log Details - CometChat Docs

AI Integration Quick Reference

Field	Value
Packages	`@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript`
Key components	`CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording`
Init	`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

Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab. Before starting, complete the Getting Started guide for your framework and install @cometchat/calls-sdk-javascript.

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

Render CometChatCallLogs when the “Calls” tab is active. When a call is clicked, dispatch it to the app state so the details panel can display it. File: CometChatSelector.tsx

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

2. Call Details Component

Guard-check that the selected item is a CometChat.Call instance, then render CometChatCallDetails. The onBack callback clears the selection and returns to the call list. 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 Implementation

The main details screen. It shows the caller’s avatar and name at the top, call info (status, duration) below, and three tabs: Participants, Recording, and History. Tab selection switches the content panel. 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

Renders the call status line (incoming/outgoing) based on who initiated the call. Compares the initiator’s UID against the logged-in user to determine direction, then maps the SDK call status to a localized label. 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');
            }
        }
    }

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

Feature Matrix

Feature	Component / Method	File
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.

​Components

​Integration Steps

​1. Calls Tab Integration

​2. Call Details Component

​3. Call Details Implementation

​4. Call Information Display

​Feature Matrix

​Next Steps