AI Chain of Thought

# Brok UI: AI Chain of Thought (`ai-chain-of-thought`)

A collapsible reasoning panel revealing an assistant's step-by-step thoughts as numbered, italic bullets.

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

## Install

```bash
php artisan ui:add ai-chain-of-thought
```

## Usage

```blade
<div class="mx-auto w-full max-w-lg space-y-3">
    <x-ui.ai.chain-of-thought :duration="4.2" />
    <x-ui.ai.chain-of-thought open :duration="12" :thoughts="[
        __('The user wants the quarterly figures compared, not listed.'),
        __('Q2 revenue is in the attached sheet; Q1 comes from the earlier message.'),
        __('Present the delta first, then the two absolute numbers.'),
    ]" />
</div>
```

## Props

- `thoughts` (array, default `[]`)
- `open` (bool, default `false`)
- `label` (mixed|null, default `null`)
- `duration` (mixed|null, default `null`)
- `thinking` (bool, default `false`)

## Use when

- Use to expose AI-specific prompts, states, or reasoning metadata when those details help users supervise or understand an AI workflow.
- Revealing an assistant's reasoning steps on demand, folded away by default.
- Showing that a model is still thinking, before the steps arrive.

## Avoid when

- Do not surface internal AI mechanics when they add confusion or implementation detail without user value.
- Showing the answer itself; keep the reasoning panel separate from the reply.
- Collapsing arbitrary content; collapsible is the general primitive this composes.

## Anti-patterns

- Decorative AI chrome
- Exposing internal mechanics without user value

## Rules

- Use the `<brok:ai-chain-of-thought>` tag (or `<x-ui.ai-chain-of-thought>`) 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-chain-of-thought
- Registry JSON (files, props, contract): https://brokui.dev/r/open/ai-chain-of-thought.json

@props([
    'thoughts' => [],
    'open' => false,
    // Header label; "Thought for 4s" when `duration` (seconds) is given.
    'label' => null,
    'duration' => null,
    // Show a live "thinking" shimmer on the header (the steps are still arriving).
    'thinking' => false,
])

@php
    $thoughts = is_array($thoughts) && count($thoughts)
        ? $thoughts
        : [
            __('Break the question into its underlying intent.'),
            __('Recall the relevant facts and constraints.'),
            __('Compose and sanity-check the final answer.'),
        ];
    $count = count($thoughts);
    $label ??= $duration !== null
        ? __('Thought for :time', ['time' => ((float) $duration) < 10 ? number_format((float) $duration, 1).'s' : number_format((float) $duration).'s'])
        : __('Chain of thought');
    $thinking = filter_var($thinking, FILTER_VALIDATE_BOOLEAN);
@endphp

{{--
    AI chain of thought — the assistant's reasoning, folded under one quiet row
    (glyph, label such as "Thought for 4s", step count, chevron). Open, the
    steps read as a small timeline: a dot per step on a hairline rail. Open
    state lives in the wrapped collapsible's `uiCollapsible` Alpine scope; the
    focus ring is inset so it never breaks the card's edge.
--}}
<x-ui.collapsible
    :open="$open"
    data-slot="ai-chain-of-thought"
    data-thinking="{{ $thinking ? 'true' : 'false' }}"
    {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-border bg-card text-foreground']) }}
>
    <x-ui.collapsible.trigger class="w-full rounded-none px-3 py-2 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:ring-inset motion-reduce:transition-none">
        <span class="flex min-w-0 items-center gap-2">
            <span class="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-foreground" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4 {{ $thinking ? 'motion-safe:animate-pulse' : '' }}">
                    <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
                    <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
                </svg>
            </span>
            <span class="truncate text-sm font-medium text-foreground {{ $thinking ? 'motion-safe:animate-pulse' : '' }}">{{ $label }}</span>
            <span class="shrink-0 text-xs text-muted-foreground">{{ trans_choice('{1}:count step|[2,*]:count steps', $count, ['count' => $count]) }}</span>
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none" :class="open && 'rotate-180'" aria-hidden="true">
            <path d="m6 9 6 6 6-6" />
        </svg>
    </x-ui.collapsible.trigger>

    <x-ui.collapsible.content class="border-t border-border px-3 py-3">
        <ol data-slot="ai-chain-of-thought-list" class="relative ms-3 space-y-3 border-s border-border ps-4">
            @foreach ($thoughts as $i => $thought)
                <li class="relative text-sm leading-relaxed text-muted-foreground">
                    <span aria-hidden="true" class="absolute -start-[21px] top-2 size-2 rounded-full border-2 border-background bg-muted-foreground/60 ring-1 ring-border"></span>
                    {{ $thought }}
                </li>
            @endforeach
        </ol>
    </x-ui.collapsible.content>
</x-ui.collapsible>