presidio ok v.1 button disposition
This commit is contained in:
nBiqoz
@@ -1,7 +1,15 @@
|
||||
import { Upload, FileText, AlertTriangle } from "lucide-react";
|
||||
import {
|
||||
Upload,
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Copy,
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
import { SampleTextComponent } from "./SampleTextComponent";
|
||||
import { SupportedDataTypes } from "./SupportedDataTypes";
|
||||
import { AnonymizationInterface } from "./AnonymizationInterface";
|
||||
import { highlightEntities } from "../utils/highlightEntities";
|
||||
|
||||
interface FileUploadComponentProps {
|
||||
uploadedFile: File | null;
|
||||
@@ -16,6 +24,8 @@ interface FileUploadComponentProps {
|
||||
isLoadingFile?: boolean;
|
||||
onRestart?: () => void;
|
||||
outputText?: string;
|
||||
copyToClipboard?: () => void;
|
||||
downloadText?: () => void;
|
||||
}
|
||||
|
||||
export const FileUploadComponent = ({
|
||||
@@ -31,66 +41,156 @@ export const FileUploadComponent = ({
|
||||
isLoadingFile = false,
|
||||
onRestart,
|
||||
outputText,
|
||||
copyToClipboard,
|
||||
downloadText,
|
||||
}: FileUploadComponentProps) => {
|
||||
// Si un fichier est uploadé ou qu'il y a du texte d'exemple, on affiche le preview
|
||||
if (uploadedFile || (sourceText && sourceText.trim())) {
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-6">
|
||||
{/* Preview du document avec en-tête simple */}
|
||||
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
|
||||
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
{uploadedFile ? (
|
||||
<p className="text-xs sm:text-sm text-orange-600 truncate">
|
||||
{uploadedFile.name} •{" "}
|
||||
{(uploadedFile.size / 1024).toFixed(1)} KB
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs sm:text-sm text-orange-600">
|
||||
Demo - Exemple de texte
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 sm:p-6">
|
||||
{/* Zone de texte avec limite de hauteur et scroll */}
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
|
||||
{isLoadingFile ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
{/* Si on a un résultat, afficher 2 blocs côte à côte */}
|
||||
{outputText ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Preview du document original */}
|
||||
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
|
||||
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
|
||||
<span className="text-xs sm:text-sm text-gray-600">
|
||||
Chargement du fichier en cours...
|
||||
</span>
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
{uploadedFile ? (
|
||||
<p className="text-xs sm:text-sm text-orange-600 truncate">
|
||||
{uploadedFile.name} •{" "}
|
||||
{(uploadedFile.size / 1024).toFixed(1)} KB
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs sm:text-sm text-orange-600">
|
||||
Demo - Exemple de texte
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
|
||||
{sourceText || "Aucun contenu à afficher"}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-1">
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-72 overflow-y-auto overflow-x-hidden">
|
||||
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
|
||||
{sourceText || "Aucun contenu à afficher"}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disclaimer déplacé en dessous du texte */}
|
||||
<div className="mt-4">
|
||||
<div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
|
||||
<AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
|
||||
<p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
|
||||
Cet outil IA peut ne pas détecter toutes les informations
|
||||
sensibles. Vérifiez le résultat avant de le partager.
|
||||
</p>
|
||||
{/* Bloc résultat anonymisé */}
|
||||
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
|
||||
<div className="bg-green-50 border-b border-green-200 px-4 sm:px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<Shield className="h-4 w-4 sm:h-5 sm:w-5 text-green-600" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs sm:text-sm text-green-600">
|
||||
Document anonymisé
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Boutons d'action */}
|
||||
<div className="flex items-center gap-2">
|
||||
{copyToClipboard && (
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="p-2 text-green-600 hover:text-green-700 hover:bg-green-100 rounded-lg transition-colors duration-200"
|
||||
title="Copier le texte"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{downloadText && (
|
||||
<button
|
||||
onClick={downloadText}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center space-x-1"
|
||||
title="Télécharger le fichier"
|
||||
>
|
||||
<Download className="h-3 w-3" />
|
||||
<span className="hidden sm:inline">Télécharger</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-1">
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-72 overflow-y-auto overflow-x-hidden">
|
||||
<div className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words overflow-wrap-anywhere leading-relaxed">
|
||||
{highlightEntities(
|
||||
outputText || "Aucun contenu à afficher"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Preview normal quand pas de résultat */
|
||||
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
|
||||
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
{uploadedFile ? (
|
||||
<p className="text-xs sm:text-sm text-orange-600 truncate">
|
||||
{uploadedFile.name} •{" "}
|
||||
{(uploadedFile.size / 1024).toFixed(1)} KB
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs sm:text-sm text-orange-600">
|
||||
Demo - Exemple de texte
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 ">
|
||||
{/* Zone de texte avec limite de hauteur et scroll */}
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
|
||||
{isLoadingFile ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
|
||||
<span className="text-xs sm:text-sm text-gray-600">
|
||||
Chargement du fichier en cours...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
|
||||
{sourceText || "Aucun contenu à afficher"}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Disclaimer déplacé en dessous du texte */}
|
||||
<div className="mt-4">
|
||||
<div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
|
||||
<AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
|
||||
<p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
|
||||
Cet outil IA peut ne pas détecter toutes les informations
|
||||
sensibles. Vérifiez le résultat avant de le partager.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Boutons d'action - Responsive mobile */}
|
||||
{canAnonymize && !isLoadingFile && (
|
||||
|
||||
Reference in New Issue
Block a user