First commit
This commit is contained in:
@@ -0,0 +1,279 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Support Chat{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
#chat-window {
|
||||
height: 420px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .75rem;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.msg-bubble {
|
||||
max-width: 80%;
|
||||
padding: .6rem .9rem;
|
||||
border-radius: 1rem;
|
||||
font-size: .9rem;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.msg-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; align-self:flex-end; }
|
||||
.msg-ai { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; align-self:flex-start; }
|
||||
.msg-system { background:#fff3cd; border:1px solid #ffc107; border-radius:.5rem; align-self:center;
|
||||
font-size:.8rem; text-align:center; padding:.4rem .8rem; color:#664d03; }
|
||||
.typing-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
|
||||
background:#adb5bd; margin:0 2px; animation:blink 1.2s infinite; }
|
||||
.typing-dot:nth-child(2) { animation-delay:.2s; }
|
||||
.typing-dot:nth-child(3) { animation-delay:.4s; }
|
||||
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
|
||||
.faq-btn { font-size:.82rem; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
|
||||
{# ── Header ── #}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h4 class="mb-0"><i class="bi bi-chat-dots me-2 text-primary"></i>JQC Support Chat</h4>
|
||||
<small class="text-muted">Ask a question or browse common topics below</small>
|
||||
</div>
|
||||
<button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#submitModal">
|
||||
<i class="bi bi-envelope me-1"></i>Submit to Support
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{# ── Chat card ── #}
|
||||
<div class="card shadow-sm">
|
||||
{# Message window #}
|
||||
<div id="chat-window"></div>
|
||||
|
||||
{# FAQ quick-reply chips #}
|
||||
<div id="faq-section" class="px-3 pt-2 pb-1 border-top bg-white">
|
||||
<p class="small text-muted mb-2"><i class="bi bi-lightning-charge me-1"></i>Common questions:</p>
|
||||
<div class="d-flex flex-wrap gap-2 mb-2">
|
||||
{% for faq in faqs %}
|
||||
<button class="btn btn-outline-secondary btn-sm faq-btn"
|
||||
data-faq="{{ faq.text | e }}"
|
||||
onclick="sendFaq(this)">
|
||||
<i class="{{ faq.icon }} me-1"></i>{{ faq.text }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Input row #}
|
||||
<div class="p-3 border-top bg-white">
|
||||
<div class="input-group">
|
||||
<input id="chat-input" type="text" class="form-control"
|
||||
placeholder="Type your question…" maxlength="500"
|
||||
{% if not groq_ready %}disabled title="AI assistant not configured"{% endif %}>
|
||||
<button id="send-btn" class="btn btn-primary" onclick="sendUserMessage()"
|
||||
{% if not groq_ready %}disabled{% endif %}>
|
||||
<i class="bi bi-send"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% if not groq_ready %}
|
||||
<div class="text-muted small mt-1">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
AI assistant is not configured. Please
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#submitModal">submit a request</a>
|
||||
to reach our team.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-muted small mt-2 text-center">
|
||||
Can't find what you need?
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#submitModal">Submit a support request</a>
|
||||
and our team will respond by email.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Submit to Support modal ── #}
|
||||
<div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="submitModalLabel">
|
||||
<i class="bi bi-envelope me-2"></i>Submit Support Request
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form method="post" action="{{ url_for('support.submit_ticket') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
|
||||
<input type="text" name="subject" class="form-control" required maxlength="200"
|
||||
placeholder="Briefly describe your issue">
|
||||
</div>
|
||||
{% if facilities %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Related Facility</label>
|
||||
<select name="facility_id" class="form-select">
|
||||
<option value="">— Not facility-specific —</option>
|
||||
{% for f in facilities %}
|
||||
<option value="{{ f.id }}">{{ f.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Description <span class="text-danger">*</span></label>
|
||||
<textarea name="body" class="form-control" rows="5" required
|
||||
placeholder="Please describe your question or concern in detail…"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-send me-1"></i>Submit Request
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const chatWindow = document.getElementById('chat-window');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const faqSection = document.getElementById('faq-section');
|
||||
const CSRF_TOKEN = '{{ csrf_token() }}';
|
||||
|
||||
// In-memory conversation history sent to the server with each message
|
||||
let history = [];
|
||||
|
||||
// ── Greeting on page load ──────────────────────────────────────────────
|
||||
var userName = {{ current_user.display_name | tojson }};
|
||||
appendMessage('ai', "👋 Hi " + userName + "! I'm your JQC support assistant. " +
|
||||
"I can help you with inspections, issues, reports, and more. " +
|
||||
"Click a question below or type your own.");
|
||||
|
||||
// ── Append a message bubble ────────────────────────────────────────────
|
||||
function appendMessage(role, text) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'msg-bubble msg-' + role;
|
||||
div.textContent = text;
|
||||
chatWindow.appendChild(div);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function appendSystem(text) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'msg-bubble msg-system';
|
||||
div.textContent = text;
|
||||
chatWindow.appendChild(div);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
// ── Typing indicator ───────────────────────────────────────────────────
|
||||
function showTyping() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'typing-indicator';
|
||||
div.className = 'msg-bubble msg-ai';
|
||||
div.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
|
||||
chatWindow.appendChild(div);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
function hideTyping() {
|
||||
const el = document.getElementById('typing-indicator');
|
||||
if (el) el.remove();
|
||||
}
|
||||
|
||||
// ── Send message to Groq ───────────────────────────────────────────────
|
||||
function sendMessage(text) {
|
||||
if (!text.trim()) return;
|
||||
|
||||
// Hide FAQ chips after first interaction
|
||||
if (faqSection) faqSection.style.display = 'none';
|
||||
|
||||
appendMessage('user', text);
|
||||
history.push({ role: 'user', content: text });
|
||||
|
||||
chatInput.value = '';
|
||||
chatInput.disabled = true;
|
||||
document.getElementById('send-btn').disabled = true;
|
||||
showTyping();
|
||||
|
||||
fetch('{{ url_for("support.chat_message") }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': CSRF_TOKEN,
|
||||
},
|
||||
body: JSON.stringify({ message: text, messages: history }),
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
hideTyping();
|
||||
const reply = data.reply || 'Sorry, I could not process your request.';
|
||||
appendMessage('ai', reply);
|
||||
history.push({ role: 'assistant', content: reply });
|
||||
|
||||
// Suggest escalation if the AI hints it can't help
|
||||
const lower = reply.toLowerCase();
|
||||
if (lower.includes('submit to support') || lower.includes('admin team') ||
|
||||
lower.includes("can't resolve") || lower.includes('contact us')) {
|
||||
appendSystem('💡 Tip: Click "Submit to Support" above to send a message directly to our team.');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
hideTyping();
|
||||
appendMessage('ai', 'Network error — please check your connection and try again.');
|
||||
})
|
||||
.finally(function () {
|
||||
chatInput.disabled = false;
|
||||
document.getElementById('send-btn').disabled = false;
|
||||
chatInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// ── Public helpers called from inline onclick ──────────────────────────
|
||||
window.sendUserMessage = function () {
|
||||
sendMessage(chatInput.value);
|
||||
};
|
||||
|
||||
window.sendFaq = function (btn) {
|
||||
btn.disabled = true;
|
||||
sendMessage(btn.dataset.faq);
|
||||
};
|
||||
|
||||
// ── Enter key support ──────────────────────────────────────────────────
|
||||
if (chatInput) {
|
||||
chatInput.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage(chatInput.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Pre-fill modal subject from last user message ──────────────────────
|
||||
document.getElementById('submitModal').addEventListener('show.bs.modal', function () {
|
||||
const subjectInput = this.querySelector('[name="subject"]');
|
||||
if (subjectInput && !subjectInput.value && history.length) {
|
||||
const lastUser = [...history].reverse().find(function (m) { return m.role === 'user'; });
|
||||
if (lastUser) subjectInput.value = lastUser.content.slice(0, 200);
|
||||
}
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user