Model Selector

"use client";import {  memo,  useCallback,  useEffect,  useMemo,  useRef,  useState,  createContext,  useContext,  type ComponentPropsWithoutRef,  type ReactNode,} from "react";import { cva, type VariantProps } from "class-variance-authority";import { CheckIcon, ChevronDownIcon } from "lucide-react";import { useAui } from "@assistant-ui/react";import { cn } from "@/lib/utils";import {  Popover,  PopoverContent,  PopoverTrigger,} from "@/components/ui/popover";import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,  CommandSeparator,} from "@/components/ui/command";import { RadioGroup } from "@base-ui/react/radio-group";import { Radio } from "@base-ui/react/radio";export type ModelSelectorEffortOption = {  id: string;  name: string;};export const DEFAULT_EFFORT_OPTIONS: readonly ModelSelectorEffortOption[] = [  { id: "low", name: "Low" },  { id: "medium", name: "Med" },  { id: "high", name: "High" },];export type ModelOption = {  id: string;  name: string;  description?: string;  icon?: ReactNode;  disabled?: boolean;  /** Extra terms matched by ModelSelector.Search, in addition to id and name. */  keywords?: readonly string[];  /**   * Reasoning effort levels the model supports. Pass `true` for the default   * low/medium/high levels, or a custom list. Omit for models without   * configurable reasoning.   */  efforts?: boolean | readonly ModelSelectorEffortOption[];};function getModelEfforts(  model: ModelOption | undefined,): readonly ModelSelectorEffortOption[] | undefined {  if (!model?.efforts) return undefined;  return model.efforts === true ? DEFAULT_EFFORT_OPTIONS : model.efforts;}function resolveEffort(  efforts: readonly ModelSelectorEffortOption[] | undefined,  effort: string | undefined,): string | undefined {  if (effort === undefined) return undefined;  return efforts?.some((e) => e.id === effort) ? effort : undefined;}/** * Returns the effort id if the given model supports it, otherwise undefined. * Effort selection is kept sticky across model switches; this resolves what * actually applies to the current model. */export function resolveModelEffort(  models: readonly ModelOption[],  modelId: string | undefined,  effort: string | undefined,): string | undefined {  return resolveEffort(    getModelEfforts(models.find((m) => m.id === modelId)),    effort,  );}function useControllableState<T>({  prop,  defaultProp,  onChange,}: {  prop: T | undefined;  defaultProp: T | undefined;  onChange: ((next: T) => void) | undefined;}) {  const [internal, setInternal] = useState(defaultProp);  const isControlled = prop !== undefined;  const value = isControlled ? prop : internal;  // Read onChange through a ref so inline callbacks don't recreate the setter  // (and with it the memoized context value) every render.  const onChangeRef = useRef(onChange);  useEffect(() => {    onChangeRef.current = onChange;  });  const setValue = useCallback(    (next: T) => {      if (!isControlled) setInternal(next);      onChangeRef.current?.(next);    },    [isControlled],  );  return [value, setValue] as const;}type ModelSelectorContextValue = {  models: readonly ModelOption[];  value: string | undefined;  setValue: (value: string) => void;  /** The model matching `value`, derived once for all sub-components. */  selectedModel: ModelOption | undefined;  /** The selected model's effort levels, undefined when not configurable. */  efforts: readonly ModelSelectorEffortOption[] | undefined;  /** Effort resolved against the selected model's supported levels. */  effort: string | undefined;  setEffort: (effort: string) => void;  setOpen: (open: boolean) => void;};const ModelSelectorContext = createContext<ModelSelectorContextValue | null>(  null,);function useModelSelectorContext() {  const ctx = useContext(ModelSelectorContext);  if (!ctx) {    throw new Error(      "ModelSelector sub-components must be used within ModelSelector.Root",    );  }  return ctx;}/** * The selected model's effort levels and the active selection. Use it to build * a custom effort UI inside ModelSelector.Content (e.g. a slider or a shadcn * DropdownMenu) when the built-in ModelSelector.Effort layout doesn't fit. * `efforts` is undefined for models without configurable reasoning. */export function useModelSelectorEfforts(): {  efforts: readonly ModelSelectorEffortOption[] | undefined;  effort: string | undefined;  setEffort: (effort: string) => void;} {  const { efforts, effort, setEffort } = useModelSelectorContext();  return { efforts, effort, setEffort };}export type ModelSelectorRootProps = {  models: readonly ModelOption[];  value?: string;  defaultValue?: string;  onValueChange?: (value: string) => void;  effort?: string;  defaultEffort?: string;  onEffortChange?: (effort: string) => void;  open?: boolean;  defaultOpen?: boolean;  onOpenChange?: (open: boolean) => void;  children: ReactNode;};function ModelSelectorRoot({  models,  value: valueProp,  defaultValue,  onValueChange,  effort: effortProp,  defaultEffort,  onEffortChange,  open: openProp,  defaultOpen,  onOpenChange,  children,}: ModelSelectorRootProps) {  const [value, setValue] = useControllableState({    prop: valueProp,    defaultProp: defaultValue ?? models[0]?.id,    onChange: onValueChange,  });  const [effort, setEffort] = useControllableState({    prop: effortProp,    defaultProp: defaultEffort,    onChange: onEffortChange,  });  const [open, setOpen] = useControllableState({    prop: openProp,    defaultProp: defaultOpen ?? false,    onChange: onOpenChange,  });  const selectedModel = models.find((m) => m.id === value);  const efforts = getModelEfforts(selectedModel);  const activeEffort = resolveEffort(efforts, effort);  const contextValue = useMemo(    () => ({      models,      value,      setValue,      selectedModel,      efforts,      effort: activeEffort,      setEffort,      setOpen,    }),    [      models,      value,      setValue,      selectedModel,      efforts,      activeEffort,      setEffort,      setOpen,    ],  );  return (    <ModelSelectorContext.Provider value={contextValue}>      <Popover open={open ?? false} onOpenChange={setOpen}>        {children}      </Popover>    </ModelSelectorContext.Provider>  );}export const modelSelectorTriggerVariants = cva(  "focus-visible:ring-ring/50 flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",  {    variants: {      variant: {        outline:          "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",        ghost: "hover:bg-accent hover:text-accent-foreground",        muted: "bg-secondary text-secondary-foreground hover:bg-secondary/80",      },      size: {        default: "h-9 px-3 py-2",        sm: "h-8 px-2.5 py-1.5 text-xs",        lg: "h-10 px-4 py-2.5",      },    },    defaultVariants: {      variant: "outline",      size: "default",    },  },);export type ModelSelectorTriggerProps = ComponentPropsWithoutRef<  typeof PopoverTrigger> &  VariantProps<typeof modelSelectorTriggerVariants>;function ModelSelectorTrigger({  className,  variant,  size,  children,  onKeyDown,  ...props}: ModelSelectorTriggerProps) {  const { setOpen } = useModelSelectorContext();  return (    <PopoverTrigger      data-slot="model-selector-trigger"      data-variant={variant ?? "outline"}      data-size={size ?? "default"}      role="combobox"      aria-haspopup="listbox"      className={cn(modelSelectorTriggerVariants({ variant, size }), className)}      onKeyDown={(e) => {        onKeyDown?.(e);        if (e.defaultPrevented) return;        // ARIA combobox: arrows open the listbox from a focused trigger.        // Popover leaves this to the consumer.        if (e.key === "ArrowDown" || e.key === "ArrowUp") {          e.preventDefault();          setOpen(true);        }      }}      {...props}    >      {children ?? <ModelSelectorValue />}      <ChevronDownIcon className="size-4 opacity-50" />    </PopoverTrigger>  );}export type ModelSelectorValueProps = {  placeholder?: ReactNode;  /** Show the active effort level next to the model name. */  showEffort?: boolean;  className?: string;};function ModelIcon({  children,  className,}: {  children: ReactNode;  className?: string;}) {  return (    <span      className={cn(        "flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5",        className,      )}    >      {children}    </span>  );}function ModelSelectorValue({  placeholder = "Select model",  showEffort = true,  className,}: ModelSelectorValueProps) {  const { selectedModel, efforts, effort } = useModelSelectorContext();  if (!selectedModel) {    return (      <span        data-slot="model-selector-value"        className={cn("text-muted-foreground", className)}      >        {placeholder}      </span>    );  }  const effortName =    showEffort && effort !== undefined      ? efforts?.find((e) => e.id === effort)?.name      : undefined;  return (    <span      data-slot="model-selector-value"      className={cn("flex min-w-0 items-center gap-2", className)}    >      {selectedModel.icon && <ModelIcon>{selectedModel.icon}</ModelIcon>}      <span className="truncate font-medium">{selectedModel.name}</span>      {effortName && (        <span className="text-muted-foreground min-w-7.5 truncate text-center">          {effortName}        </span>      )}    </span>  );}export type ModelSelectorContentProps = Omit<  ComponentPropsWithoutRef<typeof PopoverContent>,  "side"> & {  /**   * Preferred side for the initial placement. Once the popover is open, the   * rendered side takes over until it closes, so the popup does not jump   * between sides while filtering resizes the list.   */  side?: ComponentPropsWithoutRef<typeof PopoverContent>["side"];  searchable?: boolean;};// Base UI's Popover re-evaluates collision flipping whenever the popup// resizes, so filtering the list down flips the popup back to the preferred// side mid-interaction. Base UI only exposes its lazy-flip behavior on the// Combobox positioner, so mirror it here: feed the rendered side back as the// preferred side, making the popup keep its side until it no longer fits.function useLazyFlipSide(): {  side: ModelSelectorContentProps["side"];  popupRef: (node: HTMLDivElement | null) => void;} {  const [side, setSide] = useState<ModelSelectorContentProps["side"]>();  const observerRef = useRef<MutationObserver | null>(null);  const popupRef = useCallback((node: HTMLDivElement | null) => {    observerRef.current?.disconnect();    observerRef.current = null;    if (!node) {      setSide(undefined);      return;    }    const sync = () => {      const rendered = node.getAttribute("data-side");      if (rendered) setSide(rendered as ModelSelectorContentProps["side"]);    };    sync();    const observer = new MutationObserver(sync);    observer.observe(node, {      attributes: true,      attributeFilter: ["data-side"],    });    observerRef.current = observer;  }, []);  return { side, popupRef };}/** * Hidden input that anchors cmdk's keyboard navigation, keeping the list * keyboard-operable without a visible search box. ModelSelectorContent renders * one automatically when unfiltered. */function ModelSelectorFocusAnchor() {  return (    <div className="sr-only">      <CommandInput readOnly aria-label="Model" />    </div>  );}function ModelSelectorContent({  className,  align = "start",  side,  sideOffset = 6,  searchable,  children,  ...props}: ModelSelectorContentProps) {  const { value } = useModelSelectorContext();  const { side: renderedSide, popupRef } = useLazyFlipSide();  const unfiltered =    searchable === false || (!searchable && children === undefined);  return (    <PopoverContent      ref={popupRef}      data-slot="model-selector-content"      align={align}      side={renderedSide ?? side ?? "bottom"}      sideOffset={sideOffset}      className={cn(        "bg-popover/95 w-72 min-w-(--anchor-width) overflow-hidden rounded-xl p-0 shadow-lg backdrop-blur-sm",        className,      )}      {...props}    >      <Command        className="bg-transparent"        shouldFilter={!unfiltered}        {...(value !== undefined ? { defaultValue: value } : {})}      >        {unfiltered && <ModelSelectorFocusAnchor />}        {children ?? (          <>            {searchable && <ModelSelectorSearch />}            <ModelSelectorList />            <ModelSelectorEffort />          </>        )}      </Command>    </PopoverContent>  );}export type ModelSelectorSearchProps = ComponentPropsWithoutRef<  typeof CommandInput>;function ModelSelectorSearch({  placeholder = "Search models...",  ...props}: ModelSelectorSearchProps) {  return (    <CommandInput      data-slot="model-selector-search"      placeholder={placeholder}      {...props}    />  );}export type ModelSelectorListProps = ComponentPropsWithoutRef<  typeof CommandList>;function ModelSelectorList({  className,  children,  ...props}: ModelSelectorListProps) {  const { models } = useModelSelectorContext();  return (    <CommandList      data-slot="model-selector-list"      className={cn(        "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",        className,      )}      {...props}    >      {children ?? (        <>          <ModelSelectorEmpty />          <CommandGroup>            {models.map((model) => (              <ModelSelectorItem key={model.id} model={model} />            ))}          </CommandGroup>        </>      )}    </CommandList>  );}export type ModelSelectorEmptyProps = ComponentPropsWithoutRef<  typeof CommandEmpty>;function ModelSelectorEmpty({ children, ...props }: ModelSelectorEmptyProps) {  return (    <CommandEmpty data-slot="model-selector-empty" {...props}>      {children ?? "No models found."}    </CommandEmpty>  );}export type ModelSelectorGroupProps = ComponentPropsWithoutRef<  typeof CommandGroup>;function ModelSelectorGroup(props: ModelSelectorGroupProps) {  return <CommandGroup data-slot="model-selector-group" {...props} />;}export type ModelSelectorSeparatorProps = ComponentPropsWithoutRef<  typeof CommandSeparator>;function ModelSelectorSeparator(props: ModelSelectorSeparatorProps) {  return <CommandSeparator data-slot="model-selector-separator" {...props} />;}export type ModelSelectorItemProps = Omit<  ComponentPropsWithoutRef<typeof CommandItem>,  "value"> & {  model: ModelOption;};function ModelSelectorItem({  model,  className,  children,  onSelect,  ...props}: ModelSelectorItemProps) {  const { value, setValue, setOpen } = useModelSelectorContext();  const isSelected = value === model.id;  return (    <CommandItem      data-slot="model-selector-item"      value={model.id}      keywords={[model.name, ...(model.keywords ?? [])]}      {...(model.disabled ? { disabled: true } : undefined)}      onSelect={(selectedValue) => {        setValue(model.id);        setOpen(false);        onSelect?.(selectedValue);      }}      className={cn(        "relative items-start gap-2 rounded-lg py-2 ps-3 pe-9 [&_svg:not([class*='size-'])]:size-3.5",        className,      )}      {...props}    >      {children ?? (        <>          {model.icon && (            <ModelIcon className="mt-[3px]">{model.icon}</ModelIcon>          )}          <span className="flex min-w-0 flex-col">            <span className="truncate font-medium">{model.name}</span>            {model.description && (              <span className="text-muted-foreground truncate text-xs">                {model.description}              </span>            )}          </span>        </>      )}      {isSelected && (        <span className="absolute end-3 top-2.5 flex size-4 items-center justify-center">          <CheckIcon className="size-4" />        </span>      )}    </CommandItem>  );}export type ModelSelectorEffortProps = ComponentPropsWithoutRef<"div"> & {  label?: ReactNode;};function ModelSelectorEffort({  label = "Thinking",  className,  onKeyDown,  onKeyDownCapture,  ...props}: ModelSelectorEffortProps) {  const { efforts, effort, setEffort } = useModelSelectorEfforts();  if (!efforts?.length) return null;  return (    <div      data-slot="model-selector-effort"      className={cn(        "flex cursor-default items-center justify-between gap-3 border-t px-3 py-2",        className,      )}      onKeyDownCapture={(e) => {        onKeyDownCapture?.(e);        if (e.defaultPrevented) return;        if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;        // Base UI's RadioGroup composite claims vertical arrows for roving        // focus (orientation "both", not configurable), so intercept them in        // capture and hand the keypress to cmdk: the model list owns vertical        // navigation, and cmdk's Enter is inert while a radio has focus.        onKeyDown?.(e);        if (e.defaultPrevented) return;        const input = e.currentTarget          .closest("[cmdk-root]")          ?.querySelector<HTMLInputElement>("[cmdk-input]");        if (!input) return;        e.preventDefault();        e.stopPropagation();        input.focus();        input.dispatchEvent(new KeyboardEvent("keydown", e.nativeEvent));      }}      onKeyDown={(e) => {        if (e.key === "ArrowUp" || e.key === "ArrowDown") return;        onKeyDown?.(e);        if (e.defaultPrevented) return;        // Base UI's radio composite ignores Home/End and cmdk's Command        // root would claim them to jump the model list; move radio focus        // here so only the radiogroup reacts.        if (e.key === "Home" || e.key === "End") {          e.preventDefault();          e.stopPropagation();          const radios = Array.from(            e.currentTarget.querySelectorAll<HTMLElement>(              '[role="radio"]:not([data-disabled])',            ),          );          (e.key === "Home" ? radios[0] : radios[radios.length - 1])?.focus();        }      }}      {...props}    >      <span className="text-muted-foreground text-xs">{label}</span>      <RadioGroup        value={effort ?? ""}        onValueChange={setEffort}        aria-label={typeof label === "string" ? label : "Reasoning effort"}        className="flex items-center gap-0.5"      >        {efforts.map((option) => (          <Radio.Root            key={option.id}            value={option.id}            className={cn(              "focus-visible:ring-ring/50 text-muted-foreground hover:text-foreground rounded-md px-2 py-1 text-xs transition-colors outline-none focus-visible:ring-2",              "data-checked:bg-accent data-checked:text-accent-foreground data-checked:font-medium",            )}          >            {option.name}          </Radio.Root>        ))}      </RadioGroup>    </div>  );}export type ModelSelectorProps = Omit<ModelSelectorRootProps, "children"> &  VariantProps<typeof modelSelectorTriggerVariants> & {    /** Render a search input above the model list. */    searchable?: boolean;    /** Alignment of the dropdown relative to the trigger. Use `"end"` when the     * trigger sits at the right edge of its container. */    align?: ModelSelectorContentProps["align"];    className?: string;    contentClassName?: string;  };/** Registers the selection with assistant-ui's ModelContext system. The * context's effort is already resolved against the selected model. */function ModelSelectorModelContext() {  const { value, effort } = useModelSelectorContext();  const api = useAui();  useEffect(() => {    if (value === undefined) return;    const config = {      config: {        modelName: value,        ...(effort !== undefined ? { reasoningEffort: effort } : undefined),      },    };    return api.modelContext.register({      getModelContext: () => config,    });  }, [api, value, effort]);  return null;}const ModelSelectorImpl = ({  searchable,  variant,  size,  align,  className,  contentClassName,  ...rootProps}: ModelSelectorProps) => {  return (    <ModelSelectorRoot {...rootProps}>      <ModelSelectorModelContext />      <ModelSelectorTrigger        variant={variant}        size={size}        className={className}      />      <ModelSelectorContent        {...(align !== undefined ? { align } : {})}        className={contentClassName}        searchable={searchable ?? false}      />    </ModelSelectorRoot>  );};type ModelSelectorComponent = typeof ModelSelectorImpl & {  displayName?: string;  Root: typeof ModelSelectorRoot;  Trigger: typeof ModelSelectorTrigger;  Value: typeof ModelSelectorValue;  Content: typeof ModelSelectorContent;  Search: typeof ModelSelectorSearch;  FocusAnchor: typeof ModelSelectorFocusAnchor;  List: typeof ModelSelectorList;  Empty: typeof ModelSelectorEmpty;  Group: typeof ModelSelectorGroup;  Separator: typeof ModelSelectorSeparator;  Item: typeof ModelSelectorItem;  Effort: typeof ModelSelectorEffort;};const ModelSelector = memo(  ModelSelectorImpl,) as unknown as ModelSelectorComponent;ModelSelector.displayName = "ModelSelector";ModelSelector.Root = ModelSelectorRoot;ModelSelector.Trigger = ModelSelectorTrigger;ModelSelector.Value = ModelSelectorValue;ModelSelector.Content = ModelSelectorContent;ModelSelector.Search = ModelSelectorSearch;ModelSelector.FocusAnchor = ModelSelectorFocusAnchor;ModelSelector.List = ModelSelectorList;ModelSelector.Empty = ModelSelectorEmpty;ModelSelector.Group = ModelSelectorGroup;ModelSelector.Separator = ModelSelectorSeparator;ModelSelector.Item = ModelSelectorItem;ModelSelector.Effort = ModelSelectorEffort;export {  ModelSelector,  ModelSelectorRoot,  ModelSelectorTrigger,  ModelSelectorValue,  ModelSelectorContent,  ModelSelectorSearch,  ModelSelectorFocusAnchor,  ModelSelectorList,  ModelSelectorEmpty,  ModelSelectorGroup,  ModelSelectorSeparator,  ModelSelectorItem,  ModelSelectorEffort,};

"use client";import type * as React from "react";import { Command as CommandPrimitive } from "cmdk";import { SearchIcon } from "lucide-react";import { cn } from "@/lib/utils";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,} from "@/components/ui/dialog";function Command({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive>) {  return (    <CommandPrimitive      data-slot="command"      className={cn(        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",        className,      )}      {...props}    />  );}function CommandDialog({  title = "Command Palette",  description = "Search for a command to run...",  children,  className,  showCloseButton = true,  ...props}: React.ComponentProps<typeof Dialog> & {  title?: string;  description?: string;  className?: string;  showCloseButton?: boolean;  children?: React.ReactNode;}) {  return (    <Dialog {...props}>      <DialogHeader className="sr-only">        <DialogTitle>{title}</DialogTitle>        <DialogDescription>{description}</DialogDescription>      </DialogHeader>      <DialogContent        className={cn("overflow-hidden p-0", className)}        showCloseButton={showCloseButton}      >        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">          {children}        </Command>      </DialogContent>    </Dialog>  );}function CommandInput({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive.Input>) {  return (    <div      data-slot="command-input-wrapper"      className="flex h-9 items-center gap-2 border-b px-3"    >      <SearchIcon className="size-4 shrink-0 opacity-50" />      <CommandPrimitive.Input        data-slot="command-input"        className={cn(          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",          className,        )}        {...props}      />    </div>  );}function CommandList({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive.List>) {  return (    <CommandPrimitive.List      data-slot="command-list"      className={cn(        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",        className,      )}      {...props}    />  );}function CommandEmpty({  ...props}: React.ComponentProps<typeof CommandPrimitive.Empty>) {  return (    <CommandPrimitive.Empty      data-slot="command-empty"      className="py-6 text-center text-sm"      {...props}    />  );}function CommandGroup({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive.Group>) {  return (    <CommandPrimitive.Group      data-slot="command-group"      className={cn(        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",        className,      )}      {...props}    />  );}function CommandSeparator({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive.Separator>) {  return (    <CommandPrimitive.Separator      data-slot="command-separator"      className={cn("bg-border -mx-1 h-px", className)}      {...props}    />  );}function CommandItem({  className,  ...props}: React.ComponentProps<typeof CommandPrimitive.Item>) {  return (    <CommandPrimitive.Item      data-slot="command-item"      className={cn(        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",        className,      )}      {...props}    />  );}function CommandShortcut({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="command-shortcut"      className={cn(        "text-muted-foreground ms-auto text-xs tracking-widest",        className,      )}      {...props}    />  );}export {  Command,  CommandDialog,  CommandInput,  CommandList,  CommandEmpty,  CommandGroup,  CommandItem,  CommandShortcut,  CommandSeparator,};

"use client";import * as React from "react";import { Popover as PopoverPrimitive } from "@base-ui/react/popover";import { cn } from "@/lib/utils";function Popover({ ...props }: PopoverPrimitive.Root.Props) {  return <PopoverPrimitive.Root data-slot="popover" {...props} />;}function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;}const PopoverContent = React.forwardRef<  HTMLDivElement,  PopoverPrimitive.Popup.Props &    Pick<      PopoverPrimitive.Positioner.Props,      "align" | "alignOffset" | "side" | "sideOffset"    >>(function PopoverContent(  {    className,    align = "center",    alignOffset = 0,    side = "bottom",    sideOffset = 4,    ...props  },  ref,) {  return (    <PopoverPrimitive.Portal>      <PopoverPrimitive.Positioner        align={align}        alignOffset={alignOffset}        side={side}        sideOffset={sideOffset}        className="isolate z-50"      >        <PopoverPrimitive.Popup          ref={ref}          data-slot="popover-content"          className={cn(            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",            className,          )}          {...props}        />      </PopoverPrimitive.Positioner>    </PopoverPrimitive.Portal>  );});function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="popover-header"      className={cn("flex flex-col gap-0.5 text-sm", className)}      {...props}    />  );}function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {  return (    <PopoverPrimitive.Title      data-slot="popover-title"      className={cn("font-medium", className)}      {...props}    />  );}function PopoverDescription({  className,  ...props}: PopoverPrimitive.Description.Props) {  return (    <PopoverPrimitive.Description      data-slot="popover-description"      className={cn("text-muted-foreground", className)}      {...props}    />  );}export {  Popover,  PopoverContent,  PopoverDescription,  PopoverHeader,  PopoverTitle,  PopoverTrigger,};