Chat Model Selector

Полноразмерный picker модели с группировкой по провайдерам, описанием и иконкой.

Выбрано: claude-opus-4-7

"use client";

import { useState } from "react";
import {
  type ChatModelOption,
  ChatModelSelector,
} from "@/components/ui/chat-model-selector";

const models: ChatModelOption[] = [
  {
    id: "claude-opus-4-7",
    name: "Claude Opus 4.7",
    description: "Лучше всего для сложных задач · контекст 200K",
    provider: "Anthropic",
  },
  {
    id: "claude-sonnet-4-7",
    name: "Claude Sonnet 4.7",
    description: "Баланс скорости и качества",
    provider: "Anthropic",
  },
  {
    id: "claude-haiku-4-7",
    name: "Claude Haiku 4.7",
    description: "Самая быстрая · самая дешёвая",
    provider: "Anthropic",
  },
  {
    id: "gpt-5",
    name: "GPT-5",
    description: "Флагман OpenAI",
    provider: "OpenAI",
  },
  {
    id: "gpt-5-mini",
    name: "GPT-5 mini",
    description: "Быстрее и компактнее",
    provider: "OpenAI",
  },
  {
    id: "llama-4-70b",
    name: "Llama 4 70B",
    description: "Своя инфраструктура (идёт масштабирование)",
    disabled: true,
    provider: "Локально",
  },
];

export default function Particle() {
  const [model, setModel] = useState("claude-opus-4-7");

  return (
    <div className="flex w-full max-w-md flex-col gap-3 p-4">
      <ChatModelSelector
        models={models}
        onValueChange={setModel}
        size="md"
        value={model}
      />
      <p className="text-muted-foreground text-xs">
        Выбрано: <span className="font-mono text-foreground">{model}</span>
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-model-selector

Использование

import {
  type ChatModelOption,
  ChatModelSelector,
} from "@/components/ui/chat-model-selector";
 
const models: ChatModelOption[] = [
  {
    id: "claude-opus-4-7",
    name: "Claude Opus 4.7",
    description: "Best for complex reasoning",
    provider: "Anthropic",
  },
  {
    id: "claude-sonnet-4-7",
    name: "Claude Sonnet 4.7",
    description: "Balanced speed and quality",
    provider: "Anthropic",
  },
  {
    id: "gpt-5",
    name: "GPT-5",
    description: "OpenAI flagship",
    provider: "OpenAI",
  },
  {
    id: "llama-4",
    name: "Llama 4 70B",
    description: "Self-hosted",
    provider: "Local",
    disabled: true,
  },
];
 
<ChatModelSelector
  models={models}
  onValueChange={(id, model) => setModel(id)}
  value={modelId}
/>

vs встроенный selector в `chat-prompt-input`

ChatPromptInputModelSelect (в chat-prompt-input) — компактный inline-trigger без border, для toolbar внутри ввода.
ChatModelSelector (standalone) — полноразмерный с группировкой по provider, иконками, описаниями. Для settings sheet, model comparison view, верхней панели чата.

Размер триггера: size="sm" | "md" | "lg" (по умолчанию md = h-9).

На этой странице

Установка Использование vs встроенный selector в chat-prompt-input

Chat Model Selector

Установка

Использование

vs встроенный selector в chat-prompt-input

vs встроенный selector в `chat-prompt-input`