@cloudbase/agent-react-ui 1.0.1-alpha.32

package/src/components/ai-elements/mic-selector.tsx

@@ -0,0 +1,370 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+
+interface MicSelectorContextType {
+  data: MediaDeviceInfo[];
+  value: string | undefined;
+  onValueChange?: (value: string) => void;
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+  width: number;
+  setWidth?: (width: number) => void;
+}
+
+const MicSelectorContext = createContext<MicSelectorContextType>({
+  data: [],
+  value: undefined,
+  onValueChange: undefined,
+  open: false,
+  onOpenChange: undefined,
+  width: 200,
+  setWidth: undefined,
+});
+
+export type MicSelectorProps = ComponentProps<typeof Popover> & {
+  defaultValue?: string;
+  value?: string | undefined;
+  onValueChange?: (value: string | undefined) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}: MicSelectorProps) => {
+  const [value, onValueChange] = useControllableState<string | undefined>({
+    defaultProp: defaultValue,
+    prop: controlledValue,
+    onChange: controlledOnValueChange,
+  });
+  const [open, onOpenChange] = useControllableState({
+    defaultProp: defaultOpen,
+    prop: controlledOpen,
+    onChange: controlledOnOpenChange,
+  });
+  const [width, setWidth] = useState(200);
+  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
+
+  useEffect(() => {
+    if (open && !hasPermission && !loading) {
+      loadDevices();
+    }
+  }, [open, hasPermission, loading, loadDevices]);
+
+  return (
+    <MicSelectorContext.Provider
+      value={{
+        data: devices,
+        value,
+        onValueChange,
+        open,
+        onOpenChange,
+        width,
+        setWidth,
+      }}
+    >
+      <Popover {...props} onOpenChange={onOpenChange} open={open} />
+    </MicSelectorContext.Provider>
+  );
+};
+
+export type MicSelectorTriggerProps = ComponentProps<typeof Button>;
+
+export const MicSelectorTrigger = ({
+  children,
+  ...props
+}: MicSelectorTriggerProps) => {
+  const { setWidth } = useContext(MicSelectorContext);
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    // Create a ResizeObserver to detect width changes
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = (entry.target as HTMLElement).offsetWidth;
+        if (newWidth) {
+          setWidth?.(newWidth);
+        }
+      }
+    });
+
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+
+    // Clean up the observer when component unmounts
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+
+  return (
+    <PopoverTrigger asChild>
+      <Button variant="outline" {...props} ref={ref}>
+        {children}
+        <ChevronsUpDownIcon
+          className="shrink-0 text-muted-foreground"
+          size={16}
+        />
+      </Button>
+    </PopoverTrigger>
+  );
+};
+
+export type MicSelectorContentProps = ComponentProps<typeof Command> & {
+  popoverOptions?: ComponentProps<typeof PopoverContent>;
+};
+
+export const MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}: MicSelectorContentProps) => {
+  const { width, onValueChange, value } = useContext(MicSelectorContext);
+
+  return (
+    <PopoverContent
+      className={cn("p-0", className)}
+      style={{ width }}
+      {...popoverOptions}
+    >
+      <Command onValueChange={onValueChange} value={value} {...props} />
+    </PopoverContent>
+  );
+};
+
+export type MicSelectorInputProps = ComponentProps<typeof CommandInput> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export const MicSelectorInput = ({ ...props }: MicSelectorInputProps) => (
+  <CommandInput placeholder="Search microphones..." {...props} />
+);
+
+export type MicSelectorListProps = Omit<
+  ComponentProps<typeof CommandList>,
+  "children"
+> & {
+  children: (devices: MediaDeviceInfo[]) => ReactNode;
+};
+
+export const MicSelectorList = ({
+  children,
+  ...props
+}: MicSelectorListProps) => {
+  const { data } = useContext(MicSelectorContext);
+
+  return <CommandList {...props}>{children(data)}</CommandList>;
+};
+
+export type MicSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}: MicSelectorEmptyProps) => <CommandEmpty {...props}>{children}</CommandEmpty>;
+
+export type MicSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const MicSelectorItem = (props: MicSelectorItemProps) => {
+  const { onValueChange, onOpenChange } = useContext(MicSelectorContext);
+
+  return (
+    <CommandItem
+      onSelect={(currentValue) => {
+        onValueChange?.(currentValue);
+        onOpenChange?.(false);
+      }}
+      {...props}
+    />
+  );
+};
+
+export type MicSelectorLabelProps = ComponentProps<"span"> & {
+  device: MediaDeviceInfo;
+};
+
+export const MicSelectorLabel = ({
+  device,
+  className,
+  ...props
+}: MicSelectorLabelProps) => {
+  const matches = device.label.match(deviceIdRegex);
+
+  console.log(matches, device.label);
+
+  if (!matches) {
+    return (
+      <span className={className} {...props}>
+        {device.label}
+      </span>
+    );
+  }
+
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+
+  return (
+    <span className={className} {...props}>
+      <span>{name}</span>
+      <span className="text-muted-foreground"> ({deviceId})</span>
+    </span>
+  );
+};
+
+export type MicSelectorValueProps = ComponentProps<"span">;
+
+export const MicSelectorValue = ({
+  className,
+  ...props
+}: MicSelectorValueProps) => {
+  const { data, value } = useContext(MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+
+  if (!currentDevice) {
+    return (
+      <span className={cn("flex-1 text-left", className)} {...props}>
+        Select microphone...
+      </span>
+    );
+  }
+
+  return (
+    <MicSelectorLabel
+      className={cn("flex-1 text-left", className)}
+      device={currentDevice}
+      {...props}
+    />
+  );
+};
+
+export const useAudioDevices = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [hasPermission, setHasPermission] = useState(false);
+
+  const loadDevicesWithoutPermission = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+
+      setDevices(audioInputs);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to get audio devices";
+
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadDevicesWithPermission = useCallback(async () => {
+    if (loading) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const tempStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
+
+      for (const track of tempStream.getTracks()) {
+        track.stop();
+      }
+
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+
+      setDevices(audioInputs);
+      setHasPermission(true);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to get audio devices";
+
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    loadDevicesWithoutPermission();
+  }, [loadDevicesWithoutPermission]);
+
+  useEffect(() => {
+    const handleDeviceChange = () => {
+      if (hasPermission) {
+        loadDevicesWithPermission();
+      } else {
+        loadDevicesWithoutPermission();
+      }
+    };
+
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+
+    return () => {
+      navigator.mediaDevices.removeEventListener(
+        "devicechange",
+        handleDeviceChange
+      );
+    };
+  }, [hasPermission, loadDevicesWithPermission, loadDevicesWithoutPermission]);
+
+  return {
+    devices,
+    loading,
+    error,
+    hasPermission,
+    loadDevices: loadDevicesWithPermission,
+  };
+};

package/src/components/ai-elements/model-selector.tsx

@@ -0,0 +1,211 @@
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+export type ModelSelectorProps = ComponentProps<typeof Dialog>;
+
+export const ModelSelector = (props: ModelSelectorProps) => (
+  <Dialog {...props} />
+);
+
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+  <DialogTrigger {...props} />
+);
+
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+  title?: ReactNode;
+};
+
+export const ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}: ModelSelectorContentProps) => (
+  <DialogContent
+    className={cn(
+      "outline! border-none! p-0 outline-border! outline-solid!",
+      className
+    )}
+    {...props}
+  >
+    <DialogTitle className="sr-only">{title}</DialogTitle>
+    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
+      {children}
+    </Command>
+  </DialogContent>
+);
+
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+  <CommandDialog {...props} />
+);
+
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+
+export const ModelSelectorInput = ({
+  className,
+  ...props
+}: ModelSelectorInputProps) => (
+  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+);
+
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
+  <CommandList {...props} />
+);
+
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+  <CommandEmpty {...props} />
+);
+
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+  <CommandGroup {...props} />
+);
+
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+  <CommandItem {...props} />
+);
+
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+  <CommandShortcut {...props} />
+);
+
+export type ModelSelectorSeparatorProps = ComponentProps<
+  typeof CommandSeparator
+>;
+
+export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
+  <CommandSeparator {...props} />
+);
+
+export type ModelSelectorLogoProps = Omit<
+  ComponentProps<"img">,
+  "src" | "alt"
+> & {
+  provider:
+    | "moonshotai-cn"
+    | "lucidquery"
+    | "moonshotai"
+    | "zai-coding-plan"
+    | "alibaba"
+    | "xai"
+    | "vultr"
+    | "nvidia"
+    | "upstage"
+    | "groq"
+    | "github-copilot"
+    | "mistral"
+    | "vercel"
+    | "nebius"
+    | "deepseek"
+    | "alibaba-cn"
+    | "google-vertex-anthropic"
+    | "venice"
+    | "chutes"
+    | "cortecs"
+    | "github-models"
+    | "togetherai"
+    | "azure"
+    | "baseten"
+    | "huggingface"
+    | "opencode"
+    | "fastrouter"
+    | "google"
+    | "google-vertex"
+    | "cloudflare-workers-ai"
+    | "inception"
+    | "wandb"
+    | "openai"
+    | "zhipuai-coding-plan"
+    | "perplexity"
+    | "openrouter"
+    | "zenmux"
+    | "v0"
+    | "iflowcn"
+    | "synthetic"
+    | "deepinfra"
+    | "zhipuai"
+    | "submodel"
+    | "zai"
+    | "inference"
+    | "requesty"
+    | "morph"
+    | "lmstudio"
+    | "anthropic"
+    | "aihubmix"
+    | "fireworks-ai"
+    | "modelscope"
+    | "llama"
+    | "scaleway"
+    | "amazon-bedrock"
+    | "cerebras"
+    | (string & {});
+};
+
+export const ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}: ModelSelectorLogoProps) => (
+  <img
+    {...props}
+    alt={`${provider} logo`}
+    className={cn("size-3 dark:invert", className)}
+    height={12}
+    src={`https://models.dev/logos/${provider}.svg`}
+    width={12}
+  />
+);
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+
+export const ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}: ModelSelectorLogoGroupProps) => (
+  <div
+    className={cn(
+      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ModelSelectorNameProps = ComponentProps<"span">;
+
+export const ModelSelectorName = ({
+  className,
+  ...props
+}: ModelSelectorNameProps) => (
+  <span className={cn("flex-1 truncate text-left", className)} {...props} />
+);

package/src/components/ai-elements/node.tsx

@@ -0,0 +1,71 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Handle, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type NodeProps = ComponentProps<typeof Card> & {
+  handles: {
+    target: boolean;
+    source: boolean;
+  };
+};
+
+export const Node = ({ handles, className, ...props }: NodeProps) => (
+  <Card
+    className={cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    )}
+    {...props}
+  >
+    {handles.target && <Handle position={Position.Left} type="target" />}
+    {handles.source && <Handle position={Position.Right} type="source" />}
+    {props.children}
+  </Card>
+);
+
+export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+  <CardHeader
+    className={cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className)}
+    {...props}
+  />
+);
+
+export type NodeTitleProps = ComponentProps<typeof CardTitle>;
+
+export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
+
+export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+
+export const NodeDescription = (props: NodeDescriptionProps) => (
+  <CardDescription {...props} />
+);
+
+export type NodeActionProps = ComponentProps<typeof CardAction>;
+
+export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
+
+export type NodeContentProps = ComponentProps<typeof CardContent>;
+
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+  <CardContent className={cn("p-3", className)} {...props} />
+);
+
+export type NodeFooterProps = ComponentProps<typeof CardFooter>;
+
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+  <CardFooter
+    className={cn("rounded-b-md border-t bg-secondary p-3!", className)}
+    {...props}
+  />
+);