> ## 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 Logs

> Scrollable list of call history entries with filtering, call-back actions, and custom views.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCallLogs",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Scrollable list of call history entries with filtering, call-back actions, and custom views.",
    "cssRootClass": ".cometchat-call-logs",
    "primaryOutput": {
      "prop": "onItemClick",
      "type": "(call: any) => void"
    },
    "props": {
      "data": {
        "callLogRequestBuilder": {
          "type": "any (CallLogRequestBuilder)",
          "default": "SDK default (30 per page)"
        },
        "activeCall": {
          "type": "any",
          "default": "undefined"
        },
        "callInitiatedDateTimeFormat": {
          "type": "CalendarObject",
          "default": "DD MMM, hh:mm A"
        }
      },
      "callbacks": {
        "onItemClick": "(call: any) => void",
        "onCallButtonClicked": "(call: any) => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "visibility": {
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "itemView": "(call: any) => JSX.Element",
        "leadingView": "(call: any) => JSX.Element",
        "titleView": "(call: any) => JSX.Element",
        "subtitleView": "(call: any) => JSX.Element",
        "trailingView": "(call: any) => JSX.Element",
        "loadingView": "JSX.Element",
        "emptyView": "JSX.Element",
        "errorView": "JSX.Element"
      }
    },
    "events": [
      {
        "name": "CometChatMessageEvents.ccMessageSent",
        "payload": "IMessages",
        "description": "Call message sent"
      }
    ],
    "types": {
      "CalendarObject": {
        "today": "string | undefined",
        "yesterday": "string | undefined",
        "lastWeek": "string | undefined",
        "otherDays": "string | undefined"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatCallLogs` is a standalone list component that renders call history entries. Each entry shows the caller/callee, call type (audio/video), direction (incoming/outgoing/missed), and timestamp. The `onItemClick` callback emits the selected call log, and `onCallButtonClicked` fires when the call-back button is tapped.

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

function CallLogPanel() {
  return (
    <div style={{ width: 480, height: "100vh" }}>
      <CometChatCallLogs
        onItemClick={(callLog: any) => {
          console.log("Call log selected:", callLog);
        }}
        onCallButtonClicked={(callLog: any) => {
          console.log("Call back:", callLog);
        }}
      />
    </div>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/RxKy5RgybeX-8GbH/images/1c67191c-call_logs_overview_web_screens-afafcceff93f3e09e9371c3996b258ed.png?fit=max&auto=format&n=RxKy5RgybeX-8GbH&q=85&s=4826234382644d4489cf23b16255b02d" width="1280" height="800" data-path="images/1c67191c-call_logs_overview_web_screens-afafcceff93f3e09e9371c3996b258ed.png" />
</Frame>

***

## Minimal Render

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

function CallLogsDemo() {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <CometChatCallLogs />
    </div>
  );
}

export default CallLogsDemo;
```

Root CSS class: `.cometchat-call-logs`

***

## Filtering Call Logs

Pass a `CallLogRequestBuilder` from `@cometchat/calls-sdk-javascript` to `callLogRequestBuilder`.

```tsx lines theme={null}
import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

function FilteredCallLogs() {
  return (
    <CometChatCallLogs
      callLogRequestBuilder={
        new CallLogRequestBuilder()
          .setAuthToken("AUTH_TOKEN")
          .setLimit(10)
          .setCallStatus("cancelled")
      }
    />
  );
}
```

### Filter Recipes

| Recipe                     | Code                                                                         |
| -------------------------- | ---------------------------------------------------------------------------- |
| Limit to 5 per page        | `new CallLogRequestBuilder().setAuthToken(token).setLimit(5)`                |
| Cancelled calls only       | `new CallLogRequestBuilder().setAuthToken(token).setCallStatus("cancelled")` |
| Video calls only           | `new CallLogRequestBuilder().setAuthToken(token).setCallType("video")`       |
| Calls with recordings      | `new CallLogRequestBuilder().setAuthToken(token).setHasRecording(true)`      |
| Calls for a specific user  | `new CallLogRequestBuilder().setAuthToken(token).setUid("user_uid")`         |
| Calls for a specific group | `new CallLogRequestBuilder().setAuthToken(token).setGuid("group_guid")`      |

Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full builder API.

***

## Actions and Events

### Callback Props

#### onItemClick

Fires when a call log entry is tapped.

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

function CallLogsWithClick() {
  return (
    <CometChatCallLogs
      onItemClick={(callLog: any) => {
        console.log("Selected call log:", callLog);
      }}
    />
  );
}
```

#### onCallButtonClicked

Fires when the call-back button in the trailing view is tapped.

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

function CallLogsWithCallback() {
  return (
    <CometChatCallLogs
      onCallButtonClicked={(callLog: any) => {
        console.log("Call back:", callLog);
      }}
    />
  );
}
```

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

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

function CallLogsWithError() {
  return (
    <CometChatCallLogs
      onError={(error: CometChat.CometChatException) => {
        console.error("CometChatCallLogs error:", error);
      }}
    />
  );
}
```

### Global UI Events

The component subscribes to `CometChatMessageEvents.ccMessageSent` to detect when a call message is sent and refresh the list.

### SDK Events (Real-Time, Automatic)

The component listens to SDK call events internally for real-time updates. No manual attachment needed.

<Note>
  In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally.
</Note>

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a call log parameter receive the call log object for that row.

| Slot           | Signature                    | Replaces                        |
| -------------- | ---------------------------- | ------------------------------- |
| `itemView`     | `(call: any) => JSX.Element` | Entire list item row            |
| `leadingView`  | `(call: any) => JSX.Element` | Avatar / left section           |
| `titleView`    | `(call: any) => JSX.Element` | Name / title text               |
| `subtitleView` | `(call: any) => JSX.Element` | Call type, direction, timestamp |
| `trailingView` | `(call: any) => JSX.Element` | Call-back button area           |
| `loadingView`  | `JSX.Element`                | Loading spinner                 |
| `emptyView`    | `JSX.Element`                | Empty state                     |
| `errorView`    | `JSX.Element`                | Error state                     |

### itemView

Replace the entire call log list item.

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

    function CustomItemViewCallLogs() {
      const getItemView = (callLog: any) => {
        return (
          <div className="custom-call-log-item">
            <div className="custom-call-log-item__name">
              {callLog?.getInitiator()?.getName()}
            </div>
            <div className="custom-call-log-item__status">
              {callLog?.getStatus()}
            </div>
          </div>
        );
      };

      return <CometChatCallLogs itemView={getItemView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .custom-call-log-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      border-bottom: 1px solid var(--cometchat-border-color-light);
    }

    .custom-call-log-item__name {
      font: var(--cometchat-font-heading4-medium);
      color: var(--cometchat-text-color-primary);
    }

    .custom-call-log-item__status {
      font: var(--cometchat-font-body-regular);
      color: var(--cometchat-text-color-secondary);
    }
    ```
  </Tab>
</Tabs>

### subtitleView

Replace the subtitle text (call type, duration).

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

    function SubtitleCallLogs() {
      const getSubtitleView = (callLog: any) => {
        return (
          <div className="custom-call-log-subtitle">
            {callLog?.getStatus()} • {callLog?.getType()}
          </div>
        );
      };

      return <CometChatCallLogs subtitleView={getSubtitleView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .custom-call-log-subtitle {
      font: var(--cometchat-font-body-regular);
      color: var(--cometchat-text-color-secondary);
    }
    ```
  </Tab>
</Tabs>

### trailingView

Replace the right section (call-back button area).

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

    function TrailingViewCallLogs() {
      const getTrailingView = (callLog: any) => {
        return (
          <div className="custom-call-log-trailing">
            <button onClick={() => console.log("Call back", callLog)}>
              Call Back
            </button>
          </div>
        );
      };

      return <CometChatCallLogs trailingView={getTrailingView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .custom-call-log-trailing button {
      background: var(--cometchat-primary-color);
      color: var(--cometchat-static-white);
      border: none;
      border-radius: var(--cometchat-radius-2);
      padding: 4px 12px;
      cursor: pointer;
    }
    ```
  </Tab>
</Tabs>

### callInitiatedDateTimeFormat

Customize the call initiated timestamp format using a `CalendarObject`.

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

function CustomDateCallLogs() {
  const dateFormat = new CalendarObject({
    today: "hh:mm A",
    yesterday: "[yesterday]",
    otherDays: "DD MM YYYY",
  });

  return <CometChatCallLogs callInitiatedDateTimeFormat={dateFormat} />;
}
```

<Note>
  If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies.
</Note>

***

## Common Patterns

### Custom empty state

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

function EmptyStateCallLogs() {
  return (
    <CometChatCallLogs
      emptyView={
        <div style={{ textAlign: "center", padding: 40 }}>
          <p>No call history</p>
        </div>
      }
    />
  );
}
```

### Filtered to video calls only

```tsx lines theme={null}
import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

function VideoCallLogs({ authToken }: { authToken: string }) {
  return (
    <CometChatCallLogs
      callLogRequestBuilder={
        new CallLogRequestBuilder()
          .setAuthToken(authToken)
          .setCallType("video")
      }
    />
  );
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:

1. Global tokens are set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-call-logs`) consumes these tokens via `var()` with fallback values.
3. Overrides target `.cometchat-call-logs` descendant selectors in a global stylesheet.

### Key Selectors

| Target                | Selector                                                      |
| --------------------- | ------------------------------------------------------------- |
| Root                  | `.cometchat-call-logs`                                        |
| List item             | `.cometchat-call-logs .cometchat-list-item`                   |
| Active item           | `.cometchat-call-logs__list-item-active .cometchat-list-item` |
| Trailing view (video) | `.cometchat-call-logs__list-item-trailing-view-video`         |
| Trailing view (audio) | `.cometchat-call-logs__list-item-trailing-view-audio`         |
| Subtitle              | `.cometchat-call-logs__list-item-subtitle`                    |
| Subtitle date         | `.cometchat-call-logs__list-item-subtitle .cometchat-date`    |
| Missed call icon      | `.cometchat-call-logs__list-item-subtitle-icon-missed-call`   |
| Outgoing call icon    | `.cometchat-call-logs__list-item-subtitle-icon-outgoing-call` |
| Incoming call icon    | `.cometchat-call-logs__list-item-subtitle-icon-incoming-call` |
| Empty state           | `.cometchat-call-logs__empty-state-view`                      |
| Error state           | `.cometchat-call-logs__error-state-view`                      |
| Shimmer loading       | `.cometchat-call-logs__shimmer`                               |
| Outgoing call overlay | `.cometchat-call-logs__outgoing-call`                         |

### Customization Matrix

| What to change                        | Where           | Property/API                        | Example                                                              |
| ------------------------------------- | --------------- | ----------------------------------- | -------------------------------------------------------------------- |
| Override behavior on user interaction | Component props | `on<Event>` callbacks               | `onItemClick={(c) => showDetails(c)}`                                |
| Filter which call logs appear         | Component props | `callLogRequestBuilder`             | `callLogRequestBuilder={new CallLogRequestBuilder().setLimit(5)}`    |
| Replace a section of the list item    | Component props | `<slot>View` render props           | `subtitleView={(c) => <div>{c.getStatus()}</div>}`                   |
| Change colors, fonts, spacing         | Global CSS      | Target `.cometchat-call-logs` class | `.cometchat-call-logs .cometchat-list-item { background: #f9f8fd; }` |

***

## Props

All props are optional.

***

### activeCall

Highlights the currently active/selected call log entry.

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

***

### callInitiatedDateTimeFormat

Format for displaying the call initiated timestamp.

|         |                                       |
| ------- | ------------------------------------- |
| Type    | `CalendarObject`                      |
| Default | Component default (`DD MMM, hh:mm A`) |

Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set.

***

### callLogRequestBuilder

Controls which call logs load and in what order.

|         |                                                                      |
| ------- | -------------------------------------------------------------------- |
| Type    | `any` (CallLogRequestBuilder from `@cometchat/calls-sdk-javascript`) |
| Default | SDK default (30 per page)                                            |

***

### emptyView

Custom component displayed when there are no call logs.

|         |                      |
| ------- | -------------------- |
| Type    | `JSX.Element`        |
| Default | Built-in empty state |

***

### errorView

Custom component displayed when an error occurs.

|         |                      |
| ------- | -------------------- |
| Type    | `JSX.Element`        |
| Default | Built-in error state |

***

### itemView

Custom renderer for the entire call log list item.

|         |                              |
| ------- | ---------------------------- |
| Type    | `(call: any) => JSX.Element` |
| Default | Built-in list item           |

***

### leadingView

Custom renderer for the avatar / left section.

|         |                              |
| ------- | ---------------------------- |
| Type    | `(call: any) => JSX.Element` |
| Default | Built-in avatar              |

***

### loadingView

Custom component displayed during the loading state.

|         |                  |
| ------- | ---------------- |
| Type    | `JSX.Element`    |
| Default | Built-in shimmer |

***

### onCallButtonClicked

Callback fired when the call-back button is clicked.

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

***

### onError

Callback fired when the component encounters an error.

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

***

### onItemClick

Callback fired when a call log entry is clicked.

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

***

### showScrollbar

Shows the scrollbar in the call log list.

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

***

### subtitleView

Custom renderer for the subtitle text.

|         |                              |
| ------- | ---------------------------- |
| Type    | `(call: any) => JSX.Element` |
| Default | Built-in subtitle            |

***

### titleView

Custom renderer for the name / title text.

|         |                              |
| ------- | ---------------------------- |
| Type    | `(call: any) => JSX.Element` |
| Default | Built-in title               |

***

### trailingView

Custom renderer for the right section.

|         |                              |
| ------- | ---------------------------- |
| Type    | `(call: any) => JSX.Element` |
| Default | Built-in trailing view       |

***

## Events

| Event                                  | Payload     | Fires when        |
| -------------------------------------- | ----------- | ----------------- |
| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Call message sent |

***

## CSS Selectors

| Target                | Selector                                                      |
| --------------------- | ------------------------------------------------------------- |
| Root                  | `.cometchat-call-logs`                                        |
| List item             | `.cometchat-call-logs .cometchat-list-item`                   |
| Active item           | `.cometchat-call-logs__list-item-active .cometchat-list-item` |
| Trailing view (video) | `.cometchat-call-logs__list-item-trailing-view-video`         |
| Trailing view (audio) | `.cometchat-call-logs__list-item-trailing-view-audio`         |
| Subtitle              | `.cometchat-call-logs__list-item-subtitle`                    |
| Subtitle date         | `.cometchat-call-logs__list-item-subtitle .cometchat-date`    |
| Missed call icon      | `.cometchat-call-logs__list-item-subtitle-icon-missed-call`   |
| Outgoing call icon    | `.cometchat-call-logs__list-item-subtitle-icon-outgoing-call` |
| Incoming call icon    | `.cometchat-call-logs__list-item-subtitle-icon-incoming-call` |
| Empty state           | `.cometchat-call-logs__empty-state-view`                      |
| Error state           | `.cometchat-call-logs__error-state-view`                      |
| Shimmer loading       | `.cometchat-call-logs__shimmer`                               |
| Outgoing call overlay | `.cometchat-call-logs__outgoing-call`                         |