Conversation Detail

Full conversation view with message history, tool calls, metadata sidebar, and action controls

SaaSAI Agents

Overview

ConversationDetail provides a comprehensive view of an AI agent conversation. It displays the full message history with user/assistant styling, tool call details, a collapsible metadata sidebar, and action buttons for ending or escalating the conversation. Supports loading state and configurable display options.

Usage

import { ConversationDetail } from "@leanicon/web-builder-library/saas";

<ConversationDetail
  conversation={conversation}
  showMetadata
  showToolCalls
  onEnd={() => setShowEndDialog(true)}
  onEscalate={() => setShowEscalateDialog(true)}
  onBack={() => router.back()}
/>;

Variants

Loading

Active Conversation

Conversation with John Doe

Agent: Customer Support Agent · 2 messages

Active

You

Hi, I need help with my subscription.

10:00 AM

Assistant

Hello! I'd be happy to help you with your subscription. Could you tell me more about the issue?

10:00 AM

Dark

With Tool Calls Visible (code only)

<ConversationDetail
  conversation={conversation}
  showToolCalls={true}
  showMetadata={true}
  defaultMetadataExpanded={true}
  onEnd={() => endConversation(conversation.id)}
  onEscalate={() => escalateConversation(conversation.id)}
  onBack={() => router.back()}
/>

Props

Name	Type	Default	Required	Description
`conversation`	`Conversation`	—	Yes	The conversation entity to display
`isLoading`	`boolean`	`false`	No	Whether the component is in a loading state
`showMetadata`	`boolean`	`true`	No	Whether to show metadata panel
`defaultMetadataExpanded`	`boolean`	`true`	No	Whether metadata panel is expanded by default
`autoScrollMessages`	`boolean`	`true`	No	Whether to auto-scroll messages
`showToolCalls`	`boolean`	`true`	No	Whether to show tool calls in messages
`onEnd`	`(() => void)`	—	No	Callback when end conversation button is clicked
`onEscalate`	`(() => void)`	—	No	Callback when escalate button is clicked
`onBack`	`(() => void)`	—	No	Callback when back button is clicked