> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# Conversation
Stick-to-bottom for the Wally log: `Conversation` takes `ChatBody`’s place between `ChatHeader` and `ChatFooter`, and `ConversationContent` renders the built `ChatBody` (`role=log`) as the scroller. While an answer streams the view follows it; once the reader scrolls up it stops following and `ConversationScrollButton` appears. Scrolling back down, clicking the button or changing `autoScrollKey` (pass the last user message id) re-sticks. `ConversationEmptyState` is the greeting for an empty chat, rendered inside the scroller. The scroll button is the stock small icon-only Button, floated at the bottom centre.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Conversation) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-conversation--overview)
```tsx
import { Fragment, useState } from 'react';
import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';
import { Chat, ChatFooter, ChatHeader, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
import { Conversation, ConversationContent, ConversationScrollButton } from '@wallarm-org/design-system/Conversation';
import { MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
import { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';
export const Default = () => {
const [turns, setTurns] = useState(HISTORY);
const [value, setValue] = useState('');
const lastId = turns[turns.length - 1]?.id;
const handleSubmit = (question: string) => {
setTurns(previous => [
...previous,
{ id: `u${previous.length}`, question, answer: ANSWER.slice(0, 2) },
]);
setValue('');
};
return (
{turns.map((turn, index) => (
{turn.question}2m ago
{turn.answer.map(paragraph => (
{paragraph}
))}
1m ago
))}
);
};
```
## Usage
```tsx
import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';
import { Chat, ChatFooter, ChatHeader, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
import { Conversation, ConversationContent, ConversationScrollButton } from '@wallarm-org/design-system/Conversation';
import { MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
import { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';
```
## Examples
### Empty
`ConversationEmptyState` with greeting pills, over the `strong` background.
```tsx
import { useState } from 'react';
import { Chat, ChatFooter, ChatHeader, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from '@wallarm-org/design-system/Conversation';
export const Empty = () => {
const [value, setValue] = useState('');
const handleSubmit = () => {
setValue('');
};
return (
Why was this request blocked?
Show top attacked endpoints
);
};
```
### Streaming
A paragraph streams in every 600ms. The view follows the growing answer; scroll up and it stops
following and the scroll button appears.
```tsx
import { Fragment, useEffect, useState } from 'react';
import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';
import { Chat, ChatHeader, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';
import { Conversation, ConversationContent, ConversationScrollButton } from '@wallarm-org/design-system/Conversation';
import { MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';
import { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';
export const Streaming = () => {
const [count, setCount] = useState(1);
const streaming = count < ANSWER.length;
useEffect(() => {
if (!streaming) return;
const timer = setInterval(() => setCount(value => value + 1), 600);
return () => clearInterval(timer);
}, [streaming]);
return (
{HISTORY.map((turn, index) => (
{turn.question}2m ago
{turn.answer.map(paragraph => (
{paragraph}
))}
1m ago
))}
{ANSWER.slice(0, count).map(paragraph => (
{paragraph}
))}
);
};
```
### Analytics
`data-analytics-id` on `ConversationScrollButton` lands on its `