50: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"] 51: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"] 52:T1ec3,'use client'; import React, { useEffect, useRef, useState } from 'react'; import { AnimatePresence, type MotionProps, motion } from 'motion/react'; import { useAgent, useSessionContext, useSessionMessages } from '@livekit/components-react'; import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript'; import { AgentControlBar, type AgentControlBarControls, } from '@/components/agents-ui/agent-control-bar'; import { cn } from '@/lib/utils'; import { TileLayout } from './tile-view'; import { type AgentAudioVisualizerAuraProps } from '@/components/agents-ui/agent-audio-visualizer-aura'; import { type AgentAudioVisualizerBarProps } from '@/components/agents-ui/agent-audio-visualizer-bar'; import { type AgentAudioVisualizerGridProps } from '@/components/agents-ui/agent-audio-visualizer-grid'; import { type AgentAudioVisualizerRadialProps } from '@/components/agents-ui/agent-audio-visualizer-radial'; import { type AgentAudioVisualizerWaveProps } from '@/components/agents-ui/agent-audio-visualizer-wave'; /** * Configures the visualizer style rendered in the main tile area. `type` selects the * visualizer, and the remaining fields are exactly the props of the matching * `AgentAudioVisualizer*` component (e.g. `type: 'grid'` accepts `rowCount`/`columnCount`, * `type: 'wave'` accepts `lineWidth`, etc). */ export type AudioVisualizerConfig = | ({ type?: 'bar' } & AgentAudioVisualizerBarProps) | ({ type: 'wave' } & AgentAudioVisualizerWaveProps) | ({ type: 'grid' } & AgentAudioVisualizerGridProps) | ({ type: 'radial' } & AgentAudioVisualizerRadialProps) | ({ type: 'aura' } & AgentAudioVisualizerAuraProps); const DEFAULT_CONTROLS: AgentControlBarControls = { leave: true, microphone: true, chat: false, camera: false, screenShare: false, }; const BOTTOM_VIEW_MOTION_PROPS: MotionProps = { variants: { visible: { opacity: 1, translateY: '0%', }, hidden: { opacity: 0, translateY: '100%', }, }, initial: 'hidden', animate: 'visible', exit: 'hidden', transition: { duration: 0.3, delay: 0.5, ease: 'easeOut', }, }; const CHAT_MOTION_PROPS: MotionProps = { variants: { hidden: { opacity: 0, transition: { ease: 'easeOut', duration: 0.3, }, }, visible: { opacity: 1, transition: { delay: 0.2, ease: 'easeOut', duration: 0.3, }, }, }, initial: 'hidden', animate: 'visible', exit: 'hidden', }; const SHIMMER_MOTION_PROPS: MotionProps = { variants: { visible: { opacity: 1, transition: { ease: 'easeIn', duration: 0.5, delay: 0.8, }, }, hidden: { opacity: 0, transition: { ease: 'easeIn', duration: 0.5, delay: 0, }, }, }, initial: 'hidden', animate: 'visible', exit: 'hidden', }; interface FadeProps { top?: boolean; bottom?: boolean; className?: string; } export function Fade({ top = false, bottom = false, className }: FadeProps) { return (

); } export interface AgentSessionView_01Props { /** * 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: true, * microphone: true, * chat: false, * camera: false, * screenShare: false, * } */ controls?: AgentControlBarControls; /** * 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' } */ audioVisualizer?: AudioVisualizerConfig; /** Optional class name merged onto the outer `

` container. */ className?: string; /** Called when the user clicks the leave control, in addition to ending the session. */ onDisconnect?: () => void; } export function AgentSessionView_01({ preConnectMessage = 'Agent is listening, ask it a question', controls = DEFAULT_CONTROLS, isPreConnectBufferEnabled = true, audioVisualizer = { type: 'bar' }, themeMode, onDisconnect, ref, className, ...props }: React.ComponentProps<'section'> & AgentSessionView_01Props) { const session = useSessionContext(); const { messages } = useSessionMessages(session); const [isChatOpen, setIsChatOpen] = useState(false); const scrollAreaRef = useRef(null); const { state: agentState } = useAgent(); useEffect(() => { const lastMessage = messages.at(-1); const lastMessageIsLocal = lastMessage?.from?.isLocal === true; if (scrollAreaRef.current && lastMessageIsLocal) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight; } }, [messages]); const finalControls = { ...DEFAULT_CONTROLS, ...controls, }; return (

{/* transcript */} {isChatOpen && ( )} {/* Tile layout */} {/* Bottom */} {/* Pre-connect message */} {isPreConnectBufferEnabled && ( {messages.length === 0 && ( 0} {...SHIMMER_MOTION_PROPS} className="shimmer shimmer-duration-2000 pointer-events-none mx-auto block w-full max-w-2xl pb-4 text-center text-sm text-muted-foreground" > {preConnectMessage} )} )}

); } 53:T165b,'use client'; import React from 'react'; import { useVoiceAssistant } from '@livekit/components-react'; import { motion, type MotionProps } from 'motion/react'; import { cn } from '@/lib/utils'; import { AgentAudioVisualizerAura, type AgentAudioVisualizerAuraProps, } from '@/components/agents-ui/agent-audio-visualizer-aura'; import { AgentAudioVisualizerBar, type AgentAudioVisualizerBarProps, } from '@/components/agents-ui/agent-audio-visualizer-bar'; import { AgentAudioVisualizerGrid, type AgentAudioVisualizerGridProps, } from '@/components/agents-ui/agent-audio-visualizer-grid'; import { AgentAudioVisualizerRadial, type AgentAudioVisualizerRadialProps, } from '@/components/agents-ui/agent-audio-visualizer-radial'; import { AgentAudioVisualizerWave, type AgentAudioVisualizerWaveProps, } from '@/components/agents-ui/agent-audio-visualizer-wave'; const MotionAgentAudioVisualizerAura = motion.create(AgentAudioVisualizerAura); const MotionAgentAudioVisualizerBar = motion.create(AgentAudioVisualizerBar); const MotionAgentAudioVisualizerGrid = motion.create(AgentAudioVisualizerGrid); const MotionAgentAudioVisualizerRadial = motion.create(AgentAudioVisualizerRadial); const MotionAgentAudioVisualizerWave = motion.create(AgentAudioVisualizerWave); function getGridSize(rowCount: number, columnCount: number): AgentAudioVisualizerBarProps['size'] { const totalCount = rowCount * columnCount; if (totalCount < 100) { return 'xl'; } else if (totalCount < 200) { return 'lg'; } else if (totalCount < 300) { return 'md'; } return 'sm'; } function getBarSize(barCount: number): AgentAudioVisualizerBarProps['size'] { if (barCount <= 5) { return 'xl'; } else if (barCount <= 10) { return 'lg'; } else if (barCount <= 15) { return 'md'; } else if (barCount <= 30) { return 'sm'; } return 'icon'; } function getBarClassName(size: AgentAudioVisualizerBarProps['size']) { if (size == 'xl') { return 'size-[450px] *:min-h-[64px] *:w-[64px] gap-4'; } else if (size == 'lg') { return 'size-[450px] *:min-h-[48px] *:w-[48px]'; } else if (size == 'md') { return 'size-[350px] @md/agent-session-block:size-[450px] *:min-h-[32px] *:w-[32px]'; } else if (size == 'sm') { return 'size-[300px] @md/agent-session-block:size-[450px] *:min-h-[16px] *:w-[16px]'; } return 'size-[300px] @md/agent-session-block:size-[450px] *:min-h-[4px] *:w-[4px]'; } interface AudioVisualizerProps extends MotionProps { isChatOpen: boolean; type: 'bar' | 'wave' | 'grid' | 'radial' | 'aura'; config?: | AgentAudioVisualizerBarProps | AgentAudioVisualizerWaveProps | AgentAudioVisualizerGridProps | AgentAudioVisualizerRadialProps | AgentAudioVisualizerAuraProps; themeMode?: 'dark' | 'light'; className?: string; } export function AudioVisualizer({ themeMode, type, config, className, ...props }: AudioVisualizerProps) { const { state, audioTrack } = useVoiceAssistant(); // `state`/`audioTrack` always reflect the live agent session; any same-named field on // `config` is ignored by spreading it before these are set explicitly below. switch (type) { case 'aura': { return ( ); } case 'wave': { return ( ); } case 'grid': { const { size, radius, rowCount = 15, columnCount = 15, } = config as AgentAudioVisualizerGridProps; return ( ); } case 'radial': { const { radius = 100, barCount = 25 } = config as AgentAudioVisualizerRadialProps; return ( ); } default: { const { size, barCount = 5 } = (config as AgentAudioVisualizerBarProps) ?? {}; const _size = size ?? getBarSize(barCount); const sizedClassName = getBarClassName(_size); return ( ); } } } 54:T21e2,import React, { useMemo } from 'react'; import { useLocalParticipant, useTracks, useVoiceAssistant, VideoTrack, type TrackReference, } from '@livekit/components-react'; import { Track } from 'livekit-client'; import { AnimatePresence, motion, type MotionProps } from 'motion/react'; import { type AudioVisualizerConfig } from './agent-session-block'; import { cn } from '@/lib/utils'; import { AudioVisualizer } from './audio-visualizer'; const ANIMATION_TRANSITION: MotionProps['transition'] = { type: 'spring', stiffness: 675, damping: 75, mass: 1, }; const tileViewClassNames = { // GRID // 2 Columns x 3 Rows grid: [ 'h-full w-full', 'grid gap-x-2 place-content-center', 'grid-cols-[1fr_1fr] grid-rows-[90px_1fr_90px]', ], // Agent // chatOpen: true, // hasSecondTile: true // layout: Column 1 / Row 1 // align: x-end y-center agentChatOpenWithSecondTile: ['col-start-1 row-start-1', 'self-center justify-self-end'], // Agent // chatOpen: true, // hasSecondTile: false // layout: Column 1 / Row 1 / Column-Span 2 // align: x-center y-center agentChatOpenWithoutSecondTile: ['col-start-1 row-start-1', 'col-span-2', 'place-content-center'], // Agent // chatOpen: false // layout: Column 1 / Row 1 / Column-Span 2 / Row-Span 3 // align: x-center y-center agentChatClosed: ['col-start-1 row-start-1', 'col-span-2 row-span-3', 'place-content-center'], // Second tile // chatOpen: true, // hasSecondTile: true // layout: Column 2 / Row 1 // align: x-start y-center secondTileChatOpen: ['col-start-2 row-start-1', 'self-center justify-self-start'], // Second tile // chatOpen: false, // hasSecondTile: false // layout: Column 2 / Row 2 // align: x-end y-end secondTileChatClosed: ['col-start-2 row-start-3', 'place-content-end'], }; export function useLocalTrackRef(source: Track.Source) { const { localParticipant } = useLocalParticipant(); const publication = localParticipant.getTrackPublication(source); const trackRef = useMemo( () => (publication ? { source, participant: localParticipant, publication } : undefined), [source, publication, localParticipant], ); return trackRef; } interface TileLayoutProps { themeMode?: 'dark' | 'light'; isChatOpen: boolean; audioVisualizer?: AudioVisualizerConfig; } export function TileLayout({ themeMode, isChatOpen, audioVisualizer }: TileLayoutProps) { const { videoTrack: agentVideoTrack } = useVoiceAssistant(); const [screenShareTrack] = useTracks([Track.Source.ScreenShare]); const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera); const isCameraEnabled = cameraTrack && !cameraTrack.publication.isMuted; const isScreenShareEnabled = screenShareTrack && !screenShareTrack.publication.isMuted; const hasSecondTile = isCameraEnabled || isScreenShareEnabled; const animationDelay = isChatOpen ? 0 : 0.15; const isAvatar = agentVideoTrack !== undefined; const videoWidth = agentVideoTrack?.publication.dimensions?.width ?? 0; const videoHeight = agentVideoTrack?.publication.dimensions?.height ?? 0; const { type: audioVisualizerType = 'bar', ...audioVisualizerConfig } = audioVisualizer ?? {}; return (

{/* Agent */}

{!isAvatar && ( // Audio Agent )} {isAvatar && ( // Avatar Agent )}

{/* Camera & Screen Share */} {((cameraTrack && isCameraEnabled) || (screenShareTrack && isScreenShareEnabled)) && ( )}

); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@agents-ui","registryDependencies":["utils","@agents-ui/agent-control-bar","@agents-ui/agent-chat-transcript","@agents-ui/agent-audio-visualizer-aura","@agents-ui/agent-audio-visualizer-bar","@agents-ui/agent-audio-visualizer-grid","@agents-ui/agent-audio-visualizer-radial","@agents-ui/agent-audio-visualizer-wave"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/agents-ui/blocks/agent-session-view-01/components/agent-session-block.tsx","content":"$52","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/components/audio-visualizer.tsx","content":"$53","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/components/tile-view.tsx","content":"$54","type":"registry:component"},{"path":"components/agents-ui/blocks/agent-session-view-01/index.ts","content":"export * from './components/agent-session-block';\n","type":"registry:item"}],"className":"h-[70svh] min-h-80"}]]}]