feat: LiveKit OSS Shadcn initial components #1249
Conversation
|
size-limit report 📦
|
thomasyuill-livekit
force-pushed
the
ty/shadcn-components-1
branch
from
78cd2d3 to
8a4c571
Compare
| 'data-[state=off]:bg-accent data-[state=off]:hover:bg-foreground/10', | ||
| 'data-[state=off]:border-border data-[state=off]:hover:border-foreground/12', | ||
| 'data-[state=off]:text-foreground data-[state=off]:hover:text-foreground data-[state=off]:focus:text-foreground', | ||
| 'data-[state=on]:bg-blue-500/20 data-[state=on]:hover:bg-blue-500/30 data-[state=on]:border-blue-700/10 data-[state=on]:text-blue-700', |
There was a problem hiding this comment.
do we have the option to use theme tokens for the hard coded blue values?
There was a problem hiding this comment.
Sadly we do not,
https://ui.shadcn.com/docs/theming#list-of-variables
Introducing our own own variables does not improve the situation, complicates integration, and will not respond to shadcn theme applications
Additional considerations
- this is an opinionated block level component
- developers are able to easily fork this component or use it as guide for developing their own
There was a problem hiding this comment.
The other option I considered, was to only apply these classes to the livekit variant.
This is a valid approach, but the default component will not look great...
cc @mattherzog for further input here
There was a problem hiding this comment.
I'm going to go with the alternative for now and only apply these classes to the livekit variant.
We can discuss this in more detail and make adjustment in a future PR.
Here are some screen shots of the result below.
Default
Open Chat
thomasyuill-livekit
force-pushed
the
ty/shadcn-components-1
branch
from
8a4c571 to
0200c76
Compare
packages/shadcn/components/agents-ui/agent-control-bar/agent-control-bar.tsx
Outdated
Show resolved
Hide resolved
packages/shadcn/components/agents-ui/audio-visualizer-bar/hooks/useBarAnimator.ts
Outdated
Show resolved
Hide resolved
thomasyuill-livekit
force-pushed
the
ty/shadcn-components-1
branch
from
0200c76 to
f0003fe
Compare
thomasyuill-livekit
force-pushed
the
ty/shadcn-components-1
branch
from
f0003fe to
77be9bb
Compare
Summary
This PR introduces the core agent control components for the
@livekit/shadcnpackage, providing the foundational UI elements for building voice/video agent interfaces.New Components
AgentControlBarThe main control bar component for agent sessions featuring:
usePublishPermissionshookuseInputControlshookAgentTrackControlA compound control component that combines track toggling with device selection, providing users the ability to both mute/unmute and switch between available devices.
AgentTrackToggleA simple toggle button for enabling/disabling audio or video tracks in agent sessions.
AgentDisconnectButtonA styled button to disconnect from the current agent session.
AudioVisualizerBarA bar-style audio visualizer with smooth animations via the
useBarAnimatorhook, useful for displaying agent or participant audio activity.Also Includes
cloneSingleChildutility for component composition