agent-card.tsx

Overview

The agent-card.tsx file defines a React functional component named AgentCard that renders a card UI element representing an agent or flow entity. This card is designed to be displayed on a home or dashboard screen, providing a concise snapshot of agent data with interaction options like navigation, renaming, and additional actions via a dropdown menu.

The component leverages other UI components (HomeCard, MoreButton, SharedBadge, AgentDropdown) and hooks (useNavigatePage, useRenameAgent) to encapsulate its functionality. It receives an agent data object and a function to trigger an agent rename modal, then renders a card with agent details, a shared badge, and a dropdown menu for further options.

Detailed Explanation

Imports

• UI Components:

  • HomeCard: The main card container to display agent information.

  • MoreButton: A button typically showing three dots or similar for additional options.

  • SharedBadge: A badge component to visually highlight the agent's nickname.

  • AgentDropdown: A dropdown menu component specific to agent-related actions.

• Hooks:

  • useNavigatePage: Custom hook to handle navigation logic.

  • useRenameAgent: Custom hook that provides rename functionality/modal triggers.

• Types:

  • IFlow: Interface type representing the agent data structure from the database.

Types

DatasetCardProps

export type DatasetCardProps = {
  data: IFlow;
} & Pick<ReturnType<typeof useRenameAgent>, 'showAgentRenameModal'>;

• Description:
  Defines the props accepted by the AgentCard component.

• Properties:

  • data (IFlow): The agent data object containing metadata such as id, title, description, and nickname.

  • showAgentRenameModal (function): A handler function to show the rename modal, derived from the useRenameAgent hook.

Component: AgentCard

export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) { 
  const { navigateToAgent } = useNavigatePage();

  return (
    <HomeCard
      data={{ ...data, name: data.title, description: data.description || '' }}
      moreDropdown={
        <AgentDropdown showAgentRenameModal={showAgentRenameModal} agent={data}>
          <MoreButton></MoreButton>
        </AgentDropdown>
      }
      sharedBadge={<SharedBadge>{data.nickname}</SharedBadge>}
      onClick={navigateToAgent(data?.id)}
    />
  );
}

Description

AgentCard is a presentational component that displays an agent's information on a card with interactive elements.

Parameters

• data (IFlow): The agent's flow data.

• showAgentRenameModal (function): Callback to trigger renaming UI.

Return Value

• Returns JSX to render a HomeCard component populated with the agent's data, interactive elements, and navigation behavior.

Usage Example

import { useRenameAgent } from './use-rename-agent';
import { AgentCard } from './agent-card';

function AgentsList({ agents }) {
  const { showAgentRenameModal } = useRenameAgent();

  return (
    <div>
      {agents.map(agent => (
        <AgentCard key={agent.id} data={agent} showAgentRenameModal={showAgentRenameModal} />
      ))}
    </div>
  );
}

Implementation Details

• Data Mapping:
  The HomeCard component expects name and description properties, so the AgentCard remaps data.title to name and ensures description is a non-null string.

• Dropdown Menu:
  The moreDropdown prop receives an AgentDropdown component which wraps a MoreButton. The dropdown is passed the showAgentRenameModal function and the current agent data to enable rename and other actions.

• Shared Badge:
  Displays the agent's nickname inside a SharedBadge component as a visual label on the card.

• Navigation:
  The entire card is clickable and triggers navigation to the agent's detail page by calling navigateToAgent with the agent's id.

Interaction with Other Parts of the System

• HomeCard Component:
  The core UI element for displaying card data. AgentCard customizes it with agent-specific data and actions.

• AgentDropdown and MoreButton:
  Provide additional user options such as renaming or other agent-related commands.

• Navigation Hook (useNavigatePage):
  Handles routing to the agent's detailed page based on the agent's id.

• Rename Hook (useRenameAgent):
  Supplies the showAgentRenameModal function to trigger renaming functionality from within the dropdown.

• Data Type (IFlow):
  Defines the shape of the agent data passed into the card, ensuring consistent handling across the app.

Visual Diagram

The following Mermaid component diagram illustrates how the AgentCard component composes and interacts with other UI components and hooks:

componentDiagram
    AgentCard <|-- HomeCard
    AgentCard o-- AgentDropdown
    AgentDropdown *-- MoreButton
    AgentCard o-- SharedBadge
    AgentCard ..> useNavigatePage : uses
    AgentCard ..> useRenameAgent : uses (showAgentRenameModal)

Summary

agent-card.tsx provides a reusable, interactive card component that encapsulates agent data presentation and user interactions such as navigation and renaming. It composes several smaller UI components and hooks to provide a modular and maintainable design, fitting seamlessly into a dashboard or home screen listing of agents. This file plays a pivotal role in bridging agent data and user actions within the application UI.