Skip to content

feat(shadcn): add volumeBands override prop to agents-ui visualizers - #1399

Merged
thomasyuill-livekit merged 7 commits into
mainfrom
ty/volume-bands-prop
Jul 29, 2026
Merged

feat(shadcn): add volumeBands override prop to agents-ui visualizers#1399
thomasyuill-livekit merged 7 commits into
mainfrom
ty/volume-bands-prop

Conversation

@thomasyuill-livekit

@thomasyuill-livekit thomasyuill-livekit commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Issue

Related to https://github.com/livekit/web/pull/4377

The demo's on livekit.com/products/agents-ui require simulated audio.
We don't have a mechanism for providing an audioTrack, so the components needed to be forked.
This complicates updates and maintenance.

Overview

Adds override props to the agents-ui audio visualizer components,
letting callers provide precomputed volume data overriding the live audio hooks.

Multiband visualizers (Bar/Radial/Grid) accept a volumeBands array
Single-value visualizers (Wave/Aura) accept a scalar volume.

Summary of changes

Component Prop Behavior
AgentAudioVisualizerBar volumeBands?: number[] Overrides useMultibandTrackVolume; still gated on state === 'speaking'. Array is trimmed or padded (duplicating the last value) to match barCount.
AgentAudioVisualizerRadial volumeBands?: number[] Same override; still gated on audioTrack being present. Normalized to barCount.
AgentAudioVisualizerGrid volumeBands?: number[] Same override; still gated on state === 'speaking'. Normalized to columnCount.
AgentAudioVisualizerWave volume?: number Overrides the internally-computed useTrackVolume value directly.
AgentAudioVisualizerAura volume?: number Same as Wave.
  • Added normalizeVolumeBands in packages/shadcn/lib/utils.ts
    • trim/pad-by-duplicating-last-value rule shared by Bar/Radial/Grid.

Testing

Lets callers drive Bar/Radial/Grid/Wave/Aura visualizers with precomputed
volume data instead of live useMultibandTrackVolume/useTrackVolume output,
while preserving existing state/track visibility gates.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
components-js-storybook-5kld Ready Ready Preview, Comment Jul 29, 2026 5:54pm

Request Review

@changeset-bot

changeset-bot Bot commented Jul 24, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 9950473

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
LiveKitRoom only 7.89 KB (0%)
LiveKitRoom with VideoConference 32.52 KB (0%)
All exports 44.13 KB (0%)

Bar/Radial/Grid now trim excess values or pad by duplicating the last
value when a supplied volumeBands array doesn't match the expected count.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replace volumeBands (number[]) with a scalar volume prop on Wave/Aura,
since they only ever needed one value. Drops the now-unused
resolveVolumeFromBands averaging helper.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bar/Grid never gated on audioTrack, only Radial did, which silently
zeroed out an explicitly-provided volumeBands override whenever no live
track was connected. Also adds Storybook demos (with a shared simulated
speech-waveform generator) showing the volumeBands/volume override for
all 5 agents-ui visualizers.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
"END CALL"/"END" -> "End call"/"End" in AgentDisconnectButton's default
label and AgentControlBar's responsive labels.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…b/utils.ts

packages/shadcn is distributed via the shadcn CLI registry, where bare
"utils" registryDependencies resolve against the stock ui.shadcn.com
registry rather than this repo's own lib/utils.ts. Any custom export
added there silently fails to reach consumer installs. Bar/Radial/Grid
each get their own private copy of the helper instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@thomasyuill-livekit
thomasyuill-livekit merged commit 28ab8b4 into main Jul 29, 2026
5 checks passed
@thomasyuill-livekit
thomasyuill-livekit deleted the ty/volume-bands-prop branch July 29, 2026 18:01
thomasyuill-livekit added a commit that referenced this pull request Jul 29, 2026
…1399)

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
thomasyuill-livekit added a commit that referenced this pull request Jul 29, 2026
…1399)

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants