diff --git a/eveai_chat_client/static/js/chat-app.js b/eveai_chat_client/static/js/chat-app.js index 4e547b4..721c963 100644 --- a/eveai_chat_client/static/js/chat-app.js +++ b/eveai_chat_client/static/js/chat-app.js @@ -4,9 +4,19 @@ import { FormField } from '/static/assets/js/components/FormField.js'; import { DynamicForm } from '/static/assets/js/components/DynamicForm.js'; import { ChatMessage } from '/static/assets/js/components/ChatMessage.js'; import { MessageHistory } from '/static/assets/js/components/MessageHistory.js'; -import { ChatInput } from '/static/assets/js/components/ChatInput.js'; import { ProgressTracker } from '/static/assets/js/components/ProgressTracker.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 '/static/assets/js/components/ChatInput.js'; + // Main Chat Application export const ChatApp = { name: 'ChatApp', @@ -175,9 +185,13 @@ export const ChatApp = { // Initialize form values if it's a form if (type === 'form' && formData) { - this.$set(this.formValues, message.id, {}); + // Vue 3 compatibele manier om reactieve objecten bij te werken + this.formValues[message.id] = {}; formData.fields.forEach(field => { - this.$set(this.formValues[message.id], field.name, field.defaultValue || ''); + const fieldName = field.name || field.id; + if (fieldName) { + this.formValues[message.id][fieldName] = field.defaultValue || ''; + } }); } @@ -256,49 +270,6 @@ export const ChatApp = { } }, - // Form handling - async submitForm(formData, messageId) { - this.isSubmittingForm = true; - - console.log('Submitting form:', formData.title, this.formValues[messageId]); - - try { - const response = await this.callAPI('/api/submit_form', { - formData: this.formValues[messageId], - formType: formData.title, - conversation_id: this.conversationId, - user_id: this.userId - }); - - if (response.success) { - this.addMessage( - `✅ ${response.message || 'Formulier succesvol verzonden!'}`, - 'ai', - 'text' - ); - - // Remove the form message - this.removeMessage(messageId); - } else { - this.addMessage( - `❌ Er ging iets mis: ${response.error || 'Onbekende fout'}`, - 'ai', - 'text' - ); - } - - } catch (error) { - console.error('Error submitting form:', error); - this.addMessage( - 'Sorry, er ging iets mis bij het verzenden van het formulier. Probeer het opnieuw.', - 'ai', - 'text' - ); - } finally { - this.isSubmittingForm = false; - } - }, - async submitFormFromInput(formValues) { this.isSubmittingForm = true; @@ -324,7 +295,7 @@ export const ChatApp = { 'text' ); - // Wis het huidige formulier + // Wis het huidige formulier (ongeacht of het succesvol was of niet) this.currentInputFormData = null; } else { this.addMessage( @@ -332,6 +303,8 @@ export const ChatApp = { 'ai', 'text' ); + // Wis ook hier het formulier na een fout + this.currentInputFormData = null; } } catch (error) { @@ -341,6 +314,8 @@ export const ChatApp = { 'ai', 'text' ); + // Wis ook hier het formulier na een fout + this.currentInputFormData = null; } finally { this.isSubmittingForm = false; } @@ -439,15 +414,23 @@ export const ChatApp = { handleSpecialistComplete(eventData) { console.log('ChatApp received specialist-complete:', eventData); - // Als er een form_request is, voeg deze toe als nieuw bericht + // Als er een form_request is, toon deze in de ChatInput component if (eventData.form_request) { - console.log('Adding form request as new message:', eventData.form_request); + console.log('Setting form request in ChatInput:', eventData.form_request); - // Converteer de form_request naar het verwachte formaat - const formData = this.convertFormRequest(eventData.form_request); + try { + // Converteer de form_request naar het verwachte formaat + const formData = this.convertFormRequest(eventData.form_request); - // Voeg het formulier toe als een nieuw AI bericht - this.addMessage('', 'ai', 'form', formData); + // Stel het formulier in als currentInputFormData in plaats van als bericht toe te voegen + if (formData && formData.title && formData.fields) { + this.currentInputFormData = formData; + } else { + console.error('Invalid form data after conversion:', formData); + } + } catch (err) { + console.error('Error processing form request:', err); + } } }, @@ -466,19 +449,44 @@ export const ChatApp = { convertFormRequest(formRequest) { console.log('Converting form request:', formRequest); - // Converteer de fields van object naar array formaat - const fieldsArray = Object.entries(formRequest.fields || {}).map(([fieldId, fieldDef]) => ({ - id: fieldId, - name: fieldDef.name, - type: fieldDef.type, - description: fieldDef.description, - required: fieldDef.required || false, - defaultValue: fieldDef.default || '', - allowedValues: fieldDef.allowed_values || null - })); + if (!formRequest) { + console.error('Geen geldig formRequest ontvangen'); + return null; + } - return { - title: formRequest.name, + // Controleer of fields een object is voordat we converteren + let fieldsArray; + if (formRequest.fields && typeof formRequest.fields === 'object' && !Array.isArray(formRequest.fields)) { + // Converteer de fields van object naar array formaat + fieldsArray = Object.entries(formRequest.fields).map(([fieldId, fieldDef]) => ({ + id: fieldId, + name: fieldDef.name || fieldId, // Gebruik fieldId als fallback + type: fieldDef.type || 'text', // Standaard naar text + description: fieldDef.description || '', + required: fieldDef.required || false, + default: fieldDef.default || '', + allowedValues: fieldDef.allowed_values || null + })); + } else if (Array.isArray(formRequest.fields)) { + // Als het al een array is, zorg dat alle velden correct zijn + fieldsArray = formRequest.fields.map(field => ({ + id: field.id || field.name, + name: field.name || field.id, + type: field.type || 'text', + description: field.description || '', + required: field.required || false, + default: field.default || field.defaultValue || '', + allowedValues: field.allowed_values || field.allowedValues || null + })); + } else { + // Fallback naar lege array als er geen velden zijn + console.warn('Formulier heeft geen geldige velden'); + fieldsArray = []; + } + + return { + title: formRequest.name || formRequest.title || 'Formulier', + description: formRequest.description || '', icon: formRequest.icon || 'form', version: formRequest.version || '1.0', fields: fieldsArray @@ -548,54 +556,6 @@ export const ChatApp = { this.$refs.searchInput?.focus(); }, - handleSpecialistComplete(eventData) { - console.log('ChatApp received specialist-complete:', eventData); - - // Als er een form_request is, stuur deze naar de ChatInput component - if (eventData.form_request) { - console.log('Providing form request to ChatInput:', eventData.form_request); - - // Converteer de form_request naar het verwachte formaat - const formData = this.convertFormRequest(eventData.form_request); - - // Update de currentInputFormData voor ChatInput - this.currentInputFormData = formData; - } - }, - - handleSpecialistError(eventData) { - console.log('ChatApp received specialist-error:', eventData); - - // Voeg foutbericht toe - this.addMessage( - eventData.message || 'Er is een fout opgetreden bij het verwerken van uw verzoek.', - 'ai', - 'error' - ); - }, - - // Helper methode om form_request te converteren naar het verwachte formaat - convertFormRequest(formRequest) { - console.log('Converting form request:', formRequest); - - // Converteer de fields van object naar array formaat - const fieldsArray = Object.entries(formRequest.fields || {}).map(([fieldId, fieldDef]) => ({ - id: fieldId, - name: fieldDef.name, - type: fieldDef.type, - description: fieldDef.description, - required: fieldDef.required || false, - defaultValue: fieldDef.default || '', - allowedValues: fieldDef.allowed_values || null - })); - - return { - title: formRequest.name, - icon: formRequest.icon || 'form', - version: formRequest.version || '1.0', - fields: fieldsArray - }; - }, }, template: ` @@ -604,7 +564,6 @@ export const ChatApp = { { 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) { - // Zorg ervoor dat alle componenten globaal beschikbaar zijn via window - window.TypingIndicator = TypingIndicator; - window.FormField = FormField; - window.DynamicForm = DynamicForm; - window.ChatMessage = ChatMessage; - window.MessageHistory = MessageHistory; - window.ChatInput = ChatInput; - window.ProgressTracker = ProgressTracker; // Register ALL components globally window.__vueApp.component('TypingIndicator', TypingIndicator); diff --git a/eveai_chat_client/static/js/components/ChatInput.js b/eveai_chat_client/static/js/components/ChatInput.js index 446feb1..646a032 100644 --- a/eveai_chat_client/static/js/components/ChatInput.js +++ b/eveai_chat_client/static/js/components/ChatInput.js @@ -1,9 +1,21 @@ // static/js/components/ChatInput.js -export const ChatInput = { + // 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 + + export const ChatInput = { name: 'ChatInput', components: { - 'dynamic-form': window.__vueApp ? DynamicForm : null + 'dynamic-form': window.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]); + } }, props: { currentMessage: { @@ -29,18 +41,44 @@ export const ChatInput = { }, emits: ['send-message', 'update-message', 'submit-form'], watch: { - formData: { - handler(newFormData) { - console.log('ChatInput received formData:', newFormData); - if (newFormData) { - this.formValues = {}; // Reset formulierwaarden - this.showForm = true; - } else { - this.showForm = false; + 'formData.icon': { + handler(newIcon) { + if (newIcon && window.iconManager) { + window.iconManager.ensureIconsLoaded({}, [newIcon]); } }, immediate: true }, + formData: { + handler(newFormData, oldFormData) { + console.log('ChatInput formData changed:', newFormData); + + if (!newFormData) { + console.log('FormData is null of undefined'); + this.formValues = {}; + return; + } + + // Controleer of velden aanwezig zijn + if (!newFormData.fields) { + console.error('FormData bevat geen velden!', newFormData); + return; + } + + console.log('Velden in formData:', newFormData.fields); + console.log('Aantal velden:', Array.isArray(newFormData.fields) + ? newFormData.fields.length + : Object.keys(newFormData.fields).length); + + // Initialiseer formulierwaarden + this.initFormValues(); + + // Log de geïnitialiseerde waarden + console.log('Formulierwaarden geïnitialiseerd:', this.formValues); + }, + immediate: true, + deep: true + }, currentMessage(newVal) { this.localMessage = newVal; }, @@ -52,8 +90,7 @@ export const ChatInput = { data() { return { localMessage: this.currentMessage, - formValues: {}, - showForm: false + formValues: {} }; }, computed: { @@ -72,20 +109,53 @@ export const ChatInput = { }, canSend() { - const hasValidForm = this.showForm && this.formData && this.validateForm(); + const hasValidForm = this.formData && this.validateForm(); const hasValidMessage = this.localMessage.trim() && !this.isOverLimit; return (!this.isLoading) && (hasValidForm || hasValidMessage); }, sendButtonText() { - return this.showForm ? 'Verstuur formulier' : 'Verstuur bericht'; + if (this.isLoading) { + return 'Verzenden...'; + } + return this.formData ? 'Verstuur formulier' : 'Verstuur bericht'; } }, mounted() { this.autoResize(); + // Debug informatie over formData bij initialisatie + console.log('ChatInput mounted, formData:', this.formData); + if (this.formData) { + console.log('FormData bij mount:', JSON.stringify(this.formData)); + } }, methods: { + initFormValues() { + if (this.formData && this.formData.fields) { + console.log('Initializing form values for fields:', this.formData.fields); + this.formValues = {}; + + // Verwerk array van velden + if (Array.isArray(this.formData.fields)) { + this.formData.fields.forEach(field => { + const fieldId = field.id || field.name; + if (fieldId) { + this.formValues[fieldId] = field.default !== undefined ? field.default : ''; + } + }); + } + // Verwerk object van velden + else if (typeof this.formData.fields === 'object') { + Object.entries(this.formData.fields).forEach(([fieldId, field]) => { + this.formValues[fieldId] = field.default !== undefined ? field.default : ''; + }); + } + + console.log('Initialized form values:', this.formValues); + } + }, + handleKeydown(event) { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); @@ -98,14 +168,12 @@ export const ChatInput = { sendMessage() { if (!this.canSend) return; - if (this.showForm && this.formData) { + if (this.formData) { // Valideer het formulier if (this.validateForm()) { // Verstuur het formulier this.$emit('submit-form', this.formValues); this.formValues = {}; - // Reset het formulier na verzenden - this.showForm = false; } } else if (this.localMessage.trim()) { // Verstuur normaal bericht @@ -113,6 +181,12 @@ export const ChatInput = { } }, + // Deze methode houden we voor de volledigheid, maar zal niet meer direct worden aangeroepen + cancelForm() { + this.formValues = {}; + // We sturen geen emit meer, maar het kan nuttig zijn om in de toekomst te hebben + }, + validateForm() { if (!this.formData || !this.formData.fields) return false; @@ -160,42 +234,39 @@ export const ChatInput = { this.focusInput(); }, - toggleForm() { - this.showForm = !this.showForm; - if (!this.showForm) { - this.focusInput(); - } - }, - - submitForm() { - if (this.canSubmitForm) { - this.$emit('submit-form', { ...this.formValues }); - this.showForm = false; - this.focusInput(); - } - }, - - cancelForm() { - this.showForm = false; - this.focusInput(); - }, - updateFormValues(newValues) { this.formValues = { ...newValues }; } }, template: `
-
+ +
+ +
+ +
+ +
Fout: Geen velden gevonden in formulier
+ +
+ +
@@ -218,26 +289,15 @@ export const ChatInput = {
-
- - +
- +
- -