add AudioVisualizerAura

Author: thomasyuill-livekit

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AudioVisualizerAura, AudioVisualizerAuraProps } from '@agents-ui';
+import { useTheme } from 'next-themes';
+
+export default {
+  component: AudioVisualizerAura,
+  decorators: [AgentSessionProvider],
+  render: (args: AudioVisualizerAuraProps) => {
+    const audioTrack = useMicrophone();
+    const { theme } = useTheme();
+    const themeMode = theme === 'dark' ? 'dark' : 'light';
+
+    return <AudioVisualizerAura {...args} themeMode={themeMode} audioTrack={audioTrack} />;
+  },
+  args: {
+    size: 'xl',
+    themeMode: 'dark',
+    color: '#1FD5F9',
+    colorShift: 0.3,
+    state: 'connecting',
+  },
+  argTypes: {
+    size: {
+      options: ['icon', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'radio' },
+    },
+    state: {
+      options: [
+        'idle',
+        'disconnected',
+        'pre-connect-buffering',
+        'connecting',
+        'initializing',
+        'listening',
+        'thinking',
+        'speaking',
+        'failed',
+      ],
+      control: { type: 'radio' },
+    },
+    color: {
+      control: { type: 'color' },
+    },
+    colorShift: {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AudioVisualizerAuraProps> = {
+  args: {},
+};

packages/shadcn/components/agents-ui/audio-visualizer-aura/audio-visualizer-aura.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import {
+  type AnimationPlaybackControlsWithThen,
+  type ValueAnimationTransition,
+  animate,
+  useMotionValue,
+  useMotionValueEvent,
+} from 'motion/react';
+import {
+  type AgentState,
+  type TrackReference,
+  type TrackReferenceOrPlaceholder,
+  // useMultibandTrackVolume,
+  useTrackVolume,
+} from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+import { AuraShader, type AuraShaderProps } from './shader';
+
+const DEFAULT_SPEED = 10;
+const DEFAULT_AMPLITUDE = 2;
+const DEFAULT_FREQUENCY = 0.5;
+const DEFAULT_SCALE = 0.2;
+const DEFAULT_BRIGHTNESS = 1.5;
+const DEFAULT_TRANSITION: ValueAnimationTransition = { duration: 0.5, ease: 'easeOut' };
+const DEFAULT_PULSE_TRANSITION: ValueAnimationTransition = {
+  duration: 0.35,
+  ease: 'easeOut',
+  repeat: Infinity,
+  repeatType: 'mirror',
+};
+
+function useAnimatedValue<T>(initialValue: T) {
+  const [value, setValue] = useState(initialValue);
+  const motionValue = useMotionValue(initialValue);
+  const controlsRef = useRef<AnimationPlaybackControlsWithThen | null>(null);
+  useMotionValueEvent(motionValue, 'change', (value) => setValue(value as T));
+
+  const animateFn = useCallback(
+    (targetValue: T | T[], transition: ValueAnimationTransition) => {
+      controlsRef.current = animate(motionValue, targetValue, transition);
+    },
+    [motionValue],
+  );
+
+  return { value, motionValue, controls: controlsRef, animate: animateFn };
+}
+
+export const AudioVisualizerAuraVariants = cva(['aspect-square'], {
+  variants: {
+    size: {
+      icon: 'h-[24px] gap-[2px]',
+      sm: 'h-[56px] gap-[4px]',
+      md: 'h-[112px] gap-[8px]',
+      lg: 'h-[224px] gap-[16px]',
+      xl: 'h-[448px] gap-[32px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export interface AudioVisualizerAuraProps {
+  state?: AgentState;
+  audioTrack: TrackReferenceOrPlaceholder;
+}
+
+export function AudioVisualizerAura({
+  size = 'md',
+  color,
+  state = 'speaking',
+  themeMode,
+  shape = 1,
+  colorShift = 0.05,
+  audioTrack,
+  className,
+}: AudioVisualizerAuraProps & AuraShaderProps & VariantProps<typeof AudioVisualizerAuraVariants>) {
+  const [speed, setSpeed] = useState(DEFAULT_SPEED);
+  const {
+    value: scale,
+    animate: animateScale,
+    motionValue: scaleMotionValue,
+  } = useAnimatedValue(DEFAULT_SCALE);
+  const { value: amplitude, animate: animateAmplitude } = useAnimatedValue(DEFAULT_AMPLITUDE);
+  const { value: frequency, animate: animateFrequency } = useAnimatedValue(DEFAULT_FREQUENCY);
+  const { value: brightness, animate: animateBrightness } = useAnimatedValue(DEFAULT_BRIGHTNESS);
+
+  const volume = useTrackVolume(audioTrack as TrackReference, {
+    fftSize: 512,
+    smoothingTimeConstant: 0.55,
+  });
+
+  useEffect(() => {
+    switch (state) {
+      case 'idle':
+      case 'failed':
+      case 'disconnected':
+        setSpeed(10);
+        animateScale(0.2, DEFAULT_TRANSITION);
+        animateAmplitude(1.2, DEFAULT_TRANSITION);
+        animateFrequency(0.4, DEFAULT_TRANSITION);
+        animateBrightness(1.0, DEFAULT_TRANSITION);
+        return;
+        setSpeed(5);
+        animateScale(0.2, DEFAULT_TRANSITION);
+        animateAmplitude(1.2, DEFAULT_TRANSITION);
+        animateFrequency(0.4, DEFAULT_TRANSITION);
+        animateBrightness(1.0, DEFAULT_TRANSITION);
+        return;
+      case 'listening':
+      case 'pre-connect-buffering':
+        setSpeed(20);
+        animateScale(0.3, { type: 'spring', duration: 1.0, bounce: 0.35 });
+        animateAmplitude(1.0, DEFAULT_TRANSITION);
+        animateFrequency(0.7, DEFAULT_TRANSITION);
+        animateBrightness([1.5, 2.0], DEFAULT_PULSE_TRANSITION);
+        return;
+      case 'thinking':
+      case 'connecting':
+      case 'initializing':
+        setSpeed(30);
+        animateScale(0.3, DEFAULT_TRANSITION);
+        animateAmplitude(0.5, DEFAULT_TRANSITION);
+        animateFrequency(1, DEFAULT_TRANSITION);
+        animateBrightness([0.5, 2.5], DEFAULT_PULSE_TRANSITION);
+        return;
+      case 'speaking':
+        setSpeed(70);
+        animateScale(0.3, DEFAULT_TRANSITION);
+        animateAmplitude(0.75, DEFAULT_TRANSITION);
+        animateFrequency(1.25, DEFAULT_TRANSITION);
+        animateBrightness(1.5, DEFAULT_TRANSITION);
+        return;
+    }
+  }, [state, shape, animateScale, animateAmplitude, animateFrequency, animateBrightness]);
+
+  useEffect(() => {
+    if (state === 'speaking' && volume > 0 && !scaleMotionValue.isAnimating()) {
+      animateScale(0.2 + 0.2 * volume, { duration: 0 });
+    }
+  }, [
+    state,
+    volume,
+    scaleMotionValue,
+    animateScale,
+    animateAmplitude,
+    animateFrequency,
+    animateBrightness,
+  ]);
+
+  return (
+    <AuraShader
+      blur={0.2}
+      shape={shape}
+      color={color}
+      colorShift={colorShift}
+      speed={speed}
+      scale={scale}
+      themeMode={themeMode}
+      amplitude={amplitude}
+      frequency={frequency}
+      brightness={brightness}
+      className={cn(
+        AudioVisualizerAuraVariants({ size }),
+        'overflow-hidden rounded-full',
+        className,
+      )}
+    />
+  );
+}