Message

Chat message: author/time, inline-markup body (bold/code/[n] citations), tool-call + chart/code blocks, follow-up chips, and a typing indicator. Exports renderInline + TypingIndicator.

All components · Theme builder · Implementation source

Live preview

Open live message preview

Install

Shell

netscript ui:add message

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Message } from '@app/components/ui/message.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Message message={ {role:"assistant",author:{name:"Order assistant"},body:"Your order **SO–10480** has shipped."} } /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional
`MessageProps`	`message`	`MessageData`	No
`MessageProps`	`ctx`	`MessageCtx`	Yes
`MessageProps`	`class`	`string`	Yes

TypeScript

type MessageRole = "user" | "assistant" | "system"
type MessageBlock = { type: "chart"; title?: string; sub?: string; data: ChartDatum[]; unit?: string; variant?: "bar" | "column" } | { type: "code"; code: string; filename?: string; lang?: string }
MessageProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class">

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: space/stack/gap, text/fg, text/muted.

CSS custom properties referenced directly: --ns-border, --ns-border-hover, --ns-control-h-sm, --ns-control-height-sm, --ns-control-padding-x, --ns-control-padding-x-sm, --ns-ease-fast, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-mono, --ns-font-sans, --ns-leading-body, --ns-leading-caption, --ns-leading-relaxed, --ns-leading-small, --ns-muted, --ns-muted-fg, --ns-primary, --ns-primary-fg, --ns-radius-card, --ns-radius-control, --ns-radius-full, --ns-radius-sm, --ns-radius-xl, --ns-ring, --ns-selected, --ns-space-0-5, --ns-space-1, --ns-space-1-5, --ns-space-2, --ns-space-2-5, --ns-space-3, --ns-space-4, --ns-space-px, --ns-stack-gap, --ns-state-disabled-opacity, --ns-text-2xs, --ns-text-body, --ns-text-caption, --ns-text-chat, --ns-text-sm, --ns-text-small, --ns-text-xs, --ns-tracking-body, --ns-tracking-caption, --ns-tracking-small, --ns-weight-body, --ns-weight-caption, --ns-weight-small, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: noninteractive presentation

Native DOM attributes pass through where the implementation accepts them.

Design contract values marked planned are not implementation props. The props above describe what ships today.