Compositor
O compositor de bate-papo de IA do modelo AI Chat como um bloco autônomo: uma entrada de pílula com menus de anexo e modelo de trabalho, voz e enviar controles, a barra de status com branch, projeto, modo agente e medidor de contexto, e um tratamento de vidro líquido que assume os controles enquanto o agente trabalha.
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.
Estado de trabalho
O tratamento completo de trabalho do agente, looping: o AgentThinking pensa acima da pílula, o livre ComposerLoader a luz orbita-a, e GlassComposer transforma a fixação, modelo e microfone controles em vidro líquido. Tudo desaparece quando a resposta cai.
const [working, setWorking] = useState(false);
{working && <AgentThinking variant="infinity" />}<ComposerLoader active={working}> {/* the controls morph to liquid glass while the agent works */} <GlassComposer glass={working} /></ComposerLoader><StatusBar />Menções e comandos
Passe triggers e o campo da pílula vira um TokenInput de uma linha: @ abre seus arquivos e / seus comandos em um menu no cursor, cada escolha vira um chip, e Enter envia. onSubmit continua recebendo uma string, escrita como [@label](type:value), que fromText transforma de volta em tokens.
import { Composer } from "@/components/application/ai-chat/ai-chat-composer";import { fromText } from "@/components/base/token-input/token-input";
<Composer triggers={triggers} onSubmit={(text) => { // "Review [@sidebar.tsx](file:components/sidebar.tsx)" send(fromText(text)); // text and { type, value, label } tokens }}/>
{/* GlassComposer and AiChatComposerPreview take triggers too */}<GlassComposer glass={working} triggers={triggers} />As partes
Tudo é exportado separadamente para que as peças componham: a pílula, a barra de estado, a antevisão montada e o invólucro de vidro. Os menus anexo e modelo são popovers, grade de plugins e tudo mais.
{/* The pill alone - attachment menu, input, model picker, mic, send */}<Composer />
{/* Status row - branch, project folder menu, agent mode, context meter */}<StatusBar />
{/* Both assembled, as in the AI chat template */}<AiChatComposerPreview />