From e990fe65d866e398d5e202ea17e889e279b77520 Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Tue, 22 Jul 2025 21:27:39 +0200
Subject: [PATCH] - eveai_chat_client update to have different ways of
 presenting ProgressTracker.vue. Based on progress_tracker_insights in Tenant
 Make Configuration.

---
 common/utils/chat_utils.py                    |  1 +
 .../CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml      |  7 ++
 .../assets/vue-components/ChatMessage.vue     |  5 ++
 .../assets/vue-components/MessageHistory.vue  | 20 ++++++
 .../assets/vue-components/ProgressTracker.vue | 68 ++++++++++++++++++-
 eveai_chat_client/templates/chat.html         |  1 +
 eveai_chat_client/views/chat_views.py         |  1 +
 7 files changed, 102 insertions(+), 1 deletion(-)

diff --git a/common/utils/chat_utils.py b/common/utils/chat_utils.py
index f7e334c..e881e40 100644
--- a/common/utils/chat_utils.py
+++ b/common/utils/chat_utils.py
@@ -31,6 +31,7 @@ def get_default_chat_customisation(tenant_customisation=None):
         'markdown_background_color': 'transparent',
         'markdown_text_color': '#ffffff',
         'sidebar_markdown': '',
+        'progress_tracker_insights': 'No Information'
     }
 
     # If no tenant customization is provided, return the defaults
diff --git a/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml b/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
index 4193b6b..2e1da15 100644
--- a/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
+++ b/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
@@ -6,6 +6,13 @@ configuration:
     description: "Sidebar Markdown-formatted Text"
     type: "text"
     required: false
+  "progress_tracker_insights":
+    name: "Progress Tracker Insights"
+    description: "Level of information shown by the Progress Tracker"
+    type: "enum"
+    allowed_values: ["No Information", "Active Interaction Only", "All Interactions"]
+    default: "No Information"
+    required: true
   "primary_color":
     name: "Primary Color"
     description: "Primary Color"
diff --git a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
index e08d838..c390023 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
+++ b/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'],
diff --git a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue
index ee570b8..6771aae 100644
--- a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue
+++ b/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;
         }
     }
 };
diff --git a/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue b/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue
index 5188b3e..e602984 100644
--- a/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue
+++ b/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>
\ No newline at end of file
diff --git a/eveai_chat_client/templates/chat.html b/eveai_chat_client/templates/chat.html
index ca66fc0..3900854 100644
--- a/eveai_chat_client/templates/chat.html
+++ b/eveai_chat_client/templates/chat.html
@@ -10,6 +10,7 @@
     // Definieer chatConfig voordat componenten worden geladen
     window.chatConfig = {
         explanation: `{{ customisation.sidebar_markdown|default('') }}`,
+        progress_tracker_insights: `{{ customisation.progress_tracker_insights|default('No Information') }}`,
         conversationId: '{{ conversation_id|default("default") }}',
         messages: {{ messages|tojson|safe }},
         settings: {
diff --git a/eveai_chat_client/views/chat_views.py b/eveai_chat_client/views/chat_views.py
index a807d13..1cb74f7 100644
--- a/eveai_chat_client/views/chat_views.py
+++ b/eveai_chat_client/views/chat_views.py
@@ -93,6 +93,7 @@ def chat(magic_link_code):
         current_app.logger.debug(f"Make Customisation Options: {tenant_make.chat_customisation_options}")
         try:
             customisation = get_default_chat_customisation(tenant_make.chat_customisation_options)
+            current_app.logger.debug(f"Customisation Options: {customisation}")
         except Exception as e:
             current_app.logger.error(f"Error processing customisation options: {str(e)}")
             # Fallback to default customisation