Events Panel

The EventsPanel component displays a real-time log of RTVI events from the Pipecat Client SDK. It shows connection events, bot events, track events, and more, with filtering capabilities.

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

<div className="h-96 w-full">
  <EventsPanel />
</div>

Usage

Collapsed Mode

Display the panel in collapsed mode.

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

<div className="h-96 w-full">
  <EventsPanel collapsed={true} />
</div>

Event Types

The panel captures and displays the following event types:

• Transport State: Changes in connection state
• BotConnected: Bot connects to the session
• BotDisconnected: Bot disconnects from the session
• BotReady: Bot is ready with version and metadata
• BotStartedSpeaking: Bot begins speaking
• BotStoppedSpeaking: Bot stops speaking
• Connected: Client connects to session
• Disconnected: Client disconnects from session
• Error: Error events with error messages
• ParticipantConnected: Participant joins the session
• ParticipantLeft: Participant leaves the session
• TrackStarted: Media track starts
• TrackStopped: Media track stops
• ScreenTrackStarted: Screen share track starts
• ScreenTrackStopped: Screen share track stops
• UserStartedSpeaking: User begins speaking
• UserStoppedSpeaking: User stops speaking
• ServerMessage: Messages from the server

Filtering

The panel includes a filter input that searches through:

• Event names (case-insensitive)
• Event messages (case-insensitive)

Only events matching the filter are displayed.

Auto-scroll Behavior

The panel automatically scrolls to the bottom when new events arrive, but only if the user is already at the bottom. This prevents interrupting users who are reading previous events.

Display Format

Each event is displayed in a grid with three columns:

1. Time: Timestamp when the event occurred
2. Event: Event name/type
3. Message: Event details/message

Integration

The EventsPanel component uses:

• usePipecatClient to access the client instance
• usePipecatClientTransportState to track transport state changes
• useRTVIClientEvent hooks to listen for various RTVI events
• Panel component for consistent styling

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