Call Log Details - CometChat Docs

AI Integration Quick Reference

Field	Value
Packages	`@cometchat/chat-uikit-angular` + `@cometchat/calls-sdk-javascript`
Key components	`cometchat-call-logs`, `cometchat-call-log-details`, `cometchat-call-log-participants`, `cometchat-call-log-recordings`
Init	`CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed
Purpose	Detailed call insights screen with metadata, participants, and recordings
Sample app	GitHub
Related	All Guides

Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab. Before starting, complete the Integration Guide and install @cometchat/calls-sdk-javascript.

Components

Component / Selector	Role
`cometchat-call-logs`	Calls list component in the calls tab
`cometchat-call-log-details`	Main container for call details display
`cometchat-call-log-participants`	Displays call participants
`cometchat-call-log-recordings`	Shows call recordings if available
`cometchat-call-log-history`	Displays call history

Implementation Steps

1. Calls Tab Integration

Render cometchat-call-logs when the “Calls” tab is active. When a call is clicked, store it so the details panel can display it.

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatCallLogsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-calls-tab',
  standalone: true,
  imports: [CometChatCallLogsComponent],
  template: `
    @if (activeTab === 'calls') {
      <cometchat-call-logs
        [activeCall]="selectedCall"
        (itemClick)="onCallClick($event)">
      </cometchat-call-logs>
    }
  `
})
export class CallsTabComponent {
  activeTab = 'calls';
  selectedCall: CometChat.Call | undefined;

  onCallClick(call: CometChat.Call): void {
    this.selectedCall = call;
  }
}

2. Call Details Component

Guard-check that the selected item is a call, then render the details view. The (backClick) output clears the selection and returns to the call list.

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-call-details-view',
  standalone: true,
  imports: [],
  template: `
    @if (selectedCall) {
      <app-call-log-details
        [call]="selectedCall"
        (backClick)="onBack()">
      </app-call-log-details>
    }
  `
})
export class CallDetailsViewComponent {
  @Input() selectedCall: CometChat.Call | undefined;
  @Output() cleared = new EventEmitter<void>();

  onBack(): void {
    this.selectedCall = undefined;
    this.cleared.emit();
  }
}

3. Call Details Implementation

The main details screen shows the caller’s avatar and name at the top, call info below, and three tabs: Participants, Recording, and History.

import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-call-log-details',
  standalone: true,
  imports: [],
  template: `
    <div class="cometchat-call-log-details">
      <div class="cometchat-call-log-details__header">
        <button (click)="backClick.emit()">← Back</button>
        <span>{{ 'call_details' | translate }}</span>
      </div>

      <div class="cometchat-call-log-details__tabs">
        @for (tab of tabs; track tab) {
          <div
            [class.cometchat-call-log-details__tabs-tab-item-active]="activeTab === tab"
            (click)="activeTab = tab">
            {{ tab }}
          </div>
        }
      </div>

      @switch (activeTab) {
        @case ('Participants') {
          <cometchat-call-log-participants [call]="call">
          </cometchat-call-log-participants>
        }
        @case ('Recording') {
          <cometchat-call-log-recordings [call]="call">
          </cometchat-call-log-recordings>
        }
        @case ('History') {
          <cometchat-call-log-history [call]="call">
          </cometchat-call-log-history>
        }
      }
    </div>
  `
})
export class CallLogDetailsComponent implements OnInit, OnDestroy {
  @Input() call!: CometChat.Call;
  @Output() backClick = new EventEmitter<void>();

  tabs = ['Participants', 'Recording', 'History'];
  activeTab = 'Participants';
  user: CometChat.User | undefined;

  private subscriptions: Subscription[] = [];

  ngOnInit(): void {
    this.loadCallUser();
  }

  private loadCallUser(): void {
    const initiator = (this.call as any).getInitiator?.();
    if (initiator) {
      this.user = initiator;
    }
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

4. Call Information Display

Determine call direction (incoming/outgoing) by comparing the initiator’s UID against the logged-in user, then map the SDK call status to a localized label.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatUIKitConstants,
  CometChatUIKitLoginListener,
  CometChatLocalize
} from '@cometchat/chat-uikit-angular';

getCallStatus(call: CometChat.Call): string {
  const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
  const initiator = (call as any).getInitiator?.();
  const isSentByMe = initiator?.getUid() === loggedInUser?.getUid();
  const callStatus = call.getStatus();

  switch (callStatus) {
    case CometChatUIKitConstants.calls.initiated:
    case CometChatUIKitConstants.calls.ended:
      return isSentByMe
        ? CometChatLocalize.getLocalizedString('calls_outgoing_call')
        : CometChatLocalize.getLocalizedString('calls_incoming_call');
    default:
      return callStatus;
  }
}

5. Full Integration Example

A complete component wiring the calls tab, call selection, and details panel together.

import { Component, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatCallLogsComponent
} from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-calls-with-details',
  standalone: true,
  imports: [CometChatCallLogsComponent],
  template: `
    <div class="cometchat-calls-layout">
      <!-- Call list -->
      <cometchat-call-logs
        [activeCall]="selectedCall"
        (itemClick)="onCallClick($event)">
      </cometchat-call-logs>

      <!-- Call details panel -->
      @if (selectedCall) {
        <app-call-log-details
          [call]="selectedCall"
          (backClick)="clearSelection()">
        </app-call-log-details>
      } @else {
        <div class="cometchat-empty-state">
          <p>Select a call to view details</p>
        </div>
      }
    </div>
  `
})
export class CallsWithDetailsComponent implements OnDestroy {
  selectedCall: CometChat.Call | undefined;
  private subscriptions: Subscription[] = [];

  onCallClick(call: CometChat.Call): void {
    this.selectedCall = call;
  }

  clearSelection(): void {
    this.selectedCall = undefined;
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

Feature Matrix

Feature	Component / Method	Description
Calls tab integration	`cometchat-call-logs` with `(itemClick)`	Lists calls and triggers detail view
Call details display	`cometchat-call-log-details`	Main details container with tabs
Call information	`getCallStatus()`	Determines incoming/outgoing direction
Call participants	`cometchat-call-log-participants`	Displays participant list
Call recordings	`cometchat-call-log-recordings`	Shows available recordings
Call history	`cometchat-call-log-history`	Displays call history entries
Tab navigation	`activeTab` property	Switches between Participants, Recording, History
Cleanup	`ngOnDestroy`	Unsubscribes from event listeners

Next Steps

Call Logs

The call logs component reference.

Call Features

Overview of calling capabilities.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Implementation Steps

​1. Calls Tab Integration

​2. Call Details Component

​3. Call Details Implementation

​4. Call Information Display

​5. Full Integration Example

​Feature Matrix

​Next Steps