- Layout improvements for the Chat client

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

@@ -8,7 +8,7 @@
             </div>
             
             <!-- Empty state -->
-            <div v-if="normalMessages.length === 0 && !stickyAiMessage" class="empty-state">
+            <div v-if="normalMessages.length === 0" 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>
@@ -35,18 +35,6 @@
             <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)"
-                :is-in-sticky-area="true"                @image-loaded="handleImageLoaded"
-                @specialist-complete="$emit('specialist-complete', $event)"
-                @specialist-error="$emit('specialist-error', $event)"
-            ></chat-message>
-        </div>
     </div>
 </template>
 
@@ -104,10 +92,6 @@ export default {
         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: {
@@ -291,17 +275,6 @@ 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: var(--active-background-color);
-    color: var(--active-text-color);
-    padding: 10px;
-    overflow-y: auto;
-    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-}
 
 .load-more-indicator {
     text-align: center;