- Introduce Rooms in chat-sessions, as different clients received the same messages.

This commit is contained in:
Josako
2024-08-19 07:22:06 +02:00
parent 688f2300b9
commit 733f115e92
9 changed files with 175 additions and 42 deletions

View File

@@ -47,7 +47,7 @@
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<div class="container-fluid px-0">
<a class="navbar-brand font-weight-bolder ms-sm-3 d-none d-md-block" href=" https://www.flow-it.net " rel="tooltip" title="Realised by Josako & Kobe" data-placement="bottom" target="_blank">
<a class="navbar-brand font-weight-bolder ms-sm-3 d-none d-md-block" href=" https://www.askeveai.com " rel="tooltip" title="Realised by Josako & Kobe" data-placement="bottom" target="_blank">
EveAI
</a>
<a class="navbar-brand font-weight-bolder ms-sm-3 d-block d-md-none" href=" https://www.flow-it.net " rel="tooltip" title="Realised by Josako & Kobe" data-placement="bottom" target="_blank">

View File

@@ -1,7 +1,7 @@
import uuid
from flask_jwt_extended import create_access_token, get_jwt_identity, verify_jwt_in_request, decode_token
from flask_socketio import emit, disconnect
from flask_socketio import emit, disconnect, join_room, leave_room
from flask import current_app, request, session
from sqlalchemy.exc import SQLAlchemyError
from datetime import datetime, timedelta
@@ -32,17 +32,23 @@ def handle_connect():
token = create_access_token(identity={"tenant_id": tenant_id, "api_key": api_key})
current_app.logger.debug(f'SocketIO: Connection handling created token: {token} for tenant {tenant_id}')
# Create a unique room for this client
room = f"{tenant_id}_{request.sid}"
join_room(room)
current_app.logger.debug(f'SocketIO: Client joined room: {room}')
# Create a unique session ID
if 'session_id' not in session:
session['session_id'] = str(uuid.uuid4())
session['last_activity'] = datetime.now()
session['room'] = room
# Communicate connection to client
current_app.logger.debug(f'SocketIO: Connection handling sending status to client for tenant {tenant_id}')
emit('connect', {'status': 'Connected', 'tenant_id': tenant_id})
emit('connect', {'status': 'Connected', 'tenant_id': tenant_id, 'room': room})
current_app.logger.debug(f'SocketIO: Connection handling sending authentication token to client')
emit('authenticated', {'token': token}) # Emit custom event with the token
emit('authenticated', {'token': token, 'room': room}) # Emit custom event with the token
current_app.logger.debug(f'SocketIO: Connection handling sent token to client for tenant {tenant_id}')
except Exception as e:
current_app.logger.error(f'SocketIO: Connection failed: {e}')
@@ -53,6 +59,10 @@ def handle_connect():
@socketio.on('disconnect')
def handle_disconnect():
room = session.get('room')
if room:
leave_room(room)
current_app.logger.debug(f'SocketIO: Client left room: {room}')
current_app.logger.debug('SocketIO: Client disconnected')
@@ -73,6 +83,7 @@ def handle_message(data):
session['last_activity'] = datetime.now()
current_tenant_id = validate_incoming_data(data)
room = session.get('room')
# Offload actual processing of question
task = current_celery.send_task('ask_question', queue='llm_interactions', args=[
@@ -80,7 +91,8 @@ def handle_message(data):
data['message'],
data['language'],
session['session_id'],
data['timezone']
data['timezone'],
room
])
current_app.logger.debug(f'SocketIO: Message offloading for tenant {current_tenant_id}, '
f'Question: {task.id}')
@@ -90,7 +102,7 @@ def handle_message(data):
'taskId': task.id,
}
current_app.logger.debug(f"SocketIO: Message handling sent bot response: {response}")
emit('bot_response', response, broadcast=True)
emit('bot_response', response, room=room)
except Exception as e:
current_app.logger.error(f'SocketIO: Message handling failed: {e}')
disconnect()
@@ -99,15 +111,16 @@ def handle_message(data):
@socketio.on('check_task_status')
def check_task_status(data):
task_id = data.get('task_id')
room = session.get('room')
current_app.logger.debug(f'SocketIO: Check task status for task_id: {task_id}')
if not task_id:
emit('task_status', {'status': 'error', 'message': 'Missing task ID'})
emit('task_status', {'status': 'error', 'message': 'Missing task ID'}, room=room)
return
task_result = current_celery.AsyncResult(task_id)
if task_result.state == 'PENDING':
current_app.logger.debug(f'SocketIO: Task {task_id} is pending')
emit('task_status', {'status': 'pending', 'taskId': task_id})
emit('task_status', {'status': 'pending', 'taskId': task_id}, room=room)
elif task_result.state == 'SUCCESS':
current_app.logger.debug(f'SocketIO: Task {task_id} has finished. Status: {task_result.state}, '
f'Result: {task_result.result}')
@@ -120,10 +133,10 @@ def check_task_status(data):
'algorithm': result['algorithm'],
'interaction_id': result['interaction_id'],
}
emit('task_status', response)
emit('task_status', response, room=room)
else:
current_app.logger.error(f'SocketIO: Task {task_id} has failed. Error: {task_result.info}')
emit('task_status', {'status': task_result.state, 'message': str(task_result.info)})
emit('task_status', {'status': task_result.state, 'message': str(task_result.info)}, room=room)
@socketio.on('feedback')

View File

@@ -47,7 +47,7 @@ def detail_question(question, language, model_variables, session_id):
@current_celery.task(name='ask_question', queue='llm_interactions')
def ask_question(tenant_id, question, language, session_id, user_timezone):
def ask_question(tenant_id, question, language, session_id, user_timezone, room):
"""returns result structured as follows:
result = {
'answer': 'Your answer here',
@@ -90,12 +90,14 @@ def ask_question(tenant_id, question, language, session_id, user_timezone):
result, interaction = answer_using_tenant_rag(question, language, tenant, chat_session)
result['algorithm'] = current_app.config['INTERACTION_ALGORITHMS']['RAG_TENANT']['name']
result['interaction_id'] = interaction.id
result['room'] = room # Include the room in the result
if result['insufficient_info']:
if 'LLM' in tenant.fallback_algorithms:
result, interaction = answer_using_llm(question, language, tenant, chat_session)
result['algorithm'] = current_app.config['INTERACTION_ALGORITHMS']['LLM']['name']
result['interaction_id'] = interaction.id
result['room'] = room # Include the room in the result
return result
except Exception as e:

View File

@@ -3,7 +3,7 @@
Plugin Name: EveAI Chat Widget
Plugin URI: https://askeveai.com/
Description: Integrates the EveAI chat interface into your WordPress site.
Version: 1.3.20
Version: 1.3.21
Author: Josako, Pieter Laroy
Author URI: https://askeveai.com/about/
*/

View File

@@ -13,6 +13,7 @@ class EveAIChatWidget extends HTMLElement {
this.idleTime = 0; // in milliseconds
this.maxConnectionIdleTime = 1 * 60 * 60 * 1000; // 1 hours in milliseconds
this.languages = []
this.room = null;
console.log('EveAIChatWidget constructor called');
}
@@ -163,6 +164,10 @@ class EveAIChatWidget extends HTMLElement {
this.setStatusMessage('Connected to EveAI.');
this.updateConnectionStatus(true);
this.startHeartbeat();
if (data.room) {
this.room = data.room;
console.log(`Joined room: ${this.room}`);
}
});
this.socket.on('authenticated', (data) => {
@@ -171,6 +176,10 @@ class EveAIChatWidget extends HTMLElement {
if (data.token) {
this.jwtToken = data.token; // Store the JWT token received from the server
}
if (data.room) {
this.room = data.room;
console.log(`Confirmed room: ${this.room}`);
}
});
this.socket.on('connect_error', (err) => {

View File

@@ -19,7 +19,8 @@
'4',
'EveAI-CHAT-9628-4110-5263-6256-7601',
'http://macstudio.ask-eve-ai-local.com',
'en'
'en',
'en,fr,nl'
);
eveAI.initializeChat('chat-container');
});

View File

@@ -13,7 +13,7 @@
--algorithm-color-llm: #800080; /* Purple for RAG_LLM */
/*--font-family: 'Arial, sans-serif'; !* Default font family *!*/
--font-family: 'ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol';
--font-family: 'Segoe UI, Roboto, Cantarell, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol';
--font-color: #e9e9e9; /* Default font color */
--user-message-font-color: #e9e9e9; /* User message font color */
--bot-message-font-color: #e9e9e9; /* Bot message font color */
@@ -91,7 +91,7 @@
.chat-container {
display: flex;
flex-direction: column;
height: 99vh;
height: 75vh;
/*max-height: 100vh;*/
max-width: 600px;
margin: auto;
@@ -103,6 +103,13 @@
color: var(--font-color); /* Apply the default font color */
}
.disclaimer {
font-size: 0.7em;
text-align: right;
padding: 5px 20px 5px 5px;
margin-bottom: 5px;
}
.messages-area {
flex: 1;
overflow-y: auto;
@@ -115,6 +122,7 @@
margin-bottom: 10px;
padding: 10px;
border-radius: 15px;
font-size: 1rem;
}
.message.user {
@@ -150,21 +158,50 @@
}
.question-area {
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--user-message-bg);
padding: 10px;
}
.question-area input {
.language-select-container {
width: 100%;
margin-bottom: 10px; /* Spacing between the dropdown and the textarea */
}
.language-select {
width: 100%;
margin-bottom: 5px; /* Space between the dropdown and the send button */
padding: 8px;
border-radius: 5px;
border: 1px solid var(--input-border);
background-color: var(--input-bg);
color: var(--input-text-color);
font-size: 1rem;
}
.question-area textarea {
flex: 1;
border: none;
padding: 10px;
border-radius: 15px;
margin-right: 10px;
background-color: var(--input-bg); /* Apply input background color */
border: 1px solid var(--input-border); /* Apply input border color */
color: var(--input-text-color); /* Apply input text color */
background-color: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--input-text-color);
font-family: var(--font-family); /* Apply the default font family */
font-size: 1rem;
resize: vertical;
min-height: 60px;
max-height: 150px;
overflow-y: auto;
margin-right: 10px; /* Space between textarea and right-side container */
}
.right-side {
display: flex;
flex-direction: column;
align-items: center;
}
.question-area button {
@@ -176,8 +213,9 @@
/* Styles for the send icon */
.send-icon {
font-size: 24px; /* Size of the icon */
color: var(--button-color); /* Color of the icon */
font-size: 24px;
color: var(--button-color);
cursor: pointer;
}
.send-icon.disabled {

View File

@@ -1,6 +1,6 @@
class EveAIChatWidget extends HTMLElement {
static get observedAttributes() {
return ['tenant-id', 'api-key', 'domain', 'language'];
return ['tenant-id', 'api-key', 'domain', 'language', 'languages'];
}
constructor() {
@@ -12,6 +12,8 @@ class EveAIChatWidget extends HTMLElement {
this.heartbeatInterval = null;
this.idleTime = 0; // in milliseconds
this.maxConnectionIdleTime = 1 * 60 * 60 * 1000; // 1 hours in milliseconds
this.languages = []
this.room = null;
console.log('EveAIChatWidget constructor called');
}
@@ -19,15 +21,17 @@ class EveAIChatWidget extends HTMLElement {
console.log('connectedCallback called');
this.innerHTML = this.getTemplate();
this.messagesArea = this.querySelector('.messages-area');
this.questionInput = this.querySelector('.question-area input');
this.questionInput = this.querySelector('.question-area textarea');
this.sendButton = this.querySelector('.send-icon');
this.languageSelect = this.querySelector('.language-select');
this.statusLine = this.querySelector('.status-line');
this.statusMessage = this.querySelector('.status-message');
this.connectionStatusIcon = this.querySelector('.connection-status-icon');
this.sendButton.addEventListener('click', () => this.handleSendMessage());
this.questionInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault(); // Prevent adding a new line
this.handleSendMessage();
}
});
@@ -38,6 +42,30 @@ class EveAIChatWidget extends HTMLElement {
}
}
populateLanguageDropdown() {
// Clear existing options
this.languageSelect.innerHTML = '';
console.log(`languages for options: ${this.languages}`)
// Populate with new options
this.languages.forEach(lang => {
const option = document.createElement('option');
option.value = lang;
option.textContent = lang.toUpperCase();
if (lang === this.currentLanguage) {
option.selected = true;
}
console.log(`Adding option for language: ${lang}`)
this.languageSelect.appendChild(option);
});
// Add event listener for language change
this.languageSelect.addEventListener('change', (e) => {
this.currentLanguage = e.target.value;
// You might want to emit an event or update the backend about the language change
});
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`attributeChangedCallback called: ${name} changed from ${oldValue} to ${newValue}`);
this.updateAttributes();
@@ -45,6 +73,9 @@ class EveAIChatWidget extends HTMLElement {
if (this.areAllAttributesSet() && !this.socket) {
console.log('All attributes set in attributeChangedCallback, initializing socket');
this.attributesSet = true;
console.log('All attributes are set, populating language dropdown');
this.populateLanguageDropdown();
console.log('All attributes are set, initializing socket')
this.initializeSocket();
}
}
@@ -54,11 +85,16 @@ class EveAIChatWidget extends HTMLElement {
this.apiKey = this.getAttribute('api-key');
this.domain = this.getAttribute('domain');
this.language = this.getAttribute('language');
const languageAttr = this.getAttribute('languages');
this.languages = languageAttr ? languageAttr.split(',') : [];
this.currentLanguage = this.language;
console.log('Updated attributes:', {
tenantId: this.tenantId,
apiKey: this.apiKey,
domain: this.domain,
language: this.language
language: this.language,
currentLanguage: this.currentLanguage,
languages: this.languages
});
}
@@ -67,13 +103,34 @@ class EveAIChatWidget extends HTMLElement {
const apiKey = this.getAttribute('api-key');
const domain = this.getAttribute('domain');
const language = this.getAttribute('language');
const languages = this.getAttribute('languages');
console.log('Checking if all attributes are set:', {
tenantId,
apiKey,
domain,
language
language,
languages
});
return tenantId && apiKey && domain && language;
return tenantId && apiKey && domain && language && languages;
}
createLanguageDropdown() {
const select = document.createElement('select');
select.id = 'languageSelect';
this.languages.forEach(lang => {
const option = document.createElement('option');
option.value = lang;
option.textContent = lang.toUpperCase();
if (lang === this.currentLanguage) {
option.selected = true;
}
select.appendChild(option);
});
select.addEventListener('change', (e) => {
this.currentLanguage = e.target.value;
// You might want to emit an event or update the backend about the language change
});
return select;
}
initializeSocket() {
@@ -81,15 +138,11 @@ class EveAIChatWidget extends HTMLElement {
console.log('Socket already initialized');
return;
}
if (!this.domain || this.domain === 'null') {
console.error('Domain attribute is missing or invalid');
this.setStatusMessage('EveAI Chat Widget needs further configuration by site administrator.');
return;
}
console.log(`Initializing socket connection to ${this.domain}`);
console.log(`Initializing socket connection to Evie`);
// Ensure apiKey is passed in the query parameters
this.socket = io(this.domain, {
this.socket = io('https://evie.askeveai.com', {
path: '/chat/socket.io/',
transports: ['websocket', 'polling'],
query: {
@@ -104,13 +157,17 @@ class EveAIChatWidget extends HTMLElement {
timeout: 20000 // Connection timeout
});
console.log(`Finished initializing socket connection to ${this.domain}`);
console.log(`Finished initializing socket connection to Evie`);
this.socket.on('connect', (data) => {
console.log('Socket connected OK');
this.setStatusMessage('Connected to EveAI.');
this.updateConnectionStatus(true);
this.startHeartbeat();
if (data.room) {
this.room = data.room;
console.log(`Joined room: ${this.room}`);
}
});
this.socket.on('authenticated', (data) => {
@@ -119,6 +176,10 @@ class EveAIChatWidget extends HTMLElement {
if (data.token) {
this.jwtToken = data.token; // Store the JWT token received from the server
}
if (data.room) {
this.room = data.room;
console.log(`Confirmed room: ${this.room}`);
}
});
this.socket.on('connect_error', (err) => {
@@ -243,9 +304,13 @@ class EveAIChatWidget extends HTMLElement {
return `
<div class="chat-container">
<div class="messages-area"></div>
<div class="disclaimer">Evie can make mistakes. Please double-check responses.</div>
<div class="question-area">
<input type="text" placeholder="Type your message here..." />
<i class="material-icons send-icon outlined">send</i>
<textarea placeholder="Type your message here..." rows="3"></textarea>
<div class="right-side">
<select class="language-select"></select>
<i class="material-icons send-icon outlined">send</i>
</div>
</div>
<div class="status-line">
<i class="material-icons connection-status-icon">link_off</i>
@@ -370,12 +435,15 @@ toggleFeedback(thumbsUp, thumbsDown, feedback, interactionId) {
console.error('JWT token is not available');
return;
}
const selectedLanguage = this.languageSelect.value;
console.log('Sending message to backend');
this.socket.emit('user_message', {
tenantId: this.tenantId,
token: this.jwtToken,
message,
language: this.language,
language: selectedLanguage,
timezone: this.userTimezone
});
this.setStatusMessage('Processing started ...')

View File

@@ -1,12 +1,13 @@
// static/js/eveai-sdk.js
class EveAI {
constructor(tenantId, apiKey, domain, language) {
constructor(tenantId, apiKey, domain, language, languages) {
this.tenantId = tenantId;
this.apiKey = apiKey;
this.domain = domain;
this.language = language;
this.languages = languages;
console.log('EveAI constructor:', { tenantId, apiKey, domain });
console.log('EveAI constructor:', { tenantId, apiKey, domain, language, languages });
}
initializeChat(containerId) {
@@ -19,6 +20,7 @@ class EveAI {
chatWidget.setAttribute('api-key', this.apiKey);
chatWidget.setAttribute('domain', this.domain);
chatWidget.setAttribute('language', this.language);
chatWidget.setAttribute('languages', this.languages);
});
} else {
console.error('Container not found');