ChatSessionList

Session navigation inside a complete chat: grouped conversations with title search, new chat, rename and delete.

The compact panel opens History in place of the transcript; the full-page composition uses ChatShell navigation and its narrow-screen Sheet. The host keeps a separate transcript and draft for each session.

Installation

pnpm add github:ahmadassaf/design-system

import { ChatSessionList } from '@gaudi/design-system/chat/ChatSessionList';

Usage

import { ChatShell } from '@gaudi/design-system/blocks/Chat';import { ChatSessionList, ChatMessageParts, ChatPromptComposer } from '@gaudi/design-system/chat';
<ChatShell  title={activeSession.title}  navigation={    <ChatSessionList      sessions={sessions}      activeId={activeSession.id}      onSelect={openChat}      onNew={startChat}      onRename={renameChat}      onDelete={deleteChat}    />  }  composer={<ChatPromptComposer value={activeSession.draft} onValueChange={saveDraft} onSubmit={send} />}>  <div role='region' aria-label='Conversation' tabIndex={0} className='min-h-0 flex-1 overflow-y-auto p-4'>    {activeSession.turns.map((turn) => <ChatMessageParts key={turn.id} parts={turn.parts} />)}  </div></ChatShell>

Examples

Session history in a full chat panel

API

Accessibility

The current chat has aria-current; row menus are named after each chat, and rename and delete use labelled dialogs. In the compact composition, History and New chat remain in the header while history hides the composer; Back to conversation or session selection resumes the transcript. The page navigation Sheet closes after selection and returns focus to its opener.

Related