Skip to content

ConversationList

ConversationList renders a sidebar list of conversations with actions for creating new conversations, selecting an existing one, and deleting conversations. It is typically used alongside ConversationPanel or as a standalone sidebar in custom layouts.

Import

import { ConversationList } from "@modernpath/agent-ui-react";

Props

Name Type Required Default Description
conversations ConversationUI[] Yes -- Array of conversation objects to display. Each entry includes an id, title, createdAt, and updatedAt.
selectedId string \| null Yes -- The id of the currently selected conversation, or null if none is selected. The selected item is visually highlighted.
isLoading boolean Yes -- When true, displays a loading indicator in place of the conversation list.
onSelect (id: string) => void Yes -- Callback invoked when the user clicks a conversation item. Receives the conversation id.
onCreate () => void Yes -- Callback invoked when the user clicks the "New Conversation" button.
onDelete (id: string) => void Yes -- Callback invoked when the user clicks the delete button on a conversation item. Receives the conversation id.

Features

Conversation Items

Each conversation is rendered as a clickable row showing:

  • Title -- the conversation title (auto-generated or user-defined)
  • Timestamp -- relative time since the last update
  • Delete button -- appears on hover; triggers the onDelete callback

New Conversation Button

A button at the top of the list triggers the onCreate callback. This is typically wired to a function that creates a new conversation via the ConversationBackend.

Loading State

When isLoading is true, the list displays a loading spinner. This is useful during initial data fetch or when refreshing the conversation list.

Usage

With useConversations Hook

import {
  ConversationList,
  useConversations,
  createHttpConversationBackend,
} from "@modernpath/agent-ui-react";

const backend = createHttpConversationBackend({
  baseUrl: "/api",
});

function Sidebar() {
  const {
    conversations,
    selectedId,
    isLoading,
    select,
    create,
    remove,
  } = useConversations({ backend });

  return (
    <ConversationList
      conversations={conversations}
      selectedId={selectedId}
      isLoading={isLoading}
      onSelect={select}
      onCreate={create}
      onDelete={remove}
    />
  );
}

Standalone with Custom State

import { useState, useEffect } from "react";
import { ConversationList, ConversationUI } from "@modernpath/agent-ui-react";

function CustomSidebar() {
  const [conversations, setConversations] = useState<ConversationUI[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchConversations().then((data) => {
      setConversations(data);
      setIsLoading(false);
    });
  }, []);

  return (
    <ConversationList
      conversations={conversations}
      selectedId={selectedId}
      isLoading={isLoading}
      onSelect={(id) => setSelectedId(id)}
      onCreate={async () => {
        const newConv = await createConversation();
        setConversations((prev) => [newConv, ...prev]);
        setSelectedId(newConv.id);
      }}
      onDelete={async (id) => {
        await deleteConversation(id);
        setConversations((prev) => prev.filter((c) => c.id !== id));
        if (selectedId === id) setSelectedId(null);
      }}
    />
  );
}