AI Message

A full assistant turn — an identity header (avatar, name, model, status, timestamp), an optional metadata-chip row, a type-specific body, and a Copy / Regenerate / Share / Save / Like / More action bar.

Loading demo: ai-message-real-world

Installation

npx sdaia-ui@latest add ai-message

Usage

import { AiMessage } from "sdaia-ui"

1<AiMessage
2  type="research"
3  style="brand"
4  status="source"
5  timestamp="Just now · 2.4s"
6  title="What the framework emphasizes"
7  body="The framework emphasizes transparency, source traceability, and human oversight."
8  chips={[{ label: "8 sources found" }, { label: "4 files scanned" }]}
9  citations={[1, 2, 3, 4]}
10  sources={[{ title: "SDAIA AI Governance Framework.pdf", type: "PDF", meta: "sdaia.gov.sa", verified: true }]}
11/>

Examples

Standard

A plain-text answer — title, body, bullets, an inline link and cited sources.

Loading demo: ai-message-standard

Reasoning

An answer with an auditable reasoning summary (Goal / Evidence / Decision).

Loading demo: ai-message-reasoning

Research

A research answer — metadata chips, cited sources and source cards.

Loading demo: ai-message-research

Code

A code answer — an embedded Artifact Viewer plus apply / run actions and an execution result.

Loading demo: ai-message-code

Image generation

A generated-image answer — a preview placeholder with caption and meta pills.

Loading demo: ai-message-image-generation

Multi-tool

A multi-tool run — a timeline of tool results, the final answer and a document artifact.

Loading demo: ai-message-multi-tool

Brand

Brand style — a high-emphasis, brand-coloured message surface.

Loading demo: ai-message-brand

Outline

Outline style — a bordered, transparent message surface.

Loading demo: ai-message-outline

API Reference

Prop	Type	Default	Required
type	'standard' \| 'reasoning' \| 'research' \| 'code' \| 'image-generation' \| 'multi-tool'	'standard'	optional
style	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
name	ReactNode	'SDAIA Assistant'	optional
model	ReactNode	'SDAIA AI · GPT-5.5'	optional
status	AiStatus	per type	optional
statusLabel	ReactNode	—	optional
statusAppearance	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
timestamp	ReactNode	per type	optional
chips	AiMessageChip[]	per type	optional
title	ReactNode	per type	optional
body	ReactNode	per type	optional
bullets	ReactNode[]	—	optional
link	AiMessageLink \| ReactNode	—	optional
citations	ReactNode[]	—	optional
sources	AiMessageSource[]	per type	optional
viewAll	AiMessageAction	—	optional
reasoning	AiMessageReasoning	per type	optional
createdFileChip	AiMessageChip	per type	optional
artifact	Partial<ArtifactViewerProps>	per type	optional
codeActions	AiMessageAction[]	per type	optional
toolResults	AiMessageToolResult[]	per type	optional
image	AiMessageImage	per type	optional
actions	AiMessageAction[]	Copy / Regenerate / Share / Save / Like / More	optional
children	ReactNode	—	optional