- verbeteringen client

- vereenvoudiging van de ProgressTracker.vue door verwijderen van single line display
- toevoegen van busy animatie tijdens redeneren

eveai_chat_client/__init__.py

@@ -76,13 +76,13 @@ def create_app(config_file=None):
     app.logger.info(f"EveAI Chat Client Started Successfully (PID: {os.getpid()})")
     app.logger.info("-------------------------------------------------------------------------------------------------")
 
-    @app.before_request
-    def app_before_request():
-        if request.path.startswith('/healthz'):
-            pass
-        app.logger.debug(f'App before request: {request.path} ===== Method: {request.method} =====')
-        app.logger.debug(f'Full URL: {request.url}')
-        app.logger.debug(f'Endpoint: {request.endpoint}')
+    # @app.before_request
+    # def app_before_request():
+    #     if request.path.startswith('/healthz'):
+    #         pass
+    #     app.logger.debug(f'App before request: {request.path} ===== Method: {request.method} =====')
+    #     app.logger.debug(f'Full URL: {request.url}')
+    #     app.logger.debug(f'Endpoint: {request.endpoint}')
 
     return app
 

eveai_chat_client/static/assets/css/chat-components.css

@@ -770,11 +770,6 @@
     overflow-y: auto;
 }
 
-.progress-content.single-line {
-    max-height: 30px;
-    overflow: hidden;
-    padding: 8px 12px;
-}
 
 .progress-line {
     padding: 4px 12px;
@@ -819,7 +814,31 @@
         padding: 3px 10px;
     }
 
-    .progress-content.single-line {
-        padding: 6px 10px;
+}
+
+/* Progress Icon Styles */
+.progress-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    display: inline-block;
+}
+
+.working-animation {
+    width: 20px;
+    height: 20px;
+}
+
+/* Mobile responsiveness for progress icons */
+@media (max-width: 768px) {
+    .progress-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+    }
+    
+    .working-animation {
+        width: 16px;
+        height: 16px;
     }
 }

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

@@ -1,21 +1,33 @@
 <template>
-    <div class="progress-tracker" :class="{ 'expanded': isExpanded, 'completed': isCompleted && !hasError, 'error': error || hasError }">
+    <div class="progress-tracker" :class="{ 
+        'expanded': isExpanded, 
+        'completed': isCompleted && !hasError, 
+        'error': error || hasError
+    }">
         <div 
             class="progress-header" 
             @click="toggleExpand"
             :title="isExpanded ? 'Inklappen' : 'Uitklappen voor volledige voortgang'"
         >
             <div class="progress-title">
-                <span v-if="connecting" class="spinner"></span>
-                <span v-else-if="error" class="status-icon error">✗</span>
-                <span v-else-if="isCompleted" class="status-icon completed">✓</span>
-                <span v-else class="status-icon in-progress"></span>
+                <!-- Evie working animatie tijdens processing -->
+                <img v-if="isProcessing" 
+                     src="/static/assets/img/evie_working.webp" 
+                     alt="Bezig met verwerken..." 
+                     class="progress-icon working-animation">
+                
+                <!-- Status icons na completion -->
+                <span v-else-if="connecting" class="spinner progress-icon"></span>
+                <span v-else-if="error" class="status-icon error progress-icon">✗</span>
+                <span v-else-if="isCompleted" class="status-icon completed progress-icon">✓</span>
+                
+                <!-- Status tekst -->
                 <span v-if="error">Fout bij verwerking</span>
                 <span v-else-if="isCompleted">Verwerking voltooid</span>
                 <span v-else>Bezig met redeneren...</span>
             </div>
             <div class="progress-toggle">
-                {{ isExpanded ? '▲' : '▼' }}
+                {{ isExpanded ? '▼' : '◄' }}
             </div>
         </div>
 
@@ -23,13 +35,14 @@
             {{ error }}
         </div>
 
+        <!-- Content alleen tonen als expanded -->
         <div 
+            v-if="isExpanded"
             ref="progressContainer"
-            class="progress-content" 
-            :class="{ 'single-line': !isExpanded }"
+            class="progress-content"
         >
             <div 
-                v-for="(line, index) in displayLines" 
+                v-for="(line, index) in progressLines" 
                 :key="index"
                 class="progress-line"
             >
@@ -65,13 +78,8 @@ export default {
         };
     },
     computed: {
-        displayLines() {
-            if (this.isExpanded) {
-                return this.progressLines;
-            } else {
-                // Show only the last line when collapsed
-                return this.progressLines.length > 0 ? [this.progressLines[this.progressLines.length - 1]] : [];
-            }
+        isProcessing() {
+            return !this.isCompleted && !this.hasError && !this.connecting;
         }
     },
     mounted() {

eveai_chat_client/views/chat_views.py

@@ -111,20 +111,6 @@ def chat(magic_link_code):
         if isinstance(specialist_config, str):
             specialist_config = json.loads(specialist_config)
 
-        # # Send a first 'empty' message to the specialist, in order to receive a starting message
-        # Database(tenant_id).switch_schema()
-        # specialist_args = session['magic_link'].get('specialist_args', {})
-        # specialist_args['question'] = ''
-        # result = SpecialistServices.execute_specialist(
-        #     tenant_id=tenant_id,
-        #     specialist_id=specialist.id,
-        #     specialist_arguments=specialist_args,
-        #     session_id=session['chat_session_id'],
-        #     user_timezone=specialist_config.get('timezone', 'UTC')
-        # )
-        #
-        # welcome_message = result.get('answer')
-
         return render_template('chat.html',
                                tenant=tenant,
                                tenant_make=tenant_make,