Message Edit

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

Inline edit affordance for a user message. Once edit mode is active the layout is the same: textarea swaps in for the bubble, Save/Cancel below. The trigger — how the user enters edit mode — is the configurable axis.

Examples

Pencil overlay (default)

Pencil chip floats at the bubble's top-right corner, hover-or-focus revealed. The shipped v21.0.3 default — preserved here so upgrades don't shift the visual.

Could you summarize the latest commit log into release notes?

Sure — let me know what you'd like to change and I'll update my reply.

<pk-message class="justify-end">
  <pk-message-edit
    [content]="content()"
    (saved)="content.set($event)"
  >
    <pk-message-content
      class="bg-primary text-primary-foreground"
      [content]="content()"
    />
  </pk-message-edit>
</pk-message>

Pencil below

editTrigger='pencil-below' renders the trigger as a labelled Edit button in a row beneath the bubble. Useful when the inline-corner chip would crowd a narrow layout.

Walk me through the migration plan for the auth middleware refactor.

<pk-message-edit
  editTrigger="pencil-below"
  [content]="content()"
  (saved)="content.set($event)"
>
  <pk-message-content [content]="content()" />
</pk-message-edit>

Pencil below, persistent

editTrigger='pencil-below-persistent' renders the same labelled Edit button below the bubble, but always visible — no hover-or-focus reveal. Useful for surfaces where discoverability matters more than visual quiet.

Refactor the auth middleware to extract the session refresh helper.

<pk-message-edit
  editTrigger="pencil-below-persistent"
  [content]="content()"
  (saved)="content.set($event)"
>
  <pk-message-content [content]="content()" />
</pk-message-edit>

Icon below

editTrigger='icon-below' renders an icon-only button below the bubble (no label), hover-or-focus revealed. Quietest of the below variants.

Document the migration in CHANGELOG.md when the bump lands.

<pk-message-edit
  editTrigger="icon-below"
  [content]="content()"
  (saved)="content.set($event)"
>
  <pk-message-content [content]="content()" />
</pk-message-edit>

Menu overlay — extension point

editTrigger='menu-overlay' renders a three-dot kebab in place of the pencil. Click opens a dropdown with Edit as the first item — a natural extension point if you later add Copy / Regenerate / Delete without forcing a UX choice up front.

Draft a one-paragraph announcement for the v21.0.4 release.

<pk-message-edit
  editTrigger="menu-overlay"
  [content]="content()"
  (saved)="content.set($event)"
>
  <pk-message-content [content]="content()" />
</pk-message-edit>

Hidden — programmatic trigger

editTrigger='hidden' removes the built-in trigger entirely. Wire your own affordance — here, a separate Edit button outside the component calls editor.startEdit() directly via a viewChild reference.

Tighten this paragraph for clarity and a confident tone.

The button above is rendered by the consumer, not by pk-message-edit. It calls editor.startEdit() on the component via a viewChild reference.

<pk-message-edit
  #editor
  editTrigger="hidden"
  [content]="content()"
  (saved)="content.set($event)"
>
  <pk-message-content [content]="content()" />
</pk-message-edit>

<button (click)="editor.startEdit()">Edit last message</button>

Installation

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

ng generate ngx-prompt-kit:message-edit

Component API

PkMessageEdit

Prop	Type	Default	Description
content	`string`	—	The current message content (required).
editable	`boolean`	true	Gates the trigger affordance. When false, the projected content is read-only.
editTrigger	`"pencil-overlay" \| "pencil-below" \| "pencil-below-persistent" \| "icon-below" \| "menu-overlay" \| "hidden"`	"pencil-overlay"	How the user enters edit mode. pencil-overlay: floating chip on the bubble corner. pencil-below: hover-revealed labelled Edit row beneath the bubble. pencil-below-persistent: same row, always visible. icon-below: hover-revealed icon-only button beneath the bubble. menu-overlay: kebab opening a dropdown (extension point for multi-action menus). hidden: no built-in trigger — call startEdit() programmatically.
class	`string`	—	Extra classes for the host.

Outputs

Prop	Type	Default	Description
saved	`(newContent: string) => void`	—	Fires when Save is clicked or Cmd/Ctrl+Enter pressed, only if the value changed and is non-empty.
cancelled	`() => void`	—	Fires when Cancel is clicked or Escape pressed in the textarea.

Public methods

Prop	Type	Default	Description
startEdit()	`() => void`	—	Switch into edit mode programmatically. Use with editTrigger="hidden" to wire your own trigger (a global shortcut, a menu item, etc).