Call Log Details

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