chore(shadcn): cleanup microphoneTrack (#1269)

Author: thomasyuill-livekit

docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx

@@ -1,12 +1,7 @@
-import React, { useEffect, useMemo } from 'react';
-import { Decorator } from '@storybook/react-vite';
-import {
-  useLocalParticipant,
-  SessionProvider,
-  useSession,
-  type TrackReference,
-} from '@livekit/components-react';
-import { TokenSource, Track } from 'livekit-client';
+import React, { useEffect } from 'react';
+import { Decorator, StoryFn } from '@storybook/react-vite';
+import { SessionProvider, useSession } from '@livekit/components-react';
+import { TokenSource } from 'livekit-client';
 
 const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
   import.meta.env.VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID,
@@ -26,21 +21,3 @@ export const AgentSessionProvider: Decorator = (Story: StoryFn) => {
     </SessionProvider>
   );
 };
-
-export function useMicrophone() {
-  const { microphoneTrack, localParticipant } = useLocalParticipant();
-
-  useEffect(() => {
-    localParticipant.setMicrophoneEnabled(true, undefined);
-  }, []);
-
-  return useMemo(
-    () =>
-      ({
-        participant: localParticipant,
-        source: Track.Source.Microphone,
-        publication: microphoneTrack,
-      }) as TrackReference,
-    [microphoneTrack],
-  );
-}

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

@@ -1,21 +1,23 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentAudioVisualizerAura, AgentAudioVisualizerAuraProps } from '@agents-ui';
 import { useTheme } from 'next-themes';
+import { useSessionContext } from '@livekit/components-react';
 
 export default {
   component: AgentAudioVisualizerAura,
   decorators: [AgentSessionProvider],
   render: (args: AgentAudioVisualizerAuraProps) => {
-    const audioTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
     const { theme } = useTheme();
     const themeMode = theme === 'dark' ? 'dark' : 'light';
 
-    return <AgentAudioVisualizerAura {...args} themeMode={themeMode} audioTrack={audioTrack} />;
+    return (
+      <AgentAudioVisualizerAura {...args} themeMode={themeMode} audioTrack={microphoneTrack} />
+    );
   },
   args: {
     size: 'xl',

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { useSessionContext } from '@livekit/components-react';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentAudioVisualizerBar, AgentAudioVisualizerBarProps } from '@agents-ui';
 
 export default {
   component: AgentAudioVisualizerBar,
   decorators: [AgentSessionProvider],
   render: (args: AgentAudioVisualizerBarProps) => {
-    const audioTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
-    return <AgentAudioVisualizerBar {...args} audioTrack={audioTrack} />;
+    return <AgentAudioVisualizerBar {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'xl',

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentAudioVisualizerGrid, AgentAudioVisualizerGridProps } from '@agents-ui';
+import { useSessionContext } from '@livekit/components-react';
 
 export default {
   component: AgentAudioVisualizerGrid,
   decorators: [AgentSessionProvider],
   render: (args: AgentAudioVisualizerGridProps) => {
-    const audioTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
-    return <AgentAudioVisualizerGrid {...args} audioTrack={audioTrack} />;
+    return <AgentAudioVisualizerGrid {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'lg',

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentAudioVisualizerRadial, AgentAudioVisualizerRadialProps } from '@agents-ui';
+import { useSessionContext } from '@livekit/components-react';
 
 export default {
   component: AgentAudioVisualizerRadial,
   decorators: [AgentSessionProvider],
   render: (args: AgentAudioVisualizerRadialProps) => {
-    const audioTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
-    return <AgentAudioVisualizerRadial {...args} audioTrack={audioTrack} />;
+    return <AgentAudioVisualizerRadial {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'lg',

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentAudioVisualizerWave, AgentAudioVisualizerWaveProps } from '@agents-ui';
+import { useSessionContext } from '@livekit/components-react';
 
 export default {
   component: AgentAudioVisualizerWave,
   decorators: [AgentSessionProvider],
   render: (args: AgentAudioVisualizerWaveProps) => {
-    const audioTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
-    return <AgentAudioVisualizerWave {...args} audioTrack={audioTrack} />;
+    return <AgentAudioVisualizerWave {...args} audioTrack={microphoneTrack} />;
   },
   args: {
     size: 'xl',

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

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentControlBar, AgentControlBarProps } from '@agents-ui';
 
 interface Args {
@@ -34,7 +31,6 @@ export default {
       },
     };
 
-    useMicrophone();
     return <AgentControlBar {...props} className="min-w-lg  mx-auto" />;
   },
   args: {

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

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import { StoryObj } from '@storybook/react-vite';
-import {
-  AgentSessionProvider,
-  useMicrophone,
-} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentTrackControl, type AgentTrackControlProps } from '@agents-ui';
+import { useSessionContext, useTrackToggle } from '@livekit/components-react';
 import { Track } from 'livekit-client';
 
 export default {
   component: AgentTrackControl,
   decorators: [AgentSessionProvider],
   render: (args: AgentTrackControlProps) => {
-    const [isPressed, setIsPressed] = React.useState(
-      args.source === Track.Source.Microphone ? true : false,
-    );
-
-    const microphoneTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
+    const microphoneToggle = useTrackToggle({
+      source: Track.Source.Microphone,
+    });
 
     return (
       <AgentTrackControl
         {...args}
-        pressed={isPressed}
-        onPressedChange={(pressed: boolean) => setIsPressed(pressed)}
+        pressed={microphoneToggle.enabled}
+        onPressedChange={microphoneToggle.toggle}
         audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined}
       />
     );
@@ -52,8 +51,9 @@ export const Default: StoryObj<AgentTrackControlProps> = {
     const [isCameraPressed, setIsCameraPressed] = React.useState(true);
     const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
     const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
-
-    const microphoneTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
     return (
       <div className="flex gap-2">
@@ -92,8 +92,9 @@ export const Outlined: StoryObj<AgentTrackControlProps> = {
     const [isCameraPressed, setIsCameraPressed] = React.useState(true);
     const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
     const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
-
-    const microphoneTrack = useMicrophone();
+    const {
+      local: { microphoneTrack },
+    } = useSessionContext();
 
     return (
       <div className="flex gap-2">

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

@@ -51,7 +51,7 @@ export const AgentAudioVisualizerGridVariants = cva(
   [
     'grid',
     '*:size-1 *:rounded-full',
-    '*:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+    '*:bg-foreground/10 *:data-[lk-highlighted=true]:bg-foreground *:data-[lk-highlighted=true]:scale-125 *:data-[lk-highlighted=true]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
   ],
   {
     variants: {

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

@@ -14,13 +14,13 @@ import { useAgentAudioVisualizerRadialAnimator } from '@/hooks/agents-ui/use-age
 export const AgentAudioVisualizerRadialVariants = cva(
   [
     'relative flex items-center justify-center',
-    '[&_[data-lk-index]]:bg-current/10',
-    '[&_[data-lk-index]]:absolute [&_[data-lk-index]]:top-1/2 [&_[data-lk-index]]:left-1/2 [&_[data-lk-index]]:origin-bottom [&_[data-lk-index]]:-translate-x-1/2',
-    '[&_[data-lk-index]]:rounded-full [&_[data-lk-index]]:transition-colors [&_[data-lk-index]]:duration-150 [&_[data-lk-index]]:ease-linear [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current',
-    'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300',
-    'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300',
-    'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300',
-    'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:[&_[data-lk-index]]:bg-current',
+    '**:data-lk-index:bg-current/10',
+    '**:data-lk-index:absolute **:data-lk-index:top-1/2 **:data-lk-index:left-1/2 **:data-lk-index:origin-bottom **:data-lk-index:-translate-x-1/2',
+    '**:data-lk-index:rounded-full **:data-lk-index:transition-colors **:data-lk-index:duration-150 **:data-lk-index:ease-linear **:data-lk-index:data-[lk-highlighted=true]:bg-current',
+    'has-data-[lk-state=connecting]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=initializing]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=listening]:**:data-lk-index:duration-300 has-data-[lk-state=listening]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:**:data-lk-index:bg-current',
   ],
   {
     variants: {