Painel do Compositor
O compositor de duas filas: uma placa raio-24 com o prompt em cima e os controles em baixo, o menu adicionar, um seletor de permissão com Auto, Manual, Modo Plan e Bypass tudo, um seletor de modelo com um trilho de provedor rolável e um popover de esforço no modelo escolhido, microfone e enviar, além de uma aba de status com ramificação, pasta de projeto e medidor de contexto pendurado na borda superior da carta. A pílula Composer de linha única permanece como está; esta é a disposição mais alta para superfícies de agente.
Instalação
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Permissões
O selecionador pinta sua superfície apenas no hover, pressione ou enquanto o menu estiver aberto, então, em repouso, ele lê como uma legenda ao lado do botão plus. O menu lista os quatro modos com uma descrição de uma linha cada e um Saiba mais botão de ligação no cabeçalho (learnMoreHref ou onLearnMore). Automático é o padrão; definido defaultPermission para começar noutro lugar, ou passar permission e onPermissionChange para o possuir. O gatilho, o menu e a lista de opções também enviam por conta própria como PermissionMenu e COMPOSER_PERMISSIONS.
{/* Auto is the default; start on another mode */}<ComposerPanel defaultPermission="plan" />
{/* Or own the mode yourself */}const [permission, setPermission] = useState<ComposerPermission>("auto");<ComposerPanel permission={permission} onPermissionChange={setPermission} />
{/* The picker on its own; "Learn more" is a Link Button, a link with href or a button with onLearnMore */}<PermissionMenu value={permission} onChange={setPermission} learnMoreHref="/docs/permissions" />Selector de modelos
Um painel 341px: um trilho rolável de provedor marca a esquerda, e o lineup do provedor escolhido como linhas de rádio à direita sob um cabeçalho Modelos com a dica Pesquisa Rápida. MODEL_PROVIDERS envia dezoito lineups realistas, as oito marcas que o design carrega mais dez do conjunto de ícones do LobeHub, do OpenAI e Anthropic para o Google, Mistral, xAI e Amazon. Somente a linha selecionada carrega o chip de esforço; pressionando-o abre o popover de esforço com o mesmo seis-stop Mais rápido para Smarter slider que o compositor usa. Pesquisa rápida, ou /, transforma o cabeçalho em um campo que filtra cada lineup de uma vez, cada correspondência marcada com seu provedor; uma escolha coloca você na lista desse provedor. Cada rolagem da lista. Passe providers para o seu próprio catálogo.
{/* Start on a model and effort stop; MODEL_PROVIDERS ships eighteen realistic lineups */}<ComposerPanel defaultModel="anthropic/fable-5.1" defaultEffort={3} />
{/* Or own both */}const [model, setModel] = useState("openai/gpt-5.6-mini");const [effort, setEffort] = useState(1); // 0 Low … 5 Max, see EFFORT_LEVELS<ComposerPanel model={model} onModelChange={setModel} effort={effort} onEffortChange={setEffort} />
{/* Your own catalogue, and the picker on its own */}<ModelPicker providers={[{ id: "acme", name: "Acme", logo: "/logos/acme.svg", models: [{ id: "acme/acme-1", name: "Acme 1" }] }]} value={model} onChange={setModel}/>Página de status
A aba é uma entrada de fita cinza 34px 28px de cada lado, arredondada apenas no topo, carregando a ramificação, a pasta do projeto e o anel de contexto 16px. status slot: renderização ComposerStatusTab com seus próprios valores, queda em qualquer outra coisa, ou passe null para a carta nua.
{/* Branch, project folder and context meter */}<ComposerPanel status={<ComposerStatusTab branch="release/2.0" project="boardui" context={82} />}/>
{/* No tab at all */}<ComposerPanel status={null} />Menções e comandos
Passe triggers e o prompt vira um TokenInput: @ abre seus arquivos e / seus comandos em um menu no cursor, e cada escolha vira um chip atômico que o Backspace remove inteiro e o desfazer traz de volta. O prompt continua enviando uma string: onSubmit recebe um texto como [@label](type:value), e fromText o transforma de volta em tokens. A Entrada de tokens também é um componente gratuito próprio.
import { ComposerPanel } from "@/components/application/composer-panel/composer-panel";import { fromText } from "@/components/base/token-input/token-input";
const triggers = [ { char: "@", type: "file", title: "Files", items: files }, { char: "/", type: "command", title: "Commands", boundary: "start", tone: "accent", items: commands },];
<ComposerPanel triggers={triggers} onSubmit={(text) => { // "Review [@sidebar.tsx](file:components/sidebar.tsx)" const value = fromText(text); // text and { type, value, label } tokens send(value); }}/>Ligar.
O prompt é uma área de texto que cresce uma linha de cada vez até dez linhas. Digite os envios e Shift+Enter quebra a linha; onSubmit recebe o texto e o campo se limpa quando descontrolado. disabled Os cinzentos enviam-nos quando estiver em voo um turno, e inputRef atinge o campo de concentração.
const [draft, setDraft] = useState("");const inputRef = useRef<HTMLTextAreaElement>(null);
<ComposerPanel value={draft} onValueChange={setDraft} onSubmit={(message) => send(message)} // Enter sends, Shift+Enter breaks the line disabled={waiting} placeholder="Hi, what do you need today?" inputRef={inputRef}/>Anexos
A mesma carta carrega uma faixa de peças de arquivo 56px acima do prompt, cada uma desenhando o anel de envio enquanto seu arquivo pousa. As peças, a faixa e a fila de envio sequencial têm sua própria página.