refactoring
This commit is contained in:
4NK IA
parent
9af63f22fe
commit
d5a29d9b04
@ -1,13 +1,13 @@
|
||||
import React, { useState, useCallback } from 'react'
|
||||
import {
|
||||
Box, Typography, Paper, Card, CardContent, Chip, Button, List, ListItemText, ListItemButton,
|
||||
Tooltip, Alert, Accordion, AccordionSummary, AccordionDetails, CircularProgress, TextField,
|
||||
Grid, Divider, Badge, Stack, Avatar, CardHeader, Fade,
|
||||
import {
|
||||
Box, Typography, Paper, Card, CardContent, Chip, Button, List, ListItemText, ListItemButton,
|
||||
Tooltip, Alert, Accordion, AccordionSummary, AccordionDetails, CircularProgress, TextField,
|
||||
Divider, Badge, Stack, Avatar, CardHeader, Fade,
|
||||
Snackbar, Alert as MuiAlert
|
||||
} from '@mui/material'
|
||||
import {
|
||||
import {
|
||||
Person, LocationOn, Business, Description, Language, Verified, ExpandMore, TextFields, Assessment,
|
||||
Save, Delete, Search, Visibility, Check, Refresh,
|
||||
Save, Delete, Search, Visibility, Check, Refresh,
|
||||
FileDownload, FileOpen, AutoAwesome, Security
|
||||
} from '@mui/icons-material'
|
||||
import { useAppDispatch, useAppSelector } from '../store'
|
||||
@ -67,13 +67,13 @@ export default function ExtractionView() {
|
||||
|
||||
const handleSaveEntity = useCallback(async (type: 'person' | 'address' | 'company', index: number, entity: any) => {
|
||||
if (!currentFolderHash || !currentResult) return
|
||||
|
||||
|
||||
try {
|
||||
setSavingKey(`${type}-${index}`)
|
||||
await updateEntity(currentFolderHash, currentResult.fileHash, type, {
|
||||
index,
|
||||
id: entity.id,
|
||||
patch: entity
|
||||
await updateEntity(currentFolderHash, currentResult.fileHash, type, {
|
||||
index,
|
||||
id: entity.id,
|
||||
patch: entity
|
||||
})
|
||||
showSnackbar(`${type === 'person' ? 'Personne' : type === 'address' ? 'Adresse' : 'Entreprise'} sauvegardée`, 'success')
|
||||
} catch (error: any) {
|
||||
@ -85,11 +85,11 @@ export default function ExtractionView() {
|
||||
|
||||
const handleDeleteEntity = useCallback(async (type: 'person' | 'address' | 'company', index: number, entity: any) => {
|
||||
if (!currentFolderHash || !currentResult) return
|
||||
|
||||
|
||||
try {
|
||||
await deleteEntity(currentFolderHash, currentResult.fileHash, type, { index, id: entity.id })
|
||||
showSnackbar(`${type === 'person' ? 'Personne' : type === 'address' ? 'Adresse' : 'Entreprise'} supprimée`, 'success')
|
||||
|
||||
|
||||
// Mettre à jour les brouillons locaux
|
||||
if (type === 'person') {
|
||||
setPersonsDraft(prev => prev.filter((_, i) => i !== index))
|
||||
@ -105,12 +105,12 @@ export default function ExtractionView() {
|
||||
|
||||
const handleEnrichment = useCallback(async (type: 'person' | 'address' | 'company', index: number) => {
|
||||
if (!currentFolderHash || !currentResult) return
|
||||
|
||||
|
||||
try {
|
||||
setEnriching(prev => ({ ...prev, [`${type}-${index}`]: 'running' }))
|
||||
await startEnrichment(currentFolderHash, currentResult.fileHash, type)
|
||||
showSnackbar(`Enrichissement ${type} démarré`, 'info')
|
||||
|
||||
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const status = await getEnrichmentStatus(currentFolderHash, currentResult.fileHash, type)
|
||||
@ -172,7 +172,7 @@ export default function ExtractionView() {
|
||||
Gestion et enrichissement des entités extraites
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Tooltip title="Re-traiter tous les documents du dossier">
|
||||
<Button
|
||||
@ -204,8 +204,8 @@ export default function ExtractionView() {
|
||||
{/* Sidebar de navigation moderne */}
|
||||
<Box sx={{ flex: '0 0 300px', minWidth: 0 }}>
|
||||
<Card sx={{ height: 'fit-content', position: 'sticky', top: 20 }}>
|
||||
<CardHeader
|
||||
title="Documents"
|
||||
<CardHeader
|
||||
title="Documents"
|
||||
subheader={`${folderResults.length} fichier${folderResults.length > 1 ? 's' : ''}`}
|
||||
avatar={<Avatar sx={{ bgcolor: 'primary.main' }}><Description /></Avatar>}
|
||||
/>
|
||||
@ -216,7 +216,7 @@ export default function ExtractionView() {
|
||||
key={result.fileHash}
|
||||
selected={index === currentIndex}
|
||||
onClick={() => gotoResult(index)}
|
||||
sx={{
|
||||
sx={{
|
||||
borderLeft: index === currentIndex ? 3 : 0,
|
||||
borderLeftColor: 'primary.main',
|
||||
bgcolor: index === currentIndex ? 'primary.50' : 'transparent'
|
||||
@ -224,9 +224,9 @@ export default function ExtractionView() {
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontWeight: index === currentIndex ? 600 : 400,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
@ -261,10 +261,10 @@ export default function ExtractionView() {
|
||||
subheader={`Téléversé le ${new Date(extraction.document.uploadTimestamp as unknown as string).toLocaleString()}`}
|
||||
action={
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Chip
|
||||
label={extraction.document.mimeType}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
<Chip
|
||||
label={extraction.document.mimeType}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="info"
|
||||
/>
|
||||
<Chip
|
||||
@ -308,40 +308,6 @@ export default function ExtractionView() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Texte extrait avec toggle */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardHeader
|
||||
title="Texte extrait"
|
||||
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
|
||||
action={
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
|
||||
onClick={() => setShowTextExtract(!showTextExtract)}
|
||||
>
|
||||
{showTextExtract ? 'Masquer' : 'Afficher'}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Fade in={showTextExtract}>
|
||||
<CardContent sx={{ pt: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.50',
|
||||
maxHeight: 300,
|
||||
overflow: 'auto',
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
|
||||
{extraction.extraction.text.raw}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</CardContent>
|
||||
</Fade>
|
||||
</Card>
|
||||
|
||||
{/* Entités extraites avec design moderne */}
|
||||
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
|
||||
@ -404,18 +370,20 @@ export default function ExtractionView() {
|
||||
})}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`person-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`person-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('person', i)}
|
||||
>
|
||||
{enriching[`person-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`person-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`person-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('person', i)}
|
||||
>
|
||||
{enriching[`person-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`person-${i}`] === 'completed' ? 'Bodacc ✓' :
|
||||
enriching[`person-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@ -427,7 +395,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
@ -437,7 +405,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
Sauver
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="error"
|
||||
@ -453,12 +421,12 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Adresses */}
|
||||
{addressesDraft.length > 0 && (
|
||||
<Grid item xs={12} lg={4}>
|
||||
<Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardHeader
|
||||
title="Adresses"
|
||||
@ -476,21 +444,19 @@ export default function ExtractionView() {
|
||||
{addressesDraft.map((a: any, i: number) => (
|
||||
<Paper key={`a-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
|
||||
<Stack spacing={2}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Rue"
|
||||
value={a.street}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], street: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Rue"
|
||||
value={a.street}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], street: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -502,8 +468,6 @@ export default function ExtractionView() {
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -515,48 +479,46 @@ export default function ExtractionView() {
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Pays"
|
||||
value={a.country}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], country: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Description"
|
||||
multiline
|
||||
rows={2}
|
||||
value={a.description}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], description: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`address-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`address-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('address', i)}
|
||||
>
|
||||
{enriching[`address-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
fullWidth
|
||||
label="Pays"
|
||||
value={a.country}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], country: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Description"
|
||||
multiline
|
||||
rows={2}
|
||||
value={a.description}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], description: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`address-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`address-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('address', i)}
|
||||
>
|
||||
{enriching[`address-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`address-${i}`] === 'completed' ? 'BAN+GéoRisque+Cadastre ✓' :
|
||||
enriching[`address-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@ -568,7 +530,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
@ -578,7 +540,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
Sauver
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="error"
|
||||
@ -594,12 +556,12 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Entreprises */}
|
||||
{companiesDraft.length > 0 && (
|
||||
<Grid item xs={12} lg={4}>
|
||||
<Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardHeader
|
||||
title="Entreprises"
|
||||
@ -617,8 +579,8 @@ export default function ExtractionView() {
|
||||
{companiesDraft.map((c: any, i: number) => (
|
||||
<Paper key={`c-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
|
||||
<Stack spacing={2}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -630,8 +592,7 @@ export default function ExtractionView() {
|
||||
return x
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -645,20 +606,21 @@ export default function ExtractionView() {
|
||||
return x
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`company-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`company-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('company', i)}
|
||||
>
|
||||
{enriching[`company-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`company-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`company-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('company', i)}
|
||||
>
|
||||
{enriching[`company-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`company-${i}`] === 'completed' ? 'Inforgreffe+Societe.com ✓' :
|
||||
enriching[`company-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@ -670,7 +632,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
@ -680,7 +642,7 @@ export default function ExtractionView() {
|
||||
>
|
||||
Sauver
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="error"
|
||||
@ -696,65 +658,100 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Métadonnées détaillées */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Métadonnées techniques"
|
||||
avatar={<Avatar sx={{ bgcolor: 'grey.600' }}><Security /></Avatar>}
|
||||
/>
|
||||
<Divider />
|
||||
<CardContent>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography>Informations de traitement</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Hash du fichier
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
|
||||
{extraction.fileHash}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Traitement effectué
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{new Date(extraction.status.timestamp).toLocaleString()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Confiance globale
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
{(extraction.metadata.quality as any).ollamaScore && (
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Score IA (Ollama)
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* Métadonnées détaillées */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Métadonnées techniques"
|
||||
avatar={<Avatar sx={{ bgcolor: 'grey.600' }}><Security /></Avatar>}
|
||||
/>
|
||||
<Divider />
|
||||
<CardContent>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography>Informations de traitement</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Hash du fichier
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
|
||||
{extraction.fileHash}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Traitement effectué
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{new Date(extraction.status.timestamp).toLocaleString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Confiance globale
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
{(extraction.metadata.quality as any).ollamaScore && (
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Score IA (Ollama)
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Texte extrait avec toggle - déplacé en bas */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Texte extrait"
|
||||
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
|
||||
action={
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
|
||||
onClick={() => setShowTextExtract(!showTextExtract)}
|
||||
>
|
||||
{showTextExtract ? 'Masquer' : 'Afficher'}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Fade in={showTextExtract}>
|
||||
<CardContent sx={{ pt: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.50',
|
||||
maxHeight: 300,
|
||||
overflow: 'auto',
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
|
||||
{extraction.extraction.text.raw}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</CardContent>
|
||||
</Fade>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Snackbar pour les notifications */}
|
||||
<Snackbar
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user