174 lines
8.6 KiB
PHP
174 lines
8.6 KiB
PHP
<x-filament-panels::page>
|
||
<style>
|
||
.ai-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 16px; min-height: 70vh; }
|
||
@media (max-width: 768px) { .ai-wrap { grid-template-columns: 1fr; } }
|
||
.ai-side {
|
||
background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
|
||
padding: 12px; overflow-y: auto;
|
||
}
|
||
.dark .ai-side { background: #1f2937; border-color: #374151; }
|
||
.ai-new-btn {
|
||
width: 100%; padding: 8px 12px; border-radius: 6px;
|
||
background: #3b82f6; color: white; font-size: 13px; font-weight: 500;
|
||
border: none; cursor: pointer; margin-bottom: 12px;
|
||
}
|
||
.ai-new-btn:hover { background: #2563eb; }
|
||
|
||
.ai-chat-item {
|
||
padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
|
||
font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px;
|
||
}
|
||
.ai-chat-item:hover { background: #fff; }
|
||
.dark .ai-chat-item:hover { background: #374151; }
|
||
.ai-chat-item.active { background: #fff; border: 1px solid #3b82f6; }
|
||
.dark .ai-chat-item.active { background: #111827; }
|
||
.ai-chat-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ai-del { color: #9ca3af; cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 14px; border: none; background: none; }
|
||
.ai-del:hover { color: #dc2626; background: #fef2f2; }
|
||
|
||
.ai-main {
|
||
background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.dark .ai-main { background: #1f2937; border-color: #374151; }
|
||
|
||
.ai-messages {
|
||
flex: 1; overflow-y: auto; padding: 16px;
|
||
display: flex; flex-direction: column; gap: 12px;
|
||
min-height: 400px;
|
||
}
|
||
.ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
|
||
.ai-msg-user {
|
||
align-self: flex-end;
|
||
background: #3b82f6; color: white;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.ai-msg-assistant {
|
||
align-self: flex-start;
|
||
background: #f3f4f6; color: #1f2937;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.dark .ai-msg-assistant { background: #374151; color: #f9fafb; }
|
||
.ai-msg pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit; }
|
||
.ai-msg-meta { font-size: 10px; color: #9ca3af; margin-top: 4px; }
|
||
|
||
.ai-empty { text-align: center; color: #9ca3af; padding: 60px 20px; }
|
||
|
||
.ai-form {
|
||
border-top: 1px solid #e5e7eb;
|
||
padding: 12px; display: flex; gap: 8px;
|
||
}
|
||
.dark .ai-form { border-color: #374151; }
|
||
.ai-input {
|
||
flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
|
||
font-size: 13px; font-family: inherit; resize: none; min-height: 40px;
|
||
}
|
||
.dark .ai-input { background: #111827; border-color: #374151; color: #f9fafb; }
|
||
.ai-send {
|
||
padding: 10px 20px; background: #3b82f6; color: white;
|
||
border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500;
|
||
}
|
||
.ai-send:hover { background: #2563eb; }
|
||
.ai-send:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
|
||
.ai-loading {
|
||
align-self: flex-start;
|
||
color: #9ca3af; font-size: 13px;
|
||
padding: 10px 14px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.ai-loading .dot { width: 6px; height: 6px; background: #9ca3af; border-radius: 50%; animation: ai-bounce 1.4s infinite; }
|
||
.ai-loading .dot:nth-child(2) { animation-delay: 0.2s; }
|
||
.ai-loading .dot:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes ai-bounce { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
|
||
</style>
|
||
|
||
@php
|
||
$chat = $this->getChat();
|
||
$chats = $this->getChats();
|
||
$usage = $this->getUsage();
|
||
$totalTokens = collect($usage)->sum(fn ($u) => $u['tokens_in'] + $u['tokens_out']);
|
||
$totalCalls = collect($usage)->sum('calls');
|
||
@endphp
|
||
|
||
@if ($totalCalls > 0)
|
||
<div style="margin-bottom:12px;padding:10px 14px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:12px;color:#1e3a8a;">
|
||
<strong>{{ __('Tokens consumate luna aceasta:') }}</strong>
|
||
{{ number_format($totalTokens) }} {{ __('tokens') }} · {{ $totalCalls }} {{ __('cereri') }}
|
||
@foreach ($usage as $provider => $u)
|
||
· {{ strtoupper($provider) }}: {{ number_format($u['tokens_in'] + $u['tokens_out']) }}
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
<div class="ai-wrap" x-data x-init="$nextTick(() => { const m = $refs.msgs; if (m) m.scrollTop = m.scrollHeight; })">
|
||
{{-- Sidebar: chat history --}}
|
||
<div class="ai-side">
|
||
<button type="button" class="ai-new-btn" wire:click="newChat">{{ __('+ Conversație nouă') }}</button>
|
||
@forelse ($chats as $c)
|
||
<div class="ai-chat-item {{ $c->id === $chatId ? 'active' : '' }}">
|
||
<span class="ai-chat-title" wire:click="selectChat({{ $c->id }})" style="cursor:pointer;">
|
||
{{ $c->title }}
|
||
</span>
|
||
<button type="button" class="ai-del" wire:click="deleteChat({{ $c->id }})"
|
||
wire:confirm="{{ __('Șterge conversația?') }}">×</button>
|
||
</div>
|
||
@empty
|
||
<div style="font-size:11px;color:#9ca3af;padding:8px;">{{ __('Nicio conversație') }}</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
{{-- Main chat area --}}
|
||
<div class="ai-main">
|
||
<div class="ai-messages" x-ref="msgs"
|
||
x-init="$watch('$wire.loading', () => $nextTick(() => $el.scrollTop = $el.scrollHeight))">
|
||
@if (! $chat || $chat->messages->isEmpty())
|
||
<div class="ai-empty">
|
||
<div style="font-size:32px;margin-bottom:8px;">✨</div>
|
||
<div style="font-size:14px;font-weight:600;margin-bottom:4px;">{{ __('Asistent AI pentru autoservice') }}</div>
|
||
<div style="font-size:12px;">{{ __('Întreabă-mă orice — diagnostic, sumar, sugestii, redactare mesaje către clienți...') }}</div>
|
||
<div style="font-size:11px;margin-top:16px;color:#9ca3af;">
|
||
<b>{{ __('Configurare:') }}</b> {{ __('mergi la Setări → Asistent AI și adaugă cheia API (Claude / GPT / Gemini).') }}
|
||
</div>
|
||
</div>
|
||
@else
|
||
@foreach ($chat->messages as $m)
|
||
@if ($m->role === 'user')
|
||
<div class="ai-msg ai-msg-user"><pre>{{ $m->content }}</pre></div>
|
||
@elseif ($m->role === 'assistant')
|
||
<div class="ai-msg ai-msg-assistant">
|
||
<pre>{{ $m->content }}</pre>
|
||
@if (! empty($m->meta['provider']))
|
||
<div class="ai-msg-meta">
|
||
{{ strtoupper($m->meta['provider']) }}
|
||
@if (! empty($m->meta['latency_ms'])) · {{ $m->meta['latency_ms'] }}ms @endif
|
||
@if (! empty($m->meta['tokens_out'])) · {{ $m->meta['tokens_out'] }} tok @endif
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
@endforeach
|
||
@endif
|
||
@if ($loading)
|
||
<div class="ai-loading">
|
||
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
|
||
<span>{{ __('asistent gândește...') }}</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<form wire:submit="send" class="ai-form">
|
||
<textarea
|
||
class="ai-input"
|
||
wire:model="newMessage"
|
||
placeholder="{{ __('Scrie mesajul tău...') }}"
|
||
@keydown.enter.exact.prevent="$wire.send()"
|
||
@keydown.shift.enter="$el.value += '\n'"
|
||
rows="1"
|
||
></textarea>
|
||
<button type="submit" class="ai-send" wire:loading.attr="disabled">{{ __('Trimite') }}</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</x-filament-panels::page>
|