70 lines
4.0 KiB
HTML
70 lines
4.0 KiB
HTML
{% load i18n %}
|
|
<div id="aiHelperContent">
|
|
<div class="text-center py-8">
|
|
<button onclick="loadAIHelperSuggestions()" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-bold hover:from-purple-600 hover:to-indigo-600 transition text-sm shadow-lg">
|
|
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
{% trans "Get AI Resolution Suggestions" %}
|
|
</button>
|
|
<p class="text-xs text-slate mt-3">{% trans "AI will analyze this complaint and suggest how to resolve it" %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function loadAIHelperSuggestions() {
|
|
const container = document.getElementById('aiHelperContent');
|
|
container.innerHTML = '<div class="text-center py-8"><div class="inline-block w-8 h-8 border-4 border-purple-200 border-t-purple-500 rounded-full animate-spin"></div><p class="text-slate text-sm mt-3">{% trans "Analyzing complaint..." %}</p></div>';
|
|
|
|
fetch('/complaints/api/complaints/{{ complaint.pk }}/ai_helper_suggestions/', {
|
|
headers: {'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value},
|
|
credentials: 'same-origin'
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
container.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">' + (data.error || 'Failed to generate suggestions') + '</div>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
if (data.suggestions && data.suggestions.suggestions) {
|
|
html += '<h4 class="font-bold text-navy mb-4 flex items-center gap-2"><i data-lucide="lightbulb" class="w-5 h-5 text-amber-500"></i> {% trans "Resolution Suggestions" %}</h4>';
|
|
html += '<div class="space-y-3 mb-6">';
|
|
data.suggestions.suggestions.forEach((s, i) => {
|
|
html += '<div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-100 rounded-xl p-4">';
|
|
html += '<div class="flex items-start gap-3">';
|
|
html += '<span class="flex-shrink-0 w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">' + (i+1) + '</span>';
|
|
html += '<div><p class="font-bold text-navy text-sm">' + s.title + '</p>';
|
|
html += '<p class="text-slate text-sm mt-1">' + s.description + '</p></div>';
|
|
html += '</div></div>';
|
|
});
|
|
html += '</div>';
|
|
}
|
|
|
|
if (data.suggestions && data.suggestions.recommended_actions) {
|
|
html += '<h4 class="font-bold text-navy mb-3 flex items-center gap-2"><i data-lucide="list-checks" class="w-5 h-5 text-blue"></i> {% trans "Recommended Next Steps" %}</h4>';
|
|
html += '<ul class="space-y-2 mb-6">';
|
|
data.suggestions.recommended_actions.forEach(a => {
|
|
html += '<li class="flex items-start gap-2 text-sm text-slate-700"><i data-lucide="arrow-right" class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"></i>' + a + '</li>';
|
|
});
|
|
html += '</ul>';
|
|
}
|
|
|
|
if (data.suggestions && data.suggestions.communication_tip) {
|
|
html += '<div class="bg-blue-50 border border-blue-200 rounded-xl p-4">';
|
|
html += '<h4 class="font-bold text-blue mb-1 flex items-center gap-2"><i data-lucide="message-circle" class="w-4 h-4"></i> {% trans "Communication Tip" %}</h4>';
|
|
html += '<p class="text-sm text-blue-800">' + data.suggestions.communication_tip + '</p>';
|
|
html += '</div>';
|
|
}
|
|
|
|
html += '<div class="text-center mt-4"><button onclick="loadAIHelperSuggestions()" class="text-sm text-purple-600 hover:text-purple-800 font-semibold">{% trans "Regenerate suggestions" %}</button></div>';
|
|
|
|
container.innerHTML = html;
|
|
lucide.createIcons();
|
|
})
|
|
.catch(err => {
|
|
container.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">{% trans "An error occurred. Please try again." %}</div>';
|
|
});
|
|
}
|
|
</script>
|