Vox Mente
Navegação

Componentes

AI Suggestion

beta

Sugestão gerada por IA, apresentada como proposta que o usuário aceita ou descarta — nunca como fato já aplicado.

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/ai-suggestion

Playground

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

Trilha 2 — Autonomia/Foco

Registros recentes mostram autonomia crescente em tarefas de 3 etapas.

Com base em: PEI v4, 8 sessõesModelo voxmente-pedagogico v0.3
<AISuggestion title="Trilha 2 — Autonomia/Foco">
  <AISuggestionRationale>Registros recentes mostram autonomia crescente em tarefas de 3 etapas.</AISuggestionRationale>
  <AISuggestionSource model="voxmente-pedagogico v0.3" sources={["PEI v4", "8 sessões"]} />
  <AISuggestionActions>
    <Button size="sm">Aceitar</Button>
    <Button size="sm" variant="outline">Editar</Button>
    <Button size="sm" variant="ghost">Recusar</Button>
  </AISuggestionActions>
</AISuggestion>

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.
AISuggestion
  └─ AISuggestionRationale
  └─ AISuggestionSource
  └─ AISuggestionActions

Uso

A IA recomenda e explica, mas nunca decide de forma irreversível. O eyebrow fixo já diz isso antes de qualquer texto: a decisão é sua.

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

Trilha 2 — Autonomia/Foco

Registros recentes mostram autonomia crescente em tarefas de 3 etapas.

Com base em: PEI v4, 8 sessõesModelo voxmente-pedagogico v0.3

Procedência

`AISuggestionSource` registra em que a IA se baseou e qual versão do modelo respondeu. `model` e `sources` são independentes — cada um só aparece se for passado.

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

Só fontes, sem modelo

Com base em: PEI v4, 8 sessões

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

Só modelo, sem fontes

Modelo voxmente-pedagogico v0.3

Sem título

`title` é opcional. Sem ele, o eyebrow "Sugestão da IA — a decisão é sua" segue sozinho — use quando a justificativa já entrega o assunto.

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

Nenhuma sessão registrada nos últimos 12 dias para este aluno. Considere retomar a trilha atual antes de avançar.

Ícone customizado

`icon` substitui o `SparkleIcon` padrão. Use com moderação — o ícone roxo é o que sinaliza "isto veio da IA" em toda a plataforma.

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

Presença confirmada pela IA

O padrão de acesso do responsável corresponde ao horário da sessão agendada.

Referência da API

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

AISuggestion

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

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

AISuggestionSource

PropTipoPadrão
modelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
sourcesReactNode[]—

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

AISuggestionActions, AISuggestionRationale 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