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.

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

<pk-message>
  <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..."
  />
</pk-message>

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?

<pk-message>
  <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"
  />
</pk-message>

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.

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

<pk-message-actions 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>
</pk-message-actions>

Installation

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

ng generate ngx-prompt-kit:message

Component API

PkMessage

Prop	Type	Default	Description
class	`string`	—	Extra classes merged onto the host.

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.

PkMessageActions

Prop	Type	Default	Description
class	`string`	—	Extra classes for the action row.

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.