fix(shadcn): fix agent track control audio visualizer (#1267)

Author: thomasyuill-livekit

packages/shadcn/.eslintrc.js

@@ -5,4 +5,9 @@
 module.exports = {
   root: true,
   extends: ['lk-custom'],
+  settings: {
+    react: {
+      version: '19',
+    },
+  },
 };

packages/shadcn/components/agents-ui/agent-chat-indicator.tsx

@@ -1,5 +1,6 @@
+import { type Ref } from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { motion, type HTMLMotionProps } from 'motion/react';
+import { motion, type MotionProps } from 'motion/react';
 
 import { cn } from '@/lib/utils';
 
@@ -46,7 +47,7 @@ const agentChatIndicatorVariants = cva('bg-muted-foreground inline-block size-2.
 /**
  * Props for the AgentChatIndicator component.
  */
-export interface AgentChatIndicatorProps {
+export interface AgentChatIndicatorProps extends MotionProps {
   /**
    * The size of the indicator dot.
    * @defaultValue 'md'
@@ -56,6 +57,10 @@ export interface AgentChatIndicatorProps {
    * Additional CSS class names to apply to the indicator.
    */
   className?: string;
+  /**
+   * Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
+   */
+  ref?: Ref<HTMLSpanElement>;
 }
 
 /**
@@ -73,9 +78,7 @@ export function AgentChatIndicator({
   size = 'md',
   className,
   ...props
-}: AgentChatIndicatorProps &
-  HTMLMotionProps<'span'> &
-  VariantProps<typeof agentChatIndicatorVariants>) {
+}: AgentChatIndicatorProps & VariantProps<typeof agentChatIndicatorVariants>) {
   return (
     <motion.span
       {...motionAnimationProps}

packages/shadcn/components/agents-ui/agent-control-bar.tsx

@@ -282,7 +282,6 @@ export function AgentControlBar({
     >
       <motion.div
         {...MOTION_PROPS}
-        // @ts-ignore
         inert={!(isChatOpen || isChatOpenUncontrolled)}
         animate={isChatOpen || isChatOpenUncontrolled ? 'visible' : 'hidden'}
         className="border-input/50 flex w-full items-start overflow-hidden border-b"

packages/shadcn/components/agents-ui/agent-track-control.tsx

@@ -290,7 +290,8 @@ export function AgentTrackControl({
           <AgentAudioVisualizerBar
             size="icon"
             barCount={3}
-            audioTrack={audioTrack}
+            state={pressed ? 'speaking' : 'disconnected'}
+            audioTrack={pressed ? audioTrack : undefined}
             className="audiovisualizer flex h-6 w-auto items-center justify-center gap-0.5"
           >
             <span

packages/shadcn/hooks/agents-ui/use-agent-control-bar.ts

@@ -55,7 +55,7 @@ export interface UseInputControlsProps {
 }
 
 export interface UseInputControlsReturn {
-  micTrackRef: TrackReferenceOrPlaceholder;
+  micTrackRef?: TrackReferenceOrPlaceholder;
   microphoneToggle: ReturnType<typeof useTrackToggle<Track.Source.Microphone>>;
   cameraToggle: ReturnType<typeof useTrackToggle<Track.Source.Camera>>;
   screenShareToggle: ReturnType<typeof useTrackToggle<Track.Source.ScreenShare>>;
@@ -69,8 +69,6 @@ export function useInputControls({
   saveUserChoices = true,
   onDeviceError,
 }: UseInputControlsProps = {}): UseInputControlsReturn {
-  const { microphoneTrack, localParticipant } = useLocalParticipant();
-
   const microphoneToggle = useTrackToggle({
     source: Track.Source.Microphone,
     onDeviceError: (error) => onDeviceError?.({ source: Track.Source.Microphone, error }),
@@ -86,12 +84,15 @@ export function useInputControls({
     onDeviceError: (error) => onDeviceError?.({ source: Track.Source.ScreenShare, error }),
   });
 
+  const { microphoneTrack, localParticipant } = useLocalParticipant();
   const micTrackRef = useMemo(() => {
-    return {
-      participant: localParticipant,
-      source: Track.Source.Microphone,
-      publication: microphoneTrack,
-    };
+    return localParticipant && microphoneTrack
+      ? {
+          participant: localParticipant,
+          source: Track.Source.Microphone,
+          publication: microphoneTrack,
+        }
+      : undefined;
   }, [localParticipant, microphoneTrack]);
 
   const {

packages/shadcn/scripts/doc-gen.ts

@@ -22,10 +22,12 @@ const parser = withDefaultConfig({
     if (prop.declarations !== undefined && prop.declarations.length > 0) {
       return prop.declarations.some((declaration) => {
         return (
+          declaration.name !== 'MotionProps' &&
           declaration.name !== 'DOMAttributes' &&
           declaration.name !== 'AriaAttributes' &&
           !declaration.name.endsWith('HTMLAttributes') &&
-          !declaration.fileName.includes('class-variance-authority')
+          !declaration.fileName.includes('/motion-dom') &&
+          !declaration.fileName.includes('/class-variance-authority')
         );
       });
     }
@@ -56,6 +58,9 @@ for (const file of files) {
 console.log('--------------------------------');
 console.log(`Writing prop-types.json to ${path.join(__dirname, '../dist', 'prop-types.json')}`);
 
-fs.writeFileSync(path.join(__dirname, '../dist', 'prop-types.json'), JSON.stringify(docs, null, 2));
+fs.writeFileSync(
+  path.join(__dirname, '../dist', 'prop-types.json'),
+  JSON.stringify(docs, null, 2) + '\n',
+);
 console.log('--------------------------------');
 console.log('Done');