53: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"] 54: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"] 55:T1a2f,'use client'; import { type ComponentProps, type CSSProperties, useMemo } from 'react'; import { type VariantProps, cva } from 'class-variance-authority'; import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client'; import { type AgentState, type TrackReferenceOrPlaceholder, useMultibandTrackVolume, } from '@livekit/components-react'; import { cn } from '@/lib/utils'; import { useAgentAudioVisualizerRadialAnimator } from '@/hooks/agents-ui/use-agent-audio-visualizer-radial'; /** * Resizes an array of per-band volume values to exactly `count` entries. * Excess values are trimmed from the end; if there are too few, the last * value is duplicated to fill the remainder. An empty array is padded with 0s. */ export function normalizeVolumeBands(bands: number[], count: number): number[] { if (bands.length === count) return bands; if (bands.length > count) return bands.slice(0, count); const lastValue = bands[bands.length - 1] ?? 0; return [...bands, ...new Array(count - bands.length).fill(lastValue)]; } export const AgentAudioVisualizerRadialVariants = cva( [ 'relative flex items-center justify-center', '**:data-lk-index:bg-current/10', '**:data-lk-index:absolute **:data-lk-index:top-1/2 **:data-lk-index:left-1/2 **:data-lk-index:origin-bottom **:data-lk-index:-translate-x-1/2', '**:data-lk-index:rounded-full **:data-lk-index:transition-colors **:data-lk-index:duration-150 **:data-lk-index:ease-linear **:data-lk-index:data-[lk-highlighted=true]:bg-current', 'has-data-[lk-state=connecting]:**:data-lk-index:duration-300', 'has-data-[lk-state=initializing]:**:data-lk-index:duration-300', 'has-data-[lk-state=listening]:**:data-lk-index:duration-300', 'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:**:data-lk-index:bg-current', ], { variants: { size: { icon: ['h-[24px] gap-[2px]'], sm: ['h-[56px] gap-[4px]'], md: ['h-[112px] gap-[8px]'], lg: ['h-[224px] gap-[16px]'], xl: ['h-[448px] gap-[32px]'], }, }, defaultVariants: { size: 'md', }, }, ); /** * Props for the AgentAudioVisualizerRadial component. */ export interface AgentAudioVisualizerRadialProps { /** * The size of the visualizer. * @defaultValue 'md' */ size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl'; /** * The current state of the agent. Determines the animation pattern. * @defaultValue 'connecting' */ state?: AgentState; /** * The color of the radial bars in hexidecimal format. */ color?: `#${string}`; /** * The radius (distance from center) for the radial bars. * If not provided, defaults based on size. */ radius?: number; /** * The number of bars to display around the circle. * Should be divisible by 4 for optimal visual results. * If not provided, defaults to 12 for 'icon'/'sm', 24 for others. */ barCount?: number; /** * The audio track to visualize. Can be a local/remote audio track or a track reference. */ audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder; /** * Volume values (0-1) to use instead of the values computed from the audioTrack. * The volumeBands.length should match barCount. */ volumeBands?: number[]; /** * Additional CSS class names to apply to the container. */ className?: string; } /** * A radial (circular) audio visualizer that responds to agent state and audio levels. * Displays animated bars arranged in a circle that react to the current agent state * and audio volume when speaking. * * @extends ComponentProps<'div'> * * @example * ```tsx * * ``` */ export function AgentAudioVisualizerRadial({ size = 'md', state = 'connecting', color, radius, barCount, audioTrack, volumeBands, className, style, ...props }: AgentAudioVisualizerRadialProps & ComponentProps<'div'> & VariantProps) { const _barCount = useMemo(() => { if (barCount) { return barCount; } switch (size) { case 'icon': case 'sm': return 12; default: return 24; } }, [barCount, size]); const multibandVolume = useMultibandTrackVolume(audioTrack, { bands: _barCount, loPass: 100, hiPass: 200, }); const resolvedVolumeBands = volumeBands ? normalizeVolumeBands(volumeBands, _barCount) : multibandVolume; const sequencerInterval = useMemo(() => { switch (state) { case 'connecting': case 'listening': return 500; case 'initializing': return 250; case 'thinking': return Infinity; default: return 1000; } }, [state, _barCount]); const distanceFromCenter = useMemo(() => { if (radius) { return radius; } switch (size) { case 'icon': return 6; case 'xl': return 128; case 'lg': return 64; case 'sm': return 16; case 'md': default: return 32; } }, [size, radius]); if (_barCount % 4 !== 0) { console.warn('barCount should be divisible by 4 for optimal visual results'); } const highlightedIndices = useAgentAudioVisualizerRadialAnimator( state, _barCount, sequencerInterval, ); const dotSize = useMemo(() => { return (distanceFromCenter * Math.PI) / _barCount; }, [distanceFromCenter, _barCount]); return (

{resolvedVolumeBands.map((band, idx) => { const angle = (idx / _barCount) * Math.PI * 2; return (

); })}

); } 56:T9e0,import { useEffect, useRef, useState } from 'react'; import { type AgentState } from '@livekit/components-react'; function findGcdLessThan(columns: number, max: number = columns): number { function gcd(a: number, b: number): number { while (b !== 0) { const t = b; b = a % b; a = t; } return a; } for (let i = max; i >= 1; i--) { if (gcd(columns, i) === i) { return i; } } return 1; } function generateConnectingSequenceBar(columns: number): number[][] { const seq = []; const center = Math.floor(columns / 2); for (let x = 0; x < columns; x++) { seq.push([x, (x + center) % columns]); } return seq; } function generateListeningSequenceBar(columns: number): number[][] { const divisor = columns > 8 ? columns / findGcdLessThan(columns, 4) : findGcdLessThan(columns, 2); return Array.from({ length: divisor }, (_, idx) => [ ...Array(Math.floor(columns / divisor)) .fill(1) .map((_, idx2) => idx2 * divisor + idx), ]); } export const useAgentAudioVisualizerRadialAnimator = ( state: AgentState | undefined, barCount: number, interval: number, ): number[] => { const [index, setIndex] = useState(0); const [sequence, setSequence] = useState([[]]); useEffect(() => { if (state === 'thinking') { setSequence(generateListeningSequenceBar(barCount)); } else if (state === 'connecting' || state === 'initializing') { setSequence(generateConnectingSequenceBar(barCount)); } else if (state === 'listening') { setSequence(generateListeningSequenceBar(barCount)); } else if (state === undefined || state === 'speaking') { setSequence([new Array(barCount).fill(0).map((_, idx) => idx)]); } else { setSequence([[]]); } setIndex(0); }, [state, barCount]); const animationFrameId = useRef(null); useEffect(() => { let startTime = performance.now(); const animate = (time: DOMHighResTimeStamp) => { const timeElapsed = time - startTime; if (timeElapsed >= interval) { setIndex((prev) => prev + 1); startTime = time; } animationFrameId.current = requestAnimationFrame(animate); }; animationFrameId.current = requestAnimationFrame(animate); return () => { if (animationFrameId.current !== null) { cancelAnimationFrame(animationFrameId.current); } }; }, [interval, barCount, state, sequence.length]); return sequence[index % sequence.length] ?? []; }; 52:["$","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-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","@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","class-variance-authority",{"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"}]]}]}]]}],["$","$L53",null,{"namespace":"@agents-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"components/agents-ui/agent-audio-visualizer-radial.tsx","content":"$55","type":"registry:component"},{"path":"hooks/agents-ui/use-agent-audio-visualizer-radial.ts","content":"$56","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]