diff --git a/docker/compose_dev.yaml b/docker/compose_dev.yaml index e2ef793..683b497 100644 --- a/docker/compose_dev.yaml +++ b/docker/compose_dev.yaml @@ -57,6 +57,9 @@ services: - ../nginx/sites-enabled:/etc/nginx/sites-enabled - ../nginx/static:/etc/nginx/static - ../nginx/public:/etc/nginx/public + - ../integrations/Wordpress/eveai-chat-widget/css/eveai-chat-style.css:/etc/nginx/static/css/eveai-chat-style.css + - ../integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js:/etc/nginx/static/js/eveai-chat-widget.js + - ../integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js:/etc/nginx/static/js/eveai-sdk.js - ./logs/nginx:/var/log/nginx depends_on: - eveai_app diff --git a/docker/nginx/Dockerfile b/docker/nginx/Dockerfile index 7328492..608e80d 100644 --- a/docker/nginx/Dockerfile +++ b/docker/nginx/Dockerfile @@ -10,6 +10,9 @@ COPY ../../nginx/mime.types /etc/nginx/mime.types # Copy static & public files RUN mkdir -p /etc/nginx/static /etc/nginx/public COPY ../../nginx/static /etc/nginx/static +COPY ../../integrations/Wordpress/eveai-chat-widget/css/eveai-chat-style.css /etc/nginx/static/css/ +COPY ../../integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js /etc/nginx/static/js/ +COPY ../../integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js /etc/nginx/static/js COPY ../../nginx/public /etc/nginx/public # Copy site-specific configurations diff --git a/eveai_app/templates/interaction/view_chat_session.html b/eveai_app/templates/interaction/view_chat_session.html index 48d0c34..ef80a60 100644 --- a/eveai_app/templates/interaction/view_chat_session.html +++ b/eveai_app/templates/interaction/view_chat_session.html @@ -1,126 +1,80 @@ {% extends "base.html" %} +{% from "macros.html" import render_field %} + +{% block title %}Session Overview{% endblock %} + +{% block content_title %}Session Overview{% endblock %} +{% block content_description %}An overview of the chat session.{% endblock %} {% block content %}

Chat Session Details

-
Session Information
- -
- - -
-
-
Session ID:
-
{{ chat_session.session_id }}
- -
Session Start:
-
- {{ chat_session.session_start | to_local_time(chat_session.timezone) }} - {{ chat_session.session_start | to_local_time(session['admin_user_timezone']) }} -
- -
Session End:
-
- {% if chat_session.session_end %} - {{ chat_session.session_end | to_local_time(chat_session.timezone) }} - {{ chat_session.session_end | to_local_time(session['admin_user_timezone']) }} - {% else %} - Ongoing - {% endif %} -
-
+

Session ID: {{ chat_session.session_id }}

+

User: {{ chat_session.user.user_name if chat_session.user else 'Anonymous' }}

+

Start: {{ chat_session.session_start | to_local_time(chat_session.timezone) }}

+

End: {{ chat_session.session_end | to_local_time(chat_session.timezone) if chat_session.session_end else 'Ongoing' }}

- -
-
-
Interactions
-
-
- {% for interaction in interactions %} -
-
-
- Question: - - {{ interaction.question_at | to_local_time(interaction.timezone) }} - {{ interaction.question_at | to_local_time(session['admin_user_timezone']) }} - - - {{ interaction.answer_at | to_local_time(interaction.timezone) }} - {{ interaction.answer_at | to_local_time(session['admin_user_timezone']) }} - ({{ interaction.question_at | time_difference(interaction.answer_at) }}) - -
-
-

Question: {{ interaction.question }}

-

Answer: {{ interaction.answer }}

-

- Algorithm Used: - - fingerprint - {{ interaction.algorithm_used }} -

-

- Appreciation: - - {{ 'thumb_up' if interaction.appreciation == 1 else 'thumb_down' }} - -

-

Embeddings: - {% if interaction.embeddings %} - {% for embedding in interaction.embeddings %} - - {{ embedding.embedding_id }} - - {% endfor %} - {% else %} - None - {% endif %} -

-
+

Interactions

+
+ {% for interaction in interactions %} +
+

+ +

+
+
+
Detailed Question:
+

{{ interaction.detailed_question }}

+
Answer:
+
{{ interaction.answer | safe }}
+ {% if embeddings_dict.get(interaction.id) %} +
Related Documents:
+
    + {% for embedding in embeddings_dict[interaction.id] %} +
  • + {% if embedding.url %} + {{ embedding.url }} + {% else %} + {{ embedding.file_name }} + {% endif %} +
    • + {% endfor %} +
+ {% endif %}
- {% endfor %} +
+ {% endfor %}
{% endblock %} {% block scripts %} + diff --git a/eveai_app/views/interaction_views.py b/eveai_app/views/interaction_views.py index 7d7a807..a866ca9 100644 --- a/eveai_app/views/interaction_views.py +++ b/eveai_app/views/interaction_views.py @@ -15,7 +15,8 @@ from requests.exceptions import SSLError from urllib.parse import urlparse import io -from common.models.interaction import ChatSession, Interaction +from common.models.document import Embedding, DocumentVersion +from common.models.interaction import ChatSession, Interaction, InteractionEmbedding from common.extensions import db from .document_forms import AddDocumentForm, AddURLForm, EditDocumentForm, EditDocumentVersionForm from common.utils.middleware import mw_before_request @@ -80,11 +81,34 @@ def handle_chat_session_selection(): return redirect(prefixed_url_for('interaction_bp.chat_sessions')) -@interaction_bp.route('/view_chat_session/', methods=['GET']) +@interaction_bp.route('/view_chat_session/', methods=['GET']) @roles_accepted('Super User', 'Tenant Admin') def view_chat_session(chat_session_id): chat_session = ChatSession.query.get_or_404(chat_session_id) - show_chat_session(chat_session) + interactions = (Interaction.query + .filter_by(chat_session_id=chat_session.id) + .order_by(Interaction.question_at) + .all()) + + # Fetch all related embeddings for the interactions in this session + embedding_query = (db.session.query(InteractionEmbedding.interaction_id, + DocumentVersion.url, + DocumentVersion.file_name) + .join(Embedding, InteractionEmbedding.embedding_id == Embedding.id) + .join(DocumentVersion, Embedding.doc_vers_id == DocumentVersion.id) + .filter(InteractionEmbedding.interaction_id.in_([i.id for i in interactions]))) + + # Create a dictionary to store embeddings for each interaction + embeddings_dict = {} + for interaction_id, url, file_name in embedding_query: + if interaction_id not in embeddings_dict: + embeddings_dict[interaction_id] = [] + embeddings_dict[interaction_id].append({'url': url, 'file_name': file_name}) + + return render_template('interaction/view_chat_session.html', + chat_session=chat_session, + interactions=interactions, + embeddings_dict=embeddings_dict) @interaction_bp.route('/view_chat_session_by_session_id/', methods=['GET']) diff --git a/integrations/Wordpress/eveai-chat-widget.zip b/integrations/Wordpress/eveai-chat-widget.zip index e65d785..0be5747 100644 Binary files a/integrations/Wordpress/eveai-chat-widget.zip and b/integrations/Wordpress/eveai-chat-widget.zip differ diff --git a/integrations/Wordpress/eveai-chat-widget/eveai-chat_plugin.php b/integrations/Wordpress/eveai-chat-widget/eveai-chat_plugin.php index f0136b0..7b918aa 100644 --- a/integrations/Wordpress/eveai-chat-widget/eveai-chat_plugin.php +++ b/integrations/Wordpress/eveai-chat-widget/eveai-chat_plugin.php @@ -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.4.1 +Version: 1.5.0 Author: Josako, Pieter Laroy Author URI: https://askeveai.com/about/ */ @@ -28,7 +28,8 @@ function eveai_chat_shortcode($atts) { 'api_key' => '', 'domain' => '', 'language' => 'en', - 'supported_languages' => 'en,fr,de,es' + 'supported_languages' => 'en,fr,de,es', + 'server_url' => 'https://evie.askeveai.com' ); // Merge provided attributes with defaults @@ -40,6 +41,7 @@ function eveai_chat_shortcode($atts) { $domain = esc_url_raw($atts['domain']); $language = sanitize_text_field($atts['language']); $supported_languages = sanitize_text_field($atts['supported_languages']); + $server_url = esc_url_raw($atts['server_url']); // Generate a unique ID for this instance of the chat widget $chat_id = 'chat-container-' . uniqid(); @@ -52,7 +54,8 @@ function eveai_chat_shortcode($atts) { '$api_key', '$domain', '$language', - '$supported_languages' + '$supported_languages', + '$server_url' ); eveAI.initializeChat('$chat_id'); }); diff --git a/integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js b/integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js index b1b1bae..3dc82e8 100644 --- a/integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js +++ b/integrations/Wordpress/eveai-chat-widget/js/eveai-chat-widget.js @@ -1,6 +1,6 @@ class EveAIChatWidget extends HTMLElement { static get observedAttributes() { - return ['tenant-id', 'api-key', 'domain', 'language', 'languages']; + return ['tenant-id', 'api-key', 'domain', 'language', 'languages', 'server-url']; } constructor() { @@ -87,6 +87,7 @@ class EveAIChatWidget extends HTMLElement { this.language = this.getAttribute('language'); const languageAttr = this.getAttribute('languages'); this.languages = languageAttr ? languageAttr.split(',') : []; + this.serverUrl = this.getAttribute('server-url'); this.currentLanguage = this.language; console.log('Updated attributes:', { tenantId: this.tenantId, @@ -94,7 +95,8 @@ class EveAIChatWidget extends HTMLElement { domain: this.domain, language: this.language, currentLanguage: this.currentLanguage, - languages: this.languages + languages: this.languages, + serverUrl: this.serverUrl }); } @@ -104,14 +106,16 @@ class EveAIChatWidget extends HTMLElement { const domain = this.getAttribute('domain'); const language = this.getAttribute('language'); const languages = this.getAttribute('languages'); + const serverUrl = this.getAttribute('server-url'); console.log('Checking if all attributes are set:', { tenantId, apiKey, domain, language, - languages + languages, + serverUrl }); - return tenantId && apiKey && domain && language && languages; + return tenantId && apiKey && domain && language && languages && serverUrl; } createLanguageDropdown() { @@ -142,7 +146,7 @@ class EveAIChatWidget extends HTMLElement { console.log(`Initializing socket connection to Evie`); // Ensure apiKey is passed in the query parameters - this.socket = io('https://evie.askeveai.com', { + this.socket = io(this.serverUrl, { path: '/chat/socket.io/', transports: ['websocket', 'polling'], query: { diff --git a/integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js b/integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js index 1e9ccb8..c43707b 100644 --- a/integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js +++ b/integrations/Wordpress/eveai-chat-widget/js/eveai-sdk.js @@ -1,13 +1,14 @@ // static/js/eveai-sdk.js class EveAI { - constructor(tenantId, apiKey, domain, language, languages) { + constructor(tenantId, apiKey, domain, language, languages, serverUrl) { this.tenantId = tenantId; this.apiKey = apiKey; this.domain = domain; this.language = language; this.languages = languages; + this.serverUrl = serverUrl; - console.log('EveAI constructor:', { tenantId, apiKey, domain, language, languages }); + console.log('EveAI constructor:', { tenantId, apiKey, domain, language, languages, serverUrl }); } initializeChat(containerId) { @@ -21,6 +22,7 @@ class EveAI { chatWidget.setAttribute('domain', this.domain); chatWidget.setAttribute('language', this.language); chatWidget.setAttribute('languages', this.languages); + chatWidget.setAttribute('server-url', this.serverUrl); }); } else { console.error('Container not found'); diff --git a/integrations/Wordpress/eveai-chat-widget/readme.txt b/integrations/Wordpress/eveai-chat-widget/readme.txt index 087696a..884ec2b 100644 --- a/integrations/Wordpress/eveai-chat-widget/readme.txt +++ b/integrations/Wordpress/eveai-chat-widget/readme.txt @@ -3,7 +3,7 @@ Contributors: Josako Tags: chat, ai Requires at least: 5.0 Tested up to: 5.9 -Stable tag: 1.4.1 +Stable tag: 1.5.0 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -23,10 +23,10 @@ This plugin allows you to easily add the EveAI chat widget to your WordPress sit To add an EveAI Chat Widget to your page or post, use the following shortcode: -[eveai_chat tenant_id="YOUR_TENANT_ID" api_key="YOUR_API_KEY" domain="YOUR_DOMAIN" language="LANGUAGE_CODE" supported_languages="COMMA_SEPARATED_LANGUAGE_CODES"] +[eveai_chat tenant_id="YOUR_TENANT_ID" api_key="YOUR_API_KEY" domain="YOUR_DOMAIN" language="LANGUAGE_CODE" supported_languages="COMMA_SEPARATED_LANGUAGE_CODES" server_url="Server URL for Evie"] Example: -[eveai_chat tenant_id="123456" api_key="your_api_key_here" domain="https://your-domain.com" language="en" supported_languages="en,fr,de,es"] +[eveai_chat tenant_id="123456" api_key="your_api_key_here" domain="https://your-domain.com" language="en" supported_languages="en,fr,de,es" server_url="https://evie.askeveai.com"] You can add multiple chat widgets with different configurations by using the shortcode multiple times with different parameters. @@ -38,6 +38,9 @@ Contact your EveAI service provider to obtain your Tenant ID, API Key, and Domai == Changelog == += 1.5.0 = +* Allow for multiple servers to serve Evie + = 1.4.1 - 1.4...= * Bug fixes diff --git a/nginx/public/chat_evie.html b/nginx/public/chat_evie.html new file mode 100644 index 0000000..9d957f7 --- /dev/null +++ b/nginx/public/chat_evie.html @@ -0,0 +1,30 @@ + + + + + + Chat Client Evie + + + + + + + + +
+ + + \ No newline at end of file diff --git a/nginx/static/assets/css/eveai.css b/nginx/static/assets/css/eveai.css index ee97655..2310b69 100644 --- a/nginx/static/assets/css/eveai.css +++ b/nginx/static/assets/css/eveai.css @@ -421,3 +421,90 @@ input[type="radio"] { box-shadow: none; } +/* Custom styles for chat session view */ +.accordion-button:not(.collapsed) { + background-color: var(--bs-primary); + color: var(--bs-white); +} + +.accordion-button:focus { + box-shadow: 0 0 0 0.25rem rgba(118, 89, 154, 0.25); +} + +.interaction-question { + font-size: 1rem; /* Normal text size */ +} + +.interaction-icons { + display: flex; + align-items: center; +} + +.interaction-icons .material-icons { + font-size: 24px; + margin-left: 8px; +} + +.thumb-icon.filled { + color: var(--bs-success); +} + +.thumb-icon.outlined { + color: var(--thumb-icon-outlined); +} + +/* Algorithm icon colors */ +.algorithm-icon.rag_tenant { + color: var(--algorithm-color-rag-tenant); +} + +.algorithm-icon.rag_wikipedia { + color: var(--algorithm-color-rag-wikipedia); +} + +.algorithm-icon.rag_google { + color: var(--algorithm-color-rag-google); +} + +.algorithm-icon.llm { + color: var(--algorithm-color-llm); +} + +.accordion-body { + background-color: var(--bs-light); +} + +/* Markdown content styles */ +.markdown-content { + font-size: 1rem; + line-height: 1.5; +} + +.markdown-content p { + margin-bottom: 1rem; +} + +.markdown-content h1, .markdown-content h2, .markdown-content h3, +.markdown-content h4, .markdown-content h5, .markdown-content h6 { + margin-top: 1.5rem; + margin-bottom: 1rem; +} + +.markdown-content ul, .markdown-content ol { + margin-bottom: 1rem; + padding-left: 2rem; +} + +.markdown-content code { + background-color: #f8f9fa; + padding: 0.2em 0.4em; + border-radius: 3px; +} + +.markdown-content pre { + background-color: #f8f9fa; + padding: 1rem; + border-radius: 5px; + overflow-x: auto; +} + diff --git a/nginx/static/css/eveai-chat-style.css b/nginx/static/css/eveai-chat-style.css deleted file mode 100644 index 1105f39..0000000 --- a/nginx/static/css/eveai-chat-style.css +++ /dev/null @@ -1,294 +0,0 @@ -/* eveai_chat.css */ -:root { - --user-message-bg: #292929; /* Default user message background color */ - --bot-message-bg: #1e1e1e; /* Default bot message background color */ - --chat-bg: #1e1e1e; /* Default chat background color */ - --status-line-color: #e9e9e9; /* Color for the status line text */ - --status-line-bg: #1e1e1e; /* Background color for the status line */ - --status-line-height: 30px; /* Fixed height for the status line */ - - --algorithm-color-rag-tenant: #0f0; /* Green for RAG_TENANT */ - --algorithm-color-rag-wikipedia: #00f; /* Blue for RAG_WIKIPEDIA */ - --algorithm-color-rag-google: #ff0; /* Yellow for RAG_GOOGLE */ - --algorithm-color-llm: #800080; /* Purple for RAG_LLM */ - - /*--font-family: 'Arial, sans-serif'; !* Default font family *!*/ - --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 */ - --input-bg: #292929; /* Input background color */ - --input-border: #ccc; /* Input border color */ - --input-text-color: #e9e9e9; /* Input text color */ - --button-color: #007bff; /* Button text color */ - - /* Variables for hyperlink backgrounds */ - --link-bg: #1e1e1e; /* Default background color for hyperlinks */ - --link-hover-bg: #1e1e1e; /* Background color on hover for hyperlinks */ - --link-color: #dec981; /* Default text color for hyperlinks */ - --link-hover-color: #D68F53; /* Text color on hover for hyperlinks */ - - /* New scrollbar variables */ - --scrollbar-bg: #292929; /* Background color for the scrollbar track */ - --scrollbar-thumb: #4b4b4b; /* Color for the scrollbar thumb */ - --scrollbar-thumb-hover: #dec981; /* Color for the thumb on hover */ - --scrollbar-thumb-active: #D68F53; /* Color for the thumb when active (dragged) */ - - /* Thumb colors */ - --thumb-icon-outlined: #4b4b4b; - --thumb-icon-filled: #e9e9e9; - - /* Connection Status colors */ - --status-connected-color: #28a745; /* Green color for connected status */ - --status-disconnected-color: #ffc107; /* Orange color for disconnected status */ -} - -/* Connection status styles */ -.connection-status-icon { - vertical-align: middle; - font-size: 24px; - margin-right: 8px; -} - -.status-connected { - color: var(--status-connected-color); -} - -.status-disconnected { - color: var(--status-disconnected-color); -} - -/* Custom scrollbar styles */ -.messages-area::-webkit-scrollbar { - width: 12px; /* Width of the scrollbar */ -} - -.messages-area::-webkit-scrollbar-track { - background: var(--scrollbar-bg); /* Background color for the track */ -} - -.messages-area::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); /* Color of the thumb */ - border-radius: 10px; /* Rounded corners for the thumb */ - border: 3px solid var(--scrollbar-bg); /* Space around the thumb */ -} - -.messages-area::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover); /* Color when hovering over the thumb */ -} - -.messages-area::-webkit-scrollbar-thumb:active { - background-color: var(--scrollbar-thumb-active); /* Color when active (dragging) */ -} - -/* For Firefox */ -.messages-area { - scrollbar-width: thin; /* Make scrollbar thinner */ - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Thumb and track colors */ -} - -/* General Styles */ -.chat-container { - display: flex; - flex-direction: column; - height: 75vh; - /*max-height: 100vh;*/ - max-width: 600px; - margin: auto; - border: 1px solid #ccc; - border-radius: 8px; - overflow: hidden; - background-color: var(--chat-bg); - font-family: var(--font-family); /* Apply the default font family */ - 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; - padding: 10px; - background-color: var(--bot-message-bg); -} - -.message { - max-width: 90%; - margin-bottom: 10px; - padding: 10px; - border-radius: 15px; - font-size: 1rem; -} - -.message.user { - margin-left: auto; - background-color: var(--user-message-bg); - color: var(--user-message-font-color); /* Apply user message font color */ -} - -.message.bot { - background-color: var(--bot-message-bg); - color: var(--bot-message-font-color); /* Apply bot message font color */ -} - -.message-icons { - display: flex; - align-items: center; -} - -/* Scoped styles for thumb icons */ -.thumb-icon.outlined { - color: var(--thumb-icon-outlined); /* Color for outlined state */ -} - -.thumb-icon.filled { - color: var(--thumb-icon-filled); /* Color for filled state */ -} - -/* Default styles for material icons */ -.material-icons { - font-size: 24px; - vertical-align: middle; - cursor: pointer; -} - -.question-area { - display: flex; - flex-direction: row; - align-items: center; - background-color: var(--user-message-bg); - padding: 10px; -} - -.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; - 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 { - background: none; - border: none; - cursor: pointer; - color: var(--button-color); -} - -/* Styles for the send icon */ -.send-icon { - font-size: 24px; - color: var(--button-color); - cursor: pointer; -} - -.send-icon.disabled { - color: grey; /* Color for the disabled state */ - cursor: not-allowed; /* Change cursor to indicate disabled state */ -} - -/* New CSS for the status-line */ -.status-line { - height: var(--status-line-height); /* Fixed height for the status line */ - padding: 5px 10px; - background-color: var(--status-line-bg); /* Background color */ - color: var(--status-line-color); /* Text color */ - font-size: 0.9rem; /* Slightly smaller font size */ - text-align: center; /* Centered text */ - border-top: 1px solid #ccc; /* Subtle top border */ - display: flex; - align-items: center; - justify-content: flex-start; -} - -/* Algorithm-specific colors for fingerprint icon */ -.fingerprint-rag-tenant { - color: var(--algorithm-color-rag-tenant); -} - -.fingerprint-rag-wikipedia { - color: var(--algorithm-color-rag-wikipedia); -} - -.fingerprint-rag-google { - color: var(--algorithm-color-rag-google); -} - -.fingerprint-llm { - color: var(--algorithm-color-llm); -} - -/* Styling for citation links */ -.citations a { - background-color: var(--link-bg); /* Apply default background color */ - color: var(--link-color); /* Apply default link color */ - padding: 2px 4px; /* Add padding for better appearance */ - border-radius: 3px; /* Add slight rounding for a modern look */ - text-decoration: none; /* Remove default underline */ - transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */ -} - -.citations a:hover { - background-color: var(--link-hover-bg); /* Background color on hover */ - color: var(--link-hover-color); /* Text color on hover */ -} - -/* Media queries for responsiveness */ -@media (max-width: 768px) { - .chat-container { - max-width: 90%; /* Reduce max width on smaller screens */ - } -} - -@media (max-width: 480px) { - .chat-container { - max-width: 95%; /* Further reduce max width on very small screens */ - } - - .question-area input { - font-size: 0.9rem; /* Adjust input font size for smaller screens */ - } - - .status-line { - font-size: 0.8rem; /* Adjust status line font size for smaller screens */ - } -} - - - diff --git a/nginx/static/js/eveai-chat-widget.js b/nginx/static/js/eveai-chat-widget.js deleted file mode 100644 index 0eef8eb..0000000 --- a/nginx/static/js/eveai-chat-widget.js +++ /dev/null @@ -1,470 +0,0 @@ -class EveAIChatWidget extends HTMLElement { - static get observedAttributes() { - return ['tenant-id', 'api-key', 'domain', 'language', 'languages']; - } - - constructor() { - super(); - this.socket = null; // Initialize socket to null - this.attributesSet = false; // Flag to check if all attributes are set - this.jwtToken = null; // Initialize jwtToken to null - this.userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; // Detect user's timezone - 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'); - } - - connectedCallback() { - console.log('connectedCallback called'); - this.innerHTML = this.getTemplate(); - this.messagesArea = this.querySelector('.messages-area'); - 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' && !event.shiftKey) { - event.preventDefault(); // Prevent adding a new line - this.handleSendMessage(); - } - }); - - if (this.areAllAttributesSet() && !this.socket) { - console.log('Attributes already set in connectedCallback, initializing socket'); - this.initializeSocket(); - } - } - - 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(); - - 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(); - } - } - - updateAttributes() { - this.tenantId = this.getAttribute('tenant-id'); - 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, - currentLanguage: this.currentLanguage, - languages: this.languages - }); - } - - areAllAttributesSet() { - const tenantId = this.getAttribute('tenant-id'); - 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, - languages - }); - 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() { - if (this.socket) { - console.log('Socket already initialized'); - return; - } - - console.log(`Initializing socket connection to Evie`); - - // Ensure apiKey is passed in the query parameters - this.socket = io('https://evie.askeveai.com', { - path: '/chat/socket.io/', - transports: ['websocket', 'polling'], - query: { - tenantId: this.tenantId, - apiKey: this.apiKey // Ensure apiKey is included here - }, - auth: { - token: 'Bearer ' + this.apiKey // Ensure token is included here - }, - reconnectionAttempts: Infinity, // Infinite reconnection attempts - reconnectionDelay: 5000, // Delay between reconnections - timeout: 20000 // Connection timeout - }); - - 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) => { - console.log('Authenticated event received: ', data); - this.setStatusMessage('Authenticated.'); - 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) => { - console.error('Socket connection error:', err); - this.setStatusMessage('EveAI Chat Widget needs further configuration by site administrator.'); - this.updateConnectionStatus(false); - }); - - this.socket.on('connect_timeout', () => { - console.error('Socket connection timeout'); - this.setStatusMessage('EveAI Chat Widget needs further configuration by site administrator.'); - this.updateConnectionStatus(false); - }); - - this.socket.on('disconnect', (reason) => { - console.log('Socket disconnected: ', reason); - if (reason === 'io server disconnect') { - // Server disconnected the socket - this.socket.connect(); // Attempt to reconnect - } - this.setStatusMessage('Disconnected from EveAI. Please refresh the page for further interaction.'); - this.updateConnectionStatus(false); - this.stopHeartbeat(); - }); - - this.socket.on('reconnect_attempt', () => { - console.log('Attempting to reconnect to the server...'); - this.setStatusMessage('Attempting to reconnect...'); - }); - - this.socket.on('reconnect', () => { - console.log('Successfully reconnected to the server'); - this.setStatusMessage('Reconnected to EveAI.'); - this.updateConnectionStatus(true); - this.startHeartbeat(); - }); - - this.socket.on('bot_response', (data) => { - if (data.tenantId === this.tenantId) { - console.log('Initial response received:', data); - console.log('Task ID received:', data.taskId); - this.checkTaskStatus(data.taskId); - this.setStatusMessage('Processing...'); - } - }); - - this.socket.on('task_status', (data) => { - console.log('Task status received:', data.status); - console.log('Task ID received:', data.taskId); - console.log('Citations type:', typeof data.citations, 'Citations:', data.citations); - - if (data.status === 'pending') { - this.updateProgress(); - setTimeout(() => this.checkTaskStatus(data.taskId), 1000); // Poll every second - } else if (data.status === 'success') { - this.addBotMessage(data.answer, data.interaction_id, data.algorithm, data.citations); - this.clearProgress(); // Clear progress indicator when done - } else { - this.setStatusMessage('Failed to process message.'); - } - }); - } - - setStatusMessage(message) { - this.statusMessage.textContent = message; - } - - updateConnectionStatus(isConnected) { - if (isConnected) { - this.connectionStatusIcon.textContent = 'link'; - this.connectionStatusIcon.classList.remove('status-disconnected'); - this.connectionStatusIcon.classList.add('status-connected'); - } else { - this.connectionStatusIcon.textContent = 'link_off'; - this.connectionStatusIcon.classList.remove('status-connected'); - this.connectionStatusIcon.classList.add('status-disconnected'); - } - } - - startHeartbeat() { - this.stopHeartbeat(); // Clear any existing interval - this.heartbeatInterval = setInterval(() => { - if (this.socket && this.socket.connected) { - this.socket.emit('heartbeat'); - this.idleTime += 30000; - if (this.idleTime >= this.maxConnectionIdleTime) { - this.socket.disconnect(); - this.setStatusMessage('Disconnected due to inactivity.'); - this.updateConnectionStatus(false); - this.stopHeartbeat(); - } - } - }, 30000); // Send a heartbeat every 30 seconds - } - - stopHeartbeat() { - if (this.heartbeatInterval) { - clearInterval(this.heartbeatInterval); - this.heartbeatInterval = null; - } - } - - updateProgress() { - if (!this.statusMessage.textContent) { - this.statusMessage.textContent = 'Processing...'; - } else { - this.statusMessage.textContent += '.'; // Append a dot - } - } - - clearProgress() { - this.statusMessage.textContent = ''; - this.toggleSendButton(false); // Re-enable and revert send button to outlined version - } - - checkTaskStatus(taskId) { - this.updateProgress(); - this.socket.emit('check_task_status', { task_id: taskId }); - } - - getTemplate() { - return ` -
-
-
Evie can make mistakes. Please double-check responses.
-
- -
- - send -
-
-
- link_off - -
-
- `; - } - - addUserMessage(text) { - const message = document.createElement('div'); - message.classList.add('message', 'user'); - message.innerHTML = `

${text}

`; - this.messagesArea.appendChild(message); - this.messagesArea.scrollTop = this.messagesArea.scrollHeight; - } - - handleFeedback(feedback, interactionId) { - // Send feedback to the backend - console.log('handleFeedback called'); - if (!this.socket) { - console.error('Socket is not initialized'); - return; - } - if (!this.jwtToken) { - console.error('JWT token is not available'); - return; - } - console.log('Sending message to backend'); - console.log(`Feedback for ${interactionId}: ${feedback}`); - this.socket.emit('feedback', { tenantId: this.tenantId, token: this.jwtToken, feedback, interactionId }); - this.setStatusMessage('Feedback sent.'); - } - - addBotMessage(text, interactionId, algorithm = 'default', citations = []) { - const message = document.createElement('div'); - message.classList.add('message', 'bot'); - - let content = marked.parse(text); - let citationsHtml = citations.map(url => `${url}`).join('
'); - - let algorithmClass; - switch (algorithm) { - case 'RAG_TENANT': - algorithmClass = 'fingerprint-rag-tenant'; - break; - case 'RAG_WIKIPEDIA': - algorithmClass = 'fingerprint-rag-wikipedia'; - break; - case 'RAG_GOOGLE': - algorithmClass = 'fingerprint-rag-google'; - break; - case 'LLM': - algorithmClass = 'fingerprint-llm'; - break; - default: - algorithmClass = ''; - } - - message.innerHTML = ` -

${content}

- ${citationsHtml ? `

${citationsHtml}

` : ''} -
- fingerprint - thumb_up_off_alt - thumb_down_off_alt -
- `; - this.messagesArea.appendChild(message); - - // Add event listeners for feedback buttons - const thumbsUp = message.querySelector('i[data-feedback="up"]'); - const thumbsDown = message.querySelector('i[data-feedback="down"]'); - thumbsUp.addEventListener('click', () => this.toggleFeedback(thumbsUp, thumbsDown, 'up', interactionId)); - thumbsDown.addEventListener('click', () => this.toggleFeedback(thumbsUp, thumbsDown, 'down', interactionId)); - - this.messagesArea.scrollTop = this.messagesArea.scrollHeight; - } - -toggleFeedback(thumbsUp, thumbsDown, feedback, interactionId) { - console.log('feedback called'); - this.idleTime = 0; // Reset idle time - if (feedback === 'up') { - thumbsUp.textContent = 'thumb_up'; // Change to filled icon - thumbsUp.classList.remove('outlined'); - thumbsUp.classList.add('filled'); - thumbsDown.textContent = 'thumb_down_off_alt'; // Keep the other icon outlined - thumbsDown.classList.add('outlined'); - thumbsDown.classList.remove('filled'); - } else { - thumbsDown.textContent = 'thumb_down'; // Change to filled icon - thumbsDown.classList.remove('outlined'); - thumbsDown.classList.add('filled'); - thumbsUp.textContent = 'thumb_up_off_alt'; // Keep the other icon outlined - thumbsUp.classList.add('outlined'); - thumbsUp.classList.remove('filled'); - } - - // Send feedback to the backend - this.handleFeedback(feedback, interactionId); - } - - handleSendMessage() { - console.log('handleSendMessage called'); - this.idleTime = 0; // Reset idle time - const message = this.questionInput.value.trim(); - if (message) { - this.addUserMessage(message); - this.questionInput.value = ''; - this.sendMessageToBackend(message); - this.toggleSendButton(true); // Disable and change send button to filled version - } - } - - sendMessageToBackend(message) { - console.log('sendMessageToBackend called'); - if (!this.socket) { - console.error('Socket is not initialized'); - return; - } - if (!this.jwtToken) { - 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: selectedLanguage, - timezone: this.userTimezone - }); - this.setStatusMessage('Processing started ...') - } - - toggleSendButton(isProcessing) { - if (isProcessing) { - this.sendButton.textContent = 'send'; // Filled send icon - this.sendButton.classList.remove('outlined'); - this.sendButton.classList.add('filled'); - this.sendButton.classList.add('disabled'); // Add disabled class for styling - this.sendButton.style.pointerEvents = 'none'; // Disable click events - } else { - this.sendButton.textContent = 'send'; // Outlined send icon - this.sendButton.classList.add('outlined'); - this.sendButton.classList.remove('filled'); - this.sendButton.classList.remove('disabled'); // Remove disabled class - this.sendButton.style.pointerEvents = 'auto'; // Re-enable click events - } - } -} - -customElements.define('eveai-chat-widget', EveAIChatWidget); - diff --git a/nginx/static/js/eveai-sdk.js b/nginx/static/js/eveai-sdk.js deleted file mode 100644 index 1e9ccb8..0000000 --- a/nginx/static/js/eveai-sdk.js +++ /dev/null @@ -1,29 +0,0 @@ -// static/js/eveai-sdk.js -class EveAI { - 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, language, languages }); - } - - initializeChat(containerId) { - const container = document.getElementById(containerId); - if (container) { - container.innerHTML = ''; - customElements.whenDefined('eveai-chat-widget').then(() => { - const chatWidget = container.querySelector('eveai-chat-widget'); - chatWidget.setAttribute('tenant-id', this.tenantId); - 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'); - } - } -} \ No newline at end of file