tussentijdse status voor significante wijzigingen. Bezig aan creatie Dynamic Form in de chat client.
This commit is contained in:
Josako
@@ -36,6 +36,7 @@ export const ChatApp = {
|
||||
isSubmittingForm: false,
|
||||
messageIdCounter: 1,
|
||||
formValues: {},
|
||||
currentInputFormData: null,
|
||||
|
||||
// API prefix voor endpoints
|
||||
apiPrefix: chatConfig.apiPrefix || '',
|
||||
@@ -298,6 +299,53 @@ export const ChatApp = {
|
||||
}
|
||||
},
|
||||
|
||||
async submitFormFromInput(formValues) {
|
||||
this.isSubmittingForm = true;
|
||||
|
||||
if (!this.currentInputFormData) {
|
||||
console.error('No form data available');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Submitting form from input:', this.currentInputFormData.title, formValues);
|
||||
|
||||
try {
|
||||
const response = await this.callAPI('/api/submit_form', {
|
||||
formData: formValues,
|
||||
formType: this.currentInputFormData.title,
|
||||
conversation_id: this.conversationId,
|
||||
user_id: this.userId
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
this.addMessage(
|
||||
`✅ ${response.message || 'Formulier succesvol verzonden!'}`,
|
||||
'ai',
|
||||
'text'
|
||||
);
|
||||
|
||||
// Wis het huidige formulier
|
||||
this.currentInputFormData = null;
|
||||
} 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;
|
||||
}
|
||||
},
|
||||
|
||||
// Message actions
|
||||
|
||||
retryMessage(messageId) {
|
||||
@@ -387,6 +435,56 @@ export const ChatApp = {
|
||||
this.filteredMessages = [];
|
||||
},
|
||||
|
||||
// Event handlers voor specialist events
|
||||
handleSpecialistComplete(eventData) {
|
||||
console.log('ChatApp received specialist-complete:', eventData);
|
||||
|
||||
// Als er een form_request is, voeg deze toe als nieuw bericht
|
||||
if (eventData.form_request) {
|
||||
console.log('Adding form request as new message:', eventData.form_request);
|
||||
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
};
|
||||
},
|
||||
|
||||
// Event handlers
|
||||
handleResize() {
|
||||
this.isMobile = window.innerWidth <= 768;
|
||||
@@ -450,11 +548,54 @@ export const ChatApp = {
|
||||
this.$refs.searchInput?.focus();
|
||||
},
|
||||
|
||||
handleSpecialistError(errorData) {
|
||||
console.error('Specialist error:', errorData);
|
||||
// Als we willen kunnen we hier nog extra logica toevoegen, zoals statistieken bijhouden of centraal loggen
|
||||
},
|
||||
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: `
|
||||
@@ -469,6 +610,7 @@ export const ChatApp = {
|
||||
:auto-scroll="true"
|
||||
@submit-form="submitForm"
|
||||
@specialist-error="handleSpecialistError"
|
||||
@specialist-complete="handleSpecialistComplete"
|
||||
ref="messageHistory"
|
||||
class="chat-messages-area"
|
||||
></message-history>
|
||||
@@ -480,10 +622,12 @@ export const ChatApp = {
|
||||
:max-length="2000"
|
||||
:allow-file-upload="true"
|
||||
:allow-voice-message="false"
|
||||
:form-data="currentInputFormData"
|
||||
@send-message="sendMessage"
|
||||
@update-message="updateCurrentMessage"
|
||||
@upload-file="handleFileUpload"
|
||||
@record-voice="handleVoiceRecord"
|
||||
@submit-form="submitFormFromInput"
|
||||
ref="chatInput"
|
||||
class="chat-input-area"
|
||||
></chat-input>
|
||||
@@ -493,12 +637,21 @@ export const ChatApp = {
|
||||
|
||||
};
|
||||
|
||||
// Initialize app when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Zorg ervoor dat alle componenten correct geïnitialiseerd zijn voordat ze worden gebruikt
|
||||
const initializeApp = () => {
|
||||
console.log('Initializing Chat Application');
|
||||
|
||||
// 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);
|
||||
window.__vueApp.component('FormField', FormField);
|
||||
@@ -520,4 +673,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
} else {
|
||||
console.error('No existing Vue instance found on window.__vueApp');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize app when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', initializeApp);
|
||||
Reference in New Issue
Block a user