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);
|
||||
|
||||
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);
|
||||
|
||||
if (!formRequest) {
|
||||
console.error('Geen geldig formRequest ontvangen');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 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
|
||||
const fieldsArray = Object.entries(formRequest.fields || {}).map(([fieldId, fieldDef]) => ({
|
||||
fieldsArray = Object.entries(formRequest.fields).map(([fieldId, fieldDef]) => ({
|
||||
id: fieldId,
|
||||
name: fieldDef.name,
|
||||
type: fieldDef.type,
|
||||
description: fieldDef.description,
|
||||
name: fieldDef.name || fieldId, // Gebruik fieldId als fallback
|
||||
type: fieldDef.type || 'text', // Standaard naar text
|
||||
description: fieldDef.description || '',
|
||||
required: fieldDef.required || false,
|
||||
defaultValue: fieldDef.default || '',
|
||||
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,
|
||||
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);
|
||||
|
||||
@@ -1,9 +1,21 @@
|
||||
// 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
|
||||
|
||||
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: `
|
||||
<div class="chat-input-container">
|
||||
<div v-if="formData && showForm" class="dynamic-form-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>
|
||||
<!-- Dynamisch formulier container -->
|
||||
<div v-if="formData" class="dynamic-form-container" style="margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; padding: 15px 15px 5px 15px; position: relative; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
||||
<!-- De titel wordt in DynamicForm weergegeven en niet hier om dubbele titels te voorkomen -->
|
||||
<div v-if="!formData.fields" style="color: red; padding: 10px;">Fout: Geen velden gevonden in formulier</div>
|
||||
<dynamic-form
|
||||
v-if="formData && formData.fields"
|
||||
:form-data="formData"
|
||||
:form-values="formValues"
|
||||
:is-submitting="isLoading"
|
||||
:hide-actions="true"
|
||||
@update:form-values="updateFormValues"
|
||||
></dynamic-form>
|
||||
|
||||
<!-- Geen extra knoppen meer onder het formulier, alles gaat via de hoofdverzendknop -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="chat-input">
|
||||
<!-- Main input area -->
|
||||
<div class="input-main">
|
||||
@@ -219,25 +290,14 @@ export const ChatInput = {
|
||||
|
||||
<!-- Input actions -->
|
||||
<div class="input-actions">
|
||||
<!-- Formulier toggle knop -->
|
||||
<button
|
||||
v-if="hasFormData"
|
||||
@click="toggleForm"
|
||||
class="form-toggle-btn"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'active': showForm }"
|
||||
:title="showForm ? 'Verberg formulier' : 'Toon formulier'"
|
||||
>
|
||||
<i class="material-icons">description</i>
|
||||
</button>
|
||||
|
||||
<!-- Send button -->
|
||||
<!-- Universele verzendknop (voor zowel berichten als formulieren) -->
|
||||
<button
|
||||
@click="sendMessage"
|
||||
class="send-btn"
|
||||
:class="{ 'form-mode': showForm && formData }"
|
||||
:class="{ 'form-mode': formData }"
|
||||
:disabled="!canSend"
|
||||
:title="showForm ? 'Verstuur formulier' : 'Verstuur bericht'"
|
||||
:title="formData ? 'Verstuur formulier' : 'Verstuur bericht'"
|
||||
>
|
||||
<span v-if="isLoading" class="loading-spinner">⏳</span>
|
||||
<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
|
||||
@@ -8,10 +8,6 @@ export const ChatMessage = {
|
||||
return message.id && message.content !== undefined && message.sender && message.type;
|
||||
}
|
||||
},
|
||||
formValues: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isSubmittingForm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -21,7 +17,7 @@ export const ChatMessage = {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['submit-form', 'image-loaded', 'retry-message', 'specialist-complete', 'specialist-error'],
|
||||
emits: ['image-loaded', 'retry-message', 'specialist-complete', 'specialist-error'],
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
@@ -57,7 +53,11 @@ export const ChatMessage = {
|
||||
// Bubble up naar parent component voor eventuele verdere afhandeling
|
||||
this.$emit('specialist-complete', {
|
||||
messageId: this.message.id,
|
||||
...eventData
|
||||
answer: eventData.answer,
|
||||
form_request: eventData.form_request, // Wordt nu door ChatApp verwerkt
|
||||
result: eventData.result,
|
||||
interactionId: eventData.interactionId,
|
||||
taskId: eventData.taskId
|
||||
});
|
||||
},
|
||||
|
||||
@@ -73,9 +73,6 @@ export const ChatMessage = {
|
||||
.replace(/\n/g, '<br>');
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
this.$emit('submit-form', this.message.formData, this.message.id);
|
||||
},
|
||||
|
||||
removeMessage() {
|
||||
// Dit zou een event moeten triggeren naar de parent component
|
||||
@@ -86,9 +83,6 @@ export const ChatMessage = {
|
||||
},
|
||||
|
||||
getMessageClass() {
|
||||
if (this.message.type === 'form') {
|
||||
return 'form-message';
|
||||
}
|
||||
return `message ${this.message.sender}`;
|
||||
}
|
||||
},
|
||||
@@ -157,16 +151,6 @@ export const ChatMessage = {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Dynamic forms -->
|
||||
<template v-if="message.type === 'form'">
|
||||
<dynamic-form
|
||||
:form-data="message.formData"
|
||||
:form-values="formValues[message.id] || {}"
|
||||
:is-submitting="isSubmittingForm"
|
||||
@submit="submitForm"
|
||||
@cancel="removeMessage"
|
||||
></dynamic-form>
|
||||
</template>
|
||||
|
||||
<!-- System messages -->
|
||||
<template v-if="message.type === 'system'">
|
||||
|
||||
@@ -1,12 +1,42 @@
|
||||
export const DynamicForm = {
|
||||
name: 'DynamicForm',
|
||||
created() {
|
||||
// Zorg ervoor dat het icoon geladen wordt als iconManager beschikbaar is
|
||||
if (window.iconManager && this.formData && this.formData.icon) {
|
||||
window.iconManager.loadIcon(this.formData.icon);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (formData) => {
|
||||
return formData && formData.title && formData.fields &&
|
||||
(Array.isArray(formData.fields) || typeof formData.fields === 'object');
|
||||
// Controleer eerst of formData een geldig object is
|
||||
if (!formData || typeof formData !== 'object') {
|
||||
console.error('FormData is niet een geldig object');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Controleer of er een titel of naam is
|
||||
if (!formData.title && !formData.name) {
|
||||
console.error('FormData heeft geen title of name');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Controleer of er velden zijn
|
||||
if (!formData.fields) {
|
||||
console.error('FormData heeft geen fields eigenschap');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Controleer of velden een array of object zijn
|
||||
if (!Array.isArray(formData.fields) && typeof formData.fields !== 'object') {
|
||||
console.error('FormData.fields is geen array of object');
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('FormData is geldig:', formData);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
formValues: {
|
||||
@@ -44,6 +74,14 @@ export const DynamicForm = {
|
||||
this.$emit('update:formValues', newValues);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'formData.icon': {
|
||||
handler(newIcon) {
|
||||
if (newIcon && window.iconManager) {
|
||||
window.iconManager.loadIcon(newIcon);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -97,11 +135,14 @@ export const DynamicForm = {
|
||||
},
|
||||
template: `
|
||||
<div class="dynamic-form" :class="{ 'read-only': readOnly }">
|
||||
<div class="form-header" v-if="formData.title || formData.icon">
|
||||
<div class="form-icon" v-if="formData.icon">
|
||||
<i class="material-icons">{{ formData.icon }}</i>
|
||||
<div class="form-header" v-if="formData.title || formData.name || formData.icon" style="margin-bottom: 20px; display: flex; align-items: center;">
|
||||
<div class="form-icon" v-if="formData.icon" style="margin-right: 10px; display: flex; align-items: center;">
|
||||
<span class="material-symbols-outlined" style="font-size: 24px; color: #4285f4;">{{ formData.icon }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-title" style="font-weight: bold; font-size: 1.2em; color: #333;">{{ formData.title || formData.name }}</div>
|
||||
<div v-if="formData.description" class="form-description" style="margin-top: 5px; color: #666; font-size: 0.9em;">{{ formData.description }}</div>
|
||||
</div>
|
||||
<div class="form-title">{{ formData.title }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="readOnly" class="form-readonly">
|
||||
@@ -148,7 +189,7 @@ export const DynamicForm = {
|
||||
</div>
|
||||
|
||||
<form v-else @submit.prevent="handleSubmit" novalidate>
|
||||
<div class="form-fields">
|
||||
<div class="form-fields" style="margin-top: 10px;">
|
||||
<template v-if="Array.isArray(formData.fields)">
|
||||
<form-field
|
||||
v-for="field in formData.fields"
|
||||
|
||||
@@ -63,12 +63,15 @@ export const FormField = {
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="form-field">
|
||||
<label :for="fieldId">
|
||||
<div class="form-field" style="margin-bottom: 15px; display: grid; grid-template-columns: 35% 65%; align-items: center;">
|
||||
<!-- Label voor alle velden behalve boolean/checkbox die een speciale behandeling krijgen -->
|
||||
<label v-if="fieldType !== 'checkbox'" :for="fieldId" style="margin-right: 10px; font-weight: 500;">
|
||||
{{ field.name }}
|
||||
<span v-if="field.required" class="required">*</span>
|
||||
<span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Container voor input velden -->
|
||||
<div style="width: 100%;">
|
||||
<!-- Tekstinvoer (string/str) -->
|
||||
<input
|
||||
v-if="fieldType === 'text'"
|
||||
@@ -78,6 +81,7 @@ export const FormField = {
|
||||
:required="field.required"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:title="description"
|
||||
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
|
||||
>
|
||||
|
||||
<!-- Numerieke invoer (int/float) -->
|
||||
@@ -90,6 +94,7 @@ export const FormField = {
|
||||
:step="stepValue"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:title="description"
|
||||
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
|
||||
>
|
||||
|
||||
<!-- Tekstvlak (text) -->
|
||||
@@ -101,6 +106,7 @@ export const FormField = {
|
||||
:rows="field.rows || 3"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:title="description"
|
||||
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; resize: vertical; box-sizing: border-box;"
|
||||
></textarea>
|
||||
|
||||
<!-- Dropdown (enum) -->
|
||||
@@ -110,6 +116,7 @@ export const FormField = {
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:title="description"
|
||||
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; background-color: white; box-sizing: border-box;"
|
||||
>
|
||||
<option v-if="!field.required" value="">Selecteer een optie</option>
|
||||
<option
|
||||
@@ -121,26 +128,44 @@ export const FormField = {
|
||||
</option>
|
||||
</select>
|
||||
<!-- Debug info voor select field -->
|
||||
<div v-if="fieldType === 'select' && (!(field.allowedValues || field.allowed_values) || (field.allowedValues || field.allowed_values).length === 0)" class="field-error">
|
||||
<div v-if="fieldType === 'select' && (!(field.allowedValues || field.allowed_values) || (field.allowedValues || field.allowed_values).length === 0)"
|
||||
style="color: #d93025; font-size: 0.85em; margin-top: 4px;">
|
||||
Geen opties beschikbaar voor dit veld.
|
||||
<pre style="font-size: 10px; color: #999;">{{ JSON.stringify(field, null, 2) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox (boolean) -->
|
||||
<div v-if="fieldType === 'checkbox'" class="checkbox-container">
|
||||
<label class="checkbox-label">
|
||||
<!-- Toggle switch voor boolean velden, met speciale layout voor deze velden -->
|
||||
<div v-if="fieldType === 'checkbox'" style="grid-column: 1 / span 2; display: flex; align-items: center;">
|
||||
<div class="toggle-switch" style="position: relative; display: inline-block; width: 50px; height: 24px;">
|
||||
<input
|
||||
:id="fieldId"
|
||||
type="checkbox"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:title="description"
|
||||
style="opacity: 0; width: 0; height: 0;"
|
||||
>
|
||||
<span class="checkbox-text">{{ field.description || 'Ja' }}</span>
|
||||
<span
|
||||
class="toggle-slider"
|
||||
style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px;"
|
||||
:style="{ backgroundColor: value ? '#4CAF50' : '#ccc' }"
|
||||
@click="value = !value"
|
||||
>
|
||||
<span
|
||||
class="toggle-knob"
|
||||
style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;"
|
||||
:style="{ transform: value ? 'translateX(26px)' : 'translateX(0)' }"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
<label :for="fieldId" class="checkbox-label" style="margin-left: 10px; cursor: pointer;">
|
||||
{{ field.name }}
|
||||
<span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
|
||||
<span class="checkbox-description" style="display: block; font-size: 0.85em; color: #666;">
|
||||
{{ field.description || '' }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Geen beschrijving meer tonen, alleen als tooltip die al gedefinieerd is in de inputs -->
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
// static/js/components/MaterialIconManager.js
|
||||
|
||||
/**
|
||||
* Een hulpklasse om Material Symbols Outlined iconen te beheren
|
||||
* en dynamisch toe te voegen aan de pagina indien nodig.
|
||||
*/
|
||||
export const MaterialIconManager = {
|
||||
name: 'MaterialIconManager',
|
||||
data() {
|
||||
return {
|
||||
loadedIconSets: [],
|
||||
defaultOptions: {
|
||||
opsz: 24, // Optimale grootte: 24px
|
||||
wght: 400, // Gewicht: normaal
|
||||
FILL: 0, // Vulling: niet gevuld
|
||||
GRAD: 0 // Kleurverloop: geen
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Zorgt ervoor dat de Material Symbols Outlined stijlbladen zijn geladen
|
||||
* @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
|
||||
* @param {Array} iconNames - Optionele lijst met specifieke iconen om te laden
|
||||
*/
|
||||
ensureIconsLoaded(options = {}, iconNames = []) {
|
||||
const opts = { ...this.defaultOptions, ...options };
|
||||
const styleUrl = this.buildStyleUrl(opts, iconNames);
|
||||
|
||||
// Controleer of deze specifieke set al is geladen
|
||||
if (!this.loadedIconSets.includes(styleUrl)) {
|
||||
this.loadStylesheet(styleUrl);
|
||||
this.loadedIconSets.push(styleUrl);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Bouwt de URL voor het stijlblad
|
||||
*/
|
||||
buildStyleUrl(options, iconNames = []) {
|
||||
let url = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${options.opsz},${options.wght},${options.FILL},${options.GRAD}`;
|
||||
|
||||
// Voeg specifieke iconNames toe als deze zijn opgegeven
|
||||
if (iconNames.length > 0) {
|
||||
url += `&icon_names=${iconNames.join(',')}`;
|
||||
}
|
||||
|
||||
return url;
|
||||
},
|
||||
|
||||
/**
|
||||
* Laadt een stijlblad dynamisch
|
||||
*/
|
||||
loadStylesheet(url) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
document.head.appendChild(link);
|
||||
console.log(`Material Symbols Outlined geladen: ${url}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Singleton instantie om te gebruiken in de hele applicatie
|
||||
export const iconManager = new Vue(MaterialIconManager);
|
||||
@@ -10,10 +10,6 @@ export const MessageHistory = {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formValues: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isSubmittingForm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -76,9 +72,6 @@ export const MessageHistory = {
|
||||
}
|
||||
},
|
||||
|
||||
handleSubmitForm(formData, messageId) {
|
||||
this.$emit('submit-form', formData, messageId);
|
||||
},
|
||||
|
||||
handleImageLoaded() {
|
||||
// Auto-scroll when images load to maintain position
|
||||
@@ -129,10 +122,8 @@ export const MessageHistory = {
|
||||
<!-- The actual message -->
|
||||
<chat-message
|
||||
:message="message"
|
||||
:form-values="formValues"
|
||||
:is-submitting-form="isSubmittingForm"
|
||||
:api-prefix="apiPrefix"
|
||||
@submit-form="handleSubmitForm"
|
||||
@image-loaded="handleImageLoaded"
|
||||
@specialist-complete="$emit('specialist-complete', $event)"
|
||||
@specialist-error="$emit('specialist-error', $event)"
|
||||
@@ -143,7 +134,6 @@ export const MessageHistory = {
|
||||
<!-- Typing indicator -->
|
||||
<typing-indicator v-if="isTyping"></typing-indicator>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
@@ -189,9 +189,9 @@ export const ProgressTracker = {
|
||||
console.log('Specialist Complete Data:', data);
|
||||
|
||||
// Extract answer from data.result.answer
|
||||
if (data.result && data.result.answer) {
|
||||
if (data.result) {
|
||||
if (data.result.answer) {
|
||||
this.finalAnswer = data.result.answer;
|
||||
|
||||
console.log('Final Answer:', this.finalAnswer);
|
||||
|
||||
// Direct update van de parent message als noodoplossing
|
||||
@@ -203,10 +203,11 @@ export const ProgressTracker = {
|
||||
} catch(err) {
|
||||
console.error('Error updating parent message:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Emit event to parent met alle relevante data inclusief form_request
|
||||
this.$emit('specialist-complete', {
|
||||
answer: data.result.answer,
|
||||
answer: data.result.answer || '',
|
||||
form_request: data.result.form_request, // Voeg form_request toe
|
||||
result: data.result,
|
||||
interactionId: data.interaction_id,
|
||||
|
||||
135
eveai_chat_client/static/js/iconManager.js
Normal file
135
eveai_chat_client/static/js/iconManager.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// static/js/iconManager.js
|
||||
|
||||
/**
|
||||
* Een eenvoudige standalone icon manager voor Material Symbols Outlined
|
||||
* Deze kan direct worden gebruikt zonder Vue
|
||||
*/
|
||||
window.iconManager = {
|
||||
loadedIcons: [],
|
||||
|
||||
/**
|
||||
* Laadt een Material Symbols Outlined icoon als het nog niet is geladen
|
||||
* @param {string} iconName - Naam van het icoon
|
||||
* @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
|
||||
*/
|
||||
loadIcon: function(iconName, options = {}) {
|
||||
if (!iconName) return;
|
||||
|
||||
if (this.loadedIcons.includes(iconName)) {
|
||||
return; // Icoon is al geladen
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
opsz: 24,
|
||||
wght: 400,
|
||||
FILL: 0,
|
||||
GRAD: 0
|
||||
};
|
||||
|
||||
const opts = { ...defaultOptions, ...options };
|
||||
|
||||
// Genereer unieke ID voor het stylesheet element
|
||||
const styleId = `material-symbols-${iconName}`;
|
||||
|
||||
// Controleer of het stylesheet al bestaat
|
||||
if (!document.getElementById(styleId)) {
|
||||
const link = document.createElement('link');
|
||||
link.id = styleId;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${iconName}`;
|
||||
document.head.appendChild(link);
|
||||
console.log(`Material Symbol geladen: ${iconName}`);
|
||||
|
||||
this.loadedIcons.push(iconName);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Laadt een set van Material Symbols Outlined iconen
|
||||
* @param {Array} iconNames - Array met icoonnamen
|
||||
* @param {Object} options - Opties voor de iconen
|
||||
*/
|
||||
loadIcons: function(iconNames, options = {}) {
|
||||
if (!iconNames || !Array.isArray(iconNames) || iconNames.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Filter alleen iconen die nog niet zijn geladen
|
||||
const newIcons = iconNames.filter(icon => !this.loadedIcons.includes(icon));
|
||||
|
||||
if (newIcons.length === 0) {
|
||||
return; // Alle iconen zijn al geladen
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
opsz: 24,
|
||||
wght: 400,
|
||||
FILL: 0,
|
||||
GRAD: 0
|
||||
};
|
||||
|
||||
const opts = { ...defaultOptions, ...options };
|
||||
|
||||
// Genereer unieke ID voor het stylesheet element
|
||||
const styleId = `material-symbols-set-${newIcons.join('-')}`;
|
||||
|
||||
// Controleer of het stylesheet al bestaat
|
||||
if (!document.getElementById(styleId)) {
|
||||
const link = document.createElement('link');
|
||||
link.id = styleId;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${newIcons.join(',')}`;
|
||||
document.head.appendChild(link);
|
||||
console.log(`Material Symbols geladen: ${newIcons.join(', ')}`);
|
||||
|
||||
// Voeg de nieuwe iconen toe aan de geladen lijst
|
||||
this.loadedIcons.push(...newIcons);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Functie om iconManager toe te voegen aan het DynamicForm component
|
||||
function initDynamicFormWithIcons() {
|
||||
if (window.DynamicForm) {
|
||||
const originalCreated = window.DynamicForm.created || function() {};
|
||||
|
||||
window.DynamicForm.created = function() {
|
||||
// Roep de oorspronkelijke created methode aan als die bestond
|
||||
originalCreated.call(this);
|
||||
|
||||
// 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 = {};
|
||||
}
|
||||
|
||||
window.DynamicForm.watch['formData.icon'] = {
|
||||
handler: function(newIcon) {
|
||||
if (newIcon) {
|
||||
window.iconManager.loadIcon(newIcon);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
};
|
||||
|
||||
console.log('DynamicForm is uitgebreid met iconManager functionaliteit');
|
||||
} else {
|
||||
console.warn('DynamicForm component is niet beschikbaar. iconManager kan niet worden toegevoegd.');
|
||||
}
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
Reference in New Issue
Block a user