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:T20cb,'use client'; import React, { type CSSProperties, Children, type ComponentProps, type ReactNode, cloneElement, isValidElement, memo, useMemo, } from 'react'; import { type VariantProps, cva } from 'class-variance-authority'; import type { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client'; import { type AgentState, type TrackReferenceOrPlaceholder, useMultibandTrackVolume, } from '@livekit/components-react'; import { type Coordinate, useAgentAudioVisualizerGridAnimator, } from '@/hooks/agents-ui/use-agent-audio-visualizer-grid'; import { cn } from '@/lib/utils'; /** * 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)]; } function cloneSingleChild( children: ReactNode | ReactNode[], props?: Record, key?: unknown, ) { return Children.map(children, (child) => { // Checking isValidElement is the safe way and avoids a typescript error too. if (isValidElement(child) && Children.only(children)) { const childProps = child.props as Record; if (childProps.className) { // make sure we retain classnames of both passed props and child props ??= {}; props.className = cn(childProps.className as string, props.className as string); props.style = { ...(childProps.style as CSSProperties), ...(props.style as CSSProperties), }; } return cloneElement(child, { ...props, key: key ? String(key) : undefined }); } return child; }); } export const AgentAudioVisualizerGridCellVariants = cva( [ 'w-1 h-1 rounded-full bg-current/10 place-self-center transition-all ease-out', 'data-[lk-highlighted=true]:bg-current', ], { variants: { size: { icon: ['w-[2px] h-[2px]'], sm: ['w-[4px] h-[4px]'], md: ['w-[8px] h-[8px]'], lg: ['w-[12px] h-[12px]'], xl: ['w-[16px] h-[16px]'], }, }, defaultVariants: { size: 'md', }, }, ); export const AgentAudioVisualizerGridVariants = cva('grid', { variants: { size: { icon: ['gap-[2px]'], sm: ['gap-[4px]'], md: ['gap-[8px]'], lg: ['gap-[12px]'], xl: ['gap-[16px]'], }, }, defaultVariants: { size: 'md', }, }); /** * Configuration options for the grid visualizer. */ export interface GridOptions { /** * The radius for the animation spread effect. */ radius?: number; /** * The interval in milliseconds between animation frames. * @defaultValue 100 */ interval?: number; /** * The number of rows in the grid. * @defaultValue 5 */ rowCount?: number; /** * The number of columns in the grid. * @defaultValue 5 */ columnCount?: number; /** * Additional CSS class names to apply to the container. */ className?: string; } const sizeDefaults = { icon: 3, sm: 5, md: 5, lg: 5, xl: 5, }; function useGrid( size: VariantProps['size'] = 'md', columnCount = sizeDefaults[size as keyof typeof sizeDefaults], rowCount = sizeDefaults[size as keyof typeof sizeDefaults], ) { return useMemo(() => { const _columnCount = columnCount; const _rowCount = rowCount ?? columnCount; const items = new Array(_columnCount * _rowCount).fill(0).map((_, idx) => idx); return { columnCount: _columnCount, rowCount: _rowCount, items }; }, [columnCount, rowCount]); } interface GridCellProps { index: number; state: AgentState; interval: number; rowCount: number; columnCount: number; volumeBands: number[]; highlightedCoordinate: Coordinate; children?: ReactNode; } const GridCell = memo(function GridCell({ index, state, interval, rowCount, columnCount, volumeBands, highlightedCoordinate, children, }: GridCellProps) { if (state === 'speaking') { const y = Math.floor(index / columnCount); const rowMidPoint = Math.floor(rowCount / 2); const volumeChunks = 1 / (rowMidPoint + 1); const distanceToMid = Math.abs(rowMidPoint - y); const threshold = distanceToMid * volumeChunks; const isHighlighted = (volumeBands[index % columnCount] ?? 0) >= threshold; return cloneSingleChild(children, { 'data-lk-index': index, 'data-lk-highlighted': isHighlighted, }); } const isHighlighted = highlightedCoordinate.x === index % columnCount && highlightedCoordinate.y === Math.floor(index / columnCount); const transitionDurationInSeconds = interval / (isHighlighted ? 1000 : 100); return cloneSingleChild(children, { 'data-lk-index': index, 'data-lk-highlighted': isHighlighted, style: { transitionDuration: `${transitionDurationInSeconds}s`, }, }); }); /** * Props for the AgentAudioVisualizerGrid component. */ export type AgentAudioVisualizerGridProps = GridOptions & { /** * 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 grid cells in hexidecimal format. */ color?: `#${string}`; /** * 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 columnCount. */ volumeBands?: number[]; /** * Additional CSS class names to apply to the container. */ className?: string; /** * Custom element to render as grid cells. Each child receives data-lk-index * and data-lk-highlighted props. */ children?: ReactNode; } & VariantProps; /** * A grid-style audio visualizer that responds to agent state and audio levels. * Displays an animated grid of cells that react to the current agent state * and audio volume when speaking. * * @extends ComponentProps<'div'> * * @example * ```tsx * * ``` */ export function AgentAudioVisualizerGrid({ size = 'md', state = 'connecting', radius, color, rowCount: _rowCount = 5, columnCount: _columnCount = 5, interval = 100, className, children, audioTrack, volumeBands, style, ...props }: AgentAudioVisualizerGridProps & ComponentProps<'div'>) { const { columnCount, rowCount, items } = useGrid(size, _columnCount, _rowCount); const highlightedCoordinate = useAgentAudioVisualizerGridAnimator( state, rowCount, columnCount, interval, radius, ); const multibandVolume = useMultibandTrackVolume(audioTrack, { bands: columnCount, loPass: 100, hiPass: 200, }); const resolvedVolumeBands = volumeBands ? normalizeVolumeBands(volumeBands, columnCount) : multibandVolume; if (children && Array.isArray(children)) { throw new Error('AgentAudioVisualizerGrid children must be a single element.'); } return (

{items.map((idx) => ( {children ??

} ))}

); } 56:Tc1b,import { useEffect, useState } from 'react'; import { type AgentState } from '@livekit/components-react'; export interface Coordinate { x: number; y: number; } export function generateConnectingSequence(rows: number, columns: number, radius: number) { const seq = []; const centerY = Math.floor(rows / 2); // Calculate the boundaries of the ring based on the ring distance const topLeft = { x: Math.max(0, centerY - radius), y: Math.max(0, centerY - radius), }; const bottomRight = { x: columns - 1 - topLeft.x, y: Math.min(rows - 1, centerY + radius), }; // Top edge for (let x = topLeft.x; x <= bottomRight.x; x++) { seq.push({ x, y: topLeft.y }); } // Right edge for (let y = topLeft.y + 1; y <= bottomRight.y; y++) { seq.push({ x: bottomRight.x, y }); } // Bottom edge for (let x = bottomRight.x - 1; x >= topLeft.x; x--) { seq.push({ x, y: bottomRight.y }); } // Left edge for (let y = bottomRight.y - 1; y > topLeft.y; y--) { seq.push({ x: topLeft.x, y }); } return seq; } export function generateListeningSequence(rows: number, columns: number) { const center = { x: Math.floor(columns / 2), y: Math.floor(rows / 2) }; const noIndex = { x: -1, y: -1 }; return [center, noIndex, noIndex, noIndex, noIndex, noIndex, noIndex, noIndex, noIndex]; } export function generateThinkingSequence(rows: number, columns: number) { const seq = []; const y = Math.floor(rows / 2); for (let x = 0; x < columns; x++) { seq.push({ x, y }); } for (let x = columns - 1; x >= 0; x--) { seq.push({ x, y }); } return seq; } export function useAgentAudioVisualizerGridAnimator( state: AgentState, rows: number, columns: number, interval: number, radius?: number, ): Coordinate { const [index, setIndex] = useState(0); const [sequence, setSequence] = useState(() => [ { x: Math.floor(columns / 2), y: Math.floor(rows / 2), }, ]); useEffect(() => { const clampedRadius = radius ? Math.min(radius, Math.floor(Math.max(rows, columns) / 2)) : Math.floor(Math.max(rows, columns) / 2); if (state === 'thinking') { setSequence(generateThinkingSequence(rows, columns)); } else if (state === 'connecting' || state === 'initializing') { const sequence = [...generateConnectingSequence(rows, columns, clampedRadius)]; setSequence(sequence); } else if (state === 'listening') { setSequence(generateListeningSequence(rows, columns)); } else { setSequence([{ x: Math.floor(columns / 2), y: Math.floor(rows / 2) }]); } setIndex(0); }, [state, rows, columns, radius]); useEffect(() => { if (state === 'speaking') { return; } const indexInterval = setInterval(() => { setIndex((prev) => { return prev + 1; }); }, interval); return () => clearInterval(indexInterval); }, [interval, columns, rows, state, sequence.length]); return ( sequence[index % sequence.length] ?? { x: Math.floor(columns / 2), y: Math.floor(rows / 2) } ); } 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-grid.tsx","content":"$55","type":"registry:component"},{"path":"hooks/agents-ui/use-agent-audio-visualizer-grid.ts","content":"$56","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]