Chat Container

A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth and responsive user experience in conversation interfaces.

Examples

Chat with Custom Scroll Behavior

Customize the auto-scroll behavior by toggling the auto-scroll feature on or off. This example demonstrates how to give users control over the scrolling behavior.

Hello! Can you help me with a coding question?
AI

Of course! I'd be happy to help with your coding question. What would you like to know?

How do I create a responsive layout with CSS Grid?
AI

Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

This creates a grid where:

  • Columns automatically fit as many as possible
  • Each column is at least 250px wide
  • Columns expand to fill available space
  • There's a 1rem gap between items

Would you like me to explain more about how this works?

Streaming Text Example

A chat container that demonstrates text streaming with automatic scrolling. Click the "Show Streaming" button to see a simulated streaming response with the smart auto-scroll behavior in action.

Hello! Can you help me with a coding question?
AI

Of course! I'd be happy to help with your coding question. What would you like to know?

How do I create a responsive layout with CSS Grid?
AI

Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

This creates a grid where:

  • Columns automatically fit as many as possible
  • Each column is at least 250px wide
  • Columns expand to fill available space
  • There's a 1rem gap between items

Would you like me to explain more about how this works?

Installation

npx shadcn add "https://prompt-kit.com/c/chat-container.json"

Component API

ChatContainer

PropTypeDefaultDescription
childrenReact.ReactNodeChild components to render inside the container
classNamestringAdditional CSS classes
autoScrollbooleantrueWhether to automatically scroll to bottom on content change
scrollToRefReact.RefObject<HTMLDivElement>Optional custom reference for scroll target
...propsReact.HTMLAttributes<HTMLDivElement>All other div props

Auto-Scroll Behavior

The component implements sophisticated scrolling logic to provide a natural user experience:

  • New Messages: Automatically scrolls to the bottom when new messages are added
  • Content Updates: Scrolls to follow streaming content when already at the bottom
  • User Control:
    • Temporarily disables auto-scrolling when users scroll up or use mouse wheel up
    • Maintains scroll position during content updates when user has scrolled up
    • Supports touch interactions by tracking touch start/move/end events
  • Resume Auto-Scroll: Re-enables auto-scrolling when users scroll back to the bottom

Using with ScrollButton

The ChatContainer pairs well with the ScrollButton component to provide a complete chat interface experience:

import { useRef } from "react"
import { ChatContainer } from "@/components/prompt-kit/chat-container"
import { ScrollButton } from "@/components/prompt-kit/scroll-button"

function ChatInterface() {
const containerRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null)

return (

<div className="relative h-[500px]">
<ChatContainer ref={containerRef}>
{/* Your chat messages here */}
</ChatContainer>

    <div className="absolute bottom-4 right-4">
      <ScrollButton
        containerRef={containerRef}
        scrollRef={bottomRef}
      />
    </div>
  </div>

)
}

Performance Considerations

The ChatContainer component is optimized for performance in chat applications:

  1. Uses passive event listeners to avoid blocking the main thread
  2. Implements efficient scroll detection with browser-native APIs
  3. Uses requestAnimationFrame for smooth scrolling animations

For large chat histories, consider implementing virtualization or pagination to maintain performance.

Code BlockScroll Button