Call Log Details

Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit.

AI Agent Component Spec

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.