Response Stream

Reveals text chunk-by-chunk to mimic an LLM's streaming response. Two modes: typewriter (cumulative) or fade (per-word).

Examples

Typewriter mode

One chunk per animation frame. Speed is on a 1–100 scale.

A response stream lets you reveal generated text incrementally. The component takes a string, a mode, and a speed; it handles the rendering frames for you.

<pk-response-stream
  [textStream]="text"
  mode="typewriter"
  [speed]="40"
/>

Fade mode

Each word fades in independently. Feels softer for long-form output.

A response stream lets you reveal generated text incrementally. The component takes a string, a mode, and a speed; it handles the rendering frames for you.

<pk-response-stream
  [textStream]="text"
  mode="fade"
  [speed]="40"
/>

Live streaming (continues, doesn't restart)

Simulates an LLM streaming response: chunks arrive every ~150ms and append to the bound signal. The typewriter continues from where it left off rather than restarting on every update.

// Consumer signal updated as chunks arrive
const text = signal('');

function appendChunk(chunk: string) {
  text.update(v => v + chunk);
}

// Template
<pk-response-stream
  [textStream]="text()"
  mode="typewriter"
  [speed]="60"
/>

Big chunks, slow cadence

A larger paragraph-sized chunk arrives every 1000ms — closer to a real LLM that streams complete sentences. Same continuation behaviour: typewriter advances through the new content without restarting.

// Paragraph-sized chunk every 1000ms
const text = signal('');

function appendParagraph(chunk: string) {
  text.update(v => v + chunk);
}

// Template — higher speed keeps the catch-up visible at 1s pacing
<pk-response-stream
  [textStream]="text()"
  mode="typewriter"
  [speed]="80"
/>

Installation

Add the response-stream component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:response-stream

Component API

PkResponseStream

Prop	Type	Default	Description
textStream	`string`	''	The full text to reveal incrementally.
mode	`"typewriter" \| "fade"`	"typewriter"	Reveal style.
speed	`number`	20	1–100. Higher = faster.
fadeDuration	`number`	—	Override per-segment fade duration in ms.
segmentDelay	`number`	—	Override per-segment delay in ms.
characterChunkSize	`number`	—	Override characters revealed per frame.
completed	`output<void>`	—	Fires when the stream finishes.
class	`string`	—	Extra classes for the wrapper.