Nooxit
AI Components

Message

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

Which Lindqvist Freight invoices need my attention?

Three invoices from Lindqvist Freight don't match their purchase orders:

  1. INV-20418 bills 1,240 kg; the goods receipt shows 1,180 kg.
  2. INV-20422 is priced 4% above the contract rate.
  3. INV-20431 has no goods receipt yet.

I've put the first two on hold and asked the warehouse about the third.

Installation

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

Branches

When a reply has been regenerated, MessageBranch keeps every version and pages through them.

Lindqvist Freight has 3 invoices on hold, worth €18,420 together.

Notes

Built on Message and Bubble. from sets the side and the bubble: a user message is a muted bubble on the right, and an assistant reply is a ghost bubble, plain text on the left. Pass variant to MessageContent to use another bubble.

MessageResponse renders Markdown with Streamdown. It handles half-finished Markdown while a reply streams, and highlights code blocks. MessageAction is a ghost icon Button with an optional tooltip.

Adapted from AI Elements' Message.

Source — src/components/ai/message.tsx

Conversation

The scrolling message list of a chat.

Prompt Input

The message composer, with attachments and a submit button that becomes stop.

On this page

InstallationBranchesNotes