ChatMessage

Componentes de bolha de chat para mensagens de usuário, assistente e sistema com timestamps e avatares.

Demonstração

Chat started10:00 AM

Hello! Can you help me?

10:01 AM

Of course! What do you need?

10:01 AM

Tell me about the components.

10:02 AM

This library has 40+ accessible React components built on design tokens!

10:02 AM

Props

Prop	Tipo	Padrão	Descrição
`role`	`'user' \| 'assistant' \| 'system'`	`—`	Papel da mensagem: user, assistant ou system.
`content`	`string`	`—`	Conteúdo de texto da mensagem.
`timestamp`	`string`	`—`	String de timestamp opcional exibida abaixo da bolha.
`avatar`	`React.ReactNode`	`—`	Nó de avatar opcional exibido ao lado da bolha.

Uso

import { ChatMessage, ChatContainer } from '@ghiberti85/ui'

<ChatContainer>
  <ChatMessage role="system" content="Conversation started" timestamp="10:00 AM" />
  <ChatMessage role="user" content="Hello!" timestamp="10:01 AM" />
  <ChatMessage
    role="assistant"
    content="Hi! How can I help you today?"
    timestamp="10:01 AM"
    avatar={<YourAvatar />}
  />
</ChatContainer>

Ver no Storybook

Abrir no Storybook →

←TagInput StreamingText→