System Message

Out-of-band notice for actions, errors, and warnings. Distinct from a regular chat message; supports an optional CTA.

Examples

Variants

action / error / warning. Default 'action' looks neutral; the others use semantic color.

Connected to model gpt-4o.

Rate limit reached. Try again in 30s.

Some tool calls were skipped due to permissions.

<pk-system-message text="Connected to model gpt-4o." variant="action" />
<pk-system-message text="Rate limit reached. Try again in 30s." variant="error" />
<pk-system-message text="Some tool calls were skipped." variant="warning" />

Filled background

[fill]=true uses a solid tinted background instead of just a border.

Saved to your history.

Network error — retrying...

<pk-system-message text="Saved to your history." variant="action" [fill]="true" />
<pk-system-message text="Network error — retrying..." variant="error" [fill]="true" />

With CTA

Pass ctaLabel to add a Spartan button on the right.

A new model is available.

<pk-system-message
  text="A new model is available."
  variant="action"
  [fill]="true"
  ctaLabel="Switch"
  (ctaClicked)="onSwitch()"
/>

Installation

Add the system-message component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:system-message

Component API

PkSystemMessage

Prop	Type	Default	Description
text	`string`	''	Main label (or project via ng-content).
variant	`"action" \| "error" \| "warning"`	"action"	Color treatment.
fill	`boolean`	false	Solid tinted background instead of a border.
icon	`boolean`	true	Show the default lucide icon for the variant.
ctaLabel	`string`	''	When set, renders a Spartan button on the right.
ctaClicked	`output<void>`	—	Fires when the CTA button is clicked.
class	`string`	—	Extra classes for the wrapper.