ChatContainer

Scrollable fixed-height container that auto-scrolls to bottom when children change.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ChatContainerScrollable fixed-height container that auto-scrolls to bottom when children change.

"use client";
import { useRef, useEffect } from "react";
import type { ReactNode } from "react";

type ChatContainerProps = {
  children: ReactNode;
  maxHeight?: string;
};

export function ChatContainer({ children, maxHeight = "360px" }: ChatContainerProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.scrollTop = ref.current.scrollHeight;
    }
  });

  return (
    <div ref={ref} className="pk-chat-container" style={{ maxHeight }}>
      {children}
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	Chat content to scroll
`maxHeight`	`string`	`"360px"`	Max height before scrolling