diff --git a/eveai_chat_client/static/assets/js/components/ChatMessage.js b/eveai_chat_client/static/assets/js/components/ChatMessage.js
index f3a6a0c..2df1391 100644
--- a/eveai_chat_client/static/assets/js/components/ChatMessage.js
+++ b/eveai_chat_client/static/assets/js/components/ChatMessage.js
@@ -1,35 +1,62 @@
-// Voeg stylesheets toe voor formulier en chat berichten weergave
-const addStylesheets = () => {
- // Formulier stylesheet
- if (!document.querySelector('link[href*="form-message.css"]')) {
- const formLink = document.createElement('link');
- formLink.rel = 'stylesheet';
- formLink.href = '/static/assets/css/form-message.css';
- document.head.appendChild(formLink);
- }
+// Import benodigde componenten
+import { DynamicForm } from './DynamicForm.js';
+import { ProgressTracker } from './ProgressTracker.js';
- // Chat bericht stylesheet
- if (!document.querySelector('link[href*="chat-message.css"]')) {
- const chatLink = document.createElement('link');
- chatLink.rel = 'stylesheet';
- chatLink.href = '/static/assets/css/chat-message.css';
- document.head.appendChild(chatLink);
- }
-
- // Material Icons font stylesheet
- if (!document.querySelector('link[href*="Material+Symbols+Outlined"]')) {
- const iconLink = document.createElement('link');
- iconLink.rel = 'stylesheet';
- iconLink.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
- document.head.appendChild(iconLink);
- }
-};
-
-// Laad de stylesheets
-addStylesheets();
+// CSS en Material Icons worden nu geladen via de hoofdbundel en scripts.html
+// We hoeven hier niets dynamisch te laden
export const ChatMessage = {
name: 'ChatMessage',
+ // Static method for direct rendering
+ renderComponent(container, props, app) {
+ console.log('π [DEBUG] ChatMessage.renderComponent() aangeroepen');
+ console.log('π [DEBUG] ChatMessage container:', container);
+ console.log('π [DEBUG] ChatMessage props:', props);
+
+ if (!container) {
+ console.error('Container element niet gevonden voor ChatMessage');
+ return null;
+ }
+
+ console.log('π [DEBUG] ChatMessage container gevonden, Vue app aan het initialiseren');
+
+ try {
+ // We controleren het app object
+ if (!app) {
+ console.error('π¨ [ERROR] Geen Vue app object ontvangen');
+ return null;
+ }
+
+ // Check of we een correcte Vue app hebben of we moeten er een maken
+ if (typeof app.mount !== 'function') {
+ console.log('π [DEBUG] Ontvangen app heeft geen mount functie, dit is mogelijk een config object');
+ // Controleer of window.Vue beschikbaar is
+ if (!window.Vue || typeof window.Vue.createApp !== 'function') {
+ console.error('π¨ [ERROR] window.Vue.createApp is niet beschikbaar');
+ return null;
+ }
+
+ // Maak een nieuwe Vue app met het ChatMessage component en de props
+ console.log('π [DEBUG] Nieuwe Vue app aanmaken met ChatMessage component');
+ app = window.Vue.createApp(ChatMessage, props);
+ console.log('π [DEBUG] Nieuwe app aangemaakt:', app);
+ }
+
+ // Nu kunnen we de app mounten
+ console.log('π [DEBUG] App.mount aanroepen op container');
+ const instance = app.mount(container);
+ console.log('π [DEBUG] ChatMessage component succesvol gemount');
+ return instance;
+ } catch (error) {
+ console.error('π¨ [ERROR] Fout bij mounten ChatMessage component:', error);
+ console.error('Error stack:', error.stack);
+ return null;
+ }
+ },
+ components: {
+ 'dynamic-form': DynamicForm,
+ 'progress-tracker': ProgressTracker
+ },
props: {
message: {
type: Object,
diff --git a/eveai_chat_client/static/assets/js/components/DynamicForm.js b/eveai_chat_client/static/assets/js/components/DynamicForm.js
index c44e973..021c8e3 100644
--- a/eveai_chat_client/static/assets/js/components/DynamicForm.js
+++ b/eveai_chat_client/static/assets/js/components/DynamicForm.js
@@ -1,5 +1,26 @@
export const DynamicForm = {
name: 'DynamicForm',
+ // Static method for direct rendering
+ renderComponent(container, props, app) {
+ console.log('π [DEBUG] DynamicForm.renderComponent() aangeroepen');
+
+ if (!container) {
+ console.error('Container element niet gevonden voor DynamicForm');
+ return null;
+ }
+
+ console.log('π [DEBUG] DynamicForm container gevonden, Vue app aanmaken');
+
+ try {
+ // Maak een nieuwe Vue app instantie met dit component
+ const instance = app.mount(container);
+ console.log('π [DEBUG] DynamicForm component succesvol gemount');
+ return instance;
+ } catch (error) {
+ console.error('π¨ [ERROR] Fout bij mounten DynamicForm component:', error);
+ return null;
+ }
+ },
created() {
// Zorg ervoor dat het icoon geladen wordt als iconManager beschikbaar is
if (window.iconManager && this.formData && this.formData.icon) {
diff --git a/eveai_chat_client/static/assets/js/components/FormField.js b/eveai_chat_client/static/assets/js/components/FormField.js
index 7a25b11..362ac7e 100644
--- a/eveai_chat_client/static/assets/js/components/FormField.js
+++ b/eveai_chat_client/static/assets/js/components/FormField.js
@@ -1,5 +1,26 @@
export const FormField = {
name: 'FormField',
+ // Static method for direct rendering
+ renderComponent(container, props, app) {
+ console.log('π [DEBUG] FormField.renderComponent() aangeroepen');
+
+ if (!container) {
+ console.error('Container element niet gevonden voor FormField');
+ return null;
+ }
+
+ console.log('π [DEBUG] FormField container gevonden, Vue app aanmaken');
+
+ try {
+ // Maak een nieuwe Vue app instantie met dit component
+ const instance = app.mount(container);
+ console.log('π [DEBUG] FormField component succesvol gemount');
+ return instance;
+ } catch (error) {
+ console.error('π¨ [ERROR] Fout bij mounten FormField component:', error);
+ return null;
+ }
+ },
props: {
field: {
type: Object,
diff --git a/eveai_chat_client/static/assets/js/components/FormMessage.js b/eveai_chat_client/static/assets/js/components/FormMessage.js
index b381d3f..4558915 100644
--- a/eveai_chat_client/static/assets/js/components/FormMessage.js
+++ b/eveai_chat_client/static/assets/js/components/FormMessage.js
@@ -2,6 +2,52 @@
export const FormMessage = {
name: 'FormMessage',
+ // Static method for direct rendering
+ renderComponent(container, props, app) {
+ console.log('π [DEBUG] FormMessage.renderComponent() aangeroepen');
+ console.log('π [DEBUG] FormMessage container:', container);
+ console.log('π [DEBUG] FormMessage props:', props);
+
+ if (!container) {
+ console.error('Container element niet gevonden voor FormMessage');
+ return null;
+ }
+
+ console.log('π [DEBUG] FormMessage container gevonden, Vue app aan het initialiseren');
+
+ try {
+ // We controleren het app object
+ if (!app) {
+ console.error('π¨ [ERROR] Geen Vue app object ontvangen');
+ return null;
+ }
+
+ // Check of we een correcte Vue app hebben of we moeten er een maken
+ if (typeof app.mount !== 'function') {
+ console.log('π [DEBUG] Ontvangen app heeft geen mount functie, dit is mogelijk een config object');
+ // Controleer of window.Vue beschikbaar is
+ if (!window.Vue || typeof window.Vue.createApp !== 'function') {
+ console.error('π¨ [ERROR] window.Vue.createApp is niet beschikbaar');
+ return null;
+ }
+
+ // Maak een nieuwe Vue app met het FormMessage component en de props
+ console.log('π [DEBUG] Nieuwe Vue app aanmaken met FormMessage component');
+ app = window.Vue.createApp(FormMessage, props);
+ console.log('π [DEBUG] Nieuwe app aangemaakt:', app);
+ }
+
+ // Nu kunnen we de app mounten
+ console.log('π [DEBUG] App.mount aanroepen op container');
+ const instance = app.mount(container);
+ console.log('π [DEBUG] FormMessage component succesvol gemount');
+ return instance;
+ } catch (error) {
+ console.error('π¨ [ERROR] Fout bij mounten FormMessage component:', error);
+ console.error('Error stack:', error.stack);
+ return null;
+ }
+ },
props: {
formData: {
type: Object,
diff --git a/eveai_chat_client/static/assets/js/components/LanguageSelector.js b/eveai_chat_client/static/assets/js/components/LanguageSelector.js
index f386d19..616a76b 100644
--- a/eveai_chat_client/static/assets/js/components/LanguageSelector.js
+++ b/eveai_chat_client/static/assets/js/components/LanguageSelector.js
@@ -1,4 +1,3 @@
-
export const LanguageSelector = {
name: 'LanguageSelector',
props: {
@@ -6,6 +5,10 @@ export const LanguageSelector = {
type: String,
default: 'nl'
},
+ currentLanguage: {
+ type: String,
+ default: null
+ },
supportedLanguageDetails: {
type: Object,
default: () => ({})
@@ -13,22 +16,44 @@ export const LanguageSelector = {
allowedLanguages: {
type: Array,
default: () => ['nl', 'en', 'fr', 'de']
- }
+ },
},
- computed: {
- availableLanguages() {
- // Maak een array van taalobjecten op basis van de toegestane talen
- // en de ondersteunde taaldetails
- const languages = [];
+ data() {
+ const startLanguage = this.currentLanguage || this.initialLanguage;
+ return {
+ selectedLanguage: startLanguage,
+ internalCurrentLanguage: startLanguage
+ };
+ },
+ mounted() {
+ // console.log('π [DEBUG] LanguageSelector mounted');
+ // console.log('π [DEBUG] Props:', {
+ // initialLanguage: this.initialLanguage,
+ // currentLanguage: this.currentLanguage,
+ // supportedLanguageDetails: this.supportedLanguageDetails,
+ // allowedLanguages: this.allowedLanguages
+ // });
- // Als er geen toegestane talen zijn of de lijst is leeg, gebruik een standaardlijst
- const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
- ? this.allowedLanguages
+ // Render the component
+ this.renderComponent();
+
+ // Emit initial language
+ this.$emit('language-changed', this.selectedLanguage);
+
+ // DOM event
+ const event = new CustomEvent('vue:language-changed', {
+ detail: { language: this.selectedLanguage }
+ });
+ document.dispatchEvent(event);
+ },
+ methods: {
+ getAvailableLanguages() {
+ const languages = [];
+ const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
+ ? this.allowedLanguages
: ['nl', 'en', 'fr', 'de'];
- // Loop door alle ondersteunde taaldetails
if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
- // Vind talen die overeenkomen met toegestane taalcodes
for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
const isoCode = langDetails['iso 639-1'];
if (languagesToUse.includes(isoCode)) {
@@ -40,7 +65,6 @@ export const LanguageSelector = {
}
}
} else {
- // Fallback als er geen taaldetails beschikbaar zijn
const defaultLanguages = {
'nl': { name: 'Nederlands', flag: 'π³π±' },
'en': { name: 'English', flag: 'π¬π§' },
@@ -52,67 +76,87 @@ export const LanguageSelector = {
if (defaultLanguages[code]) {
languages.push({
code: code,
- name: defaultLanguages[code].code,
+ name: defaultLanguages[code].name,
flag: defaultLanguages[code].flag
});
}
});
}
- console.log('LanguageSelector: availableLanguages computed:', languages);
return languages;
- }
- },
- emits: ['language-changed'],
- data() {
- return {
- selectedLanguage: this.initialLanguage,
- currentLanguage: this.initialLanguage
- };
- },
- mounted() {
- console.log('LanguageSelector mounted with:', {
- initialLanguage: this.initialLanguage,
- selectedLanguage: this.selectedLanguage,
- availableLanguages: this.availableLanguages
- });
+ },
- // Stuur het language-changed event uit met de initiΓ«le taal
- console.log(`LanguageSelector: Emitting language-changed event for initial language ${this.initialLanguage}`);
- this.$emit('language-changed', this.initialLanguage);
- },
- methods: {
changeLanguage(languageCode) {
- console.log(`LanguageSelector: changeLanguage called with ${languageCode}, current: ${this.currentLanguage}`);
+ console.log(`LanguageSelector: changeLanguage called with ${languageCode}`);
- if (this.currentLanguage !== languageCode) {
- console.log(`LanguageSelector: Emitting language-changed event for ${languageCode}`);
- this.currentLanguage = languageCode;
+ if (this.internalCurrentLanguage !== languageCode) {
+ this.internalCurrentLanguage = languageCode;
+ this.selectedLanguage = languageCode;
+
+ // Vue component emit
this.$emit('language-changed', languageCode);
- } else {
- console.log(`LanguageSelector: No change needed, already ${languageCode}`);
+
+ // DOM event
+ const event = new CustomEvent('vue:language-changed', {
+ detail: { language: languageCode }
+ });
+ document.dispatchEvent(event);
+ }
+ },
+
+ renderComponent() {
+ // We gaan direct de container manipuleren
+ const container = document.getElementById('language-selector-container');
+ if (!container) {
+ console.error('Container niet gevonden voor LanguageSelector');
+ return;
+ }
+
+ const availableLanguages = this.getAvailableLanguages();
+ // console.log('π [DEBUG] Available languages:', availableLanguages);
+
+ const optionsHtml = availableLanguages.map(lang =>
+ `
`
+ ).join('');
+
+ container.innerHTML = `
+
+
+
+
+
+
+ `;
+
+ // Add event listener
+ const selectElement = container.querySelector('#language-select');
+ if (selectElement) {
+ selectElement.addEventListener('change', (e) => {
+ this.changeLanguage(e.target.value);
+ });
+ }
+
+ // console.log('π [DEBUG] Component rendered successfully');
}
- }
},
+
+ // Stap 1: Ondersteun zowel template-based rendering als manual rendering
+ // Door beide methoden te ondersteunen, werkt het component in beide scenario's
template: `
-
- `
+ `,
+
+ // Minimale render functie als fallback
+ render() {
+ return document.createElement('div');
+ }
};
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/js/components/MessageHistory.js b/eveai_chat_client/static/assets/js/components/MessageHistory.js
index 92add92..c041fef 100644
--- a/eveai_chat_client/static/assets/js/components/MessageHistory.js
+++ b/eveai_chat_client/static/assets/js/components/MessageHistory.js
@@ -1,5 +1,15 @@
-export const MessageHistory = {
+ // Import afhankelijke componenten
+ import { ChatMessage } from './ChatMessage.js';
+ import { TypingIndicator } from './TypingIndicator.js';
+ import { ProgressTracker } from './ProgressTracker.js';
+
+ export const MessageHistory = {
name: 'MessageHistory',
+ components: {
+ 'chat-message': ChatMessage,
+ 'typing-indicator': TypingIndicator,
+ 'progress-tracker': ProgressTracker
+ },
props: {
messages: {
type: Array,
@@ -13,10 +23,10 @@ export const MessageHistory = {
isSubmittingForm: {
type: Boolean,
default: false
- },
- apiPrefix: {
- type: String,
- default: ''
+ },
+ apiPrefix: {
+ type: String,
+ default: ''
},
autoScroll: {
type: Boolean,
@@ -216,5 +226,27 @@ export const MessageHistory = {