- Layout improvements for the Chat client

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

@@ -1,6 +1,21 @@
 <template>
     <div class="chat-input-container">
         <!-- Material Icons worden nu globaal geladen in scripts.html -->
+        
+        <!-- Active AI Message Area -->
+        <div v-if="activeAiMessage" class="active-ai-message-area">
+            <chat-message
+                :message="activeAiMessage"
+                :is-submitting-form="false"
+                :api-prefix="apiPrefix"
+                :is-latest-ai-message="true"
+                :is-in-input-area="true"
+                @image-loaded="handleImageLoaded"
+                @specialist-complete="$emit('specialist-complete', $event)"
+                @specialist-error="$emit('specialist-error', $event)"
+            ></chat-message>
+        </div>
+        
         <!-- Dynamisch formulier container -->
         <div v-if="formData" class="dynamic-form-container">
             <!-- De titel wordt in DynamicForm weergegeven en niet hier om dubbele titels te voorkomen -->
@@ -62,13 +77,15 @@
 <script>
 // Importeer de benodigde componenten
 import DynamicForm from './DynamicForm.vue';
+import ChatMessage from './ChatMessage.vue';
 import { useIconManager } from '../js/composables/useIconManager.js';
 import { useTranslationClient } from '../js/composables/useTranslation.js';
 
 export default {
     name: 'ChatInput',
     components: {
-        'dynamic-form': DynamicForm
+        'dynamic-form': DynamicForm,
+        'chat-message': ChatMessage
     },
     setup(props) {
         const { watchIcon } = useIconManager();
@@ -103,8 +120,16 @@ export default {
             type: Object,
             default: null
         },
+        activeAiMessage: {
+            type: Object,
+            default: null
+        },
+        apiPrefix: {
+            type: String,
+            default: ''
+        }
     },
-    emits: ['send-message', 'update-message', 'submit-form'],
+    emits: ['send-message', 'update-message', 'submit-form', 'specialist-complete', 'specialist-error'],
     data() {
         return {
             localMessage: this.currentMessage,
@@ -377,6 +402,12 @@ export default {
             if (JSON.stringify(newValues) !== JSON.stringify(this.formValues)) {
                 this.formValues = JSON.parse(JSON.stringify(newValues));
             }
+        },
+
+        handleImageLoaded() {
+            // Handle image loaded events from ChatMessage component
+            // This method can be used for layout adjustments if needed
+            console.log('Image loaded in active AI message');
         }
     }
 };
@@ -500,4 +531,28 @@ export default {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* Active AI Message Area - positioned at top of ChatInput */
+.active-ai-message-area {
+    margin-bottom: 15px;
+    padding: 12px;
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
+    border-radius: 8px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Ensure the active AI message integrates well with ChatInput styling */
+.active-ai-message-area .message {
+    margin-bottom: 0;
+    max-width: 100%;
+}
+
+.active-ai-message-area .message-content {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+}
 </style>