ActionRow

A row for scripted timelines rather than live tool parts. While state is animating it shows a rotating shimmer label (Brewing..., Crafting..., chosen by index); after step.duration milliseconds it calls onComplete, and once complete it shows step.toolName. Use it for product tours, demos and onboarding replays built from ToolCallStep objects. For real agent output, render tool parts with ToolRenderer or MessageList instead. useToolComplete is the hook behind the timer.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Animated step
API reference
Prop
Type
Required
step
ToolCallStep
Yes
Timeline step describing the tool call
state
StepState
Yes
Animation state of the step, the card shows shimmer while `animating`
onComplete
() => void
Yes
Called once `step.duration` elapses while animating
index
number
Yes
Index of the action in the timeline, selects the shimmer label
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element