Aithusa SquadDesign System / AgentsV2.0 Dark Cockpit Edition

AGENTS UI

Componentes reutilizáveis para interfaces de agentes de IA — LiveKit · Real-time · Voice AI · Multimodal

[03.AI] Components — Agents UI8 Components2026
01 // LiveKit Agent ComponentsReal-time
01Session Provider

O AgentSessionProvider envolve toda a interface do agente, fornecendo contexto de sessão e renderização de áudio.

<AgentSessionProvider session={agentSession}>
  <AgentControlBar />
  <AgentChatTranscript
    agentState={agentState}
    messages={chatMessages}
  />
</AgentSessionProvider>
session

UseSessionReturn — obrigatório

volume

number — volume do audio renderer

muted

boolean — silenciar renderer

02Track Toggles

Controles individuais para microfone, câmera e compartilhamento de tela. Suporte a estados controlado/não-controlado e ícones automáticos por source.

Default
Mic — ON
Camera — OFF
Screen — OFF
Outline
Outline Mic
Outline Camera
Outline Screen
Sizes
sm
default
lg
Pending
Loading state
03Disconnect Button

Botão de desconexão que encerra a sessão do agente. Usa o contexto de sessão para chamar end().

default
icon
outline
ghost
04Chat Indicator

Indicador animado de "thinking" para o chat do agente. Spring animation com repeat infinito.

sm (2.5)
md (4)
lg (6)
05Chat Transcript
Preview
Agent Online
Qual é o status do deploy?
Deploy v2.3.1 concluído. Todos os health checks passaram. Uptime: 99.97%.
Pode rodar os testes de integração?
Thinking...
Props

Exibe histórico de conversa entre usuário e agente. Inclui scroll automático, timestamps e indicador de thinking. Construído sobre primitivos ai-elements.

agentState

AgentState — controla indicador

messages

ReceivedMessage[] — histórico

auto-scroll

Scroll automático ao bottom

06Audio Visualizers

5 variantes de visualização de áudio que reagem ao estado do agente e ao volume em tempo real.

Bar
icon
sm
md
Radial
24 dots · circular
Grid
5×5 · pattern animation
Wave
canvas-based · bell curve
Aura
Multi-layer radial gradient · audio-reactive
Agent States
connecting
initializing
listening
thinking
speaking
disconnected
07AI Elements (Primitives)
Conversation
Conversation — container flex col
ConversationContent — área scrollável
ConversationScrollButton — scroll to bottom
Message
Message — from: "user" | "assistant"
MessageContent — wrapper de conteúdo
MessageResponse — texto da resposta
08Toggle (Base Component)

Componente base shadcn/ui Toggle — dependência dos agents-ui. Usa Radix Toggle primitive.

default on
default off
outline on
outline off