4f: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/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"],"RegistryDependencies"] 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:T13e1,'use client'; import { useCallback, useEffect, useRef, useState, type ComponentProps } from 'react'; import { useAgent, useSession } from '@livekit/components-react'; import { type TokenSourceConfigurable, type TokenSourceFixed } from 'livekit-client'; import { type AgentControlBarControls } from '@/components/agents-ui/agent-control-bar'; import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider'; import type { AudioVisualizerConfig } from '@/components/agents-ui/blocks/agent-session-view-01/components/agent-session-block'; import { PopupView } from './popup-view'; import { Trigger } from './trigger'; const DEFAULT_CONTROLS: AgentControlBarControls = { leave: false, microphone: true, chat: false, camera: false, screenShare: false, }; export interface AgentPopupError { title: string; description: string; } function TriggerProvider({ ...props }: ComponentProps) { const { isConnected } = useAgent(); return ; } export interface AgentPopupProps { /** Logo shown in the trigger bubble in place of the default agent icon. */ logo?: string; /** @default 'Agent' */ agentName?: string; /** Where to fetch a LiveKit session token from. See `useSession`'s `tokenSource` argument. */ tokenSource: TokenSourceConfigurable | TokenSourceFixed; /** * Theme mode forwarded to the aura visualizer (`audioVisualizer.type === 'aura'`) so the * shader's blend mode adapts to the theme mode. Ignored by other visualizer types. */ themeMode?: 'dark' | 'light'; /** * Message shown above the controls before the first chat message is sent. * * @default 'Agent is listening, ask it a question' */ preConnectMessage?: string; /** * An object with the following keys: leave, microphone, screenShare, camera, chat. Each key maps * to a boolean value that determines whether the control is displayed. * * @default { leave: false, microphone: true, chat: false, camera: false, screenShare: false } */ controls?: AgentControlBarControls; /** Brand color used for the trigger bubble's idle ring/disc and fallback icon contrast. */ triggerColor?: `#${string}`; /** * Shows a pre-connect buffer state with a shimmer message before messages appear. * * @default true */ isPreConnectBufferEnabled?: boolean; /** * Configures the visualizer style rendered in the main tile area. * * @default { type: 'bar', size: 'lg' } */ audioVisualizer?: AudioVisualizerConfig; } export function AgentPopup_01({ logo, themeMode, tokenSource, triggerColor, agentName = 'Agent', controls = DEFAULT_CONTROLS, isPreConnectBufferEnabled, preConnectMessage, audioVisualizer = { type: 'bar', size: 'lg', }, }: AgentPopupProps) { const session = useSession(tokenSource); const [popupOpen, setPopupOpen] = useState(false); const [error, setError] = useState(); // Drive the session lifecycle off the popup-open state. Opening the popup // connects; closing it (or unmounting) tears the room down so we don't // leave a mic-hot connection while the bubble sits idle. // // useSession returns a fresh object on every connectionState change (the // discriminated union swaps shape), so we can't depend on `session` // directly - that would tear down + restart the room every time it // transitioned through connecting -> connected. We pin the start/end // calls via a ref instead, and only react to popupOpen. const sessionRef = useRef(session); sessionRef.current = session; useEffect(() => { if (!popupOpen) return; let cancelled = false; sessionRef.current.start().catch((cause) => { if (cancelled) return; console.error('agent-popup-01: session.start failed:', cause); setError({ title: 'Could not connect to the agent', description: cause instanceof Error ? cause.message : String(cause), }); }); return () => { cancelled = true; void sessionRef.current.end(); }; }, [popupOpen]); const handleToggle = useCallback(() => { setPopupOpen((open) => { const next = !open; if (!next) setError(undefined); return next; }); }, []); const finalControls = { ...DEFAULT_CONTROLS, ...controls, }; return ( {popupOpen && ( )} ); } 52:Tf93,'use client'; import { useEffect, useState, type ComponentProps } from 'react'; import { BotIcon, PhoneOffIcon, XIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import type { AgentPopupError } from './agent-popup-block'; export interface TriggerProps extends ComponentProps<'button'> { /** Logo image shown in place of the default bot icon. */ logo?: string; /** Brand color used for the idle ring/disc and, via contrast, the fallback icon color. */ color?: string; /** Used to build the default `aria-label` (e.g. "Rex agent") and image `alt` text. */ agentName?: string; /** Whether the popup is currently open. Drives the connecting/active/error visual states. */ isPressed?: boolean; /** Whether the agent session is connected. Only relevant while `isPressed` is true. */ isConnected?: boolean; /** Session error, if any. Only relevant while `isPressed` is true. */ error?: AgentPopupError; /** Called when the trigger is clicked. */ onToggle: () => void; } export function Trigger({ logo, color, error, agentName, isPressed = false, isConnected = false, onToggle, className, ...props }: TriggerProps) { const altText = agentName ? `${agentName} agent` : 'Open assistant'; const isError = isPressed && error !== undefined; const isActive = isPressed && error === undefined && isConnected; const isConnecting = isPressed && !isError && !isActive; const isDestructive = isError || isActive; const [logoFailed, setLogoFailed] = useState(false); useEffect(() => { setLogoFailed(false); }, [logo]); const showLogo = Boolean(logo) && !logoFailed; return ( ); } 53:Td5f,'use client'; import { useEffect, useState } from 'react'; import { AnimatePresence, motion } from 'motion/react'; import { StartAudioButton } from '@/components/agents-ui/start-audio-button'; import { type AgentControlBarControls } from '@/components/agents-ui/agent-control-bar'; import { AgentSessionView_01 } from '@/components/agents-ui/blocks/agent-session-view-01/components/agent-session-block'; import type { AudioVisualizerConfig } from '@/components/agents-ui/blocks/agent-session-view-01/components/agent-session-block'; import { cn } from '@/lib/utils'; import type { AgentPopupError } from './agent-popup-block'; interface ErrorOverlayProps { logo?: string; agentName?: string; error?: AgentPopupError; } function ErrorOverlay({ logo, agentName, error }: ErrorOverlayProps) { const [logoFailed, setLogoFailed] = useState(false); useEffect(() => { setLogoFailed(false); }, [logo]); const showLogo = Boolean(logo) && !logoFailed; return error ? ( {showLogo ? ( // eslint-disable-next-line @next/next/no-img-element

setLogoFailed(true)} /> ) : null} {error?.title} {error?.description} ) : null; } export interface PopupViewProps { agentName?: string; logo?: string; error?: AgentPopupError; controls: AgentControlBarControls; themeMode?: 'dark' | 'light'; preConnectMessage?: string; isPreConnectBufferEnabled?: boolean; audioVisualizer?: AudioVisualizerConfig; onDisconnect?: () => void; } export function PopupView({ agentName, logo, error, controls, themeMode, isPreConnectBufferEnabled, preConnectMessage, audioVisualizer, onDisconnect, }: PopupViewProps) { return (

); } 4e:["$","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","@livekit/components-react@^2.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40livekit%2Fcomponents-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":"@livekit/components-react@^2.0.0"}]]}]}],["$","li","livekit-client@^2.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/livekit-client","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":"livekit-client@^2.0.0"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@agents-ui","registryDependencies":["utils","button","@agents-ui/agent-session-provider","@agents-ui/start-audio-button","@agents-ui/agent-session-view-01"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/agents-ui/blocks/agent-popup-01/components/agent-popup-block.tsx","content":"$51","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-popup-01/components/trigger.tsx","content":"$52","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-popup-01/components/popup-view.tsx","content":"$53","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-popup-01/index.ts","content":"export * from './components/agent-popup-block';\nexport * from './components/trigger';\n","type":"registry:item"}],"className":"h-[70svh] min-h-80"}]]}]