Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatInput

The composer: ChatPromptComposer with mentions, commands, attachments and send or stop; ChatPromptQueue; ChatModelSelect.

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

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/prompt-composer-mentions-attachments.json.

Usage

import { ChatEffortSlider, ChatModelSelect, ChatPromptComposer, ChatPromptQueue } from '@gaudi/design-system/chat';
<><ChatPromptQueue items={queue} onEdit={edit} onRemove={remove} onSendNow={sendNow} onMove={move} /><ChatPromptComposer  status={streaming ? 'streaming' : 'ready'}  mentions={people}  commands={commands}  onSubmit={(text, { queued }) => (queued ? enqueue(text) : send(text))}  onStop={stop}  toolbar={<ChatModelSelect searchable providers={providers} models={models} value={model} onValueChange={setModel}><ChatEffortSlider value={effort} onValueChange={setEffort} compact /></ChatModelSelect>}/></>

Examples

Chat composer: Mentions, commands and attachments

Storybook

Chat composer: Model and effort

Storybook

Chat composer: Queue follow-ups while a reply streams

Storybook

API

46 props

Accessibility

The prompt is a labelled combobox; icon buttons and queue actions are named. The model trigger names the current model; the searchable list is a labelled combobox with grouped options and the current one checked. The context meter names the share used and opens its breakdown on press. The options switches are named and the trigger lists the options that are on.

AttachmentFile attachments with metadata, previews, actions and upload states.4 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesPillPill renders compact category and status labels.4 examplesLoaderAn accessible loading indicator with arcs, dots, expanding rings, and an indeterminate bar. Loader replaces the former Spinner component and story.3 examples