@openconsole/shadcn 0.2.5 → 0.2.7

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

@@ -1,375 +0,0 @@
-"use client";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Button } from "../ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../ui/popover";
-import { cn } from "../../lib/utils";
-import { ChevronsUpDownIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  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: [],
-  onOpenChange: undefined,
-  onValueChange: undefined,
-  open: false,
-  setWidth: undefined,
-  value: undefined,
-  width: 200,
-});
-
-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 (caughtError) {
-      const message =
-        caughtError instanceof Error
-          ? caughtError.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 (caughtError) {
-      const message =
-        caughtError instanceof Error
-          ? caughtError.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,
-    error,
-    hasPermission,
-    loadDevices: loadDevicesWithPermission,
-    loading,
-  };
-};
-
-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,
-    onChange: controlledOnValueChange,
-    prop: controlledValue,
-  });
-  const [open, onOpenChange] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: controlledOnOpenChange,
-    prop: controlledOpen,
-  });
-  const [width, setWidth] = useState(200);
-  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
-
-  useEffect(() => {
-    if (open && !hasPermission && !loading) {
-      loadDevices();
-    }
-  }, [open, hasPermission, loading, loadDevices]);
-
-  const contextValue = useMemo(
-    () => ({
-      data: devices,
-      onOpenChange,
-      onValueChange,
-      open,
-      setWidth,
-      value,
-      width,
-    }),
-    [devices, onOpenChange, onValueChange, open, setWidth, value, width]
-  );
-
-  return (
-    <MicSelectorContext.Provider value={contextValue}>
-      <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);
-
-  const handleSelect = useCallback(
-    (currentValue: string) => {
-      onValueChange?.(currentValue);
-      onOpenChange?.(false);
-    },
-    [onValueChange, onOpenChange]
-  );
-
-  return <CommandItem onSelect={handleSelect} {...props} />;
-};
-
-export type MicSelectorLabelProps = ComponentProps<"span"> & {
-  device: MediaDeviceInfo;
-};
-
-export const MicSelectorLabel = ({
-  device,
-  className,
-  ...props
-}: MicSelectorLabelProps) => {
-  const matches = device.label.match(deviceIdRegex);
-
-  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}
-    />
-  );
-};

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

@@ -1,213 +0,0 @@
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "../ui/command";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogTrigger,
-} from "../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
-    aria-describedby={undefined}
-    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"
-    // oxlint-disable-next-line typescript-eslint(ban-types) -- intentional pattern for autocomplete-friendly string union
-    | (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/components/ai-elements/node.tsx

@@ -1,71 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../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}
-  />
-);