> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)*

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

***

### 2. Call Details Component Integration

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)*

```tsx theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)*

```tsx theme={null}
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**

```tsx theme={null}
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**

```tsx theme={null}
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**

```tsx theme={null}
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**

```tsx theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)                      |
| Call details display   | `CometChatCallDetails`             | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)           |
| Call information       | `CometChatCallDetailsInfo`         | [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)                 |
| Call participants      | `CometChatCallDetailsParticipants` | [CometChatCallLogParticipants.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogParticipants.tsx) |
| Call recordings        | `CometChatCallDetailsRecording`    | [CometChatCallLogRecordings.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogRecordings.tsx)     |
| Call history           | `CometChatCallDetailsHistory`      | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx)           |
| Tab navigation         | `activeTab` state                  | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)           |
| User status monitoring | `CometChat.addUserListener()`      | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)           |