feat: add feature to speak with the AI and create report from contexts

2026-04-19 18:27:42 +02:00
parent eb1fb5ca78
commit 7ef93276e1
19 changed files with 656 additions and 33 deletions
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@ -0,0 +1,127 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Trash2, FileText, Clock, Loader2, XCircle, AlertCircle } from 'lucide-react'
+import { reportsApi, type Report } from '@/api/reports'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { Badge } from '@/components/ui/badge'
+
+function StatusBadge({ status }: { status: Report['status'] }) {
+  if (status === 'generating') return (
+    <Badge variant="secondary" className="gap-1 text-xs">
+      <Loader2 className="h-3 w-3 animate-spin" /> En cours
+    </Badge>
+  )
+  if (status === 'error') return (
+    <Badge variant="destructive" className="gap-1 text-xs">
+      <AlertCircle className="h-3 w-3" /> Erreur
+    </Badge>
+  )
+  return null
+}
+
+export function Reports() {
+  const [reports, setReports] = useState<Report[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    try { setReports((await reportsApi.list()) ?? []) }
+    finally { setLoading(false) }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  // Poll toutes les 3s tant qu'il y a des rapports en cours
+  useEffect(() => {
+    const hasGenerating = reports.some(r => r.status === 'generating')
+    if (!hasGenerating) return
+    const interval = setInterval(load, 3000)
+    return () => clearInterval(interval)
+  }, [reports, load])
+
+  async function remove(id: string) {
+    await reportsApi.delete(id)
+    setReports(prev => prev.filter(r => r.id !== id))
+  }
+
+  if (loading) return <div className="flex justify-center py-20"><Spinner /></div>
+
+  return (
+    <div className="p-4 md:p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Rapports IA</h1>
+        <p className="text-muted-foreground text-sm">
+          Vos questions posées sur des extraits de résumés, avec les réponses de l'IA.
+        </p>
+      </div>
+
+      {reports.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="py-12 text-center text-muted-foreground">
+            <FileText className="h-8 w-8 mx-auto mb-3 opacity-50" />
+            <p>Aucun rapport enregistré</p>
+            <p className="text-xs mt-1">Sélectionnez du texte dans un résumé et posez une question à l'IA.</p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {reports.map(r => (
+            <Card key={r.id} className={r.status === 'generating' ? 'border-primary/30' : ''}>
+              <CardContent className="pt-4 pb-4 space-y-3">
+                {/* Meta */}
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Clock className="h-3 w-3" />
+                      {new Date(r.created_at).toLocaleString('fr-FR')}
+                    </div>
+                    <StatusBadge status={r.status} />
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                    onClick={() => remove(r.id)}
+                    title={r.status === 'generating' ? 'Annuler' : 'Supprimer'}
+                  >
+                    {r.status === 'generating'
+                      ? <XCircle className="h-3 w-3" />
+                      : <Trash2 className="h-3 w-3" />}
+                  </Button>
+                </div>
+
+                {/* Extraits de contexte */}
+                {r.context_excerpt.split('\n\n---\n\n').map((excerpt, i) => (
+                  <div key={i} className="rounded bg-muted/60 px-3 py-2 text-xs text-muted-foreground italic">
+                    «&nbsp;{excerpt}&nbsp;»
+                  </div>
+                ))}
+
+                {/* Question */}
+                <p className="text-sm font-medium">{r.question}</p>
+
+                {/* Réponse */}
+                {r.status === 'generating' && (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                    L'IA génère la réponse…
+                  </div>
+                )}
+                {r.status === 'done' && (
+                  <div className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed border-t pt-3">
+                    {r.answer}
+                  </div>
+                )}
+                {r.status === 'error' && (
+                  <div className="text-sm text-destructive border-t pt-3">
+                    Erreur : {r.error_msg || 'Une erreur est survenue lors de la génération.'}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}