🌏 Translated with the assistance of DeepSeek and ChatGPT

ActionList

A component that presents how an AI Agent works, listing every action and its status in order, with expandable details and folding support.

Basic Usage

Place ActionListItem inside the default slot of ActionList to render the rows. Give every row an index as its identifier, and describe the step with status, title, and content.

Search the web

Found 12 sources about pixel rendering.

Read the sources

Reading page 3 of 12...

Write the summary

Waiting for the previous step to finish.

Hide source code

Status

status controls the state of ActionListItem and accepts 'pending' (default), 'running', 'success', 'warning', 'error', and 'skipped'. Both the node icon and the accent color follow the status, and the icon of 'running' keeps spinning.

A custom color can be passed through color, which overrides the color of the status.

Pending

This step has not started yet.

Running

This step is being executed.

Success

This step finished successfully.

Warning

This step finished with a warning.

Error

This step failed.

Skipped

This step was skipped.

Custom color

A custom color overrides the color of the status.

Hide source code

Expandable Detail

When an ActionListItem carries a detail, clicking its header expands the detail. Set expandable to false to keep a row collapsed, use defaultExpanded to expand rows in uncontrolled mode, and expanded for the controlled mode.

The expandedChange event is triggered when the set of expanded row indices change.

animationDuration controls the duration of the expand and collapse animation.

Search the web

12 sources found

Kept the 12 most relevant pages of the query as candidates.

Read the sources

Page 3 of 12

Extracted the key points of every page and stored them as notes for the summary.

Write the summary

Waiting

Drafted a 200-word summary from the notes and asked the user to review it.

Keep this row closed

A detail is set, but expandable is false.

Hide source code

Size

Use the size prop to set the size of ActionList. It accepts 'small', 'medium' (default), and 'large', and the size of the node, the font size, and the icon all scale with it.

Plan the task

Done

Run the tools

In progress

Running......

Plan the task

Done

Run the tools

In progress

Running......

Plan the task

Done

Run the tools

In progress

Running......

Hide source code

Spacing

Use the spacing prop to set the spacing between the rows of ActionList. A number is treated as pixels, while a string is used as a CSS length value.

ActionListItem also supports the spacing prop, which overrides the spacing of ActionList. It inherits that spacing when it is not set. The last row keeps no spacing.

Search the web

ActionList sets spacing to 32.

Read the sources

Every row inherits it.

Write the summary

The last row keeps no spacing.

Hide source code

Connector Line

Use the lineVariant prop to set the style of the connector line between rows. It accepts 'solid' (default) and 'dashed'. The line runs downwards from the node, and the last row draws no line.

ActionListItem also supports the lineVariant prop, which overrides the style set by ActionList.

Search the web

The `lineVariant` prop is dashed.

Read the sources

The row overrides the line variant with solid.

Write the summary

The last row draws no line.

Hide source code

Fold

Once collapsible is set, a fold trigger appears when the number of rows exceeds maxDisplayItems (3 by default). defaultCollapsed and collapsed drive the folded state in uncontrolled and controlled mode respectively, and foldPlacement decides whether the trigger sits above or below the rows.

The collapsedChange event is triggered when the folded state changes.

Show 3 more

Understand the request

The goal is clear.

Search the web

Found 6 sources.

Show 2 more

Understand the request

The goal is clear.

Search the web

Found 6 sources.

Read the sources

Reading page 2 of 6...

Hide source code

Custom Fold Content

ActionListItem provides the title, content, and detail slots for customizing the title, the supplementary content, and the expanded detail content respectively.

The icon slot of ActionListItem replaces the default icon at the node, and it receives the current status.

The fold slot customizes the content of the fold trigger and receives the current folded state, the number of hidden rows, and the total number of rows.

2 more steps

Search the web

Found 12 sources.

The detail slot renders anything, from styled text to another component.

Read the sources

The content slot sits next to the title.

Expanded through the detail slot.

Write the summary

Waiting for the previous step.

Hide source code

Ellipsis

Once ellipsis is set on an ActionListItem, its title and content stay on a single line and are truncated with an ellipsis. When the title alone already overflows, the content is hidden and only the title remains.

Search the web for the latest pixel rendering articles

The content is hidden once the title alone overflows the row.

Read

Both the title and the content are truncated with an ellipsis.

Write the summary

Hide source code

Data-driven Rows

Besides the default slot, the row data can be passed through the items prop so that ActionList renders the ActionListItem components itself. Every entry supports index, status, title, content, detail, ellipsis, color, spacing, lineVariant, and expandable, and the defaults of ActionListItem are used for the fields that are not set. When both items and the default slot are provided, items wins.

Search the web

Found 12 sources about pixel rendering.

Kept the 12 most relevant pages of the query as candidates.

Read the sources

Reading page 3 of 12...

Write the summary

Waiting for the previous step to finish.

Ask the user to review

No status is set, so the row stays pending.

Hide source code

API

ActionListItemData

Attribute	Type	Optional	Default	Description	Version
index	string | number | symbol	True		The identifier of ActionListItem.	0.2.1
status	'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped'	True	'pending'	The status of ActionListItem.	0.2.1
title	ValidContent	True		The title of ActionListItem.	0.2.1
content	ValidContent	True		The supplementary content of ActionListItem.	0.2.1
detail	ValidContent	True		The detail content shown after ActionListItem is expanded.	0.2.1
icon	ValidContent	True		The icon of ActionListItem.	0.2.1
ellipsis	boolean	True	false	Whether the text of ActionListItem is truncated with an ellipsis when it overflows a single line.	0.2.1
color	string	True		The custom color of ActionListItem.	0.2.1
spacing	number | string	True		The spacing of ActionListItem, which overrides the spacing set by ActionList.	0.2.1
lineVariant	'solid' | 'dashed'	True	'solid'	The style of the ActionListItem connector line, which overrides the style set by ActionList.	0.2.1
expandable	boolean	True		Whether ActionListItem can be expanded when it carries detail content.	0.2.1
animationDuration	number	True	250	The duration of the expand and collapse animation of ActionListItemData.	0.2.1

ActionListProps

Attribute	Type	Optional	Default	Description	Version
items	ActionListItemData[]	True		The row data of ActionList, the default slot is rendered when it is not provided.	0.2.1
size	'small' | 'medium' | 'large'	True	'medium'	The size of ActionList.	0.2.1
spacing	number | string	True		The spacing between the rows of ActionList.	0.2.1
lineVariant	'solid' | 'dashed'	True	'solid'	The style of the connector line in ActionList.	0.2.1
animationDuration	number	True	250	The duration of the expand and collapse animation of ActionList.	0.2.1
expanded	Array<number | string | symbol>	True		The set of expanded row indices in controlled mode.	0.2.1
defaultExpanded	Array<number | string | symbol>	True		The set of expanded row indices in uncontrolled mode.	0.2.1
collapsible	boolean	True	false	Whether the fold trigger is provided when the row count exceeds maxDisplayItems, counting the rows of items or of the default slot.	0.2.1
maxDisplayItems	number	True	3	The number of rows shown while folded.	0.2.1
collapsed	boolean | null	True		The folded state in controlled mode.	0.2.1
defaultCollapsed	boolean | null	True		The folded state in uncontrolled mode.	0.2.1
foldPlacement	'start' | 'end'	True	'start'	The position of the fold trigger relative to ActionList.	0.2.1

ActionListEvents

Event	Parameter	Description	Version
update:expanded	expanded: Array<number | string | symbol>	Triggered when the set of expanded row indices changes.	0.2.1
expandedChange	expanded: Array<number | string | symbol>	Triggered when the set of expanded row indices changes, with a copy of that set.	0.2.1
itemExpandedChange	index: number | string | symbol, expanded: boolean	Triggered when the expanded state of a row changes.	0.2.1
update:collapsed	collapsed: boolean	Triggered when the folded state changes.	0.2.1
collapsedChange	collapsed: boolean	Triggered when the folded state changes.	0.2.1

ActionListSlots

Slot	Parameter	Description	Version
default		The row content of ActionList, used to place ActionListItem.	0.2.1
fold	collapsed: boolean, hiddenCount: number, total: number	The custom content of the fold trigger of ActionList.	0.2.1

ActionListItemProps

Attribute	Type	Optional	Default	Description	Version
index	number | string | symbol	False		The identifier of ActionListItem.	0.2.1
status	'pending' | 'running' | 'success' | 'warning' | 'error' | 'skipped'	True	'pending'	The status of ActionListItem.	0.2.1
title	string	True		The title of ActionListItem.	0.2.1
content	string	True		The supplementary content of ActionListItem.	0.2.1
detail	string	True		The detail content shown after ActionListItem is expanded.	0.2.1
ellipsis	boolean	True	false	Whether the text of ActionListItem is truncated with an ellipsis when it overflows a single line.	0.2.1
spacing	number | string	True		The spacing of ActionListItem, which overrides the spacing set by ActionList.	0.2.1
color	string	True		The custom color of ActionListItem.	0.2.1
lineVariant	'solid' | 'dashed'	True	'solid'	The style of the ActionListItem connector line, which overrides the style set by ActionList.	0.2.1
expandable	boolean	True	true	Whether ActionListItem can be expanded when it carries detail content.	0.2.1
animationDuration	number	True	250	The duration of the expand and collapse animation of ActionListItem.	0.2.1

ActionListItemEvents

Event	Parameter	Description	Version
expandedChange	expanded: boolean	Triggered when the expanded state of ActionListItem changes.	0.2.1

ActionListItemSlots

Slot	Parameter	Description	Version
detail		The detail content shown after ActionListItem is expanded.	0.2.1
title		The title of ActionListItem.	0.2.1
content		The supplementary content of ActionListItem.	0.2.1
icon	status: ActionItemStatus	The icon at the node of ActionListItem.	0.2.1

ValidContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)