Integrate Mistral for email analysis and enhance UI/UX

backend/controllers/statisticsController.js

@@ -35,7 +35,6 @@ exports.getStatistics = async (req, res) => {
     const statistics = {
       totalMails: mails.length,
       mailsByStatus: countMailsByStatus(mails),
-      threatsByCategory: countThreatsByCategory(mails),
       topSenders: getTopSenders(mails, 5),
       detectRatio: calculateDetectRatio(mails)
     };
@@ -176,40 +175,6 @@ function countMailsByStatus(mails) {
   return statusCounts;
 }
 
-/**
- * Compte les menaces par catégorie
- * @param {Array} mails - Liste des mails
- * @returns {Object} Comptage par catégorie de menace
- */
-function countThreatsByCategory(mails) {
-  const threatCounts = {
-    'Phishing': 0,
-    'Malware': 0,
-    'Spam': 0,
-    'Other': 0
-  };
-
-  // Pour cette démo, nous attribuons des catégories en fonction du sujet
-  // En production, il faudrait se baser sur des analyses plus précises
-  mails.forEach(mail => {
-    if (mail.Statut !== 'QUARANTINE' && mail.Statut !== 'ERROR') return;
-
-    const subject = (mail.Sujet || '').toLowerCase();
-
-    if (subject.includes('account') || subject.includes('password') || subject.includes('login')) {
-      threatCounts['Phishing']++;
-    } else if (subject.includes('virus') || subject.includes('malware')) {
-      threatCounts['Malware']++;
-    } else if (subject.includes('offer') || subject.includes('discount') || subject.includes('sale')) {
-      threatCounts['Spam']++;
-    } else {
-      threatCounts['Other']++;
-    }
-  });
-
-  return threatCounts;
-}
-
 /**
  * Identifie les principaux expéditeurs
  * @param {Array} mails - Liste des mails

docker-compose.yml

@@ -1,6 +1,9 @@
 services:
   detectish:
     image: matthl2002/detectish:latest
+    # build:
+    #   context: .
+    #   dockerfile: Dockerfile
     container_name: detectish
     depends_on:
       mysql:
@@ -22,6 +25,7 @@ services:
       DB_PORT: 3306
       CLAMAV_HOST: clamav
       CLAMAV_PORT: 3310
+      MISTRAL_API_KEY: your_mistral_api_key # Replace with your actual Mistral API key
     healthcheck:
       test: ["CMD-SHELL", "curl -f http://localhost:6969/health || exit 1"]
       interval: 30s
@@ -32,6 +36,9 @@ services:
 
   backend:
     image: matthl2002/detectish-backend:latest
+    # build:
+    #   context: ./backend
+    #   dockerfile: Dockerfile
     container_name: detectish-backend
     depends_on:
       mysql:
@@ -62,6 +69,9 @@ services:
 
   frontend:
     image: matthl2002/detectish-frontend:latest
+    # build:
+    #   context: ./frontend
+    #   dockerfile: Dockerfile
     container_name: detectish-frontend
     depends_on:
       backend:

frontend/package.json

@@ -21,9 +21,11 @@
     "chart.js": "^4.4.8",
     "express-validator": "^7.2.1",
     "jsonwebtoken": "^9.0.2",
+    "marked": "^15.0.8",
     "pinia": "^3.0.1",
     "postcss": "^8.5.3",
     "primeicons": "^7.0.0",
+    "primevue": "^4.3.3",
     "tailwindcss": "^4.0.12",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

frontend/src/components/MailComponent.vue

@@ -32,7 +32,7 @@ const loadMailDetails = async () => {
     const response = await api.get(`/mails/${props.mail.ID_Mail}/complete`);
     mailDetails.value = response.data;
   } catch (error) {
-    console.error('Erreur lors du chargement des détails du mail:', error);
+    console.error('Error loading email details:', error);
   } finally {
     loading.value = false;
   }
@@ -85,7 +85,7 @@ onMounted(() => {
       </div>
 
       <div v-else>
-        <!-- Composant d'analyse de sécurité -->
+        <!-- Security analysis component -->
         <div class="mb-4">
           <SecurityAnalysisComponent
             :analyses="mailDetails.analyses"
@@ -94,7 +94,7 @@ onMounted(() => {
           />
         </div>
 
-        <!-- En-tête détaillé du mail -->
+        <!-- Email header details -->
         <div class="mb-3 border-t border-b py-3">
           <div class="grid grid-cols-2 gap-2 text-sm">
             <div>
@@ -112,7 +112,7 @@ onMounted(() => {
           </div>
         </div>
 
-        <!-- Corps du mail -->
+        <!-- Email body -->
         <div class="mb-3">
           <div class="flex justify-between items-center mb-2">
             <h3 class="text-sm font-semibold">Email Content</h3>
@@ -130,31 +130,31 @@ onMounted(() => {
             </div>
           </div>
 
-          <!-- Indicateur de sécurité -->
+          <!-- Security indicator -->
           <div class="bg-red-100 text-red-800 px-3 py-1 mb-3 text-sm rounded flex items-center">
             <i class="pi pi-lock mr-1 text-sm"></i>
             <span>Secure View: Links and forms are disabled</span>
           </div>
 
-          <!-- Contenu interprété (par défaut) -->
+          <!-- Rendered content (default) -->
           <div v-if="!showRawHtml" class="email-content bg-white p-3 rounded border relative" @click="preventClicks">
             <div v-html="mailDetails.content || '<em>The content of this email is not available or is empty.</em>'"></div>
           </div>
 
-          <!-- Contenu brut (option) -->
+          <!-- Raw content (optional) -->
           <div v-else
             class="whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded border overflow-auto max-h-[400px] font-mono">
             {{ mailDetails.content || "The content of this email is not available or is empty." }}
           </div>
 
-          <!-- Avertissement de sécurité -->
+          <!-- Security warning -->
           <div class="text-xs text-amber-600 mt-1 flex items-center">
             <i class="pi pi-exclamation-triangle text-xs mr-1"></i>
             <span>Warning: This email may contain unsafe content</span>
           </div>
         </div>
 
-        <!-- Pied de page avec action fermer -->
+        <!-- Footer with close button -->
         <div class="mt-3 flex justify-end">
           <button @click="close()"
             class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-700 px-2 py-1 rounded flex items-center">