@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/message-timing.aui.d.ts

@@ -0,0 +1,30 @@
+import { FC } from "react";
+declare namespace message_timing_aui_d_exports {
+  export { MessageTiming };
+}
+/**
+ * Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a
+ * hover/focus tooltip. Renders nothing until the stream completes.
+ *
+ * Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it
+ * inherits the action bar's autohide behaviour:
+ *
+ * ```tsx
+ * import { MessageTiming } from "@/components/assistant-ui/elements/message-timing.aui";
+ *
+ * <ActionBarPrimitive.Root >
+ *   <ActionBarPrimitive.Copy />
+ *   <ActionBarPrimitive.Reload />
+ *   <MessageTiming />  // <-- add this
+ * </ActionBarPrimitive.Root>
+ * ```
+ *
+ * @param side - Side of the tooltip relative to the badge trigger.
+ * @default "right"
+ */
+export declare const MessageTiming: FC<{
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+}>;
+//#endregion
+export { message_timing_aui_d_exports };

package/dist/components/assistant-ui/elements/message-timing.aui.js

@@ -0,0 +1,98 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMessageTiming } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/message-timing.aui.tsx
+var message_timing_aui_exports = /* @__PURE__ */ __exportAll({ MessageTiming: () => MessageTiming });
+const formatTimingMs = (ms) => {
+	if (ms === void 0) return "—";
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	return `${(ms / 1e3).toFixed(2)}s`;
+};
+/**
+* Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a
+* hover/focus tooltip. Renders nothing until the stream completes.
+*
+* Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it
+* inherits the action bar's autohide behaviour:
+*
+* ```tsx
+* import { MessageTiming } from "@/components/assistant-ui/elements/message-timing.aui";
+*
+* <ActionBarPrimitive.Root >
+*   <ActionBarPrimitive.Copy />
+*   <ActionBarPrimitive.Reload />
+*   <MessageTiming />  // <-- add this
+* </ActionBarPrimitive.Root>
+* ```
+*
+* @param side - Side of the tooltip relative to the badge trigger.
+* @default "right"
+*/
+const MessageTiming = ({ className, side = "right" }) => {
+	const timing = useMessageTiming();
+	if (timing?.totalStreamTime === void 0) return null;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "message-timing-trigger",
+			"aria-label": "Message timing",
+			className: cn("text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center rounded-md p-1 font-mono text-xs tabular-nums transition-colors", className)
+		}),
+		children: formatTimingMs(timing.totalStreamTime)
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		sideOffset: 8,
+		"data-slot": "message-timing-popover",
+		className: "bg-popover text-popover-foreground border px-3 py-2 [&_[data-slot=tooltip-arrow]]:hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid min-w-35 gap-1.5 text-xs",
+			children: [
+				timing.firstTokenTime !== void 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "First token"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono tabular-nums",
+						children: formatTimingMs(timing.firstTokenTime)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "Total"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono tabular-nums",
+						children: formatTimingMs(timing.totalStreamTime)
+					})]
+				}),
+				timing.tokensPerSecond !== void 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "Speed"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "font-mono tabular-nums",
+						children: [timing.tokensPerSecond.toFixed(1), " tok/s"]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "Chunks"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono tabular-nums",
+						children: timing.totalChunks
+					})]
+				})
+			]
+		})
+	})] }) });
+};
+//#endregion
+export { MessageTiming, message_timing_aui_exports };

package/dist/components/assistant-ui/elements/message-timing.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+declare namespace message_timing_d_exports {
+  export { MessageTiming, TimingStat };
+}
+export interface TimingStat {
+  label: string;
+  value: string;
+}
+export declare function MessageTiming({ stats, streaming, className, ...props }: Omit<ComponentProps<"div">, "children" | "stats" | "streaming"> & {
+  stats: readonly TimingStat[];
+  streaming?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { message_timing_d_exports };

package/dist/components/assistant-ui/elements/message-timing.js

@@ -0,0 +1,26 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/message-timing.tsx
+var message_timing_exports = /* @__PURE__ */ __exportAll({ MessageTiming: () => MessageTiming });
+function MessageTiming({ stats, streaming, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-timing",
+		className: cn("fade-in animate-in flex w-full max-w-sm flex-wrap items-center gap-x-3 gap-y-1 duration-500", className),
+		...props,
+		children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground"),
+				children: stat.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "tabular-nums", streaming ? "text-foreground" : "text-muted-foreground"),
+				children: stat.value
+			})]
+		}, stat.label))
+	});
+}
+//#endregion
+export { MessageTiming, message_timing_exports };

package/dist/components/assistant-ui/elements/mobile-composer.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+declare namespace mobile_composer_d_exports {
+  export { MobileComposer };
+}
+export declare function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAttach, onValueChange, onSend, onStop, onFocus, className, ...props }: Omit<ComponentProps<"div">, "children" | "value" | "keyboardOpen" | "running" | "actions" | "onAction" | "onAttach" | "onValueChange" | "onSend" | "onStop" | "onFocus"> & {
+  value: string;
+  keyboardOpen: boolean;
+  running: boolean;
+  actions: readonly string[];
+  onAction?: (action: string) => void;
+  onAttach?: () => void;
+  onValueChange?: (value: string) => void;
+  onSend?: () => void;
+  onStop?: () => void;
+  onFocus?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { mobile_composer_d_exports };

package/dist/components/assistant-ui/elements/mobile-composer.js

@@ -0,0 +1,76 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, ghostButton } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/mobile-composer.tsx
+var mobile_composer_exports = /* @__PURE__ */ __exportAll({ MobileComposer: () => MobileComposer });
+function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAttach, onValueChange, onSend, onStop, onFocus, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mobile-composer",
+		className: cn("bg-background border-foreground/[0.07] flex w-full max-w-[19rem] flex-col gap-2.5 rounded-t-[20px] border-t px-3 pt-3", keyboardOpen ? "pb-3" : "pb-6", className),
+		...props,
+		children: [
+			!keyboardOpen && /* @__PURE__ */ jsx("div", {
+				className: cn("fade-in animate-in -mx-3 flex gap-1.5 overflow-x-auto px-3 pb-0.5 duration-200", "[mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)]"),
+				children: actions.map((action) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onAction?.(action),
+					disabled: !onAction,
+					className: cn("disabled:pointer-events-none", "bg-muted", "text-muted-foreground shrink-0 rounded-full px-3 py-1.5 text-xs whitespace-nowrap"),
+					children: action
+				}, action))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Add an attachment",
+						onClick: onAttach,
+						disabled: !onAttach,
+						className: cn(ghostButton, field, "size-9 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+						children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(field, "flex min-w-0 flex-1 items-center gap-2 rounded-[18px] px-3 py-2"),
+						children: [/* @__PURE__ */ jsx("textarea", {
+							rows: 1,
+							value,
+							onChange: (event) => onValueChange?.(event.target.value),
+							onFocus,
+							onKeyDown: (event) => {
+								if (event.key !== "Enter" || event.shiftKey) return;
+								if (event.nativeEvent.isComposing) return;
+								event.preventDefault();
+								if (!running && value !== "" && onSend) onSend();
+							},
+							placeholder: "Message",
+							"aria-label": "Message",
+							className: "text-foreground/85 placeholder:text-muted-foreground max-h-28 min-w-0 flex-1 resize-none bg-transparent text-[16px] leading-snug outline-none [field-sizing:content]"
+						}), value === "" && /* @__PURE__ */ jsx(MicIcon, { className: "text-muted-foreground size-4 shrink-0" })]
+					}),
+					(onSend || onStop) && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": running ? "Stop" : "Send",
+						onClick: running ? onStop : onSend,
+						disabled: running ? !onStop : !onSend || value === "",
+						className: cn("bg-foreground text-background transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90 active:scale-[0.96] motion-reduce:transition-none", "flex size-9 shrink-0 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-25"),
+						children: running ? /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" })
+					})
+				]
+			}),
+			keyboardOpen && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground text-center"),
+				children: "return to send"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-foreground/15 mx-auto h-1 w-28 rounded-full"
+			})
+		]
+	});
+}
+//#endregion
+export { MobileComposer, mobile_composer_exports };

package/dist/components/assistant-ui/elements/model-picker.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace model_picker_d_exports {
+  export { ModelPicker, PickableModel };
+}
+export interface PickableModel {
+  id: string;
+  name: string;
+  family: string;
+  context: string;
+  price: string;
+  capabilities: readonly string[];
+}
+export declare function ModelPicker({ models, selectedId, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "models" | "selectedId" | "onSelect"> & {
+  models: readonly PickableModel[];
+  selectedId: string;
+  onSelect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { model_picker_d_exports };

package/dist/components/assistant-ui/elements/model-picker.js

@@ -0,0 +1,68 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/model-picker.tsx
+var model_picker_exports = /* @__PURE__ */ __exportAll({ ModelPicker: () => ModelPicker });
+function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
+	const families = [...new Set(models.map((model) => model.family))];
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "model-picker",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-2xl p-2", className),
+		...props,
+		children: families.map((family) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground px-2 pt-2 pb-1"),
+				children: family
+			}), models.filter((model) => model.family === family).map((model) => {
+				const selected = model.id === selectedId;
+				const className = cn("flex items-center gap-2.5 rounded-xl px-2 py-2 text-start transition-colors outline-none focus-visible:ring-1 focus-visible:ring-foreground/20", selected ? "bg-foreground/[0.06]" : onSelect ? "hover:bg-foreground/[0.035]" : void 0);
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex size-3.5 shrink-0 items-center justify-center",
+						children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "fade-in zoom-in-90 animate-in text-muted-foreground size-3.5 duration-200" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-[13.5px]",
+							children: model.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex flex-wrap gap-1",
+							children: model.capabilities.map((capability) => /* @__PURE__ */ jsx("span", {
+								className: cn(field, mono, "text-muted-foreground rounded px-1 py-px"),
+								children: capability
+							}, capability))
+						})]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex shrink-0 flex-col items-end gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground tabular-nums"),
+							children: model.context
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground tabular-nums"),
+							children: model.price
+						})]
+					})
+				] });
+				return onSelect ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-pressed": selected,
+					onClick: () => onSelect(model.id),
+					className,
+					children: content
+				}, model.id) : /* @__PURE__ */ jsx("div", {
+					"aria-current": selected ? "true" : void 0,
+					className,
+					children: content
+				}, model.id);
+			})]
+		}, family))
+	});
+}
+//#endregion
+export { ModelPicker, model_picker_exports };

package/dist/components/assistant-ui/elements/model-selector.aui.d.ts

@@ -0,0 +1,23 @@
+import { DEFAULT_EFFORT_OPTIONS, ModelOption, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorEffort, ModelSelectorEffortOption, ModelSelectorEffortProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorProps, ModelSelectorRoot, ModelSelectorRootProps, ModelSelectorSearch, ModelSelectorSearchProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorTrigger, ModelSelectorTriggerProps, ModelSelectorValue, ModelSelectorValueProps, modelSelectorTriggerVariants, resolveModelEffort, useModelSelectorEfforts } from "./model-selector.js";
+declare namespace model_selector_aui_d_exports {
+  export { DEFAULT_EFFORT_OPTIONS, ModelOption, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorEffort, ModelSelectorEffortOption, ModelSelectorEffortProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorProps, ModelSelectorRoot, ModelSelectorRootProps, ModelSelectorSearch, ModelSelectorSearchProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorTrigger, ModelSelectorTriggerProps, ModelSelectorValue, ModelSelectorValueProps, modelSelectorTriggerVariants, resolveModelEffort, useModelSelectorEfforts };
+}
+declare const ModelSelectorImpl: ({ searchable, variant, size, align, className, contentClassName, ...rootProps }: ModelSelectorProps) => import("react").JSX.Element;
+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;
+};
+declare const ModelSelector: ModelSelectorComponent;
+//#endregion
+export { DEFAULT_EFFORT_OPTIONS, type ModelOption, ModelSelector, ModelSelectorContent, type ModelSelectorContentProps, ModelSelectorEffort, type ModelSelectorEffortOption, type ModelSelectorEffortProps, ModelSelectorEmpty, type ModelSelectorEmptyProps, ModelSelectorFocusAnchor, ModelSelectorGroup, type ModelSelectorGroupProps, ModelSelectorItem, type ModelSelectorItemProps, ModelSelectorList, type ModelSelectorListProps, type ModelSelectorProps, ModelSelectorRoot, type ModelSelectorRootProps, ModelSelectorSearch, type ModelSelectorSearchProps, ModelSelectorSeparator, type ModelSelectorSeparatorProps, ModelSelectorTrigger, type ModelSelectorTriggerProps, ModelSelectorValue, type ModelSelectorValueProps, modelSelectorTriggerVariants, model_selector_aui_d_exports, resolveModelEffort, useModelSelectorEfforts };

package/dist/components/assistant-ui/elements/model-selector.aui.js

@@ -0,0 +1,79 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { DEFAULT_EFFORT_OPTIONS, ModelSelectorContent, ModelSelectorEffort, ModelSelectorEmpty, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorItem, ModelSelectorList, ModelSelectorRoot, ModelSelectorSearch, ModelSelectorSeparator, ModelSelectorTrigger, ModelSelectorValue, modelSelectorTriggerVariants, resolveModelEffort, useModelSelectorContext, useModelSelectorEfforts } from "./model-selector.js";
+import { memo, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAui } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/model-selector.aui.tsx
+var model_selector_aui_exports = /* @__PURE__ */ __exportAll({
+	DEFAULT_EFFORT_OPTIONS: () => DEFAULT_EFFORT_OPTIONS,
+	ModelSelector: () => ModelSelector,
+	ModelSelectorContent: () => ModelSelectorContent,
+	ModelSelectorEffort: () => ModelSelectorEffort,
+	ModelSelectorEmpty: () => ModelSelectorEmpty,
+	ModelSelectorFocusAnchor: () => ModelSelectorFocusAnchor,
+	ModelSelectorGroup: () => ModelSelectorGroup,
+	ModelSelectorItem: () => ModelSelectorItem,
+	ModelSelectorList: () => ModelSelectorList,
+	ModelSelectorRoot: () => ModelSelectorRoot,
+	ModelSelectorSearch: () => ModelSelectorSearch,
+	ModelSelectorSeparator: () => ModelSelectorSeparator,
+	ModelSelectorTrigger: () => ModelSelectorTrigger,
+	ModelSelectorValue: () => ModelSelectorValue,
+	modelSelectorTriggerVariants: () => modelSelectorTriggerVariants,
+	resolveModelEffort: () => resolveModelEffort,
+	useModelSelectorEfforts: () => useModelSelectorEfforts
+});
+/** 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 === void 0) return;
+		const config = { config: {
+			modelName: value,
+			...effort !== void 0 ? { reasoningEffort: effort } : void 0
+		} };
+		return api.modelContext.register({ getModelContext: () => config });
+	}, [
+		api,
+		value,
+		effort
+	]);
+	return null;
+}
+const ModelSelectorImpl = ({ searchable, variant, size, align, className, contentClassName, ...rootProps }) => {
+	return /* @__PURE__ */ jsxs(ModelSelectorRoot, {
+		...rootProps,
+		children: [
+			/* @__PURE__ */ jsx(ModelSelectorModelContext, {}),
+			/* @__PURE__ */ jsx(ModelSelectorTrigger, {
+				variant,
+				size,
+				className
+			}),
+			/* @__PURE__ */ jsx(ModelSelectorContent, {
+				...align !== void 0 ? { align } : {},
+				className: contentClassName,
+				searchable: searchable ?? false
+			})
+		]
+	});
+};
+const ModelSelector = memo(ModelSelectorImpl);
+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;
+//#endregion
+export { DEFAULT_EFFORT_OPTIONS, ModelSelector, ModelSelectorContent, ModelSelectorEffort, ModelSelectorEmpty, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorItem, ModelSelectorList, ModelSelectorRoot, ModelSelectorSearch, ModelSelectorSeparator, ModelSelectorTrigger, ModelSelectorValue, modelSelectorTriggerVariants, model_selector_aui_exports, resolveModelEffort, useModelSelectorEfforts };

package/dist/components/assistant-ui/elements/model-selector.d.ts

@@ -0,0 +1,130 @@
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../ui/command.js";
+import { PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+declare namespace model_selector_d_exports {
+  export { DEFAULT_EFFORT_OPTIONS, ModelOption, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorEffort, ModelSelectorEffortOption, ModelSelectorEffortProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorProps, ModelSelectorRoot, ModelSelectorRootProps, ModelSelectorSearch, ModelSelectorSearchProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorTrigger, ModelSelectorTriggerProps, ModelSelectorValue, ModelSelectorValueProps, modelSelectorTriggerVariants, resolveModelEffort, useModelSelectorContext, useModelSelectorEfforts };
+}
+export type ModelSelectorEffortOption = {
+  id: string;
+  name: string;
+};
+export declare const DEFAULT_EFFORT_OPTIONS: readonly ModelSelectorEffortOption[];
+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[];
+};
+/**
+ * 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 declare function resolveModelEffort(models: readonly ModelOption[], modelId: string | undefined, effort: string | undefined): string | undefined;
+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;
+};
+export declare function useModelSelectorContext(): ModelSelectorContextValue;
+/**
+ * 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 declare function useModelSelectorEfforts(): {
+  efforts: readonly ModelSelectorEffortOption[] | undefined;
+  effort: string | undefined;
+  setEffort: (effort: string) => void;
+};
+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;
+};
+declare function ModelSelectorRoot({ models, value: valueProp, defaultValue, onValueChange, effort: effortProp, defaultEffort, onEffortChange, open: openProp, defaultOpen, onOpenChange, children }: ModelSelectorRootProps): import("react").JSX.Element;
+export declare const modelSelectorTriggerVariants: (props?: ({
+  variant?: "ghost" | "muted" | "outline" | null | undefined;
+  size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ModelSelectorTriggerProps = ComponentPropsWithoutRef<typeof PopoverTrigger> & VariantProps<typeof modelSelectorTriggerVariants>;
+declare function ModelSelectorTrigger({ className, variant, size, children, onKeyDown, ...props }: ModelSelectorTriggerProps): import("react").JSX.Element;
+export type ModelSelectorValueProps = {
+  placeholder?: ReactNode;
+  /** Show the active effort level next to the model name. */
+  showEffort?: boolean;
+  className?: string;
+};
+declare function ModelSelectorValue({ placeholder, showEffort, className }: ModelSelectorValueProps): import("react").JSX.Element;
+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;
+};
+/**
+ * Hidden input that anchors cmdk's keyboard navigation, keeping the list
+ * keyboard-operable without a visible search box. ModelSelectorContent renders
+ * one automatically when unfiltered.
+ */
+declare function ModelSelectorFocusAnchor(): import("react").JSX.Element;
+declare function ModelSelectorContent({ className, align, side, sideOffset, searchable, children, ...props }: ModelSelectorContentProps): import("react").JSX.Element;
+export type ModelSelectorSearchProps = ComponentPropsWithoutRef<typeof CommandInput>;
+declare function ModelSelectorSearch({ placeholder, ...props }: ModelSelectorSearchProps): import("react").JSX.Element;
+export type ModelSelectorListProps = ComponentPropsWithoutRef<typeof CommandList>;
+declare function ModelSelectorList({ className, children, ...props }: ModelSelectorListProps): import("react").JSX.Element;
+export type ModelSelectorEmptyProps = ComponentPropsWithoutRef<typeof CommandEmpty>;
+declare function ModelSelectorEmpty({ children, ...props }: ModelSelectorEmptyProps): import("react").JSX.Element;
+export type ModelSelectorGroupProps = ComponentPropsWithoutRef<typeof CommandGroup>;
+declare function ModelSelectorGroup(props: ModelSelectorGroupProps): import("react").JSX.Element;
+export type ModelSelectorSeparatorProps = ComponentPropsWithoutRef<typeof CommandSeparator>;
+declare function ModelSelectorSeparator(props: ModelSelectorSeparatorProps): import("react").JSX.Element;
+export type ModelSelectorItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, "value"> & {
+  model: ModelOption;
+};
+declare function ModelSelectorItem({ model, className, children, onSelect, ...props }: ModelSelectorItemProps): import("react").JSX.Element;
+export type ModelSelectorEffortProps = ComponentPropsWithoutRef<"div"> & {
+  label?: ReactNode;
+};
+declare function ModelSelectorEffort({ label, className, onKeyDown, onKeyDownCapture, ...props }: ModelSelectorEffortProps): import("react").JSX.Element | null;
+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;
+};
+//#endregion
+export { ModelSelectorContent, ModelSelectorEffort, ModelSelectorEmpty, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorItem, ModelSelectorList, ModelSelectorRoot, ModelSelectorSearch, ModelSelectorSeparator, ModelSelectorTrigger, ModelSelectorValue, model_selector_d_exports };