#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 · Storybook

#Usage

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.

#Streaming

A paragraph streams in every 600ms. The view follows the growing answer; scroll up and it stops following and the scroll button appears.

#Analytics

data-analytics-id on ConversationScrollButton lands on its <button>. Scroll the log up to reveal it. Keep analytics off the Conversation root — a click anywhere inside would resolve to it.

#Props

#ConversationContent

#ConversationEmptyState

#ConversationScrollButton

#Explorer