pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Change TRAICIE_VACANCY_DEFINTION_SPECIALIST to TRAICIE_ROLE_DEFINITION_SPECIALIST

Browse Source 
- Introduce new vanilla-jsoneditor iso older jsoneditor (for viewing a.o. ChatSessions)
- Introduce use of npm to install required javascript libraries
- update Material-kit-pro
- Introduce new top bar to show session defaults, remove old navbar buttons
- Correct Task & Tools editor
This commit is contained in:
Josako
2025-05-27 17:37:32 +02:00
parent 1fdbd2ff45
commit 5123de55cc
1041 changed files with 4480 additions and 292099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
eveai_app/templates/base.html
View File

@@ -4,6 +4,7 @@
{% include 'head.html' %}
<body class="presentation-page bg-gray-200">
{% include 'session_defaults.html' %}
{% include 'navbar.html' %}
{% include 'header.html' %}
<hr>

130
eveai_app/templates/eveai_json_editor.html Normal file
View File

@@ -0,0 +1,130 @@
<script type="module">
window.EveAI = window.EveAI || {};
window.EveAI.JsonEditors = {
instances: {},
initialize: function(containerId, data, options = {}) {
console.log('Initializing JSONEditor for', containerId, 'with data', data, 'and options', options);
const container = document.getElementById(containerId);
if (!container || typeof container !== 'object' || !('classList' in container)) {
console.error(`Container met ID ${containerId} niet gevonden of geen geldig element:`, container);
return null;
}
if (!container) {
console.error(`Container with ID ${containerId} not found`);
return null;
}
if (this.instances[containerId]) return this.instances[containerId];
if (typeof window.createJSONEditor !== 'function') {
console.error('vanilla-jsoneditor not loaded (window.createJSONEditor missing).');
container.innerHTML = `<div class="alert alert-danger p-3">
<strong>Error:</strong> vanilla-jsoneditor not loaded
</div>`;
return null;
}
const isReadOnly = options.readOnly === true;
let content = {
{#text: undefined,#}
json: data
}
// props voor vanilla-jsoneditor
const editorProps = {
content: content,
mode: options.mode || (isReadOnly ? "text" : "tree"),
readOnly: isReadOnly,
mainMenuBar: options.mainMenuBar !== undefined ? options.mainMenuBar : true,
navigationBar: options.navigationBar !== undefined ? options.navigationBar : false,
statusBar: options.statusBar !== undefined ? options.statusBar : !isReadOnly,
onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
// content is an object { json: unknown } | { text: string }
console.log('onChange', { updatedContent, previousContent, contentErrors, patchResult })
}
};
console.log('EditorProps', editorProps);
let editor;
try {
console.log('Creating JSONEditor for', containerId);
editor = window.createJSONEditor({
target: container,
props: editorProps
}
);
console.log('JSONEditor created for ', containerId);
container.classList.add('jsoneditor-initialized', isReadOnly ? 'jsoneditor-readonly-mode' : 'jsoneditor-edit-mode');
console.log('Container class set for ', containerId);
this.instances[containerId] = editor;
console.log('JSONEditor instance stored for ', containerId);
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;
}
},
initializeReadOnly: function(containerId, data, additionalOptions = {}) {
const options = Object.assign({ readOnly: true, mode: 'text' }, additionalOptions);
const editor = this.initialize(containerId, data, options);
if (editor && additionalOptions.expandAll && typeof editor.expand === "function") {
try { editor.expand(() => true); } catch {}
}
return editor;
},
get: function(containerId) {
return this.instances[containerId] || null;
},
destroy: function(containerId) {
if (this.instances[containerId]) {
if (typeof this.instances[containerId].destroy === 'function') this.instances[containerId].destroy();
delete this.instances[containerId];
}
const container = document.getElementById(containerId);
if (container) {
container.classList.remove('jsoneditor-initialized', 'jsoneditor-readonly-mode', 'jsoneditor-edit-mode');
container.innerHTML = '';
}
}
};
document.addEventListener('DOMContentLoaded', function() {
// Tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(trigger => new bootstrap.Tooltip(trigger));
// Textarea->json editor conversies
document.querySelectorAll('.json-editor').forEach(function(textarea) {
const containerId = textarea.id + '-editor';
const container = document.getElementById(containerId);
if (!container) return;
try {
const data = textarea.value ? JSON.parse(textarea.value) : {};
const isReadOnly = textarea.readOnly || textarea.hasAttribute('readonly') || textarea.classList.contains('readonly');
window.EveAI.JsonEditors.initialize(containerId, data, {
mode: isReadOnly ? 'preview' : 'tree',
readOnly: isReadOnly,
onChangeText: isReadOnly ? undefined : (jsonString) => { textarea.value = jsonString; }
});
} catch (e) {
console.error('Error parsing initial JSON for .json-editor:', e);
container.innerHTML = `<div class="alert alert-danger p-3"><strong>Error loading JSON data:</strong><br>${e.message}</div>`;
}
});
// Alleen-lezen containers
document.querySelectorAll('.json-viewer').forEach(function(container) {
const dataElement = document.getElementById(container.id + '-data');
if (!dataElement) return;
try {
const data = dataElement.textContent ? JSON.parse(dataElement.textContent) : {};
window.EveAI.JsonEditors.initializeReadOnly(container.id, data, { expandAll: true });
} catch (e) {
console.error('Error parsing JSON for .json-viewer:', e);
container.innerHTML = `<div class="alert alert-danger p-3"><strong>Error loading JSON data:</strong><br>${e.message}</div>`;
}
});
});
</script>

2
eveai_app/templates/head.html
View File

@@ -12,7 +12,7 @@
<link href="{{url_for('static', filename='assets/css/nucleo-icons.css" rel="stylesheet')}}" />
<link href="{{url_for('static', filename='assets/css/nucleo-svg.css" rel="stylesheet')}}" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

4
eveai_app/templates/header.html
View File

@@ -4,8 +4,8 @@
<div class="container">
<div class="row">
<div class="col-lg-7 text-center mx-auto">
<h1 class="text-white pt-3 mt-n5">EveAI Virtual Assistant</h1>
<p class="lead text-white mt-3 px-5">Enhance Customer Interaction with AI</p>
<h1 class="text-white pt-3 mt-n5">Ask Eve AI</h1>
<h2 class="lead text-white mt-3 px-5">Humanize Information Access</h2>
</div>
</div>
</div>

1
eveai_app/templates/interaction/components/edit_task.html Normal file
View File

@@ -0,0 +1 @@
{% extends "interaction/component.html" %}

1
eveai_app/templates/interaction/components/edit_tool.html Normal file
View File

@@ -0,0 +1 @@
{% extends "interaction/component.html" %}

38
eveai_app/templates/interaction/view_chat_session.html
View File

@@ -93,42 +93,4 @@
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// 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 %}

18
eveai_app/templates/navbar.html
View File

@@ -128,24 +128,6 @@
]) }}
{% endif %}
</ul>
{% if current_user.is_authenticated %}
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="/session_defaults" class="btn btn-sm bg-gradient-primary mb-0">
{% if 'tenant' in session %}
TENANT {{ session['tenant'].get('id', 'None') }}: {{ session['tenant'].get('name', 'None') }}
{% endif %}
</a>
</li>
{% if 'partner' in session %}
<li class="nav-item mt-2">
<a href="/session_defaults" class="btn btn-sm bg-gradient-success mb-0">
PARTNER {{ session['partner'].get('id', 'None') }}: {{ session['partner'].get('name', 'None') }}
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</nav>

270
eveai_app/templates/scripts.html
View File

@@ -1,204 +1,15 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/perfect-scrollbar.min.js"></script>
<script src="{{url_for('static', filename='assets/js/plugins/typedjs.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/prism.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/highlight.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/parallax.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/nouislider.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/anime.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}?v=3.0.4 type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<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>
# dist/main.js contains all used javascript libraries
<script src="{{url_for('static', filename='dist/main.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/typedjs.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/prism.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/highlight.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/parallax.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/nouislider.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/plugins/anime.min.js')}}"></script>
<script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}"></script>
<script>
window.EveAI = window.EveAI || {};
{% include 'eveai_json_editor.html' %}
// 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
@@ -207,38 +18,8 @@ document.addEventListener('DOMContentLoaded', function() {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
// Initialize JSON editors
document.querySelectorAll('.json-editor').forEach(function(textarea) {
// Create container for editor
var container = document.getElementById(textarea.id + '-editor');
// Initialize the editor
var editor = new JSONEditor(container, {
mode: 'code',
modes: ['code', 'tree'],
onChangeText: function(jsonString) {
textarea.value = jsonString;
}
});
// Set initial value
try {
const initialValue = textarea.value ? JSON.parse(textarea.value) : {};
editor.set(initialValue);
} catch (e) {
console.error('Error parsing initial JSON:', e);
editor.set({});
}
// Add validation indicator
editor.validate().then(function(errors) {
if (errors.length) {
container.style.border = '2px solid red';
} else {
container.style.border = '1px solid #ccc';
}
});
});
// De JSON editor initialisatie is hierboven al samengevoegd.
// Deze dubbele DOMContentLoaded listener en .json-editor initialisatie kan verwijderd worden.
});
</script>
<script>
@@ -364,4 +145,31 @@ $(document).ready(function() {
.tooltip {
position: fixed;
}
/* Voeg CSS toe voor vanilla-jsoneditor */
/* Je kunt het thema aanpassen of de standaardstijlen gebruiken */
/* @import 'vanilla-jsoneditor/themes/jse-theme-dark.css'; */
/* Of importeer de basisstijlen */
/* @import 'vanilla-jsoneditor/dist/vanilla-jsoneditor.css'; */
/* Als je de CSS via een link tag wilt toevoegen: */
/* <link href="path/to/vanilla-jsoneditor.min.css" rel="stylesheet"> */
/* <link href="path/to/jse-theme-dark.css" rel="stylesheet"> (optioneel thema) */
/* Zorg ervoor dat de container de juiste hoogte heeft, de editor neemt de hoogte van de container over */
.json-viewer, .json-editor-container /* Pas dit aan je HTML structuur aan indien nodig */ {
height: 300px; /* Of de gewenste hoogte */
width: 100%;
}
/* Voeg styling toe om de vanilla-jsoneditor eruit te laten zien als de oude, indien gewenst */
.jsoneditor-readonly-mode .jse-main-menu,
.jsoneditor-readonly-mode .jse-status-bar {
/* Verberg menu en statusbalk in read-only modus indien gewenst */
/* display: none; */
}
.jse-read-only {
/* Standaard read-only styling van vanilla-jsoneditor */
}
</style>

73
eveai_app/templates/session_defaults.html Normal file
View File

@@ -0,0 +1,73 @@
<div class="container-fluid position-relative z-index-2 px-0 py-2 bg-gradient-light">
<div class="container">
<div class="row align-items-center">
{% if current_user.is_authenticated %}
{% if current_user.has_roles('Super User', 'Partner Admin') %}
<!-- Partner information (links) - alleen voor Super User en Partner Admin -->
<div class="col-md-4 d-flex align-items-center">
<span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
partner_exchange
</span>
<div>
<small>
{% if 'partner' in session and session['partner'] %}
{{ session['partner'].get('id', 'Not selected') }}: {{ session['partner'].get('name', 'None') }}
{% else %}
No partner selected
{% endif %}
</small>
</div>
</div>
<!-- Tenant information (centraal) - voor Super User en Partner Admin -->
<div class="col-md-4 d-flex align-items-center justify-content-center">
<span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
source_environment
</span>
<div>
<small>
{% if 'tenant' in session and session['tenant'] %}
{{ session['tenant'].get('id', 'Not selected') }}: {{ session['tenant'].get('name', 'None') }}
{% else %}
No tenant selected
{% endif %}
</small>
</div>
</div>
{% else %}
<!-- Tenant information (links) - voor andere gebruikers -->
<div class="col-md-6 d-flex align-items-center">
<span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
source_environment
</span>
<div>
<small>
{% if 'tenant' in session and session['tenant'] %}
{{ session['tenant'].get('id', 'Not selected') }}: {{ session['tenant'].get('name', 'None') }}
{% else %}
No tenant selected
{% endif %}
</small>
</div>
</div>
{% endif %}
<!-- Catalog information (rechts) -->
<div class="{% if current_user.has_roles('Super User', 'Partner Admin') %}col-md-4{% else %}col-md-6{% endif %} d-flex align-items-center justify-content-end">
<span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
note_stack
</span>
<div>
<small>
{% if 'catalog_id' in session and session['catalog_id'] %}
{{ session.get('catalog_id', 'Not selected') }}: {{ session.get('catalog_name', 'None') }}
{% else %}
No catalog selected
{% endif %}
</small>
</div>
</div>
{% endif %}
</div>
</div>
</div>