All blocks Show me a small computed() example. AI
Block
Streaming assistant message
A real assistant turn: user prompt above, the response streams in chunks with markdown + a fenced code block, and stream-controls swap from Stop to Regenerate when it finishes.
Live response with stream controls
<pk-message class="justify-end">
<pk-message-content
class="bg-primary text-primary-foreground"
content="Show me a small computed() example."
/>
</pk-message>
<pk-message>
<pk-message-avatar src="" alt="Assistant" fallback="AI" />
<pk-response-stream
class="prose prose-sm dark:prose-invert max-w-none"
[textStream]="streamed()"
[markdown]="true"
[speed]="80"
/>
</pk-message>
<pk-stream-controls
[state]="state()"
(stop)="stop()"
(regenerate)="start()"
/>
// Component — chunked append while streaming.
// pk-markdown re-renders on each update; partial markdown still renders gracefully.
protected readonly state = signal<StreamControlsState>('idle');
protected readonly streamed = signal('');
protected start(): void {
this.streamed.set('');
this.state.set('streaming');
const chunks = FULL_RESPONSE.match(/.{1,40}/gs) ?? [];
let i = 0;
const tick = () => {
if (this.state() !== 'streaming') return;
if (i >= chunks.length) { this.state.set('idle'); return; }
this.streamed.update(v => v + chunks[i++]);
setTimeout(tick, 120);
};
setTimeout(tick, 120);
}
protected stop(): void { this.state.set('idle'); }