dockergprompt/resources/views/ai-agent/index.blade.php

@extends('layouts.app')

@section('header', 'Agente de IA')

@section('breadcrumbs')
    @php
        $breadcrumbs = [
            'Agente de IA' => null
        ];
    @endphp
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 fw-bold text-primary">Executar Prompt</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i> Para fazer perguntas, selecione o provider e o modelo e pergunte e aumente o Max Tokens para 8192.
                    </div>
                    <form method="POST" action="{{ route('ai-agent.execute') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="project_id" class="form-label">Projeto de Prompt (opcional)</label>
                                <select class="form-select" id="project_id" name="project_id">
                                    <option value="">-- Selecione um projeto --</option>
                                    @foreach($projects as $project)
                                        <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                                            {{ $project->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="provider_id" class="form-label">Provider</label>
                                <select class="form-select" id="provider_id" name="provider_id" required>
                                    <option value="">-- Selecione um provider --</option>
                                    @foreach($providers as $provider)
                                        <option value="{{ $provider->id }}" {{ old('provider_id', $defaultProviderId) == $provider->id ? 'selected' : '' }}>
                                            {{ $provider->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="model_id" class="form-label">Modelo</label>
                                <select class="form-select" id="model_id" name="model_id" required disabled>
                                    <option value="">-- Selecione um provider primeiro --</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="temperature" class="form-label">Temperatura</label>
                                <input type="number" class="form-control" id="temperature" name="temperature" value="{{ old('temperature', 0.7) }}" step="0.1" min="0" max="1">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="max_tokens" class="form-label">Max Tokens</label>
                                <input type="number" class="form-control" id="max_tokens" name="max_tokens" value="{{ old('max_tokens', 8192) }}" min="1" max="128000">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="prompt_text" class="form-label">Prompt</label>
                            <textarea class="form-control font-monospace" id="prompt_text" name="prompt_text" rows="10" required>{{ old('prompt_text') }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-play-circle me-2"></i>Executar</button>
                    </form>
                </div>
            </div>

            @if(session('agent_result'))
                @php $result = session('agent_result') @endphp
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 fw-bold text-primary">Resultado</h6>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary" onclick="copyResult()">
                                <i class="bi bi-clipboard me-1"></i> Copiar
                            </button>
                            <button class="btn btn-sm btn-outline-primary" onclick="downloadResult()">
                                <i class="bi bi-download me-1"></i> Download
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($result['success'])
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <strong>Provider:</strong> {{ $result['provider'] }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Modelo:</strong> {{ $result['model'] }}
                                </div>
                                <div class="col-md-4">
                                    <strong>Tempo:</strong> {{ number_format($result['generation_time'], 3) }}s
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <strong>Tokens usados:</strong> {{ $result['tokens_used'] ?? 'N/A' }}
                                </div>
                            </div>
                            <textarea class="form-control font-monospace" id="result_text" rows="15">{{ $result['content'] }}</textarea>
                        @else
                            <div class="alert alert-danger">
                                <strong>Erro:</strong> {{ $result['error'] }}
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const providerSelect = document.getElementById('provider_id');
        const modelSelect = document.getElementById('model_id');
        const projectSelect = document.getElementById('project_id');
        const promptText = document.getElementById('prompt_text');

        providerSelect.addEventListener('change', function() {
            const providerId = this.value;

            if (!providerId) {
                modelSelect.innerHTML = '<option value="">-- Selecione um provider primeiro --</option>';
                modelSelect.disabled = true;
                return;
            }

            fetch(`{{ route('ai-agent.models') }}?provider_id=${providerId}`)
                .then(response => response.json())
                .then(models => {
                    modelSelect.innerHTML = '<option value="">-- Selecione um modelo --</option>';
                    models.forEach(model => {
                        const option = document.createElement('option');
                        option.value = model.id;
                        option.textContent = model.name;
                        modelSelect.appendChild(option);
                    });
                    modelSelect.disabled = false;
                });
        });

        @if($defaultProviderId && $defaultModelId)
            window.addEventListener('DOMContentLoaded', function() {
                providerSelect.value = {{ $defaultProviderId }};
                providerSelect.dispatchEvent(new Event('change'));
                setTimeout(() => {
                    modelSelect.value = {{ $defaultModelId }};
                }, 500);
            });
        @endif

        projectSelect.addEventListener('change', function() {
            const projectId = this.value;

            if (!projectId) {
                promptText.value = '';
                return;
            }

            fetch(`{{ url('prompt-projects') }}/${projectId}/prompt`)
                .then(response => response.json())
                .then(data => {
                    promptText.value = data.prompt || '';
                })
                .catch(() => {
                    promptText.value = '';
                });
        });

        function copyResult() {
            const resultText = document.getElementById('result_text');
            resultText.select();
            document.execCommand('copy');
            alert('Copiado para a área de transferência!');
        }

        function downloadResult() {
            const resultText = document.getElementById('result_text');
            const blob = new Blob([resultText.value], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'resultado-ia.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
@endsection