AI Assistant — multi-provider chat (Claude / GPT / Gemini)
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)
This commit is contained in:
@@ -0,0 +1,160 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user