@vvedantb/ui 0.17.0 → 0.18.0

package/src/ai-elements/model-picker.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { IconBolt, IconChevronDown } from "@tabler/icons-react";
+import { SimpleModelLadder } from "./simple-model-ladder";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { ProviderIcon } from "./provider-icon";
+import {
+  ModelPickerContent,
+  buildPickerInstances,
+  providerInstanceInitials,
+  teamInstanceKey,
+} from "./model-picker-content";
+import {
+  type ModelAccount,
+  type ModelOption,
+  findModelOption,
+  formatModelDisplayLabel,
+  getProviderLabel,
+} from "./model-picker-types";
+
+export type { ModelAccount, ModelOption };
+export { findModelOption, formatModelDisplayLabel, getProviderLabel };
+/** Embeddable picker body — use in menus/submenus; use `ModelPicker` for button triggers. */
+export { ModelPickerContent };
+
+/**
+ * `UiConfig.ModelPicker`: `classes.trigger` replaces the `ModelPicker` trigger
+ * button's classes; `badgeRing` sets the ring colour around the account
+ * initials badge, which should match the surface behind it (`trigger`: the
+ * trigger, default `var(--color-border)`; `panel`: the provider rail and list,
+ * default `var(--color-surface-secondary)`).
+ */
+export interface ModelPickerConfig {
+  classes?: { trigger?: string };
+  badgeRing?: { trigger?: string; panel?: string };
+}
+
+const TRIGGER_CLASS =
+  // Carries `data-slot="select-trigger"` and is styled to read as one, so it
+  // has to press like one: `motion-press active:scale-[0.98]`, like the select
+  // triggers it sits beside in a composer footer. `motion-press` supersedes
+  // `transition-colors`: the two at equal specificity replace each other.
+  "motion-press flex h-7 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-surface-tertiary hover:text-foreground active:scale-[0.98] disabled:opacity-50";
+
+/**
+ * Shared chrome for the picker panel (popover + menu submenu). Keep these in
+ * sync so trigger vs embed surfaces cannot drift.
+ */
+export const modelPickerSurfaceClass =
+  "w-100 max-w-[calc(100vw-1rem)] overflow-hidden rounded-lg border-0 bg-transparent p-0 shadow-none";
+
+export interface ModelPickerProps<TModel extends string = string> {
+  value: TModel;
+  onValueChange: (model: TModel) => void;
+  options: ReadonlyArray<ModelOption<TModel>>;
+  disabled?: boolean;
+  className?: string;
+  /**
+   * The user's own provider accounts. When non-empty, each provider opens into
+   * Team + account groups, each listing that provider's models so picking a
+   * model also picks whose credential runs it.
+   */
+  accounts?: ReadonlyArray<ModelAccount>;
+  /** Currently selected account id, or null for the team credential. */
+  accountId?: string | null;
+  /** Fired alongside a model change with the chosen account (null = team). */
+  onAccountChange?: (accountId: string | null) => void;
+  /**
+   * When set, called once per pick instead of separate model/account
+   * callbacks — use this to persist both fields in a single mutation.
+   */
+  onSelectionChange?: (model: TModel, accountId: string | null) => void;
+  /**
+   * When a personal account is selected, Team for that provider is shown
+   * disabled. Set false when the viewer cannot switch the sticky account
+   * (e.g. non-owner on a task) so Team stays unselectable.
+   */
+  canSelectTeamWhilePersonal?: boolean;
+  /**
+   * Compact label after the model name on the trigger (e.g. the active
+   * reasoning level).
+   */
+  triggerSuffix?: string;
+  /** Pinned above the model list — typically trait controls. */
+  header?: ReactNode;
+  /** Bolt before the provider icon when Fast mode is on. */
+  showFastIcon?: boolean;
+  /**
+   * Simple-view capability ladder (cheapest → strongest). When at least two of
+   * these ids are in `options`, the popover opens on a discrete slider;
+   * Advanced swaps to the full picker.
+   */
+  simpleLadder?: ReadonlyArray<TModel>;
+  /** Parks the slider thumb when `value` is not itself a ladder tick. */
+  simpleLadderSnap?: TModel;
+}
+
+/**
+ * Button + popover model picker (create modal, composers, toolbars).
+ * For context/dropdown menus, embed `ModelPickerContent` with
+ * `modelPickerSurfaceClass` instead of nesting this popover.
+ */
+export function ModelPicker<TModel extends string>({
+  value,
+  onValueChange,
+  options,
+  disabled,
+  className,
+  accounts,
+  accountId = null,
+  onAccountChange,
+  onSelectionChange,
+  canSelectTeamWhilePersonal = true,
+  triggerSuffix,
+  header,
+  showFastIcon,
+  simpleLadder,
+  simpleLadderSnap,
+}: ModelPickerProps<TModel>) {
+  const merge = useCn();
+  const config = useUiConfig("ModelPicker");
+  const [open, setOpen] = useState(false);
+  const [advanced, setAdvanced] = useState(false);
+  const [previewId, setPreviewId] = useState<TModel | null>(null);
+  const displayValue = previewId ?? value;
+  const selectedModel = findModelOption(displayValue, options);
+
+  const ladderSteps: ModelOption<TModel>[] = [];
+  if (simpleLadder) {
+    for (const id of simpleLadder) {
+      const option = options.find((entry) => entry.id === id);
+      if (option) ladderSteps.push(option);
+    }
+  }
+  const showLadder = ladderSteps.length >= 2 && !advanced;
+  const preferredSnap = simpleLadderSnap ?? value;
+  let snappedAmong = ladderSteps[0]?.id ?? value;
+  for (const step of ladderSteps) {
+    if (step.id === value || step.id === preferredSnap) {
+      snappedAmong = step.id;
+      if (step.id === value) break;
+    }
+  }
+  const triggerLabel = selectedModel ? selectedModel.label : "Select model";
+  const instances = buildPickerInstances(options, accounts);
+
+  const selectedAccount = accountId
+    ? accounts?.find((account) => account.id === accountId)
+    : undefined;
+
+  const activeInstance =
+    (selectedAccount
+      ? instances.find((instance) => instance.key === selectedAccount.id)
+      : undefined) ??
+    (selectedModel
+      ? instances.find(
+          (instance) =>
+            instance.key === teamInstanceKey(selectedModel.provider),
+        )
+      : undefined) ??
+    instances[0];
+
+  const showAccountBadge = Boolean(
+    selectedAccount &&
+    instances.filter(
+      (instance) => instance.provider === selectedAccount.provider,
+    ).length > 1,
+  );
+
+  const commit = (modelId: TModel, nextAccountId: string | null) => {
+    if (onSelectionChange) {
+      onSelectionChange(modelId, nextAccountId);
+    } else {
+      onValueChange(modelId);
+      onAccountChange?.(nextAccountId);
+    }
+  };
+
+  const accountForModel = (modelId: TModel): string | null => {
+    const option = options.find((entry) => entry.id === modelId);
+    if (!option) return null;
+    if (selectedAccount && selectedAccount.provider === option.provider) {
+      return accountId;
+    }
+    return null;
+  };
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setAdvanced(false);
+          setPreviewId(null);
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          data-slot="select-trigger"
+          className={merge(
+            config?.classes?.trigger ?? TRIGGER_CLASS,
+            className,
+          )}
+          disabled={disabled}
+        >
+          {showFastIcon ? (
+            <span title="Fast" className="inline-flex shrink-0">
+              <IconBolt size={12} aria-hidden />
+            </span>
+          ) : null}
+          {activeInstance && selectedAccount && showAccountBadge ? (
+            <span className="relative isolate inline-flex size-4 shrink-0 items-center justify-center">
+              <ProviderIcon
+                provider={selectedModel?.provider ?? "claude"}
+                size={14}
+              />
+              <span
+                className="pointer-events-none absolute -right-0.5 -bottom-0.5 z-10 flex h-3 min-w-3 items-center justify-center rounded-full bg-surface-secondary px-0.5 text-[7px] font-semibold leading-none text-muted-foreground"
+                style={{
+                  boxShadow: `0 0 0 1.5px ${config?.badgeRing?.trigger ?? "var(--color-border)"}`,
+                }}
+                aria-hidden
+              >
+                {providerInstanceInitials(selectedAccount.label)}
+              </span>
+            </span>
+          ) : (
+            <ProviderIcon
+              provider={selectedModel?.provider ?? "claude"}
+              size={14}
+            />
+          )}
+          {/* On a phone the composer's under-bar is only a few hundred pixels
+              wide, so the label gives up width to the control beside it rather
+              than pushing it out of the row. `min-w-0` is the load-bearing half
+              — a flex child defaults to `min-width: auto` and never shrinks. */}
+          <span className="whitespace-nowrap text-left max-sm:min-w-0 max-sm:truncate">
+            {triggerLabel}
+            {triggerSuffix ? (
+              <span className="text-muted-foreground/70">
+                {" · "}
+                {triggerSuffix}
+              </span>
+            ) : null}
+          </span>
+          <IconChevronDown
+            size={12}
+            className="shrink-0 opacity-60"
+            aria-hidden
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className={
+          showLadder ? "w-56 p-3" : modelPickerSurfaceClass
+        }
+        onOpenAutoFocus={(event) => {
+          if (showLadder) return;
+          // Let ModelPickerContent own focus (search input); Radix would
+          // otherwise park it on the first focusable and fight our layout effect.
+          event.preventDefault();
+        }}
+      >
+        {showLadder ? (
+          <SimpleModelLadder
+            value={displayValue}
+            steps={ladderSteps}
+            snappedId={snappedAmong}
+            disabled={disabled}
+            onValueChange={(modelId) => {
+              setPreviewId(modelId);
+              commit(modelId, accountForModel(modelId));
+            }}
+            onAdvanced={() => setAdvanced(true)}
+          />
+        ) : (
+          <ModelPickerContent
+            value={displayValue}
+            accountId={accountId}
+            options={options}
+            accounts={accounts}
+            canSelectTeamWhilePersonal={canSelectTeamWhilePersonal}
+            onSelect={(modelId, nextAccountId) => {
+              setPreviewId(null);
+              commit(modelId, nextAccountId);
+            }}
+            header={header}
+          />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -1,4 +1,5 @@
 import type { ComponentProps, ReactNode } from "react";
+import { IconCpu } from "@tabler/icons-react";
 
 import {
   Command,
@@ -17,24 +18,32 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../ui/dialog";
+import { useCn } from "../ui/ui-config";
 import { cn } from "../utils/cn";
+import { ProviderIcon } from "./provider-icon";
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorProps = ComponentProps<typeof Dialog>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelector = (props: ModelSelectorProps) => (
   <Dialog {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
   <DialogTrigger {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
   title?: ReactNode;
 };
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorContent = ({
   className,
   children,
@@ -53,14 +62,18 @@ export const ModelSelectorContent = ({
   </DialogContent>
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
   <CommandDialog {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorInput = ({
   className,
   ...props
@@ -68,48 +81,67 @@ export const ModelSelectorInput = ({
   <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorList = (props: ModelSelectorListProps) => (
   <CommandList {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
   <CommandEmpty {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
   <CommandGroup {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
   <CommandItem {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
   <CommandShortcut {...props} />
 );
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorSeparatorProps = ComponentProps<
   typeof CommandSeparator
 >;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
   <CommandSeparator {...props} />
 );
 
+/**
+ * @deprecated Use `ModelPicker`. Removed in the next minor release.
+ *
+ * Now SVG props: the logo renders `ProviderIcon` (see `ModelSelectorLogo`).
+ */
 export type ModelSelectorLogoProps = Omit<
-  ComponentProps<"img">,
-  "src" | "alt"
+  ComponentProps<"svg">,
+  "children"
 > & {
+  /** Rendered width and height in px. Default 12, the old `<img>` size. */
+  size?: number;
   provider:
     | "moonshotai-cn"
     | "lucidquery"
@@ -171,38 +203,87 @@ export type ModelSelectorLogoProps = Omit<
     | (string & {});
 };
 
+/**
+ * models.dev provider ids that have a `ProviderIcon` mark. `ProviderIcon`
+ * knows four marks: Claude, OpenAI (`codex`), OpenCode and Cursor.
+ */
+const LOGO_PROVIDER: Record<string, string> = {
+  anthropic: "claude",
+  "google-vertex-anthropic": "claude",
+  claude: "claude",
+  openai: "codex",
+  codex: "codex",
+  opencode: "opencode",
+  cursor: "cursor",
+};
+
+/**
+ * @deprecated Use `ModelPicker`. Removed in the next minor release.
+ *
+ * A thin wrapper over `ProviderIcon`: no network fetch (it used to load
+ * `https://models.dev/logos/<provider>.svg`). `anthropic`,
+ * `google-vertex-anthropic` and `claude` show the Claude mark; `openai` and
+ * `codex` the OpenAI mark; `opencode` and `cursor` their marks. Any other id
+ * shows a neutral CPU glyph, not another brand's mark. The SVG keeps the old
+ * `"<provider> logo"` accessible name.
+ */
 export const ModelSelectorLogo = ({
   provider,
+  size = 12,
   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}
-  />
-);
+}: ModelSelectorLogoProps) => {
+  const merge = useCn();
+  const mapped = LOGO_PROVIDER[provider];
+  const label = `${provider} logo`;
+  if (!mapped) {
+    return (
+      <IconCpu
+        {...props}
+        role="img"
+        aria-label={label}
+        size={size}
+        className={merge("shrink-0 text-muted-foreground", className)}
+      />
+    );
+  }
+  return (
+    <ProviderIcon
+      {...props}
+      role="img"
+      aria-label={label}
+      aria-hidden={false}
+      provider={mapped}
+      size={size}
+      className={className}
+    />
+  );
+};
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorLogoGroup = ({
   className,
   ...props
-}: ModelSelectorLogoGroupProps) => (
-  <div
-    className={cn(
-      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-surface [&>img]:p-px dark:[&>img]:bg-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
+}: ModelSelectorLogoGroupProps) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "flex shrink-0 items-center -space-x-1 [&>svg]:rounded-full [&>svg]:bg-surface [&>svg]:p-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export type ModelSelectorNameProps = ComponentProps<"span">;
 
+/** @deprecated Use `ModelPicker`. Removed in the next minor release. */
 export const ModelSelectorName = ({
   className,
   ...props

package/src/ai-elements/plan.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { useCn } from "../ui/ui-config";
+import { IconSelector } from "@tabler/icons-react";
+import { createContext, useContext } from "react";
+
+import { Shimmer } from "./shimmer";
+
+interface PlanContextValue {
+  isStreaming: boolean;
+}
+
+const PlanContext = createContext<PlanContextValue | null>(null);
+
+const usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("AgentPlan components must be used within AgentPlan");
+  }
+  return context;
+};
+
+export type AgentPlanProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+};
+
+export const AgentPlan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}: AgentPlanProps) => {
+  const merge = useCn();
+  return (
+    <PlanContext.Provider value={{ isStreaming }}>
+      <Collapsible asChild data-slot="plan" {...props}>
+        <Card className={merge("smooth-shadow-none", className)}>{children}</Card>
+      </Collapsible>
+    </PlanContext.Provider>
+  );
+};
+
+export type AgentPlanHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const AgentPlanHeader = ({ className, ...props }: AgentPlanHeaderProps) => {
+  const merge = useCn();
+  return (
+    <CardHeader
+      className={merge(
+        "flex flex-row items-center justify-between gap-2",
+        className,
+      )}
+      data-slot="plan-header"
+      {...props}
+    />
+  );
+};
+
+export type AgentPlanTitleProps = Omit<
+  ComponentProps<typeof CardTitle>,
+  "children"
+> & {
+  children: string;
+};
+
+export const AgentPlanTitle = ({ children, ...props }: AgentPlanTitleProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardTitle data-slot="plan-title" {...props}>
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardTitle>
+  );
+};
+
+export type AgentPlanActionProps = ComponentProps<typeof CardAction>;
+
+export const AgentPlanAction = (props: AgentPlanActionProps) => (
+  <CardAction data-slot="plan-action" {...props} />
+);
+
+export type AgentPlanContentProps = ComponentProps<typeof CardContent>;
+
+export const AgentPlanContent = (props: AgentPlanContentProps) => (
+  <CollapsibleContent asChild>
+    <CardContent data-slot="plan-content" {...props} />
+  </CollapsibleContent>
+);
+
+export type AgentPlanFooterProps = ComponentProps<"div">;
+
+export const AgentPlanFooter = (props: AgentPlanFooterProps) => (
+  <CardFooter data-slot="plan-footer" {...props} />
+);
+
+export type AgentPlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const AgentPlanTrigger = ({ className, ...props }: AgentPlanTriggerProps) => {
+  const merge = useCn();
+  return (
+    <CollapsibleTrigger asChild>
+      <Button
+        className={merge("size-8", className)}
+        data-slot="plan-trigger"
+        size="icon"
+        variant="ghost"
+        {...props}
+      >
+        <IconSelector className="size-4" />
+        <span className="sr-only">Toggle plan</span>
+      </Button>
+    </CollapsibleTrigger>
+  );
+};