Skip to content

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

Draft
thomasyuill-livekit wants to merge 8 commits into
mainfrom
ty/embed-popup-view-01-block
Draft

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

Conversation

@thomasyuill-livekit

Copy link
Copy Markdown
Contributor

Issue

No Linear ticket — requested directly in this session.

Overview

  • Adds a new agents-ui shadcn block, embed-popup-view-01: a floating chat-bubble trigger that expands into a compact agent-session popup, suitable for embedding on any page.
  • Ported from livekit/web's apps/cloud/components/embed-popup/{popup-view,trigger,agent-client}.tsx, but generalized into a portable block — cloud-specific config/token-fetch plumbing is replaced with the registry's existing useSession/TokenSource pattern, and it reuses the existing AgentSessionProvider and AgentSessionView_01 block instead of duplicating them. No existing components were modified.

Summary of changes

File Change
embed-popup-block.tsx (new) Exports AgentClient — owns the session (useSession(tokenSource)), starts/ends it as the popup opens/closes, and composes Trigger + PopupView inside the existing AgentSessionProvider
trigger.tsx (new) Floating chat bubble (Button + lucide-react icons); shows connecting/error/connected states via useAgent(), with brand-color contrast logic for the fallback icon
popup-view.tsx (new) Fixed-position panel with an inline error overlay, StartAudio, and the existing AgentSessionView_01 block
registry.json, index.ts Registers the new registry:block (+ added to the all aggregate item) and exports AgentClient from the package root
EmbedPopupView-01.stories.tsx (new) Storybook story; AgentClient manages its own session, so no decorator is needed — just passes a tokenSource
tests/{embed-popup-block,trigger,popup-view}.test.tsx (new) Vitest coverage for session lifecycle, prop forwarding, and visual states

Testing

  • pnpm --filter @livekit/agents-ui test — 329 tests passing (25 files, no regressions)
  • pnpm --filter @livekit/agents-ui shadcn:build — registry build + prop-doc generation succeed for the new block
  • Storybook preview (once deployed):

🤖 Generated with Claude Code

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>
@changeset-bot

changeset-bot Bot commented Aug 4, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 3d3f5ab

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

vercel Bot commented Aug 4, 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 Aug 5, 2026 4:48pm

Request Review

@github-actions

github-actions Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
LiveKitRoom only 7.89 KB (0%)
LiveKitRoom with VideoConference 32.48 KB (0%)
All exports 44.17 KB (0%)

@thomasyuill-livekit
thomasyuill-livekit marked this pull request as draft August 4, 2026 17:06
@thomasyuill-livekit 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
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>
thomasyuill-livekit and others added 3 commits August 4, 2026 22:03
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>
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.

1 participant