Chat client changes
- Form values shown correct in MessageHistory of Chat client - Improements to CSS - Move css en js to assets directory - Introduce better Personal Contact Form & Professional Contact Form - Start working on actual Selection Specialist
This commit is contained in:
Josako
311
eveai_chat_client/static/assets/js/components/ProgressTracker.js
Normal file
311
eveai_chat_client/static/assets/js/components/ProgressTracker.js
Normal file
@@ -0,0 +1,311 @@
|
||||
export const ProgressTracker = {
|
||||
name: 'ProgressTracker',
|
||||
props: {
|
||||
taskId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
apiPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['specialist-complete', 'progress-update', 'specialist-error'],
|
||||
data() {
|
||||
return {
|
||||
isExpanded: false,
|
||||
progressLines: [],
|
||||
eventSource: null,
|
||||
isCompleted: false,
|
||||
lastLine: '',
|
||||
error: null,
|
||||
connecting: true,
|
||||
finalAnswer: null,
|
||||
hasError: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
progressEndpoint() {
|
||||
return `${this.apiPrefix}/chat/api/task_progress/${this.taskId}`;
|
||||
},
|
||||
displayLines() {
|
||||
return this.isExpanded ? this.progressLines : [
|
||||
this.lastLine || 'Verbinden met taak...'
|
||||
];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.connectToEventSource();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.disconnectEventSource();
|
||||
},
|
||||
methods: {
|
||||
connectToEventSource() {
|
||||
try {
|
||||
this.connecting = true;
|
||||
this.error = null;
|
||||
|
||||
// Sluit eventuele bestaande verbinding
|
||||
this.disconnectEventSource();
|
||||
|
||||
// Maak nieuwe SSE verbinding
|
||||
this.eventSource = new EventSource(this.progressEndpoint);
|
||||
|
||||
// Algemene event handler
|
||||
this.eventSource.onmessage = (event) => {
|
||||
this.handleProgressUpdate(event);
|
||||
};
|
||||
|
||||
// Specifieke event handlers per type
|
||||
this.eventSource.addEventListener('progress', (event) => {
|
||||
this.handleProgressUpdate(event, 'progress');
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('EveAI Specialist Complete', (event) => {
|
||||
console.log('Received EveAI Specialist Complete event');
|
||||
this.handleProgressUpdate(event, 'EveAI Specialist Complete');
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('error', (event) => {
|
||||
this.handleError(event);
|
||||
});
|
||||
|
||||
// Status handlers
|
||||
this.eventSource.onopen = () => {
|
||||
this.connecting = false;
|
||||
};
|
||||
|
||||
this.eventSource.onerror = (error) => {
|
||||
console.error('SSE Connection error:', error);
|
||||
this.error = 'Verbindingsfout. Probeer het later opnieuw.';
|
||||
this.connecting = false;
|
||||
|
||||
// Probeer opnieuw te verbinden na 3 seconden
|
||||
setTimeout(() => {
|
||||
if (!this.isCompleted && this.progressLines.length === 0) {
|
||||
this.connectToEventSource();
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Error setting up event source:', err);
|
||||
this.error = 'Kan geen verbinding maken met de voortgangsupdates.';
|
||||
this.connecting = false;
|
||||
}
|
||||
},
|
||||
|
||||
disconnectEventSource() {
|
||||
if (this.eventSource) {
|
||||
this.eventSource.close();
|
||||
this.eventSource = null;
|
||||
}
|
||||
},
|
||||
|
||||
handleProgressUpdate(event, eventType = null) {
|
||||
try {
|
||||
const update = JSON.parse(event.data);
|
||||
|
||||
// Controleer op verschillende typen updates
|
||||
const processingType = update.processing_type;
|
||||
const data = update.data || {};
|
||||
|
||||
// Process based on processing type
|
||||
let message = this.formatProgressMessage(processingType, data);
|
||||
|
||||
// Alleen bericht toevoegen als er daadwerkelijk een bericht is
|
||||
if (message) {
|
||||
this.progressLines.push(message);
|
||||
this.lastLine = message;
|
||||
}
|
||||
|
||||
// Emit progress update voor parent component
|
||||
this.$emit('progress-update', {
|
||||
processingType,
|
||||
data,
|
||||
message
|
||||
});
|
||||
|
||||
// Handle completion and errors
|
||||
if (processingType === 'EveAI Specialist Complete') {
|
||||
console.log('Processing EveAI Specialist Complete:', data);
|
||||
this.handleSpecialistComplete(data);
|
||||
} else if (processingType === 'EveAI Specialist Error') {
|
||||
this.handleSpecialistError(data);
|
||||
} else if (processingType === 'Task Complete' || processingType === 'Task Error') {
|
||||
this.isCompleted = true;
|
||||
this.disconnectEventSource();
|
||||
}
|
||||
|
||||
// Scroll automatisch naar beneden als uitgevouwen
|
||||
if (this.isExpanded) {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.progressContainer;
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing progress update:', err, event.data);
|
||||
}
|
||||
},
|
||||
|
||||
formatProgressMessage(processingType, data) {
|
||||
// Lege data dictionary - toon enkel processing type
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
return processingType;
|
||||
}
|
||||
|
||||
// Specifiek bericht als er een message field is
|
||||
if (data.message) {
|
||||
return data.message;
|
||||
}
|
||||
|
||||
// Processing type met name veld als dat bestaat
|
||||
if (data.name) {
|
||||
return `${processingType}: ${data.name}`;
|
||||
}
|
||||
|
||||
// Stap informatie
|
||||
if (data.step) {
|
||||
return `Stap ${data.step}: ${data.description || ''}`;
|
||||
}
|
||||
|
||||
// Voor EveAI Specialist Complete - geen progress message
|
||||
if (processingType === 'EveAI Specialist Complete') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Default: processing type + eventueel data als string
|
||||
return processingType;
|
||||
},
|
||||
|
||||
handleSpecialistComplete(data) {
|
||||
this.isCompleted = true;
|
||||
this.disconnectEventSource();
|
||||
|
||||
// Debug logging
|
||||
console.log('Specialist Complete Data:', data);
|
||||
|
||||
// Extract answer from 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
|
||||
try {
|
||||
if (this.$parent && this.$parent.message) {
|
||||
console.log('Direct update parent message');
|
||||
this.$parent.message.content = data.result.answer;
|
||||
}
|
||||
} 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 || '',
|
||||
form_request: data.result.form_request, // Voeg form_request toe
|
||||
result: data.result,
|
||||
interactionId: data.interaction_id,
|
||||
taskId: this.taskId
|
||||
});
|
||||
} else {
|
||||
console.error('Missing result.answer in specialist complete data:', data);
|
||||
}
|
||||
},
|
||||
|
||||
handleSpecialistError(data) {
|
||||
this.isCompleted = true;
|
||||
this.hasError = true;
|
||||
this.disconnectEventSource();
|
||||
|
||||
// Zet gebruiksvriendelijke foutmelding
|
||||
const errorMessage = "We could not process your request. Please try again later.";
|
||||
this.error = errorMessage;
|
||||
|
||||
// Log de werkelijke fout voor debug doeleinden
|
||||
if (data.Error) {
|
||||
console.error('Specialist Error:', data.Error);
|
||||
}
|
||||
|
||||
// Emit error event naar parent
|
||||
this.$emit('specialist-error', {
|
||||
message: errorMessage,
|
||||
originalError: data.Error,
|
||||
taskId: this.taskId
|
||||
});
|
||||
},
|
||||
|
||||
handleError(event) {
|
||||
console.error('SSE Error event:', event);
|
||||
this.error = 'Er is een fout opgetreden bij het verwerken van updates.';
|
||||
|
||||
// Probeer parse van foutgegevens
|
||||
try {
|
||||
const errorData = JSON.parse(event.data);
|
||||
if (errorData && errorData.message) {
|
||||
this.error = errorData.message;
|
||||
}
|
||||
} catch (err) {
|
||||
// Blijf bij algemene foutmelding als parsing mislukt
|
||||
}
|
||||
},
|
||||
|
||||
toggleExpand() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
|
||||
if (this.isExpanded) {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.progressContainer;
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="progress-tracker" :class="{ 'expanded': isExpanded, 'completed': isCompleted && !hasError, 'error': error || hasError }">
|
||||
<div
|
||||
class="progress-header"
|
||||
@click="toggleExpand"
|
||||
:title="isExpanded ? 'Inklappen' : 'Uitklappen voor volledige voortgang'"
|
||||
>
|
||||
<div class="progress-title">
|
||||
<span v-if="connecting" class="spinner"></span>
|
||||
<span v-else-if="error" class="status-icon error">✗</span>
|
||||
<span v-else-if="isCompleted" class="status-icon completed">✓</span>
|
||||
<span v-else class="status-icon in-progress"></span>
|
||||
<span v-if="error">Fout bij verwerking</span>
|
||||
<span v-else-if="isCompleted">Verwerking voltooid</span>
|
||||
<span v-else>Bezig met redeneren...</span>
|
||||
</div>
|
||||
<div class="progress-toggle">
|
||||
{{ isExpanded ? '▲' : '▼' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="progress-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="progressContainer"
|
||||
class="progress-content"
|
||||
:class="{ 'single-line': !isExpanded }"
|
||||
>
|
||||
<div
|
||||
v-for="(line, index) in displayLines"
|
||||
:key="index"
|
||||
class="progress-line"
|
||||
>
|
||||
{{ line }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user