ToolActivity

Tool call execution display.

import { ToolActivity } from "@arlopass/react-ui";

---

Parts

Name	Element	Purpose
ToolActivity.Root	div	Wraps tool-call display. Tracks whether any call is still in progress.
ToolActivity.Call	div	Renders a single tool-call invocation. Supports render-prop children.
ToolActivity.Result	div	Renders the result of a tool call.

---

ToolActivity.Root props

ToolActivity.Call props

ToolActivity.Result props

---

Usage

import { ToolActivity } from "@arlopass/react-ui";

function ToolCalls({ toolCalls }) {
  return (
    <ToolActivity.Root toolCalls={toolCalls}>
      {toolCalls.map((tc) => (
        <div key={tc.id}>
          <ToolActivity.Call toolCall={tc}>
            {(call) => (
              <span>
                🔧 {call.name}({JSON.stringify(call.arguments)})
              </span>
            )}
          </ToolActivity.Call>
          <ToolActivity.Result toolCall={tc} />
        </div>
      ))}
    </ToolActivity.Root>
  );
}

Inside a Chat message

Compose with Message to show tool activity inline within conversation messages.

import { Chat, Message, ToolActivity } from "@arlopass/react-ui";

<Chat.Messages>
  {(messages) =>
    messages.map((msg) => (
      <Chat.Message key={msg.id} message={msg}>
        <Message.Root message={msg}>
          <Message.Content />
          {msg.toolCalls && (
            <ToolActivity.Root toolCalls={msg.toolCalls}>
              {msg.toolCalls.map((tc) => (
                <ToolActivity.Call key={tc.id} toolCall={tc} />
              ))}
            </ToolActivity.Root>
          )}
        </Message.Root>
      </Chat.Message>
    ))
  }
</Chat.Messages>;

---

Data attributes