Carregamento do compositor
O estado de carregamento que envolve um compositor de bate-papo enquanto o agente trabalha - uma banda de luz iridescente que viaja a borda da pílula em velocidade constante, liderada por uma linha de refração nítida com uma flor suave sangrando para dentro dela por trás. Alternando-a em e fora desaparece todo o efeito, de modo que o compositor lê como iluminando em vez de alternar.
Instalação
Você pode adicionar este efeito de carregamento usando o nosso 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 composer-loaderUsando 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.
Numa conversa
A cena da vida real: a mensagem do usuário pousa, o compositor ilumina-se enquanto o AgentThinking pensa acima dele e o compositor controla transformar-se em vidro líquido, então a resposta chega e tudo desaparece de volta. waiting bandeira - o fade-in e fade-out são construídos dentro.
const [waiting, setWaiting] = useState(false);
async function send(message: string) { setWaiting(true); // light fades in, AgentThinking appears await complete(message); setWaiting(false); // reply landed — everything fades out}
{waiting && <AgentThinking variant="infinity" />}<ComposerLoader active={waiting}> <Composer className="bg-transparent shadow-none" /></ComposerLoader>O próprio compositor
A pílula nestas pré-visualizações é o Compositor, a entrada do modelo AI Chat enviado como seu próprio Pro bloco: menus de anexo e modelo de trabalho, microfone e controles de envio, a barra de estado e o tratamento de vidro líquido que a demo usa. O Composer Loader envolve qualquer compositor que você já tenha; emparelhe- o com este para a aparência exata acima.
Afinação
A luz padrão é o estilo de casa sintonizado. colors espalha quatro paragens através da pílula, arc define quanto da borda que a banda ocupa, bloom e bloomStrength forma até onde a luz sangra para dentro, e speed é segundos por volta. A banda viaja em velocidade constante e dobra em torno das tampas finais; movimento pára sob prefers-reduced-motion.
{/* Everything ships tuned; override per surface as needed */}<ComposerLoader colors={["#5eead4", "#46baec", "#e633a4", "#00faa7"]} speed={4.5} // seconds per lap arc={120} // how much of the rim the band occupies intensity={0.7} bloom={16} // how far the light bleeds inward, px bloomStrength={0.3} reverse={false} radius={26} // omit for a full pill> ...</ComposerLoader>