Session Info

Component for displaying session information including transport type, session ID, and participant ID

The SessionInfo component displays session-related information in a structured format, including transport type, session ID, participant ID, and RTVI version. It automatically integrates with the Pipecat Client SDK to fetch this information.

import { SessionInfo } from "@pipecat-ai/voice-ui-kit";

<SessionInfo />

Prop	Type	Default
`noTransportType?`	`boolean`	`false`
`noSessionId?`	`boolean`	`false`
`noParticipantId?`	`boolean`	`false`
`noRTVIVersion?`	`boolean`	`false`
`sessionId?`	`string`	`undefined`
`participantId?`	`string`	`undefined`

Usage

Hide Specific Fields

Hide fields you don't need or override IDs with custom values.

import { SessionInfo } from "@pipecat-ai/voice-ui-kit";

<SessionInfo 
  noRTVIVersion={true}
  noTransportType={true}
  sessionId="custom-session-123"
  participantId="custom-participant-456"
/>

Transport Types

The component automatically detects and displays:

Daily: Shows "Daily (v[version])" when using Daily transport, where [version] is the Daily.js version number
Small WebRTC: Shows "Small WebRTC" when using Small WebRTC transport
Unknown: Shows "Unknown" if transport type cannot be determined

Copy Functionality

Session ID and Participant ID fields use the CopyText component, allowing users to easily copy these values to their clipboard.

Version Information

The component displays two separate RTVI version fields:

RTVI Client: The version of the RTVI client SDK being used (from client.version)
RTVI Server: The version of the RTVI server (from BotReady event)

Integration

The SessionInfo component uses:

usePipecatClient hook to access the Pipecat client instance
useRTVIClientEvent to listen for BotReady and Disconnected events
DataList component to display the information
CopyText component for copyable IDs
TextDashBlankslate component for empty values

It must be used within a PipecatClientProvider context to function properly.