- eveai_chat_client update to have different ways of presenting ProgressTracker.vue. Based on progress_tracker_insights in Tenant Make Configuration.

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

@@ -8,6 +8,7 @@
                     v-if="message.sender === 'ai' && message.taskId" 
                     :task-id="message.taskId"
                     :api-prefix="apiPrefix"
+                    :is-latest-ai-message="isLatestAiMessage"
                     class="message-progress"
                     @specialist-complete="handleSpecialistComplete"
                     @specialist-error="handleSpecialistError"
@@ -165,6 +166,10 @@ export default {
         apiPrefix: {
             type: String,
             default: ''
+        },
+        isLatestAiMessage: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['image-loaded', 'retry-message', 'specialist-complete', 'specialist-error'],

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

@@ -23,6 +23,7 @@
                         :message="message"
                         :is-submitting-form="isSubmittingForm"
                         :api-prefix="apiPrefix"
+                        :is-latest-ai-message="isLatestAiMessage(message)"
                         @image-loaded="handleImageLoaded"
                         @specialist-complete="$emit('specialist-complete', $event)"
                         @specialist-error="$emit('specialist-error', $event)"
@@ -228,6 +229,25 @@ export default {
                 message.content &&
                 message.content.toLowerCase().includes(searchTerm)
             );
+        },
+
+        isLatestAiMessage(message) {
+            // Only AI messages with taskId can be "latest"
+            if (message.sender !== 'ai' || !message.taskId) {
+                return false;
+            }
+
+            // Find the latest AI message with a taskId by iterating in reverse order
+            // The latest AI message is the one where the specialist interaction is still active
+            for (let i = this.messages.length - 1; i >= 0; i--) {
+                const msg = this.messages[i];
+                if (msg.sender === 'ai' && msg.taskId) {
+                    // This is the latest AI message with a taskId
+                    return msg.id === message.id;
+                }
+            }
+
+            return false;
         }
     }
 };

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

@@ -1,5 +1,6 @@
 <template>
-    <div class="progress-tracker" :class="{ 
+    <!-- Volledige tracker (huidige implementatie) -->
+    <div v-if="shouldShowFullTracker" class="progress-tracker" :class="{ 
         'expanded': isExpanded, 
         'completed': isCompleted && !hasError, 
         'error': error || hasError
@@ -50,6 +51,18 @@
             </div>
         </div>
     </div>
+    
+    <!-- Alleen Evie animatie voor "No Information" tijdens processing -->
+    <div v-else-if="shouldShowProgressIconOnly" class="progress-icon-only">
+        <img src="/static/assets/img/evie_working.webp" 
+             alt="Bezig met verwerken..." 
+             class="working-animation-only">
+    </div>
+    
+    <!-- Foutmelding altijd tonen (uitzondering regel) -->
+    <div v-else-if="shouldShowError" class="progress-error-only">
+        {{ error }}
+    </div>
 </template>
 
 <script>
@@ -89,6 +102,10 @@ export default {
         apiPrefix: {
             type: String,
             default: ''
+        },
+        isLatestAiMessage: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['specialist-complete', 'specialist-error'],
@@ -116,6 +133,32 @@ export default {
         },
         processingText() {
             return this.statusTexts.processing;
+        },
+        // Visibility mode configuration
+        visibilityMode() {
+            console.log('Visibility mode:', window.chatConfig?.progress_tracker_insights || 'No Information');
+            return window.chatConfig?.progress_tracker_insights || 'No Information';
+        },
+        // Determine if full tracker should be shown
+        shouldShowFullTracker() {
+            switch (this.visibilityMode) {
+                case 'All Interactions':
+                    return true;
+                case 'Active Interaction Only':
+                    return this.isLatestAiMessage;
+                case 'No Information':
+                    return false;
+                default:
+                    return false;
+            }
+        },
+        // Determine if only progress icon should be shown (for "No Information" during processing)
+        shouldShowProgressIconOnly() {
+            return this.visibilityMode === 'No Information' && this.isProcessing;
+        },
+        // Determine if error should be shown (always show errors, even in "No Information" mode)
+        shouldShowError() {
+            return this.error || this.hasError;
         }
     },
     created() {
@@ -538,4 +581,27 @@ export default {
         transform: translateY(0);
     }
 }
+
+/* Styles for new visibility modes */
+.progress-icon-only {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+}
+
+.working-animation-only {
+    width: 24px;
+    height: 24px;
+    /* Evie working animatie styling */
+}
+
+.progress-error-only {
+    padding: 10px 15px;
+    background-color: #ffcdd2;
+    color: #c62828;
+    border-radius: 8px;
+    margin: 10px 0;
+    font-size: 13px;
+    border: 1px solid #f44336;
+}
 </style>