Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Chat·@exepert/ui / ChatMessage

Chat Message

A structured message row for a conversation between a person and a model.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Assistant response

The assistant row leaves room for metadata.

Open in Playground ↗
Starting preview…
import { ChatMessage } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <ChatMessage role="assistant" author="EXEPERT" content="The trace completed in 842ms." timestamp="10:42" />
  );
}

Usage

Keep speaker and message body distinct, with optional metadata.

Props

  • role: user | assistant | system
  • content: ReactNode
  • author: ReactNode
  • timestamp: ReactNode

Accessibility

  • Expose speaker name and content in reading order.
  • Do not use alignment alone to distinguish roles.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { ChatMessage } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.