Vasyka
976c0f03e3
Schema: - ai_chats: company_id, user_id, title, provider; index pe activitate - ai_messages: role (system/user/assistant), content, meta JSON (tokens, latency, model) Service AiAssistantService (multi-provider): - ask($chat, $message): persistă mesajul user, build system prompt cu context tenant (statistici clienți/mașini/cereri/datorii), apelează API-ul providerului, persistă răspunsul cu meta (tokens, latency) - callClaude: api.anthropic.com/v1/messages cu claude-sonnet-4-5 - callOpenAI: api.openai.com/v1/chat/completions cu gpt-4o-mini - callGemini: generativelanguage.googleapis.com cu gemini-1.5-flash - Try/catch pe toate; eroare devine mesaj asistent fără să crape System prompt include: - Numele și orașul companiei - Statistici curente (clienți, mașini, cereri noi, fișe active, datorii) - Limita stricta: NU inventează date Custom Filament Page /app/ai-assistant (group Analiză): - Sidebar stâng: listă conversații (last 20), buton 'Nouă' + delete cu confirm - Main: bubble chat (user dreapta albastru, asistent stânga gri) - Meta jos pe răspuns: provider · latency · tokens - Empty state friendly cu instrucțiuni configurare - Loading indicator (3 dots animate) când AI răspunde - Auto-scroll la mesaj nou - Enter trimite, Shift+Enter newline - Auto-titlu chat din primul mesaj user (60 chars) Settings page extins cu secțiune 'Asistent AI': - Provider implicit (claude/gpt/gemini) - 3 chei API (password fields, revealable) - Key-urile salvate în companies.settings.ai (per tenant, izolat)
161 lines
7.8 KiB
PHP
161 lines
7.8 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();
|
||
@endphp
|
||
|
||
<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>
|