# Chat Messages
> Cherry chat transcript components - ChatMessageList, ChatMessage, ChatTyping, and ChatSources.
Source: https://cherry.al/code/chat-messages
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Chat Messages
Four components render the [chat kit](/code/chat)'s transcript: the scrolling list, the message rows, the typing indicator, and the source chips under an answer.
```jsx
import {
Avatar,
ChatMessage,
ChatMessageList,
ChatSource,
ChatSources,
ChatTyping,
useChat,
} from "cherry-styled-components";
function Transcript() {
const { messages, loading } = useChat();
return (
{messages.map((message) => (
: undefined
}
>
{message.content}
{message.sources && (
{message.sources.map((source) => (
{source.label}
))}
)}
))}
{loading && }
);
}
```
## ChatMessageList
The scroll container (`role="log"`) with stick-to-bottom behavior. New content keeps the view pinned to the last message; scrolling up more than 15% of a viewport releases the follow, and returning near the bottom - or sending a new question - re-engages it. Scrolling is smooth for discrete messages but jumps instantly while streaming, when the panel opens, and under reduced motion, so a streaming reply never fights the animation.
Forces the instant-scroll mode. Defaults to the provider's `loading` state, so you only need it outside a `ChatProvider`.
## ChatMessage
One transcript row. User messages render as a right-aligned pill filled with the primary color; assistant messages read as a document - full width on the panel background, made for a [``](/code/prose) child when the reply is markdown.
Who is speaking. Defaults to `"assistant"`.
Rendered beside the message, typically an [Avatar](/code/avatar). It centers on the message's last line; while a long assistant reply is taller than the scrollport, it rides the visible bottom edge so the reply stays attributed as you read.
## ChatTyping
The three-dot typing indicator (`role="status"`), shown while a reply is on its way.
The label before the dots. Defaults to `"Answering"`. The dots themselves are decorative and hidden from screen readers, and stop animating under reduced motion.
## ChatSources / ChatSource
A wrapping row of source chips that link an answer back to where it came from. `ChatSource` renders a plain anchor so the library stays router-agnostic; pass `as={Link}` to render through your framework's link component.
```jsx
ThemingChat Kit
```
## Exports
The library also exports the types `ChatMessageRole`, `ChatMessageListProps`, `ChatMessageProps`, `ChatTypingProps`, `ChatSourcesProps`, and `ChatSourceProps`, plus the `chatTextStyles(theme)` mixin - the chat type scale, one step tighter than body text - for custom elements that should match the transcript's density.