52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T260e,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { Popover as PopoverPrimitive } from "@base-ui/react/popover"; import { useRender } from "@base-ui/react/use-render"; import { Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import { createContext, use, useEffect, useId, useMemo, useRef, useState, } from "react"; import type { ComponentProps, RefObject } from "react"; import { Button } from "@/components/primitives/button"; import type { ButtonProps } from "@/components/primitives/button"; import { Command, CommandItem } from "@/components/primitives/command"; import type { CommandProps } from "@/components/primitives/command"; import { Popover, popoverStyles, PopoverTrigger, } from "@/components/primitives/popover"; import type { PopoverContentProps } from "@/components/primitives/popover"; import type { Sx } from "@/lib/constella/styles"; import { colors, durations, fontWeights, lineHeights, offsets, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const modelPickerDetailsSides = ["inline-start", "inline-end"] as const; type Styled = Omit & { sx?: Sx; }; const hoverDelay = Number(durations.hoverCardDelay.slice(0, -"ms".length)); const rowGap = `calc(${space.xs} - ${space.xxxs})`; const styles = stylex.create({ content: { alignItems: { default: "flex-start", ":is([data-side='top'])": "flex-end" }, display: "flex", flexWrap: "wrap", gap: space.xs, maxWidth: "var(--available-width)", }, detailsStart: { flexDirection: "row-reverse", }, instant: { transitionDuration: "0s", }, command: { boxShadow: shadows.lg, maxWidth: "100%", width: sizes.modelPicker, }, check: { color: colors.textPrimary, display: "flex", marginInlineStart: "auto", }, logo: { backgroundColor: "currentColor", flexShrink: 0, height: sizes.icon, maskPosition: "center", maskRepeat: "no-repeat", maskSize: "contain", width: sizes.icon, }, mask: (image: string) => ({ maskImage: image }), details: { maxWidth: "100%", }, title: { alignItems: "center", display: "flex", fontWeight: fontWeights.medium, gap: rowGap, lineHeight: lineHeights.textSm, }, description: { color: colors.textSecondary, lineHeight: lineHeights.textSm, marginBlockEnd: 0, marginBlockStart: 0, }, }); interface Picker { actions: RefObject; cancelShow: () => void; detailsId: string; picked: boolean; setPicked: (picked: boolean) => void; setShown: (shown: boolean) => void; showAfterRest: () => void; shown: boolean; } const PickerContext = createContext(null); function usePicker() { const picker = use(PickerContext); if (picker === null) { throw new Error("Model picker parts must be inside a ModelPicker."); } return picker; } function ModelPicker({ actionsRef, onOpenChangeComplete, ...props }: PopoverPrimitive.Root.Props) { const ownActions = useRef(null); const actions = actionsRef ?? ownActions; const [picked, setPicked] = useState(false); const [shown, setShown] = useState(false); const timer = useRef(0); const detailsId = useId(); useEffect( () => () => { clearTimeout(timer.current); }, [] ); const picker = useMemo( () => ({ actions, cancelShow: () => { clearTimeout(timer.current); }, detailsId, picked, setPicked, setShown: (next: boolean) => { clearTimeout(timer.current); setShown(next); }, showAfterRest: () => { clearTimeout(timer.current); timer.current = window.setTimeout(() => { setShown(true); }, hoverDelay); }, shown, }), [actions, detailsId, picked, shown] ); return ( { if (!open) { setPicked(false); setShown(false); } onOpenChangeComplete?.(open); }} {...props} /> ); } /** A ghost button by default, ending in the picker's chevron. */ function ModelPickerTrigger({ children, size = "sm", variant = "ghost", ...props }: ButtonProps) { return ( } > {children} ); } /** Renders the portal, the positioner and a popup that is no surface, so the command and details card beside it are. */ function ModelPickerContent({ align = "start", alignOffset = 0, detailsSide = "inline-end", side = "bottom", sideOffset = Number(offsets.popover), sx, ...props }: PopoverContentProps & { /** Which side of the list the details card opens on; `inline-start` for a picker at the end of a row. */ detailsSide?: (typeof modelPickerDetailsSides)[number]; }) { const { picked } = usePicker(); return ( ); } /** * A `Command` at `sizes.modelPicker` that keeps its highlight when the pointer leaves for the details card. * The card shows once a row is reached by arrow key, or rested on with the pointer. */ function ModelPickerCommand({ keepHighlight = true, onItemHighlighted, sx, ...props }: CommandProps) { const { setShown } = usePicker(); return ( { if (value === undefined) { setShown(false); } else if (details.reason === "keyboard") { setShown(true); } onItemHighlighted?.(value, details); }} {...props} sx={[styles.command, sx]} /> ); } /** * A `CommandItem` that closes the picker once picked, with a tick when `selected`. * Every row is described by the details card, which always shows the highlighted row's model. */ function ModelPickerItem({ children, onClick, onPointerEnter, onPointerLeave, selected = false, ...props }: ComponentProps & { selected?: boolean }) { const { actions, cancelShow, detailsId, setPicked, showAfterRest, shown } = usePicker(); return ( { onClick?.(event); setPicked(true); actions.current?.close(); }} onPointerEnter={(event) => { onPointerEnter?.(event); showAfterRest(); }} onPointerLeave={(event) => { onPointerLeave?.(event); cancelShow(); }} {...props} > {children} {selected && ( )} ); } /** A provider's one-color logo, painted in the text's color so it follows the theme. */ function ModelPickerLogo({ src, sx, ...props }: Styled> & { src: string }) { return ( ); } /** The highlighted model's card, beside the command. Hidden until a row is reached by key or rested on. */ function ModelPickerDetails({ sx, ...props }: Styled>) { const { detailsId, shown } = usePicker(); if (!shown) { return null; } return (

); } function ModelPickerTitle({ render, sx, ...props }: Styled>) { return useRender({ defaultTagName: "div", props: mergeProps<"div">(props, stylex.props(styles.title, sx)), render, state: { slot: "model-picker-title" }, }); } function ModelPickerDescription({ sx, ...props }: Styled>) { return (

); } export { ModelPicker, ModelPickerCommand, ModelPickerContent, ModelPickerDescription, ModelPickerDetails, modelPickerDetailsSides, ModelPickerItem, ModelPickerLogo, ModelPickerTitle, ModelPickerTrigger, }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}]]}],["$","$L52",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/button.json","https://constella.aayush.cv/r/command.json","https://constella.aayush.cv/r/popover.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/ai/model-picker.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]