- Layout improvements for the Chat client

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

@@ -9,6 +9,7 @@
                     :task-id="message.taskId"
                     :api-prefix="apiPrefix"
                     :is-latest-ai-message="isLatestAiMessage"
+                    :is-in-input-area="isInInputArea"
                     class="message-progress"
                     @specialist-complete="handleSpecialistComplete"
                     @specialist-error="handleSpecialistError"
@@ -169,11 +170,12 @@ export default {
         isLatestAiMessage: {
             type: Boolean,
             default: false
-        }
         },
-        isInStickyArea: {
+        isInInputArea: {
             type: Boolean,
-            default: false    },
+            default: false
+        }
+    },
     emits: ['image-loaded', 'retry-message', 'specialist-complete', 'specialist-error'],
     data() {
         return {
@@ -309,7 +311,13 @@ export default {
             // Add class for messages in sticky area
             if (this.isInStickyArea) {
                 classes += " sticky-area";
-            }            
+            }
+            
+            // Add class for messages in input area
+            if (this.isInInputArea) {
+                classes += " input-area";
+            }
+            
             return classes;
         }
     }
@@ -338,12 +346,10 @@ export default {
 .message.ai.temporarily-at-bottom {
     background-color: var(--active-background-color);
     color: var(--active-text-color);
-    border-left: 3px solid var(--active-text-color);
     opacity: 0.9;
     border-radius: 8px;
     padding: 8px;
     margin: 8px 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* Styling for messages in sticky area - override history colors with active colors */
@@ -361,6 +367,14 @@ export default {
     border-radius: 8px;
     padding: 12px;
 }
+
+/* Active styling for messages in input area */
+.message.input-area .message-content {
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
+    border-radius: 8px;
+    padding: 12px;
+}
 .message-content {
     width: 100%;
     font-family: Arial, sans-serif;