- Initialisation of the EveAI Chat Client.
- Introduction of Tenant Makes
This commit is contained in:
Josako
214
eveai_chat_client/templates/chat.html
Normal file
214
eveai_chat_client/templates/chat.html
Normal file
@@ -0,0 +1,214 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Chat{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="chat-container">
|
||||
<!-- Left sidebar with customizable content -->
|
||||
<div class="sidebar">
|
||||
{% if customisation.logo_url %}
|
||||
<div class="logo">
|
||||
<img src="{{ customisation.logo_url }}" alt="{{ tenant.name }} Logo">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sidebar-content">
|
||||
{% if customisation.sidebar_text %}
|
||||
<div class="sidebar-text">
|
||||
{{ customisation.sidebar_text|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if customisation.team_info %}
|
||||
<div class="team-info">
|
||||
<h3>Team</h3>
|
||||
<div class="team-members">
|
||||
{% for member in customisation.team_info %}
|
||||
<div class="team-member">
|
||||
{% if member.avatar %}
|
||||
<img src="{{ member.avatar }}" alt="{{ member.name }}">
|
||||
{% endif %}
|
||||
<div class="member-info">
|
||||
<h4>{{ member.name }}</h4>
|
||||
<p>{{ member.role }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main chat area -->
|
||||
<div class="chat-main">
|
||||
<div class="chat-header">
|
||||
<h1>{{ specialist.name }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<!-- Messages will be added here dynamically -->
|
||||
{% if customisation.welcome_message %}
|
||||
<div class="message bot-message">
|
||||
<div class="message-content">{{ customisation.welcome_message|safe }}</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="message bot-message">
|
||||
<div class="message-content">Hello! How can I help you today?</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="chat-input-container">
|
||||
<textarea id="chat-input" placeholder="Type your message here..."></textarea>
|
||||
<button id="send-button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Store session information
|
||||
const sessionInfo = {
|
||||
tenantId: {{ tenant.id }},
|
||||
specialistId: {{ specialist.id }},
|
||||
chatSessionId: "{{ session.chat_session_id }}"
|
||||
};
|
||||
|
||||
// Chat functionality
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const sendButton = document.getElementById('send-button');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
|
||||
let currentTaskId = null;
|
||||
let pollingInterval = null;
|
||||
|
||||
// Function to add a message to the chat
|
||||
function addMessage(message, isUser = false) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
|
||||
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'message-content';
|
||||
contentDiv.innerHTML = message;
|
||||
|
||||
messageDiv.appendChild(contentDiv);
|
||||
chatMessages.appendChild(messageDiv);
|
||||
|
||||
// Scroll to bottom
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
// Function to send a message
|
||||
function sendMessage() {
|
||||
const message = chatInput.value.trim();
|
||||
if (!message) return;
|
||||
|
||||
// Add user message to chat
|
||||
addMessage(message, true);
|
||||
|
||||
// Clear input
|
||||
chatInput.value = '';
|
||||
|
||||
// Add loading indicator
|
||||
const loadingDiv = document.createElement('div');
|
||||
loadingDiv.className = 'message bot-message loading';
|
||||
loadingDiv.innerHTML = '<div class="message-content"><div class="typing-indicator"><span></span><span></span><span></span></div></div>';
|
||||
chatMessages.appendChild(loadingDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
|
||||
// Send message to server
|
||||
fetch('/api/send_message', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: message,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'processing') {
|
||||
currentTaskId = data.task_id;
|
||||
|
||||
// Start polling for results
|
||||
if (pollingInterval) clearInterval(pollingInterval);
|
||||
pollingInterval = setInterval(checkTaskStatus, 1000);
|
||||
} else {
|
||||
// Remove loading indicator
|
||||
chatMessages.removeChild(loadingDiv);
|
||||
|
||||
// Show error if any
|
||||
if (data.error) {
|
||||
addMessage(`Error: ${data.error}`);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Remove loading indicator
|
||||
chatMessages.removeChild(loadingDiv);
|
||||
addMessage(`Error: ${error.message}`);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to check task status
|
||||
function checkTaskStatus() {
|
||||
if (!currentTaskId) return;
|
||||
|
||||
fetch(`/api/check_status?task_id=${currentTaskId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
// Remove loading indicator
|
||||
const loadingDiv = document.querySelector('.loading');
|
||||
if (loadingDiv) chatMessages.removeChild(loadingDiv);
|
||||
|
||||
// Add bot response
|
||||
addMessage(data.answer);
|
||||
|
||||
// Clear polling
|
||||
clearInterval(pollingInterval);
|
||||
currentTaskId = null;
|
||||
} else if (data.status === 'error') {
|
||||
// Remove loading indicator
|
||||
const loadingDiv = document.querySelector('.loading');
|
||||
if (loadingDiv) chatMessages.removeChild(loadingDiv);
|
||||
|
||||
// Show error
|
||||
addMessage(`Error: ${data.message}`);
|
||||
|
||||
// Clear polling
|
||||
clearInterval(pollingInterval);
|
||||
currentTaskId = null;
|
||||
}
|
||||
// If status is 'pending', continue polling
|
||||
})
|
||||
.catch(error => {
|
||||
// Remove loading indicator
|
||||
const loadingDiv = document.querySelector('.loading');
|
||||
if (loadingDiv) chatMessages.removeChild(loadingDiv);
|
||||
|
||||
addMessage(`Error checking status: ${error.message}`);
|
||||
|
||||
// Clear polling
|
||||
clearInterval(pollingInterval);
|
||||
currentTaskId = null;
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
sendButton.addEventListener('click', sendMessage);
|
||||
|
||||
chatInput.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user