> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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">
  | Field | Value |
  | - | - |
  | Component | `CometChatCallLogs` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-call-logs` |
  | Primary output | `onItemClick: (call: any) => void` — emits the selected call log |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching | Wire `onItemClick` / `onCallButtonClicked` to open details or start a call |
  | Events received | `ui:call/ended` — see [Event System](/ui-kit/react/event-system) |
  | Full props | See [Props](#props) |
</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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.