Conversation

Chat container

<ChatContainer />

The scrolling column a conversation sits in. It follows new content down, never shrinks by itself, and lets go when someone scrolls up.

Why is the cart total off by one item?

The loop stops one short: it runs to items.length - 1.

Can you fix it and add a test?

Fixed the bound. Handing the test to the tester.

Wrote a test with two items. It failed before the fix and passes now.

Are totals still summed in floats?

They were. They are in cents now, so 0.1 + 0.2 comes out right.

Scroll up, then send more.

Install

bash

npx shadcn@latest add https://orbeez-kit.vercel.app/r/chat-container.json

Usage

tsx

<ChatContainer className="h-full">
  <ChatContainerContent>
    {messages.map((m) => <Message key={m.id} {...m} />)}
  </ChatContainerContent>
  <div className="absolute inset-x-0 bottom-3 flex justify-center">
    <ScrollButton />
  </div>
</ChatContainer>

Good to know

New content eases the column down rather than snapping it, so a block arriving glides the conversation up.
When something folds away, like reasoning or a finished team of agents, the room it leaves is kept as space at the bottom for the next thing to fill. Nothing above moves.
That reserved space goes as soon as someone scrolls with a wheel, a finger or the keys.

PreviousMessage NextChat timeline