feat(shadcn): add embed-popup-view-01 block to agents-ui by thomasyuill-livekit · Pull Request #1414 · livekit/components-js

thomasyuill-livekit · 2026-08-04T15:32:15Z

Summary

Adds a compact embed popup block for agents-ui.
Updates the session view block API for visualizer configuration.
Aligns default controls with the documented minimal defaults.

Session View Block

Replaces flattened visualizer props with a single audioVisualizer config object.
Types audioVisualizer as AudioVisualizerConfig.
Keys AudioVisualizerConfig by visualizer type.
Reuses each visualizer component's real props for config fields.
Sets AgentSessionView_01 default controls to leave and microphone only.
Keeps partial controls overrides merged onto the new defaults.
Keeps custom disconnect callbacks wired through the control bar.

Embed Popup Block

Adds EmbedPopupView_01 as a new agents-ui shadcn block.
Provides a floating trigger that opens a compact agent-session popup.
Starts the LiveKit session when the popup opens.
Ends the LiveKit session when the popup closes.
Closes the popup when the leave control disconnects the session.
Reuses AgentSessionProvider, AgentSessionView_01, and StartAudioButton.
Keeps popup defaults compact with only microphone enabled.
Exports the popup Trigger for custom previews and composition.
Adds Storybook coverage for default, configurable, and all-controls states.
Adds tests for lifecycle, control defaults, prop forwarding, and popup behavior.

Testing

pnpm --filter @livekit/agents-ui test
pnpm --filter @livekit/agents-ui shadcn:build

changeset-bot · 2026-08-04T15:32:19Z

⚠️ No Changeset found

Latest commit: 3d78d7f

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

vercel · 2026-08-04T15:32:21Z

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

Project	Deployment	Actions	Updated (UTC)
components-js-storybook-5kld	Ready	Preview	Aug 13, 2026 3:50pm

github-actions · 2026-08-04T15:33:17Z

size-limit report 📦

Path	Size
LiveKitRoom only	7.91 KB (0%)
LiveKitRoom with VideoConference	32.5 KB (0%)
All exports	44.57 KB (0%)

Adds a floating chat-bubble trigger that expands into a compact agent session popup, ported from livekit/web's embed-popup components and adapted to be a portable block: token acquisition uses the registry's existing useSession/TokenSource pattern instead of cloud-specific plumbing, and it composes the existing AgentSessionProvider and AgentSessionView_01 block rather than duplicating them. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Give AgentSessionView-01 and EmbedPopupView-01 an explicit agents-ui/Blocks/* title and sort that group ahead of the rest of the agents-ui section so the composed blocks are easy to find. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Thread an optional onDisconnect callback through AgentSessionView_01 -> PopupView so AgentClient can pass its trigger's handleToggle, closing the popup the same way clicking the trigger bubble does when the user ends the call from inside it. Falls back to session.end when no override is supplied, so the standalone agent-session-view-01 block is unaffected. Also switches AgentSessionView_01's chat/camera/screenShare controls from separate supports* booleans to a single controls object, and moves the control bar's responsive breakpoints to container queries scoped to the control bar itself. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The previous storySort comparator returned 0 for any pair outside agents-ui/*, relying on sort stability to preserve order. Combined with the strict Blocks-first rule inside agents-ui/*, that comparator wasn't transitive, so the resulting sidebar order was undefined and the Blocks group could intermittently split apart or vanish across reloads. Switch to a real total order (rank, then title) so the sort is deterministic. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Default turbo.json ui to "stream" so dev/build/test/lint output plain logs, and force --ui=tui explicitly on shadcn:publish:all instead of the previous TURBO_UI=true (not a value Turbo's --ui/TURBO_UI actually accepts). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…-view-01 Thread AgentClient's pre-connect/visualizer/theme props (previously only settable on the full-page agent-session-view-01) down through PopupView, and rename the trigger's color prop to triggerColor to disambiguate it from the visualizer color. Also simplifies Trigger's connecting/destructive ring styling to Tailwind utilities instead of a hand-rolled contrast/luminance calculation. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…torybook controls AgentClientProps documented themeMode but never forwarded it past AgentClient, so the aura visualizer inside the popup couldn't be theme-overridden like it can in agent-session-view-01. Thread it through AgentClient -> PopupView -> AgentSessionView_01. Also refreshes both blocks' Storybook stories to match the current controls-object API (replacing the stale supports*/color args), gives EmbedPopupView-01 the same visualizer/pre-connect controls already exposed on AgentSessionView-01, and fixes the audioVisualizerType select control (options belongs alongside control, not nested inside it, so the dropdown had no options). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Aligns the embed-popup-view-01 block's exported component/prop names with the agent-session-view-01 naming convention, and makes AgentSessionView_01's controls prop optional to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…ners more Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Sets text color directly on the trigger's connecting/destructive/idle icons instead of relying on the parent disc's background color, and picks the idle BotIcon's color via CSS contrast-color() against the brand color. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…mbed-popup-view-01 Split Trigger into a connection-aware TriggerProvider wrapper so the button itself stays a plain, prop-driven component (isPressed/isConnected/className), swap StartAudio for the local StartAudioButton, and rename popupOpen/error types (isPressed, isActive, EmbedPopupViewError) for clarity. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

… tests These tests still exercised removed props (supportsChatInput, color, popupOpen, error={null}) and missing mocks (useAgent, AnimatePresence) left over from earlier refactors, so they were failing outright. Update them to match the current Trigger/PopupView/EmbedPopupView_01/ AgentSessionView_01 APIs (isPressed/isConnected, triggerColor, controls object, optional error). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…d audioVisualizer config Collapse the nine flat audioVisualizerType/Color/BarCount/... props on AgentSessionView_01/EmbedPopupView_01 into a single audioVisualizer prop. Its type is a discriminated union keyed by `type` that extends each AgentAudioVisualizer*'s real prop type, so field names (barCount, rowCount/columnCount, radius, lineWidth, ...) and support (e.g. colorShift only for wave/aura) match the underlying components exactly instead of a hand-rolled flat shape. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…t-session blocks - AgentSessionView_01Props.audioVisualizer generated as type "any" in prop-types.json because agent-session-block.tsx imported AudioVisualizerConfig via a relative path instead of the @/ alias used elsewhere; react-docgen-typescript fails to resolve the discriminated union through that import style. Switch to the alias import and add an explicit `{ type: 'bar' }` default (matching EmbedPopupView_01's own audioVisualizer default) to fix doc generation and match the pattern. - EmbedPopupViewProps.triggerColor doc claimed it colored the audio visualizer and had a non-existent '#3b82f6' default; audioVisualizer.color is now independent, so correct the description and default value docs. - TriggerProps: the "Brand color..." doc comment was attached to `logo` instead of `color`; add the missing doc to each field.

thomasyuill-livekit requested review from 1egoman and lukasIO as code owners August 4, 2026 15:32

vercel Bot deployed to Preview August 4, 2026 15:32 View deployment

thomasyuill-livekit marked this pull request as draft August 4, 2026 17:06

thomasyuill-livekit changed the title ~~feat(shadcn): add embed-popup-view-01 block to agents-ui~~ [WIP] - feat(shadcn): add embed-popup-view-01 block to agents-ui Aug 4, 2026

vercel Bot deployed to Preview August 4, 2026 17:25 View deployment

thomasyuill-livekit force-pushed the ty/embed-popup-view-01-block branch from ab82844 to ccc2723 Compare August 4, 2026 19:27

vercel Bot deployed to Preview August 4, 2026 19:27 View deployment

vercel Bot deployed to Preview August 5, 2026 02:05 View deployment

vercel Bot deployed to Preview August 5, 2026 16:41 View deployment

vercel Bot deployed to Preview August 5, 2026 16:48 View deployment

vercel Bot deployed to Preview August 6, 2026 17:51 View deployment

vercel Bot deployed to Preview August 6, 2026 21:40 View deployment

thomasyuill-livekit changed the title ~~[WIP] - feat(shadcn): add embed-popup-view-01 block to agents-ui~~ [WIP] - feat(shadcn): add embed-popup block to agents-ui Aug 7, 2026

vercel Bot deployed to Preview August 7, 2026 17:06 View deployment

thomasyuill-livekit mentioned this pull request Aug 7, 2026

Deprecate agent-starter-embed livekit-examples/agent-starter-embed#64

Open

vercel Bot deployed to Preview August 7, 2026 17:09 View deployment

vercel Bot deployed to Preview August 7, 2026 19:09 View deployment

vercel Bot deployed to Preview August 10, 2026 16:24 View deployment

thomasyuill-livekit self-assigned this Aug 10, 2026

thomasyuill-livekit changed the title ~~[WIP] - feat(shadcn): add embed-popup block to agents-ui~~ feat(shadcn): add embed-popup-view-01 block to agents-ui Aug 10, 2026

vercel Bot deployed to Preview August 10, 2026 16:38 View deployment

vercel Bot deployed to Preview August 13, 2026 15:01 View deployment

thomasyuill-livekit marked this pull request as ready for review August 13, 2026 15:40

thomasyuill-livekit and others added 3 commits August 13, 2026 11:49

thomasyuill-livekit and others added 15 commits August 13, 2026 11:49

style(shadcn): move popup border/shadow to inner container, round cor…

d58c853

…ners more Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

style(shadcn): mute pre-connect shimmer text color

1eade0c

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

remove trigger inset on connect/disconnect button

8f8949a

format

6573784

fix(agents-ui): align control defaults

3d78d7f

thomasyuill-livekit force-pushed the ty/embed-popup-view-01-block branch from f7b1158 to 3d78d7f Compare August 13, 2026 15:49

vercel Bot deployed to Preview August 13, 2026 15:50 View deployment

Navigation Menu

Uh oh!

feat(shadcn): add embed-popup-view-01 block to agents-ui - #1414

feat(shadcn): add embed-popup-view-01 block to agents-ui#1414
thomasyuill-livekit wants to merge 18 commits into
mainfrom
ty/embed-popup-view-01-block

thomasyuill-livekit commented Aug 4, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

thomasyuill-livekit commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Session View Block

Embed Popup Block

Testing

Uh oh!

changeset-bot Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

thomasyuill-livekit commented Aug 4, 2026 •

edited

Loading

changeset-bot Bot commented Aug 4, 2026 •

edited

Loading

vercel Bot commented Aug 4, 2026 •

edited

Loading

github-actions Bot commented Aug 4, 2026 •

edited

Loading