AI Function Call

# Brok UI: AI Function Call (`ai-function-call`)

Tool-invocation card showing the function name, status badge and arguments.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add ai-function-call
```

## Usage

```blade
<x-ui.ai.function-call name="get_weather" :arguments="['location' => 'Berlin', 'unit' => 'celsius']" status="success" class="mx-auto w-full max-w-md" />
```

## Props

- `name` (string, default `get_weather`)
- `arguments` (array, default `['location' => 'Berlin', 'unit' => 'celsius']`)
- `status` (string, default `success`)

## Use when

- Use to expose AI-specific prompts, states, or reasoning metadata when those details help users supervise or understand an AI workflow.
- Showing that an assistant invoked a tool, with the arguments it sent.
- Making a tool-use step visible inside a chat thread or an agent trace.

## Avoid when

- Do not surface internal AI mechanics when they add confusion or implementation detail without user value.
- Showing a tool's result body; put that in a code-block or the following message.
- Rendering source code; this displays a named call and its argument list.

## Anti-patterns

- Decorative AI chrome
- Exposing internal mechanics without user value

## Rules

- Use the `<brok:ai-function-call>` tag (or `<x-ui.ai-function-call>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/ai-function-call
- Registry JSON (files, props, contract): https://brokui.dev/r/open/ai-function-call.json

@props([
    'name' => 'get_weather',
    'arguments' => ['location' => 'Berlin', 'unit' => 'celsius'],
    'status' => 'success',
])

@php
    // Normalise arguments: accept an assoc array or a JSON string.
    $args = $arguments;
    if (is_string($args)) {
        $decoded = json_decode($args, true);
        $args = json_last_error() === JSON_ERROR_NONE ? $decoded : [];
    }
    $args = is_array($args) ? $args : [];

    // Map status → human label and semantic badge colour. The running state adds
    // a motion-gated pulse so it reads as in-flight without animating on its own.
    $map = [
        'pending' => ['label' => __('Pending'), 'badge' => 'bg-muted text-muted-foreground'],
        'running' => ['label' => __('Running'), 'badge' => 'bg-info/10 text-info'],
        'success' => ['label' => __('Success'), 'badge' => 'bg-success/10 text-success'],
        'error' => ['label' => __('Error'), 'badge' => 'bg-destructive/10 text-destructive'],
    ];
    $current = $map[$status] ?? $map['success'];
@endphp

{{--
    AI function call — a card describing a tool invocation. The header pairs a
    function glyph with the monospaced name() and a status badge; the body lists
    the arguments as key/value rows (monospaced keys + values). The running badge
    gets a subtle ui-ai-fn-pulse, gated behind motion-safe.
--}}
<div
    data-slot="ai-function-call"
    {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-border bg-card text-foreground']) }}
>
    <div class="flex items-center gap-2 border-b border-border px-3 py-2">
        <svg class="size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
        <code class="min-w-0 flex-1 truncate font-mono text-sm">{{ $name }}()</code>
        <span @class([
            'inline-flex items-center gap-2 rounded-full px-2 py-0.5 text-xs font-medium',
            $current['badge'],
            'motion-safe:animate-[ui-ai-fn-pulse_1.4s_ease-in-out_infinite]' => $status === 'running',
        ])>
            @if ($status === 'running')
                <span class="size-2 rounded-full bg-current" aria-hidden="true"></span>
            @endif
            {{ $current['label'] }}
        </span>
    </div>

    @if (count($args) > 0)
        <dl class="divide-y divide-border">
            @foreach ($args as $key => $value)
                <div class="flex items-start gap-3 px-3 py-2 text-xs">
                    <dt class="shrink-0 font-mono text-muted-foreground">{{ $key }}</dt>
                    <dd class="min-w-0 flex-1 break-words text-end font-mono">{{ is_scalar($value) ? $value : json_encode($value) }}</dd>
                </div>
            @endforeach
        </dl>
    @else
        <p class="px-3 py-2 text-xs text-muted-foreground">{{ __('No arguments') }}</p>
    @endif
</div>