Ai Agent Message code

@props([
    'role' => 'assistant',
    'time' => null,
])

@php
    /*
    | Chat-style line for agent conversations and run logs.
    |
    | role: user, assistant, system
    |
    | Usage:
    |   <x-ui.ai-agent-message role="user" time="09:41">Keep CI green on main.</x-ui.ai-agent-message>
    */
    $roleStyles = [
        'user' => [
            'wrap' => 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950',
            'label' => 'You',
            'labelClass' => 'text-gray-600 dark:text-gray-300',
        ],
        'assistant' => [
            'wrap' => 'border-brand-200 bg-brand-50/60 dark:border-brand-900 dark:bg-brand-950/25',
            'label' => 'Agent',
            'labelClass' => 'text-brand-700 dark:text-brand-300',
        ],
        'system' => [
            'wrap' => 'border-dashed border-gray-300 bg-transparent dark:border-gray-700',
            'label' => 'System',
            'labelClass' => 'text-gray-500 dark:text-gray-400',
        ],
    ];

    $config = $roleStyles[$role] ?? $roleStyles['assistant'];
@endphp

<article {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border px-3.5 py-3 '.$config['wrap']]) }}>
    <div class="mb-1.5 flex items-center justify-between gap-3">
        <p class="shrink-0 text-xs font-semibold uppercase tracking-wide {{ $config['labelClass'] }}">{{ $config['label'] }}</p>
        @if ($time)
            <time class="shrink-0 text-xs text-gray-400 dark:text-gray-500">{{ $time }}</time>
        @endif
    </div>

    <div class="break-words text-sm leading-6 text-gray-800 dark:text-gray-200">{{ $slot }}</div>
</article>