> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Details

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

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)                                         |
  | Related        | [All Guides](/ui-kit/react/guide-overview)                                                                              |
</Accordion>

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

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

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

```tsx lines 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

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

```tsx lines 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');
            }
        }
    }

    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](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)           |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Logs" href="/ui-kit/react/call-logs">
    The call logs component reference.
  </Card>

  <Card title="Call Features" href="/ui-kit/react/call-features">
    Overview of calling capabilities.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>