4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T377d,"use client"; import type { DeviceErrorReason } from "@pipecat-ai/client-js"; import { type OptionalMediaDeviceInfo, useMediaState, usePipecatClientMediaDevices, } from "@pipecat-ai/client-react"; import { Loader2Icon } from "lucide-react"; import { createContext, useContext } from "react"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; /** Which class of media device to list and control. */ export type DeviceKind = "audioinput" | "audiooutput" | "videoinput"; const KIND_DEFAULTS: Record< DeviceKind, { placeholder: string; menuLabel: string; fallbackName: string } > = { audioinput: { placeholder: "Select a microphone", menuLabel: "Microphones", fallbackName: "Microphone", }, audiooutput: { placeholder: "Select a speaker", menuLabel: "Speakers", fallbackName: "Speaker", }, videoinput: { placeholder: "Select a camera", menuLabel: "Cameras", fallbackName: "Camera", }, }; /** * Devices, selection, and updater for one device kind, sourced from the * Pipecat client. Must be used inside a PipecatClientProvider. */ export function usePipecatDevices(kind: DeviceKind): { devices: MediaDeviceInfo[]; selectedDevice: OptionalMediaDeviceInfo; updateDevice: (deviceId: string) => void; } { const { availableCams, availableMics, availableSpeakers, selectedCam, selectedMic, selectedSpeaker, updateCam, updateMic, updateSpeaker, } = usePipecatClientMediaDevices(); switch (kind) { case "audiooutput": return { devices: availableSpeakers, selectedDevice: selectedSpeaker, updateDevice: updateSpeaker, }; case "videoinput": return { devices: availableCams, selectedDevice: selectedCam, updateDevice: updateCam, }; case "audioinput": default: return { devices: availableMics, selectedDevice: selectedMic, updateDevice: updateMic, }; } } /** Speaker enumeration depends on microphone permission, so audiooutput follows mic MediaState. */ export function usePipecatDeviceState(kind: DeviceKind): { isLoading: boolean; unavailableText?: string; } { const { mic, cam } = useMediaState(); const state = kind === "videoinput" ? cam : mic; return { isLoading: state.state === "initializing", unavailableText: state.state === "error" ? deviceErrorText(state.reason, KIND_DEFAULTS[kind].fallbackName) : undefined, }; } /** Short, user-facing message for a device error. */ function deviceErrorText( reason: DeviceErrorReason, fallbackName: string, ): string { switch (reason) { case "blocked": return `${fallbackName} access blocked`; case "already-in-use": return `${fallbackName} in use`; case "not-found": return `No ${fallbackName.toLowerCase()} found`; case "not-supported": return `${fallbackName} not supported`; case "unknown": default: return `${fallbackName} unavailable`; } } /** Human-readable device label with a stable fallback. */ export function formatDeviceLabel( device: MediaDeviceInfo, fallbackName: string, ) { if (device.label) return device.label; // Pre-permission, browsers may return devices with empty labels and ids. return device.deviceId ? `${fallbackName} ${device.deviceId.slice(0, 5)}` : fallbackName; } /** Narrows OptionalMediaDeviceInfo (which may be an empty object) to a real device. */ export function asMediaDevice( device?: OptionalMediaDeviceInfo, ): MediaDeviceInfo | undefined { return device && "deviceId" in device ? (device as MediaDeviceInfo) : undefined; } export interface DeviceSelectViewProps extends Omit< React.ComponentProps, "children" > { /** Devices to list. */ devices?: MediaDeviceInfo[]; /** Currently selected device, matched by deviceId. */ selectedDevice?: OptionalMediaDeviceInfo; /** Called with the deviceId when the user picks a device. */ onDeviceChange?: (deviceId: string) => void; /** Device kind — controls default placeholder and fallback labels. */ kind?: DeviceKind; /** Placeholder shown when nothing is selected. */ placeholder?: string; /** Optional leading content inside the trigger (icon or short label). */ guide?: React.ReactNode; /** Disables the trigger and shows a spinner (e.g. while devices initialize). */ isLoading?: boolean; /** Content shown next to the spinner while loading. Spinner only by default. */ loadingText?: React.ReactNode; /** * When set, the trigger renders disabled with this message (device access * blocked, in use, …). Takes precedence over the interactive state; * isLoading takes precedence over both. */ unavailableText?: React.ReactNode; } /** Loading takes precedence over unavailability. The trigger is named from kind unless overridden. */ export function DeviceSelectView({ devices, selectedDevice, onDeviceChange, kind = "audioinput", placeholder, guide, isLoading = false, loadingText, unavailableText, disabled, className, ...triggerProps }: DeviceSelectViewProps) { const defaults = KIND_DEFAULTS[kind]; const selected = asMediaDevice(selectedDevice); const selectedValue = selected?.deviceId ?? null; const blocked = isLoading || !!unavailableText; return ( ); } export interface DeviceSelectProps extends Omit< DeviceSelectViewProps, | "devices" | "selectedDevice" | "onDeviceChange" | "isLoading" | "unavailableText" > { /** Replaces the automatically derived device-error message. */ unavailableText?: React.ReactNode; } /** * Device picker (select) wired to the Pipecat client: device list, * selection, and loading/error states for the given kind. * Must be rendered inside a PipecatClientProvider. */ export function DeviceSelect({ kind = "audioinput", unavailableText, ...props }: DeviceSelectProps) { const { devices, selectedDevice, updateDevice } = usePipecatDevices(kind); const derived = usePipecatDeviceState(kind); return ( ); } interface DeviceDropdownContextValue { devices?: MediaDeviceInfo[]; selectedDevice?: OptionalMediaDeviceInfo; onDeviceChange?: (deviceId: string) => void; kind: DeviceKind; isLoading: boolean; loadingText?: React.ReactNode; unavailableText?: React.ReactNode; } const DeviceDropdownContext = createContext( null, ); function useDeviceDropdownContext() { const context = useContext(DeviceDropdownContext); if (!context) { throw new Error( "DeviceDropdown components must be used within DeviceDropdownView or DeviceDropdown", ); } return context; } export interface DeviceDropdownViewProps { /** Anatomy: a DeviceDropdownTrigger and a DeviceDropdownContent. */ children: React.ReactNode; /** Devices to list. */ devices?: MediaDeviceInfo[]; /** Currently selected device, matched by deviceId. */ selectedDevice?: OptionalMediaDeviceInfo; /** Called with the deviceId when the user picks a device. */ onDeviceChange?: (deviceId: string) => void; /** Device kind — controls default menu label and fallback names. */ kind?: DeviceKind; /** Shows a loading row in the menu instead of devices. */ isLoading?: boolean; /** Content for the loading row. "Loading devices…" by default. */ loadingText?: React.ReactNode; /** * When set, the menu shows this message instead of devices (device * access blocked, in use, …). isLoading takes precedence. */ unavailableText?: React.ReactNode; } /** Compose with DeviceDropdownTrigger and DeviceDropdownContent. Name icon-only triggers with aria-label. */ export function DeviceDropdownView({ children, devices, selectedDevice, onDeviceChange, kind = "audioinput", isLoading = false, loadingText, unavailableText, }: DeviceDropdownViewProps) { return ( {children} ); } /** Menu trigger — compose your own element via the render prop. */ export const DeviceDropdownTrigger = DropdownMenuTrigger; export interface DeviceDropdownContentProps extends React.ComponentProps< typeof DropdownMenuContent > { /** Menu heading. Pass null to hide. */ menuLabel?: React.ReactNode | null; } /** * Menu content listing the root's devices, with loading, unavailable, * and empty states. Must be used within a DeviceDropdownView. */ export function DeviceDropdownContent({ menuLabel, align = "end", ...props }: DeviceDropdownContentProps) { const { devices, selectedDevice, onDeviceChange, kind, isLoading, loadingText, unavailableText, } = useDeviceDropdownContext(); const defaults = KIND_DEFAULTS[kind]; const resolvedLabel = menuLabel === undefined ? defaults.menuLabel : menuLabel; return ( {/* Base UI requires GroupLabel to live inside a Group. */} {resolvedLabel !== null && ( <> {resolvedLabel} )} {isLoading ? ( {loadingText ?? "Loading devices…"} ) : unavailableText ? ( {unavailableText} ) : devices?.length ? ( devices.map((device, index) => ( { if (checked) onDeviceChange?.(device.deviceId); }} > {formatDeviceLabel(device, defaults.fallbackName)} )) ) : ( No devices found )} ); } export interface DeviceDropdownProps extends Omit< DeviceDropdownViewProps, | "devices" | "selectedDevice" | "onDeviceChange" | "isLoading" | "unavailableText" > { /** Replaces the automatically derived device-error message. */ unavailableText?: React.ReactNode; } /** * Device picker (dropdown menu) wired to the Pipecat client: device * list, selection, and loading/error states for the given kind. * Must be rendered inside a PipecatClientProvider. */ export function DeviceDropdown({ kind = "audioinput", unavailableText, children, ...props }: DeviceDropdownProps) { const { devices, selectedDevice, updateDevice } = usePipecatDevices(kind); const derived = usePipecatDeviceState(kind); return ( {children} ); } 4a:["$","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","@pipecat-ai/client-js@^1.13.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-js","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":"@pipecat-ai/client-js@^1.13.1"}]]}]}],["$","li","@pipecat-ai/client-react@^1.8.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40pipecat-ai%2Fclient-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":"@pipecat-ai/client-react@^1.8.2"}]]}]}],["$","li","lucide-react@^1.41.0",{"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@^1.41.0"}]]}]}]]}],["$","$L4b",null,{"namespace":"@pipecat","registryDependencies":["select","dropdown-menu"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/components/device-select.tsx","content":"$4d","type":"registry:component","target":"components/pipecat/device-select.tsx"}],"className":"h-[70svh] min-h-80"}]]}]