Message

A row in a chat thread. Pairs an avatar with content; supports plain text or markdown, plus a row of inline actions.

Examples

Basic conversation

A back-and-forth exchange. User messages align right, assistant messages align left with an avatar.

Could you summarize the latest commit log into release notes?

I can help with that — pull the commit range and I'll group them into features, fixes, and chores.

<div hlmMessage align="end">
  <pk-message-content
    class="bg-primary text-primary-foreground"
    content="Could you summarize the latest commit log into release notes?"
  />
</div>

<div hlmMessage>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <pk-message-content
    content="I can help with that — pull the commit range and I'll group them..."
  />
</div>

With markdown

Set [markdown]=true on the content to render headings, lists, code, and emphasis.

Give me the v0.1.0 changelog as markdown.

v0.1.0

Refactored the auth middleware
Added session.refresh() helper
Fixed an off-by-one in pagination

Want me to group by author next time?

<div hlmMessage>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <pk-message-content
    [markdown]="true"
    content="**v0.1.0**

- Refactored the auth middleware
- Added \`session.refresh()\` helper"
  />
</div>

With actions

MessageActions and MessageAction add interactive controls below an assistant message — copy, regenerate, thumbs up/down.

Explain the difference between signal() and computed().

signal() holds writable state. computed() derives a read-only value from one or more signals; it re-evaluates lazily when its dependencies change.

<div hlmMessage>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <pk-message-content content="signal() holds writable state..." />
</div>

<div hlmMessageFooter class="ml-11">
  <pk-message-action tooltip="Copy">
    <button hlmBtn variant="ghost" size="icon-sm">
      <svg>...</svg>
    </button>
  </pk-message-action>
  <pk-message-action tooltip="Good response">...</pk-message-action>
  <pk-message-action tooltip="Bad response">...</pk-message-action>
</div>

Upgrading to v22.1

The major version tracks the Angular major it targets, so breaking component changes ship in minors. This one needs a template edit.

pk-message and pk-message-actions were removed in favour of Spartan's own message primitives, which provide the alignment context the surrounding slots rely on. Generate them with ng g @spartan-ng/cli:ui message, then swap the wrappers:

<!-- before -->
<pk-message class="justify-end">…</pk-message>
<pk-message-actions>…</pk-message-actions>

<!-- after -->
<div hlmMessage align="end">…</div>
<div hlmMessageFooter>…</div>

pk-message-content, pk-message-avatar and pk-message-action are unchanged — keep using them inside hlmMessage.

Installation

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

ng generate ngx-prompt-kit:message

Component API

HlmMessage (spartan)

Prop	Type	Default	Description
align	`"start" \| "end"`	"start"	Row direction. Use "end" for user messages. Replaces PkMessage.

PkMessageAvatar

Prop	Type	Default	Description
src	`string`	—	Avatar image URL (required).
alt	`string`	—	Alt text for the image (required).
fallback	`string`	—	Initials shown if the image fails.
class	`string`	—	Extra classes for the avatar.

PkMessageContent

Prop	Type	Default	Description
content	`string`	—	The text content. Optional — you can also project markup via ng-content.
markdown	`boolean`	false	Render content as markdown via pk-markdown.
class	`string`	—	Extra classes for the bubble.

HlmMessageFooter (spartan)

Prop	Type	Default	Description
—	`—`	—	Action row; auto-aligns for align="end". Replaces PkMessageActions.

PkMessageAction

Prop	Type	Default	Description
tooltip	`string`	—	Tooltip label shown on hover (required).
side	`"top" \| "bottom" \| "left" \| "right"`	"top"	Tooltip placement.
class	`string`	—	Extra classes applied to the tooltip content.