Chat Conversation
A stick-to-bottom conversation viewport for streaming chat messages.
Usage
Stick-to-bottom keeps the viewport pinned to the latest message while you stream.
It also leaves the user in control: once they scroll away from the bottom, new content can arrive without snapping the viewport away from what they are reading.
You can combine the conversation viewport with reasoning and tool UI so the whole exchange remains in one scrollable surface.
"use client";
import {
ChainOfThought,
ChatConversation,Use ChatConversation as the scrollable message viewport for assistant and user messages.
Full Chat
Here is a settings layout outline with profile, notifications, and a danger zone section.
- Profile card for avatar, display name, and email
- Notification preferences grouped by channel
- Danger zone with clear destructive affordances
For a drawer, I would reduce section padding, keep labels visible, and move destructive actions behind a confirmation step. The same components can stay responsive with container width constraints.
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import {Combine ChatConversation, ChatMessage, ChainOfThought, and PromptInput for a complete chat surface.
Scroll Button
Add ChatConversation.ScrollButton only when your product needs an explicit jump-to-bottom control.
Anatomy
import { ChatConversation } from "@thenamespace/uikit";
<ChatConversation>
<ChatConversation.Content>{messages}</ChatConversation.Content>
<ChatConversation.ScrollAnchor />
</ChatConversation>;With Scroll Button
The release focuses on the chat surface, component polish, and small API cleanup.
- Chat messages now compose with markdown, sources, and actions
- Conversation viewports keep streaming content readable
- AI components share the same spacing and typography rhythm
Long threads keep their message column centered while the viewport owns scrolling. The optional jump button can be added when an app wants an explicit return-to-bottom control.
Scroll away from the latest response and the button appears over the lower edge of the conversation. Pressing it returns the viewport to the newest message.
The default conversation examples omit this control so teams can choose whether the extra affordance belongs in their product.
"use client";
import { useEffect, useRef } from "react";
import {CSS Classes
.chat-conversation- Scrollable root viewport.chat-conversation__content- Message column.chat-conversation__scroll-button- Jump-to-bottom button.chat-conversation__scroll-button-container- Jump-to-bottom button positioner.chat-conversation__scroll-anchor- Bottom scroll anchor
API Reference
ChatConversation
Root scroll viewport. Supports native div props.
ChatConversation.Content
Centers and stacks conversation content. Supports native div props.
ChatConversation.ScrollButton
Optional button that appears when the viewport is away from the bottom. Extends Namespace UIKit Button props.
ChatConversation.ScrollAnchor
Bottom anchor used by the stick-to-bottom behavior. Supports native div props.