ChatConversationList

Conversation navigation list for switching among Chat transcripts without embedding the list inside Chat.

Usage

<script lang="ts">
  import { ChatConversationList } from '@lostgradient/chat';
</script>

<ChatConversationList
  conversations={conversationSummaries}
  activeConversationId={activeConversation.id}
  onSelectConversation={selectConversation}
/>

Agent, activity, and loading more

Each ConversationSummary can carry an optional agent ({ id, name }), shown as a label on its row, and an optional activity of idle, running, or awaiting-input. running and awaiting-input render a status indicator with a visible label and an accessible name; idle, or no activity, renders nothing. A row with neither field renders exactly as it did before.

<ChatConversationList
  conversations={[
    {
      ...summary,
      agent: { id: 'atlas', name: 'Atlas' },
      activity: 'running',
    },
  ]}
  onSelectConversation={selectConversation}
  hasMore={hasMoreConversations}
  loading={loadingConversations}
  onLoadMore={loadNextPage}
  class="session-list"
/>

Passing onLoadMore while hasMore is true renders Cinder's LoadMore after the last row, with the list itself as its scroll container, so the next page loads when the user scrolls to the end of the list. The button stays available as a fallback, and buttonLabel and onError are passed through. The list does not fetch or page anything: the host supplies the rows, flips hasMore and loading, and handles the callback. Give the list a bounded height (for example with class or a flex or grid parent) so it scrolls inside that region; the list only becomes a scroll container while the load-more control is showing.