interface interactive

app/page.tsx

@@ -1,31 +1,25 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { FileUploadComponent } from "./components/FileUploadComponent";
-
 import { EntityMappingTable } from "./components/EntityMappingTable";
 import { ProgressBar } from "./components/ProgressBar";
 import { useFileHandler } from "./components/FileHandler";
 import { useAnonymization } from "./components/AnonymizationLogic";
 import { useDownloadActions } from "./components/DownloadActions";
+import { ResultPreviewComponent } from "./components/ResultPreviewComponent";
+import { EntityMapping } from "./config/entityLabels"; // Importer l'interface unifiée
 
-interface EntityMapping {
-  originalValue: string;
-  anonymizedValue: string;
-  entityType: string;
-  startIndex: number;
-  endIndex: number;
-}
+// Supprimer l'interface locale EntityMapping (lignes 12-18)
 
 export default function Home() {
   const [sourceText, setSourceText] = useState("");
   const [outputText, setOutputText] = useState("");
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
-  const [fileContent, setFileContent] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [isLoadingFile, setIsLoadingFile] = useState(false);
   const [entityMappings, setEntityMappings] = useState<EntityMapping[]>([]);
-  const [isExampleLoaded, setIsExampleLoaded] = useState(false); // NOUVEAU
+  const [isExampleLoaded, setIsExampleLoaded] = useState(false);
 
   const progressSteps = ["Téléversement", "Prévisualisation", "Anonymisation"];
 
@@ -40,35 +34,46 @@ export default function Home() {
     setSourceText("");
     setOutputText("");
     setUploadedFile(null);
-    setFileContent("");
     setError(null);
     setIsLoadingFile(false);
     setEntityMappings([]);
-    setIsExampleLoaded(false); // NOUVEAU
+    setIsExampleLoaded(false);
   };
 
+  // Fonction pour mettre à jour les mappings depuis l'éditeur interactif
+  const handleMappingsUpdate = useCallback(
+    (updatedMappings: EntityMapping[]) => {
+      setEntityMappings(updatedMappings);
+    },
+    []
+  );
+
   // Hooks personnalisés pour la logique métier
   const { handleFileChange } = useFileHandler({
     setUploadedFile,
     setSourceText,
-    setFileContent,
     setError,
-    setIsLoadingFile, // Passer le setter
+    setIsLoadingFile,
   });
 
   const { anonymizeData, isProcessing } = useAnonymization({
-    sourceText,
-    fileContent,
-    uploadedFile,
     setOutputText,
     setError,
     setEntityMappings,
   });
 
-  const { copyToClipboard, downloadText } = useDownloadActions({ outputText });
+  const { copyToClipboard, downloadText } = useDownloadActions({
+    outputText,
+    entityMappings,
+  });
+
+  // Fonction wrapper pour appeler anonymizeData avec les bonnes données
+  const handleAnonymize = () => {
+    anonymizeData({ file: uploadedFile, text: sourceText });
+  };
 
   return (
-    <div className="min-h-screen  w-full overflow-hidden">
+    <div className="min-h-screen w-full overflow-hidden">
       {/* Main Content */}
       <div className="max-w-6xl mx-auto px-2 sm:px-4 py-4 sm:py-8 space-y-4">
         {/* Progress Bar */}
@@ -83,8 +88,7 @@ export default function Home() {
               sourceText={sourceText}
               setSourceText={setSourceText}
               setUploadedFile={setUploadedFile}
-              setFileContent={setFileContent}
-              onAnonymize={anonymizeData}
+              onAnonymize={handleAnonymize}
               isProcessing={isProcessing}
               canAnonymize={
                 uploadedFile !== null ||
@@ -97,11 +101,27 @@ export default function Home() {
               downloadText={downloadText}
               isExampleLoaded={isExampleLoaded}
               setIsExampleLoaded={setIsExampleLoaded}
-              entityMappings={entityMappings} // Ajouter cette ligne
+              entityMappings={entityMappings}
             />
           </div>
         </div>
 
+        {/* Interactive Text Editor - Nouveau composant pour l'édition interactive */}
+        {outputText && (
+          <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
+            <div className="p-1 sm:p-3">
+              <ResultPreviewComponent
+                outputText={outputText}
+                sourceText={sourceText}
+                copyToClipboard={copyToClipboard}
+                downloadText={downloadText}
+                entityMappings={entityMappings}
+                onMappingsUpdate={handleMappingsUpdate}
+              />
+            </div>
+          </div>
+        )}
+
         {/* Entity Mapping Table - Seulement si outputText existe */}
         {outputText && (
           <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">