Chat Workspace

AI · ChatList, ChatMessage, ChatWorkspace, FeedbackRating, SearchHits, ThinkingLine

Messenger-style workspace for agents and people: ChatWorkspace (list | thread | details), ChatList, SearchHits, ThinkingLine, FeedbackRating.

ChatWorkspace: list, thread, details (third column, hidden on narrow screens).
ChatList: groups ({title, mark (tint), items: {id, name, sub, time, tint, avatar, status, unread, pinned}}), selected, onSelect, onSearch, filters, searchPlaceholder. Order: pinned first, then one group per project, then people.
SearchHits: items ({id, chat, time, who, text}), query (marked), onOpen.
ThinkingLine: text ("Reading 3 mails…"). FeedbackRating: value / onRate, onSubmit(value, comment), label, placeholder, thanks, askOnUp.

PreviewCode

Draft a reply to Northwind

Atlas09:41

Drafted. It quotes 40 seats at €24 prorated to 1 May.

Reading 3 messages…

Was this useful?

Props

ChatList

Prop	Type	Notes
`groups`	`{ title: string; mark?: Tint; items: ChatListItem[] }[]`	Required
`selected?`	`string`
`onSelect?`	`(id: string) => void`
`onSearch?`	`(q: string) => void`
`filters?`	`ReactNode`
`searchPlaceholder?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ChatMessage

Prop	Type	Notes
`role`	`"user" \| "assistant" \| "system"`	Required
`name?`	`string`
`time?`	`string`
`model?`	`string`
`text?`	`string`
`streaming?`	`boolean`
`tint?`	`Tint`
`sources?`	`Source[]`
`attachments?`	`{ name: string; size?: string; kind?: string }[]`
`usage?`	`string`
`onRetry?`	`() => void`
`onFeedback?`	`(v: "up" \| "down") => void`
`actions?`	`boolean`
`before?`	`ReactNode`
`after?`	`ReactNode`
`children?`	`ReactNode`
`feedback?`	`"up" \| "down" \| null`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ChatWorkspace

Prop	Type	Notes
`list`	`ReactNode`	Required
`thread`	`ReactNode`	Required
`details?`	`ReactNode`
`className?`	`string`
`style?`	`CSSProperties`	Inline style on the root element.

FeedbackRating

Prop	Type	Notes
`value?`	`"up" \| "down" \| null`
`onRate?`	`(v: "up" \| "down") => void`
`onSubmit?`	`(v: "up" \| "down", comment?: string) => void`
`label?`	`string`
`placeholder?`	`string`
`thanks?`	`string`
`askOnUp?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

SearchHits

Prop	Type	Notes
`items`	`{ id: string \| number; chat: string; time?: string; who?: string; text: string }[]`	Required
`query?`	`string`
`onOpen?`	`(item: NonNullable<SearchHitsProps["items"]>[number]) => void`
`emptyText?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ThinkingLine

Prop	Type	Notes
`text?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.