Call Logs

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

AI Integration Quick Reference

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

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,
  CometChatOutgoingCall,
} 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 }}>
        {selectedCall && <CallDetails call={selectedCall} />}
      </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”.

import { CometChat } from "@cometchat/chat-sdk-javascript";

<CometChatCallLogs
  callLogRequestBuilder={
    new CometChat.MessagesRequestBuilder()
      .setLimit(50)
      .setCategory("call")
  }
/>

Filter Recipes

Recipe	Code
Increase page size	new CometChat.MessagesRequestBuilder().setLimit(50).setCategory("call")
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