feat(shadcn): livekit api token route (#1292)

Author: thomasyuill-livekit

docs/storybook/stories/agents-ui/AgentAudioVisualizerAura.stories.tsx

@@ -12,18 +12,20 @@ export default {
     const {
       local: { microphoneTrack },
     } = useSessionContext();
-    const { theme } = useTheme();
-    const themeMode = theme === 'dark' ? 'dark' : 'light';
+    const { resolvedTheme = 'dark' } = useTheme();
 
     return (
-      <AgentAudioVisualizerAura {...args} themeMode={themeMode} audioTrack={microphoneTrack} />
+      <AgentAudioVisualizerAura
+        {...args}
+        audioTrack={microphoneTrack}
+        themeMode={resolvedTheme as 'dark' | 'light'}
+      />
     );
   },
   args: {
     size: 'xl',
     color: '#1FD5F9',
     colorShift: 0.1,
-    themeMode: 'dark',
     state: 'connecting',
   },
   argTypes: {
@@ -49,7 +51,7 @@ export default {
       control: { type: 'color' },
     },
     colorShift: {
-      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
     },
     className: { control: { type: 'text' } },
   },

docs/storybook/stories/agents-ui/AgentAudioVisualizerBar.stories.tsx

@@ -2,26 +2,17 @@ import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
 import { useSessionContext } from '@livekit/components-react';
 import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
-import {
-  AgentAudioVisualizerBar,
-  AgentAudioVisualizerBarElementVariants,
-  AgentAudioVisualizerBarProps,
-} from '@agents-ui';
-import { cn } from '@/lib/utils';
+import { AgentAudioVisualizerBar, AgentAudioVisualizerBarProps } from '@agents-ui';
 
 export default {
   component: AgentAudioVisualizerBar,
   decorators: [AgentSessionProvider],
-  render: ({ color, ...args }: AgentAudioVisualizerBarProps & { color?: string }) => {
+  render: (args: AgentAudioVisualizerBarProps) => {
     const {
       local: { microphoneTrack },
     } = useSessionContext();
 
-    return (
-      <div style={{ color }}>
-        <AgentAudioVisualizerBar {...args} audioTrack={microphoneTrack} />
-      </div>
-    );
+    return <AgentAudioVisualizerBar {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'xl',

docs/storybook/stories/agents-ui/AgentAudioVisualizerGrid.stories.tsx

@@ -12,16 +12,12 @@ import { cn } from '@/lib/utils';
 export default {
   component: AgentAudioVisualizerGrid,
   decorators: [AgentSessionProvider],
-  render: ({ color, ...args }: AgentAudioVisualizerGridProps & { color?: string }) => {
+  render: (args: AgentAudioVisualizerGridProps) => {
     const {
       local: { microphoneTrack },
     } = useSessionContext();
 
-    return (
-      <div style={{ color }}>
-        <AgentAudioVisualizerGrid {...args} audioTrack={microphoneTrack} />
-      </div>
-    );
+    return <AgentAudioVisualizerGrid {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'lg',

docs/storybook/stories/agents-ui/AgentAudioVisualizerRadial.stories.tsx

@@ -18,6 +18,7 @@ export default {
     size: 'lg',
     state: 'connecting',
     radius: undefined,
+    color: undefined,
   },
   argTypes: {
     size: {
@@ -44,6 +45,7 @@ export default {
     radius: {
       control: { type: 'range', min: 1, max: 500, step: 1 },
     },
+    color: { control: { type: 'color' } },
     className: { control: { type: 'text' } },
   },
   parameters: {

docs/storybook/stories/agents-ui/AgentAudioVisualizerWave.stories.tsx

@@ -20,6 +20,7 @@ export default {
     state: 'connecting',
     blur: 0.1,
     color: '#1FD5F9',
+    colorShift: 0.3,
   },
   argTypes: {
     size: {
@@ -49,6 +50,9 @@ export default {
     color: {
       control: { type: 'color' },
     },
+    colorShift: {
+      control: { type: 'range', min: 0, max: 2, step: 0.1 },
+    },
   },
   parameters: {
     layout: 'centered',

packages/shadcn/components/agents-ui/agent-audio-visualizer-bar.tsx

@@ -93,6 +93,10 @@ export interface AgentAudioVisualizerBarProps {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the bars.
+   */
+  color?: string;
   /**
    * The number of bars to display in the visualizer.
    * If not provided, defaults based on size: 3 for 'icon'/'sm', 5 for others.
@@ -132,10 +136,12 @@ export interface AgentAudioVisualizerBarProps {
 export function AgentAudioVisualizerBar({
   size = 'md',
   state = 'connecting',
+  color,
   barCount,
   audioTrack,
   className,
   children,
+  style,
   ...props
 }: AgentAudioVisualizerBarProps &
   VariantProps<typeof AgentAudioVisualizerBarVariants> &
@@ -192,6 +198,7 @@ export function AgentAudioVisualizerBar({
   return (
     <div
       data-lk-state={state}
+      style={{ ...style, color } as CSSProperties}
       className={cn(AgentAudioVisualizerBarVariants({ size }), className)}
       {...props}
     >

packages/shadcn/components/agents-ui/agent-audio-visualizer-grid.tsx

@@ -198,6 +198,11 @@ export type AgentAudioVisualizerGridProps = GridOptions & {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the grid cells.
+   * @defaultValue '#1FD5F9'
+   */
+  color?: string;
   /**
    * The audio track to visualize. Can be a local/remote audio track or a track reference.
    */
@@ -235,6 +240,7 @@ export function AgentAudioVisualizerGrid({
   size = 'md',
   state = 'connecting',
   radius,
+  color,
   rowCount: _rowCount = 5,
   columnCount: _columnCount = 5,
   interval = 100,
@@ -266,7 +272,9 @@ export function AgentAudioVisualizerGrid({
     <div
       data-lk-state={state}
       className={cn(AgentAudioVisualizerGridVariants({ size }), className)}
-      style={{ ...style, gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
+      style={
+        { ...style, gridTemplateColumns: `repeat(${columnCount}, 1fr)`, color } as CSSProperties
+      }
       {...props}
     >
       {items.map((idx) => (

packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, useMemo } from 'react';
+import { type ComponentProps, CSSProperties, useMemo } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
 import {
@@ -52,6 +52,11 @@ export interface AgentAudioVisualizerRadialProps {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the radial bars.
+   * @defaultValue '#1FD5F9'
+   */
+  color?: string;
   /**
    * The radius (distance from center) for the radial bars.
    * If not provided, defaults based on size.
@@ -93,10 +98,12 @@ export interface AgentAudioVisualizerRadialProps {
 export function AgentAudioVisualizerRadial({
   size = 'md',
   state = 'connecting',
+  color,
   radius,
   barCount,
   audioTrack,
   className,
+  style,
   ...props
 }: AgentAudioVisualizerRadialProps &
   ComponentProps<'div'> &
@@ -175,6 +182,7 @@ export function AgentAudioVisualizerRadial({
     <div
       data-lk-state={state}
       className={cn(AgentAudioVisualizerRadialVariants({ size }), 'relative', className)}
+      style={{ ...style, color } as CSSProperties}
       {...props}
     >
       {bands.map((band, idx) => {

packages/shadcn/components/agents-ui/agent-audio-visualizer-wave.tsx

@@ -21,7 +21,7 @@ function hexToRgb(hexColor: string) {
 
       return color;
     }
-  } catch (error) {
+  } catch {
     console.error(
       `Invalid hex color '${hexColor}'.\nFalling back to default color '${DEFAULT_COLOR}'.`,
     );
@@ -45,6 +45,23 @@ float luma(vec3 color) {
   return dot(color, vec3(0.299, 0.587, 0.114));
 }
 
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
 // Bell curve function for attenuation from center with rounded top
 float bellCurve(float distanceFromCenter, float maxDistance) {
   float normalizedDistance = distanceFromCenter / maxDistance;
@@ -105,9 +122,18 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   // Solid line with smooth edges using minimum distance
   float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
   
-  // Calculate color position based on x position for gradient effect
-  float colorPos = x;
   vec3 color = uColor;
+  if(abs(uColorShift) > 0.01) {
+    // Keep the center 50% at base color, then ramp shift across outer 25% on each side.
+    float centerBandHalfWidth = 0.2;
+    float edgeBandWidth = 0.5;
+    float distanceFromCenter = abs(x - centerX);
+    float edgeFactor = clamp((distanceFromCenter - centerBandHalfWidth) / edgeBandWidth, 0.0, 1.0);
+    vec3 hsv = rgb2hsv(color);
+    // Hue shift is zero in the center band and strongest at far edges.
+    hsv.x = fract(hsv.x + edgeFactor * uColorShift * 0.3);
+    color = hsv2rgb(hsv);
+  }
   
   // Apply line intensity
   color *= line;
@@ -147,6 +173,11 @@ interface WaveShaderProps {
    * @default '#1FD5F9'
    */
   color?: string;
+  /**
+   * Hue shift amount applied toward the outside of the wave. Center remains at the base color.
+   * @default 0.05
+   */
+  colorShift?: number;
   /**
    * Mix of the oscilloscope
    * @default 1.0
@@ -167,6 +198,7 @@ interface WaveShaderProps {
 function WaveShader({
   speed = 10,
   color = '#1FD5F9',
+  colorShift = 0.05,
   mix = 1.0,
   amplitude = 0.02,
   frequency = 20.0,
@@ -191,6 +223,7 @@ function WaveShader({
           uLineWidth: { type: '1f', value: lineWidth },
           uSmoothing: { type: '1f', value: blur },
           uColor: { type: '3fv', value: rgbColor },
+          uColorShift: { type: '1f', value: colorShift },
         }}
         onError={(error) => {
           console.error('Shader error:', error);
@@ -237,6 +270,11 @@ export interface AgentAudioVisualizerWaveProps {
    * @defaultValue '#1FD5F9'
    */
   color?: string;
+  /**
+   * The color shift of the wave. Higher values increase hue variation toward the edges.
+   * @defaultValue 0.05
+   */
+  colorShift?: number;
   /**
    * The line width of the wave in pixels.
    * @defaultValue 2.0
@@ -269,6 +307,7 @@ export interface AgentAudioVisualizerWaveProps {
  *   size="lg"
  *   state="speaking"
  *   color="#1FD5F9"
+ *   colorShift={0.3}
  *   lineWidth={2}
  *   blur={0.5}
  *   audioTrack={audioTrack}
@@ -279,6 +318,7 @@ export function AgentAudioVisualizerWave({
   size = 'lg',
   state = 'speaking',
   color,
+  colorShift = 0.05,
   lineWidth,
   blur,
   audioTrack,
@@ -312,6 +352,8 @@ export function AgentAudioVisualizerWave({
       data-lk-state={state}
       speed={speed}
       color={color}
+      colorShift={colorShift}
+      mix={opacity}
       amplitude={amplitude}
       frequency={frequency}
       lineWidth={_lineWidth}