diff --git a/docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx b/docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx index 49d594309..8f8578caf 100644 --- a/docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx +++ b/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) => { ); }; - -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], - ); -} diff --git a/docs/storybook/stories/agents-ui/AgentAudioVisualizerBar.stories.tsx b/docs/storybook/stories/agents-ui/AgentAudioVisualizerBar.stories.tsx index 943d38431..1ad2565ca 100644 --- a/docs/storybook/stories/agents-ui/AgentAudioVisualizerBar.stories.tsx +++ b/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 ; + return ; }, args: { size: 'xl', diff --git a/docs/storybook/stories/agents-ui/AgentAudioVisualizerGrid.stories.tsx b/docs/storybook/stories/agents-ui/AgentAudioVisualizerGrid.stories.tsx index 880d293a1..468a1421e 100644 --- a/docs/storybook/stories/agents-ui/AgentAudioVisualizerGrid.stories.tsx +++ b/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 ; + return ; }, args: { default: 'lg', diff --git a/docs/storybook/stories/agents-ui/AgentAudioVisualizerRadial.stories.tsx b/docs/storybook/stories/agents-ui/AgentAudioVisualizerRadial.stories.tsx index f71c609b3..cca40e3e2 100644 --- a/docs/storybook/stories/agents-ui/AgentAudioVisualizerRadial.stories.tsx +++ b/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 ; + return ; }, args: { size: 'lg', diff --git a/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx b/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx index 07b478cd7..6de0ab37e 100644 --- a/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx +++ b/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 ; }, args: { diff --git a/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx b/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx index 75132c0a8..03eb2fa08 100644 --- a/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx +++ b/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 ( setIsPressed(pressed)} + pressed={microphoneToggle.enabled} + onPressedChange={microphoneToggle.toggle} audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined} /> ); @@ -52,8 +51,9 @@ export const Default: StoryObj = { 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 (
@@ -92,8 +92,9 @@ export const Outlined: StoryObj = { 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 (
diff --git a/packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx b/packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx index cf7d7890f..41a79fad1 100644 --- a/packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx +++ b/packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx @@ -14,12 +14,12 @@ import { useAgentAudioVisualizerRadialAnimator } from '@/hooks/agents-ui/use-age export const AgentAudioVisualizerRadialVariants = cva( [ 'relative flex items-center justify-center', - '[&_[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]]:bg-transparent [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current', - 'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=connecting]:[&_[data-lk-index]]:bg-current/10', - 'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=initializing]:[&_[data-lk-index]]:bg-current/10', - 'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:bg-current/10 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: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:bg-transparent **: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:bg-current/10 has-data-[lk-state=connecting]:**:data-lk-index:duration-300', + 'has-data-[lk-state=initializing]:**:data-lk-index:bg-current/10 has-data-[lk-state=initializing]:**:data-lk-index:duration-300', + 'has-data-[lk-state=listening]:**:data-lk-index:bg-current/10 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: { diff --git a/packages/shadcn/components/agents-ui/agent-control-bar.tsx b/packages/shadcn/components/agents-ui/agent-control-bar.tsx index 4dd6c362f..ad495024a 100644 --- a/packages/shadcn/components/agents-ui/agent-control-bar.tsx +++ b/packages/shadcn/components/agents-ui/agent-control-bar.tsx @@ -241,7 +241,7 @@ export function AgentControlBar({ const publishPermissions = usePublishPermissions(); const [isChatOpenUncontrolled, setIsChatOpenUncontrolled] = useState(isChatOpen); const { - micTrackRef, + microphoneTrack, cameraToggle, microphoneToggle, screenShareToggle, @@ -304,7 +304,7 @@ export function AgentControlBar({ source={Track.Source.Microphone} pressed={microphoneToggle.enabled} disabled={microphoneToggle.pending} - audioTrack={micTrackRef} + audioTrack={microphoneTrack} onPressedChange={microphoneToggle.toggle} onActiveDeviceChange={handleAudioDeviceChange} onMediaDeviceError={handleMicrophoneDeviceSelectError} diff --git a/packages/shadcn/components/agents-ui/agent-track-control.tsx b/packages/shadcn/components/agents-ui/agent-track-control.tsx index 4759b2484..16b3d8187 100644 --- a/packages/shadcn/components/agents-ui/agent-track-control.tsx +++ b/packages/shadcn/components/agents-ui/agent-track-control.tsx @@ -37,7 +37,7 @@ const selectVariants = cva( 'border-none', 'peer-data-[state=off]/track:bg-destructive/10', 'peer-data-[state=off]/track:hover:bg-destructive/15', - 'peer-data-[state=off]/track:[&_svg]:!text-destructive', + 'peer-data-[state=off]/track:[&_svg]:text-destructive!', 'dark:peer-data-[state=on]/track:bg-accent', 'dark:peer-data-[state=on]/track:hover:bg-foreground/10', @@ -49,7 +49,7 @@ const selectVariants = cva( 'peer-data-[state=off]/track:border-destructive/20', 'peer-data-[state=off]/track:bg-destructive/10', 'peer-data-[state=off]/track:hover:bg-destructive/15', - 'peer-data-[state=off]/track:[&_svg]:!text-destructive', + 'peer-data-[state=off]/track:[&_svg]:text-destructive!', 'peer-data-[state=on]/track:hover:border-foreground/12', 'dark:peer-data-[state=off]/track:bg-destructive/10', diff --git a/packages/shadcn/hooks/agents-ui/use-agent-control-bar.ts b/packages/shadcn/hooks/agents-ui/use-agent-control-bar.ts index 780b00d14..f7a2b5ba7 100644 --- a/packages/shadcn/hooks/agents-ui/use-agent-control-bar.ts +++ b/packages/shadcn/hooks/agents-ui/use-agent-control-bar.ts @@ -1,11 +1,11 @@ -import { useCallback, useMemo } from 'react'; +import { useCallback } from 'react'; import { Track } from 'livekit-client'; import { - type TrackReferenceOrPlaceholder, + type TrackReference, useTrackToggle, - useLocalParticipant, usePersistentUserChoices, useLocalParticipantPermissions, + useSessionContext, } from '@livekit/components-react'; const trackSourceToProtocol = (source: Track.Source) => { @@ -55,7 +55,7 @@ export interface UseInputControlsProps { } export interface UseInputControlsReturn { - micTrackRef?: TrackReferenceOrPlaceholder; + microphoneTrack?: TrackReference; microphoneToggle: ReturnType>; cameraToggle: ReturnType>; screenShareToggle: ReturnType>; @@ -69,6 +69,10 @@ export function useInputControls({ saveUserChoices = true, onDeviceError, }: UseInputControlsProps = {}): UseInputControlsReturn { + const { + local: { microphoneTrack }, + } = useSessionContext(); + const microphoneToggle = useTrackToggle({ source: Track.Source.Microphone, onDeviceError: (error) => onDeviceError?.({ source: Track.Source.Microphone, error }), @@ -84,17 +88,6 @@ export function useInputControls({ onDeviceError: (error) => onDeviceError?.({ source: Track.Source.ScreenShare, error }), }); - const { microphoneTrack, localParticipant } = useLocalParticipant(); - const micTrackRef = useMemo(() => { - return localParticipant && microphoneTrack - ? { - participant: localParticipant, - source: Track.Source.Microphone, - publication: microphoneTrack, - } - : undefined; - }, [localParticipant, microphoneTrack]); - const { saveAudioInputEnabled, saveVideoInputEnabled, @@ -157,7 +150,7 @@ export function useInputControls({ ); return { - micTrackRef, + microphoneTrack, cameraToggle: { ...cameraToggle, toggle: handleToggleCamera,