Tool Calls
An agent’s run, a compact row a call, then a chip for each file it changed. Rest on a chip to see its diff.
Usage
import { ToolCalls } from '@wdzyi/ui';
<ToolCalls
calls={[
{ kind: 'read', title: 'Read', target: 'content.ts' },
{ kind: 'run', title: 'Build', target: 'pnpm build', running: true },
]}
files={[{ file: 'hero.tsx', add: 74, del: 41 }]}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- callsToolCall[]
- Each has a kind, which is think, read, edit, run or search, a title, a target for its chip, and the lines it gave back. Mark one running or failed.
- filesFileChange[]
- A file’s name, the lines added and taken away, and the lines themselves, for its diff.
- summarystring
- The header. By default it counts the calls and the files.
Notes
- A running call works in place of its icon, its title shining, and the header shines while anything runs. In the demo, each call takes about as long as it would: two seconds to think, three to write, four to build and one to read.
- A row with lines opens to show them, and its icon turns into a chevron as the pointer comes to it, so it says it opens before it’s pressed.
- The diff floats over the page in a portal, so a parent that clips can’t cut it off. It goes below the chip if there’s room, and above it if not.
- Hover, keyboard focus and a tap all show a diff, and scrolling puts it away. With reduced motion, the shine holds still.