Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatMessageList

The conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.

Chat@gaudi/design-system/chat/ChatMessageListView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import ChatMessageList from '@gaudi/design-system/chat/ChatMessageList';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/message-scroller-anchored-turn.json.

Usage

import { ChatMessageParts, ChatMessageScroller, ChatMessageScrollerContent, ChatMessageScrollerItem, ChatMessageScrollerProvider, ChatMessageScrollerViewport } from '@gaudi/design-system/chat';
<ChatMessageScrollerProvider autoScroll>  <ChatMessageScroller>    <ChatMessageScrollerViewport aria-label='Conversation'>      <ChatMessageScrollerContent>        {turns.map((turn) => (          <ChatMessageScrollerItem key={turn.id} scrollAnchor={turn.role === 'user'}>            <ChatMessageParts parts={turn.parts} streaming={turn.streaming} />          </ChatMessageScrollerItem>        ))}      </ChatMessageScrollerContent>    </ChatMessageScrollerViewport>  </ChatMessageScroller></ChatMessageScrollerProvider>

Examples

New turn anchored under the last answer

Storybook

Streamed reply: drafting a post

Storybook

Opening position and jump to latest

Storybook

Older history that keeps your position

Storybook

Pinned to the newest streamed line

Storybook

Step between turns from a navigator

Storybook

API

12 props

Accessibility

The thread scrolls inside a labelled region; announce the start and end of a reply once, never every token. A checkpoint is a labelled group whose restore button is described by its label and time.

Notes

  • See Agent run on Chat/ChatReasoning for a checkpoint between turns with a confirmed restore.
ChatThe chat frame: a shell for a full page or a sidebar assistant that composes the Chat parts: the thread, the composer, sessions, files, the plan and activity.4 examplesChatReasoningThe thinking trail before an answer: a shimmering Thinking… label while it streams, a chain of thought of detailed steps with search results and images, folding into Thought for Ns once the answer starts.CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesChatMessageOne turn in a conversation: avatar, sender and time, the content stack and a status footer.4 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples