ChatFileExplorer

A searchable file hierarchy for shared files, uploads and agent outputs, built on Core Tree.

Chat@gaudi/design-system/chat/ChatFileExplorerView in Storybook Source

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

Usage

import { ChatFileExplorer } from '@gaudi/design-system/chat';
<ChatFileExplorer items={files} defaultExpanded={['shared']} selectedId={selectedId} onSelect={selectFile} onPreview={previewFile} onRefresh={refreshFiles} />

Examples

API

18 props

Accessibility

Core Tree provides arrow navigation; Enter or Space selects files. Row actions are named and keyboard reachable. Search preserves folder context and announces matches.

TreeBrowse hierarchical content with expansion, selection, checkboxes and drag feedback.3 examples 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.ChatActivityHistoryWhat happened in a conversation, newest last.ChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.ChatBubbleThe surface around a message, with seven variants and reactions.4 examples ChatDelegationWork handed to another agent: who took it, the brief, its status and its activity.1 example

ChatFileExplorer

Installation

Usage

Examples

Playground

Controlled Selection

Live file updates

Loading

Error And Retry

Empty

Empty folders

API

Accessibility

Related