ToolActivity

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

Prop	Type	Default	Description
`toolCalls`	`readonly ToolCallInfo[]`	—	Array of tool calls to display.
`children`	`ReactNode`	—	Sub-components to render inside the activity wrapper.

ToolActivity.Call props

Prop	Type	Default	Description
`toolCall` required	`ToolCallInfo`	—	The tool call to display.
`children`	`((toolCall: ToolCallInfo) => ReactNode)	ReactNode`	—

ToolActivity.Result props

Prop	Type	Default	Description
`toolCall` required	`ToolCallInfo`	—	The tool call whose result to display.

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

Prop	Type	Default	Description
`data-state`	`"active"	"idle"`	`"idle"`
`data-status`	`"pending"	"running"	"complete"