@ciridae/ui 0.2.0

package/dist/components/agentic/message-response.css

@@ -0,0 +1,265 @@
+@import "katex/dist/katex.min.css";
+
+@keyframes sd-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes sd-blur-in {
+	from {
+		filter: blur(4px);
+		opacity: 0;
+	}
+	to {
+		filter: blur(0);
+		opacity: 1;
+	}
+}
+
+@keyframes sd-slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+[data-sd-animate] {
+	animation: var(--sd-animation, sd-fade-in) var(--sd-duration, var(--motion-duration-fast))
+		var(--sd-easing, var(--motion-ease-standard)) var(--sd-delay, 0ms) both;
+}
+
+.agentic-message-response {
+	color: var(--foreground);
+	font-size: 0.875rem;
+	line-height: 1.6;
+	max-width: 100%;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.agentic-message-response :where(h1, h2, h3, h4, h5, h6) {
+	color: var(--foreground);
+	font-family: var(--font-ciridae-display);
+	font-weight: var(--font-ciridae-heading-weight);
+	letter-spacing: 0;
+	line-height: 1.2;
+	margin-block: 1.25rem 0.5rem;
+}
+
+.agentic-message-response :where(h1) {
+	font-size: 1.35rem;
+}
+
+.agentic-message-response :where(h2) {
+	font-size: 1.2rem;
+}
+
+.agentic-message-response :where(h3) {
+	font-size: 1.05rem;
+}
+
+.agentic-message-response :where(h4, h5, h6) {
+	font-size: 0.95rem;
+}
+
+.agentic-message-response :where(p) {
+	margin-block: 0.75rem;
+}
+
+.agentic-message-response :where(ul, ol) {
+	margin-block: 0.75rem;
+	padding-inline-start: 1.25rem;
+}
+
+.agentic-message-response :where(ul) {
+	list-style: disc;
+}
+
+.agentic-message-response :where(ol) {
+	list-style: decimal;
+}
+
+.agentic-message-response :where(li) {
+	margin-block: 0.25rem;
+	padding-inline-start: 0.125rem;
+}
+
+.agentic-message-response :where(a) {
+	color: var(--foreground);
+	text-decoration-color: color-mix(in oklch, var(--foreground) 36%, transparent);
+	text-decoration-line: underline;
+	text-underline-offset: 0.18em;
+}
+
+.agentic-message-response :where(a:hover) {
+	text-decoration-color: var(--foreground);
+}
+
+.agentic-message-response :where(strong) {
+	font-weight: var(--font-ciridae-strong-weight);
+}
+
+.agentic-message-response :where(hr) {
+	border: 0;
+	border-block-start: 1px solid var(--border);
+	margin-block: 1rem;
+}
+
+.agentic-message-response :where(blockquote) {
+	border-inline-start: 2px solid var(--border);
+	color: var(--muted-foreground);
+	font-style: normal;
+	margin-block: 1rem;
+	padding-inline-start: 0.875rem;
+}
+
+.agentic-message-response :where(code),
+.agentic-message-response :where(kbd),
+.agentic-message-response :where(pre) {
+	font-family: var(--font-ciridae-mono);
+	font-variant-numeric: tabular-nums;
+}
+
+.agentic-message-response :where(:not(pre) > code),
+.agentic-message-response [data-streamdown="inline-code"] {
+	background: var(--muted);
+	border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+	border-radius: var(--radius-sm);
+	color: var(--foreground);
+	font-size: 0.8125rem;
+	padding: 0.0625rem 0.3125rem;
+}
+
+.agentic-message-response [data-streamdown="code-block"],
+.agentic-message-response [data-streamdown="mermaid-block"] {
+	background: color-mix(in oklch, var(--muted) 52%, transparent);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-xs);
+	margin-block: 1rem;
+	max-width: 100%;
+	overflow: hidden;
+	padding: 0.5rem;
+}
+
+.agentic-message-response [data-streamdown="code-block-header"] {
+	color: var(--muted-foreground);
+	font-size: 0.75rem;
+	height: 1.75rem;
+	line-height: 1.75rem;
+}
+
+.agentic-message-response [data-streamdown="code-block-body"] {
+	background: var(--background);
+	border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+	border-radius: var(--radius-md);
+	font-size: 0.8125rem;
+	line-height: 1.55;
+	overflow-x: auto;
+	padding: 0.875rem;
+}
+
+.agentic-message-response [data-streamdown="code-block-body"] pre {
+	background: transparent;
+	margin: 0;
+}
+
+.agentic-message-response [data-streamdown="code-block-actions"],
+.agentic-message-response [data-streamdown="mermaid-block-actions"] {
+	align-items: center;
+	background: color-mix(in oklch, var(--background) 88%, transparent);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+	gap: 0.125rem;
+	min-height: 1.75rem;
+	padding: 0.125rem;
+	transform: translateY(-0.625rem);
+}
+
+.agentic-message-response [data-streamdown="code-block-copy-button"],
+.agentic-message-response [data-streamdown="code-block-download-button"],
+.agentic-message-response [data-streamdown="table-copy-button"],
+.agentic-message-response [data-streamdown="table-download-button"],
+.agentic-message-response [data-streamdown="mermaid-copy-button"],
+.agentic-message-response [data-streamdown="mermaid-download-button"] {
+	align-items: center;
+	color: var(--muted-foreground);
+	display: inline-flex;
+	height: 1.5rem;
+	justify-content: center;
+	transition:
+		background-color var(--motion-duration-fast) var(--motion-ease-standard),
+		color var(--motion-duration-fast) var(--motion-ease-standard);
+	width: 1.5rem;
+}
+
+.agentic-message-response [data-streamdown="code-block-copy-button"]:hover,
+.agentic-message-response [data-streamdown="code-block-download-button"]:hover,
+.agentic-message-response [data-streamdown="table-copy-button"]:hover,
+.agentic-message-response [data-streamdown="table-download-button"]:hover,
+.agentic-message-response [data-streamdown="mermaid-copy-button"]:hover,
+.agentic-message-response [data-streamdown="mermaid-download-button"]:hover {
+	background: var(--accent);
+	color: var(--accent-foreground);
+}
+
+.agentic-message-response :where(table) {
+	border: 1px solid var(--border);
+	border-collapse: separate;
+	border-radius: var(--radius-md);
+	border-spacing: 0;
+	display: block;
+	margin-block: 1rem;
+	max-width: 100%;
+	overflow-x: auto;
+	width: max-content;
+}
+
+.agentic-message-response :where(thead) {
+	background: var(--muted);
+	color: var(--table-header-foreground);
+}
+
+.agentic-message-response :where(th, td) {
+	border-block-end: 1px solid var(--border);
+	font-size: 0.8125rem;
+	padding: 0.5rem 0.625rem;
+	text-align: start;
+	vertical-align: top;
+}
+
+.agentic-message-response :where(th) {
+	font-weight: var(--font-ciridae-metadata-weight);
+}
+
+.agentic-message-response :where(tr:last-child td) {
+	border-block-end: 0;
+}
+
+.agentic-message-response :where(.katex-display) {
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding-block: 0.25rem;
+}
+
+.agentic-message-response [data-streamdown="mermaid"] {
+	background: var(--background);
+	border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+	border-radius: var(--radius-md);
+	color: var(--foreground);
+	padding: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.agentic-message-response [data-sd-animate] {
+		animation: none !important;
+	}
+}

package/dist/components/agentic/message-response.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/dist/components/agentic/message.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import { Streamdown } from "streamdown";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, type MessageBranchContentProps, type MessageBranchNextProps, type MessageBranchPageProps, type MessageBranchPreviousProps, type MessageBranchProps, type MessageBranchSelectorProps } from "@ciridae/ui/message-branch";
+import type { AgenticMessageRole } from "@ciridae/ui/types";
+import "@ciridae/ui/message-response.css";
+import { Button } from "@ciridae/ui/button";
+type MessageProps = React.ComponentProps<"div"> & {
+    role: AgenticMessageRole;
+};
+type MessageContentProps = React.ComponentProps<"div"> & {
+    variant?: "default" | "bubble";
+};
+type MessageActionsProps = React.ComponentProps<"div">;
+type MessageActionProps = React.ComponentProps<typeof Button> & {
+    label?: string;
+    tooltip?: string;
+};
+type MessageToolbarProps = React.ComponentProps<"div">;
+type MessageResponseProps = React.ComponentProps<typeof Streamdown>;
+declare function Message({ className, role, ...props }: MessageProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageContent({ className, variant, ...props }: MessageContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageActions({ className, ...props }: MessageActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageAction({ children, label, tooltip, variant, size, ...props }: MessageActionProps): import("react/jsx-runtime").JSX.Element;
+declare const MessageResponse: React.MemoExoticComponent<({ animated, className, plugins, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
+declare function MessageToolbar({ className, ...props }: MessageToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };
+export type { MessageActionProps, MessageActionsProps, MessageBranchContentProps, MessageBranchNextProps, MessageBranchPageProps, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelectorProps, MessageContentProps, MessageProps, MessageResponseProps, MessageToolbarProps, };

package/dist/components/agentic/message.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { memo, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+import { MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, } from "@ciridae/ui/message-branch";
+import "@ciridae/ui/message-response.css";
+import { Button } from "@ciridae/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn } from "@ciridae/ui/utils";
+const streamdownPlugins = { cjk, code, math, mermaid };
+const messageResponseAnimation = {
+    animation: "fade-in",
+    duration: 200,
+    easing: "var(--motion-ease-standard)",
+    sep: "word",
+};
+function Message({ className, role, ...props }) {
+    return (_jsx("div", { "data-role": role, "data-slot": "message", className: cn("group/message flex w-full flex-col gap-2", role === "user" ? "items-end" : "items-start", role === "system" ? "py-1" : undefined, className), ...props }));
+}
+function MessageContent({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "message-content", "data-variant": variant, className: cn("min-w-0 max-w-[min(42rem,100%)] text-sm leading-relaxed", "data-[variant=bubble]:rounded-lg data-[variant=bubble]:border data-[variant=bubble]:bg-card data-[variant=bubble]:px-4 data-[variant=bubble]:py-3 data-[variant=bubble]:text-card-foreground data-[variant=bubble]:shadow-xs", "group-data-[role=user]/message:max-w-[min(34rem,78%)] group-data-[role=user]/message:rounded-lg group-data-[role=user]/message:border group-data-[role=user]/message:bg-secondary group-data-[role=user]/message:px-4 group-data-[role=user]/message:py-3 group-data-[role=user]/message:text-secondary-foreground group-data-[role=user]/message:shadow-xs", "group-data-[role=assistant]/message:text-foreground", "group-data-[role=system]/message:max-w-full group-data-[role=system]/message:rounded-md group-data-[role=system]/message:border group-data-[role=system]/message:bg-muted/30 group-data-[role=system]/message:px-3 group-data-[role=system]/message:py-2 group-data-[role=system]/message:text-xs group-data-[role=system]/message:text-muted-foreground", className), ...props }));
+}
+function MessageActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-actions", className: cn("flex items-center gap-1", className), ...props }));
+}
+function MessageAction({ children, label, tooltip, variant = "ghost", size = "icon-sm", ...props }) {
+    const accessibleLabel = props["aria-label"] ?? label ?? tooltip;
+    const button = (_jsxs(Button, { "aria-label": accessibleLabel, size: size, type: "button", variant: variant, ...props, children: [children, label || tooltip ? _jsx("span", { className: "sr-only", children: label ?? tooltip }) : null] }));
+    if (!tooltip)
+        return button;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+}
+const MessageResponse = memo(function MessageResponse({ animated, className, plugins, ...props }) {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const resolvedAnimation = animated === true ? messageResponseAnimation : animated;
+    return (_jsx(Streamdown, { animated: prefersReducedMotion ? false : resolvedAnimation, className: cn("agentic-message-response", className), plugins: { ...streamdownPlugins, ...plugins }, ...props }));
+});
+MessageResponse.displayName = "MessageResponse";
+function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const handleChange = (event) => setPrefersReducedMotion(event.matches);
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, []);
+    return prefersReducedMotion;
+}
+function MessageToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-toolbar", className: cn("mt-1 flex w-full max-w-[min(42rem,100%)] items-center justify-between gap-3", "group-data-[role=user]/message:ml-auto group-data-[role=system]/message:max-w-full", className), ...props }));
+}
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };

package/dist/components/agentic/mic-selector.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import type { AgenticMicOption } from "@ciridae/ui/types";
+import { CommandEmpty, CommandInput, CommandItem, CommandList } from "@ciridae/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@ciridae/ui/popover";
+type MicSelectorContextValue = {
+    data: AgenticMicOption[];
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setValue: (value: string | undefined) => void;
+    setWidth: (width: number) => void;
+    value: string | undefined;
+    width: number;
+};
+type MicSelectorProps = React.ComponentProps<typeof Popover> & {
+    defaultValue?: string;
+    mics?: AgenticMicOption[];
+    onValueChange?: (value: string | undefined) => void;
+    value?: string;
+};
+type MicSelectorTriggerProps = React.ComponentProps<typeof PopoverTrigger>;
+type MicSelectorContentProps = React.ComponentProps<typeof PopoverContent> & {
+    popoverOptions?: React.ComponentProps<typeof PopoverContent>;
+};
+type MicSelectorInputProps = React.ComponentProps<typeof CommandInput>;
+type MicSelectorListProps = Omit<React.ComponentProps<typeof CommandList>, "children"> & {
+    children: (mics: AgenticMicOption[]) => React.ReactNode;
+};
+type MicSelectorEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type MicSelectorItemProps = React.ComponentProps<typeof CommandItem> & {
+    mic?: AgenticMicOption;
+};
+type MicSelectorLabelProps = React.ComponentProps<"span"> & {
+    mic: AgenticMicOption;
+};
+type MicSelectorValueProps = React.ComponentProps<"span"> & {
+    placeholder?: string;
+};
+declare function MicSelector({ children, defaultOpen, defaultValue, mics, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }: MicSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function useMicSelector(): MicSelectorContextValue;
+declare function useAudioDevices({ enabled }?: {
+    enabled?: boolean;
+}): {
+    devices: AgenticMicOption[];
+    error: string | null;
+    hasPermission: boolean;
+    loadDevices: () => Promise<void>;
+    loading: boolean;
+};
+declare function MicSelectorTrigger({ children, ...props }: MicSelectorTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorContent({ className, popoverOptions, style, ...props }: MicSelectorContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorInput(props: MicSelectorInputProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorList({ children, ...props }: MicSelectorListProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorEmpty({ children, ...props }: MicSelectorEmptyProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorItem({ children, mic, onSelect, value, ...props }: MicSelectorItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorLabel({ className, mic, ...props }: MicSelectorLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function MicSelectorValue({ className, placeholder, ...props }: MicSelectorValueProps): import("react/jsx-runtime").JSX.Element;
+export { MicSelector, MicSelectorContent, MicSelectorEmpty, MicSelectorInput, MicSelectorItem, MicSelectorLabel, MicSelectorList, MicSelectorTrigger, MicSelectorValue, useAudioDevices, useMicSelector, };
+export type { MicSelectorContentProps, MicSelectorEmptyProps, MicSelectorInputProps, MicSelectorItemProps, MicSelectorLabelProps, MicSelectorListProps, MicSelectorProps, MicSelectorTriggerProps, MicSelectorValueProps, };

package/dist/components/agentic/mic-selector.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { ChevronsUpDownIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, } from "@ciridae/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@ciridae/ui/popover";
+import { cn } from "@ciridae/ui/utils";
+import { useControllableState } from "./use-controllable-state";
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+const MicSelectorContext = React.createContext(null);
+function MicSelector({ children, defaultOpen = false, defaultValue, mics, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }) {
+    const [value, setValue] = useControllableState({
+        defaultValue,
+        onChange: onValueChange,
+        value: valueProp,
+    });
+    const [open, setOpen] = useControllableState({
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+        value: openProp,
+    });
+    const [width, setWidth] = React.useState(200);
+    const audioDevices = useAudioDevices({ enabled: !mics });
+    const { devices: detectedMics, hasPermission, loadDevices, loading: devicesLoading, } = audioDevices;
+    const attemptedPermissionRef = React.useRef(false);
+    React.useEffect(() => {
+        if (open && !mics && !hasPermission && !devicesLoading && !attemptedPermissionRef.current) {
+            attemptedPermissionRef.current = true;
+            void loadDevices();
+        }
+    }, [devicesLoading, hasPermission, loadDevices, mics, open]);
+    React.useEffect(() => {
+        if (!open)
+            attemptedPermissionRef.current = false;
+    }, [open]);
+    const contextValue = React.useMemo(() => ({
+        data: mics ?? detectedMics,
+        open,
+        setOpen,
+        setValue,
+        setWidth,
+        value,
+        width,
+    }), [detectedMics, mics, open, setOpen, setValue, value, width]);
+    return (_jsx(MicSelectorContext.Provider, { value: contextValue, children: _jsx(Popover, { onOpenChange: setOpen, open: open, ...props, children: children ?? _jsx(MicSelectorDefaultContent, {}) }) }));
+}
+function MicSelectorDefaultContent() {
+    return (_jsxs(_Fragment, { children: [_jsx(MicSelectorTrigger, { asChild: true, children: _jsxs(Button, { className: "w-64 justify-between", variant: "outline", children: [_jsx(MicSelectorValue, { className: "max-w-52 text-left" }), _jsx(ChevronsUpDownIcon, { className: "size-4 opacity-60" })] }) }), _jsxs(MicSelectorContent, { children: [_jsx(MicSelectorInput, { placeholder: "Search microphones..." }), _jsx(MicSelectorList, { children: (devices) => (_jsxs(_Fragment, { children: [_jsx(MicSelectorEmpty, { children: "No microphone found." }), devices.map((mic) => (_jsx(MicSelectorItem, { mic: mic }, mic.id)))] })) })] })] }));
+}
+function useMicSelector() {
+    const context = React.useContext(MicSelectorContext);
+    if (!context)
+        throw new Error("MicSelector components must be used within MicSelector");
+    return context;
+}
+function useAudioDevices({ enabled = true } = {}) {
+    const [devices, setDevices] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [hasPermission, setHasPermission] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const loadDevicesWithoutPermission = React.useCallback(async () => {
+        if (!enabled || !navigator.mediaDevices?.enumerateDevices)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            const deviceList = await navigator.mediaDevices.enumerateDevices();
+            setDevices(deviceList.filter(isAudioInput).map(mediaDeviceToMicOption));
+        }
+        catch (caughtError) {
+            setError(caughtError instanceof Error ? caughtError.message : "Failed to get audio devices");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [enabled]);
+    const loadDevices = React.useCallback(async () => {
+        if (!enabled || !navigator.mediaDevices?.getUserMedia)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            for (const track of stream.getTracks())
+                track.stop();
+            const deviceList = await navigator.mediaDevices.enumerateDevices();
+            setDevices(deviceList.filter(isAudioInput).map(mediaDeviceToMicOption));
+            setHasPermission(true);
+        }
+        catch (caughtError) {
+            setError(caughtError instanceof Error ? caughtError.message : "Failed to get audio devices");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [enabled]);
+    React.useEffect(() => {
+        void loadDevicesWithoutPermission();
+    }, [loadDevicesWithoutPermission]);
+    React.useEffect(() => {
+        if (!enabled || !navigator.mediaDevices?.addEventListener)
+            return;
+        const handleDeviceChange = () => {
+            void (hasPermission ? loadDevices() : loadDevicesWithoutPermission());
+        };
+        navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+        return () => navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+    }, [enabled, hasPermission, loadDevices, loadDevicesWithoutPermission]);
+    return { devices, error, hasPermission, loadDevices, loading };
+}
+function MicSelectorTrigger({ children, ...props }) {
+    const { setWidth } = useMicSelector();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            if (entry?.target instanceof HTMLElement)
+                setWidth(entry.target.offsetWidth);
+        });
+        resizeObserver.observe(ref.current);
+        return () => resizeObserver.disconnect();
+    }, [setWidth]);
+    return (_jsx(PopoverTrigger, { ref: ref, ...props, children: children }));
+}
+function MicSelectorContent({ className, popoverOptions, style, ...props }) {
+    const { width } = useMicSelector();
+    const { className: popoverClassName, style: popoverStyle, ...popoverContentOptions } = popoverOptions ?? {};
+    return (_jsx(PopoverContent, { align: "start", ...popoverContentOptions, ...props, className: cn("p-0", popoverClassName, className), style: { ...popoverStyle, ...style, width }, children: _jsx(Command, { children: props.children }) }));
+}
+function MicSelectorInput(props) {
+    return _jsx(CommandInput, { ...props });
+}
+function MicSelectorList({ children, ...props }) {
+    const { data } = useMicSelector();
+    return _jsx(CommandList, { ...props, children: children(data) });
+}
+function MicSelectorEmpty({ children = "No microphone found.", ...props }) {
+    return _jsx(CommandEmpty, { ...props, children: children });
+}
+function MicSelectorItem({ children, mic, onSelect, value, ...props }) {
+    const { setOpen, setValue } = useMicSelector();
+    const itemValue = value ?? mic?.id;
+    return (_jsx(CommandItem, { onSelect: (currentValue) => {
+            setValue(itemValue ?? currentValue);
+            setOpen(false);
+            onSelect?.(currentValue);
+        }, value: itemValue, ...props, children: children ?? (mic ? _jsx(MicSelectorLabel, { mic: mic }) : null) }));
+}
+function MicSelectorLabel({ className, mic, ...props }) {
+    const matches = mic.label.match(deviceIdRegex);
+    const deviceId = matches?.[1];
+    const name = deviceId ? mic.label.replace(deviceIdRegex, "").trim() : mic.label;
+    return (_jsxs("span", { className: cn("grid min-w-0 gap-0.5", className), ...props, children: [_jsx("span", { className: "truncate", children: name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: mic.description ?? (deviceId ? `Device ${deviceId}` : "Audio input") })] }));
+}
+function MicSelectorValue({ className, placeholder = "Select microphone...", ...props }) {
+    const { data, value } = useMicSelector();
+    const currentDevice = data.find((device) => device.id === value);
+    return (_jsx("span", { className: cn("truncate", className), ...props, children: currentDevice?.label ?? placeholder }));
+}
+function isAudioInput(device) {
+    return device.kind === "audioinput";
+}
+function mediaDeviceToMicOption(device) {
+    return {
+        description: device.groupId ? `Group ${device.groupId.slice(0, 8)}` : undefined,
+        id: device.deviceId,
+        label: device.label || "Microphone",
+        mediaType: device.kind,
+    };
+}
+export { MicSelector, MicSelectorContent, MicSelectorEmpty, MicSelectorInput, MicSelectorItem, MicSelectorLabel, MicSelectorList, MicSelectorTrigger, MicSelectorValue, useAudioDevices, useMicSelector, };

package/dist/components/agentic/model-selector.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "@ciridae/ui/dialog";
+type ModelSelectorProps = React.ComponentProps<typeof Dialog>;
+type ModelSelectorTriggerProps = React.ComponentProps<typeof DialogTrigger>;
+type ModelSelectorContentProps = React.ComponentProps<typeof DialogContent> & {
+    title?: React.ReactNode;
+};
+type ModelSelectorDialogProps = React.ComponentProps<typeof CommandDialog>;
+type ModelSelectorInputProps = React.ComponentProps<typeof CommandInput>;
+type ModelSelectorListProps = React.ComponentProps<typeof CommandList>;
+type ModelSelectorEmptyProps = React.ComponentProps<typeof CommandEmpty>;
+type ModelSelectorGroupProps = React.ComponentProps<typeof CommandGroup>;
+type ModelSelectorItemProps = React.ComponentProps<typeof CommandItem>;
+type ModelSelectorShortcutProps = React.ComponentProps<typeof CommandShortcut>;
+type ModelSelectorSeparatorProps = React.ComponentProps<typeof CommandSeparator>;
+type ModelSelectorLogoProps = Omit<React.ComponentProps<"img">, "alt" | "src"> & {
+    alt?: string;
+    provider: string;
+    src?: string;
+};
+type ModelSelectorLogoGroupProps = React.ComponentProps<"div">;
+type ModelSelectorNameProps = React.ComponentProps<"span">;
+declare function ModelSelector(props: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorTrigger(props: ModelSelectorTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorContent({ children, className, title, ...props }: ModelSelectorContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorDialog(props: ModelSelectorDialogProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorInput({ className, ...props }: ModelSelectorInputProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorList(props: ModelSelectorListProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorEmpty(props: ModelSelectorEmptyProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorGroup(props: ModelSelectorGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorItem(props: ModelSelectorItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorShortcut(props: ModelSelectorShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorSeparator(props: ModelSelectorSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorLogo({ alt, className, provider, src, ...props }: ModelSelectorLogoProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorLogoGroup({ className, ...props }: ModelSelectorLogoGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ModelSelectorName({ className, ...props }: ModelSelectorNameProps): import("react/jsx-runtime").JSX.Element;
+export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, };
+export type { ModelSelectorContentProps, ModelSelectorDialogProps, ModelSelectorEmptyProps, ModelSelectorGroupProps, ModelSelectorInputProps, ModelSelectorItemProps, ModelSelectorListProps, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparatorProps, ModelSelectorShortcutProps, ModelSelectorTriggerProps, };