Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatReasoning

The 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.

Chat@gaudi/design-system/chat/ChatReasoningView 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 ChatReasoning from '@gaudi/design-system/chat/ChatReasoning';

Usage

import { ChatMessageReasoning, ChatMessageReasoningResults, ChatMessageReasoningStep } from '@gaudi/design-system/chat';
<ChatMessageReasoning streaming={thinking} variant='steps'>  <ChatMessageReasoningStep status='done' icon='Search' label='Searched the web' meta='4 results'>    <ChatMessageReasoningResults results={results} />  </ChatMessageReasoningStep>  <ChatMessageReasoningStep status='running' icon='BookOpen' label='Reading the sources' /></ChatMessageReasoning>

Examples

Playground

Storybook

Thinking, then the answer

Storybook

Agent run

Storybook

AI message with steps

Storybook

API

19 props

Accessibility

The trail and each detailed step are disclosure buttons with aria-expanded; step status is spoken after the label, not left to colour. The shimmer is real text and holds still for reduced motion.

Notes

  • The Agent run and AI message with steps examples on this page combine reasoning, a chain of thought, a tool approval (Chat/ChatTool) and a checkpoint (Chat/ChatMessageList).
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 examplesChatToolOne tool call with status, input and output as data, nested calls and a retry, plus ChatMessageToolApproval for calls that wait on the person.1 exampleChatMessageListThe conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.6 examples