Docs
Chat
ChatMessage

ChatMessage

A single user message with avatar, nickname, timestamp, body text, optional reply quote, and reactions.

Import

import { ChatMessage } from "@gumtree/ui/chat/ChatMessage";

Props

Prop	Type	Default	Description
`nick`	`string`	-	Author nickname (omit for bot event wrappers)
`nickColor`	`string`	-	CSS color for the nickname
`time`	`string`	-	Timestamp text
`avatarPlaceholder`	`string`	-	Avatar placeholder letter
`avatarColor`	`string`	-	Avatar background color
`avatarSrc`	`string`	-	Avatar image URL
`reply`	`ComponentChildren`	-	Reply quote (use ReplyQuote)
`reactions`	`ComponentChildren`	-	Reaction pills (use Reaction)
`children`	`ComponentChildren`	-	Message body (supports inline code, links, ChannelRef)

Examples

Basic Message

alice16:22

good, the es locale fix is shipped. carol, can you ask the testers to try v3.3.2?

<ChatMessage nick="alice" nickColor="#7a3e9d" time="16:22" avatarColor="#cba6f7">
  good, the es locale fix is shipped. carol, can you ask the testers to try v3.3.2?
</ChatMessage>

With Reactions and Channel Refs

carol13:44

just tested the ja locale — "rendez-vous" predicts correctly now! posted the good news to #beta-testers too 🎉

🎉 3

<ChatMessage nick="carol" nickColor="#b85c00" time="13:44" avatarColor="#f9e2af"
  reactions={<><Reaction emoji="🎉" count={3} /></>}>
  just tested the ja locale — "rendez-vous" predicts correctly now!
  posted the good news to <ChannelRef type="custom">#beta-testers</ChannelRef> too 🎉
</ChatMessage>

With Reply Quote

brendan14:08

alice should we ship this as v3.3.3 hotfix…

v3.3.3 hotfix, yeah. it's a regression from the NFKD change in v3.3.0

<ChatMessage nick="brendan" nickColor="#1a5a9a" time="14:08" avatarColor="#89b4fa"
  reply={<ReplyQuote nick="alice">should we ship this as v3.3.3 hotfix…</ReplyQuote>}>
  v3.3.3 hotfix, yeah. it's a regression from the NFKD change in v3.3.0
</ChatMessage>