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