Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
Components Call log

Call log

The softphone call history — a calm list of calls, each with a direction-arrow glyph tinted by outcome (green connected, red missed/failed), the other party (a matched contact name, or the number), and a meta line with the number (when a name is shown), the local date & time, and an optional reference chip linking to the transaction or quote. Used by the per-transaction Calls tab and the global own-calls page.

<koala-call-log>

Canonical

  • Jane Carter
    07700 900100
    4m 12s
  • 07700 900123
  • Priya Shah
    07700 900222
    48s
  • 07700 900456
<koala-call-log model="@callLog" />

The default shape — the per-transaction Calls tab. The transaction is already the context, so rows carry no reference chip. A matched call shows the name on top and the number on the meta line; an unmatched call shows the number as the party.

Variants

2 variants

With reference chips

On the global own-calls page a call can belong to any transaction or quote, so each row links to it via a ContextLabel / ContextUrl chip on the meta line.

  • Jane Carter
    07700 900100P-VRMUDC
    4m 12s
  • 07700 900123
    Q-OQKBLK

With a recording

When a call has a recording, its row shows a play button; pressing it morphs the row in place into playback controls — play/pause, skip ±10s, a draggable scrubber, and elapsed / total time (the koalaAudioPlayer Alpine component; preload="none", streamed from RecordingUrl). Closing (or the track ending) flips back to the row; only one plays at a time. Rows without a recording are unchanged.

  • Jane Carter
    07700 900100
    4m 12s
  • 07700 900123

States

4 outcomes

The glyph tint comes from the call outcome: Completed (connected) → green, No answer / Busy / Failed → red, and a user-cancelled or in-flight call (dialling / ringing) stays neutral.

  • Completed call
    07700 900100
    4m 12s
  • Unanswered call
    07700 900101
  • Failed call
    07700 900102
  • Cancelled call
    07700 900103

Props

1 attribute
Attribute Values Notes
model CallLogModel Holds Calls — a list of CallLogItem (party name-or-number, outbound, status label + colour, duration, the local date & time, the number to show under a matched name, an optional reference chip, and an optional RecordingUrl that morphs the row into an in-row playback player). Shape a CallEntity with CallLogFactory.From.

Do & don't

No calls yet

Calls to this transaction's contacts will show up here.

Do Compose a koala-empty-state when the list is empty — the copy differs per surface, so the caller owns it.
Bespoke ul/li call markup
Don't Don't hand-roll call rows in the page. Shape the data with CallLogFactory and let koala-call-log render it, so both surfaces stay identical.