pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- introductie van vue files - bijna werkende versie van eveai_chat_client.

Browse Source
This commit is contained in:
Josako
2025-07-18 20:32:55 +02:00
parent 11b1d548bd
commit b60600e9f6
77 changed files with 47785 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
eveai_chat_client/static/assets/js/ChatApp.js
View File

@@ -1,5 +1,12 @@
// Import all components via barrel export
import { TypingIndicator, FormField, DynamicForm, ChatMessage, MessageHistory, ProgressTracker, LanguageSelector, ChatInput } from './components/index.js';
// Import all components as Vue SFCs
import TypingIndicator from '../vue-components/TypingIndicator.vue';
import FormField from '../vue-components/FormField.vue';
import DynamicForm from '../vue-components/DynamicForm.vue';
import ChatMessage from '../vue-components/ChatMessage.vue';
import MessageHistory from '../vue-components/MessageHistory.vue';
import ProgressTracker from '../vue-components/ProgressTracker.vue';
import LanguageSelector from '../vue-components/LanguageSelector.vue';
import ChatInput from '../vue-components/ChatInput.vue';
// Main Chat Application
// Main Chat Application - geëxporteerd als module

66
eveai_chat_client/static/assets/js/components/ChatInput.js
View File

@@ -12,72 +12,6 @@ export const ChatInput = {
components: {
'dynamic-form': DynamicForm
},
// Static method for direct rendering
renderComponent(container, props, app) {
console.log('🔍 [DEBUG] ChatInput.renderComponent() aangeroepen');
console.log('🔍 [DEBUG] ChatInput container:', container);
console.log('🔍 [DEBUG] ChatInput props:', props);
console.log('🔍 [DEBUG] ChatInput app:', app);
if (!container) {
console.error('Container element niet gevonden voor ChatInput');
return null;
}
// Controleer de globale dependencies
console.log('🔍 [DEBUG] Global dependencies check:');
console.log('- window.Vue:', typeof window.Vue);
if (window.Vue) {
console.log('- window.Vue.createApp:', typeof window.Vue.createApp);
console.log('- window.Vue.version:', window.Vue.version);
}
console.log('🔍 [DEBUG] ChatInput 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 ChatInput component en de props
console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met ChatInput component');
try {
app = window.Vue.createApp(ChatInput, props);
console.log('🔍 [DEBUG] Nieuwe app aangemaakt:', app);
} catch (createError) {
console.error('🚨 [ERROR] Fout bij aanmaken Vue app:', createError);
// Probeer een alternatieve aanpak zonder importreferenties
console.log('🔍 [DEBUG] Alternatieve aanpak proberen...');
const componentCopy = JSON.parse(JSON.stringify(ChatInput));
app = window.Vue.createApp(componentCopy, props);
}
}
// Stel een fallback DOM in voor het geval mounten mislukt
container.innerHTML = `<div class="chat-input-loading">Chat input laden...</div>`;
// Nu kunnen we de app mounten
console.log('🔍 [DEBUG] App.mount aanroepen op container');
const instance = app.mount(container);
console.log('🔍 [DEBUG] ChatInput component succesvol gemount, instance:', instance);
return instance;
} catch (error) {
console.error('🚨 [ERROR] Fout bij mounten ChatInput component:', error);
console.error('Error stack:', error.stack);
return null;
}
},
// Gebruik de IconManagerMixin om automatisch iconen te laden
mixins: [IconManagerMixin],
created() {

46
eveai_chat_client/static/assets/js/components/ChatMessage.js
View File

@@ -7,52 +7,6 @@ import { ProgressTracker } from './ProgressTracker.js';
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

21
eveai_chat_client/static/assets/js/components/DynamicForm.js
View File

@@ -1,26 +1,5 @@
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) {

21
eveai_chat_client/static/assets/js/components/FormField.js
View File

@@ -1,26 +1,5 @@
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,

46
eveai_chat_client/static/assets/js/components/FormMessage.js
View File

@@ -2,52 +2,6 @@
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,

65
eveai_chat_client/static/assets/js/components/LanguageSelector.js
View File

@@ -26,16 +26,13 @@ export const LanguageSelector = {
};
},
mounted() {
// console.log('🔍 [DEBUG] LanguageSelector mounted');
// console.log('🔍 [DEBUG] Props:', {
// initialLanguage: this.initialLanguage,
// currentLanguage: this.currentLanguage,
// supportedLanguageDetails: this.supportedLanguageDetails,
// allowedLanguages: this.allowedLanguages
// });
// Render the component
this.renderComponent();
console.log('🔍 [DEBUG] LanguageSelector mounted with Vue template');
console.log('🔍 [DEBUG] Props:', {
initialLanguage: this.initialLanguage,
currentLanguage: this.currentLanguage,
supportedLanguageDetails: this.supportedLanguageDetails,
allowedLanguages: this.allowedLanguages
});
// Emit initial language
this.$emit('language-changed', this.selectedLanguage);
@@ -102,48 +99,9 @@ export const LanguageSelector = {
});
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 =>
`<option value="${lang.code}" ${lang.code === this.selectedLanguage ? 'selected' : ''}>${lang.flag} ${lang.name}</option>`
).join('');
container.innerHTML = `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
<div class="select-wrapper">
<select id="language-select" class="language-select">
${optionsHtml}
</select>
</div>
</div>
`;
// 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: `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
@@ -153,10 +111,5 @@ export const LanguageSelector = {
</select>
</div>
</div>
`,
// Minimale render functie als fallback
render() {
return document.createElement('div');
}
`
};

22
eveai_chat_client/static/assets/js/components/MessageHistory.js
View File

@@ -227,26 +227,4 @@
</div>
</div>
`
};
// Statische renderComponent methode voor het MessageHistory object
MessageHistory.renderComponent = function(container, props, app) {
console.log('🔍 [DEBUG] MessageHistory.renderComponent() aangeroepen als statische methode');
if (!container) {
console.error('Container element niet gevonden voor MessageHistory');
return null;
}
console.log('🔍 [DEBUG] MessageHistory container gevonden, Vue app aanmaken');
try {
// Maak een nieuwe Vue app instantie met dit component
const instance = app.mount(container);
console.log('🔍 [DEBUG] MessageHistory component succesvol gemount');
return instance;
} catch (error) {
console.error('🚨 [ERROR] Fout bij mounten MessageHistory component:', error);
return null;
}
};

22
eveai_chat_client/static/assets/js/components/ProgressTracker.js
View File

@@ -308,26 +308,4 @@ export const ProgressTracker = {
</div>
</div>
`
};
// Voeg de renderComponent toe als statische methode op het ProgressTracker object
ProgressTracker.renderComponent = function(container, props, app) {
console.log('🔍 [DEBUG] ProgressTracker.renderComponent() aangeroepen');
if (!container) {
console.error('Container element niet gevonden voor ProgressTracker');
return null;
}
console.log('🔍 [DEBUG] ProgressTracker container gevonden, Vue app aanmaken');
try {
// Maak een nieuwe Vue app instantie met dit component
const instance = app.mount(container);
console.log('🔍 [DEBUG] ProgressTracker component succesvol gemount');
return instance;
} catch (error) {
console.error('🚨 [ERROR] Fout bij mounten ProgressTracker component:', error);
return null;
}
};

22
eveai_chat_client/static/assets/js/components/TypingIndicator.js
View File

@@ -21,26 +21,4 @@ export const TypingIndicator = {
<div v-if="showText" class="typing-text">{{ text }}</div>
</div>
`
};
// Voeg statische renderComponent methode toe aan het TypingIndicator object
TypingIndicator.renderComponent = function(container, props, app) {
console.log('🔍 [DEBUG] TypingIndicator.renderComponent() aangeroepen als statische methode');
if (!container) {
console.error('Container element niet gevonden voor TypingIndicator');
return null;
}
console.log('🔍 [DEBUG] TypingIndicator container gevonden, Vue app aanmaken');
try {
// Maak een nieuwe Vue app instantie met dit component
const instance = app.mount(container);
console.log('🔍 [DEBUG] TypingIndicator component succesvol gemount');
return instance;
} catch (error) {
console.error('🚨 [ERROR] Fout bij mounten TypingIndicator component:', error);
return null;
}
};