- 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 %}

eveai_app/templates/macros.html

@@ -357,42 +357,47 @@
 </div>
 {% endmacro %}
 
-{% macro render_pagination(pagination, endpoint) %}
-<nav aria-label="Page navigation">
-  <ul class="pagination">
-    <!-- Previous Button -->
-    <li class="page-item {{ 'disabled' if not pagination.has_prev }}">
-      <a class="page-link" href="{{ url_for(endpoint, page=pagination.prev_num) if pagination.has_prev else 'javascript:;' }}" tabindex="-1">
-        <span class="material-symbols-outlined">keyboard_double_arrow_left</span>
-{#        <span class="sr-only">Previous</span>#}
-      </a>
-    </li>
-
-    <!-- Page Number Buttons -->
-    {% for page in pagination.iter_pages(left_edge=1, left_current=2, right_current=3, right_edge=1) %}
-      <li class="page-item {{ 'active' if page == pagination.page }}">
-        <a class="page-link" href="{{ url_for(endpoint, page=page) }}">
-          {% if page == pagination.page %}
-            <span class="material-symbols-outlined">target</span>
-{#            <span class="sr-only">(current)</span>#}
-          {% else %}
-            {{ page }}
-          {% endif %}
-        </a>
-      </li>
-    {% endfor %}
-
-    <!-- Next Button -->
-    <li class="page-item {{ 'disabled' if not pagination.has_next }}">
-      <a class="page-link" href="{{ url_for(endpoint, page=pagination.next_num) if pagination.has_next else 'javascript:;' }}">
-        <span class="material-symbols-outlined">keyboard_double_arrow_right</span>
+{#{% macro render_pagination(pagination, endpoint) %}#}
+{#<nav aria-label="Page navigation">#}
+{#  <ul class="pagination">#}
+{#    <!-- Previous Button -->#}
+{#    <li class="page-item {{ 'disabled' if not pagination.has_prev }}">#}
+{#      <a class="page-link" href="{{ url_for(endpoint, page=pagination.prev_num) if pagination.has_prev else 'javascript:;' }}" tabindex="-1">#}
+{#        <span class="material-symbols-outlined">keyboard_double_arrow_left</span>#}
+{#      </a>#}
+{#    </li>#}
+{##}
+{#    <!-- Page Number Buttons -->#}
+{#    {% for page in pagination.iter_pages(left_edge=1, left_current=2, right_current=3, right_edge=1) %}#}
+{#      <li class="page-item {{ 'active' if page == pagination.page }}">#}
+{#        <a class="page-link" href="{{ url_for(endpoint, page=page) }}">#}
+{#          {% if page == pagination.page %}#}
+{#            <span class="material-symbols-outlined">target</span>#}
+{#          {% else %}#}
+{#            {{ page }}#}
+{#          {% endif %}#}
+{#        </a>#}
+{#      </li>#}
+{#    {% endfor %}#}
+{##}
+{#    <!-- Next Button -->#}
+{#    <li class="page-item {{ 'disabled' if not pagination.has_next }}">#}
+{#      <a class="page-link" href="{{ url_for(endpoint, page=pagination.next_num) if pagination.has_next else 'javascript:;' }}">#}
+{#        <span class="material-symbols-outlined">keyboard_double_arrow_right</span>#}
 {#        <span class="sr-only">Next</span>#}
-      </a>
-    </li>
-  </ul>
-</nav>
+{#      </a>#}
+{#    </li>#}
+{#  </ul>#}
+{#</nav>#}
+{#{% endmacro %}#}
+
+{% macro render_pagination(pagination, endpoint) %}
+    {# Deze macro is een wrapper rond de globale get_pagination_html functie #}
+    {# Ondersteunt nu expliciet een session_id parameter #}
+    {{ get_pagination_html(pagination, endpoint) }}
 {% endmacro %}
 
+
 {% macro render_filter_field(field_name, label, options, current_value) %}
 <div class="form-group">
     <label for="{{ field_name }}">{{ label }}</label>

eveai_app/templates/scripts.html

@@ -17,6 +17,188 @@
         <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.css" rel="stylesheet" type="text/css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.js"></script>
 
+<script>
+window.EveAI = window.EveAI || {};
+
+// Centraal beheer van JSONEditor instanties
+window.EveAI.JsonEditors = {
+    instances: {},
+
+    // Initialiseer een nieuwe JSONEditor
+    initialize: function(containerId, data, options = {}) {
+        const container = document.getElementById(containerId);
+
+        if (!container) {
+            console.error(`Container with ID ${containerId} not found`);
+            return null;
+        }
+
+        if (this.instances[containerId]) {
+            console.log(`JSONEditor for ${containerId} already initialized`);
+            return this.instances[containerId];
+        }
+
+        // Bepaal of de editor in read-only modus moet worden weergegeven
+        const isReadOnly = options.readOnly === true;
+
+        // Standaard opties
+        const defaultOptions = {
+            mode: isReadOnly ? 'tree' : 'tree',  // Gebruik 'tree' voor read-only om expand/collapse te behouden
+            modes: isReadOnly ? ['tree', 'view'] : ['tree', 'code', 'view'], // Voeg 'tree' toe aan read-only modes
+            search: true,
+            navigationBar: false,
+            mainMenuBar: true,     // Behoud menubar voor expand/collapse knoppen
+            statusBar: !isReadOnly // Verberg alleen statusbar in read-only modus
+        };
+
+        // Als expliciet onEditable=false is ingesteld, zorg ervoor dat de editor read-only is
+        if (options.onEditable === false || options.onEditable && typeof options.onEditable === 'function') {
+            defaultOptions.onEditable = function() { return false; };
+        }
+
+        // Combineer standaard opties met aangepaste opties
+        const editorOptions = {...defaultOptions, ...options};
+
+        try {
+            const editor = new JSONEditor(container, editorOptions, data);
+            container.classList.add('jsoneditor-initialized');
+
+            // Voeg read-only klasse toe indien nodig
+            if (isReadOnly) {
+                container.classList.add('jsoneditor-readonly-mode');
+            } else {
+                container.classList.add('jsoneditor-edit-mode');
+            }
+
+            this.instances[containerId] = editor;
+            return editor;
+        } catch (e) {
+            console.error(`Error initializing JSONEditor for ${containerId}:`, e);
+            container.innerHTML = `<div class="alert alert-danger p-3">
+                <strong>Error loading JSON data:</strong><br>${e.message}
+            </div>`;
+            return null;
+        }
+    },
+
+    // Initialiseer een read-only JSONEditor (handige functie)
+    initializeReadOnly: function(containerId, data, additionalOptions = {}) {
+        const readOnlyOptions = {
+            readOnly: true,
+            mode: 'tree',          // Gebruik tree mode voor navigatie
+            modes: ['tree', 'view'], // Beperk tot tree en view
+            expandAll: true,       // Alles openklappen bij initialisatie
+            onEditable: function() { return false; }
+        };
+
+        // Combineer read-only opties met eventuele aanvullende opties
+        const options = {...readOnlyOptions, ...additionalOptions};
+
+        return this.initialize(containerId, data, options);
+    },
+
+    // Haal een bestaande instantie op of maak een nieuwe aan
+    get: function(containerId, data, options = {}) {
+        if (this.instances[containerId]) {
+            return this.instances[containerId];
+        }
+
+        return this.initialize(containerId, data, options);
+    },
+
+    // Verwijder een instantie
+    destroy: function(containerId) {
+        if (this.instances[containerId]) {
+            this.instances[containerId].destroy();
+            delete this.instances[containerId];
+
+            const container = document.getElementById(containerId);
+            if (container) {
+                container.classList.remove('jsoneditor-initialized');
+                container.classList.remove('jsoneditor-readonly-mode');
+                container.classList.remove('jsoneditor-edit-mode');
+            }
+        }
+    }
+};
+
+// Zoek en initialiseer standaard JSON editors bij DOMContentLoaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl)
+    });
+
+    // Initialiseer JSON editors voor tekstgebieden met de klasse 'json-editor'
+    document.querySelectorAll('.json-editor').forEach(function(textarea) {
+        // Controleer of er een bijbehorende container is
+        const containerId = textarea.id + '-editor';
+        const container = document.getElementById(containerId);
+
+        if (container) {
+            try {
+                // Parse de JSON-data uit het tekstgebied
+                const data = textarea.value ? JSON.parse(textarea.value) : {};
+
+                // Controleer of de editor in read-only modus moet worden getoond
+                const isReadOnly = textarea.readOnly || textarea.hasAttribute('readonly') ||
+                                   textarea.classList.contains('readonly');
+
+                // Bepaal de juiste editor-opties op basis van de read-only status
+                const editorOptions = {
+                    mode: isReadOnly ? 'tree' : 'code', // Gebruik tree voor read-only
+                    modes: isReadOnly ? ['tree', 'view'] : ['code', 'tree'],
+                    readOnly: isReadOnly,
+                    onEditable: function() { return !isReadOnly; },
+                    onChangeText: isReadOnly ? undefined : function(jsonString) {
+                        textarea.value = jsonString;
+                    }
+                };
+
+                // Initialiseer de editor
+                const editor = window.EveAI.JsonEditors.initialize(containerId, data, editorOptions);
+
+                // Voeg validatie toe als het een bewerkbare editor is
+                if (!isReadOnly && editor) {
+                    editor.validate().then(function(errors) {
+                        if (errors.length) {
+                            container.style.border = '2px solid red';
+                        } else {
+                            container.style.border = '1px solid #ccc';
+                        }
+                    });
+                }
+            } catch (e) {
+                console.error('Error parsing initial JSON:', e);
+                container.innerHTML = `<div class="alert alert-danger p-3">
+                    <strong>Error loading JSON data:</strong><br>${e.message}
+                </div>`;
+            }
+        }
+    });
+
+    // Initialiseer JSON editors voor containers met de klasse 'json-viewer' (alleen-lezen)
+    document.querySelectorAll('.json-viewer').forEach(function(container) {
+        const dataElement = document.getElementById(container.id + '-data');
+
+        if (dataElement) {
+            try {
+                // Parse de JSON-data
+                const data = dataElement.textContent ? JSON.parse(dataElement.textContent) : {};
+
+                // Initialiseer een read-only editor met tree-mode voor navigatie
+                window.EveAI.JsonEditors.initializeReadOnly(container.id, data);
+            } catch (e) {
+                console.error('Error parsing JSON for viewer:', e);
+                container.innerHTML = `<div class="alert alert-danger p-3">
+                    <strong>Error loading JSON data:</strong><br>${e.message}
+                </div>`;
+            }
+        }
+    });
+});
+</script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize tooltips
@@ -156,6 +338,24 @@ function validateTableSelection(formId) {
     return true;
 }
 </script>
+<script>
+$(document).ready(function() {
+  // Maak tabelrijen klikbaar (voor tabellen met radio-buttons)
+  $(document).on('click', 'table tbody tr', function(e) {
+    // Voorkom dat dit gedrag optreedt als er direct op de radio-button of een link wordt geklikt
+    if (!$(e.target).is('input[type="radio"], a')) {
+      // Vind de radio-button in deze rij
+      const radio = $(this).find('input[type="radio"]');
+      // Selecteer de radio-button
+      radio.prop('checked', true);
+      // Voeg visuele feedback toe voor de gebruiker
+      $('table tbody tr').removeClass('table-active');
+      $(this).addClass('table-active');
+    }
+  });
+});
+</script>
+
 <style>
 .json-editor-container {
     height: 400px;