Navegar componentes

ChatMessageList

MiscExemplo

Container de mensagens presentacional com context de density e suporte a infinite scroll. Fornece role="log" com aria-live="polite" para acessibilidade. Um espaçador flex empurra mensagens para baixo quando a lista não está cheia.

Importação

import {ChatMessageList} from '@pharos-ds/core/ChatMessageList';

Exemplos

Área interativa

density

Primeira mensagem

Navi

Segunda mensagem

Código

import {ChatMessageList, ChatMessage, ChatMessageBubble} from '@pharos-ds/core/Chat';

<ChatMessageList
  density="balanced"
 />

Props

Prop	Tipo	Padrão	Descrição
`children` *	`ReactNode`	—	Elementos de mensagem: tipicamente ChatMessage ou ChatSystemMessage.
`emptyState`	`ReactNode`	—	Conteúdo exibido quando a lista não tem mensagens.
`scrollToTopAction`	`() => Promise<void>`	—	Ação assíncrona disparada quando o usuário rola até o topo. Use para carregar mensagens mais antigas. Envolvida em useTransition: exibe um spinner no topo enquanto pendente.
`density`	`'compact' \| 'balanced' \| 'spacious'`	`'balanced'`	Densidade visual: flui para mensagens filhas via context.
`gap`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10`	—	Espaço entre linhas de mensagem de nível superior. O padrão vem da density selecionada; sobrescreva para streams de eventos LLM ou linhas independentes que precisem de espaçamento diferente da density.
`isStreaming`	`boolean`	`false`	Se uma mensagem de assistant está sendo transmitida ativamente. Marca o log com aria-busy para que leitores de tela aguardem e anunciem a mensagem completa uma vez, em vez de reanunciar texto parcial a cada token.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/ChatMessageList