Entrada de tokens
Um campo de prompt em que @ adiciona arquivos e pessoas e / executa comandos, cada um como um token atômico, com menus de sugestões que abrem no cursor.
Instalação
Você pode adicionar este componente de entrada de tokens usando nossa CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add token-inputUsando 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.
Gatilhos
Cada gatilho é um caractere e as sugestões que ele abre. Uma correspondência começa no início de uma palavra, ou só no início do prompt com boundary: "start", e o menu filtra enquanto você digita, ignorando maiúsculas e acentos. items pode ser uma lista ou um carregador que recebe a consulta e um AbortSignal quando a digitação pausa. tone: "accent" desenha os chips na cor de destaque, e emptyState mantém o menu aberto quando nada corresponde.
import { RiFileCodeLine, RiSearchEyeLine } from "@remixicon/react";import type { TokenSuggestion, TokenTrigger } from "@/components/base/token-input/token-input";
const files: TokenSuggestion[] = [ { id: "app/page.tsx", label: "page.tsx", description: "app", icon: RiFileCodeLine }, { id: "components/sidebar.tsx", label: "sidebar.tsx", description: "components", icon: RiFileCodeLine },];
const triggers: TokenTrigger[] = [ // "@" at any word start, filtered as you type. { char: "@", type: "file", title: "Files", items: files }, // "/" only at the very start, as accent chips. { char: "/", type: "command", title: "Commands", boundary: "start", tone: "accent", items: commands }, // Items from a server: called with the query once typing pauses; a newer query aborts the older one. { char: "#", type: "issue", title: "Issues", emptyState: "No issues match", items: (query, signal) => fetch(`/api/issues?q=${query}`, { signal }).then((r) => r.json()), },];Tokens e texto
O valor é texto e tokens em ordem. toText o escreve como texto, cada token como [@label](type:value), para uma requisição, um formulário ou um rascunho salvo, e fromText lê esse texto de volta em tokens. Copiar escreve o mesmo texto, então colar em qualquer entrada de tokens traz os chips de volta. Passe codec para o seu próprio formato.
import { TokenInput, fromText, toText, type TokenInputValue } from "@/components/base/token-input/token-input";
const [value, setValue] = useState<TokenInputValue>([]);// ["Review ", { type: "file", value: "components/sidebar.tsx", label: "sidebar.tsx", id: "t1" }, " please"]
toText(value); // "Review [@sidebar.tsx](file:components/sidebar.tsx) please"fromText("Review [@sidebar.tsx](file:components/sidebar.tsx) please"); // the value again
<TokenInput aria-label="Message" value={value} onValueChange={setValue} triggers={triggers} />Teclado
Para o cursor, um chip é um único caractere. Digitação, métodos de entrada, ortografia e correção automática continuam com o navegador; tudo o que toca um chip passa pelo histórico do próprio campo.
Removendo tokens
tokenDeletion define o que o Backspace faz ao lado de um chip, e o handle de ref edita o campo pelo código: inserir um token no cursor, focar, limpar. Cada ação é um passo de desfazer.
<TokenInput tokenDeletion="whole" /> {/* Backspace removes the chip (default) */}<TokenInput tokenDeletion="select" /> {/* first press selects it, the second removes it */}<TokenInput tokenDeletion="revert" /> {/* the chip turns back into "@label" and its menu reopens */}No Painel do Compositor
O Painel do Compositor Pro aceita os mesmos triggers: o prompt vira uma Entrada de tokens e continua enviando uma string.
Créditos
As regras de edição e correspondência foram portadas do Token Input e do Trigger Menu do UI SDK sob a Apache License 2.0, junto com os testes unitários. O menu usa Autocomplete, Menu e Popover do React Aria no estilo de dropdown compacto do BoardUI.