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
npx sdaia-ui@latest add ai-message
import { AiMessage } from "sdaia-ui"1<AiMessage2type="research"3style="brand"4status="source"5timestamp="Just now · 2.4s"6title="What the framework emphasizes"7body="The framework emphasizes transparency, source traceability, and human oversight."8chips={[{ label: "8 sources found" }, { label: "4 files scanned" }]}9citations={[1, 2, 3, 4]}10sources={[{ title: "SDAIA AI Governance Framework.pdf", type: "PDF", meta: "sdaia.gov.sa", verified: true }]}11/>
A plain-text answer — title, body, bullets, an inline link and cited sources.
Loading demo: ai-message-standard
An answer with an auditable reasoning summary (Goal / Evidence / Decision).
Loading demo: ai-message-reasoning
A research answer — metadata chips, cited sources and source cards.
Loading demo: ai-message-research
A code answer — an embedded Artifact Viewer plus apply / run actions and an execution result.
Loading demo: ai-message-code
A generated-image answer — a preview placeholder with caption and meta pills.
Loading demo: ai-message-image-generation
A multi-tool run — a timeline of tool results, the final answer and a document artifact.
Loading demo: ai-message-multi-tool
Brand style — a high-emphasis, brand-coloured message surface.
Loading demo: ai-message-brand
Outline style — a bordered, transparent message surface.
Loading demo: ai-message-outline
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 |