Vox Mente
Navegação

Componentes

Copilot Dock

beta

Superfície ancorada para o assistente dentro de uma tela.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/copilot-dock

Playground
<CopilotDock>
  <CopilotHandle label="Copiloto" />
</CopilotDock>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
CopilotDock
  └─ CopilotHandle

Uso

Uma alça na borda direita que abre o copiloto por cima da tela, sem trocar de rota. Mora na casca — não no miolo — porque o copiloto é consultado enquanto se olha outra coisa: o perfil, a evolução, a biblioteca.

Painel

`CopilotPanel` ocupa a altura toda e uma largura fixa — conversa é leitura em coluna. `context` mostra de qual aluno se fala; sem isso a conversa vira genérica.

Título customizado

`title` é "Copiloto pedagógico" por padrão. Troque quando o painel tiver um propósito mais específico do que a conversa geral.

Alça com rótulo customizado

`label` troca o texto vertical da alça. Fica arredondada só à esquerda de propósito — a forma diz que ela puxa algo de fora para dentro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

CopilotHandle

PropTipoPadrão
labelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null"Copiloto"

Também aceita as props de React, incluindo className e os atributos de DOM.

CopilotPanel

PropTipoPadrão
contextstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
onCloseMouseEventHandler<HTMLButtonElement>—

Também aceita as props de React, incluindo className e os atributos de DOM.

CopilotDock não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css