Call history

A compact list of recent calls with one phone number, with direction icons and AI-generated summaries. Use it beside a customer or patient record, or in a screen-pop panel when a call comes in.

Usage

React

TypeScript

import { CallHistory } from '@dialstack/sdk-react/call-history';

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

Web Component

HTML

<dialstack-call-history></dialstack-call-history>

<script>
  // `dialstack` is your initialized instance (see Setup)
  const callHistory = document.querySelector('dialstack-call-history');
  callHistory.setPhoneNumber('+14155551234');
  callHistory.setInstance(dialstack);
</script>

Phone number required

Set the phone number (the phoneNumber prop or setPhoneNumber()) in E.164 format, such as +14155551234. Without it the component shows an error state.

Options

These are specific to call history. The common options (locale, formatting, icons, layout variant, classes, load callbacks) apply too.

React prop	Web Component method	Type	Default	Description
phoneNumber	setPhoneNumber(number)	string	Required	Phone number to show history for (E.164)
limit	setLimit(limit)	number	5	Maximum number of calls to show (1–20)
displayOptions	setDisplayOptions(options)	CallHistoryDisplayOptions	—	Show or hide parts of each row (see below)
classes	setClasses(classes)	CallHistoryClasses	—	Extra CSS classes (see Styling)

CallHistoryDisplayOptions

Option	Type	Default	Description
showDuration	boolean	true	Show the call's length
showRelativeTime	boolean	true	Show relative times such as "2 min ago", "Yesterday"
showDirectionIcon	boolean	true	Show the inbound/outbound/missed/voicemail icon

React

TypeScript

<CallHistory
  phoneNumber="+14155551234"
  limit={10}
  displayOptions={{
    showDuration: true,
    showRelativeTime: true,
    showDirectionIcon: true,
  }}
/>

Web Component

JavaScript

callHistory.setLimit(10);
callHistory.setDisplayOptions({
  showDuration: true,
  showRelativeTime: true,
  showDirectionIcon: true,
});

Call types and icons

Type	Icon color	Meaning
Inbound (completed)	Green	An incoming call was answered
Outbound (completed)	Blue	An outgoing call connected
Missed	Red	An incoming call wasn't answered
Voicemail	Purple	The caller left a voicemail

AI summaries

For completed inbound and outbound calls and for voicemails, each row shows an AI-generated summary of the conversation under an "AI Summary" badge, so you can see what was discussed without listening to a recording. Summaries appear automatically; there is nothing to configure.

Styling

classes adds your own CSS class names to parts of the component, which is useful with a utility framework such as Tailwind. For colors, fonts and spacing, see Theming.

Key	Applied to
base	Container, in every state
loading	Container while loading
error	Container in the error state
empty	The "no calls" message
list	List container
item	Each call
itemInbound	An inbound call
itemOutbound	An outbound call
itemMissed	A missed call
itemVoicemail	A call that went to voicemail
icon	Direction icon
time	Time
duration	Duration

React

TypeScript

<CallHistory
  phoneNumber="+14155551234"
  classes={{ list: 'divide-y', itemMissed: 'border-l-4 border-red-500' }}
/>

Web Component

JavaScript

callHistory.setClasses({ list: 'divide-y', itemMissed: 'border-l-4 border-red-500' });

Complete example

React

TypeScript

import { CallHistory } from '@dialstack/sdk-react/call-history';

function CustomerDetailPanel({ customer }: { customer: Customer }) {
  if (!customer.phone) {
    return <p>No phone number on file</p>;
  }

  return (
    <div className="rounded-lg bg-white p-4 shadow">
      <h2 className="mb-4 text-lg font-semibold">Recent calls</h2>
      <CallHistory
        phoneNumber={customer.phone}
        limit={5}
        layoutVariant="comfortable"
        formatting={{ dateLocale: 'en-US', use24HourTime: false }}
        classes={{ item: 'rounded-md hover:bg-gray-50' }}
        onLoadError={(event) => {
          console.error('Failed to load call history:', event.error);
        }}
      />
    </div>
  );
}

Web Component

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk-js"></script>
  </head>
  <body>
    <h1>Recent calls</h1>
    <dialstack-call-history></dialstack-call-history>

    <script>
      DialStack.loadDialstackAndInitialize({
        publishableKey: 'pk_live_YOUR_KEY',
        fetchClientSecret: async () => {
          const res = await fetch('/api/dialstack/session', { method: 'POST' });
          const { client_secret } = await res.json();
          return client_secret;
        },
      }).then((dialstack) => {
        const callHistory = document.querySelector('dialstack-call-history');
        callHistory.setPhoneNumber('+14155551234');
        callHistory.setLimit(5);
        callHistory.setLayoutVariant('comfortable');
        callHistory.setFormatting({ dateLocale: 'en-US', use24HourTime: false });
        callHistory.setOnLoadError((event) => {
          console.error('Failed to load call history:', event.error);
        });
        callHistory.setInstance(dialstack);
      });
    </script>
  </body>
</html>

Next steps

• Call logs — the full, paginated call table
• Component basics — shared options and the CallLog model
• Theming — customize appearance