mielui
AI components

Tool

Groups related tool calls under one collapsible task summary in a chat transcript.

Installation

pnpm dlx @mielui/svelte add tool

Usage

Give Root a name that sums up the work and a state. The trigger leads with a spinner while running, a check when complete, and an alert with 'Task failed' on error. List each call with Item; its kind sets the icon for a command, a search, or a read. Input and Output show a call's arguments and result on one quiet surface.

<script lang="ts">
    import * as Tool from '@mielui/svelte/components/tool';
</script>

<Tool.Root name="1 file, 1 search, and 1 command" state="complete" duration="6s">
    <Tool.Item name="Bash" detail="pnpm lint" />
    <Tool.Item name="Grep" detail="InputBar" kind="search" />
    <Tool.Item name="Read" detail="src/lib/input-bar.svelte" kind="read" />
</Tool.Root>

Bind open to control expansion. onOpenChange reports each change, and onOpenChangeComplete runs once the animation finishes. Children passed to an Item replace its detail text, for example with a link.

Composition

Root renders Trigger and Content for you. Set composed to place them yourself, leave one out, or restyle it. Use at most one Content per Root. Trigger takes a children snippet that receives open, state, name, and duration. To change only the automatic trigger, pass the same snippet as trigger on Root.

<script lang="ts">
    import * as Tool from '@mielui/svelte/components/tool';
</script>

<Tool.Root name="Read source" state="complete" composed>
    <Tool.Content class="ps-0">
        <Tool.Item name="Read" detail="src/main.ts" kind="read" />
    </Tool.Content>
    <Tool.Trigger>
        {#snippet children({ open })}
            {open ? 'Hide details' : 'Show details'}
        {/snippet}
    </Tool.Trigger>
</Tool.Root>

Examples

States

A finished task above a running one. The running task counts up its duration until it completes.

Quiet

variant="quiet" keeps tool details visually secondary to the response.

Failure and retry

Tool shows the state your app gives it. Keep the failed output visible, then replace it when a retry starts. The retry button sits outside the disclosure.

Labels

Built-in text is English. Pass a labels object to Root to translate the status the trigger announces and the Input and Output headings. ToolLabels types it. Every key is optional, and omitted keys keep their English default.

<Tool.Root
    name="Lecture du fichier"
    state="complete"
    labels={{
        running: 'Tâche en cours',
        complete: 'Tâche terminée',
        failed: 'Échec de la tâche',
        input: 'Entrée',
        output: 'Sortie'
    }}
>
    <Tool.Input>read notes.md</Tool.Input>
    <Tool.Output>12 lignes</Tool.Output>
</Tool.Root>

API reference

Tool.Root

Provides a tool execution summary.

  • labels
    ToolLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • name Required
    string

    A concise summary of the work completed by this task group.

  • state
    ToolState

    State of the run, which sets the indicator and summary.

    Default 'running'

  • variant
    ToolVariant

    A low-emphasis presentation for inline transcript details.

    Default 'default'

  • duration
    string

    A compact summary of how long the task took, such as 6s.

  • open Bindable
    boolean

    Whether the individual tool calls are visible.

    Default true

  • onOpenChange
    ((open: boolean) => void)

    Called with the new state whenever it opens or closes.

  • onOpenChangeComplete
    ((open: boolean) => void)

    Called after the open or close animation finishes.

  • composed
    boolean

    Render explicit Trigger and Content parts through children.

    Default false

  • trigger
    Snippet<[Readonly<{ open: boolean; state: ToolState; name: string; duration?: string | undefined; }>]>

    Replaces the default trigger. It receives the open state, the run state, and the name.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

Tool.Content

  • children
    Snippet<[]>

    Content rendered inside.

Tool.Input

Displays tool input.

  • label
    string

    Heading of the section.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

Tool.Item

Displays one tool call.

  • name Required
    string

    Name of the step, such as the tool that ran.

  • detail
    string

    What the step acted on, such as a path or query.

  • kind
    "command" | "search" | "read"

    Kind of step, which sets its icon.

    Default 'command'

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

Tool.Output

Displays tool output.

  • label
    string

    Heading of the section.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

Tool.Trigger

  • children
    Snippet<[Readonly<{ open: boolean; state: ToolState; name: string; duration?: string | undefined; }>]>

    Content rendered inside.