- Min of meer werkende chat client new stule
This commit is contained in:
Josako
505
eveai_chat_client/static/assets/vue-components/ChatApp.vue
Normal file
505
eveai_chat_client/static/assets/vue-components/ChatApp.vue
Normal file
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<div class="chat-app-container">
|
||||
<!-- Message History - takes available space -->
|
||||
<message-history
|
||||
:messages="displayMessages"
|
||||
:is-typing="isTyping"
|
||||
:is-submitting-form="isSubmittingForm"
|
||||
:api-prefix="apiPrefix"
|
||||
:auto-scroll="true"
|
||||
@specialist-error="handleSpecialistError"
|
||||
@specialist-complete="handleSpecialistComplete"
|
||||
ref="messageHistory"
|
||||
class="chat-messages-area"
|
||||
></message-history>
|
||||
|
||||
<!-- Chat Input - to the bottom -->
|
||||
<chat-input
|
||||
:current-message="currentMessage"
|
||||
:is-loading="isLoading"
|
||||
: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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import all components as Vue SFCs
|
||||
import TypingIndicator from './TypingIndicator.vue';
|
||||
import FormField from './FormField.vue';
|
||||
import DynamicForm from './DynamicForm.vue';
|
||||
import ChatMessage from './ChatMessage.vue';
|
||||
import MessageHistory from './MessageHistory.vue';
|
||||
import ProgressTracker from './ProgressTracker.vue';
|
||||
import LanguageSelector from './LanguageSelector.vue';
|
||||
import ChatInput from './ChatInput.vue';
|
||||
|
||||
export default {
|
||||
name: 'ChatApp',
|
||||
components: {
|
||||
TypingIndicator,
|
||||
FormField,
|
||||
DynamicForm,
|
||||
ChatMessage,
|
||||
MessageHistory,
|
||||
ProgressTracker,
|
||||
ChatInput
|
||||
},
|
||||
|
||||
data() {
|
||||
// Maak een lokale kopie van de chatConfig om undefined errors te voorkomen
|
||||
const chatConfig = window.chatConfig || {};
|
||||
const settings = chatConfig.settings || {};
|
||||
const initialLanguage = chatConfig.language || 'nl';
|
||||
const originalExplanation = chatConfig.explanation || '';
|
||||
const tenantMake = chatConfig.tenantMake || {};
|
||||
|
||||
return {
|
||||
// Tenant info
|
||||
tenantName: tenantMake.name || 'EveAI',
|
||||
tenantLogoUrl: tenantMake.logo_url || '',
|
||||
|
||||
// Taal gerelateerde data
|
||||
currentLanguage: initialLanguage,
|
||||
supportedLanguageDetails: chatConfig.supportedLanguageDetails || {},
|
||||
allowedLanguages: chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
|
||||
supportedLanguages: chatConfig.supportedLanguages || [],
|
||||
originalExplanation: originalExplanation,
|
||||
explanation: chatConfig.explanation || '',
|
||||
|
||||
// Chat-specific data
|
||||
currentMessage: '',
|
||||
allMessages: [],
|
||||
isTyping: false,
|
||||
isLoading: false,
|
||||
isSubmittingForm: false,
|
||||
messageIdCounter: 1,
|
||||
formValues: {},
|
||||
currentInputFormData: null,
|
||||
|
||||
// API prefix voor endpoints
|
||||
apiPrefix: chatConfig.apiPrefix || '',
|
||||
|
||||
// Configuration from Flask/server
|
||||
conversationId: chatConfig.conversationId || 'default',
|
||||
userId: chatConfig.userId || null,
|
||||
userName: chatConfig.userName || '',
|
||||
|
||||
// Settings met standaard waarden en overschreven door server config
|
||||
settings: {
|
||||
maxMessageLength: settings.maxMessageLength || 2000,
|
||||
allowFileUpload: settings.allowFileUpload === true,
|
||||
allowVoiceMessage: settings.allowVoiceMessage === true,
|
||||
autoScroll: settings.autoScroll === true
|
||||
},
|
||||
|
||||
// UI state
|
||||
isMobile: window.innerWidth <= 768,
|
||||
showSidebar: window.innerWidth > 768,
|
||||
|
||||
// Advanced features
|
||||
messageSearch: '',
|
||||
filteredMessages: [],
|
||||
isSearching: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
// Keep existing computed from base.html
|
||||
compiledExplanation() {
|
||||
if (typeof marked === 'function') {
|
||||
return marked(this.explanation);
|
||||
} else if (marked && typeof marked.parse === 'function') {
|
||||
return marked.parse(this.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
|
||||
} else {
|
||||
console.error('Marked library not properly loaded');
|
||||
return this.explanation;
|
||||
}
|
||||
},
|
||||
|
||||
displayMessages() {
|
||||
return this.isSearching ? this.filteredMessages : this.allMessages;
|
||||
},
|
||||
|
||||
hasMessages() {
|
||||
return this.allMessages.length > 0;
|
||||
},
|
||||
|
||||
displayLanguages() {
|
||||
// Filter de ondersteunde talen op basis van de toegestane talen
|
||||
if (!this.supportedLanguages || !this.allowedLanguages) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.supportedLanguages.filter(lang =>
|
||||
this.allowedLanguages.includes(lang.code)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initializeChat();
|
||||
this.setupEventListeners();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.cleanup();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Initialization
|
||||
initializeChat() {
|
||||
console.log('Initializing chat application...');
|
||||
|
||||
// Load historical messages from server
|
||||
this.loadHistoricalMessages();
|
||||
|
||||
console.log('Nr of messages:', this.allMessages.length);
|
||||
|
||||
// Add welcome message if no history
|
||||
if (this.allMessages.length === 0) {
|
||||
this.addWelcomeMessage();
|
||||
}
|
||||
|
||||
// Focus input after initialization
|
||||
this.$nextTick(() => {
|
||||
this.focusChatInput();
|
||||
});
|
||||
},
|
||||
|
||||
loadHistoricalMessages() {
|
||||
// Veilige toegang tot messages met fallback
|
||||
const chatConfig = window.chatConfig || {};
|
||||
const historicalMessages = chatConfig.messages || [];
|
||||
|
||||
if (historicalMessages.length > 0) {
|
||||
this.allMessages = historicalMessages
|
||||
.filter(msg => msg !== null && msg !== undefined) // Filter null/undefined berichten uit
|
||||
.map(msg => {
|
||||
// Zorg voor een correct geformatteerde bericht-object
|
||||
return {
|
||||
id: this.messageIdCounter++,
|
||||
content: typeof msg === 'string' ? msg : (msg.content || ''),
|
||||
sender: msg.sender || 'ai',
|
||||
type: msg.type || 'text',
|
||||
timestamp: msg.timestamp || new Date().toISOString(),
|
||||
formData: msg.formData || null,
|
||||
status: msg.status || 'delivered'
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`Loaded ${this.allMessages.length} historical messages`);
|
||||
}
|
||||
},
|
||||
|
||||
async addWelcomeMessage() {
|
||||
console.log('Sending initialize message to backend');
|
||||
|
||||
// Toon typing indicator
|
||||
this.isTyping = true;
|
||||
this.isLoading = true;
|
||||
|
||||
console.log('API prefix:', this.apiPrefix);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiPrefix}/api/send_message`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: 'Initialize',
|
||||
language: this.currentLanguage,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Initialize response:', data);
|
||||
|
||||
if (data.task_id) {
|
||||
// Add a placeholder message that will be updated by the progress tracker
|
||||
const placeholderMessage = {
|
||||
id: this.messageIdCounter++,
|
||||
content: 'Bezig met laden...',
|
||||
sender: 'ai',
|
||||
type: 'text',
|
||||
timestamp: new Date().toISOString(),
|
||||
taskId: data.task_id,
|
||||
status: 'processing'
|
||||
};
|
||||
|
||||
this.allMessages.push(placeholderMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending initialize message:', error);
|
||||
this.addMessage({
|
||||
content: 'Er is een fout opgetreden bij het initialiseren van de chat.',
|
||||
sender: 'ai',
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
this.isTyping = false;
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Message handling
|
||||
addMessage(messageData) {
|
||||
const message = {
|
||||
id: this.messageIdCounter++,
|
||||
content: messageData.content || '',
|
||||
sender: messageData.sender || 'user',
|
||||
type: messageData.type || 'text',
|
||||
timestamp: messageData.timestamp || new Date().toISOString(),
|
||||
formData: messageData.formData || null,
|
||||
formValues: messageData.formValues || null,
|
||||
status: messageData.status || 'delivered'
|
||||
};
|
||||
|
||||
this.allMessages.push(message);
|
||||
|
||||
// Auto-scroll to bottom
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
async sendMessage() {
|
||||
if (!this.currentMessage.trim() && !this.currentInputFormData) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Sending message:', this.currentMessage);
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage = this.addMessage({
|
||||
content: this.currentMessage,
|
||||
sender: 'user',
|
||||
formData: this.currentInputFormData,
|
||||
formValues: this.formValues
|
||||
});
|
||||
|
||||
// Clear input
|
||||
const messageToSend = this.currentMessage;
|
||||
const formValuesToSend = { ...this.formValues };
|
||||
this.currentMessage = '';
|
||||
this.formValues = {};
|
||||
this.currentInputFormData = null;
|
||||
|
||||
// Show typing indicator
|
||||
this.isTyping = true;
|
||||
this.isLoading = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiPrefix}/api/send_message`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: messageToSend,
|
||||
form_values: Object.keys(formValuesToSend).length > 0 ? formValuesToSend : undefined,
|
||||
language: this.currentLanguage,
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Send message response:', data);
|
||||
|
||||
if (data.task_id) {
|
||||
// Add a placeholder AI message that will be updated by the progress tracker
|
||||
const placeholderMessage = {
|
||||
id: this.messageIdCounter++,
|
||||
content: 'Bezig met verwerken...',
|
||||
sender: 'ai',
|
||||
type: 'text',
|
||||
timestamp: new Date().toISOString(),
|
||||
taskId: data.task_id,
|
||||
status: 'processing'
|
||||
};
|
||||
|
||||
this.allMessages.push(placeholderMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending message:', error);
|
||||
this.addMessage({
|
||||
content: 'Er is een fout opgetreden bij het verzenden van het bericht.',
|
||||
sender: 'ai',
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
this.isTyping = false;
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
updateCurrentMessage(message) {
|
||||
this.currentMessage = message;
|
||||
},
|
||||
|
||||
submitFormFromInput(formValues) {
|
||||
console.log('Form submitted from input:', formValues);
|
||||
this.formValues = formValues;
|
||||
this.sendMessage();
|
||||
},
|
||||
|
||||
handleFileUpload(file) {
|
||||
console.log('File upload:', file);
|
||||
// Implement file upload logic
|
||||
},
|
||||
|
||||
handleVoiceRecord(audioData) {
|
||||
console.log('Voice record:', audioData);
|
||||
// Implement voice recording logic
|
||||
},
|
||||
|
||||
// Event handling
|
||||
setupEventListeners() {
|
||||
// Language change listener
|
||||
document.addEventListener('language-changed', (event) => {
|
||||
if (event.detail && event.detail.language) {
|
||||
this.currentLanguage = event.detail.language;
|
||||
console.log(`Language changed to: ${this.currentLanguage}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Window resize listener
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMobile = window.innerWidth <= 768;
|
||||
this.showSidebar = window.innerWidth > 768;
|
||||
});
|
||||
},
|
||||
|
||||
cleanup() {
|
||||
// Remove event listeners
|
||||
document.removeEventListener('language-changed', this.handleLanguageChange);
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
},
|
||||
|
||||
// Specialist event handlers
|
||||
handleSpecialistComplete(eventData) {
|
||||
console.log('Specialist complete event received:', eventData);
|
||||
|
||||
// Find the message with the matching task ID
|
||||
const messageIndex = this.allMessages.findIndex(msg =>
|
||||
msg.taskId === eventData.taskId
|
||||
);
|
||||
|
||||
if (messageIndex !== -1) {
|
||||
// Update the message content
|
||||
this.allMessages[messageIndex].content = eventData.answer;
|
||||
this.allMessages[messageIndex].status = 'completed';
|
||||
|
||||
// Handle form request if present
|
||||
if (eventData.form_request) {
|
||||
console.log('Form request received:', eventData.form_request);
|
||||
this.currentInputFormData = eventData.form_request;
|
||||
}
|
||||
}
|
||||
|
||||
this.isTyping = false;
|
||||
this.isLoading = false;
|
||||
},
|
||||
|
||||
handleSpecialistError(eventData) {
|
||||
console.log('Specialist error event received:', eventData);
|
||||
|
||||
// Find the message with the matching task ID
|
||||
const messageIndex = this.allMessages.findIndex(msg =>
|
||||
msg.taskId === eventData.taskId
|
||||
);
|
||||
|
||||
if (messageIndex !== -1) {
|
||||
// Update the message to show error
|
||||
this.allMessages[messageIndex].content = eventData.message || 'Er is een fout opgetreden.';
|
||||
this.allMessages[messageIndex].type = 'error';
|
||||
this.allMessages[messageIndex].status = 'error';
|
||||
}
|
||||
|
||||
this.isTyping = false;
|
||||
this.isLoading = false;
|
||||
},
|
||||
|
||||
// UI helpers
|
||||
scrollToBottom() {
|
||||
if (this.$refs.messageHistory) {
|
||||
this.$refs.messageHistory.scrollToBottom();
|
||||
}
|
||||
},
|
||||
|
||||
focusChatInput() {
|
||||
if (this.$refs.chatInput) {
|
||||
this.$refs.chatInput.focusInput();
|
||||
}
|
||||
},
|
||||
|
||||
// Search functionality
|
||||
searchMessages(query) {
|
||||
if (!query.trim()) {
|
||||
this.isSearching = false;
|
||||
this.filteredMessages = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSearching = true;
|
||||
const searchTerm = query.toLowerCase();
|
||||
this.filteredMessages = this.allMessages.filter(message =>
|
||||
message.content &&
|
||||
message.content.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.isSearching = false;
|
||||
this.filteredMessages = [];
|
||||
this.messageSearch = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-messages-area {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.chat-app-container {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -49,14 +49,6 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log('🔍 [DEBUG] LanguageSelector mounted with Vue SFC');
|
||||
console.log('🔍 [DEBUG] Props:', {
|
||||
initialLanguage: this.initialLanguage,
|
||||
currentLanguage: this.currentLanguage,
|
||||
supportedLanguageDetails: this.supportedLanguageDetails,
|
||||
allowedLanguages: this.allowedLanguages
|
||||
});
|
||||
|
||||
// Emit initial language
|
||||
this.$emit('language-changed', this.selectedLanguage);
|
||||
|
||||
|
||||
@@ -88,16 +88,16 @@ export default {
|
||||
}
|
||||
|
||||
console.log('Connecting to progress stream for task:', this.taskId);
|
||||
|
||||
|
||||
// Construct the SSE URL
|
||||
const baseUrl = window.location.origin;
|
||||
const sseUrl = `${baseUrl}${this.apiPrefix}/api/progress/${this.taskId}`;
|
||||
|
||||
const sseUrl = `${baseUrl}${this.apiPrefix}/api/task_progress/${this.taskId}`;
|
||||
|
||||
console.log('SSE URL:', sseUrl);
|
||||
|
||||
try {
|
||||
this.eventSource = new EventSource(sseUrl);
|
||||
|
||||
|
||||
this.eventSource.onopen = () => {
|
||||
console.log('Progress stream connected');
|
||||
this.connecting = false;
|
||||
@@ -112,19 +112,6 @@ export default {
|
||||
this.handleError(event);
|
||||
};
|
||||
|
||||
// Listen for specific event types
|
||||
this.eventSource.addEventListener('progress', (event) => {
|
||||
this.handleProgressUpdate(event);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('complete', (event) => {
|
||||
this.handleSpecialistComplete(event);
|
||||
});
|
||||
|
||||
this.eventSource.addEventListener('error', (event) => {
|
||||
this.handleSpecialistError(event);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to create EventSource:', error);
|
||||
this.error = 'Kan geen verbinding maken met de voortgangsstream.';
|
||||
@@ -145,18 +132,39 @@ export default {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Progress update:', data);
|
||||
|
||||
// Check voor processing_type om te bepalen welke handler te gebruiken
|
||||
if (data.processing_type === 'EveAI Specialist Complete') {
|
||||
console.log('Detected specialist complete via processing_type');
|
||||
this.handleSpecialistComplete(event);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check voor andere completion statuses en errors
|
||||
if (data.processing_type === 'EveAI Specialist Error')
|
||||
{
|
||||
console.log('Detected specialist error via processing_type or status');
|
||||
this.handleSpecialistError(event);
|
||||
return;
|
||||
}
|
||||
|
||||
// Voeg bericht toe aan progressLines
|
||||
if (data.message) {
|
||||
this.progressLines.push(data.message);
|
||||
|
||||
// Auto-scroll to bottom if expanded
|
||||
if (this.isExpanded) {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.progressContainer;
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (data.data && data.data.message) {
|
||||
this.progressLines.push(data.data.message);
|
||||
} else if (data.processing_type) {
|
||||
// Gebruik processing_type als message wanneer er geen andere message is
|
||||
this.progressLines.push(`${data.processing_type}...`);
|
||||
}
|
||||
|
||||
// Auto-scroll to bottom if expanded
|
||||
if (this.isExpanded) {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.progressContainer;
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing progress data:', error);
|
||||
@@ -165,7 +173,7 @@ export default {
|
||||
|
||||
handleSpecialistComplete(event) {
|
||||
console.log('Specialist complete event:', event);
|
||||
|
||||
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Specialist complete data:', data);
|
||||
@@ -174,27 +182,42 @@ export default {
|
||||
this.connecting = false;
|
||||
this.disconnectEventSource();
|
||||
|
||||
// Emit the complete event to parent
|
||||
if (data.result && data.result.answer) {
|
||||
this.$emit('specialist-complete', {
|
||||
answer: data.result.answer,
|
||||
form_request: data.result.form_request,
|
||||
result: data.result,
|
||||
interactionId: data.interaction_id,
|
||||
taskId: this.taskId
|
||||
});
|
||||
} else {
|
||||
console.error('Missing result.answer in specialist complete data:', data);
|
||||
// Verschillende manieren om de result data te verkrijgen
|
||||
let resultData = null;
|
||||
let answer = null;
|
||||
let formRequest = null;
|
||||
let interactionId = null;
|
||||
|
||||
resultData = data.data.result
|
||||
console.log('Result data:', resultData);
|
||||
|
||||
if (resultData) {
|
||||
// Standaard format
|
||||
answer = resultData.answer;
|
||||
formRequest = resultData.form_request;
|
||||
interactionId = data.data.interaction_id;
|
||||
}
|
||||
this.$emit('specialist-complete', {
|
||||
answer: answer,
|
||||
form_request: formRequest,
|
||||
result: resultData,
|
||||
interactionId: interactionId,
|
||||
taskId: this.taskId
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error parsing specialist complete data:', error);
|
||||
this.handleSpecialistError({ data: JSON.stringify({ Error: 'Failed to parse completion data' }) });
|
||||
this.handleSpecialistError({
|
||||
data: JSON.stringify({
|
||||
Error: 'Failed to parse completion data',
|
||||
processing_type: 'EveAI Specialist Error'
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleSpecialistError(event) {
|
||||
console.log('Specialist error event:', event);
|
||||
|
||||
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Specialist error data:', data);
|
||||
@@ -208,15 +231,23 @@ export default {
|
||||
const errorMessage = "We could not process your request. Please try again later.";
|
||||
this.error = errorMessage;
|
||||
|
||||
// Extract error details from various possible locations
|
||||
const originalError =
|
||||
data.Error ||
|
||||
data.error ||
|
||||
data.message ||
|
||||
data.data?.error ||
|
||||
data.data?.Error ||
|
||||
data.data?.message ||
|
||||
'Unknown error';
|
||||
|
||||
// Log the actual error for debug purposes
|
||||
if (data.Error) {
|
||||
console.error('Specialist Error:', data.Error);
|
||||
}
|
||||
console.error('Specialist Error:', originalError);
|
||||
|
||||
// Emit error event to parent
|
||||
this.$emit('specialist-error', {
|
||||
message: errorMessage,
|
||||
originalError: data.Error,
|
||||
originalError: originalError,
|
||||
taskId: this.taskId
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -226,6 +257,13 @@ export default {
|
||||
this.hasError = true;
|
||||
this.connecting = false;
|
||||
this.disconnectEventSource();
|
||||
|
||||
// Emit generic error
|
||||
this.$emit('specialist-error', {
|
||||
message: 'Er is een onbekende fout opgetreden.',
|
||||
originalError: 'Failed to parse error data',
|
||||
taskId: this.taskId
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -236,13 +274,22 @@ export default {
|
||||
|
||||
// Try to parse error data
|
||||
try {
|
||||
const errorData = JSON.parse(event.data);
|
||||
if (errorData && errorData.message) {
|
||||
this.error = errorData.message;
|
||||
if (event.data) {
|
||||
const errorData = JSON.parse(event.data);
|
||||
if (errorData && errorData.message) {
|
||||
this.error = errorData.message;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// Keep generic error message if parsing fails
|
||||
}
|
||||
|
||||
// Emit error to parent
|
||||
this.$emit('specialist-error', {
|
||||
message: this.error,
|
||||
originalError: 'SSE Connection Error',
|
||||
taskId: this.taskId
|
||||
});
|
||||
},
|
||||
|
||||
toggleExpand() {
|
||||
|
||||
Reference in New Issue
Block a user