diff --git a/eveai_chat_client/static/assets/vue-components/ChatApp.vue b/eveai_chat_client/static/assets/vue-components/ChatApp.vue index ef1815d..22d8f3c 100644 --- a/eveai_chat_client/static/assets/vue-components/ChatApp.vue +++ b/eveai_chat_client/static/assets/vue-components/ChatApp.vue @@ -259,7 +259,8 @@ export default { type: 'text', timestamp: new Date().toISOString(), taskId: data.task_id, - status: 'processing' + status: 'processing', + isTemporarilyAtBottom: true }; this.allMessages.push(placeholderMessage); @@ -277,6 +278,20 @@ export default { } }, + // Message repositioning logic - simplified to only toggle flag + repositionLatestAiMessage() { + // Find AI message with isTemporarilyAtBottom flag + const aiMessage = this.allMessages.find(msg => + msg.sender === 'ai' && msg.taskId && msg.isTemporarilyAtBottom + ); + + if (aiMessage) { + // Simply turn off the flag - no array manipulation needed + aiMessage.isTemporarilyAtBottom = false; + console.log('AI message returned to normal flow position'); + } + }, + // Message handling addMessage(messageData) { const message = { @@ -307,7 +322,10 @@ export default { console.log('Sending message:', this.currentMessage); - // Add user message to chat + // FIRST: Reposition latest AI message to correct chronological place + this.repositionLatestAiMessage(); + + // THEN: Add user message to chat const userMessage = this.addMessage({ content: this.currentMessage, sender: 'user', @@ -356,7 +374,8 @@ export default { type: 'text', timestamp: new Date().toISOString(), taskId: data.task_id, - status: 'processing' + status: 'processing', + isTemporarilyAtBottom: true }; this.allMessages.push(placeholderMessage); diff --git a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue index c390023..100e27b 100644 --- a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue +++ b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue @@ -297,7 +297,14 @@ export default { }, getMessageClass() { - return `message ${this.message.sender}`; + let classes = `message ${this.message.sender}`; + + // Add class for temporarily positioned AI messages + if (this.message.isTemporarilyAtBottom) { + classes += ' temporarily-at-bottom'; + } + + return classes; } } }; @@ -321,6 +328,17 @@ export default { margin-right: auto; } +/* Styling for temporarily positioned AI messages */ +.message.ai.temporarily-at-bottom { + background-color: #f8f9fa; + border-left: 3px solid #007bff; + opacity: 0.9; + border-radius: 8px; + padding: 8px; + margin: 8px 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + .message-content { width: 100%; font-family: Arial, sans-serif; diff --git a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue index 6771aae..405fb50 100644 --- a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue +++ b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue @@ -1,6 +1,6 @@