Message Content

Core component

<loquix-message-content> renders the body of a message. Use it for regular rich text or pass a raw string to its safe code-block renderer.

loquix-message-contentstreaming-awarecode-safe

Preview

Text and code Live component

Streaming content can end with a lightweight caret while tokens arrive.

Usage

import '@loquix/core/define/define-message-content';

<loquix-message-content
  type="text"
  streaming
  streaming-cursor="caret"
>
  The answer is still arriving…
</loquix-message-content>

For code, assign the source as a property so it is rendered as text rather than interpreted as markup:

const content = document.querySelector('loquix-message-content');
content.type = 'code';
content.code = `function greet(name) {
  return \`Hello, ${name}!\`;
}`;

Properties

Property	Attribute	Type	Default	Description
type	type	'text' | 'code' | 'image' | 'file' | 'tool-result'	'text'	Selects the content renderer. Text is the fallback for every non-code value.
streaming	streaming	boolean	false	Marks content as actively streaming.
streamingCursor	streaming-cursor	'none' | 'caret' | 'block'	'none'	Cursor displayed after streaming content.
allowInlineActions	allow-inline-actions	boolean	false	Signals that inline action controls are allowed.
code	code	string	—	Raw code rendered safely when type="code". Prefer assigning it as a property.

Note

image, file, and tool-result currently use the text renderer. They provide semantic type information for applications and future specialized rendering.

Slots

Slot	Purpose
default	Text or rich HTML content when type="text".

The default slot is not rendered in code mode; use the code property instead.

CSS parts

Part	Purpose
content	Text content wrapper.
code-block	The <pre> element in code mode.
cursor	Streaming caret or block.

CSS custom properties

Variable	Purpose
--loquix-message-font-size	Message text size.
--loquix-message-line-height	Message line height.
--loquix-code-font-family	Code block font family.
--loquix-surface-secondary-bg	Code block background.
--loquix-cursor-color	Streaming cursor color.