Navegar componentes

ChatMessage

MiscExemplo

Wrapper de contexto do remetente: trata avatar, nome, metadados e alinhamento com base no papel do remetente.

Importação

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

Exemplos

sender

density

Navi

Demonstração mínima de mensagem de chat.

Código

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

<ChatMessage
  sender="assistant"
  density="balanced"
 />

Prop	Tipo	Padrão	Descrição
`sender` *	`'user' \| 'assistant' \| 'system'`	—	Quem enviou esta mensagem: controla alinhamento e layout.
`children` *	`ReactNode`	—	Conteúdo livre: bubbles, listas de assets, tool calls, imagens.
`avatar`	`ReactNode`	—	Elemento de avatar renderizado ao lado da mensagem. Normalmente Avatar.
`name`	`ReactNode`	—	Nome do remetente renderizado acima do corpo da mensagem. Use quando o primeiro filho é conteúdo bruto (não um bubble). Se o primeiro filho for um bubble, coloque o nome na prop `name` do bubble.
`metadata`	`ReactNode`	—	Metadados renderizados abaixo do corpo da mensagem. Use quando o último filho é conteúdo bruto (não um bubble). Se o último filho for um bubble, coloque metadados na prop `metadata` do bubble.
`density`	`'compact' \| 'balanced' \| 'spacious'`	—	Densidade visual. Herdada do contexto da lista se não definida.

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