5f1a5711f6
- Accompanying css - Views to serve the Chat Client - first test version of the TRACIE_SELECTION_SPECIALIST - ESS Implemented.
158 lines
5.1 KiB
HTML
158 lines
5.1 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') }}">
|
|
|
|
<!-- Vue.js -->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
|
<!-- Markdown parser for explanation text -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.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') }};
|
|
}
|
|
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.app-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 300px;
|
|
background-color: var(--sidebar-background);
|
|
color: white;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sidebar-logo img {
|
|
max-width: 100%;
|
|
max-height: 100px;
|
|
}
|
|
|
|
.sidebar-make-name {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-explanation {
|
|
margin-top: 20px;
|
|
overflow-y: auto;
|
|
background-color: var(--markdown-background-color);
|
|
color: var(--markdown-text-color);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Ensure all elements in the markdown content inherit the text color */
|
|
.sidebar-explanation * {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Style links in the markdown content */
|
|
.sidebar-explanation a {
|
|
color: var(--primary-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
background: linear-gradient(135deg, var(--gradient-start-color), var(--gradient-end-color));
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
</style>
|
|
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app-container">
|
|
<!-- 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 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>
|
|
// 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>
|