Nooxit
AI Components

Conversation

The scrolling message list of a chat.

What is waiting on me today?

Four cases: two order confirmations with changed delivery dates, one invoice above tolerance, and one requisition over your approval limit.

Start with the invoice.

INV-20422 from Lindqvist Freight is €612.40 above the purchase order. The unit price is 4% over the contract rate; quantities match.

Reject it and ask for a credit note.

Done. The invoice is rejected and I emailed Lindqvist Freight for a credit note referencing the contract rate. Next: the order confirmations?

Installation

import { ... } from 'nooxit-design-system/components/ai/conversation';

Empty state

ConversationEmptyState shows before the first message. It is an Empty with an optional icon.

Ask your agents
Questions about orders, invoices and suppliers go here.

Notes

Built on Message Scroller. While the reader is at the end of the list, new messages keep it scrolled down. Once they scroll up, it stays put and ConversationScrollButton appears to jump back.

Conversation fills the rest of a flex column, so place it in a parent that has a height, as the Chat window does.

ConversationDownload saves the messages as a Markdown file, and messagesToMarkdown returns the same text if you want it elsewhere.

Adapted from AI Elements' Conversation.

Source — src/components/ai/conversation.tsx

Chain of Thought

The steps an agent took, as a collapsible list.

Message

A message from the user or the assistant, with Markdown replies and actions.

On this page

InstallationEmpty stateNotes