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

- Eerste stap in het opnieuw laten werken van de chat client...

Browse Source
This commit is contained in:
Josako
2025-07-18 16:07:13 +02:00
parent f3a243698c
commit 11b1d548bd
20 changed files with 1201 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/models/user.py
View File

@@ -346,9 +346,9 @@ class TranslationCache(db.Model):
class PartnerRAGRetriever(db.Model):
__bind_key__ = 'public'
__table_args__ = (
{'schema': 'public'},
db.PrimaryKeyConstraint('tenant_id', 'retriever_id'),
db.UniqueConstraint('partner_id', 'tenant_id', 'retriever_id')
db.UniqueConstraint('partner_id', 'tenant_id', 'retriever_id'),
{'schema': 'public'},
)
partner_id = db.Column(db.Integer, db.ForeignKey('public.partner.id'), nullable=False)

11
docker/rebuild_chat_client.sh
View File

@@ -1,9 +1,16 @@
#!/bin/bash
cd /Volumes/OWC4M2_1/Development/Josako/EveAI/TBD/docker
source ./docker_env_switch.sh dev
source .env
dcdown eveai_chat_client nginx
./update_chat_client_statics.sh
cd ../nginx
npm run clean
npm run build
cd ../docker
./build_and_push_eveai.sh -b nginx
dcup eveai_chat_client nginx

415
eveai_chat_client/static/assets/js/chat-app.js → eveai_chat_client/static/assets/js/ChatApp.js
View File

@@ -1,24 +1,8 @@
// Import all components
import { TypingIndicator } from './components/TypingIndicator.js';
import { FormField } from './components/FormField.js';
import { DynamicForm } from './components/DynamicForm.js';
import { ChatMessage } from './components/ChatMessage.js';
import { MessageHistory } from './components/MessageHistory.js';
import { ProgressTracker } from './components/ProgressTracker.js';
import { LanguageSelector } from './components/LanguageSelector.js';
// Maak componenten globaal beschikbaar voordat andere componenten worden geladen
window.DynamicForm = DynamicForm;
window.FormField = FormField;
window.TypingIndicator = TypingIndicator;
window.ChatMessage = ChatMessage;
window.MessageHistory = MessageHistory;
window.ProgressTracker = ProgressTracker;
// Nu kunnen we ChatInput importeren nadat de benodigde componenten globaal beschikbaar zijn
import { ChatInput } from './components/ChatInput.js';
// Import all components via barrel export
import { TypingIndicator, FormField, DynamicForm, ChatMessage, MessageHistory, ProgressTracker, LanguageSelector, ChatInput } from './components/index.js';
// Main Chat Application
// Main Chat Application - geëxporteerd als module
export const ChatApp = {
name: 'ChatApp',
components: {
@@ -27,6 +11,7 @@ export const ChatApp = {
DynamicForm,
ChatMessage,
MessageHistory,
ProgressTracker,
ChatInput
},
@@ -36,12 +21,18 @@ export const ChatApp = {
const settings = chatConfig.settings || {};
const initialLanguage = chatConfig.language || 'nl';
const originalExplanation = chatConfig.explanation || '';
const tenantMake = chatConfig.tenantMake || {};
return {
// Tenant info
tenantName: tenantMake.name || 'EveAI',
tenantLogoUrl: tenantMake.logo_url || '',
// Taal gerelateerde data
currentLanguage: '',
currentLanguage: initialLanguage,
supportedLanguageDetails: chatConfig.supportedLanguageDetails || {},
allowedLanguages: chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
supportedLanguages: chatConfig.supportedLanguages || [],
originalExplanation: originalExplanation,
explanation: chatConfig.explanation || '',
@@ -88,7 +79,7 @@ export const ChatApp = {
if (typeof marked === 'function') {
return marked(this.explanation);
} else if (marked && typeof marked.parse === 'function') {
return marked.parse(this.explanation);
return marked.parse(this.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
} else {
console.error('Marked library not properly loaded');
return this.explanation;
@@ -101,18 +92,64 @@ export const ChatApp = {
hasMessages() {
return this.allMessages.length > 0;
},
displayLanguages() {
// Filter de ondersteunde talen op basis van de toegestane talen
if (!this.supportedLanguages || !this.allowedLanguages) {
return [];
}
return this.supportedLanguages.filter(lang =>
this.allowedLanguages.includes(lang.code)
);
}
},
mounted() {
console.log('🔍 [DEBUG] ChatApp mounted');
console.log('🔍 [DEBUG] ChatApp data:', {
tenantName: this.tenantName,
currentLanguage: this.currentLanguage,
allowedLanguages: this.allowedLanguages,
conversationId: this.conversationId,
userId: this.userId
});
// Log beschikbare componenten
console.log('🔍 [DEBUG] Geregistreerde componenten:', {
messageHistory: !!this.$options.components.MessageHistory,
chatInput: !!this.$options.components.ChatInput
});
// Render de component
this.renderComponent();
console.log('🔍 [DEBUG] ChatApp mounted');
console.log('🔍 [DEBUG] Props en data:', {
currentLanguage: this.currentLanguage,
allowedLanguages: this.allowedLanguages,
tenantName: this.tenantName
});
this.initializeChat();
this.setupEventListeners();
// Render de component
this.renderComponent();
},
beforeUnmount() {
this.cleanup();
},
// Nieuwe methode om de component direct te renderen
renderComponent() {
console.log('🔍 [DEBUG] ChatApp.renderComponent() aangeroepen');
// Hier kunnen we directe DOM-manipulatie toevoegen indien nodig
// Vergelijkbaar met LanguageSelector.renderComponent()
},
methods: {
// Initialization
initializeChat() {
@@ -574,6 +611,65 @@ export const ChatApp = {
}
},
submitForm(formValues) {
console.log('🔍 [DEBUG] Formulier verzenden:', formValues);
if (!formValues || this.isLoading) return;
// Markeer formulier als bezig met verzenden
this.isSubmittingForm = true;
// Voeg gebruikersformulier toe aan chat
this.addFormMessage(formValues, 'user');
// Verstuur naar backend
this.sendFormToBackend(formValues);
// Reset input form
this.currentInputFormData = null;
},
sendFormToBackend(formValues) {
console.log('🔍 [DEBUG] Formulier naar backend versturen', formValues);
// Implementatie voor het versturen van formulier data
this.isSubmittingForm = false;
},
sendMessageToBackend(message) {
console.log('🔍 [DEBUG] Bericht naar backend versturen', message);
// Implementatie voor het versturen van berichten
},
addFormMessage(formValues, sender) {
console.log('🔍 [DEBUG] Formulier bericht toevoegen:', formValues);
// Implementatie voor het toevoegen van een formulier bericht
},
focusChatInput() {
// Focus op de chat input als deze beschikbaar is
this.$nextTick(() => {
// Controleer of $el beschikbaar is
if (!this.$el) {
console.warn('$el is niet beschikbaar in focusChatInput');
return;
}
// Probeer de input te vinden en focus
try {
const chatInputComponent = this.$el.querySelector('.chat-input-container');
if (chatInputComponent) {
console.log('🔍 [DEBUG] Focus op chat input');
// Probeer een input element te vinden om focus op te zetten
const inputElement = chatInputComponent.querySelector('input, textarea');
if (inputElement) {
inputElement.focus();
}
}
} catch (error) {
console.error('Fout bij focussen op chat input:', error);
}
});
},
removeMessage(messageId) {
const index = this.allMessages.findIndex(m => m.id === messageId);
if (index !== -1) {
@@ -791,14 +887,186 @@ export const ChatApp = {
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
},
focusChatInput() {
this.$refs.chatInput?.focusInput();
},
focusSearch() {
this.$refs.searchInput?.focus();
},
renderComponent() {
console.log('🔍 [DEBUG] ChatApp.renderComponent() aangeroepen');
console.log('🔍 [DEBUG] window.Vue beschikbaar:', !!window.Vue);
if (window.Vue) {
console.log('🔍 [DEBUG] window.Vue.createApp beschikbaar:', !!window.Vue.createApp);
console.log('🔍 [DEBUG] window.Vue.version:', window.Vue.version);
}
// We gaan direct de container manipuleren
const container = document.querySelector('.chat-container');
if (!container) {
console.error('Container niet gevonden voor ChatApp (.chat-container)');
return;
}
console.log('🔍 [DEBUG] ChatApp container gevonden, inhoud wordt gerenderd');
console.log('🔍 [DEBUG] Beschikbare components:', {
MessageHistory: !!window.Components?.MessageHistory,
ChatInput: !!window.Components?.ChatInput
});
// Basis layout voor de chat app
container.innerHTML = `
<div class="chat-app-container">
<!-- Message History - takes available space -->
<div id="chat-message-history" class="chat-messages-area"></div>
<!-- Chat Input - to the bottom -->
<div id="chat-input-container" class="chat-input-area"></div>
</div>
`;
// Nu we de DOM structuur hebben, gaan we de componenten initialiseren
const messageHistoryContainer = document.getElementById('chat-message-history');
const chatInputContainer = document.getElementById('chat-input-container');
// Instantieer MessageHistory component met Vue
if (messageHistoryContainer) {
console.log('🔍 [DEBUG] MessageHistory container gevonden, initialiseren...');
try {
// Maak props voor de MessageHistory component
const messageHistoryProps = {
messages: this.allMessages,
isTyping: this.isTyping,
isSubmittingForm: this.isSubmittingForm,
apiPrefix: this.apiPrefix,
autoScroll: true
};
// Maak een nieuwe Vue app en registreer alle componenten
const messageHistoryApp = window.Vue.createApp(MessageHistory, messageHistoryProps);
// Registreer benodigde componenten voor MessageHistory
messageHistoryApp.component('chat-message', ChatMessage);
messageHistoryApp.component('typing-indicator', TypingIndicator);
messageHistoryApp.component('progress-tracker', ProgressTracker);
messageHistoryApp.component('dynamic-form', DynamicForm);
// Error handler
messageHistoryApp.config.errorHandler = (err, vm, info) => {
console.error('🚨 [Vue Error in MessageHistory]', err);
console.error('Component:', vm);
console.error('Error Info:', info);
};
// Geef events door naar de ChatApp
messageHistoryApp.config.globalProperties.$emit = (event, ...args) => {
if (event === 'specialist-complete') {
this.handleSpecialistComplete(args[0]);
} else if (event === 'specialist-error') {
this.handleSpecialistError(args[0]);
}
};
// Mount de component en bewaar de referentie - controleer of renderComponent bestaat
let messageHistoryInstance = null;
if (typeof MessageHistory.renderComponent === 'function') {
messageHistoryInstance = MessageHistory.renderComponent(
messageHistoryContainer,
messageHistoryProps,
messageHistoryApp
);
} else {
// Fallback: direct mounten
messageHistoryInstance = messageHistoryApp.mount(messageHistoryContainer);
console.log('🔍 [DEBUG] MessageHistory direct gemount via app.mount()');
}
// Bewaar de instantie voor toekomstige updates
this.$refs.messageHistory = messageHistoryInstance;
console.log('🔍 [DEBUG] MessageHistory component succesvol geïnitialiseerd');
} catch (error) {
console.error('🚨 [ERROR] Fout bij initialiseren MessageHistory:', error);
}
} else {
console.error('MessageHistory container niet gevonden in de DOM');
}
// Instantieer ChatInput component met Vue
if (chatInputContainer) {
console.log('🔍 [DEBUG] ChatInput container gevonden, initialiseren...');
try {
// Maak props voor de ChatInput component
const chatInputProps = {
currentMessage: this.currentMessage,
isLoading: this.isLoading,
maxLength: this.settings.maxMessageLength,
formData: this.currentInputFormData,
allowFileUpload: this.settings.allowFileUpload,
allowVoiceMessage: this.settings.allowVoiceMessage
};
// Maak een nieuwe Vue app en registreer alle componenten
const chatInputApp = window.Vue.createApp(ChatInput, chatInputProps);
// Registreer benodigde componenten voor ChatInput
chatInputApp.component('dynamic-form', DynamicForm);
chatInputApp.component('form-field', FormField);
// Error handler
chatInputApp.config.errorHandler = (err, vm, info) => {
console.error('🚨 [Vue Error in ChatInput]', err);
console.error('Component:', vm);
console.error('Error Info:', info);
};
// Geef events door naar de ChatApp
chatInputApp.config.globalProperties.$emit = (event, ...args) => {
if (event === 'send-message') {
this.sendMessage();
} else if (event === 'update-message') {
this.updateCurrentMessage(args[0]);
} else if (event === 'submit-form') {
this.submitFormFromInput(args[0]);
} else if (event === 'upload-file') {
this.handleFileUpload(args[0]);
} else if (event === 'record-voice') {
this.handleVoiceRecord(args[0]);
}
};
// Mount de component en bewaar de referentie - controleer of renderComponent bestaat
let chatInputInstance = null;
if (typeof ChatInput.renderComponent === 'function') {
console.log('🔍 [DEBUG] ChatInput.renderComponent wordt aangeroepen met chatInputApp:', chatInputApp);
console.log('🔍 [DEBUG] chatInputApp.mount type:', typeof chatInputApp.mount);
chatInputInstance = ChatInput.renderComponent(
chatInputContainer,
chatInputProps,
chatInputApp
);
} else {
// Fallback: direct mounten
console.log('🔍 [DEBUG] ChatInput wordt direct gemount via app.mount()');
chatInputInstance = chatInputApp.mount(chatInputContainer);
console.log('🔍 [DEBUG] ChatInput direct gemount via app.mount()');
}
// Bewaar de instantie voor toekomstige updates
this.$refs.chatInput = chatInputInstance;
console.log('🔍 [DEBUG] ChatInput component succesvol geïnitialiseerd');
} catch (error) {
console.error('🚨 [ERROR] Fout bij initialiseren ChatInput:', error);
}
} else {
console.error('ChatInput container niet gevonden in de DOM');
}
console.log('🔍 [DEBUG] ChatApp succesvol gerenderd met alle componenten');
},
},
// Voeg een minimale render functie toe (vergelijkbaar met LanguageSelector)
render() {
return document.createElement('div');
},
template: `
@@ -835,101 +1103,4 @@ export const ChatApp = {
</div>
`
};
// Zorg ervoor dat alle componenten correct geïnitialiseerd zijn voordat ze worden gebruikt
const initializeApp = () => {
console.log('Initializing Chat Application');
// ChatInput wordt pas op dit punt globaal beschikbaar gemaakt
// omdat het afhankelijk is van andere componenten
window.ChatInput = ChatInput;
// Get access to the existing Vue app instance
if (window.__vueApp) {
// Register ALL components globally
window.__vueApp.component('TypingIndicator', TypingIndicator);
window.__vueApp.component('FormField', FormField);
window.__vueApp.component('DynamicForm', DynamicForm);
window.__vueApp.component('ChatMessage', ChatMessage);
window.__vueApp.component('MessageHistory', MessageHistory);
window.__vueApp.component('ChatInput', ChatInput);
window.__vueApp.component('ProgressTracker', ProgressTracker);
// NB: LanguageSelector wordt niet globaal geregistreerd omdat deze apart gemonteerd wordt
console.log('All chat components registered with existing Vue instance');
// Register the ChatApp component
window.__vueApp.component('ChatApp', ChatApp);
console.log('ChatApp component registered with existing Vue instance');
// Mount the Vue app
window.__vueApp.mount('#app');
console.log('Vue app mounted with chat components');
} else {
console.error('No existing Vue instance found on window.__vueApp');
}
};
// Functie om LanguageSelector toe te voegen aan sidebar
const mountLanguageSelector = () => {
const container = document.getElementById('language-selector-container');
if (container) {
// Maak een eenvoudige Vue app die alleen de LanguageSelector component mount
const app = Vue.createApp({
components: { LanguageSelector },
data() {
return {
currentLanguage: window.chatConfig?.language || 'nl',
supportedLanguageDetails: window.chatConfig?.supportedLanguageDetails || {},
allowedLanguages: window.chatConfig?.allowedLanguages || ['nl', 'en', 'fr', 'de']
};
},
methods: {
handleLanguageChange(newLanguage) {
console.log(`LanguageSelector: Taal gewijzigd naar ${newLanguage}`);
// Gebruik ALLEEN de custom event benadering
const event = new CustomEvent('language-changed', {
detail: { language: newLanguage }
});
document.dispatchEvent(event);
}
},
template: `
<language-selector
:initial-language="currentLanguage"
:supported-language-details="supportedLanguageDetails"
:allowed-languages="allowedLanguages"
@language-changed="handleLanguageChange"
></language-selector>
`
});
app.component('LanguageSelector', LanguageSelector);
app.mount('#language-selector-container');
console.log('Language selector mounted in sidebar');
} else {
console.warn('Language selector container not found');
}
};
// Initialize app when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM content loaded, initializing application...');
// Eerst de hoofdapplicatie initialiseren
initializeApp();
// Dan de taal selector monteren met een kleine vertraging
// om er zeker van te zijn dat de container is aangemaakt
setTimeout(() => {
try {
mountLanguageSelector();
} catch (e) {
console.error('Fout bij het monteren van de taal selector:', e);
}
}, 200);
});

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

@@ -1,35 +1,89 @@
// static/js/components/ChatInput.js
// Importeer de IconManager (als module systeem wordt gebruikt)
// Anders moet je ervoor zorgen dat MaterialIconManager.js eerder wordt geladen
// en iconManager beschikbaar is via window.iconManager
// Importeer de benodigde componenten
import { DynamicForm } from './DynamicForm.js';
import { IconManagerMixin } from '../iconManager.js';
// Voeg stylesheet toe voor ChatInput-specifieke stijlen
const addStylesheet = () => {
if (!document.querySelector('link[href*="chat-input.css"]')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/static/assets/css/chat-input.css';
document.head.appendChild(link);
}
};
// Laad de stylesheet
addStylesheet();
// CSS wordt nu geladen via de main bundle in chat-client.js
// We hoeven hier niets dynamisch te laden
export const ChatInput = {
name: 'ChatInput',
components: {
'dynamic-form': window.DynamicForm
'dynamic-form': DynamicForm
},
created() {
// Als module systeem wordt gebruikt:
// import { iconManager } from './MaterialIconManager.js';
// Anders gebruiken we window.iconManager als het beschikbaar is:
if (window.iconManager && this.formData && this.formData.icon) {
window.iconManager.ensureIconsLoaded({}, [this.formData.icon]);
// 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() {
// Als er een formData.icon is, wordt deze automatisch geladen via IconManagerMixin
// Geen expliciete window.iconManager calls meer nodig
// Maak een benoemde handler voor betere cleanup
this.languageChangeHandler = (event) => {
if (event.detail && event.detail.language) {
@@ -342,10 +396,7 @@ export const ChatInput = {
},
template: `
<div class="chat-input-container">
<!-- Dynamisch toevoegen van Material Symbols Outlined voor iconen -->
<div v-if="formData && formData.icon" class="material-icons-container">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</div>
<!-- Material Icons worden nu globaal geladen in scripts.html -->
<!-- Dynamisch formulier container -->
<div v-if="formData" class="dynamic-form-container">
<!-- De titel wordt in DynamicForm weergegeven en niet hier om dubbele titels te voorkomen -->

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

@@ -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,

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

@@ -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) {

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

@@ -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,

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

@@ -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,

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

@@ -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 =>
`<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>
<div class="select-wrapper">
<select
id="language-select"
v-model="selectedLanguage"
@change="changeLanguage(selectedLanguage); currentLanguage = selectedLanguage"
class="language-select"
>
<option
v-for="lang in availableLanguages"
:key="lang.code"
:value="lang.code"
>
{{ lang.flag }} {{ lang.name }}
</option>
<select id="language-select" class="language-select" v-model="selectedLanguage" @change="changeLanguage(selectedLanguage)">
<option v-for="lang in getAvailableLanguages()" :key="lang.code" :value="lang.code">{{ lang.flag }} {{ lang.name }}</option>
</select>
</div>
</div>
`
`,
// Minimale render functie als fallback
render() {
return document.createElement('div');
}
};

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

@@ -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 = {
<typing-indicator v-if="isTyping"></typing-indicator>
</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,4 +308,26 @@ 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;
}
};

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

@@ -1,10 +1,46 @@
export const TypingIndicator = {
name: 'TypingIndicator',
props: {
showText: {
type: Boolean,
default: false
},
text: {
type: String,
default: 'Bezig met typen...'
}
},
methods: {
// Andere methoden kunnen hier staan
},
template: `
<div class="typing-indicator">
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<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;
}
};

34
eveai_chat_client/static/assets/js/components/index.js Normal file
View File

@@ -0,0 +1,34 @@
// Component barrel export file
// Dit bestand maakt het eenvoudiger om alle componenten in één keer te importeren
// Importeer eerst alle componenten lokaal
import { TypingIndicator } from './TypingIndicator.js';
import { FormField } from './FormField.js';
import { DynamicForm } from './DynamicForm.js';
import { ChatMessage } from './ChatMessage.js';
import { MessageHistory } from './MessageHistory.js';
import { ProgressTracker } from './ProgressTracker.js';
import { LanguageSelector } from './LanguageSelector.js';
import { ChatInput } from './ChatInput.js';
// Exporteer componenten individueel
export { TypingIndicator };
export { FormField };
export { DynamicForm };
export { ChatMessage };
export { MessageHistory };
export { ProgressTracker };
export { LanguageSelector };
export { ChatInput };
// Debug logging voor index.js
console.log('🔍 [DEBUG] Components index.js geladen, exporteert:', {
TypingIndicator: typeof TypingIndicator,
ChatMessage: typeof ChatMessage,
MessageHistory: typeof MessageHistory,
ChatInput: typeof ChatInput
});
// Nu kunnen componenten op verschillende manieren worden geïmporteerd:
// 1. import { FormField, ChatMessage } from './components';
// 2. import { ChatInput } from './components/ChatInput.js';

71
eveai_chat_client/static/assets/js/iconManager.js
View File

@@ -88,48 +88,43 @@ window.iconManager = {
}
};
// Functie om iconManager toe te voegen aan het DynamicForm component
function initDynamicFormWithIcons() {
if (window.DynamicForm) {
const originalCreated = window.DynamicForm.created || function() {};
// Export de iconManager functie om te gebruiken in Vue componenten
// Dit vervangt de complexe injectie in het DynamicForm component
export { iconManager as default };
window.DynamicForm.created = function() {
// Roep de oorspronkelijke created methode aan als die bestond
originalCreated.call(this);
// We exporteren iconManager als default, maar houden ook de window.iconManager beschikbaar
// voor backwards compatibility met bestaande code
// Laad het icoon als het beschikbaar is
if (this.formData && this.formData.icon) {
window.iconManager.loadIcon(this.formData.icon);
}
};
// Voeg watcher toe voor formData.icon
if (!window.DynamicForm.watch) {
window.DynamicForm.watch = {};
// Maak een Vue mixin die iconManager toevoegt aan elk component dat het nodig heeft
export const IconManagerMixin = {
created() {
// Check of er een formData.icon property is
if (this.formData && this.formData.icon) {
window.iconManager.loadIcon(this.formData.icon);
}
},
window.DynamicForm.watch['formData.icon'] = {
handler: function(newIcon) {
if (newIcon) {
window.iconManager.loadIcon(newIcon);
}
},
immediate: true
};
// Watch voor formData.icon veranderingen
watch: {
'formData.icon': function(newIcon) {
if (newIcon) {
window.iconManager.loadIcon(newIcon);
}
}
},
console.log('DynamicForm is uitgebreid met iconManager functionaliteit');
} else {
console.warn('DynamicForm component is niet beschikbaar. iconManager kan niet worden toegevoegd.');
// Methode om toe te voegen aan componenten
methods: {
loadIcon(iconName, options) {
window.iconManager.loadIcon(iconName, options);
},
loadIcons(iconNames, options) {
window.iconManager.loadIcons(iconNames, options);
}
}
}
};
// Probeer het DynamicForm component te initialiseren zodra het document geladen is
document.addEventListener('DOMContentLoaded', function() {
// Wacht een korte tijd om er zeker van te zijn dat DynamicForm is geladen
setTimeout(initDynamicFormWithIcons, 100);
});
// Als DynamicForm al beschikbaar is, initialiseer direct
if (window.DynamicForm) {
initDynamicFormWithIcons();
}
// We hoeven niet langer DynamicForm te manipuleren
// omdat Vue componenten nu de IconManagerMixin kunnen gebruiken
console.log('IconManager en IconManagerMixin zijn beschikbaar voor componenten');

41
eveai_chat_client/templates/base.html
View File

@@ -36,7 +36,7 @@
{{ tenant_make.name|default('') }}
</div>
<div id="language-selector-container"></div>
<div class="sidebar-explanation" v-html="compiledExplanation"></div>
<div class="sidebar-explanation" id="sidebar-explanation"></div>
</div>
<!-- Right content area - contains the chat client -->
@@ -47,44 +47,7 @@
</div>
</div>
<script src="{{url_for('static', filename='dist/chat-client.js')}}"></script>
<script>
// Maak ondersteunde talen beschikbaar voor de client
window.config = {
supportedLanguages: [
{% for lang_code in config.SUPPORTED_LANGUAGES %}
{
code: "{{ lang_code }}",
name: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['iso 639-1'] }}",
flag: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['flag'] }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
]
};
// 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>
{% include 'scripts.html' %}
{% block scripts %}{% endblock %}
</body>
</html>

21
eveai_chat_client/templates/chat.html
View File

@@ -4,10 +4,8 @@
{% block title %}{{ tenant_make.name|default('EveAI') }} - AI Chat{% endblock %}
{% block head %}
<!-- Chat specific CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/chat-components.css') }}">
<!-- Pass server data to JavaScript -->
<!-- Pass server data to JavaScript - vroeg in de head -->
<script>
// Definieer chatConfig voordat componenten worden geladen
window.chatConfig = {
@@ -24,7 +22,11 @@
apiPrefix: '{{ request.headers.get("X-Forwarded-Prefix", "") }}',
language: '{{ session.magic_link.specialist_args.language|default("nl") }}',
supportedLanguageDetails: {{ config.SUPPORTED_LANGUAGE_DETAILS|tojson|safe }},
allowedLanguages: {{ tenant_make.allowed_languages|tojson|safe }}
allowedLanguages: {{ tenant_make.allowed_languages|tojson|safe }},
tenantMake: {
name: "{{ tenant_make.name|default('EveAI') }}",
logo_url: "{{ tenant_make.logo_url|default('') }}"
}
};
// Debug info om te controleren of chatConfig correct is ingesteld
@@ -33,14 +35,11 @@
{% endblock %}
{% block content %}
<!-- Gebruik het ChatApp component -->
<chat-app>
</chat-app>
<!-- De chat container is leeg en wordt via JavaScript gevuld -->
<!-- Het ChatApp component wordt via de app-initializer gemount -->
{% endblock %}
{% block scripts %}
<!-- Import components and main app -->
<!-- Alle componenten worden geladen met absolute paden vanaf /static/ -->
<script type="module" src="{{ url_for('static', filename='assets/js/chat-app.js') }}"></script>
<!-- Alle componenten worden al geladen via chat-client.js in scripts.html -->
<!-- Geen extra imports nodig -->
{% endblock %}

33
eveai_chat_client/templates/scripts.html Normal file
View File

@@ -0,0 +1,33 @@
<!-- Material Icons voor icoontjes in de interface -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
<!-- Chat client JS - bundled met alle componenten en ES modules -->
<script src="{{url_for('static', filename='dist/chat-client.js')}}"></script>
<script>
// Voeg taalinstellingen toe aan chatConfig indien deze nog niet bestaan
if (window.chatConfig) {
// Maak supportedLanguages beschikbaar voor de client
window.chatConfig.supportedLanguages = [
{% for lang_code in config.SUPPORTED_LANGUAGES %}
{
code: "{{ lang_code }}",
name: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['iso 639-1'] }}",
flag: "{{ config.SUPPORTED_LANGUAGE_DETAILS[config.SUPPORTED_LANGUAGES_FULL[loop.index0]]['flag'] }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
];
// Voeg tenantMake toe aan chatConfig als die nog niet bestaat
if (!window.chatConfig.tenantMake) {
window.chatConfig.tenantMake = {
name: "{{ tenant_make.name|default('EveAI') }}",
logo_url: "{{ tenant_make.logo_url|default('') }}"
};
}
console.log('Taalinstellingen toegevoegd aan chatConfig');
} else {
console.warn('chatConfig is niet gedefinieerd in scripts.html');
}
</script>

72
frontend_src/js/chat-client.js Normal file
View File

@@ -0,0 +1,72 @@
// Chat Client JavaScript modules
// Modern gebundelde versie met ES modules
// CSS imports - zorg dat deze bestanden bestaan en correct worden gebundeld door Parcel
import '../css/chat-client.css';
// CSS imports uit eveai_chat_client
import '../../../eveai_chat_client/static/assets/css/chat.css';
import '../../../eveai_chat_client/static/assets/css/chat-components.css';
import '../../../eveai_chat_client/static/assets/css/chat-input.css';
import '../../../eveai_chat_client/static/assets/css/chat-message.css';
import '../../../eveai_chat_client/static/assets/css/form.css';
import '../../../eveai_chat_client/static/assets/css/form-message.css';
import '../../../eveai_chat_client/static/assets/css/language-selector.css';
// Dependencies
import { createApp } from 'vue';
import { marked } from 'marked';
// Maak fundamentele libraries globaal beschikbaar
window.Vue = { createApp };
window.marked = marked;
// Support tools
import iconManager, { IconManagerMixin } from '../../../eveai_chat_client/static/assets/js/iconManager.js';
import '../../../eveai_chat_client/static/assets/js/translation.js';
// Gebruik barrel export voor componenten
import * as Components from '../../../eveai_chat_client/static/assets/js/components/index.js';
// Maak Components globaal beschikbaar voor debugging
window.Components = Components;
console.log('Components loaded:', Object.keys(Components));
// Main chat application - moet als laatste worden geladen
import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
// Wacht tot het document volledig is geladen voordat we Vue initialiseren
document.addEventListener('DOMContentLoaded', () => {
console.log('Initializing Chat Application');
// Check of #app element bestaat
const appElement = document.getElementById('app');
if (!appElement) {
console.error('DOM element #app not found. Cannot initialize Vue application.');
return;
}
console.log('DOM element #app exists:', appElement);
try {
// Maak de Vue applicatie aan
const app = createApp(ChatApp);
// Registreer alle componenten globaal
for (const [name, component] of Object.entries(Components)) {
app.component(name, component);
}
// Voeg de IconManagerMixin toe voor alle componenten
app.mixin(IconManagerMixin);
// Mount de applicatie op #app
const mountedApp = app.mount('#app');
// Bewaar een referentie naar de app voor debugging
window.__vueApp = app;
console.log('Vue app mounted successfully');
} catch (error) {
console.error('Error initializing Vue application:', error);
}
});

307
nginx/frontend_src/js/chat-client.js
View File

@@ -1,8 +1,5 @@
// Chat Client JavaScript modules
// Importeer alle chat client componenten
// CSS imports
import '../css/chat-client.css';
import '../../../eveai_chat_client/static/assets/css/chat.css';
import '../../../eveai_chat_client/static/assets/css/chat-components.css';
import '../../../eveai_chat_client/static/assets/css/chat-input.css';
@@ -11,29 +8,295 @@ import '../../../eveai_chat_client/static/assets/css/form.css';
import '../../../eveai_chat_client/static/assets/css/form-message.css';
import '../../../eveai_chat_client/static/assets/css/language-selector.css';
import { createApp } from 'vue';
window.Vue = { createApp };
// Dependencies
import { createApp, version } from 'vue';
import { marked } from 'marked';
import { FormField } from '../../../eveai_chat_client/static/assets/js/components/FormField.js';
// Vue en andere bibliotheken beschikbaar maken
window.Vue = { createApp, version };
window.marked = marked;
// Debug: Check Vue build type
console.log('🔍 [DEBUG] Vue object:', window.Vue);
console.log('🔍 [DEBUG] Vue.createApp:', typeof window.Vue.createApp);
console.log('🔍 [DEBUG] Vue.version:', window.Vue.version);
// Main chat application
import '../../../eveai_chat_client/static/assets/js/chat-app.js';
// Support tools
import '../../../eveai_chat_client/static/assets/js/iconManager.js';
import '../../../eveai_chat_client/static/assets/js/translation.js';
// Chat components
import '../../../eveai_chat_client/static/assets/js/components/ChatInput.js';
import '../../../eveai_chat_client/static/assets/js/components/ChatMessage.js';
import '../../../eveai_chat_client/static/assets/js/components/DynamicForm.js';
import '../../../eveai_chat_client/static/assets/js/components/FormField.js';
import '../../../eveai_chat_client/static/assets/js/components/FormMessage.js';
import '../../../eveai_chat_client/static/assets/js/components/LanguageSelector.js';
import '../../../eveai_chat_client/static/assets/js/components/MaterialIconManager.js';
import '../../../eveai_chat_client/static/assets/js/components/MessageHistory.js';
import '../../../eveai_chat_client/static/assets/js/components/ProgressTracker.js';
import '../../../eveai_chat_client/static/assets/js/components/TypingIndicator.js';
// Gebruik barrel export voor componenten
import * as Components from '../../../eveai_chat_client/static/assets/js/components/index.js';
console.log('Chat client modules geladen en gebundeld.');
// Maak Components globaal beschikbaar voor debugging
window.Components = Components;
console.log('Components loaded:', Object.keys(Components));
// Import specifieke componenten
import { LanguageSelector } from '../../../eveai_chat_client/static/assets/js/components/LanguageSelector.js';
import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
// Globale Vue error tracking
window.addEventListener('error', function(event) {
console.error('🚨 [Global Error]', event.error);
});
// Wacht tot DOM geladen is
document.addEventListener('DOMContentLoaded', function() {
console.log('🔍 [DEBUG] DOM content loaded, initializing application...');
// Controleer of chatConfig is ingesteld
if (!window.chatConfig) {
console.error('chatConfig is niet beschikbaar');
window.chatConfig = {};
}
// Vul de sidebar explanation in
fillSidebarExplanation();
// Initialiseer language selector
initializeLanguageSelector();
// Initialiseer chat app (simpel)
initializeChatApp();
});
/**
* Vul de sidebar explanation in
*/
function fillSidebarExplanation() {
const sidebarElement = document.getElementById('sidebar-explanation');
if (sidebarElement && window.chatConfig.explanation) {
if (typeof window.marked === 'function') {
sidebarElement.innerHTML = window.marked(window.chatConfig.explanation);
} else if (window.marked && typeof window.marked.parse === 'function') {
sidebarElement.innerHTML = window.marked.parse(window.chatConfig.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
} else {
sidebarElement.innerHTML = window.chatConfig.explanation;
}
}
}
/**
* Initialiseert de language selector
*/
function initializeLanguageSelector() {
console.log('🔍 [DEBUG] Start initializeLanguageSelector');
const container = document.getElementById('language-selector-container');
console.log('🔍 [DEBUG] Container element:', container);
if (!container) {
console.error('#language-selector-container niet gevonden');
return;
}
try {
// Maak props voor de component
const props = {
initialLanguage: window.chatConfig.language || 'nl',
supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
};
console.log('🔍 [DEBUG] Props voor LanguageSelector:', JSON.stringify(props, null, 2));
// Mount de component direct - BELANGRIJK: we gebruiken window.Vue als dat beschikbaar is
// Dit is nodig voor compatibiliteit met oude code
const app = window.Vue && typeof window.Vue.createApp === 'function'
? window.Vue.createApp(LanguageSelector, props)
: createApp(LanguageSelector, props);
// Registreer error handler
app.config.errorHandler = (err, vm, info) => {
console.error('🚨 [Vue Error]', err);
console.error('Component:', vm);
console.error('Error Info:', info);
};
try {
// Mount de component
const mountedApp = app.mount(container);
console.log('🔍 [DEBUG] LanguageSelector instantie gemount:', mountedApp);
} catch (mountError) {
console.error('🚨 [ERROR] Fout bij mounten van LanguageSelector met Vue:', mountError);
console.log('🔍 [DEBUG] Probeer alternatieve direct DOM rendering...');
// Probeer de legacy renderComponent methode als Vue mounting mislukt
if (typeof LanguageSelector.renderComponent === 'function') {
console.log('🔍 [DEBUG] LanguageSelector.renderComponent gevonden, directe rendering uitvoeren');
try {
LanguageSelector.renderComponent(container, props);
console.log('🔍 [DEBUG] LanguageSelector direct gerenderd via renderComponent');
} catch (renderError) {
console.error('🚨 [ERROR] Ook alternatieve rendering gefaald:', renderError);
}
} else {
console.error('🚨 [ERROR] Geen renderComponent methode beschikbaar op LanguageSelector');
// Noodoplossing: Handmatige DOM manipulatie
container.innerHTML = `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
<div class="select-wrapper">
<select id="language-select" class="language-select">
<option value="nl" selected>🇳🇱 Nederlands</option>
<option value="en">🇬🇧 English</option>
</select>
</div>
</div>
`;
// Event listener voor de fallback oplossing
const selectElement = container.querySelector('#language-select');
if (selectElement) {
selectElement.addEventListener('change', (e) => {
const newLanguage = e.target.value;
console.log(`Taal gewijzigd naar ${newLanguage} (via fallback)`);
// Update chatConfig
if (window.chatConfig) {
window.chatConfig.language = newLanguage;
}
// Stuur event voor andere componenten
const globalEvent = new CustomEvent('language-changed', {
detail: { language: newLanguage }
});
document.dispatchEvent(globalEvent);
// Sla voorkeur op
localStorage.setItem('preferredLanguage', newLanguage);
});
}
}
}
// Language change event listener
document.addEventListener('vue:language-changed', function(event) {
const newLanguage = event.detail.language;
console.log(`Taal gewijzigd naar ${newLanguage}`);
// Update chatConfig
if (window.chatConfig) {
window.chatConfig.language = newLanguage;
}
// Stuur event voor andere componenten
const globalEvent = new CustomEvent('language-changed', {
detail: { language: newLanguage }
});
document.dispatchEvent(globalEvent);
// Sla voorkeur op
localStorage.setItem('preferredLanguage', newLanguage);
});
console.log('🔍 [DEBUG] Language selector setup voltooid');
} catch (error) {
console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
console.error('Stack trace:', error.stack);
}
}
/**
* Initialiseert de chat app (Vue component)
*/
function initializeChatApp() {
console.log('🔍 [DEBUG] Start initializeChatApp');
const container = document.querySelector('.chat-container');
console.log('🔍 [DEBUG] Chat container element:', container);
if (!container) {
console.error('.chat-container niet gevonden');
return;
}
try {
// Controleer of componenten beschikbaar zijn en log debug informatie
console.log('🔍 [DEBUG] ChatApp component beschikbaar:', ChatApp);
console.log('🔍 [DEBUG] Geïmporteerde componenten:', Object.keys(Components));
console.log('🔍 [DEBUG] MessageHistory component:', Components.MessageHistory);
console.log('🔍 [DEBUG] ChatInput component:', Components.ChatInput);
// Geen workarounds voor Popper nodig
// Controleer of renderComponent methoden beschikbaar zijn
console.log('🔍 [DEBUG] MessageHistory.renderComponent beschikbaar:',
typeof Components.MessageHistory.renderComponent === 'function');
console.log('🔍 [DEBUG] ChatInput.renderComponent beschikbaar:',
typeof Components.ChatInput.renderComponent === 'function');
if (!ChatApp) {
throw new Error('ChatApp component niet gevonden');
}
// Extra verificatie dat alle sub-componenten beschikbaar zijn
if (!Components.MessageHistory || !Components.ChatInput ||
!Components.TypingIndicator || !Components.ChatMessage) {
console.warn('⚠️ [WARN] Niet alle benodigde sub-componenten zijn geladen!');
}
// Maak props voor de component
const props = {
apiPrefix: window.chatConfig.apiPrefix || '',
conversationId: window.chatConfig.conversationId || 'default',
userId: window.chatConfig.userId || null,
userName: window.chatConfig.userName || '',
initialLanguage: window.chatConfig.language || 'nl',
supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
};
console.log('🔍 [DEBUG] Alle componenten registreren voor ChatApp...');
console.log('🔍 [DEBUG] Props voor ChatApp:', JSON.stringify(props, null, 2));
// Mount de component met alle nodige componenten
const app = createApp(ChatApp, props);
// Registreer alle componenten globaal
Object.entries(Components).forEach(([name, component]) => {
console.log(`🔍 [DEBUG] Registreer component globaal: ${name}`);
app.component(name, component);
});
// Registreer error handler
app.config.errorHandler = (err, vm, info) => {
console.error('🚨 [Vue Error in ChatApp]', err);
console.error('Component:', vm);
console.error('Error Info:', info);
};
// Log app object voor debugging
console.log('🔍 [DEBUG] ChatApp Vue app object:', app);
console.log('🔍 [DEBUG] App.mount functie:', typeof app.mount);
// Mount de component
const mountedApp = app.mount(container);
console.log('🔍 [DEBUG] ChatApp gemount, instance:', mountedApp);
// Bewaar referentie globaal voor debugging
window.__chatApp = mountedApp;
// Bewaar een referentie naar de Vue instantie voor gebruik door andere componenten
window.__vueApp = app;
console.log('🔍 [DEBUG] Vue app instance globaal beschikbaar als window.__vueApp');
// Log belangrijke methods van de gemounte component
console.log('🔍 [DEBUG] Belangrijke ChatApp methods beschikbaar:', {
renderComponent: typeof mountedApp.renderComponent === 'function',
initializeChat: typeof mountedApp.initializeChat === 'function'
});
} catch (error) {
console.error('🚨 [CRITICAL ERROR] Bij initialiseren chat app:', error);
console.error('Stack trace:', error.stack);
// Fallback naar placeholder
container.innerHTML = '<div>Fout bij het initialiseren van de chat applicatie</div>';
}
}
console.log('Chat client modules geladen en gebundeld met moderne ES module structuur.');

12
nginx/package.json
View File

@@ -20,6 +20,18 @@
"@parcel/transformer-sass": "^2.15.2",
"parcel": "^2.15.2"
},
"alias": {
"vue": "vue/dist/vue.esm-bundler.js"
},
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead"
],
"@parcel/transformer-js": {
"inlineFS": true,
"inlineEnvironment": ["NODE_ENV"]
},
"scripts": {
"prebuild": "mkdir -p static/dist && cp -r ../eveai_app/static/assets static/",
"build": "npm run prebuild && npm run build:main && npm run build:chat",