Prompt Input

Name: ngx-prompt-kit
Author: PianoNic

A chat-style input with autosizing textarea, action slot, and submit on Enter (Shift+Enter for newline).

Examples

Basic input

Type and press Enter to submit. The value below shows what was sent.

Last submitted: —

<pk-prompt-input [(value)]="value" (submitted)="onSubmit()">
  <pk-prompt-input-textarea placeholder="Type a message..." />
  <pk-prompt-input-actions class="mt-2 justify-end">
    <pk-prompt-input-action tooltip="Send">
      <button hlmBtn size="icon-sm" class="rounded-full" (click)="onSubmit()">
        <ng-icon hlm size="xs" name="lucideArrowUp" />
      </button>
    </pk-prompt-input-action>
  </pk-prompt-input-actions>
</pk-prompt-input>

Multiple actions

Multi-action toolbar — attach, voice, send.

<pk-prompt-input [(value)]="value">
  <pk-prompt-input-textarea placeholder="Ask anything..." />
  <pk-prompt-input-actions class="mt-2 justify-between">
    <div class="flex gap-1">
      <pk-prompt-input-action tooltip="Attach file">
        <button hlmBtn size="icon-sm" variant="ghost">
          <ng-icon hlm size="sm" name="lucidePaperclip" />
        </button>
      </pk-prompt-input-action>
      <pk-prompt-input-action tooltip="Voice">
        <button hlmBtn size="icon-sm" variant="ghost">
          <ng-icon hlm size="sm" name="lucideMic" />
        </button>
      </pk-prompt-input-action>
    </div>
    <pk-prompt-input-action tooltip="Send">
      <button hlmBtn size="icon-sm" class="rounded-full">
        <ng-icon hlm size="xs" name="lucideArrowUp" />
      </button>
    </pk-prompt-input-action>
  </pk-prompt-input-actions>
</pk-prompt-input>

Installation

Add the prompt-input component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:prompt-input

Component API

PkPromptInput

Prop	Type	Default	Description
value	`model<string>`	''	Two-way bound text value.
isLoading	`boolean`	false	Disables submit and shows the loading state.
disabled	`boolean`	false	Disables the input entirely.
maxHeight	`number \| string`	240	Cap on the autosizing textarea height.
submitted	`output<void>`	—	Fires on Enter (without Shift) or programmatic submit().
class	`string`	—	Extra classes for the wrapper.

PkPromptInputTextarea

Prop	Type	Default	Description
placeholder	`string`	''	Native textarea placeholder.
disableAutosize	`boolean`	false	Skip auto height adjustment.
class	`string`	—	Extra classes for the textarea.

PkPromptInputActions

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

PkPromptInputAction

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