Agents UI
Componentes reutilizaveis para interfaces de agentes de IA. Controles de midia, visualizadores de audio, chat em tempo real e gerenciamento de sessao.
Session Provider
O AgentSessionProvider envolve toda a interface do agente, fornecendo contexto de sessao e renderizacao de audio.
<AgentSessionProvider session={agentSession}>
<AgentControlBar />
<AgentChatTranscript
agentState={agentState}
messages={chatMessages}
/>
</AgentSessionProvider>UseSessionReturn — obrigatorio
number — volume do audio renderer
boolean — silenciar renderer
Track Toggles
Controles individuais para microfone, camera e compartilhamento de tela. Suporte a estados controlado/nao-controlado e icones automaticos por source.
Disconnect Button
Botao de desconexao que encerra a sessao do agente. Usa o contexto de sessao para chamar end().
Chat Indicator
Indicador animado de "thinking" para o chat do agente. Usa spring animation com repeat infinito.
Chat Transcript
Exibe historico de conversa entre usuario e agente. Inclui scroll automatico, timestamps e indicador de thinking. Construido sobre primitivos ai-elements.
AgentState — controla indicador
ReceivedMessage[] — historico
Scroll automatico ao bottom
Audio Visualizers
5 variantes de visualizacao de audio que reagem ao estado do agente e ao volume do audio em tempo real. Cada visualizer aceita state, color, size e audioTrack como props.
24 dots · circular layout
5x5 grid · pattern animation
canvas-based · bell curve attenuation
Multi-layer radial gradient · audio-reactive scale & opacity
AI Elements
Primitivos de baixo nivel para construir interfaces de chat. Base para o AgentChatTranscript.
Toggle
Componente base shadcn/ui Toggle adicionado como dependencia dos agents-ui. Usa Radix Toggle primitive.