Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatEffortSlider

How hard the assistant should think, as a stepped slider over named levels.

Chat@gaudi/design-system/chat/ChatEffortSliderView 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 { ChatEffortSlider } from '@gaudi/design-system/chat/ChatEffortSlider';

Usage

import { ChatEffortSlider } from '@gaudi/design-system/chat';
<ChatEffortSlider value={effort} onValueChange={setEffort} />

Examples

Playground

Storybook

Custom levels: review depth

Storybook

API

8 props

Accessibility

The thumb announces the level name through aria-valuetext.

SliderAdjust one value or a range with pointer and keyboard input.4 examplesChatActivityHistoryWhat happened in a conversation, newest last.ChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.ChatAgentMarkThe assistant’s mark: a Gaudí-inspired motif glazed in a tile hue picked from a seed, or an icon, image or monogram on a token tile, with an optional activity badge.ChatBubbleThe surface around a message, with seven variants and reactions.4 examplesChatDelegationWork handed to another agent: who took it, the brief, its status and its activity.1 example