Eerste goed werkende versie van een formulier in de chat input.
This commit is contained in:
Josako
@@ -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 = {
|
||||
<message-history
|
||||
:messages="displayMessages"
|
||||
:is-typing="isTyping"
|
||||
:form-values="formValues"
|
||||
:is-submitting-form="isSubmittingForm"
|
||||
:api-prefix="apiPrefix"
|
||||
:auto-scroll="true"
|
||||
@@ -641,16 +600,12 @@ export const ChatApp = {
|
||||
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) {
|
||||
// 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);
|
||||
|
||||
Reference in New Issue
Block a user