4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1fe9,'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'; 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 (`audioVisualizerType="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; /** * Enables or disables the chat toggle and transcript input controls. * * @default true */ supportsChatInput?: boolean; /** * Enables or disables camera controls in the bottom control bar. * * @default true */ supportsVideoInput?: boolean; /** * Enables or disables screen sharing controls in the bottom control bar. * * @default true */ supportsScreenShare?: boolean; /** * Shows a pre-connect buffer state with a shimmer message before messages appear. * * @default true */ isPreConnectBufferEnabled?: boolean; /** Selects the visualizer style rendered in the main tile area. */ audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura'; /** Primary hex color used by supported audio visualizer variants. */ audioVisualizerColor?: `#${string}`; /** Hue shift intensity used by certain visualizers. */ audioVisualizerColorShift?: number; /** Number of bars to render when `audioVisualizerType` is `bar`. */ audioVisualizerBarCount?: number; /** Number of rows in the visualizer when `audioVisualizerType` is `grid`. */ audioVisualizerGridRowCount?: number; /** Number of columns in the visualizer when `audioVisualizerType` is `grid`. */ audioVisualizerGridColumnCount?: number; /** Number of radial bars when `audioVisualizerType` is `radial`. */ audioVisualizerRadialBarCount?: number; /** Base radius of the radial visualizer when `audioVisualizerType` is `radial`. */ audioVisualizerRadialRadius?: number; /** Stroke width of the wave path when `audioVisualizerType` is `wave`. */ audioVisualizerWaveLineWidth?: number; /** Optional class name merged onto the outer `

` container. */ className?: string; } export function AgentSessionView_01({ preConnectMessage = 'Agent is listening, ask it a question', supportsChatInput = true, supportsVideoInput = true, supportsScreenShare = true, isPreConnectBufferEnabled = true, audioVisualizerType, audioVisualizerColor, audioVisualizerColorShift, audioVisualizerBarCount, audioVisualizerGridRowCount, audioVisualizerGridColumnCount, audioVisualizerRadialBarCount, audioVisualizerRadialRadius, audioVisualizerWaveLineWidth, themeMode, 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(); const controls: AgentControlBarControls = { leave: true, microphone: true, chat: supportsChatInput, camera: supportsVideoInput, screenShare: supportsScreenShare, }; useEffect(() => { const lastMessage = messages.at(-1); const lastMessageIsLocal = lastMessage?.from?.isLocal === true; if (scrollAreaRef.current && lastMessageIsLocal) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight; } }, [messages]); 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 font-semibold" > {preConnectMessage} )} )}

); } 53:T159a,'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 } from '@/components/agents-ui/agent-audio-visualizer-aura'; import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar'; import { AgentAudioVisualizerGrid } from '@/components/agents-ui/agent-audio-visualizer-grid'; import { AgentAudioVisualizerRadial } from '@/components/agents-ui/agent-audio-visualizer-radial'; import { AgentAudioVisualizerWave } 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); interface AudioVisualizerProps extends MotionProps { themeMode?: 'dark' | 'light'; isChatOpen: boolean; audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura'; audioVisualizerColor?: `#${string}`; audioVisualizerColorShift?: number; audioVisualizerWaveLineWidth?: number; audioVisualizerGridRowCount?: number; audioVisualizerGridColumnCount?: number; audioVisualizerRadialBarCount?: number; audioVisualizerRadialRadius?: number; audioVisualizerBarCount?: number; className?: string; } export function AudioVisualizer({ themeMode, isChatOpen, audioVisualizerType = 'bar', audioVisualizerColor, audioVisualizerColorShift = 0.3, audioVisualizerBarCount = 5, audioVisualizerRadialRadius = 100, audioVisualizerRadialBarCount = 25, audioVisualizerGridRowCount = 15, audioVisualizerGridColumnCount = 15, audioVisualizerWaveLineWidth = 3, className, ...props }: AudioVisualizerProps) { const { state, audioTrack } = useVoiceAssistant(); switch (audioVisualizerType) { case 'aura': { return ( ); } case 'wave': { return ( ); } case 'grid': { const totalCount = audioVisualizerGridRowCount * audioVisualizerGridColumnCount; let size: 'icon' | 'sm' | 'md' | 'lg' | 'xl' = 'sm'; if (totalCount < 100) { size = 'xl'; } else if (totalCount < 200) { size = 'lg'; } else if (totalCount < 300) { size = 'md'; } return ( ); } case 'radial': { return ( ); } default: { let size: 'icon' | 'sm' | 'md' | 'lg' | 'xl' = 'icon'; let sizedClassName = cn('size-[300px] md:size-[450px]', className); if (audioVisualizerBarCount <= 5) { size = 'xl'; sizedClassName = cn('size-[450px] *:min-h-[64px] *:w-[64px] gap-4', className); } else if (audioVisualizerBarCount <= 10) { size = 'lg'; sizedClassName = cn('size-[450px]', className); } else if (audioVisualizerBarCount <= 15) { size = 'md'; sizedClassName = cn('size-[350px] md:size-[450px]', className); } else if (audioVisualizerBarCount <= 30) { size = 'sm'; sizedClassName = cn('size-[300px] md:size-[450px]', className); } return ( ); } } } 54:T258e,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 { 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; audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura'; audioVisualizerColor?: `#${string}`; audioVisualizerColorShift?: number; audioVisualizerWaveLineWidth?: number; audioVisualizerGridRowCount?: number; audioVisualizerGridColumnCount?: number; audioVisualizerRadialBarCount?: number; audioVisualizerRadialRadius?: number; audioVisualizerBarCount?: number; } export function TileLayout({ themeMode, isChatOpen, audioVisualizerType, audioVisualizerColor, audioVisualizerColorShift, audioVisualizerBarCount, audioVisualizerRadialBarCount, audioVisualizerRadialRadius, audioVisualizerGridRowCount, audioVisualizerGridColumnCount, audioVisualizerWaveLineWidth, }: 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; return (

{/* Agent */}

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

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

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@livekit/components-react@^2.0.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40livekit%2Fcomponents-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@livekit/components-react@^2.0.0"}]]}]}],["$","li","livekit-client@^2.0.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/livekit-client","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"livekit-client@^2.0.0"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"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"]}]]}],["$","$L50",null,{"sourceUrl":"https://livekit.com/ui/r/agent-session-view-01.json","proxyUrl":"https://shadcnregistry.com/r/agents-ui/agent-session-view-01","itemId":"@agents-ui/agent-session-view-01"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$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"}]}]]}],"$L55"]}]

Agent Session View

Installation

Files

components

Styles