marco
38295e7e88
Initial implementation of the HomeSysPanel CMS built with Laravel 13.0. Includes complete admin panel, content management, user authentication, modular architecture for products/services/chatbot, and marketing tools. Key features: - User authentication with email verification and password reset - Role-based access control (Admin/User with granular permissions) - Content management (pages, news, FAQ, downloads, galleries, banners) - Contact management system with subjects and responses - Marketing tools (email campaigns, visitor analytics, social sharing) - Modular architecture (Products, Services, Chatbot modules) - AI Chatbot integration with OpenRouter.ai and LlamaCpp support - Visitor tracking with geolocation - SEO optimization with meta tags and Open Graph - Responsive design with Bootstrap 5 - Dark mode support - Maintenance mode - Feature request system
949 lines
29 KiB
PHP
Executable File
949 lines
29 KiB
PHP
Executable File
@php
|
|
$chatbotEnabled = \App\Models\Setting::get('chatbot_enabled', 'off') === 'on';
|
|
@endphp
|
|
|
|
@if($chatbotEnabled && module_enabled('chatbot'))
|
|
<!-- Chatbot Widget -->
|
|
<style>
|
|
#chatbot-toggle {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 30px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #4e73df, #2e59d9);
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 15px rgba(78, 115, 223, 0.4);
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
font-size: 1.4rem;
|
|
}
|
|
#chatbot-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 20px rgba(78, 115, 223, 0.6);
|
|
}
|
|
#chatbot-window {
|
|
position: fixed;
|
|
bottom: 90px;
|
|
right: 30px;
|
|
width: 370px;
|
|
max-height: 480px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
z-index: 998;
|
|
display: none;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
animation: chatSlideUp 0.3s ease;
|
|
}
|
|
@keyframes chatSlideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
#chatbot-window.open {
|
|
display: flex;
|
|
}
|
|
.chatbot-header {
|
|
background: linear-gradient(135deg, #4e73df, #2e59d9);
|
|
color: white;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
.chatbot-header h6 {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
.chatbot-header small {
|
|
opacity: 0.8;
|
|
font-size: 0.75rem;
|
|
}
|
|
.chatbot-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.chatbot-close {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.chatbot-close:hover {
|
|
opacity: 1;
|
|
}
|
|
.chatbot-end-btn {
|
|
background: rgba(255,255,255,0.2);
|
|
border: 1px solid rgba(255,255,255,0.4);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: background 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
.chatbot-end-btn:hover {
|
|
background: rgba(255,255,255,0.35);
|
|
}
|
|
/* Pre-chat form */
|
|
.chatbot-prechat {
|
|
padding: 20px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.chatbot-prechat p {
|
|
color: #666;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chatbot-prechat .form-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
.chatbot-prechat label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: #444;
|
|
margin-bottom: 4px;
|
|
display: block;
|
|
}
|
|
.chatbot-prechat input {
|
|
width: 100%;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
font-size: 0.875rem;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
.chatbot-prechat input:focus {
|
|
border-color: #4e73df;
|
|
}
|
|
.chatbot-prechat .btn-start {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #4e73df, #2e59d9);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.chatbot-prechat .btn-start:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.chatbot-prechat .btn-start:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.chatbot-prechat .error-msg {
|
|
color: #e74c3c;
|
|
font-size: 0.8rem;
|
|
margin-top: 8px;
|
|
display: none;
|
|
}
|
|
/* Chat area */
|
|
.chatbot-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
max-height: 360px;
|
|
min-height: 200px;
|
|
}
|
|
.chatbot-message {
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
}
|
|
.chatbot-message.user {
|
|
justify-content: flex-end;
|
|
}
|
|
.chatbot-message .bubble {
|
|
max-width: 80%;
|
|
padding: 10px 14px;
|
|
border-radius: 16px;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
}
|
|
.chatbot-message.assistant .bubble {
|
|
background: #f0f2f5;
|
|
color: #333;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.chatbot-message.user .bubble {
|
|
background: #4e73df;
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.chatbot-typing {
|
|
display: none;
|
|
margin-bottom: 12px;
|
|
padding: 0 16px;
|
|
}
|
|
.chatbot-typing .bubble {
|
|
background: #f0f2f5;
|
|
padding: 12px 18px;
|
|
border-radius: 16px;
|
|
border-bottom-left-radius: 4px;
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.chatbot-typing .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #999;
|
|
border-radius: 50%;
|
|
animation: typingDot 1.4s infinite;
|
|
}
|
|
.chatbot-typing .dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.chatbot-typing .dot:nth-child(3) { animation-delay: 0.4s; }
|
|
@keyframes typingDot {
|
|
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
|
30% { transform: translateY(-6px); opacity: 1; }
|
|
}
|
|
.chatbot-input {
|
|
display: flex;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid #e0e0e0;
|
|
background: #fafafa;
|
|
flex-shrink: 0;
|
|
}
|
|
.chatbot-input input {
|
|
flex: 1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 24px;
|
|
padding: 8px 16px;
|
|
font-size: 0.875rem;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.chatbot-input input:focus {
|
|
border-color: #4e73df;
|
|
}
|
|
.chatbot-input button {
|
|
background: #4e73df;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-left: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.2s;
|
|
}
|
|
.chatbot-input button:hover {
|
|
background: #2e59d9;
|
|
}
|
|
.chatbot-input button:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
/* Rating form */
|
|
.chatbot-rating {
|
|
padding: 20px;
|
|
text-align: center;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.chatbot-rating h6 {
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
font-size: 1rem;
|
|
}
|
|
.chatbot-rating p {
|
|
color: #666;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chatbot-rating .stars {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chatbot-rating .stars .star {
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
color: #ddd;
|
|
transition: color 0.2s, transform 0.2s;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
.chatbot-rating .stars .star:hover,
|
|
.chatbot-rating .stars .star.active {
|
|
color: #f5a623;
|
|
transform: scale(1.15);
|
|
}
|
|
.chatbot-rating textarea {
|
|
width: 100%;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
resize: none;
|
|
height: 60px;
|
|
margin-bottom: 12px;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
.chatbot-rating textarea:focus {
|
|
border-color: #4e73df;
|
|
}
|
|
.chatbot-rating .btn-submit-rating {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #4e73df, #2e59d9);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.chatbot-rating .btn-submit-rating:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.chatbot-rating .btn-submit-rating:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.chatbot-rating .btn-skip {
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
text-decoration: underline;
|
|
}
|
|
.chatbot-rating .btn-skip:hover {
|
|
color: #666;
|
|
}
|
|
.chatbot-rating .error-msg {
|
|
color: #e74c3c;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 8px;
|
|
display: none;
|
|
}
|
|
/* Thank you */
|
|
.chatbot-thankyou {
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.chatbot-thankyou .icon {
|
|
font-size: 3rem;
|
|
color: #1cc88a;
|
|
margin-bottom: 12px;
|
|
}
|
|
.chatbot-thankyou h6 {
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.chatbot-thankyou p {
|
|
color: #666;
|
|
font-size: 0.85rem;
|
|
}
|
|
.chatbot-thankyou .btn-new-chat {
|
|
margin-top: 16px;
|
|
background: linear-gradient(135deg, #4e73df, #2e59d9);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.chatbot-disclaimer {
|
|
padding: 6px 16px;
|
|
background: #fff8e1;
|
|
border-top: 1px solid #ffe082;
|
|
font-size: 0.7rem;
|
|
color: #8d6e00;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
@media (max-width: 480px) {
|
|
#chatbot-toggle {
|
|
bottom: 15px;
|
|
right: 20px;
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 1.2rem;
|
|
}
|
|
#chatbot-window {
|
|
width: calc(100vw - 20px);
|
|
right: 10px;
|
|
bottom: 160px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<button id="chatbot-toggle" title="Chat com assistente virtual">
|
|
<i class="bi bi-chat-dots-fill"></i>
|
|
</button>
|
|
|
|
<div id="chatbot-window">
|
|
<div class="chatbot-header">
|
|
<div>
|
|
<h6><i class="bi bi-robot me-1"></i>Assistente Virtual</h6>
|
|
<small>Online • Respostas instantâneas</small>
|
|
</div>
|
|
<div class="chatbot-header-actions">
|
|
<button class="chatbot-end-btn" id="chatbot-end-btn" title="Finalizar conversa" style="display:none;">
|
|
<i class="bi bi-x-circle"></i> Finalizar
|
|
</button>
|
|
<button class="chatbot-close" id="chatbot-close-btn">
|
|
<i class="bi bi-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pre-chat Registration Form -->
|
|
<div class="chatbot-prechat" id="chatbot-prechat">
|
|
<p>Para um atendimento personalizado, por favor preencha seus dados:</p>
|
|
<div class="form-group">
|
|
<label for="chatbot-visitor-name">Nome <span style="color:#e74c3c">*</span></label>
|
|
<input type="text" id="chatbot-visitor-name" placeholder="Seu nome completo" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="chatbot-visitor-phone">Telefone <span style="color:#e74c3c">*</span></label>
|
|
<input type="tel" id="chatbot-visitor-phone" placeholder="(00) 00000-0000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="chatbot-visitor-city">Cidade <span style="color:#e74c3c">*</span></label>
|
|
<input type="text" id="chatbot-visitor-city" placeholder="Sua cidade">
|
|
</div>
|
|
<div class="error-msg" id="chatbot-register-error"></div>
|
|
<button class="btn-start" id="chatbot-start-btn">
|
|
<i class="bi bi-chat-dots me-1"></i>Iniciar Conversa
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Chat Area (hidden until registration) -->
|
|
<div id="chatbot-chat-area" style="display:none; flex-direction:column; flex:1; overflow:hidden;">
|
|
<div class="chatbot-messages" id="chatbot-messages">
|
|
<div class="chatbot-message assistant">
|
|
<div class="bubble" id="chatbot-welcome">Olá! Como posso ajudar você hoje?</div>
|
|
</div>
|
|
</div>
|
|
<div class="chatbot-typing" id="chatbot-typing">
|
|
<div class="bubble">
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="chatbot-input" id="chatbot-input-area">
|
|
<input type="text" id="chatbot-input" placeholder="Digite sua mensagem..." maxlength="1000" autocomplete="off">
|
|
<button id="chatbot-send-btn" title="Enviar">
|
|
<i class="bi bi-send-fill"></i>
|
|
</button>
|
|
</div>
|
|
<div class="chatbot-disclaimer">
|
|
<i class="bi bi-shield-check me-1"></i>Não compartilhe dados sensíveis (senha, cartão, CPF, outros) neste chat.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rating Form (hidden until conversation ends) -->
|
|
<div class="chatbot-rating" id="chatbot-rating" style="display:none;">
|
|
<h6><i class="bi bi-star me-1"></i>Avalie o Atendimento</h6>
|
|
<p>Como foi sua experiência com nosso assistente?</p>
|
|
<div class="stars" id="chatbot-stars">
|
|
<button class="star" data-value="1">★</button>
|
|
<button class="star" data-value="2">★</button>
|
|
<button class="star" data-value="3">★</button>
|
|
<button class="star" data-value="4">★</button>
|
|
<button class="star" data-value="5">★</button>
|
|
</div>
|
|
<textarea id="chatbot-rating-comment" placeholder="Deixe um comentário (opcional)..."></textarea>
|
|
<div class="error-msg" id="chatbot-rating-error"></div>
|
|
<button class="btn-submit-rating" id="chatbot-submit-rating">
|
|
<i class="bi bi-check-circle me-1"></i>Enviar Avaliação
|
|
</button>
|
|
<button class="btn-skip" id="chatbot-skip-rating">Pular avaliação</button>
|
|
</div>
|
|
|
|
<!-- Thank You (hidden until rating submitted) -->
|
|
<div class="chatbot-thankyou" id="chatbot-thankyou" style="display:none;">
|
|
<div class="icon"><i class="bi bi-check-circle-fill"></i></div>
|
|
<h6>Obrigado pelo feedback!</h6>
|
|
<p>Sua opinião é muito importante para melhorarmos nosso atendimento.</p>
|
|
<button class="btn-new-chat" id="chatbot-new-chat-btn">
|
|
<i class="bi bi-chat-dots me-1"></i>Nova Conversa
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const toggle = document.getElementById('chatbot-toggle');
|
|
const window_ = document.getElementById('chatbot-window');
|
|
const closeBtn = document.getElementById('chatbot-close-btn');
|
|
const endBtn = document.getElementById('chatbot-end-btn');
|
|
const prechat = document.getElementById('chatbot-prechat');
|
|
const chatArea = document.getElementById('chatbot-chat-area');
|
|
const messagesDiv = document.getElementById('chatbot-messages');
|
|
const typingIndicator = document.getElementById('chatbot-typing');
|
|
const inputEl = document.getElementById('chatbot-input');
|
|
const inputArea = document.getElementById('chatbot-input-area');
|
|
const sendBtn = document.getElementById('chatbot-send-btn');
|
|
const welcomeEl = document.getElementById('chatbot-welcome');
|
|
const startBtn = document.getElementById('chatbot-start-btn');
|
|
const errorMsg = document.getElementById('chatbot-register-error');
|
|
const nameInput = document.getElementById('chatbot-visitor-name');
|
|
const phoneInput = document.getElementById('chatbot-visitor-phone');
|
|
const cityInput = document.getElementById('chatbot-visitor-city');
|
|
const ratingDiv = document.getElementById('chatbot-rating');
|
|
const thankyouDiv = document.getElementById('chatbot-thankyou');
|
|
const starsContainer = document.getElementById('chatbot-stars');
|
|
const ratingComment = document.getElementById('chatbot-rating-comment');
|
|
const submitRatingBtn = document.getElementById('chatbot-submit-rating');
|
|
const skipRatingBtn = document.getElementById('chatbot-skip-rating');
|
|
const ratingError = document.getElementById('chatbot-rating-error');
|
|
const newChatBtn = document.getElementById('chatbot-new-chat-btn');
|
|
|
|
// Generate or retrieve session ID
|
|
let sessionId = localStorage.getItem('chatbot_session_id');
|
|
if (!sessionId) {
|
|
sessionId = 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
localStorage.setItem('chatbot_session_id', sessionId);
|
|
}
|
|
|
|
// Check if visitor already registered
|
|
let visitorRegistered = localStorage.getItem('chatbot_visitor_registered') === 'true';
|
|
let conversationEnded = localStorage.getItem('chatbot_conversation_ended') === 'true';
|
|
let selectedRating = 0;
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
|
|
|
// Phone mask
|
|
phoneInput.addEventListener('input', function(e) {
|
|
let v = e.target.value.replace(/\D/g, '');
|
|
if (v.length > 11) v = v.slice(0, 11);
|
|
if (v.length > 6) {
|
|
v = '(' + v.slice(0,2) + ') ' + v.slice(2,7) + '-' + v.slice(7);
|
|
} else if (v.length > 2) {
|
|
v = '(' + v.slice(0,2) + ') ' + v.slice(2);
|
|
} else if (v.length > 0) {
|
|
v = '(' + v;
|
|
}
|
|
e.target.value = v;
|
|
});
|
|
|
|
// Load welcome message
|
|
fetch('/chatbot/status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.welcome_message && welcomeEl) {
|
|
welcomeEl.textContent = data.welcome_message;
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
|
|
function toggleChat() {
|
|
window_.classList.toggle('open');
|
|
if (window_.classList.contains('open')) {
|
|
if (visitorRegistered && !conversationEnded) {
|
|
inputEl.focus();
|
|
} else if (!visitorRegistered) {
|
|
nameInput.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
toggle.addEventListener('click', toggleChat);
|
|
closeBtn.addEventListener('click', function() {
|
|
window_.classList.remove('open');
|
|
});
|
|
|
|
// Show appropriate view based on state
|
|
function showChatView() {
|
|
prechat.style.display = 'none';
|
|
chatArea.style.display = 'flex';
|
|
ratingDiv.style.display = 'none';
|
|
thankyouDiv.style.display = 'none';
|
|
endBtn.style.display = 'flex';
|
|
}
|
|
|
|
function showRatingView() {
|
|
prechat.style.display = 'none';
|
|
chatArea.style.display = 'none';
|
|
ratingDiv.style.display = 'flex';
|
|
thankyouDiv.style.display = 'none';
|
|
endBtn.style.display = 'none';
|
|
}
|
|
|
|
function showThankyouView() {
|
|
prechat.style.display = 'none';
|
|
chatArea.style.display = 'none';
|
|
ratingDiv.style.display = 'none';
|
|
thankyouDiv.style.display = 'flex';
|
|
endBtn.style.display = 'none';
|
|
}
|
|
|
|
// If already registered, show chat area directly
|
|
if (visitorRegistered && !conversationEnded) {
|
|
showChatView();
|
|
} else if (conversationEnded) {
|
|
// If conversation was ended, start fresh
|
|
resetChat();
|
|
}
|
|
|
|
function resetChat() {
|
|
// Generate new session
|
|
sessionId = 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
localStorage.setItem('chatbot_session_id', sessionId);
|
|
localStorage.removeItem('chatbot_visitor_registered');
|
|
localStorage.removeItem('chatbot_conversation_ended');
|
|
visitorRegistered = false;
|
|
conversationEnded = false;
|
|
selectedRating = 0;
|
|
|
|
// Clear messages
|
|
messagesDiv.innerHTML = '<div class="chatbot-message assistant"><div class="bubble" id="chatbot-welcome">Olá! Como posso ajudar você hoje?</div></div>';
|
|
|
|
// Show pre-chat form
|
|
prechat.style.display = 'block';
|
|
chatArea.style.display = 'none';
|
|
ratingDiv.style.display = 'none';
|
|
thankyouDiv.style.display = 'none';
|
|
endBtn.style.display = 'none';
|
|
|
|
// Clear form fields
|
|
nameInput.value = '';
|
|
phoneInput.value = '';
|
|
cityInput.value = '';
|
|
ratingComment.value = '';
|
|
|
|
// Reset stars
|
|
document.querySelectorAll('#chatbot-stars .star').forEach(function(s) {
|
|
s.classList.remove('active');
|
|
});
|
|
|
|
// Reload welcome message
|
|
fetch('/chatbot/status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const welEl = document.getElementById('chatbot-welcome');
|
|
if (data.welcome_message && welEl) {
|
|
welEl.textContent = data.welcome_message;
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// Register visitor
|
|
startBtn.addEventListener('click', function() {
|
|
const name = nameInput.value.trim();
|
|
const phone = phoneInput.value.trim();
|
|
const city = cityInput.value.trim();
|
|
|
|
errorMsg.style.display = 'none';
|
|
|
|
if (!name || !phone || !city) {
|
|
errorMsg.textContent = 'Por favor, preencha todos os campos obrigatórios.';
|
|
errorMsg.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
startBtn.disabled = true;
|
|
startBtn.textContent = 'Iniciando...';
|
|
|
|
fetch('/chatbot/register', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
name: name,
|
|
phone: phone,
|
|
city: city
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
localStorage.setItem('chatbot_visitor_registered', 'true');
|
|
visitorRegistered = true;
|
|
|
|
// Personalize welcome message
|
|
const firstName = name.split(' ')[0];
|
|
const welEl = document.getElementById('chatbot-welcome');
|
|
if (welEl) {
|
|
welEl.textContent = welEl.textContent.replace(
|
|
'Olá!',
|
|
'Olá, ' + firstName + '!'
|
|
);
|
|
}
|
|
|
|
// Switch to chat area
|
|
showChatView();
|
|
inputEl.focus();
|
|
} else {
|
|
errorMsg.textContent = data.message || 'Erro ao registrar. Tente novamente.';
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
errorMsg.textContent = 'Erro de conexão. Tente novamente.';
|
|
errorMsg.style.display = 'block';
|
|
})
|
|
.finally(() => {
|
|
startBtn.disabled = false;
|
|
startBtn.innerHTML = '<i class="bi bi-chat-dots me-1"></i>Iniciar Conversa';
|
|
});
|
|
});
|
|
|
|
// Allow Enter key on pre-chat form
|
|
[nameInput, phoneInput, cityInput].forEach(function(el) {
|
|
el.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
startBtn.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
function addMessage(role, content) {
|
|
const div = document.createElement('div');
|
|
div.className = 'chatbot-message ' + role;
|
|
div.innerHTML = '<div class="bubble">' + escapeHtml(content) + '</div>';
|
|
messagesDiv.appendChild(div);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showTyping() {
|
|
typingIndicator.style.display = 'block';
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
function hideTyping() {
|
|
typingIndicator.style.display = 'none';
|
|
}
|
|
|
|
function sendMessage() {
|
|
const message = inputEl.value.trim();
|
|
if (!message) return;
|
|
|
|
addMessage('user', message);
|
|
inputEl.value = '';
|
|
sendBtn.disabled = true;
|
|
showTyping();
|
|
|
|
fetch('/chatbot/send', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
message: message,
|
|
session_id: sessionId
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
hideTyping();
|
|
if (data.success) {
|
|
addMessage('assistant', data.message);
|
|
} else {
|
|
if (data.conversation_ended) {
|
|
addMessage('assistant', 'Esta conversa foi finalizada.');
|
|
endChatLocally();
|
|
} else {
|
|
addMessage('assistant', data.message || 'Desculpe, ocorreu um erro. Tente novamente.');
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
hideTyping();
|
|
addMessage('assistant', 'Desculpe, ocorreu um erro de conexão. Tente novamente.');
|
|
})
|
|
.finally(() => {
|
|
sendBtn.disabled = false;
|
|
inputEl.focus();
|
|
});
|
|
}
|
|
|
|
sendBtn.addEventListener('click', sendMessage);
|
|
inputEl.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// End conversation
|
|
endBtn.addEventListener('click', function() {
|
|
if (!confirm('Deseja finalizar esta conversa?')) return;
|
|
|
|
fetch('/chatbot/end', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
session_id: sessionId
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
endChatLocally();
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// End locally even if API fails
|
|
endChatLocally();
|
|
});
|
|
});
|
|
|
|
function endChatLocally() {
|
|
conversationEnded = true;
|
|
localStorage.setItem('chatbot_conversation_ended', 'true');
|
|
showRatingView();
|
|
}
|
|
|
|
// Star rating interaction
|
|
const starBtns = document.querySelectorAll('#chatbot-stars .star');
|
|
starBtns.forEach(function(star) {
|
|
star.addEventListener('click', function() {
|
|
selectedRating = parseInt(this.getAttribute('data-value'));
|
|
starBtns.forEach(function(s) {
|
|
const val = parseInt(s.getAttribute('data-value'));
|
|
if (val <= selectedRating) {
|
|
s.classList.add('active');
|
|
} else {
|
|
s.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
star.addEventListener('mouseenter', function() {
|
|
const hoverVal = parseInt(this.getAttribute('data-value'));
|
|
starBtns.forEach(function(s) {
|
|
const val = parseInt(s.getAttribute('data-value'));
|
|
if (val <= hoverVal) {
|
|
s.style.color = '#f5a623';
|
|
} else {
|
|
s.style.color = '#ddd';
|
|
}
|
|
});
|
|
});
|
|
|
|
star.addEventListener('mouseleave', function() {
|
|
starBtns.forEach(function(s) {
|
|
const val = parseInt(s.getAttribute('data-value'));
|
|
if (val <= selectedRating) {
|
|
s.style.color = '#f5a623';
|
|
} else {
|
|
s.style.color = '#ddd';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Submit rating
|
|
submitRatingBtn.addEventListener('click', function() {
|
|
ratingError.style.display = 'none';
|
|
|
|
if (selectedRating === 0) {
|
|
ratingError.textContent = 'Por favor, selecione pelo menos 1 estrela.';
|
|
ratingError.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
submitRatingBtn.disabled = true;
|
|
submitRatingBtn.innerHTML = '<i class="bi bi-hourglass me-1"></i>Enviando...';
|
|
|
|
fetch('/chatbot/rate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
rating: selectedRating,
|
|
comment: ratingComment.value.trim()
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showThankyouView();
|
|
} else {
|
|
ratingError.textContent = data.message || 'Erro ao enviar avaliação.';
|
|
ratingError.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
ratingError.textContent = 'Erro de conexão. Tente novamente.';
|
|
ratingError.style.display = 'block';
|
|
})
|
|
.finally(() => {
|
|
submitRatingBtn.disabled = false;
|
|
submitRatingBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>Enviar Avaliação';
|
|
});
|
|
});
|
|
|
|
// Skip rating
|
|
skipRatingBtn.addEventListener('click', function() {
|
|
showThankyouView();
|
|
});
|
|
|
|
// New chat button
|
|
newChatBtn.addEventListener('click', function() {
|
|
resetChat();
|
|
nameInput.focus();
|
|
});
|
|
})();
|
|
</script>
|
|
@endif
|