tool-timeline-item.tsx

Overview

tool-timeline-item.tsx is a React functional component file designed to render a timeline view of various tools' operations or results within a workflow UI. It visually represents each tool invocation as a timeline item, displaying tool icons, execution duration, results, and optionally, arguments passed to those tools.

This component integrates with a timeline UI component library and an accordion UI to show/hide details about each tool's execution in a collapsible manner. It is tailored for scenarios where multiple tools are executed sequentially, and users need an intuitive interface to track the progress and results.

Detailed Explanation

Component: `ToolTimelineItem`

Purpose

ToolTimelineItem renders a list of tool executions on a timeline. Each tool's data is shown as an individual timeline item with an icon, name, execution time, and expandable details. It supports both a full view and a share-friendly compact view.

Props

Prop	Type	Default	Description
`tools`	`Record<string, any>[]`		An array of tool execution objects. Each object contains information about a tool invocation.
`sendLoading`	`boolean`	`false`	Indicates if the tools are currently loading/sending results; used to display loading states.
`isShare`	`boolean`	`false`	When `true`, adjusts rendering for a shareable view (e.g., hides some icons/details).

Usage Example

import ToolTimelineItem from './tool-timeline-item';

const toolsData = [
  {
    tool_name: 'github',
    result: { stars: 1000 },
    elapsed_time: 2.45,
    path: 'root-->search',
    arguments: { repo: 'originai' },
  },
  {
    tool_name: 'google_scholar',
    result: { papers: [] },
    elapsed_time: 1.2,
    path: 'root-->search',
    arguments: {},
  },
];

<ToolTimelineItem tools={toolsData} sendLoading={false} isShare={false} />;

Internal Functions

`capitalizeWords(str: string, separator: string = '_'): string[]`

Description: Splits the input string by a separator (default _), capitalizes the first letter of each word, and converts the rest to lowercase.
Parameters:
- str: The string to capitalize.
- separator: The delimiter used to split the string.
Returns: An array of capitalized words.
Example:

capitalizeWords('google_scholar'); // ['Google', 'Scholar']
capitalizeWords('some_tool_name', '_'); // ['Some', 'Tool', 'Name']

`changeToolName(toolName: any): string`

Description: Converts a tool name into a human-readable "Agent" prefixed string, using capitalizeWords.
Parameters:
- toolName: The raw tool name string.
Returns: A string like "Agent Google Scholar".
Example:

changeToolName('google_scholar'); // "Agent Google Scholar"

`parentName(str: string, separator: string = '-->'): string`

Description: Extracts the last segment of a string split by a separator (default "-->").
Parameters:
- str: The string to process, e.g., a path like "root-->search-->tool".
- separator: The delimiter to split the string.
Returns: The last substring after the last separator.
Example:

parentName('root-->search-->tool'); // "tool"
parentName('tool'); // "tool"

Component Structure and Behavior

Filtering: The component filters out tools with names 'add_memory' and 'gen_citations' from rendering.
Timeline Rendering:
- Uses timeline UI components (TimelineItem, TimelineHeader, TimelineSeparator, TimelineIndicator, TimelineContent) to build a vertical timeline.
- Each timeline item displays:
  - A separator with a dotted line (except for the last item).
  - A circular indicator with the tool's icon.
  - A spinner animation on the last item if sendLoading is true and the tool's result is '...'.
Icon Handling:
- Uses OperatorIcon component with icons mapped via SVGIconMap.
- If no specific icon exists for a tool, defaults to 'Agent'.
Accordion Details:
- Each timeline item wraps details inside an accordion.
- The accordion trigger displays:
  - Tool name with formatted parent path.
  - Execution elapsed time (in seconds).
  - A colored status indicator.
- The accordion content shows:
  - For isShare === false: A JSON viewer for the tool's result.
  - For isShare === true: A list of argument key-value pairs, if any.
Styling: Uses conditional classNames and utility functions to handle dynamic styles and states (e.g., loading animations, borders).

Important Implementation Details

The component uses a blacklist to exclude certain tool names from rendering.
The timeline separator uses a repeating linear gradient for visual continuity between items.
Loading spinner is conditionally rendered on the last timeline item if the tool is still processing.
Tool names are normalized and capitalized for consistent display.
Arguments details are only shown when isShare is true and arguments exist.
External dependencies:
- lodash for isEmpty check.
- Utility functions from workflow-timeline for JSON rendering and string manipulation.
- UI components from originui/timeline and ui/accordion.

Interactions with Other Parts of the System

Timeline Components (originui/timeline): Provides the timeline structure and layout for tool steps.
Accordion Components (ui/accordion): Enables expandable and collapsible detail views per timeline step.
Operator Icons (operator-icon): Shows relevant SVG icons for different tool operators.
Utility Functions (workflow-timeline): Assists with JSON rendering and string transformations.
Constants (../constant): Provides the Operator enum with tool names for type safety.

This file is intended for use in a larger workflow or agent UI visualization system where multiple tools or operators execute in sequence, and the user needs to inspect the timeline of these executions.

Mermaid Diagram: Component Structure and Props

componentDiagram
    direction TB
    ToolTimelineItem <|-- TimelineItem
    TimelineItem --> TimelineHeader
    TimelineHeader --> TimelineSeparator
    TimelineHeader --> TimelineIndicator
    TimelineItem --> TimelineContent
    TimelineContent --> Accordion
    Accordion --> AccordionItem
    AccordionItem --> AccordionTrigger
    AccordionItem --> AccordionContent
    AccordionContent --> JsonViewer
    TimelineIndicator --> OperatorIcon

    ToolTimelineItem : props
    ToolTimelineItem : - tools: Record<string, any>[]
    ToolTimelineItem : - sendLoading: boolean
    ToolTimelineItem : - isShare?: boolean

Summary

tool-timeline-item.tsx is a React component that visualizes a sequence of tool operations in a timeline format. It filters out unnecessary tools, capitalizes tool names, and represents each tool with its icon, execution time, and expandable details. The component adapts its display for shareable views and loading states, making it a versatile UI element in workflow monitoring and debugging tools.