Activity

What an assistant did before it answered.

ThinkingThought for 14s

I'll check how the search calls the API, then cancel stale requests.

Read search.tsx
Ran the tests
```
1 failed, 1 passed
```
Running a command 0:12

View code

tsx

<Activity open>
	<Activity.Summary busy="Thinking">Thought for 14s</Activity.Summary>
	<Activity.Note>I'll check how the search calls the API, then cancel stale requests.</Activity.Note>
	<Activity.Steps>
		<Activity.Step icon={<FileSearchIcon />}>Read search.tsx</Activity.Step>
		<Activity.Step icon={<TerminalIcon />} detail={<pre>1 failed, 1 passed</pre>}>
			Ran the tests
		</Activity.Step>
		<Activity.Step running icon={<TerminalIcon />}>Running a command 0:12</Activity.Step>
	</Activity.Steps>
</Activity>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { Activity } from "@sdxc/ui/chat";

Renders the disclosure. Pass open while the reply streams so its steps show as they arrive; a replay folds it once the answer starts, and history leaves it closed.

Composition

The parts the component publishes, each a static property of the host.

Activity
Activity.SummaryThe disclosure's line: the done label, or the shimmering busy one while the reply streams.
Activity.NoteThe assistant's narration, set as body text above its steps.
Activity.StepsThe steps, in order; boxed frames a run of them with dividers.
Activity.StepOne step: its glyph and words in a muted line.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	An Activity.Summary, then an optional Activity.Note and Activity.Steps.

Also accepts everything in TagProps<"details">.

Activity.Summary

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	What the summary says once the work is done, such as "Thought for 8s".
`busy`	`RemixNode`	No	What it says while the reply around it is busy (`aria-busy="true"`), such as "Thinking"; it shimmers until the reply settles.

Also accepts everything in TagProps<"summary">.

Activity.Note

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	The assistant's own words on what it is about to do.

Also accepts everything in TagProps<"p">.

Activity.Steps

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	Activity.Step rows in the order they happened.
`boxed`	`boolean`	No	Frames the list with dividers, for a run of similar steps inside another step.

Also accepts everything in TagProps<"ol">.

Activity.Step

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	What happened, in the past tense ("Searched the web"), or the present while `running`.
`icon`	`RemixNode`	No	A 16px glyph for the kind of step; a step that only marks progress goes without.
`detail`	`RemixNode`	No	What the step opens onto: a command's output, or a Activity.Steps `boxed` run.
`running`	`boolean`	No	Draws the step as still in progress, with moving dots in place of its icon.
`duration`	`number`	No	How long a streamed replay dwells on this step, in milliseconds, so a search or a command reads as taking time; while it dwells the step shows the moving dots.

Also accepts everything in Omit<TagProps<"li">, "title">.