- Move global config files to globals iso global folder, as the name global conflicts with python language

- Creation of Traicie Vancancy Definition specialist
- Allow to invoke non-interaction specialists from withing Evie's mgmt interface (eveai_app)
- Improvements to crewai specialized classes
- Introduction to json editor for showing specialists arguments and results in a better way
- Introduction of more complex pagination (adding extra arguments) by adding a global 'get_pagination_html'
- Allow follow-up of ChatSession / Specialist execution
- Improvement in logging of Specialists (but needs to be finished)

eveai_app/templates/interaction/chat_sessions.html

@@ -14,6 +14,7 @@
         <div class="form-group mt-3 d-flex justify-content-between">
             <div>
                 <button type="submit" name="action" value="view_chat_session" class="btn btn-primary" onclick="return validateTableSelection('chatSessionsForm')">View Chat Session</button>
+                <button type="submit" name="action" value="chat_session_interactions" class="btn btn-primary" onclick="return validateTableSelection('chatSessionsForm')">View Chat Session interactions</button>
             </div>
         </div>
     </form>

eveai_app/templates/interaction/edit_specialist.html

@@ -84,7 +84,7 @@
                                     <div class="card">
                                         <div class="card-body">
                                             {{ render_selectable_table(
-                                                headers=["Agent ID", "Name", "Type", "Status"],
+                                                headers=["Agent ID", "Name", "Type", "Type Version"],
                                                 rows=agent_rows if agent_rows else [],
                                                 selectable=True,
                                                 id="agentsTable",
@@ -105,7 +105,7 @@
                                     <div class="card">
                                         <div class="card-body">
                                             {{ render_selectable_table(
-                                                headers=["Task ID", "Name", "Type", "Status"],
+                                                headers=["Task ID", "Name", "Type", "Type Version"],
                                                 rows=task_rows if task_rows else [],
                                                 selectable=True,
                                                 id="tasksTable",
@@ -126,7 +126,7 @@
                                     <div class="card">
                                         <div class="card-body">
                                             {{ render_selectable_table(
-                                                headers=["Tool ID", "Name", "Type", "Status"],
+                                                headers=["Tool ID", "Name", "Type", "Type Version"],
                                                 rows=tool_rows if tool_rows else [],
                                                 selectable=True,
                                                 id="toolsTable",

eveai_app/templates/interaction/execute_specialist.html

@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+{% from "macros.html" import render_field %}
+
+{% block title %}Execute Specialist{% endblock %}
+
+{% block content_title %}Execute Specialist{% endblock %}
+{% block content_description %}Execute a Specialist{% endblock %}
+
+{% block content %}
+    <form method="post">
+        {{ form.hidden_tag() }}
+        {%  set disabled_fields = [] %}
+        {%  set exclude_fields = [] %}
+        {% for field in form %}
+            {{ render_field(field, disabled_fields, exclude_fields) }}
+        {% endfor %}
+        <button type="submit" class="btn btn-primary">Execute Specialist</button>
+    </form>
+{% endblock %}
+
+{% block content_footer %}
+
+{% endblock %}

eveai_app/templates/interaction/session_interactions.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{%  from 'macros.html' import render_selectable_table, render_pagination %}
+
+{% block title %}Chat Sessions Interactions{% endblock %}
+
+{% block content_title %}Chat Sessions{% endblock %}
+{% block content_description %}View Chat Sessions for Tenant{% endblock %}
+{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}
+
+{% block content %}
+<div class="container">
+    <form method="POST" action="{{ url_for('interaction_bp.handle_chat_session_selection') }}" id="chatSessionsForm">
+        {{ render_selectable_table(headers=["ID", "Question At", "Detailed Question At", "Answer At", "Processing Error"], rows=rows, selectable=False, id="interactionsTable") }}
+{#        <div class="form-group mt-3 d-flex justify-content-between">#}
+{#            <div>#}
+{#                <button type="submit" name="action" value="view_chat_session" class="btn btn-primary" onclick="return validateTableSelection('chatSessionsForm')">View Chat Session</button>#}
+{#            </div>#}
+{#        </div>#}
+    </form>
+</div>
+{% endblock %}
+
+{% block content_footer %}
+    {{ get_pagination_html(pagination, 'interaction_bp.session_interactions_by_session_id', session_id=chat_session.session_id) }}
+{% endblock %}

eveai_app/templates/interaction/specialist_execution_status.html

@@ -0,0 +1,192 @@
+{% extends "base.html" %}
+
+{% block title %}Specialist Execution Status{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h4>Specialist Execution Status</h4>
+                    {% if specialist %}
+                    <span class="badge bg-primary">{{ specialist.name }}</span>
+                    {% endif %}
+                </div>
+                <div class="card-body">
+                    <div class="progress mb-4">
+                        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
+                    </div>
+
+                    <div class="mb-4">
+                        <h5>Current Status:</h5>
+                        <div id="current-status" class="alert alert-info">Execution starting...</div>
+                    </div>
+
+                    <div class="mb-4">
+                        <h5>Execution Log:</h5>
+                        <div id="execution-log" class="border p-3 bg-light" style="max-height: 300px; overflow-y: auto;">
+                            <div class="text-muted">Waiting for updates...</div>
+                        </div>
+                    </div>
+
+                    <div id="completion-actions" class="d-none">
+                        <hr>
+                        <h5>Execution Completed</h5>
+                        <p>The specialist has completed processing.</p>
+                        <a id="view-results-btn" href="{{ prefixed_url_for('interaction_bp.view_chat_session_by_session_id', session_id=chat_session_id) }}" class="btn btn-primary">View Results</a>
+                        <a href="{{ prefixed_url_for('interaction_bp.specialists') }}" class="btn btn-secondary">Back to Specialists</a>
+                    </div>
+
+                    <div id="error-actions" class="d-none">
+                        <hr>
+                        <h5>Error Occurred</h5>
+                        <p>An error occurred during specialist execution.</p>
+                        <div id="error-details" class="alert alert-danger"></div>
+                        <a href="{{ prefixed_url_for('interaction_bp.specialists') }}" class="btn btn-secondary">Back to Specialists</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const taskId = "{{ task_id }}";
+        const executionLog = document.getElementById('execution-log');
+        const currentStatus = document.getElementById('current-status');
+        const progressBar = document.getElementById('progress-bar');
+        const completionActions = document.getElementById('completion-actions');
+        const errorActions = document.getElementById('error-actions');
+        const errorDetails = document.getElementById('error-details');
+
+        let logEntries = [];
+        let isComplete = false;
+
+        // Connect to the SSE stream
+        const eventSource = new EventSource("{{ prefixed_url_for('interaction_bp.specialist_execution_updates', task_id=task_id) }}");
+
+        // General data handler
+        eventSource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            addLogEntry(data);
+            updateStatus(data);
+        };
+
+        // Specific event handlers
+        eventSource.addEventListener('Task Started', function(event) {
+            const data = JSON.parse(event.data);
+            progressBar.style.width = '10%';
+            currentStatus.textContent = 'Task started: ' + data.data.message;
+            currentStatus.className = 'alert alert-info';
+        });
+
+        eventSource.addEventListener('Task Progress', function(event) {
+            const data = JSON.parse(event.data);
+            // Update progress percentage if available
+            if (data.data.percentage) {
+                progressBar.style.width = data.data.percentage + '%';
+            } else {
+                // Incremental progress if no percentage available
+                const currentWidth = parseInt(progressBar.style.width) || 0;
+                progressBar.style.width = Math.min(currentWidth + 5, 90) + '%';
+            }
+        });
+
+        eventSource.addEventListener('Task Complete', function(event) {
+            const data = JSON.parse(event.data);
+            progressBar.style.width = '100%';
+            progressBar.className = 'progress-bar bg-success';
+            currentStatus.textContent = 'Processing completed: ' + data.data.message;
+            currentStatus.className = 'alert alert-success';
+            completionActions.classList.remove('d-none');
+            isComplete = true;
+            eventSource.close();
+        });
+
+        eventSource.addEventListener('Task Error', function(event) {
+            const data = JSON.parse(event.data);
+            progressBar.className = 'progress-bar bg-danger';
+            currentStatus.textContent = 'Error occurred';
+            currentStatus.className = 'alert alert-danger';
+            errorDetails.textContent = data.data.error;
+            errorActions.classList.remove('d-none');
+            eventSource.close();
+        });
+
+        eventSource.addEventListener('EveAI Specialist Complete', function(event) {
+            const data = JSON.parse(event.data);
+            progressBar.style.width = '100%';
+            progressBar.className = 'progress-bar bg-success';
+            currentStatus.textContent = 'Specialist processing completed';
+            currentStatus.className = 'alert alert-success';
+            completionActions.classList.remove('d-none');
+            isComplete = true;
+            eventSource.close();
+        });
+
+        eventSource.onerror = function(event) {
+            // Only report an error if the task is not already completed
+            if (!isComplete) {
+                currentStatus.textContent = 'Connection to server lost';
+                currentStatus.className = 'alert alert-warning';
+                errorDetails.textContent = 'The connection to the server was lost. The task may still be running.';
+                errorActions.classList.remove('d-none');
+            }
+        };
+
+        function addLogEntry(data) {
+            const timestamp = new Date(data.timestamp).toLocaleTimeString();
+            const message = data.data.message || JSON.stringify(data.data);
+            const type = data.processing_type;
+
+            // Add the log entry to the array
+            logEntries.push({timestamp, message, type});
+
+            // Limit to last 100 entries
+            if (logEntries.length > 100) {
+                logEntries.shift();
+            }
+
+            // Refresh the log element
+            renderLog();
+        }
+
+        function renderLog() {
+            executionLog.innerHTML = '';
+
+            logEntries.forEach(entry => {
+                const entryElement = document.createElement('div');
+                entryElement.className = 'log-entry mb-1';
+
+                // Determine the appropriate badge color based on type
+                let badgeClass = 'bg-secondary';
+                if (entry.type === 'Task Started') badgeClass = 'bg-primary';
+                if (entry.type === 'Task Progress') badgeClass = 'bg-info';
+                if (entry.type === 'Task Complete' || entry.type === 'EveAI Specialist Complete') badgeClass = 'bg-success';
+                if (entry.type === 'Task Error') badgeClass = 'bg-danger';
+
+                entryElement.innerHTML = `
+                    <span class="badge ${badgeClass}">${entry.timestamp}</span>
+                    <span class="ms-2">${entry.message}</span>
+                `;
+
+                executionLog.appendChild(entryElement);
+            });
+
+            // Scroll to bottom
+            executionLog.scrollTop = executionLog.scrollHeight;
+        }
+
+        function updateStatus(data) {
+            // Update the current status with the latest information
+            if (data.data.message) {
+                currentStatus.textContent = data.data.message;
+            }
+        }
+    });
+</script>
+{% endblock %}

eveai_app/templates/interaction/specialists.html

@@ -14,6 +14,7 @@
         <div class="form-group mt-3 d-flex justify-content-between">
             <div>
                 <button type="submit" name="action" value="edit_specialist" class="btn btn-primary" onclick="return validateTableSelection('specialistsForm')">Edit Specialist</button>
+                <button type="submit" name="action" value="execute_specialist" class="btn btn-primary" onclick="return validateTableSelection('specialistsForm')">Execute Specialist</button>
             </div>
             <button type="submit" name="action" value="create_specialist" class="btn btn-success">Register Specialist</button>
         </div>

eveai_app/templates/interaction/view_chat_session.html

@@ -50,19 +50,18 @@
                     {% if specialist_arguments %}
                     <div class="mb-4">
                         <h6 class="mb-3">Specialist Arguments:</h6>
-                        <div class="code-wrapper">
-                            <pre><code class="language-json" style="width: 100%;">{{ specialist_arguments | tojson(indent=2) }}</code></pre>
-                        </div>
+                        <div id="args-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
+                        <div id="args-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_arguments | tojson(indent=2) }}</div>
                     </div>
                     {% endif %}
 
+
                     <!-- Results Section -->
                     {% if specialist_results %}
                     <div class="mb-4">
                         <h6 class="mb-3">Specialist Results:</h6>
-                        <div class="code-wrapper">
-                            <pre><code class="language-json" style="width: 100%;">{{ specialist_results | tojson(indent=2) }}</code></pre>
-                        </div>
+                        <div id="results-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
+                        <div id="results-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_results | tojson(indent=2) }}</div>
                     </div>
                     {% endif %}
 
@@ -94,167 +93,42 @@
     </div>
 </div>
 {% endblock %}
-
-{% block styles %}
-{{ super() }}
-<style>
-    .interaction-header {
-        font-size: 0.9rem;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        padding: 0.5rem 0;
-    }
-
-    .interaction-metadata {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-        margin-bottom: 0.5rem;
-    }
-
-    .interaction-time {
-        font-size: 0.9rem;
-    }
-
-    .specialist-info {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-    }
-
-    .interaction-question {
-        font-size: 0.9rem;
-        font-weight: bold;
-        line-height: 1.4;
-    }
-
-    .badge {
-        font-size: 0.9rem;
-        padding: 0.35em 0.65em;
-        white-space: nowrap;
-    }
-
-    .accordion-button {
-        padding: 0.5rem 1rem;
-    }
-
-    .accordion-button::after {
-        margin-left: 1rem;
-    }
-
-    .json-display {
-        background-color: #f8f9fa;
-        border-radius: 4px;
-        padding: 15px;
-        margin: 0;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        font-family: monospace;
-        font-size: 0.85rem;
-        line-height: 1.5;
-        max-width: 100%;
-        overflow-x: auto;
-    }
-
-    .list-group-item {
-        font-size: 0.9rem;
-    }
-
-    .material-icons {
-        font-size: 1.1rem;
-    }
-
-    pre {
-        margin: 0;
-        padding: 0;
-        white-space: pre-wrap !important;       /* Force wrapping */
-        word-wrap: break-word !important;       /* Break long words if necessary */
-        max-width: 100%;                        /* Ensure container doesn't overflow */
-    }
-
-    pre, code {
-        margin: 0;
-        padding: 0;
-        white-space: pre-wrap !important;       /* Force wrapping */
-        word-wrap: break-word !important;       /* Break long words if necessary */
-        max-width: 100%;                        /* Ensure container doesn't overflow */
-    }
-
-    pre code {
-        padding: 1rem !important;
-        border-radius: 4px;
-        font-size: 0.75rem;
-        line-height: 1.5;
-        white-space: pre-wrap !important;       /* Force wrapping in code block */
-    }
-
-    .code-wrapper {
-        position: relative;
-        width: 100%;
-    }
-
-    /* Override all possible highlight.js white-space settings */
-    .code-wrapper pre,
-    .code-wrapper pre code,
-    .code-wrapper pre code.hljs,
-    .code-wrapper .hljs {
-        white-space: pre-wrap !important;
-        overflow-wrap: break-word !important;
-        word-wrap: break-word !important;
-        word-break: break-word !important;
-        max-width: 100% !important;
-        overflow-x: hidden !important;
-    }
-
-    .code-wrapper pre {
-        margin: 0;
-        background: #f8f9fa;
-        border-radius: 4px;
-    }
-
-    .code-wrapper pre code {
-        padding: 1rem !important;
-        font-family: monospace;
-        font-size: 0.9rem;
-        line-height: 1.5;
-        display: block;
-    }
-
-    /* Override highlight.js default nowrap behavior */
-    .hljs {
-        background: #f8f9fa !important;
-        white-space: pre-wrap !important;
-        word-wrap: break-word !important;
-    }
-
-    /* Color theme */
-    .hljs-string {
-        color: #0a3069 !important;
-    }
-
-    .hljs-attr {
-        color: #953800 !important;
-    }
-
-    .hljs-number {
-        color: #116329 !important;
-    }
-
-    .hljs-boolean {
-        color: #0550ae !important;
-    }
-</style>
-{% endblock %}
-
 {% block scripts %}
-{{ super() }}
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize syntax highlighting
-    document.querySelectorAll('pre code').forEach((block) => {
-        hljs.highlightElement(block);
+    // JSONEditor initialiseren wanneer een accordion item wordt geopend
+    const accordionButtons = document.querySelectorAll('.accordion-button');
+
+    accordionButtons.forEach(function(button, index) {
+        button.addEventListener('click', function() {
+            // Voeg een kleine vertraging toe om te zorgen dat de accordion volledig is geopend
+            setTimeout(function() {
+                const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+                if (isExpanded) {
+                    // Als de json-viewer class niet wordt gebruikt, handmatige initialisatie
+                    const loopIndex = index + 1;
+
+                    // Controleer of er elementen zijn die niet automatisch zijn geïnitialiseerd
+                    // Dit is een backup voor het geval de automatische initialisatie niet werkt
+                    const containers = document.querySelectorAll(`#collapse${loopIndex} .json-editor-container`);
+                    containers.forEach(function(container) {
+                        if (!container.classList.contains('jsoneditor-initialized')) {
+                            const dataElement = document.getElementById(`${container.id}-data`);
+                            if (dataElement) {
+                                try {
+                                    const jsonData = JSON.parse(dataElement.value || dataElement.textContent);
+                                    window.EveAI.JsonEditors.initializeReadOnly(container.id, jsonData);
+                                } catch (e) {
+                                    console.error(`Error parsing JSON for ${container.id}:`, e);
+                                }
+                            }
+                        }
+                    });
+                }
+            }, 300);
+        });
     });
 });
 </script>
-{% endblock %}
+{% endblock %}

eveai_app/templates/interaction/waiting_for_session.html

@@ -0,0 +1,42 @@
+
+{% extends 'base.html' %}
+
+{% block title %}Waiting for Chat Session{% endblock %}
+
+{% block content_title %}Chat Session Being Created{% endblock %}
+{% block content_description %}Please wait...{% endblock %}
+{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}
+
+{% block extra_head %}
+<meta http-equiv="refresh" content="2;url={{ refresh_url }}">
+<style>
+    .spinner {
+        width: 40px;
+        height: 40px;
+        margin: 30px auto;
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+        border-top: 4px solid #3498db;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container text-center">
+    <div class="card">
+        <div class="card-body">
+            <h4 class="card-title">Chat Session is being created</h4>
+            <div class="spinner"></div>
+            <p class="mt-3">The specialist is being executed and the chat session is being created.</p>
+            <p>Session ID: <code>{{ session_id }}</code></p>
+            <p>This page will automatically refresh every 2 seconds...</p>
+        </div>
+    </div>
+</div>
+{% endblock %}