For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwUiTranscriptView, sw-ui-transcript-view
  • Fields
  • entries
  • header
  • emptyText
  • Attributes
  • CSS Properties
  • CSS Parts
  • Events
Web Components

sw-ui-transcript-view

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous
Built with

Chat-bubble timeline that renders an array of TranscriptEntry items, each tagged as user / agent / system with optional rich content.

1<sw-ui-transcript-view></sw-ui-transcript-view>

Designed to live inside <sw-ui-call-layout>’s transcript slot or <sw-ui-content-drawer> body. The view auto-scrolls to the latest entry, distinguishes “partial” (in-progress) entries with a subtle pulse, and renders rich meta payloads:

  • Links — clickable anchors injected as a footer beneath the bubble.
  • Code — Prism-highlighted snippet (language is loaded lazily).
  • Display content — content the agent pushed via a display_content user event; preserved verbatim so the download button can serialise the full payload back to markdown.

The header includes a download icon that exports the entire transcript as a .md file via transcriptToMarkdown() so users can save the conversation.

Class: SwUiTranscriptView · Module: packages/web-components/src/components/UI/sw-ui-transcript-view.ts

class: SwUiTranscriptView, sw-ui-transcript-view

Fields

entries
TranscriptEntry[]Defaults to []

entries field.

header
stringDefaults to 'Transcript'

header field.

emptyText
stringDefaults to ''

emptyText field.

Attributes

NameFieldInherited From
headerheader
empty-textemptyText

CSS Properties

NameDefaultDescription
--bg-pageBackground of the transcript surface.
--bg-surfaceBackground of agent/system bubbles.
--bg-surface-raisedBackground of user bubbles.
--fg-defaultPrimary text color.
--border-defaultHeader divider and bubble borders.
--type-family-bodyBody font family.
--type-size-smallBody font size.
--transition-fastTransition duration for hover / state changes.

CSS Parts

NameDescription
containerOuter flex column.
headerSticky header row with the download button.
download-btnThe download icon button.
entriesScrollable container for transcript bubbles.
entryOne transcript entry bubble.
entry-userEntry bubble when from the user.
entry-agentEntry bubble when from the agent.
entry-systemEntry bubble when from system events.
entry-partialBubble while still streaming (`state === ‘partial’`).

Events

NameDetailDescription
sw-transcript-download—User clicked the download button.