Vasyka
3911012c65
Broad sweep across the whole codebase:
- Blade views (39 files, 315 wraps): tag-text and title/placeholder/alt
attributes wrapped with {{ __() }}. Excludes scripts, styles, @php,
@verbatim, {{ }}, {!! !!}, comments to avoid touching interpolations.
- PHP (54 files, 179 wraps): array 'key' => 'RO value' patterns and
list items with diacritics wrapped with __(). Reverted __() inside
const arrays (PHP disallows non-constant expressions).
- Added 269 new keys to lang/{ru,en}.json (identity fallback for
unknowns → 161 human RU + 163 EN translations added for the most
common enums, stages, roles, statuses, payment methods, vehicle
categories, warehouse, portal, form actions.
Missing translations fall back to RO so the UI never breaks. All 306
tests pass; view cache compiles cleanly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
174 lines
8.5 KiB
PHP
174 lines
8.5 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>
|