51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T28bd,'use client'; import { useEffect, useMemo, useState } from 'react'; import { type VariantProps, cva } from 'class-variance-authority'; import { type TrackReferenceOrPlaceholder, useMaybeRoomContext, useMediaDeviceSelect, } from '@livekit/components-react'; import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar'; import { AgentTrackToggle } from '@/components/agents-ui/agent-track-toggle'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { type toggleVariants } from '@/components/ui/toggle'; import { cn } from '@/lib/utils'; const selectVariants = cva( [ 'rounded-l-none shadow-none pl-2 ', 'text-foreground hover:text-muted-foreground', 'peer-data-[state=on]/track:bg-muted peer-data-[state=on]/track:hover:bg-foreground/10', 'peer-data-[state=off]/track:text-destructive', 'peer-data-[state=off]/track:focus-visible:border-destructive peer-data-[state=off]/track:focus-visible:ring-destructive/30', '[&_svg]:opacity-100', ], { variants: { variant: { default: [ '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!', 'dark:peer-data-[state=on]/track:bg-accent', 'dark:peer-data-[state=on]/track:hover:bg-foreground/10', 'dark:peer-data-[state=off]/track:bg-destructive/10', 'dark:peer-data-[state=off]/track:hover:bg-destructive/15', ], outline: [ 'border border-l-0', '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=on]/track:hover:border-foreground/12', 'dark:peer-data-[state=off]/track:bg-destructive/10', 'dark:peer-data-[state=off]/track:hover:bg-destructive/15', 'dark:peer-data-[state=on]/track:bg-accent', 'dark:peer-data-[state=on]/track:hover:bg-foreground/10', ], }, size: { default: 'w-[180px]', sm: 'w-auto', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); /** * Props for the TrackDeviceSelect component. */ type TrackDeviceSelectProps = React.ComponentProps & VariantProps & { /** * The type of media device (audioinput or videoinput). */ kind: MediaDeviceKind; /** * Array of available devices */ devices: MediaDeviceInfo[]; /** * Active device ID */ activeDeviceId?: string; /** * The size of the select. * @defaultValue 'default' */ size?: 'default' | 'sm'; /** * The variant of the select. * @defaultValue 'default' */ variant?: 'default' | 'outline' | null; /** * Whether to request permissions for the media device. */ requestPermissions?: boolean; /** * Callback when the select is opened or closed. */ onOpen: (open: boolean) => void; /** * Callback when the active device changes. */ onActiveDeviceChange?: (deviceId: string) => void; }; /** * A select component for selecting a media device. * * @extends ComponentProps<'button'> * * @example * ```tsx * * ``` */ function TrackDeviceSelect({ kind, devices, activeDeviceId, size = 'default', variant = 'default', className, onOpen, onActiveDeviceChange, ...props }: TrackDeviceSelectProps) { const [open, setOpen] = useState(false); const handleOpenChange = (open: boolean) => { setOpen(open); onOpen(open); }; if (devices.length < 2) { return null; } return ( ); } /** * Props for the AgentTrackControl component. */ export type AgentTrackControlProps = VariantProps & { /** * The type of media device (audioinput or videoinput). */ kind: MediaDeviceKind; /** * The track source to control (Microphone, Camera, or ScreenShare). */ source: 'camera' | 'microphone' | 'screen_share'; /** * Whether the track is currently enabled/published. */ pressed?: boolean; /** * Whether the control is in a pending/loading state. */ pending?: boolean; /** * Whether the control is disabled. */ disabled?: boolean; /** * The audio track reference for visualization (only for microphone). */ audioTrack?: TrackReferenceOrPlaceholder; /** * Additional CSS class names to apply to the container. */ className?: string; /** * Callback when the pressed state changes. */ onPressedChange?: (pressed: boolean) => void; /** * Callback when a media device error occurs. */ onMediaDeviceError?: (error: Error) => void; /** * Callback when the active device changes. */ onActiveDeviceChange?: (deviceId: string) => void; }; /** * A combined track toggle and device selector control. * Includes a toggle button and a dropdown to select the active device. * For microphone tracks, displays an audio visualizer. * * @example * ```tsx * setMicEnabled(pressed)} * onActiveDeviceChange={(deviceId) => setMicDevice(deviceId)} * /> * ``` */ export function AgentTrackControl({ kind, variant = 'default', source, pressed, pending, disabled, className, audioTrack, onPressedChange, onMediaDeviceError, onActiveDeviceChange, }: AgentTrackControlProps) { const room = useMaybeRoomContext(); const [requestPermissionsState, setRequestPermissionsState] = useState(false); const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({ room, kind, requestPermissions: requestPermissionsState, onError: onMediaDeviceError, }); useEffect(() => { // A track was already acquired elsewhere (e.g. session.start()), so permission is already // granted — safe to fetch labeled devices without a second getUserMedia prompt. Without // this, the list stays label-less until a page reload, since the device observer only // re-fetches when `requestPermissions` changes value. Screen share has no `kind` and no // associated device list, so it should never trigger a mic/camera permission request. if (pressed && kind) { setRequestPermissionsState(true); } }, [pressed, kind]); const handleOpenChange = (open: boolean) => { if (open) { setRequestPermissionsState(true); } }; const handleActiveDeviceChange = (deviceId: string) => { setActiveMediaDevice(deviceId); onActiveDeviceChange?.(deviceId); }; const filteredDevices = useMemo(() => devices.filter((d) => d.deviceId !== ''), [devices]); // Before permission is granted, the browser reports devices with blank ids, which get filtered // out here — that's an *unknown* device count, not a confirmed empty one. Only treat it as // "no devices" once a permission-gated check has actually run and still come up empty; // otherwise the toggle disables itself before the user ever gets a chance to grant permission. const noDevices = Boolean(kind) && requestPermissionsState && filteredDevices.length === 0; const resolvedPressed = pressed && !noDevices; return (

{audioTrack && ( )} {kind && ( )}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","livekit-client@^2.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/livekit-client","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"livekit-client@^2.0.0"}]]}]}],["$","li","@livekit/components-react@^2.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40livekit%2Fcomponents-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@livekit/components-react@^2.0.0"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@agents-ui","registryDependencies":["select","@agents-ui/agent-track-toggle","utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/agents-ui/agent-track-control.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]