Info Panel

The InfoPanel component provides a comprehensive information panel that displays connection status, device controls, and session information. It combines multiple components into a single organized panel.

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

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

Usage

Hide Specific Sections

Hide sections you don't need.

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

<div className="h-96 w-full">
  <InfoPanel 
    noSessionInfo={true}
    noUserVideo={true}
  />
</div>

Panel Sections

The panel is organized into three main sections:

Status Section

• Displays ClientStatus component
• Shows client and agent connection states
• Can be hidden with noStatusInfo

Devices Section

• Displays device controls:
  • UserAudioControl (can be hidden with noUserAudio)
  • UserVideoControl (can be hidden with noUserVideo)
  • UserScreenControl (can be hidden with noScreenControl)
• Can hide entire section by hiding all device controls

Session Section

• Displays SessionInfo component
• Shows transport type, session ID, participant ID, and RTVI version
• Can be hidden with noSessionInfo

Conditional Rendering

The panel automatically hides itself if all sections are disabled (noInfoPanel). Individual sections can be hidden independently.

Integration

The InfoPanel component uses:

• ClientStatus for status display
• SessionInfo for session information
• UserAudioControl, UserVideoControl, UserScreenControl for device controls
• usePipecatClientCamControl to check camera state
• Panel component for consistent styling

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