Skip to content

ConversationPanel

ConversationPanel is a high-level component that combines a ConversationList sidebar with a chat message area and optional trace links. It manages multi-turn conversation state internally using the useConversations hook and a ConversationBackend.

Import

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

Props

Name Type Required Default Description
backend ConversationBackend Yes -- Backend instance created by createHttpConversationBackend. Provides methods for listing, creating, sending messages, and deleting conversations.
defaultAgentName string No -- Default agent name used when creating new conversations.
defaultParameters Record<string, unknown> No -- Default parameters sent with each message in new conversations.
onViewTrace (traceId: string) => void No -- Callback invoked when the user clicks a "View Trace" link on an assistant message. Receives the traceId associated with that response.
style React.CSSProperties No -- Custom inline styles applied to the root container.

Features

Two-Panel Layout

The component renders a horizontal two-panel layout:

  • Left panel -- ConversationList sidebar for browsing, creating, and deleting conversations
  • Right panel -- Chat message area showing the messages of the selected conversation, plus an input field

Multi-Turn Conversations

Each conversation maintains its own message history. Selecting a conversation loads its messages. Sending a message appends it to the current conversation and displays the agent's response.

When onViewTrace is provided and the agent response includes a traceId, a "View Trace" link appears below each assistant message. Clicking it invokes the callback, allowing you to navigate to a trace detail view.

Automatic Refresh

The conversation list refreshes automatically after creating, sending, or deleting conversations. The selected conversation's messages update after each send.

Usage

Basic Conversation Panel

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

const backend = createHttpConversationBackend({
  baseUrl: "https://api.example.com",
  getHeaders: () => ({
    Authorization: `Bearer ${getToken()}`,
  }),
});

function ConversationsPage() {
  return (
    <ConversationPanel
      backend={backend}
      defaultAgentName="qa-chat"
      style={{ height: "100vh" }}
    />
  );
}

With Trace Navigation

import { useNavigate } from "react-router-dom";
import {
  ConversationPanel,
  createHttpConversationBackend,
} from "@modernpath/agent-ui-react";

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

function ConversationsWithTraces() {
  const navigate = useNavigate();

  return (
    <ConversationPanel
      backend={backend}
      defaultAgentName="incident-resolver"
      defaultParameters={{ severity: "high" }}
      onViewTrace={(traceId) => navigate(`/traces/${traceId}`)}
      style={{ height: "calc(100vh - 64px)" }}
    />
  );
}

Custom Styling

function StyledConversations() {
  return (
    <ConversationPanel
      backend={backend}
      defaultAgentName="qa-chat"
      style={{
        height: 600,
        border: "1px solid #e0e0e0",
        borderRadius: 8,
      }}
    />
  );
}