50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T62b9,"use client"; import type { APIRequest, Participant, PipecatClient, PipecatClientOptions, TransportConnectionParams, TransportState, } from "@pipecat-ai/client-js"; import { RTVIEvent } from "@pipecat-ai/client-js"; import { PipecatClientProvider, useConversationContext, useRTVIClientEvent, } from "@pipecat-ai/client-react"; import { BotIcon, ChevronsLeftRightEllipsisIcon, InfoIcon, MessagesSquareIcon, PanelLeftCloseIcon, PanelRightCloseIcon, XIcon, } from "lucide-react"; import * as React from "react"; import { useDefaultLayout, usePanelRef, type LayoutStorage, } from "react-resizable-panels"; import { BotAudioOutput, unlockBotAudio } from "@/components/pipecat/bot-audio"; import { ConnectButton } from "@/components/pipecat/connect-button"; import { ConsoleBotAudioPanel } from "@/components/pipecat/console/bot-audio-panel"; import { ConsoleBotVideoPanel } from "@/components/pipecat/console/bot-video-panel"; import { SmallWebRTCCodecSetter } from "@/components/pipecat/console/codec-setter"; import { ConsoleConversationPanel } from "@/components/pipecat/console/conversation-panel"; import { ConsoleEventsPanel } from "@/components/pipecat/console/events-panel"; import { ConsoleInfoPanel } from "@/components/pipecat/console/info-panel"; import { ConsoleKeypadToggle } from "@/components/pipecat/console/keypad-toggle"; import { PipecatLogo } from "@/components/pipecat/console/logo"; import { useMinWidth } from "@/components/pipecat/console/panel"; import type { ConversationProps } from "@/components/pipecat/conversation"; import type { TextRenderMode } from "@/components/pipecat/conversation-message"; import type { DTMFKeypadMode } from "@/components/pipecat/dtmf-keypad"; import { Alert, AlertAction, AlertDescription, AlertTitle, } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "@/components/ui/resizable"; import { Spinner } from "@/components/ui/spinner"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { usePipecatApp, type UsePipecatAppReturn, } from "@/hooks/use-pipecat-app"; import { usePipecatEventStream } from "@/hooks/use-pipecat-event-stream"; import { usePipecatMetricValue } from "@/hooks/use-pipecat-metrics"; import type { TransportFactory, TransportOptions, TransportType, } from "@/lib/transports"; import { cn } from "@/lib/utils"; // Connection-URL helpers: resolve the URL the connect button will hit, for // its hover tooltip. function extractUrlFromOptions(options: unknown): string | undefined { if (typeof options !== "object" || options === null) return undefined; const record = options as Record; const requestParams = record.webrtcRequestParams; if (typeof requestParams === "object" && requestParams !== null) { const endpoint = (requestParams as Record).endpoint; if (typeof endpoint === "string") return endpoint; } if (typeof record.webrtcUrl === "string") return record.webrtcUrl; if (typeof record.connectionUrl === "string") return record.connectionUrl; return undefined; } function resolveUrl(url: string): string { if (typeof window === "undefined") return url; try { return new URL(url, window.location.origin).toString(); } catch { return url; } } function getConnectionUrl( startBotParams?: APIRequest, connectParams?: unknown, transportOptions?: unknown, ): string | undefined { const candidate = (typeof startBotParams?.endpoint === "string" && startBotParams.endpoint) || extractUrlFromOptions(connectParams) || extractUrlFromOptions(transportOptions); return candidate ? resolveUrl(candidate) : undefined; } // The metrics tab and the mobile events tab unmount while inactive. These keep // their shared stores collecting, so opening either shows the whole session. function MetricsCollector() { usePipecatMetricValue("ttfb"); return null; } function EventStreamCollector() { usePipecatEventStream(); return null; } /** Inert storage handed to useDefaultLayout when persistence is off. */ const MEMORY_STORAGE: LayoutStorage = { getItem: () => null, setItem: () => {}, } as LayoutStorage; export interface ConsoleProps { // -- Bootstrap (forwarded to usePipecatApp) -------------------------------- /** Transport backing the client (default "smallwebrtc"). Match it to transportFactory; codec and ICE handling depend on it. */ transportType?: TransportType; /** Creates your installed transport. Read once; remount to change. Without it, the loader registered for transportType is used. */ transportFactory?: TransportFactory; /** Constructor options for the selected transport. */ transportOptions?: TransportOptions; /** Overrides merged into the PipecatClient constructor. */ clientOptions?: Partial; /** Connection params, or an APIRequest (with endpoint) for start-and-connect. */ connectParams?: TransportConnectionParams | APIRequest; /** When set, connecting starts a bot via startBot() first. */ startBotParams?: APIRequest; /** Transforms the startBot response before connecting. */ startBotResponseTransformer?: ( response: TransportConnectionParams, ) => TransportConnectionParams | Promise; /** Connect automatically once the client is ready. Default false. */ connectOnMount?: boolean; /** Initialize devices as soon as the client exists. Default true. */ initDevicesOnMount?: boolean; /** Fired once per created client, before device init or connect. */ onClient?: (client: PipecatClient) => void; // -- Header --------------------------------------------------------------- /** Header title (default "Pipecat Console"); hidden on narrow viewports. */ titleText?: string; /** Replaces the Pipecat logo. */ logo?: React.ReactNode; /** Hides the logo entirely. Default false. */ noLogo?: boolean; /** * Extra header content rendered before the connect button — e.g. your * app's theme toggle. Rendered only when provided. */ headerSlot?: React.ReactNode; // -- Region toggles (all default false unless noted) ----------------------- noUserAudio?: boolean; noUserVideo?: boolean; noScreenControl?: boolean; /** Hides the DTMF keypad button. */ noDTMF?: boolean; /** Hides the text input under the transcript. */ noTextInput?: boolean; /** Disables bot audio playback entirely (also hides its volume control). */ noAudioOutput?: boolean; /** Hides the bot audio pane. */ noBotAudio?: boolean; /** Hides the volume control in the bot audio pane header. */ noBotAudioControls?: boolean; /** Hides the bot video pane. Default false. */ noBotVideo?: boolean; noConversation?: boolean; noMetrics?: boolean; /** Hides the events strip. */ noEvents?: boolean; noStatusInfo?: boolean; noSessionInfo?: boolean; // -- Behavior -------------------------------------------------------------- /** How the DTMF keypad dispatches presses (default "buffered"). */ keypadMode?: DTMFKeypadMode; /** Seeds the transcript render mode (default "karaoke"). */ textRenderMode?: TextRenderMode; /** Hides the render-mode select. Default false. */ noTextRenderModeSwitch?: boolean; /** Overrides merged onto the Conversation (labels, renderers, …). */ conversationProps?: Partial; /** Preferred audio codec (smallwebrtc only). */ audioCodec?: string; /** Preferred video codec (smallwebrtc only). */ videoCodec?: string; /** Start with the info pane collapsed. Default false. */ collapseInfoPanel?: boolean; /** Start with the bot media pane collapsed. Default false. */ collapseMediaPanel?: boolean; /** Start with the events strip collapsed. Default false. */ collapseEventsPanel?: boolean; /** * Persist the resizable layout under this key (localStorage). Off when * unset. */ layoutPersistenceKey?: string; // -- Callbacks ------------------------------------------------------------- /** Fired on every transport state change. */ onConnectionStateChange?: (state: TransportState) => void; /** Fired for RTVI server messages. */ onServerMessage?: (data: unknown) => void; /** Hands you the transcript's injectMessage function once available. */ onInjectMessage?: ( inject: ReturnType["injectMessage"], ) => void; className?: string; } /** * Full-page Pipecat debugging console: header with connect flow, resizable * bot-media / conversation+metrics / info panes over an events strip, and a * single-tree mobile layout using bottom tabs. * * The console builds its own client via usePipecatApp and renders its own * PipecatClientProvider — do not nest it inside another provider. Supply * the transport with `transportFactory` or `registerTransport`; load * failures surface in the error banner. */ export function Console(props: ConsoleProps) { const { transportType = "smallwebrtc", transportFactory, transportOptions, clientOptions, connectParams, startBotParams, startBotResponseTransformer, connectOnMount = false, initDevicesOnMount = true, onClient, className, } = props; const app = usePipecatApp({ transportType, transportFactory, transportOptions, clientOptions, connectParams, startBotParams, startBotResponseTransformer, connectOnMount, initDevicesOnMount, onClient, }); if (!app.client) { return (

{app.error ? ( Failed to start the console {app.error} ) : ( )}

); } return ( {!props.noAudioOutput && } {!props.noMetrics && } {!props.noEvents && } {transportType === "smallwebrtc" && ( )} ); } function ConsoleShell({ app, transportOptions, connectParams, startBotParams, titleText = "Pipecat Console", logo, noLogo = false, headerSlot, noUserAudio = false, noUserVideo = false, noScreenControl = false, noDTMF = false, noTextInput = false, noAudioOutput = false, noBotAudio = false, noBotAudioControls = false, noBotVideo = false, noConversation = false, noMetrics = false, noEvents = false, noStatusInfo = false, noSessionInfo = false, keypadMode = "buffered", textRenderMode, noTextRenderModeSwitch = false, conversationProps, collapseInfoPanel = false, collapseMediaPanel = false, collapseEventsPanel = false, layoutPersistenceKey, onConnectionStateChange, onServerMessage, onInjectMessage, className, }: ConsoleProps & { app: UsePipecatAppReturn }) { // Three resizable columns need about 1024px; narrower screens get tabs. const isDesktop = useMinWidth(1024); // -- Session facts collected from RTVI events ------------------------------ const [participantId, setParticipantId] = React.useState(); const [sessionId, setSessionId] = React.useState(); useRTVIClientEvent( RTVIEvent.ParticipantConnected, React.useCallback((participant: Participant) => { if (participant.local) setParticipantId(participant.id); }, []), ); // Belt and braces for transports that never fire ParticipantConnected. useRTVIClientEvent( RTVIEvent.TrackStarted, React.useCallback((_track: MediaStreamTrack, participant?: Participant) => { if (participant?.local && participant.id) { setParticipantId(participant.id); } }, []), ); useRTVIClientEvent( RTVIEvent.BotStarted, React.useCallback((response: unknown) => { const id = (response as { sessionId?: string } | null)?.sessionId; if (typeof id === "string") setSessionId(id); }, []), ); const onServerMessageRef = React.useRef(onServerMessage); onServerMessageRef.current = onServerMessage; useRTVIClientEvent( RTVIEvent.ServerMessage, React.useCallback((data: unknown) => { onServerMessageRef.current?.(data); }, []), ); const onConnectionStateChangeRef = React.useRef(onConnectionStateChange); onConnectionStateChangeRef.current = onConnectionStateChange; useRTVIClientEvent( RTVIEvent.TransportStateChanged, React.useCallback((state: TransportState) => { onConnectionStateChangeRef.current?.(state); }, []), ); const { injectMessage } = useConversationContext(); const onInjectMessageRef = React.useRef(onInjectMessage); onInjectMessageRef.current = onInjectMessage; React.useEffect(() => { onInjectMessageRef.current?.(injectMessage); }, [injectMessage]); // -- Region math ----------------------------------------------------------- const noBotArea = noBotAudio && noBotVideo; const noConversationPanel = noConversation && noMetrics; const noDevices = noUserAudio && noUserVideo && noScreenControl; const noInfoPanel = noStatusInfo && noDevices && noSessionInfo; // react-resizable-panels v4 reads bare numbers as pixels, so every size // below is a percentage string. Conversation takes whatever the side panes // leave so the horizontal defaults always sum to 100. const mediaDefaultSize = noBotArea ? 0 : collapseMediaPanel ? 8 : 26; const infoDefaultSize = noInfoPanel ? 0 : collapseInfoPanel ? 4 : 27; const conversationDefaultSize = 100 - mediaDefaultSize - infoDefaultSize; // -- Resizable layout state ------------------------------------------------ const persist = Boolean(layoutPersistenceKey); const storage = persist ? undefined : MEMORY_STORAGE; const verticalLayout = useDefaultLayout({ id: `${layoutPersistenceKey ?? "pipecat-console"}:v`, storage, }); const horizontalLayout = useDefaultLayout({ id: `${layoutPersistenceKey ?? "pipecat-console"}:h`, storage, }); const mediaPanelRef = usePanelRef(); const infoPanelRef = usePanelRef(); const eventsPanelRef = usePanelRef(); const [isMediaCollapsed, setIsMediaCollapsed] = React.useState(collapseMediaPanel); const [isInfoCollapsed, setIsInfoCollapsed] = React.useState(collapseInfoPanel); const [isEventsCollapsed, setIsEventsCollapsed] = React.useState(collapseEventsPanel); const connectionUrl = getConnectionUrl( startBotParams, connectParams, transportOptions, ); // -- Shared panel elements (instantiated once per render, one branch) ------ const mediaStack = (collapsed: boolean) => noBotArea ? null : (

{!noBotAudio && ( )} {!noBotVideo && ( )}

); const conversationPanel = noConversationPanel ? null : ( ); const infoPanel = (collapsed: boolean) => noInfoPanel ? null : ( ); const eventsPanel = (collapsed: boolean) => noEvents ? null : ( ); const toggleInfoPanel = () => { const handle = infoPanelRef.current; if (!handle) return; if (handle.isCollapsed()) handle.expand(); else handle.collapse(); }; const connectButton = ( { unlockBotAudio(); void app.connect(); }} onDisconnect={app.disconnect} /> ); return (

{noLogo ? ( ) : ( (logo ?? ) )}

{titleText}

{/* Slot content may shrink; the console's own controls never do. */} {headerSlot && (

{headerSlot}

)} {!noDTMF && } {!noInfoPanel && ( )} {connectionUrl ? ( }> {connectButton} {connectionUrl} ) : ( connectButton )}

{app.error && ( Session error {app.error} )}

{isDesktop ? ( {!noBotArea && ( setIsMediaCollapsed( mediaPanelRef.current?.isCollapsed() ?? false, ) } > {/* p-px keeps each card's ring inside the panel's scroll box, which clips it. */}

{mediaStack(isMediaCollapsed)}

)} {!noBotArea && (!noConversationPanel || !noInfoPanel) && ( )} {!noConversationPanel && (

{conversationPanel}

)} {!noConversationPanel && !noInfoPanel && ( )} {!noInfoPanel && ( setIsInfoCollapsed( infoPanelRef.current?.isCollapsed() ?? false, ) } >

{infoPanel(isInfoCollapsed)}

)} {!noEvents && } {!noEvents && ( setIsEventsCollapsed( eventsPanelRef.current?.isCollapsed() ?? false, ) } >

{eventsPanel(isEventsCollapsed)}

)} ) : ( {!noBotArea && ( {mediaStack(false)} )} {!noConversationPanel && ( {conversationPanel} )} {!noInfoPanel && ( {infoPanel(false)} )} {!noEvents && ( {eventsPanel(false)} )} {!noConversationPanel && ( )} {!noBotArea && ( )} {!noInfoPanel && ( )} {!noEvents && ( )} )}

); } 52:T91b,"use client"; import { usePipecatClientMediaTrack } from "@pipecat-ai/client-react"; import { MicOffIcon } from "lucide-react"; import { AudioVisualizerBar } from "@/components/pipecat/audio-visualizer-bar"; import { BotAudioControl } from "@/components/pipecat/bot-audio"; import { ConsolePanel, ConsolePanelActions, ConsolePanelContent, ConsolePanelHeader, ConsolePanelTitle, } from "@/components/pipecat/console/panel"; import { cn } from "@/lib/utils"; export interface ConsoleBotAudioPanelProps { /** Compact rendering for a collapsed pane: no header, tighter bars. */ collapsed?: boolean; /** Hides the volume control in the header. Default false. */ noControls?: boolean; className?: string; } /** * Console pane visualizing the bot's audio track, with a volume control in * the header. Shows a quiet placeholder until a bot audio track exists. * Must be rendered inside a PipecatClientProvider. */ export function ConsoleBotAudioPanel({ collapsed = false, noControls = false, className, }: ConsoleBotAudioPanelProps) { const track = usePipecatClientMediaTrack("audio", "bot"); return ( {!collapsed && ( Bot audio {!noControls && ( )} )} {track ? ( ) : (

{!collapsed && No audio}

)} ); } 53:T675,"use client"; import { PipecatClientVideo, usePipecatClientMediaTrack, } from "@pipecat-ai/client-react"; import { VideoOffIcon } from "lucide-react"; import { ConsolePanel, ConsolePanelContent, ConsolePanelHeader, ConsolePanelTitle, } from "@/components/pipecat/console/panel"; export interface ConsoleBotVideoPanelProps { /** Compact rendering for a collapsed pane: no header. */ collapsed?: boolean; className?: string; } /** * Console pane rendering the bot's video track, with a quiet placeholder * until one exists. Must be rendered inside a PipecatClientProvider. */ export function ConsoleBotVideoPanel({ collapsed = false, className, }: ConsoleBotVideoPanelProps) { const track = usePipecatClientMediaTrack("video", "bot"); return ( {!collapsed && ( Bot video )} {track ? ( ) : (

{!collapsed && No video}

)} ); } 54:T592,"use client"; import { usePipecatClient } from "@pipecat-ai/client-react"; import { useEffect } from "react"; export interface SmallWebRTCCodecSetterProps { /** Preferred audio codec, e.g. "opus". Default "default" (no override). */ audioCodec?: string; /** Preferred video codec, e.g. "VP8". Default "default" (no override). */ videoCodec?: string; } /** * Headless helper that applies audio/video codec preferences to a * SmallWebRTC transport. Renders nothing; transports without codec setters * are left untouched, so it works whether the transport came from a factory * or a registered loader. Must be rendered inside a PipecatClientProvider. */ export function SmallWebRTCCodecSetter({ audioCodec = "default", videoCodec = "default", }: SmallWebRTCCodecSetterProps) { const client = usePipecatClient(); useEffect(() => { // Structural check: the transport package's types can't be named here // (transports are optional installs). const transport = client?.transport as | { setAudioCodec?: (codec: string) => void; setVideoCodec?: (codec: string) => void; } | undefined; if (typeof transport?.setAudioCodec === "function") { transport.setAudioCodec(audioCodec); } if (typeof transport?.setVideoCodec === "function") { transport.setVideoCodec(videoCodec); } }, [audioCodec, client, videoCodec]); return null; } 55:T1355,"use client"; import * as React from "react"; import { ConsolePanel, ConsolePanelActions, ConsolePanelContent, } from "@/components/pipecat/console/panel"; import { Conversation, type ConversationProps, } from "@/components/pipecat/conversation"; import type { TextRenderMode } from "@/components/pipecat/conversation-message"; import { Metrics } from "@/components/pipecat/metrics/metrics"; import { TextInput } from "@/components/pipecat/text-input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; const RENDER_MODES: Array<{ value: TextRenderMode; label: string }> = [ { value: "karaoke", label: "Karaoke" }, { value: "captions", label: "Captions" }, { value: "instant", label: "Instant" }, ]; export interface ConsoleConversationPanelProps { /** Hides the conversation tab. Default false. */ noConversation?: boolean; /** Hides the metrics tab. Default false. */ noMetrics?: boolean; /** Hides the text input under the transcript. Default false. */ noTextInput?: boolean; /** Hides the render-mode select in the header. Default false. */ noTextRenderModeSwitch?: boolean; /** Seeds (and can push) the transcript render mode. Default "karaoke". */ textRenderMode?: TextRenderMode; /** Fired when the user picks a render mode in the header. */ onTextRenderModeChange?: (mode: TextRenderMode) => void; /** Overrides merged onto the Conversation (labels, renderers, …). */ conversationProps?: Partial; className?: string; } /** * Console center pane: the live transcript (with text input) and the * metrics dashboard as tabs. The conversation tab stays mounted so scroll * position survives tab switches; metrics re-reads its shared store. Must * be rendered inside a PipecatClientProvider. */ export function ConsoleConversationPanel({ noConversation = false, noMetrics = false, noTextInput = false, noTextRenderModeSwitch = false, textRenderMode, onTextRenderModeChange, conversationProps, className, }: ConsoleConversationPanelProps) { // Local selection seeded from the prop; a defined prop change pushes it. const [renderMode, setRenderMode] = React.useState( textRenderMode ?? "karaoke", ); React.useEffect(() => { if (textRenderMode !== undefined) setRenderMode(textRenderMode); }, [textRenderMode]); if (noConversation && noMetrics) return null; const handleRenderMode = (mode: TextRenderMode) => { setRenderMode(mode); onTextRenderModeChange?.(mode); }; return (

{!noConversation && ( Conversation )} {!noMetrics && Metrics} {!noConversation && !noTextRenderModeSwitch && ( )}

{!noConversation && ( {!noTextInput && (

)} )} {!noMetrics && ( )} ); } 56:T1df1,"use client"; import { RTVIEvent, type BotOutputData } from "@pipecat-ai/client-js"; import { PauseIcon, PlayIcon, SearchIcon, Trash2Icon } from "lucide-react"; import * as React from "react"; import { ConsolePanel, ConsolePanelActions, ConsolePanelContent, ConsolePanelHeader, ConsolePanelTitle, } from "@/components/pipecat/console/panel"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { usePipecatEventStream, type PipecatEventLog, } from "@/hooks/use-pipecat-event-stream"; import { cn } from "@/lib/utils"; const TIME_FORMAT = new Intl.DateTimeFormat(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit", fractionalSecondDigits: 3, }); function summarizeBotOutput(data: Partial): string { const spoken = data.will_be_spoken === false ? "not spoken" : data.spoken_status !== undefined ? `spoken: ${data.spoken_status}` : data.spoken !== undefined ? `spoken: ${data.spoken}` : null; const details = [ data.aggregated_by, data.segment_id !== undefined ? `#${data.segment_id}` : null, spoken, ].filter(Boolean); return `(${details.join(", ")}): ${data.text ?? ""}`; } function summarize(event: PipecatEventLog): string { const { data } = event; if (data === undefined) return ""; if (event.type === RTVIEvent.BotOutput && typeof data === "object") { return summarizeBotOutput(data as Partial); } try { const json = JSON.stringify(data); return json.length > 120 ? `${json.slice(0, 120)}…` : json; } catch { return String(data); } } /** Chatter covered by botOutput rows and the metrics panel. */ const HIDDEN_EVENTS: string[] = [ RTVIEvent.Metrics, RTVIEvent.BotTranscript, RTVIEvent.BotLlmStarted, RTVIEvent.BotLlmText, RTVIEvent.BotLlmStopped, RTVIEvent.BotTtsStarted, RTVIEvent.BotTtsText, RTVIEvent.BotTtsStopped, ]; /** * RTVI 2.0.0+ re-sends a segment's botOutput on every spoken progress update * (about once per TTS word). Keep one row per spoken status change, so an * interrupted segment shows as new/in-progress without a completed row. Keys * on segment_id, never text: separate responses can share wording. */ function dropRepeatedBotOutput( events: readonly PipecatEventLog[], ): PipecatEventLog[] { const statuses = new Map(); return events.filter((event) => { if (event.type !== RTVIEvent.BotOutput) return true; const data = event.data as Partial | undefined; if (data?.segment_id === undefined || data.spoken_status === undefined) { return true; } if (statuses.get(data.segment_id) === data.spoken_status) return false; statuses.set(data.segment_id, data.spoken_status); return true; }); } function EventRow({ event }: { event: PipecatEventLog }) { const [expanded, setExpanded] = React.useState(false); const summary = summarize(event); return (

{expanded && event.data !== undefined && (

          {JSON.stringify(event.data, null, 2)}

)}

); } export interface ConsoleEventsPanelProps { /** Compact rendering for a collapsed pane: header strip only. */ collapsed?: boolean; className?: string; } /** * Live RTVI event log over the shared use-pipecat-event-stream store: * filter-as-you-type, pause/resume, clear, click-to-expand payloads, and * scroll pinning that follows the tail until you scroll away. Metrics and bot * LLM/TTS events are hidden, and botOutput shows once per spoken status. * Capture is shared, so a collapsed panel misses nothing. Must be rendered * inside a PipecatClientProvider. */ export function ConsoleEventsPanel({ collapsed = false, className, }: ConsoleEventsPanelProps) { const { events, paused, setPaused, clear } = usePipecatEventStream({ ignoreEvents: HIDDEN_EVENTS, }); const [filter, setFilter] = React.useState(""); const filtered = React.useMemo(() => { const needle = filter.trim().toLowerCase(); const shown = dropRepeatedBotOutput(events); if (!needle) return shown; return shown.filter((event) => event.type.toLowerCase().includes(needle)); }, [events, filter]); // Scroll pinning: stick to the tail unless the user scrolled away. const scrollRef = React.useRef(null); const pinnedRef = React.useRef(true); const handleScroll = React.useCallback(() => { const el = scrollRef.current; if (!el) return; pinnedRef.current = Math.ceil(el.scrollHeight - el.scrollTop) <= Math.ceil(el.clientHeight) + 4; }, []); React.useEffect(() => { const el = scrollRef.current; if (el && pinnedRef.current) { el.scrollTo({ top: el.scrollHeight, behavior: "instant" }); } }, [filtered]); return ( Events {!collapsed && (

setFilter(event.target.value)} placeholder="Filter events" aria-label="Filter events" className="h-7 w-40 pl-7 text-xs" />

)} {!collapsed && ( {filtered.length === 0 ? (

{!filter.trim() ? "Events appear once a session is live." : "No events match the filter."}

) : ( filtered.map((event) => ) )} )} ); } 57:T13e0,"use client"; import { usePipecatClientCamControl } from "@pipecat-ai/client-react"; import { ChevronsLeftRightEllipsisIcon, InfoIcon, MicIcon } from "lucide-react"; import * as React from "react"; import { ClientStatus } from "@/components/pipecat/client-status"; import { ConsolePanel, ConsolePanelContent, ConsolePanelTitle, } from "@/components/pipecat/console/panel"; import { SessionInfo } from "@/components/pipecat/session-info"; import { UserAudioControl } from "@/components/pipecat/user-audio-control"; import { UserScreenControl } from "@/components/pipecat/user-screen-control"; import { UserVideoControl } from "@/components/pipecat/user-video-control"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; export interface ConsoleInfoPanelProps { /** Hides the connection status section. Default false. */ noStatusInfo?: boolean; /** Hides the microphone control. Default false. */ noUserAudio?: boolean; /** Hides the camera control. Default false. */ noUserVideo?: boolean; /** Hides the screen-share control. Default false. */ noScreenControl?: boolean; /** Hides the session info section. Default false. */ noSessionInfo?: boolean; /** Session id collected by the console shell (BotStarted). */ sessionId?: string; /** Local participant id collected by the console shell. */ participantId?: string; /** Icon-strip rendering for a collapsed pane; sections open in popovers. */ collapsed?: boolean; className?: string; } function CollapsedSection({ label, icon, children, }: { label: string; icon: React.ReactNode; children: React.ReactNode; }) { return ( {icon} } /> {children} ); } /** * Console info pane: connection status, local device controls, and session * details. Renders null when every section is disabled; the collapsed * variant is a vertical icon strip whose sections open in popovers. Must be * rendered inside a PipecatClientProvider (with a TooltipProvider ancestor * for the session copy buttons). */ export function ConsoleInfoPanel({ noStatusInfo = false, noUserAudio = false, noUserVideo = false, noScreenControl = false, noSessionInfo = false, sessionId, participantId, collapsed = false, className, }: ConsoleInfoPanelProps) { // Most agents never use the camera, so its preview tile only takes space // once the camera is on. const { isCamEnabled } = usePipecatClientCamControl(); const noDevices = noUserAudio && noUserVideo && noScreenControl; if (noStatusInfo && noDevices && noSessionInfo) return null; const devices = (

{!noUserAudio && } {!noUserVideo && ( )} {!noScreenControl && }

); if (collapsed) { return (

{!noStatusInfo && ( } > )} {!noDevices && ( }> {devices} )} {!noSessionInfo && ( }> )}

); } return ( {!noStatusInfo && (

Status

)} {!noDevices && (

Devices {devices}

)} {!noSessionInfo && (

Session

)} ); } 58:T87e,"use client"; import { PhoneIcon } from "lucide-react"; import * as React from "react"; import { useMinWidth } from "@/components/pipecat/console/panel"; import { DTMFKeypad, type DTMFKeypadMode, } from "@/components/pipecat/dtmf-keypad"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; export interface ConsoleKeypadToggleProps { /** How the keypad dispatches presses (default "buffered"). */ mode?: DTMFKeypadMode; /** Overrides merged onto the keypad (wins over defaults). */ keypadProps?: Partial>; className?: string; } /** * Header button opening the DTMF keypad — a popover on desktop, a drawer on * mobile. One instantiation: the surface switches on the viewport instead * of rendering both. Must be rendered inside a PipecatClientProvider. */ export function ConsoleKeypadToggle({ mode = "buffered", keypadProps, className, }: ConsoleKeypadToggleProps) { const isDesktop = useMinWidth(640); const trigger = ( ); if (isDesktop) { return ( ); } return ( Keypad Send DTMF tones to the connected bot.

); } 59:T79c,"use client"; const ASPECT_RATIO = 45 / 26; export interface PipecatLogoProps { /** Accessible label for the logo (default "Pipecat"). */ alt?: string; /** Height in pixels; width derives from the aspect ratio (default 24). */ height?: number; className?: string; } /** * Inline Pipecat wordmark, drawn in currentColor so it follows the * surrounding text color. */ export function PipecatLogo({ alt = "Pipecat", height = 24, className, }: PipecatLogoProps) { const width = Math.round(height * ASPECT_RATIO); return ( ); } 5a:Tac1,"use client"; import * as React from "react"; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; /** * Console-shared viewport check: true at or above the given width. Single * source for the desktop/mobile layout switch so panels are instantiated * once, in whichever tree renders. */ export function useMinWidth(px: number): boolean { const subscribe = React.useCallback( (onChange: () => void) => { const query = window.matchMedia(`(min-width: ${px}px)`); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }, [px], ); return React.useSyncExternalStore( subscribe, () => window.matchMedia(`(min-width: ${px}px)`).matches, () => false, ); } /** * Panel chrome for the console, styled over the stock Card so consumer Card * theming (tokens, radius, ring) flows straight through. Density is * container-driven: compact padding by default, relaxing at wider panel * widths — the same markup serves expanded panes, collapsed strips, and * mobile tabs. */ export function ConsolePanel({ className, ...props }: React.ComponentProps) { return ( ); } export function ConsolePanelHeader({ className, ...props }: React.ComponentProps) { return ( ); } export function ConsolePanelTitle({ className, ...props }: React.ComponentProps) { return ( ); } export function ConsolePanelActions({ className, ...props }: React.ComponentProps) { return ( ); } export function ConsolePanelContent({ className, ...props }: React.ComponentProps) { return ( ); } 4f:["$","$L50",null,{"files":[{"path":"src/blocks/console/console.tsx","content":"$51","type":"registry:block","target":"components/pipecat/console/console.tsx"},{"path":"src/blocks/console/bot-audio-panel.tsx","content":"$52","type":"registry:component","target":"components/pipecat/console/bot-audio-panel.tsx"},{"path":"src/blocks/console/bot-video-panel.tsx","content":"$53","type":"registry:component","target":"components/pipecat/console/bot-video-panel.tsx"},{"path":"src/blocks/console/codec-setter.tsx","content":"$54","type":"registry:component","target":"components/pipecat/console/codec-setter.tsx"},{"path":"src/blocks/console/conversation-panel.tsx","content":"$55","type":"registry:component","target":"components/pipecat/console/conversation-panel.tsx"},{"path":"src/blocks/console/events-panel.tsx","content":"$56","type":"registry:component","target":"components/pipecat/console/events-panel.tsx"},{"path":"src/blocks/console/info-panel.tsx","content":"$57","type":"registry:component","target":"components/pipecat/console/info-panel.tsx"},{"path":"src/blocks/console/keypad-toggle.tsx","content":"$58","type":"registry:component","target":"components/pipecat/console/keypad-toggle.tsx"},{"path":"src/blocks/console/logo.tsx","content":"$59","type":"registry:component","target":"components/pipecat/console/logo.tsx"},{"path":"src/blocks/console/panel.tsx","content":"$5a","type":"registry:component","target":"components/pipecat/console/panel.tsx"}],"className":"h-[70svh] min-h-80"}]