Block

Scrollable chat thread

Full back-and-forth thread inside a chat-container. Auto-sticks to the bottom on new turns; scroll up and the floating scroll-button takes you back.

Auto-stick + back-to-bottom button

What does signal() do that BehaviorSubject does not?

Synchronous reads and automatic dependency tracking. With a BehaviorSubject you have to subscribe (or call .value) and rebuild your own derived state. With signal() you just read it inside another reactive primitive and the framework wires up the graph.

And computed()?

computed() is the read-only sibling. It memoises the last result and only re-runs when one of its source signals changes — perfect for cheaply-derived view state.

<pk-chat-container-root class="relative h-full p-4">
  <pk-chat-container-content class="gap-4">
    @for (t of turns(); track t.id) {
      @if (t.role === 'user') {
        <div hlmMessage align="end">
          <pk-message-content
            class="bg-primary text-primary-foreground"
            [content]="t.text"
          />
        </div>
      } @else {
        <div hlmMessage>
          <pk-message-avatar src="" alt="Assistant" fallback="AI" />
          <pk-message-content [markdown]="true" [content]="t.text" />
        </div>
      }
    }
  </pk-chat-container-content>
  <pk-chat-container-scroll-anchor />
  <div class="sticky bottom-2 ml-auto w-fit pr-1">
    <pk-scroll-button />
  </div>
</pk-chat-container-root>

// Component
protected readonly turns = signal<Turn[]>([
  { id: 1, role: 'user', text: '...' },
  { id: 2, role: 'assistant', text: '...' },
]);

protected addTurn(): void {
  this.turns.update(list => [...list, newTurn]);
  // chat-container auto-scrolls only if user is at the bottom
}