Files
eveAI/eveai_chat_client/templates/base.html
Josako fbc9f44ac8 - Translations completed for Front-End, Configs (e.g. Forms) and free text.
- Allowed_languages and default_language now part of Tenant Make iso Tenant
- Introduction of Translation into Traicie Selection Specialist
2025-06-30 14:20:17 +02:00

101 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}EveAI Chat{% endblock %}</title>
<!-- CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/language-selector.css') }}">
<!-- Vue.js (productie versie) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- Markdown parser for explanation text -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Translation support -->
<script src="{{ url_for('static', filename='assets/js/translation.js') }}"></script>
<!-- Custom theme colors from tenant settings -->
<style>
:root {
--primary-color: {{ customisation.primary_color|default('#007bff') }};
--secondary-color: {{ customisation.secondary_color|default('#6c757d') }};
--background-color: {{ customisation.background_color|default('#ffffff') }};
--text-color: {{ customisation.text_color|default('#212529') }};
--sidebar-color: {{ customisation.sidebar_color|default('#f8f9fa') }};
--sidebar-background: {{ customisation.sidebar_background|default('#2c3e50') }};
--gradient-start-color: {{ customisation.gradient_start_color|default('#f5f7fa') }};
--gradient-end-color: {{ customisation.gradient_end_color|default('#c3cfe2') }};
--markdown-background-color: {{ customisation.markdown_background_color|default('transparent') }};
--markdown-text-color: {{ customisation.markdown_text_color|default('#ffffff') }};
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<div id="app" class="app-container" data-vue-app="true">
<!-- Left sidebar - never changes -->
<div class="sidebar">
<div class="sidebar-logo">
<img src="{{ tenant_make.logo_url|default('') }}" alt="{{ tenant_make.name|default('Logo') }}">
</div>
<div class="sidebar-make-name">
{{ tenant_make.name|default('') }}
</div>
<div id="language-selector-container"></div>
<div class="sidebar-explanation" v-html="compiledExplanation"></div>
</div>
<!-- Right content area - contains the chat client -->
<div class="content-area">
<div class="chat-container">
{% block content %}{% endblock %}
</div>
</div>
</div>
<script>
// Maak ondersteunde talen beschikbaar voor de client
window.config = {
supportedLanguages: [
{% for lang_code in config.SUPPORTED_LANGUAGES %}
{
code: "{{ lang_code }}",
name: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['iso 639-1'] }}",
flag: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['flag'] }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
]
};
// Create Vue app and make it available globally
window.__vueApp = Vue.createApp({
data() {
return {
explanation: `{{ customisation.sidebar_markdown|default('') }}`
}
},
computed: {
compiledExplanation: function() {
// Handle different versions of the marked library
if (typeof marked === 'function') {
return marked(this.explanation);
} else if (marked && typeof marked.parse === 'function') {
return marked.parse(this.explanation);
} else {
console.error('Marked library not properly loaded');
return this.explanation; // Fallback to raw text
}
}
}
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>