CallHistory

Display a compact call history list for a specific phone number with direction indicators and AI-generated summaries.

Basic Usage

import { CallHistory } from '@dialstack/sdk';

function PatientPanel({ phoneNumber }: { phoneNumber: string }) {
  return <CallHistory phoneNumber={phoneNumber} />;
}

Required Prop

The phoneNumber prop is required and must be in E.164 format (e.g., +14155551234). Without it, the component will display an error state.

Props

Prop	Type	Default	Description
phoneNumber	string	Required	Phone number to fetch history for (E.164)
limit	number	5	Maximum number of calls to display (1-20)
locale	Locale	English	Custom locale for UI strings
formatting	FormattingOptions	-	Date/phone formatting options
icons	ComponentIcons	-	Custom SVG icons
layoutVariant	'compact' | 'comfortable' | 'default'	'default'	Layout density
classes	CallHistoryClasses	-	Custom CSS classes
displayOptions	CallHistoryDisplayOptions	-	Show/hide UI elements
onLoaderStart	(event) => void	-	Loading started callback
onLoadError	(event) => void	-	Loading failed callback

Display Options

Control which UI elements are visible:

<CallHistory
  phoneNumber="+14155551234"
  displayOptions={{
    showDuration: true, // Show call duration
    showRelativeTime: true, // Show "2 min ago", "Yesterday", etc.
    showDirectionIcon: true, // Show inbound/outbound/missed/voicemail icon
  }}
/>

CallHistoryDisplayOptions

Option	Type	Default	Description
showDuration	boolean	true	Display call length
showRelativeTime	boolean	true	Show relative timestamps
showDirectionIcon	boolean	true	Show direction indicator icon

Call Types and Icons

The component displays different icons based on call type:

Type	Icon Color	Description
Inbound (completed)	Green	Successfully answered incoming call
Outbound (completed)	Blue	Successfully connected outgoing call
Missed	Red	Unanswered incoming call
Voicemail	Purple	Caller left a voicemail

AI Summaries

For completed calls and voicemails, the component displays an AI-generated summary of the conversation. The summary appears below the call information with a distinctive "AI Summary" badge.

// AI summaries are shown automatically for:
// - Completed inbound calls
// - Completed outbound calls
// - Voicemails

The summary provides a concise overview of the call content, making it easy to quickly understand what was discussed without listening to recordings.

Limiting Results

Control how many calls are displayed:

<CallHistory
  phoneNumber="+14155551234"
  limit={10} // Show up to 10 calls (default is 5, max is 20)
/>

Formatting

Customize date and time formatting:

<CallHistory
  phoneNumber="+14155551234"
  formatting={{
    dateLocale: 'en-US', // BCP 47 language tag
    use24HourTime: false, // 12-hour vs 24-hour
  }}
/>

FormattingOptions

Option	Type	Default	Description
dateLocale	string	'en-US'	Locale for date formatting
use24HourTime	boolean	false	Use 24-hour time format

Custom Styling

CSS Classes

Apply custom classes for framework integration:

<CallHistory
  phoneNumber="+14155551234"
  classes={{
    base: 'rounded-lg',
    loading: 'animate-pulse',
    error: 'border-red-500',
    empty: 'text-gray-400 p-4',
    list: 'divide-y',
    item: 'p-2',
    itemInbound: 'border-l-green-500',
    itemOutbound: 'border-l-blue-500',
    itemMissed: 'border-l-red-500',
    itemVoicemail: 'border-l-purple-500',
    icon: 'rounded-full',
    time: 'text-sm',
    duration: 'text-xs text-gray-500',
  }}
/>

CallHistoryClasses

Class	Default	Description
base	'dialstack-component'	Container element
loading	'dialstack-component--loading'	Loading state
error	'dialstack-component--error'	Error state
empty	'dialstack-component--empty'	No calls state
list	'dialstack-call-history-list'	List container
item	'dialstack-call-history-item'	Call item
itemInbound	'dialstack-call-history-item--inbound'	Inbound call
itemOutbound	'dialstack-call-history-item--outbound'	Outbound call
itemMissed	'dialstack-call-history-item--missed'	Missed call
itemVoicemail	'dialstack-call-history-item--voicemail'	Voicemail
icon	'dialstack-call-history-icon'	Direction icon
time	'dialstack-call-history-time'	Time display
duration	'dialstack-call-history-duration'	Duration display

Layout Variants

<CallHistory phoneNumber="+14155551234" layoutVariant="compact" />
<CallHistory phoneNumber="+14155551234" layoutVariant="default" />
<CallHistory phoneNumber="+14155551234" layoutVariant="comfortable" />

CallLog Data Model

The component uses the CallLog type internally:

interface CallLog {
  id: string;
  user_id?: string;
  endpoint_id?: string;
  did_id?: string;
  direction: 'inbound' | 'outbound' | 'internal';
  from_number: string;
  to_number: string;
  started_at: string;
  answered_at?: string;
  ended_at?: string;
  duration_seconds?: number;
  status: 'completed' | 'no-answer' | 'busy' | 'failed' | 'voicemail';
}

Complete Example

import { CallHistory } from '@dialstack/sdk';

function PatientDetailPanel({ patient }: { patient: Patient }) {
  if (!patient.phone) {
    return <p>No phone number on file</p>;
  }

  return (
    <div className="bg-white rounded-lg shadow p-4">
      <h2 className="text-lg font-semibold mb-4">Call History</h2>

      <CallHistory
        phoneNumber={patient.phone}
        limit={5}
        layoutVariant="comfortable"
        displayOptions={{
          showDuration: true,
          showRelativeTime: true,
          showDirectionIcon: true,
        }}
        formatting={{
          dateLocale: 'en-US',
          use24HourTime: false,
        }}
        classes={{
          base: 'rounded-lg',
          item: 'rounded-md hover:bg-gray-50',
        }}
        onLoadError={(event) => {
          console.error('Failed to load call history:', event.error);
        }}
      />
    </div>
  );
}

Use Cases

Customer Context Panel

Display recent interactions when a customer calls in:

function ScreenPopPanel({ phoneNumber }: { phoneNumber: string }) {
  return (
    <div className="w-80 bg-white shadow-lg">
      <CallHistory phoneNumber={phoneNumber} limit={3} layoutVariant="compact" />
    </div>
  );
}

Patient Records

Show call history in a healthcare patient record:

function PatientRecord({ patient }: { patient: Patient }) {
  return (
    <section>
      <h3>Recent Calls</h3>
      <CallHistory
        phoneNumber={patient.phone}
        limit={10}
        classes={{
          base: 'border rounded-lg',
        }}
      />
    </section>
  );
}

Next Steps

• CallLogs - Full call logs table with pagination
• Voicemails - Voicemail component with playback
• Theming - Customize appearance
• i18n - Internationalization