AgentDetail

Overview

AgentDetail displays a full overview of an AI agent including its name, status, system prompt, model configuration, settings, linked tools and knowledge bases, and version history. It provides action buttons for editing, activating, archiving, deleting, and publishing new versions based on the agent's current status.

Usage

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

<AgentDetail
  agent={agent}
  versions={versions}
  linkedTools={tools}
  linkedKnowledgeBases={knowledgeBases}
  onEdit={() => router.push(`/agents/${agent.id}/edit`)}
  onActivate={() => activateAgent(agent.id)}
  onArchive={() => archiveAgent(agent.id)}
  onDelete={() => setShowDeleteDialog(true)}
  onPublishVersion={() => setShowPublishDialog(true)}
  onToolClick={(tool) => router.push(`/tools/${tool.id}`)}
  onKnowledgeBaseClick={(kb) => router.push(`/knowledge-bases/${kb.id}`)}
  onVersionClick={(version) => console.log("Version:", version.versionNumber)}
/>;

Variants

Loading

Model Configuration

Linked Tools

Linked Knowledge Bases

Version History

Dark

Model Configuration

Linked Tools

Linked Knowledge Bases

Version History

With Full Data (code only)

<AgentDetail
  agent={{
    id: "agent_001",
    tenantId: "tenant_001",
    name: "Customer Support Agent",
    description: "Handles customer inquiries, troubleshooting, and general support questions.",
    systemPrompt: "You are a helpful customer support agent...",
    status: "active",
    modelConfig: { provider: "openai", model: "gpt-4o", temperature: 0.7, maxTokens: 2048 },
    settings: {
      welcomeMessage: "Hello! How can I help?",
      enableMemory: true,
      memoryWindowSize: 10,
      enableStreaming: true,
      responseFormat: "markdown",
      allowedTopics: ["billing", "technical"],
      blockedTopics: [],
      maxConversationLength: 50,
      idleTimeoutMinutes: 30,
    },
    escalationConfig: {
      enabled: true,
      triggers: ["explicit_request", "low_confidence"],
      channels: ["in-app", "email"],
      confidenceThreshold: 0.6,
      maxTurnsBeforeEscalation: 10,
    },
    toolIds: ["tool_001"],
    knowledgeBaseIds: ["kb_001"],
    currentVersionNumber: 3,
    createdAt: "2026-01-01T09:00:00Z",
    updatedAt: "2026-01-20T14:30:00Z",
    createdBy: "user_001",
    updatedBy: "user_002",
  }}
  versions={versions}
  linkedTools={tools}
  linkedKnowledgeBases={knowledgeBases}
  onEdit={() => router.push(`/agents/${agent.id}/edit`)}
  onActivate={() => activateAgent(agent.id)}
  onArchive={() => archiveAgent(agent.id)}
  onDelete={() => setShowDeleteDialog(true)}
/>

Props

Name	Type	Default	Required	Description
`agent`	`Agent`	—	Yes	The agent entity to display
`versions`	`AgentVersion[]`	`[]`	No	Array of agent versions for version history
`linkedTools`	`Tool[]`	`[]`	No	Array of linked tools
`linkedKnowledgeBases`	`KnowledgeBase[]`	`[]`	No	Array of linked knowledge bases
`isLoading`	`boolean`	`false`	No	Whether the component is in a loading state
`onEdit`	`(() => void)`	—	No	Callback when edit button is clicked
`onActivate`	`(() => void)`	—	No	Callback when activate button is clicked
`onArchive`	`(() => void)`	—	No	Callback when archive button is clicked
`onDelete`	`(() => void)`	—	No	Callback when delete button is clicked
`onPublishVersion`	`(() => void)`	—	No	Callback when publish version button is clicked
`onToolClick`	`((tool: Tool) => void)`	—	No	Callback when a tool is clicked
`onKnowledgeBaseClick`	`((kb: KnowledgeBase) => void)`	—	No	Callback when a knowledge base is clicked
`onVersionClick`	`((version: AgentVersion) => void)`	—	No	Callback when a version is clicked