- Latest interaction is now positioned right above the chat-input / form

- It moves to the standard positing in MessageHistory.vue

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);

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;

eveai_chat_client/static/assets/vue-components/MessageHistory.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="message-history-container">
-        <!-- Messages container -->
+        <!-- Normal messages container -->
         <div class="chat-messages" ref="messagesContainer">
             <!-- Loading indicator for load more -->
             <div v-if="$slots.loading" class="load-more-indicator">
@@ -8,16 +8,16 @@
             </div>
             
             <!-- Empty state -->
-            <div v-if="messages.length === 0" class="empty-state">
+            <div v-if="normalMessages.length === 0 && !stickyAiMessage" class="empty-state">
                 <div class="empty-icon">💬</div>
                 <div class="empty-text">Nog geen berichten</div>
                 <div class="empty-subtext">Start een gesprek door een bericht te typen!</div>
             </div>
             
-            <!-- Message list -->
-            <template v-else>
+            <!-- Normal message list (excluding temporarily positioned AI messages) -->
+            <template v-if="normalMessages.length > 0">
                 <!-- Messages -->
-                <template v-for="(message, index) in messages" :key="message.id">
+                <template v-for="(message, index) in normalMessages" :key="message.id">
                     <!-- The actual message -->
                     <chat-message
                         :message="message"
@@ -34,6 +34,19 @@
             <!-- Typing indicator -->
             <typing-indicator v-if="isTyping"></typing-indicator>
         </div>
+        
+        <!-- Sticky bottom area for temporarily positioned AI messages -->
+        <div v-if="stickyAiMessage" class="sticky-ai-area">
+            <chat-message
+                :message="stickyAiMessage"
+                :is-submitting-form="isSubmittingForm"
+                :api-prefix="apiPrefix"
+                :is-latest-ai-message="isLatestAiMessage(stickyAiMessage)"
+                @image-loaded="handleImageLoaded"
+                @specialist-complete="$emit('specialist-complete', $event)"
+                @specialist-error="$emit('specialist-error', $event)"
+            ></chat-message>
+        </div>
     </div>
 </template>
 
@@ -86,6 +99,16 @@ export default {
             languageChangeHandler: null
         };
     },
+    computed: {
+        // Messages that should be shown in normal flow (excluding temporarily positioned AI messages)
+        normalMessages() {
+            return this.messages.filter(msg => !msg.isTemporarilyAtBottom);
+        },
+        // AI message that should be shown in sticky bottom area
+        stickyAiMessage() {
+            return this.messages.find(msg => msg.isTemporarilyAtBottom);
+        }
+    },
     watch: {
         messages: {
             handler(newMessages, oldMessages) {
@@ -268,6 +291,17 @@ export default {
     scroll-behavior: smooth;
 }
 
+/* Sticky bottom area for temporarily positioned AI messages */
+.sticky-ai-area {
+    flex-shrink: 0;
+    max-height: 30%; /* Takes max 30% of available space */
+    border-top: 1px solid #e0e0e0;
+    background-color: #f8f9fa;
+    padding: 10px;
+    overflow-y: auto;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+}
+
 .load-more-indicator {
     text-align: center;
     padding: 10px;