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