Vox Mente
Navegação

Componentes

Chat Panel

beta

Painel de conversa com histórico e composição de mensagem.

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/chat-panel

Playground
Você
Que lição de fonema inicial já tentamos com a Ana?
Copiloto pedagógico
A última foi há 8 sessões. Ela concluiu com autonomia crescente.

O copiloto apoia a decisão pedagógica e não substitui avaliação clínica. Quem decide é você.

<ChatPanel>
  <ChatLog>
    <ChatMessage author="Você">Que lição de fonema inicial já tentamos com a Ana?</ChatMessage>
    <ChatMessage variant="assistant">A última foi há 8 sessões. Ela concluiu com autonomia crescente.</ChatMessage>
  </ChatLog>
  <ChatComposer>…</ChatComposer>
  <ChatDisclaimer />
</ChatPanel>

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.
ChatPanel
  └─ ChatLog
    └─ ChatMessage
      └─ ChatReference
  └─ ChatComposer

Uso

Superfície de conversa do copiloto pedagógico. O profissional consulta antes da aula, para decidir qual lição aplicar — não é um formulário, porque a escolha depende de contexto que não cabe em filtro.
Você
Que lição de fonema inicial já tentamos com a Ana?
Copiloto pedagógico
A última foi , há 8 sessões. Ela concluiu com autonomia crescente.

Com sugestão da IA

Um turno do copiloto aceita `AISuggestion` no corpo em vez de só texto — a conversa existe para terminar numa ação concreta, e uma resposta que não possa ser aceita, editada ou recusada é conversa perdida.
Você
O que aplicar na próxima sessão da Ana?
Copiloto pedagógico

Sugestão da IA — a decisão é sua

Adivinha — EF01LP09

Continua a trilha de fonema inicial com a mesma estrutura das últimas 3 sessões.

Turnos

`variant="assistant"` marca o turno do copiloto com ícone e rótulo — o profissional precisa distinguir, sem esforço, o que ele mesmo escreveu do que a IA propôs.
Você14:02
Ela já fez alguma atividade de rima essa semana?
Copiloto pedagógico14:02
Não. A última foi há 9 dias, na sessão de terça.

Aviso de limite

`ChatDisclaimer` fica no rodapé do painel, fora do log, para a lembrança estar onde a decisão acontece. Sem `children`, mostra o texto padrão do produto.
Copiloto pedagógico
Posso ajudar a decidir a próxima lição.

O copiloto apoia a decisão pedagógica e não substitui avaliação clínica. Quem decide é você.

Referência da API

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

ChatMessage

PropTipoPadrão
authorstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
timestampstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
variant"user" | "assistant" | null—

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

ChatComposer, ChatDisclaimer, ChatLog, ChatPanel, ChatReference não têm props próprias — aceitam 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