Chat Container

A scroll area that auto-sticks to the bottom on new content — but only if the user is already there. Pair with ScrollButton for a back-to-bottom affordance.

Examples

Auto-scroll on new messages

Add a message; the container scrolls to keep up. Scroll up manually and the auto-scroll yields to you — the floating button takes you back.

Message 1 — chat scrolls to follow as new content arrives.

Message 2 — chat scrolls to follow as new content arrives.

Message 3 — chat scrolls to follow as new content arrives.

Message 4 — chat scrolls to follow as new content arrives.

Message 5 — chat scrolls to follow as new content arrives.

<pk-chat-container-root class="relative h-[360px] p-4">
  <pk-chat-container-content class="gap-3">
    @for (m of messages(); track m.id) {
      <pk-message>
        <pk-message-avatar [src]="m.avatar" alt="" />
        <pk-message-content [content]="m.text" />
      </pk-message>
    }
  </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>

Installation

Add the chat-container component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:chat-container

Component API

PkChatContainerRoot

Prop	Type	Default	Description
class	`string`	—	Extra classes for the scroll container.
isAtBottom	`Signal<boolean>`	—	Read-only signal exposed via CHAT_CONTAINER_STATE.
scrollToBottom()	`(behavior?: ScrollBehavior) => void`	—	Method to programmatically scroll to bottom.

PkChatContainerContent

Prop	Type	Default	Description
class	`string`	—	Extra classes for the inner flex column.

PkChatContainerScrollAnchor

Prop	Type	Default	Description
class	`string`	—	Extra classes for the 1-pixel anchor element.