4b:I[707087,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:Tffe,"use client"; import type { BotOutputData } from "@pipecat-ai/client-js"; import { RTVIEvent } from "@pipecat-ai/client-js"; import { useConversationContext, usePipecatClientTransportState, useRTVIClientEvent, } from "@pipecat-ai/client-react"; import { cva, type VariantProps } from "class-variance-authority"; import { useState } from "react"; import { cn } from "@/lib/utils"; const transcriptOverlayVariants = cva( "mx-auto items-center justify-end text-center *:bg-foreground *:text-background *:mx-auto *:inline *:box-decoration-clone *:text-balance", { variants: { size: { sm: "*:rounded-md *:px-2 *:py-1 *:text-xs *:leading-4 *:font-medium", default: "*:rounded-lg *:px-3 *:py-1.5 *:text-sm *:leading-6 *:font-medium", lg: "*:rounded-xl *:px-4 *:py-2 *:text-base *:leading-7 *:font-medium", }, }, defaultVariants: { size: "default" }, }, ); export interface TranscriptOverlayViewProps extends VariantProps< typeof transcriptOverlayVariants > { /** Words to display as individually animated spans. */ words: string[]; /** Whether the speech turn has ended (triggers fade-out). */ turnEnd?: boolean; /** Fade-in duration per word, ms. */ fadeInDuration?: number; /** Fade-out duration for the whole overlay, ms. */ fadeOutDuration?: number; className?: string; } /** * Caption-style overlay rendering words with per-word fade-in and a * fade-out when the turn ends. Line-wrapped background blocks. */ export function TranscriptOverlayView({ words, turnEnd = false, size, fadeInDuration = 300, fadeOutDuration = 1000, className, }: TranscriptOverlayViewProps) { const containerStyle = { "--fade-in-duration": `${fadeInDuration}ms`, ...(turnEnd && { animationDuration: `${fadeOutDuration}ms` }), } as React.CSSProperties; return (

{words.map((word, index) => ( {word + (index < words.length - 1 ? " " : "")} ))}

); } export interface TranscriptOverlayProps extends Omit< TranscriptOverlayViewProps, "words" | "turnEnd" > { /** "remote" shows bot speech; "local" is reserved for future use. */ participant?: "local" | "remote"; } /** * Live caption overlay for bot speech, driven by BotOutput events * (requires RTVI 1.1.0+). Renders nothing until the client is ready and * speech arrives. Must be rendered inside a PipecatClientProvider. */ export function TranscriptOverlay({ participant = "remote", ...props }: TranscriptOverlayProps) { const [caption, setCaption] = useState({ words: [] as string[], turnEnd: false, }); const { botOutputSupported } = useConversationContext(); const transportState = usePipecatClientTransportState(); useRTVIClientEvent(RTVIEvent.TransportStateChanged, (state) => { if (state !== "ready") setCaption({ words: [], turnEnd: false }); }); useRTVIClientEvent(RTVIEvent.BotOutput, (data: BotOutputData) => { if ( participant === "local" || !botOutputSupported || transportState !== "ready" ) { return; } if (data.spoken === true && data.text) { setCaption((prev) => ({ words: [...(prev.turnEnd ? [] : prev.words), data.text], turnEnd: false, })); } }); useRTVIClientEvent(RTVIEvent.BotStoppedSpeaking, () => { if (participant === "local") return; setCaption((prev) => ({ ...prev, turnEnd: true })); }); if ( participant === "local" || !botOutputSupported || caption.words.length === 0 || transportState !== "ready" ) { return null; } return ; } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@pipecat-ai/client-js@^1.13.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@pipecat-ai/client-js@^1.13.1"}]]}]}],["$","li","@pipecat-ai/client-react@^1.8.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@pipecat-ai/client-react@^1.8.2"}]]}]}],["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","tw-animate-css@^1.4.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tw-animate-css","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tw-animate-css@^1.4.0"}]]}]}]]}],["$","$L4b",null,{"namespace":"@pipecat","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/components/transcript-overlay.tsx","content":"$4d","type":"registry:component","target":"components/pipecat/transcript-overlay.tsx"}],"className":"h-[70svh] min-h-80"}]]}]