Message Actions Bar

ngx-prompt-kit original — not part of ibelick/prompt-kit

A row of icon-only buttons with tooltips, intended to sit beneath a settled message. Hover-or-focus revealed by default; switch to visible='always' for persistent toolbars. Default action sets exported as DEFAULT_ASSISTANT_ACTIONS and DEFAULT_USER_ACTIONS — spread them and add your own.

Examples

Assistant — default actions

DEFAULT_ASSISTANT_ACTIONS: copy, regenerate, thumbs-up, thumbs-down. The wrapping pk-message + group container drives the hover-reveal.

Yes — Tailwind's color tokens flow through Spartan's CSS variables, so the kit picks up your theme without extra configuration.

<div class="group flex flex-col gap-1">
  <pk-message>
    <pk-message-avatar src="" alt="Assistant" fallback="AI" />
    <pk-message-content content="..." />
  </pk-message>
  <pk-message-actions-bar
    class="ml-11"
    [actions]="DEFAULT_ASSISTANT_ACTIONS"
    (actionPicked)="handle($event)"
  />
</div>

User — default actions

DEFAULT_USER_ACTIONS: copy, edit. Wrap the user bubble in a group container the same way.

Does the kit pick up my Spartan theme automatically?

<div class="group flex flex-col items-end gap-1">
  <pk-message class="justify-end">
    <pk-message-content content="..." />
  </pk-message>
  <pk-message-actions-bar
    [actions]="DEFAULT_USER_ACTIONS"
    (actionPicked)="handle($event)"
  />
</div>

Custom set with active state

Spread the defaults and add your own (Bookmark + Share). The active flag lights the button with bg-accent + text-primary — consumer manages active state in its own signal.

Click thumbs-up to see the active state — it persists across hover-reveal so the consumer can read 'this message was rated good'.

// Spread defaults + add custom actions
const customActions = computed<MessageAction[]>(() => [
  ...DEFAULT_ASSISTANT_ACTIONS.map(a =>
    a.id === 'thumbs-up' ? { ...a, active: thumbsUpActive() } : a
  ),
  { id: 'bookmark', label: 'Save', icon: 'lucideBookmark', active: bookmarkActive() },
  { id: 'share', label: 'Share', icon: 'lucideShare2' },
]);

// Template — visible="always" pins the toolbar
<pk-message-actions-bar
  visible="always"
  [actions]="customActions()"
  (actionPicked)="onPick($event)"
/>

Composed with pk-message-edit

When composing with pk-message-edit, suppress its built-in pencil via editTrigger='hidden' and call editor.startEdit() from the edit action's handler. The edit state machine stays in pk-message-edit; this component just emits intent.

Could you summarise the latest commit log into release notes?

// Suppress pk-message-edit's built-in pencil; let the actions bar own the trigger.
<div class="group flex flex-col items-end gap-1">
  <pk-message class="justify-end">
    <pk-message-edit
      #editor
      editTrigger="hidden"
      [content]="content()"
      (saved)="content.set($event)"
    >
      <pk-message-content [content]="content()" />
    </pk-message-edit>
  </pk-message>
  <pk-message-actions-bar
    [actions]="DEFAULT_USER_ACTIONS"
    (actionPicked)="onAction($event, editor)"
  />
</div>

// Handler — no edit state lives here, just route the intent
onAction(action: MessageAction, editor: PkMessageEdit): void {
  if (action.id === 'edit') editor.startEdit();
  if (action.id === 'copy') navigator.clipboard.writeText(content());
}

Installation

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

ng generate ngx-prompt-kit:message-actions-bar

Component API

PkMessageActionsBar

Prop	Type	Default	Description
actions	`readonly MessageAction[]`	—	Buttons to render (required).
visible	`"hover" \| "always"`	"hover"	hover: opacity-0 with group-hover/group-focus-within reveal — consumer wraps the message + bar in a group div. always: no transition.
orientation	`"horizontal" \| "vertical"`	"horizontal"	Vertical lays the buttons in a column for sidebar-style placements.
class	`string`	—	Extra classes for the host.

MessageAction interface

Prop	Type	Default	Description
id	`string`	—	Stable identifier — track-by + emitted from (actionPicked).
label	`string`	—	Tooltip text + aria-label.
icon	`string`	—	Lucide icon name; consumer must register via provideIcons().
variant	`"default" \| "destructive"`	"default"	destructive paints the icon red.
disabled	`boolean`	false	Greys the button and prevents (actionPicked).
active	`boolean`	false	Lights the button with bg-accent + text-primary; sets aria-pressed="true".

Outputs

Prop	Type	Default	Description
actionPicked	`(action: MessageAction) => void`	—	The picked action (full object, not just id).

Exports

Prop	Type	Default	Description
DEFAULT_ASSISTANT_ACTIONS	`readonly MessageAction[]`	—	copy, regenerate, thumbs-up, thumbs-down.
DEFAULT_USER_ACTIONS	`readonly MessageAction[]`	—	copy, edit.