Tool Chips

Code edits and tool calls as compact chips.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { ToolChips } from "@aile.sh/elia";

export function Example() {
  return (
    <ToolChips
      header="3 tool calls, 1 message"
      rows={[
        {
          icon: "read",
          label: "Read file",
          chip: "invoice-2024.pdf",
          mono: true,
          detail: [{ text: "14 pages · totals on page 12." }],
        },
        {
          icon: "run",
          label: "Run checks",
          chip: "bun test",
          mono: true,
          detailMono: true,
          detail: [
            { text: "✓ 18 checks passed" },
            { text: "+ 2 snapshots written", tone: "add" },
          ],
        },
      ]}
      diffs={[
        { file: "billing.ts", add: 22, del: 5 },
        { file: "invoice.css", add: 4, del: 0 },
      ]}
      moreCount={0}
    />
  );
}

— elia design system · MIT · primitives · https://github.com/aile-sh/elia