Call Logs - CometChat Docs

AI Integration Quick Reference

{
  "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"
      }
    }
  }
}

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.

Live Preview — interact with the call logs component.Open in Storybook ↗

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

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

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 for the full builder API.

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:

<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:

.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

Incoming Call

Handle incoming call notifications with accept/decline actions

Outgoing Call

Display the outgoing call screen while waiting for the receiver to answer

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Flat API

​Full Layout Example

​Filtering

​Filter Recipes

​Actions and Events

​Callback Props

​Events Emitted

​Events Received

​SDK Listeners (Automatic)

​Customization

​View Props

​CSS Styling

​Props

​activeCall

​callLogRequestBuilder

​callInitiatedDateTimeFormat

​onItemClick

​onCallButtonClicked

​onError

​callSettingsBuilder

​loadingView

​emptyView

​errorView

​itemView

​leadingView

​titleView

​subtitleView

​trailingView

​showScrollbar

​CSS Selectors

​Next Steps

Incoming Call

Outgoing Call

Theming

Overview

Usage

Flat API

Full Layout Example

Filtering

Filter Recipes

Actions and Events

Callback Props

Events Emitted

Events Received

SDK Listeners (Automatic)

Customization

View Props

CSS Styling

Props

activeCall

callLogRequestBuilder

callInitiatedDateTimeFormat

onItemClick

onCallButtonClicked

onError

callSettingsBuilder

loadingView

emptyView

errorView

itemView

leadingView

titleView

subtitleView

trailingView

showScrollbar

CSS Selectors

Next Steps