> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Logs

> Scrollable list of call history with call details, duration, and the ability to initiate new calls.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCallLogs",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react\";",
    "description": "Scrollable list of call history with call details, duration, and the ability to initiate new calls.",
    "cssRootClass": ".cometchat-call-logs",
    "primaryOutput": {
      "prop": "onItemClick",
      "type": "(call: any) => void"
    },
    "props": {
      "data": {
        "activeCall": {
          "type": "any",
          "default": "undefined",
          "note": "Object representing the active/selected call log"
        },
        "callLogRequestBuilder": {
          "type": "any",
          "default": "limit 30, category \"call\"",
          "note": "Custom request builder for filtering call logs"
        },
        "callInitiatedDateTimeFormat": {
          "type": "CometChatDateFormatConfig",
          "default": "hh:mm A today, Yesterday, dddd last week, DD/MM/YYYY older"
        }
      },
      "callbacks": {
        "onItemClick": "(call: any) => void",
        "onCallButtonClicked": "(call: any) => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "configuration": {
        "callSettingsBuilder": {
          "type": "any",
          "default": "undefined",
          "note": "Custom call settings builder for ongoing call sessions initiated from call logs"
        }
      },
      "visibility": {
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "loadingView": "ReactNode",
        "emptyView": "ReactNode",
        "errorView": "ReactNode",
        "itemView": "(call: any) => ReactNode",
        "leadingView": "(call: any) => ReactNode",
        "titleView": "(call: any) => ReactNode",
        "subtitleView": "(call: any) => ReactNode",
        "trailingView": "(call: any) => ReactNode"
      }
    },
    "events": [],
    "eventsReceived": [
      {
        "name": "ui:call/ended",
        "payload": "{}",
        "description": "Resets ongoing call state (hides call screen)"
      }
    ],
    "sdkListeners": [],
    "types": {
      "CometChatDateFormatConfig": {
        "today": "string | undefined",
        "yesterday": "string | undefined",
        "lastWeek": "string | undefined",
        "otherDays": "string | undefined",
        "relativeTime": {
          "minute": "string | undefined",
          "minutes": "string | undefined",
          "hour": "string | undefined",
          "hours": "string | undefined"
        }
      }
    }
  }
  ```
</Accordion>

## Overview

`CometChatCallLogs` is a scrollable list component that displays the user's call history. Each item shows call direction (incoming/outgoing/missed), participant info, duration, and timestamp. The trailing view includes a call button to re-initiate calls directly from the log.

<Info>
  **Live Preview** — interact with the call logs component.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-calls-cometchat-call-logs--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-calls-cometchat-call-logs--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat Call Logs — Default" allow="clipboard-write" />

The component handles:

* Paginated fetching of call logs with infinite scroll
* Call direction indicators (incoming, outgoing, missed)
* Call duration and timestamp display
* Call button in trailing view to re-initiate calls
* Transition to outgoing/ongoing call screens internally when a call is initiated
* Active call highlighting

> **No real-time updates:** This component fetches call logs via the request builder on mount and does not attach SDK listeners for real-time updates. Pull-to-refresh or remounting is needed to see new call logs.

***

## Usage

### Flat API

```tsx theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

function CallHistory() {
  return (
    <CometChatCallLogs
      onItemClick={(call) => {
        console.log("Call log clicked:", call);
      }}
      onCallButtonClicked={(call) => {
        console.log("Re-initiating call to:", call);
      }}
    />
  );
}
```

### Full Layout Example

```tsx theme={null}
import { useState } from "react";
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

function CallsTab() {
  const [selectedCall, setSelectedCall] = useState<any>(null);

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: 360 }}>
        <CometChatCallLogs
          onItemClick={(call) => setSelectedCall(call)}
          onCallButtonClicked={(call) => {
            // Initiate a new call to the same participant
            initiateCall(call);
          }}
        />
      </div>
      <div style={{ flex: 1, padding: 16 }}>
        {selectedCall && (
          // Render your own details panel for the selected call log
          <pre>{JSON.stringify(selectedCall, null, 2)}</pre>
        )}
      </div>
    </div>
  );
}
```

***

## Filtering

Pass a custom `callLogRequestBuilder` to control which call logs are fetched. The default fetches up to 30 call logs with category "call". Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full builder API.

```tsx theme={null}
import { CometChatUIKitCalls } from "@cometchat/chat-uikit-react";

<CometChatCallLogs
  callLogRequestBuilder={
    new CometChatUIKitCalls.CallLogRequestBuilder()
      .setLimit(50)
      .setCallCategory("call")
      .setAuthToken(authToken) // logged-in user's auth token (required when supplying your own builder)
  }
/>
```

### Filter Recipes

| Recipe                     | Code                                                                                    |
| -------------------------- | --------------------------------------------------------------------------------------- |
| Increase page size         | `new CometChatUIKitCalls.CallLogRequestBuilder().setLimit(50).setCallCategory("call")`  |
| Calls with a specific user | `new CometChatUIKitCalls.CallLogRequestBuilder().setUid("uid").setAuthToken(authToken)` |
| Only missed calls          | Custom filtering via `itemView` with conditional rendering                              |

***

## Actions and Events

### Callback Props

| Prop                  | Signature                                                 | Fires when                                   |
| --------------------- | --------------------------------------------------------- | -------------------------------------------- |
| `onItemClick`         | `(call: any) => void`                                     | User clicks a call log item                  |
| `onCallButtonClicked` | `(call: any) => void`                                     | User clicks the call button in trailing view |
| `onError`             | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs                             |

### Events Emitted

This component does not emit any UI events.

### Events Received

UI events this component subscribes to (published by other components):

| Event           | Payload | Behavior                                      |
| --------------- | ------- | --------------------------------------------- |
| `ui:call/ended` | `{}`    | Resets ongoing call state (hides call screen) |

### SDK Listeners (Automatic)

This component does not attach any SDK listeners. It fetches call logs via the request builder on mount and uses infinite scroll for pagination. No real-time updates are received.

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatCallLogs
  itemView={(call) => <MyCustomCallItem call={call} />}
  leadingView={(call) => <MyCustomAvatar call={call} />}
  subtitleView={(call) => <span>{call.getDuration()}s</span>}
  emptyView={<p>No call history yet</p>}
  loadingView={<Skeleton />}
  errorView={<ErrorBanner />}
/>
```

| Slot           | Signature                  | Replaces                  |
| -------------- | -------------------------- | ------------------------- |
| `itemView`     | `(call: any) => ReactNode` | Entire call log row       |
| `leadingView`  | `(call: any) => ReactNode` | Avatar section            |
| `titleView`    | `(call: any) => ReactNode` | Participant name          |
| `subtitleView` | `(call: any) => ReactNode` | Call direction + duration |
| `trailingView` | `(call: any) => ReactNode` | Call button + timestamp   |
| `loadingView`  | `ReactNode`                | Loading shimmer           |
| `emptyView`    | `ReactNode`                | Empty state               |
| `errorView`    | `ReactNode`                | Error state               |

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-call-logs {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-call-logs__list-item:hover {
  background: var(--cometchat-background-color-02);
}
```

***

## Props

All props are optional.

***

### activeCall

Object representing the currently active/selected call log. The matching item receives an active visual state.

|         |             |
| ------- | ----------- |
| Type    | `any`       |
| Default | `undefined` |

***

### callLogRequestBuilder

Custom request builder for filtering and paginating call logs.

|         |                           |
| ------- | ------------------------- |
| Type    | `any`                     |
| Default | Limit 30, category "call" |

***

### callInitiatedDateTimeFormat

Custom date/time format for the call initiation timestamp shown in each call log item.

|         |                                                                                           |
| ------- | ----------------------------------------------------------------------------------------- |
| Type    | `CometChatDateFormatConfig`                                                               |
| Default | `{ today: 'hh:mm A', yesterday: 'Yesterday', lastWeek: 'dddd', otherDays: 'DD/MM/YYYY' }` |

***

### onItemClick

Callback when a call log item is clicked.

|         |                       |
| ------- | --------------------- |
| Type    | `(call: any) => void` |
| Default | `undefined`           |

***

### onCallButtonClicked

Callback when the call button (in the trailing view) is clicked to re-initiate a call.

|         |                       |
| ------- | --------------------- |
| Type    | `(call: any) => void` |
| Default | `undefined`           |

***

### onError

Callback when an SDK error occurs during fetch operations.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `null`                                                    |

***

### callSettingsBuilder

Custom call settings builder for ongoing call sessions initiated from call logs. Falls back to `GlobalConfig.callSettingsBuilder`, then default settings.

|         |             |
| ------- | ----------- |
| Type    | `any`       |
| Default | `undefined` |

***

### loadingView

Custom loading state view shown while call logs are being fetched.

|         |                          |
| ------- | ------------------------ |
| Type    | `ReactNode`              |
| Default | Built-in loading shimmer |

***

### emptyView

Custom empty state view shown when no call logs exist.

|         |                      |
| ------- | -------------------- |
| Type    | `ReactNode`          |
| Default | Built-in empty state |

***

### errorView

Custom error state view shown when fetching call logs fails.

|         |                      |
| ------- | -------------------- |
| Type    | `ReactNode`          |
| Default | Built-in error state |

***

### itemView

Custom renderer for the entire call log row.

|         |                            |
| ------- | -------------------------- |
| Type    | `(call: any) => ReactNode` |
| Default | `undefined`                |

***

### leadingView

Custom renderer for the avatar section.

|         |                            |
| ------- | -------------------------- |
| Type    | `(call: any) => ReactNode` |
| Default | `undefined`                |

***

### titleView

Custom renderer for the participant name.

|         |                            |
| ------- | -------------------------- |
| Type    | `(call: any) => ReactNode` |
| Default | `undefined`                |

***

### subtitleView

Custom renderer for the call direction and duration section.

|         |                            |
| ------- | -------------------------- |
| Type    | `(call: any) => ReactNode` |
| Default | `undefined`                |

***

### trailingView

Custom renderer for the trailing section (call button + timestamp).

|         |                            |
| ------- | -------------------------- |
| Type    | `(call: any) => ReactNode` |
| Default | `undefined`                |

***

### showScrollbar

Show the native scrollbar on the call logs list.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

## CSS Selectors

| Target         | Selector                                        |
| -------------- | ----------------------------------------------- |
| Root container | `.cometchat-call-logs`                          |
| List container | `.cometchat-call-logs__list`                    |
| List item      | `.cometchat-call-logs__list-item`               |
| Item avatar    | `.cometchat-call-logs__list-item-avatar`        |
| Item title     | `.cometchat-call-logs__list-item-title`         |
| Item subtitle  | `.cometchat-call-logs__list-item-subtitle`      |
| Subtitle icon  | `.cometchat-call-logs__list-item-subtitle-icon` |
| Subtitle text  | `.cometchat-call-logs__list-item-subtitle-text` |
| Item trailing  | `.cometchat-call-logs__list-item-trailing`      |
| Empty state    | `.cometchat-call-logs__empty-state`             |
| Error state    | `.cometchat-call-logs__error-state`             |
| Loading state  | `.cometchat-call-logs__loading-state`           |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react/components/incoming-call">
    Handle incoming call notifications with accept/decline actions
  </Card>

  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/react/components/outgoing-call">
    Display the outgoing call screen while waiting for the receiver to answer
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>