- iconManager MaterialIconManager.js zijn nu 'unified' in 1 component, en samen met translation utilities omgezet naar een meer moderne Vue composable

- De sidebar is nu eveneens omgezet naar een Vue component.

eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue

@@ -0,0 +1,129 @@
+<!-- SideBarExplanation.vue -->
+<template>
+  <div class="sidebar-explanation">
+    <div 
+      v-if="isLoading" 
+      class="explanation-loading"
+    >
+      🔄 Translating...
+    </div>
+    <div 
+      v-else
+      class="explanation-content"
+      v-html="renderedExplanation"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useTranslationClient } from '../js/composables/useTranslation.js';
+
+const props = defineProps({
+  originalText: {
+    type: String,
+    default: ''
+  },
+  currentLanguage: {
+    type: String,
+    default: 'nl'
+  },
+  apiPrefix: {
+    type: String,
+    default: ''
+  }
+});
+
+const { translateSafe } = useTranslationClient();
+const translatedText = ref(props.originalText);
+const isLoading = ref(false);
+
+// Render markdown content
+const renderedExplanation = computed(() => {
+  if (!translatedText.value) return '';
+  
+  // Use marked if available, otherwise return plain text
+  if (typeof window.marked === 'function') {
+    return window.marked(translatedText.value);
+  } else if (window.marked && typeof window.marked.parse === 'function') {
+    return window.marked.parse(translatedText.value.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
+  } else {
+    return translatedText.value;
+  }
+});
+
+// Watch for language changes
+watch(() => props.currentLanguage, async (newLanguage) => {
+  await updateTranslation(newLanguage);
+});
+
+// Watch for text changes
+watch(() => props.originalText, async () => {
+  await updateTranslation(props.currentLanguage);
+});
+
+const updateTranslation = async (targetLanguage) => {
+  if (!props.originalText || targetLanguage === 'nl') {
+    translatedText.value = props.originalText;
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    const result = await translateSafe(props.originalText, targetLanguage, {
+      context: 'sidebar_explanation',
+      apiPrefix: props.apiPrefix,
+      fallbackText: props.originalText
+    });
+    
+    translatedText.value = result;
+  } catch (error) {
+    console.warn('Sidebar explanation translation failed:', error);
+    translatedText.value = props.originalText;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  updateTranslation(props.currentLanguage);
+});
+</script>
+
+<style scoped>
+.sidebar-explanation {
+  padding: 15px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.explanation-loading {
+  color: var(--sidebar-color);
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+.explanation-content {
+  color: var(--sidebar-color);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.explanation-content :deep(h1),
+.explanation-content :deep(h2),
+.explanation-content :deep(h3) {
+  color: var(--sidebar-color);
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.explanation-content :deep(p) {
+  margin-bottom: 1rem;
+}
+
+.explanation-content :deep(strong) {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+</style>