Message

kai-message

One element, one object — render a complete message row with markdown, reasoning, tool calls, attachments, and action buttons. The keystone of any custom message list.

• Shadow DOM
• 1 event
• User + assistant roles
• Avatar support
• Custom actions

Preview

When to use

Reach for <kai-message> when building your own thread — a custom layout, a non-Solid app, or anywhere you iterate the message list yourself. For a full chat surface in one tag, use <kai-chat>. In SolidJS, compose the Message, MessageContent, and MessageActionBar primitives directly for finer control.

Usage

Set message in JavaScript (objects can’t be HTML attributes) and listen for kai-message-action:

<kai-message id="msg" style="display:block;"></kai-message>

<script type="module">
  import '@kitn.ai/ui/elements';
  const msg = document.getElementById('msg');

  msg.message = {
    id: 'm-1', role: 'assistant',
    content: "Here's the plan:\n\n```js\nconst kit = useChat();\n```",
    reasoning: { text: 'The user wants X, so I should do Y.' },
    tools: [{ type: 'search', state: 'output-available', output: { hits: 3 } }],
    actions: ['copy', 'like', 'dislike', 'regenerate'],
  };

  msg.addEventListener('kai-message-action', (e) => {
    console.log(e.detail.action, e.detail.messageId);
  });
</script>

• message takes the whole object. For simple cases, use the role + content attributes instead.
• Markdown is on by default for role="assistant", off for role="user". Override with the markdown boolean.
• actions accepts built-in names ('copy', 'like', 'dislike', 'regenerate', 'edit') and/or { id, label, icon?, tooltip? } descriptors. Alternatively, place <kai-action> children in the light DOM.
• actionsReveal — 'always' (default) keeps the action bar visible; 'hover' hides it until the row is hovered.

Examples

Rich Assistant Message

A full assistant turn: markdown with a fenced code block, a reasoning block, a tool call, an attachment, and built-in actions.

Code

User Message

A plain user turn with no actions. Markdown is off by default for role="user".

Code

Avatar and Custom Action

An avatar pulled from message.avatar, plus a custom Share action alongside built-in copy and like.

Code

Actions Reveal on Hover

actions-reveal="hover" hides the action bar until the row is hovered — cleaner in dense threads.

Code

Props

Property	Type	Default	Notes
message	{ … }	—	The full message object. Set as a JS property.
role	"user" | "assistant"	'assistant'	Convenience for simple cases when not passing a `message` object.
content	string	—	Convenience content (used when `message` is not set).
markdown	boolean	—	Force markdown on/off. Defaults to on for assistant, off for user.
proseSize	"xs" | "sm" | "base" | "lg"	'sm'	Text/markdown sizing for the message body.
codeTheme	string	'github-dark-dimmed'	Shiki theme name used for fenced code blocks in the content.
codeHighlight	boolean	true	Disable syntax highlighting for code blocks (no Shiki loads).
actionsReveal	"always" | "hover"	'always'	Whether the action bar is always visible (`'always'`, default) or only revealed on hover of the message row (`'hover'`).
avatarSrc	string	—	Convenience avatar image URL (used when `message.avatar` is not set).
avatarFallback	string	—	Convenience avatar fallback text (used when `message.avatar` is not set).

Events

Event	Detail	Notes
kai-message-action	{ … }	An action button was clicked. `action` is the built-in name or custom id.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

MessageMessageAvatarMessageContentMessageActionBarReasoningReasoningTriggerReasoningContentToolAttachmentsAttachmentAttachmentPreviewAttachmentInfo

---

Need a hand? Report a bug Ask for help