350 lines
14 KiB
TypeScript
350 lines
14 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react'
|
|
import { TrendingUp, Clock, Sparkles, MessageSquarePlus, Loader2, Plus, X, Send, ChevronDown, ChevronUp } from 'lucide-react'
|
|
import { summariesApi, type Summary } from '@/api/summaries'
|
|
import { reportsApi } from '@/api/reports'
|
|
import { assetsApi, type Asset } from '@/api/assets'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Markdown } from '@/components/ui/markdown'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Spinner } from '@/components/ui/spinner'
|
|
import { useAuth } from '@/lib/auth'
|
|
|
|
// ── Text-selection floating button ─────────────────────────────────────────
|
|
|
|
function useTextSelection(containerRef: React.RefObject<HTMLElement>) {
|
|
const [selection, setSelection] = useState<{ text: string; x: number; y: number } | null>(null)
|
|
|
|
useEffect(() => {
|
|
function readSelection() {
|
|
const sel = window.getSelection()
|
|
const text = sel?.toString().trim()
|
|
if (!text || !containerRef.current) { setSelection(null); return }
|
|
const range = sel!.getRangeAt(0)
|
|
const rect = range.getBoundingClientRect()
|
|
const containerRect = containerRef.current.getBoundingClientRect()
|
|
setSelection({
|
|
text,
|
|
x: rect.left - containerRect.left + rect.width / 2,
|
|
y: rect.top - containerRect.top - 8,
|
|
})
|
|
}
|
|
function onMouseUp() { readSelection() }
|
|
// On mobile, selectionchange fires after the user lifts their finger
|
|
function onSelectionChange() {
|
|
const sel = window.getSelection()
|
|
if (!sel?.toString().trim()) setSelection(null)
|
|
else readSelection()
|
|
}
|
|
function onPointerDown(e: PointerEvent) {
|
|
if (!(e.target as Element).closest('[data-context-action]')) setSelection(null)
|
|
}
|
|
document.addEventListener('mouseup', onMouseUp)
|
|
document.addEventListener('selectionchange', onSelectionChange)
|
|
document.addEventListener('pointerdown', onPointerDown)
|
|
return () => {
|
|
document.removeEventListener('mouseup', onMouseUp)
|
|
document.removeEventListener('selectionchange', onSelectionChange)
|
|
document.removeEventListener('pointerdown', onPointerDown)
|
|
}
|
|
}, [containerRef])
|
|
|
|
return selection
|
|
}
|
|
|
|
// ── Context panel (extraits + question) ────────────────────────────────────
|
|
|
|
function ContextPanel({
|
|
excerpts,
|
|
onRemove,
|
|
onClear,
|
|
onSubmit,
|
|
}: {
|
|
excerpts: string[]
|
|
onRemove: (i: number) => void
|
|
onClear: () => void
|
|
onSubmit: (question: string) => Promise<void>
|
|
}) {
|
|
const [question, setQuestion] = useState('')
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [submitted, setSubmitted] = useState(false)
|
|
const [showExcerpts, setShowExcerpts] = useState(false)
|
|
|
|
async function submit() {
|
|
if (!question.trim() || submitting) return
|
|
setSubmitting(true)
|
|
try {
|
|
await onSubmit(question)
|
|
setSubmitted(true)
|
|
setQuestion('')
|
|
setTimeout(() => setSubmitted(false), 2000)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-16 left-0 right-0 z-40 flex flex-col bg-card border-t shadow-2xl overflow-hidden md:bottom-4 md:left-auto md:right-4 md:w-96 md:rounded-xl md:border">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b bg-primary/5">
|
|
<button
|
|
className="text-sm font-semibold flex items-center gap-2 hover:text-primary transition-colors"
|
|
onClick={() => setShowExcerpts(v => !v)}
|
|
>
|
|
<MessageSquarePlus className="h-4 w-4 text-primary" />
|
|
Contexte ({excerpts.length} extrait{excerpts.length > 1 ? 's' : ''})
|
|
<span className="md:hidden">{showExcerpts ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}</span>
|
|
</button>
|
|
<button onClick={onClear} className="text-xs text-muted-foreground hover:text-destructive transition-colors">
|
|
Tout effacer
|
|
</button>
|
|
</div>
|
|
|
|
{/* Extraits — toujours visible sur desktop, togglable sur mobile */}
|
|
<div className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 min-h-0 max-h-[25vh] ${showExcerpts ? 'block' : 'hidden'} md:block`}>
|
|
{excerpts.map((e, i) => (
|
|
<div key={i} className="flex items-start gap-2 group">
|
|
<div className="flex-1 rounded bg-muted/60 px-2 py-1.5 text-xs text-muted-foreground italic line-clamp-3">
|
|
« {e} »
|
|
</div>
|
|
<button
|
|
onClick={() => onRemove(i)}
|
|
className="mt-1 shrink-0 text-muted-foreground hover:text-destructive md:opacity-0 md:group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Question */}
|
|
<div className="border-t px-4 py-3 space-y-2">
|
|
<textarea
|
|
className="w-full rounded border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring resize-none"
|
|
rows={2}
|
|
placeholder="Votre question…"
|
|
value={question}
|
|
onChange={e => setQuestion(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) submit() }}
|
|
/>
|
|
<Button size="sm" className="w-full" onClick={submit} disabled={!question.trim() || submitting || submitted}>
|
|
{submitting
|
|
? <><Loader2 className="h-3 w-3 animate-spin" /> Envoi…</>
|
|
: submitted
|
|
? 'Envoyé !'
|
|
: <><Send className="h-3 w-3" /> Envoyer (Ctrl+Entrée)</>}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Summary content renderer ────────────────────────────────────────────────
|
|
|
|
function SummaryContent({ content }: { content: string }) {
|
|
return <Markdown content={content} />
|
|
}
|
|
|
|
// ── Dashboard ───────────────────────────────────────────────────────────────
|
|
|
|
export function Dashboard() {
|
|
const { user } = useAuth()
|
|
const [summaries, setSummaries] = useState<Summary[]>([])
|
|
const [assets, setAssets] = useState<Asset[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [generating, setGenerating] = useState(false)
|
|
const [current, setCurrent] = useState<Summary | null>(null)
|
|
const [excerpts, setExcerpts] = useState<string[]>([])
|
|
|
|
const summaryRef = useRef<HTMLDivElement>(null)
|
|
const textSel = useTextSelection(summaryRef as React.RefObject<HTMLElement>)
|
|
|
|
useEffect(() => { load() }, [])
|
|
|
|
// Poll generating status every 5s
|
|
useEffect(() => {
|
|
const interval = setInterval(async () => {
|
|
try {
|
|
const status = await summariesApi.status()
|
|
const wasGenerating = generating
|
|
setGenerating(status.generating)
|
|
if (wasGenerating && !status.generating) load()
|
|
} catch { /* ignore */ }
|
|
}, 5000)
|
|
return () => clearInterval(interval)
|
|
}, [generating])
|
|
|
|
async function load() {
|
|
setLoading(true)
|
|
try {
|
|
const [s, a] = await Promise.all([summariesApi.list(5), assetsApi.list()])
|
|
setSummaries(s ?? [])
|
|
setAssets(a ?? [])
|
|
setCurrent(s?.[0] ?? null)
|
|
} finally { setLoading(false) }
|
|
}
|
|
|
|
async function generate() {
|
|
setGenerating(true)
|
|
try {
|
|
const s = await summariesApi.generate()
|
|
setSummaries(prev => [s, ...prev])
|
|
setCurrent(s)
|
|
} catch (e) {
|
|
alert(e instanceof Error ? e.message : 'Erreur lors de la génération')
|
|
} finally { setGenerating(false) }
|
|
}
|
|
|
|
const addExcerpt = useCallback(() => {
|
|
if (!textSel) return
|
|
setExcerpts(prev => [...prev, textSel.text])
|
|
window.getSelection()?.removeAllRanges()
|
|
}, [textSel])
|
|
|
|
async function submitQuestion(question: string) {
|
|
await reportsApi.create({
|
|
summary_id: current?.id,
|
|
excerpts,
|
|
question,
|
|
})
|
|
setExcerpts([])
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 md:p-6 space-y-6">
|
|
{/* Generating banner */}
|
|
{generating && (
|
|
<div className="flex items-center gap-3 rounded-md bg-primary/10 border border-primary/20 px-4 py-3 text-sm text-primary">
|
|
<Loader2 className="h-4 w-4 animate-spin shrink-0" />
|
|
Génération d'un résumé IA en cours — cela peut prendre plusieurs minutes…
|
|
</div>
|
|
)}
|
|
|
|
{/* Header */}
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Bonjour 👋</h1>
|
|
<p className="text-muted-foreground text-sm">{user?.email}</p>
|
|
</div>
|
|
<Button onClick={generate} disabled={generating || assets.length === 0}>
|
|
{generating ? <><Spinner className="h-4 w-4" /> Génération…</> : <><Sparkles className="h-4 w-4" /> Générer un résumé</>}
|
|
</Button>
|
|
</div>
|
|
|
|
{assets.length === 0 && !loading && (
|
|
<Card className="border-dashed">
|
|
<CardContent className="py-8 text-center">
|
|
<TrendingUp className="h-10 w-10 mx-auto text-muted-foreground mb-3" />
|
|
<p className="font-medium">Votre watchlist est vide</p>
|
|
<p className="text-sm text-muted-foreground mt-1">Ajoutez des symboles dans la section Watchlist pour obtenir des résumés personnalisés</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{assets.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{assets.map(a => (
|
|
<Badge key={a.id} variant="secondary" className="font-mono">{a.symbol}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Résumé actuel */}
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
<div className="lg:col-span-2 space-y-4">
|
|
{loading ? (
|
|
<div className="flex justify-center py-20"><Spinner /></div>
|
|
) : current ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5 text-primary" /> Résumé IA
|
|
</CardTitle>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Clock className="h-3 w-3" />
|
|
{new Date(current.generated_at).toLocaleString('fr-FR')}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div ref={summaryRef} className="relative">
|
|
<SummaryContent content={current.content} />
|
|
{/* Desktop: floating button above selection */}
|
|
{textSel && (
|
|
<button
|
|
data-context-action
|
|
onClick={addExcerpt}
|
|
className="absolute z-10 hidden md:flex items-center gap-1 rounded-full bg-primary text-primary-foreground text-xs px-2 py-1 shadow-lg hover:bg-primary/90 transition-colors"
|
|
style={{ left: textSel.x, top: textSel.y, transform: 'translate(-50%, -100%)' }}
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
Ajouter au contexte
|
|
</button>
|
|
)}
|
|
</div>
|
|
{/* Mobile: fixed bottom bar — avoids conflict with native selection menu */}
|
|
{textSel && (
|
|
<div className="md:hidden fixed bottom-16 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
|
|
<button
|
|
data-context-action
|
|
onClick={addExcerpt}
|
|
className="pointer-events-auto flex items-center gap-2 rounded-full bg-primary text-primary-foreground text-sm px-4 py-2.5 shadow-xl"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Ajouter au contexte
|
|
</button>
|
|
</div>
|
|
)}
|
|
<p className="text-xs text-muted-foreground mt-4 italic">
|
|
Sélectionnez du texte pour l'ajouter au contexte, puis posez une question dans le panneau qui apparaît.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="border-dashed">
|
|
<CardContent className="py-12 text-center text-muted-foreground">
|
|
<Sparkles className="h-8 w-8 mx-auto mb-3 opacity-50" />
|
|
<p>Aucun résumé disponible</p>
|
|
<p className="text-xs mt-1">Cliquez sur "Générer un résumé" pour commencer</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Historique résumés */}
|
|
{summaries.length > 1 && (
|
|
<div className="space-y-3">
|
|
<h2 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">Historique</h2>
|
|
{summaries.slice(1).map(s => (
|
|
<Card
|
|
key={s.id}
|
|
className={`cursor-pointer transition-colors hover:border-primary/50 ${current?.id === s.id ? 'border-primary/50' : ''}`}
|
|
onClick={() => setCurrent(s)}
|
|
>
|
|
<CardContent className="py-3">
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
|
|
<Clock className="h-3 w-3" />
|
|
{new Date(s.generated_at).toLocaleString('fr-FR')}
|
|
</div>
|
|
<p className="text-sm line-clamp-3">{s.content.slice(0, 120)}…</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Panneau contexte flottant */}
|
|
{excerpts.length > 0 && (
|
|
<ContextPanel
|
|
excerpts={excerpts}
|
|
onRemove={i => setExcerpts(prev => prev.filter((_, idx) => idx !== i))}
|
|
onClear={() => setExcerpts([])}
|
|
onSubmit={submitQuestion}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|