2fd435df6f
Some checks failed
Deploy to Production / Build and Deploy (push) Failing after 53s
- Redesign agents page with architectural-grid (8) design system: rounded-2xl cards, serif headings, motion tabs, dashed templates section - Replace agent form popup with full-page detail view (SettingsView style) with dark planning card, section tooltips, and help button - Hide advanced mode for slide/excalidraw generators - Add 'describe images' action to contextual AI assistant - Add copy button to action/resource preview with HTTP fallback - Add delete history button to agent run log panel - Increase AI word limit from 2000 to 5000 (reformulate + transform-markdown) - Increase max steps slider from 25 to 50 - Fix image description error with clear model compatibility message - Fix doubled execution count display in agent detail view - Remove dead files: notes-list-view.tsx, notes-view-toggle.tsx - Remove 'list' view mode from NotesViewMode type - Add missing i18n keys (back, configuration, options, copy, cleared)
279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
import { formatDistanceToNow } from 'date-fns'
|
|
import { fr } from 'date-fns/locale/fr'
|
|
import { enUS } from 'date-fns/locale/en-US'
|
|
import {
|
|
Play,
|
|
Trash2,
|
|
Loader2,
|
|
Globe,
|
|
Search,
|
|
Eye,
|
|
Settings,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Clock,
|
|
Pencil,
|
|
Activity,
|
|
Presentation,
|
|
} from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { getNotebookIcon } from '@/lib/notebook-icon'
|
|
|
|
interface AgentCardProps {
|
|
agent: {
|
|
id: string
|
|
name: string
|
|
description?: string | null
|
|
type?: string | null
|
|
isEnabled: boolean
|
|
frequency: string
|
|
lastRun: string | Date | null
|
|
nextRun?: string | Date | null
|
|
createdAt: string | Date
|
|
updatedAt: string | Date
|
|
_count: { actions: number }
|
|
actions: { id: string; status: string; createdAt: string | Date }[]
|
|
notebook?: { id: string; name: string; icon?: string | null } | null
|
|
}
|
|
onEdit: (id: string) => void
|
|
onRefresh: () => void
|
|
onToggle: (id: string, isEnabled: boolean) => void
|
|
}
|
|
|
|
const typeConfig: Record<string, { icon: typeof Globe }> = {
|
|
scraper: { icon: Globe },
|
|
researcher: { icon: Search },
|
|
monitor: { icon: Eye },
|
|
custom: { icon: Settings },
|
|
'slide-generator': { icon: Presentation },
|
|
'excalidraw-generator': { icon: Pencil },
|
|
}
|
|
|
|
const frequencyKeys: Record<string, string> = {
|
|
manual: 'agents.frequencies.manual',
|
|
hourly: 'agents.frequencies.hourly',
|
|
daily: 'agents.frequencies.daily',
|
|
weekly: 'agents.frequencies.weekly',
|
|
monthly: 'agents.frequencies.monthly',
|
|
}
|
|
|
|
export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps) {
|
|
const { t, language } = useLanguage()
|
|
const [isRunning, setIsRunning] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const [isToggling, setIsToggling] = useState(false)
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => { setMounted(true) }, [])
|
|
|
|
const config = typeConfig[agent.type || 'scraper'] || typeConfig.custom
|
|
const Icon = config.icon
|
|
const lastAction = agent.actions[0]
|
|
const dateLocale = language === 'fr' ? fr : enUS
|
|
|
|
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
|
useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current) }, [])
|
|
|
|
const handleRun = async () => {
|
|
setIsRunning(true)
|
|
const toastId = toast.loading(
|
|
t('agents.toasts.running') || `Agent "${agent.name}" en cours…`,
|
|
{ description: t('agents.toasts.runningDesc') || 'La génération peut prendre quelques minutes.', duration: Infinity }
|
|
)
|
|
try {
|
|
const { runAgent } = await import('@/app/actions/agent-actions')
|
|
const result = await runAgent(agent.id)
|
|
if (!result.success) {
|
|
toast.error(t('agents.toasts.runError', { error: result.error || t('agents.toasts.runFailed') }), { id: toastId })
|
|
setIsRunning(false)
|
|
return
|
|
}
|
|
if (pollRef.current) clearInterval(pollRef.current)
|
|
pollRef.current = setInterval(async () => {
|
|
try {
|
|
const res = await fetch(`/api/agents/run-for-note?agentId=${agent.id}`)
|
|
const data = await res.json()
|
|
if (data.status === 'success') {
|
|
clearInterval(pollRef.current!)
|
|
pollRef.current = null
|
|
setIsRunning(false)
|
|
toast.success(t('agents.toasts.runSuccess', { name: agent.name }), { id: toastId, duration: 6000 })
|
|
onRefresh()
|
|
} else if (data.status === 'failure') {
|
|
clearInterval(pollRef.current!)
|
|
pollRef.current = null
|
|
setIsRunning(false)
|
|
toast.error(t('agents.toasts.runError', { error: data.error || t('agents.toasts.runFailed') }), { id: toastId })
|
|
onRefresh()
|
|
}
|
|
} catch { /* keep polling */ }
|
|
}, 3000)
|
|
} catch {
|
|
toast.error(t('agents.toasts.runGenericError'), { id: toastId })
|
|
setIsRunning(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm(t('agents.actions.deleteConfirm', { name: agent.name }))) return
|
|
setIsDeleting(true)
|
|
try {
|
|
const { deleteAgent } = await import('@/app/actions/agent-actions')
|
|
await deleteAgent(agent.id)
|
|
toast.success(t('agents.toasts.deleted', { name: agent.name }))
|
|
} catch {
|
|
toast.error(t('agents.toasts.deleteError'))
|
|
} finally {
|
|
setIsDeleting(false)
|
|
onRefresh()
|
|
}
|
|
}
|
|
|
|
const handleToggle = async () => {
|
|
const newEnabled = !agent.isEnabled
|
|
setIsToggling(true)
|
|
onToggle(agent.id, newEnabled)
|
|
try {
|
|
const { toggleAgent } = await import('@/app/actions/agent-actions')
|
|
await toggleAgent(agent.id, newEnabled)
|
|
toast.success(newEnabled ? t('agents.actions.toggleOn') : t('agents.actions.toggleOff'))
|
|
} catch {
|
|
onToggle(agent.id, !newEnabled)
|
|
toast.error(t('agents.toasts.toggleError'))
|
|
} finally {
|
|
setIsToggling(false)
|
|
}
|
|
}
|
|
|
|
const nextRunLabel = (() => {
|
|
if (!agent.isEnabled) return '—'
|
|
if (agent.frequency === 'manual') return t('agents.frequencies.manual')
|
|
if (agent.nextRun && new Date(agent.nextRun) > new Date()) {
|
|
if (!mounted) return '...'
|
|
return formatDistanceToNow(new Date(agent.nextRun), { addSuffix: true, locale: dateLocale })
|
|
}
|
|
return t(frequencyKeys[agent.frequency] || 'agents.frequencies.manual')
|
|
})()
|
|
|
|
const statusLabel = lastAction
|
|
? lastAction.status === 'success' ? t('agents.status.success')
|
|
: lastAction.status === 'failure' ? t('agents.status.failure')
|
|
: lastAction.status === 'running' ? t('agents.status.running')
|
|
: t('agents.status.pending')
|
|
: '—'
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
bg-card border border-border rounded-2xl p-6 space-y-6
|
|
hover:border-foreground/20 transition-all group cursor-pointer
|
|
shadow-sm relative overflow-hidden
|
|
${!agent.isEnabled ? 'opacity-50' : ''}
|
|
`}
|
|
onClick={() => onEdit(agent.id)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-muted rounded-xl group-hover:bg-foreground group-hover:text-background transition-all">
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h4 className="text-[13px] font-bold text-foreground">{agent.name}</h4>
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground opacity-60">
|
|
{t(`agents.types.${agent.type || 'custom'}`)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={handleToggle}
|
|
disabled={isToggling}
|
|
className="disabled:opacity-50"
|
|
title={agent.isEnabled ? t('agents.actions.toggleOff') : t('agents.actions.toggleOn')}
|
|
>
|
|
<div className="relative inline-flex items-center cursor-pointer">
|
|
<div className={`w-8 h-4 rounded-full transition-colors ${
|
|
agent.isEnabled ? 'bg-primary' : 'bg-muted-foreground/30'
|
|
}`}>
|
|
<span className={`absolute top-0.5 left-[2px] bg-background border border-muted-foreground/30 rounded-full h-3 w-3 transition-all ${
|
|
agent.isEnabled ? 'translate-x-4' : ''
|
|
}`} />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{agent.description && (
|
|
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-3">
|
|
{agent.description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between text-[10px] text-muted-foreground font-medium">
|
|
<div className="flex items-center gap-4">
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="w-2.5 h-2.5" />
|
|
{t(frequencyKeys[agent.frequency] || 'agents.frequencies.manual')}
|
|
</span>
|
|
<span>{t('agents.metadata.executions', { count: agent._count.actions })}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between text-[10px] text-muted-foreground font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<span className="uppercase tracking-tight">{t('agents.status.nextRun')}</span>
|
|
<span className="text-foreground">{nextRunLabel}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="uppercase tracking-tight">{t('agents.status.lastStatus')}</span>
|
|
{lastAction ? (
|
|
<span className={`flex items-center gap-1 ${
|
|
lastAction.status === 'success' ? 'text-primary'
|
|
: lastAction.status === 'failure' ? 'text-destructive'
|
|
: lastAction.status === 'running' ? 'text-primary'
|
|
: 'text-muted-foreground'
|
|
}`}>
|
|
{lastAction.status === 'success' && <Activity className="w-2 h-2" />}
|
|
{lastAction.status === 'failure' && <XCircle className="w-2 h-2" />}
|
|
{lastAction.status === 'running' && <Loader2 className="w-2 h-2 animate-spin" />}
|
|
{statusLabel}
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">—</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-2 border-t border-border pt-4" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={() => onEdit(agent.id)}
|
|
className="py-2 border border-border rounded-lg hover:bg-muted flex items-center justify-center transition-colors text-muted-foreground hover:text-foreground"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
<span className="ml-2 text-[10px] font-bold uppercase">{t('agents.actions.edit')}</span>
|
|
</button>
|
|
<button
|
|
onClick={handleRun}
|
|
disabled={isRunning || !agent.isEnabled}
|
|
className="py-2 border border-border rounded-lg hover:bg-muted flex items-center justify-center transition-colors text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
|
|
>
|
|
{isRunning ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5 fill-current" />}
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
className="py-2 border border-border rounded-lg hover:bg-destructive/10 hover:text-destructive hover:border-destructive/20 flex items-center justify-center transition-colors text-muted-foreground disabled:opacity-40"
|
|
>
|
|
{isDeleting ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|