ChatMessage

One chat turn: avatar, bubble, status, streaming caret and an optional footer slot.

Import

import { ChatMessage } from "@jcsoftdev/ui/ai";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/ai/chat-message.

Usage

<ChatMessage
  author="assistant"
  name="Asistente"
  status="done"
  time="10:42"
  content="Mañana tienes **tres huecos libres** con Diego: `10:00`, `11:30` y `16:00`. ¿Quieres que reserve alguno?"
/>

Props

Prop	Type	Default	Description
author *	"user" | "assistant" | "system"
name	string		Display name, also the avatar’s accessible name.
avatarSrc	string
status	"done" | "error" | "sending" | "streaming"	"done"	sending and streaming show activity; error shows the failure line.
time	string		Time label shown under the bubble (already formatted).
content	string		Markdown text. Assistant messages render it as Markdown; user and system as plain text.
children	ReactNode		Rich body; replaces content.
footer	ReactNode		Slot under the bubble (e.g. MessageActions, sources).
errorText	string	"No se pudo enviar el mensaje."	Text of the failure line when status is error.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• User
• System
• Streaming
• Waiting
• Failed
• With Actions
• Narrow
• Preset Brutal

Source

packages/ui/src/ai/chat-message/chat-message.tsx