Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatWorkspace

A context panel that connects the agent roster to each agent’s files, with a return to the complete workspace.

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

Usage

import { ChatWorkspace } from '@gaudi/design-system/chat';
<ChatWorkspace agents={agents} fileExplorerProps={{ items, selectedId, onSelect, onPreview, onRefresh }} view={view} onViewChange={setView} agentId={agentId} onAgentChange={setAgentId} />

Examples

Playground

Storybook

Agent roster and activity

Storybook

Empty

Storybook

Controlled workspace navigation

Storybook

API

13 props

Accessibility

Core Tabs and Tree own keyboard navigation. Agent actions move focus to the Files tab. Control view, agentId and explorer selection when composing desktop and Sheet copies in ChatShell.

Notes

  • The host owns preview rendering, permissions and file IO. ChatShell owns responsive layout and overlays.
TabsSwitch between related panels with keyboard-accessible tab controls.3 examplesTreeBrowse hierarchical content with expansion, selection, checkboxes and drag feedback.3 examplesSheetA panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.8 examplesChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.