Thread

The scrolling ChatGPT conversation column with a pinned composer.

import { ChatgptComposer } from "../components/chatgpt-composer";
import { ChatgptMessage } from "../components/chatgpt-message";
import { ChatgptThread } from "../components/chatgpt-thread";
import { CHATGPT_SMALL_TALK } from "../constants/chatgpt-story";

export default function ChatgptThreadExample() {
  return (
    <ChatgptThread
      className="border-chatgpt-border h-96 w-full min-w-0 overflow-hidden rounded-2xl border"
      footer={<ChatgptComposer />}
    >
      {CHATGPT_SMALL_TALK.map((message) => (
        <ChatgptMessage from={message.from} key={message.id}>
          {message.text}
        </ChatgptMessage>
      ))}
    </ChatgptThread>
  );
}

$ bunx --bun shadcn@latest add @notra/chatgpt-thread

ChatgptThread paints ChatGPT’s background and font, centers its children in a 48rem column with 2.5rem between turns, and pins footer below a shadcn ScrollArea. It follows new content while you’re at the bottom and shows a scroll-to-bottom button once you scroll up.

Prop	Default	Description
`footer`		Rendered under the scroll area, usually a `ChatgptComposer`.
`autoScroll`	`true`	Keeps the view pinned to the latest message as content grows.

Give it a height, like h-96 or flex-1 inside a sized parent, so the messages scroll.

Used in

ChatGPT

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.