- Build of the Chat Client using Vue.js
- Accompanying css - Views to serve the Chat Client - first test version of the TRACIE_SELECTION_SPECIALIST - ESS Implemented.
This commit is contained in:
Josako
@@ -1,214 +1,43 @@
|
||||
<!-- chat.html - Clean componentized template -->
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Chat{% endblock %}
|
||||
{% block title %}{{ tenant_make.name|default('EveAI') }} - AI Chat{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<!-- Chat specific CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/chat-components.css') }}">
|
||||
|
||||
<!-- Pass server data to JavaScript -->
|
||||
<script>
|
||||
// Definieer chatConfig voordat componenten worden geladen
|
||||
window.chatConfig = {
|
||||
explanation: `{{ customisation.sidebar_markdown|default('') }}`,
|
||||
conversationId: '{{ conversation_id|default("default") }}',
|
||||
messages: {{ messages|tojson|safe }},
|
||||
settings: {
|
||||
maxMessageLength: {{ settings.max_message_length|default(2000) }},
|
||||
allowFileUpload: {{ settings.allow_file_upload|default('true')|lower }},
|
||||
allowVoiceMessage: {{ settings.allow_voice_message|default('false')|lower }},
|
||||
autoScroll: {{ settings.auto_scroll|default('true')|lower }},
|
||||
allowReactions: {{ settings.allow_reactions|default('true')|lower }}
|
||||
},
|
||||
apiPrefix: '{{ request.headers.get("X-Forwarded-Prefix", "") }}'
|
||||
};
|
||||
|
||||
// Debug info om te controleren of chatConfig correct is ingesteld
|
||||
console.log('Chat configuration initialized:', window.chatConfig);
|
||||
</script>
|
||||
{% 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>
|
||||
<!-- Gebruik het ChatApp component -->
|
||||
<chat-app>
|
||||
</chat-app>
|
||||
|
||||
{% 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>
|
||||
<!-- Import components and main app -->
|
||||
<!-- Alle componenten worden geladen met absolute paden vanaf /static/ -->
|
||||
<script type="module" src="{{ url_for('static', filename='assets/js/chat-app.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user