- 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

eveai_chat_client/static/assets/css/chat.css

@@ -11,10 +11,85 @@
     --spacing: 16px;
 }
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+/* App container layout */
+.app-container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+/* Sidebar styling */
+.sidebar {
+    width: 300px;
+    background-color: var(--sidebar-background);
+    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;
+}
+
+/* Style lists in markdown content */
+.sidebar-explanation ul,
+.sidebar-explanation ol {
+    padding-left: 20px;
+    margin: 10px 0;
+}
+
+.sidebar-explanation li {
+    margin-bottom: 5px;
+}
+
+.sidebar-explanation ul li {
+    list-style-type: disc;
+}
+
+.sidebar-explanation ol li {
+    list-style-type: decimal;
+}
+
+.content-area {
+    flex: 1;
+    background: linear-gradient(135deg, var(--gradient-start-color), var(--gradient-end-color));
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
 }
 
 body {
@@ -35,11 +110,14 @@ body {
 .chat-container {
     display: flex;
     height: 100%;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
 }
 
 .sidebar {
     width: 280px;
-    background-color: var(--sidebar-color);
+    background-color: var(--sidebar-background);
     border-right: 1px solid rgba(0,0,0,0.1);
     display: flex;
     flex-direction: column;
@@ -98,6 +176,35 @@ body {
     border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
+/* Indicator voor taalwijziging */
+.language-change-indicator {
+    background-color: rgba(var(--primary-color-rgb, 0, 123, 255), 0.2);
+    color: white;
+    padding: 5px 8px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    text-align: center;
+    animation: fadeInOut 3s ease-in-out;
+}
+
+@keyframes fadeInOut {
+    0% { opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+.language-change-indicator.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.language-change-indicator.error {
+    background: #f8d7da;
+    color: #721c24;
+}
+
 /* .chat-messages wordt nu gedefinieerd in chat-components.css */
 
 /* .message wordt nu gedefinieerd in chat-components.css */
@@ -164,4 +271,4 @@ body {
 
 /* .btn-primary wordt nu gedefinieerd in chat-components.css */
 
-/* Responsieve design regels worden nu gedefinieerd in chat-components.css */
+/* Responsieve design regels worden nu gedefinieerd in chat-components.css */

eveai_chat_client/static/assets/css/language-selector.css

@@ -0,0 +1,50 @@
+/* Styling voor de taalselector */
+
+.sidebar-language-section {
+    padding: 10px 15px;
+    margin-bottom: 15px;
+}
+
+#language-selector-container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    margin: 10px 0;
+}
+
+#language-selector-container label {
+    margin-bottom: 5px;
+    color: var(--sidebar-color);
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.language-selector {
+    padding: 8px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.2);
+    color: var(--sidebar-color);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+}
+
+.language-selector:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.language-selector:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3);
+}
+
+.language-selector option {
+    background-color: #2c3e50;
+    color: white;
+    padding: 8px;
+}