Chat

A conversation's parts — MessageBubble (time, receipt, retry), TypingIndicator, MessageComposer, ConversationItem — the same API on the web and React Native.

Web + MobileBetaData display

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by krizaka.com.

When to use

Orochia's Messages, a dating app's chats, support threads.
An inbox of conversations with presence and unread counts.

When not to use

For a comments thread under a post.Use instead: List
For notifications.Use instead: Toast

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { MessageBubble, TypingIndicator, MessageComposer, ConversationItem } from "@krizaka/ui/chat";

Examples

Conversation

Grouped runs, a read receipt, typing, the composer.

Hey! Loved your sunset photo 🌅19:02

Was it Cabo da Roca?19:02

It was! Have you been?19:05

We should go this weekend19:05

Read

Inbox

Online, typing, unread counts.

Elena19:06typing…NoahMonSee you Saturday then!MinaSunYou: haha same

Props

ConversationItem

A conversation in the list: avatar, name, the last message or typing, the time, the unread count.

Prop	Type	Default	Description
`name`required	`string`	—	The other person's name.
`preview`required	`string`	—	The last message, or “typing…”.
`avatar`	`string \| null`	—	Their avatar's URL.
`className`	`string`	—	Classes merged on the row.
`href`	`string`	—	Opens the conversation (a link).
`online`	`boolean`	—	Before the name: a presence dot (online).
`onlineLabel`	`string`	—	The presence in words (“online”).
`onSelect`	`(() => void)`	—	Opens the conversation (a button).
`time`	`string`	—	When (“14:02”, “Mon”).
`typing`	`boolean`	—	The preview is the typing signal: in the accent.
`unread`	`number`	`0`	Unread messages: a count, the name in bold.
`unreadLabel`	`string`	—	The unread count in words (“3 unread”).

MessageBubble

A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours.

Prop	Type	Default	Description
`text`required	`string`	—	The text.
`className`	`string`	—	Classes merged on the row.
`context`	`string`	—	A line above the text: what it answers.
`grouped`	`"middle" \| "first" \| "last" \| "single"`	`single`	Part of a run of the same sender: the corner towards the next one is tighter.
`labels`	`MessageBubbleLabels`	—	The words, passed translated.
`mine`	`boolean`	—	Yours (right, in the accent) or theirs (left).
`onRetry`	`(() => void)`	—	Sends a failed message again (a button under it).
`showStatus`	`boolean`	—	Show the status under the bubble (the last message of yours).
`status`	`MessageStatus`	—	Where a message of yours stands; shown when `showStatus`.
`time`	`string`	—	The time, written by the app (“14:02”).

MessageComposer

Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button.

Prop	Type	Default	Description
`onSend`required	`() => void`	—	Sends the draft (Enter, or the button); Shift+Enter adds a line.
`onValueChange`required	`(text: string) => void`	—	Called on every key.
`placeholder`required	`string`	—	The input's name and placeholder (“Message”).
`sendLabel`required	`string`	—	The send button's name (“Send”).
`value`required	`string`	—	The draft (controlled).
`className`	`string`	—	Classes merged on the root.
`disabledReason`	`string`	—	Cannot write: the reason in its place.
`leading`	`ReactNode`	—	Before the input: an attach button.
`maxLength`	`number`	`4000`	The longest message. Default 4000.

TypingIndicator

Three dots that breathe while the other person types, announced politely; still under reduced motion.

Prop	Type	Default	Description
`label`required	`string`	—	What is read and shown beside the dots (“Elena is typing”) — passed translated.
`className`	`string`	—	Classes merged on the root.
`showLabel`	`boolean`	—	Show the words beside the dots.

Accessibility

Each bubble is read with its time; a failed one says so and offers a retry.
The typing dots are announced politely by their words.
A conversation row reads name, presence, last message, time and unread count.

Keyboard

Keys	Action
`Enter / Shift+Enter`	In the web composer: send, or a new line.

Best practices

Group the runs of one sender (grouped); show the receipt under the last message of yours only.
Keep the server's order and merge (the app's), the bubble only draws.
The composer never clears itself: clear the draft once the message is sent.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub