5728452b4a
- Add slides.tool.ts with support for title, bullets, chart, stats, table, cards, timeline, quote, comparison, equation, image, summary slide types - Chart types: bar, horizontal-bar, line, donut, radar - Integrate with agent executor and canvas system - Add multilingual support (en/fr) - Various UI improvements and bug fixes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
908 lines
46 KiB
TypeScript
908 lines
46 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react'
|
|
import { motion } from 'motion/react'
|
|
import {
|
|
ArrowLeft,
|
|
Plus,
|
|
Trash2,
|
|
Globe,
|
|
FileSearch,
|
|
FilePlus,
|
|
FileText,
|
|
ExternalLink,
|
|
Brain,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
HelpCircle,
|
|
Mail,
|
|
ImageIcon,
|
|
Presentation,
|
|
Pencil,
|
|
Check,
|
|
Eye,
|
|
Search,
|
|
Settings,
|
|
Clock,
|
|
Activity,
|
|
Sparkles,
|
|
Loader2,
|
|
BookOpen,
|
|
LifeBuoy,
|
|
ListChecks,
|
|
} from 'lucide-react'
|
|
import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
|
|
|
|
type AgentType = 'scraper' | 'researcher' | 'monitor' | 'custom' | 'slide-generator' | 'excalidraw-generator' | 'task-extractor'
|
|
|
|
function FieldHelp({ tooltip }: { tooltip: string }) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button type="button" className="inline-flex items-center ml-1 text-muted-foreground/40 hover:text-muted-foreground transition-colors">
|
|
<HelpCircle className="w-3.5 h-3.5" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" className="max-w-xs text-balance">
|
|
{tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
const typeIcons: Record<string, typeof Globe> = {
|
|
scraper: Globe,
|
|
researcher: Search,
|
|
monitor: Eye,
|
|
custom: Settings,
|
|
'slide-generator': Presentation,
|
|
'excalidraw-generator': Pencil,
|
|
'task-extractor': ListChecks,
|
|
}
|
|
|
|
const TOOL_PRESETS: Record<string, string[]> = {
|
|
scraper: ['web_scrape', 'note_create', 'memory_search'],
|
|
researcher: ['web_search', 'web_scrape', 'note_search', 'note_create', 'memory_search'],
|
|
monitor: ['note_search', 'note_read', 'note_create', 'memory_search'],
|
|
custom: ['memory_search'],
|
|
'slide-generator': ['generate_pptx'],
|
|
'excalidraw-generator': ['generate_excalidraw'],
|
|
'task-extractor': ['note_search', 'note_read', 'task_extract', 'note_create'],
|
|
}
|
|
|
|
const SLIDE_GENERATOR_THEME_VALUES = [
|
|
'modern_wellness',
|
|
'business_authority',
|
|
'nature_outdoors',
|
|
'vintage_academic',
|
|
'soft_creative',
|
|
'bohemian',
|
|
'vibrant_tech',
|
|
'craft_artisan',
|
|
'tech_night',
|
|
'education_charts',
|
|
'forest_eco',
|
|
'elegant_fashion',
|
|
'art_food',
|
|
'luxury_mystery',
|
|
'pure_tech_blue',
|
|
'coastal_coral',
|
|
'vibrant_orange_mint',
|
|
'platinum_white_gold',
|
|
] as const
|
|
|
|
interface AgentDetailViewProps {
|
|
agent?: {
|
|
id: string
|
|
name: string
|
|
description?: string | null
|
|
type?: string | null
|
|
role: string
|
|
sourceUrls?: string | null
|
|
sourceNotebookId?: string | null
|
|
sourceNoteIds?: string | null
|
|
targetNotebookId?: string | null
|
|
frequency: string
|
|
isEnabled: boolean
|
|
tools?: string | null
|
|
maxSteps?: number
|
|
notifyEmail?: boolean
|
|
includeImages?: boolean
|
|
scheduledTime?: string | null
|
|
scheduledDay?: number | null
|
|
timezone?: string | null
|
|
slideTheme?: string | null
|
|
slideStyle?: string | null
|
|
lastRun: string | Date | null
|
|
nextRun?: string | Date | null
|
|
createdAt: string | Date
|
|
_count: { actions: number }
|
|
actions: { id: string; status: string; createdAt: string | Date }[]
|
|
} | null
|
|
notebooks: { id: string; name: string; icon?: string | null; parentId?: string | null }[]
|
|
onSave: (data: FormData) => Promise<void>
|
|
onBack: () => void
|
|
onOpenLogs: (agentId: string, agentName: string) => void
|
|
onOpenHelp: () => void
|
|
isNew?: boolean
|
|
}
|
|
|
|
export function AgentDetailView({
|
|
agent,
|
|
notebooks,
|
|
onSave,
|
|
onBack,
|
|
onOpenLogs,
|
|
onOpenHelp,
|
|
isNew,
|
|
}: AgentDetailViewProps) {
|
|
const { t } = useLanguage()
|
|
const [name, setName] = useState(agent?.name || '')
|
|
const [description, setDescription] = useState(agent?.description || '')
|
|
const [type, setType] = useState<AgentType>((agent?.type as AgentType) || 'scraper')
|
|
const [role, setRole] = useState(agent?.role || '')
|
|
const [urls, setUrls] = useState<string[]>(() => {
|
|
if (agent?.sourceUrls) {
|
|
try { return JSON.parse(agent.sourceUrls) } catch { return [''] }
|
|
}
|
|
return ['']
|
|
})
|
|
const [sourceNotebookId, setSourceNotebookId] = useState(agent?.sourceNotebookId || '')
|
|
const [sourceNoteIds, setSourceNoteIds] = useState<string[]>(() => {
|
|
if (agent?.sourceNoteIds) {
|
|
try { return JSON.parse(agent.sourceNoteIds) } catch { return [] }
|
|
}
|
|
return []
|
|
})
|
|
const [noteOptions, setNoteOptions] = useState<{ id: string; title: string }[]>([])
|
|
const [targetNotebookId, setTargetNotebookId] = useState(agent?.targetNotebookId || '')
|
|
const [frequency, setFrequency] = useState(agent?.frequency || 'manual')
|
|
const [scheduledTime, setScheduledTime] = useState(agent?.scheduledTime || '08:00')
|
|
const [scheduledDay, setScheduledDay] = useState<number>(agent?.scheduledDay ?? 1)
|
|
const [timezone] = useState(() => {
|
|
try { return Intl.DateTimeFormat().resolvedOptions().timeZone } catch { return 'UTC' }
|
|
})
|
|
const [selectedTools, setSelectedTools] = useState<string[]>(() => {
|
|
if (agent?.tools) {
|
|
try {
|
|
const parsed = JSON.parse(agent.tools)
|
|
if (parsed.length > 0) return parsed
|
|
} catch { /* fall through */ }
|
|
}
|
|
return TOOL_PRESETS[(agent?.type as AgentType) || 'scraper'] || []
|
|
})
|
|
const [maxSteps, setMaxSteps] = useState(agent?.maxSteps || 10)
|
|
const [notifyEmail, setNotifyEmail] = useState(agent?.notifyEmail || false)
|
|
const [includeImages, setIncludeImages] = useState(agent?.includeImages || false)
|
|
const [slideTheme, setSlideTheme] = useState(agent?.slideTheme || '')
|
|
const [slideStyle, setSlideStyle] = useState<'soft' | 'sharp' | 'rounded' | 'pill'>(
|
|
(agent?.slideStyle as 'soft' | 'sharp' | 'rounded' | 'pill') || 'soft'
|
|
)
|
|
const [excalidrawStyle, setExcalidrawStyle] = useState<'default' | 'austere' | 'sketch-plus'>(() => {
|
|
if (agent?.slideStyle === 'austere') return 'austere'
|
|
if (agent?.slideStyle === 'sketch-plus') return 'sketch-plus'
|
|
return 'default'
|
|
})
|
|
const [excalidrawType, setExcalidrawType] = useState<'auto' | 'architecture-cloud' | 'flowchart' | 'mindmap' | 'org-chart' | 'timeline' | 'process-map'>(() => {
|
|
const value = (agent?.slideTheme || '').trim()
|
|
if (value === 'auto' || value === 'architecture-cloud' || value === 'mindmap' || value === 'org-chart' || value === 'timeline' || value === 'process-map') return value
|
|
return 'flowchart'
|
|
})
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [showAdvanced, setShowAdvanced] = useState(() => {
|
|
if (agent?.tools) {
|
|
try { const tools = JSON.parse(agent.tools); if (tools.length > 0) return true } catch { /* */ }
|
|
}
|
|
if (agent?.role && agent.role.trim().length > 0) return true
|
|
return false
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!sourceNotebookId || (type !== 'slide-generator' && type !== 'excalidraw-generator' && type !== 'monitor')) {
|
|
setNoteOptions([])
|
|
return
|
|
}
|
|
fetch(`/api/notes?notebookId=${sourceNotebookId}&limit=50`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const notes = Array.isArray(data.data) ? data.data : Array.isArray(data) ? data : []
|
|
setNoteOptions(notes.map((n: any) => ({ id: n.id, title: n.title || 'Sans titre' })))
|
|
})
|
|
.catch(() => setNoteOptions([]))
|
|
}, [sourceNotebookId, type])
|
|
|
|
const availableTools = useMemo(() => [
|
|
{ id: 'web_search', icon: Globe, labelKey: 'agents.tools.webSearch' },
|
|
{ id: 'web_scrape', icon: ExternalLink, labelKey: 'agents.tools.webScrape' },
|
|
{ id: 'note_search', icon: FileSearch, labelKey: 'agents.tools.noteSearch' },
|
|
{ id: 'note_read', icon: FileText, labelKey: 'agents.tools.noteRead' },
|
|
{ id: 'note_create', icon: FilePlus, labelKey: 'agents.tools.noteCreate' },
|
|
{ id: 'url_fetch', icon: ExternalLink, labelKey: 'agents.tools.urlFetch' },
|
|
{ id: 'memory_search', icon: Brain, labelKey: 'agents.tools.memorySearch' },
|
|
{ id: 'generate_pptx', icon: Presentation, labelKey: 'agents.tools.generatePptx' },
|
|
{ id: 'generate_slides', icon: Presentation, labelKey: 'agents.tools.generateSlides' },
|
|
{ id: 'generate_excalidraw', icon: Pencil, labelKey: 'agents.tools.generateExcalidraw' },
|
|
], [])
|
|
|
|
const prevTypeRef = useRef(type)
|
|
if (prevTypeRef.current !== type) {
|
|
prevTypeRef.current = type
|
|
setSelectedTools(TOOL_PRESETS[type] || [])
|
|
setRole('')
|
|
}
|
|
|
|
const addUrl = () => setUrls([...urls, ''])
|
|
const removeUrl = (index: number) => setUrls(urls.filter((_, i) => i !== index))
|
|
const updateUrl = (index: number, value: string) => {
|
|
const newUrls = [...urls]
|
|
newUrls[index] = value
|
|
setUrls(newUrls)
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!name.trim()) {
|
|
toast.error(t('agents.form.nameRequired'))
|
|
return
|
|
}
|
|
setIsSaving(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.set('name', name.trim())
|
|
formData.set('description', description.trim())
|
|
formData.set('type', type)
|
|
formData.set('role', role || t(`agents.defaultRoles.${type}`))
|
|
formData.set('frequency', frequency)
|
|
formData.set('targetNotebookId', targetNotebookId)
|
|
if (type === 'monitor' || type === 'slide-generator' || type === 'excalidraw-generator') {
|
|
formData.set('sourceNotebookId', sourceNotebookId)
|
|
}
|
|
if (sourceNoteIds.length > 0) {
|
|
formData.set('sourceNoteIds', JSON.stringify(sourceNoteIds))
|
|
}
|
|
const validUrls = urls.filter(u => u.trim())
|
|
if (validUrls.length > 0) {
|
|
formData.set('sourceUrls', JSON.stringify(validUrls))
|
|
}
|
|
formData.set('tools', JSON.stringify(selectedTools))
|
|
formData.set('maxSteps', String(maxSteps))
|
|
formData.set('notifyEmail', String(notifyEmail))
|
|
formData.set('includeImages', String(includeImages))
|
|
formData.set('scheduledTime', scheduledTime)
|
|
formData.set('scheduledDay', String(scheduledDay))
|
|
formData.set('timezone', timezone)
|
|
if (type === 'slide-generator') {
|
|
if (slideTheme) formData.set('slideTheme', slideTheme)
|
|
formData.set('slideStyle', slideStyle)
|
|
}
|
|
if (type === 'excalidraw-generator') {
|
|
formData.set('slideTheme', excalidrawType)
|
|
formData.set('slideStyle', excalidrawStyle)
|
|
}
|
|
await onSave(formData)
|
|
} catch {
|
|
toast.error(t('agents.toasts.saveError'))
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
const showSourceNotebook = type === 'monitor' || type === 'slide-generator' || type === 'excalidraw-generator'
|
|
const Icon = typeIcons[type] || Settings
|
|
|
|
const frequencyLabel = t(`agents.frequencies.${frequency}`) || frequency
|
|
const successRate = agent?.actions?.length
|
|
? Math.round((agent.actions.filter(a => a.status === 'success').length / agent.actions.length) * 100 * 10) / 10
|
|
: null
|
|
|
|
const sectionTitleCls = 'text-xs font-bold uppercase tracking-[0.3em] text-muted-foreground'
|
|
const cardCls = 'bg-card border border-border rounded-3xl overflow-hidden shadow-sm'
|
|
const labelCls = 'block text-[11px] uppercase tracking-widest font-bold text-muted-foreground'
|
|
const inputCls = 'w-full bg-muted/50 border border-border rounded-xl px-4 py-3 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all text-foreground'
|
|
const selectCls = 'w-full bg-muted/50 border border-border rounded-xl px-4 py-3 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all cursor-pointer font-medium text-foreground appearance-none'
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="min-h-full flex flex-col"
|
|
>
|
|
<header className="px-4 sm:px-8 md:px-12 py-5 sm:py-8 md:py-10 border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30">
|
|
<div className="flex items-center justify-between max-w-5xl mx-auto">
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
{t('agents.form.back')}
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onOpenHelp}
|
|
className="p-2 text-muted-foreground hover:text-foreground transition-colors"
|
|
title={t('agents.help.title')}
|
|
>
|
|
<LifeBuoy className="w-4 h-4" />
|
|
</button>
|
|
{!isNew && agent && (
|
|
<button
|
|
onClick={() => onOpenLogs(agent.id, agent.name)}
|
|
className="px-5 py-2 text-xs font-bold uppercase tracking-widest border border-border rounded-xl hover:bg-muted transition-all"
|
|
>
|
|
{t('agents.runLog.title')}
|
|
</button>
|
|
)}
|
|
<button
|
|
form="agent-config-form"
|
|
type="submit"
|
|
disabled={isSaving}
|
|
className="px-6 py-2 bg-foreground text-background text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all shadow-lg shadow-foreground/10 disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{isSaving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
|
|
{isNew ? t('agents.form.create') : t('agents.form.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 px-4 sm:px-8 md:px-12 py-8 sm:py-12 md:py-16 max-w-5xl mx-auto w-full space-y-8 sm:space-y-12 md:space-y-16">
|
|
<section className="space-y-8">
|
|
<div className="flex items-end justify-between">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-4 bg-brand-accent text-white rounded-2xl shadow-xl shadow-brand-accent/10">
|
|
<Icon className="w-8 h-8" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
className="text-3xl font-memento-serif font-medium text-foreground bg-transparent border-none outline-none placeholder:text-muted-foreground/40 w-full"
|
|
placeholder={t('agents.form.namePlaceholder')}
|
|
/>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-muted text-muted-foreground rounded-md">
|
|
{isNew ? t('agents.newBadge') : `ID: ${agent?.id?.slice(0, 8)}`}
|
|
</span>
|
|
{!isNew && agent?.isEnabled && (
|
|
<span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-brand-accent/10 text-brand-accent rounded-md">
|
|
{t('agents.actions.toggleOn')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!isNew && agent && (
|
|
<div className="flex items-center gap-8 text-[12px] uppercase tracking-[0.2em] font-bold text-muted-foreground">
|
|
<div className="flex flex-col items-end gap-1">
|
|
<span className="opacity-40">{t('agents.status.nextRun')}</span>
|
|
<span className="text-foreground">{t('agents.metadata.executions', { count: agent._count.actions })}</span>
|
|
</div>
|
|
{successRate !== null && (
|
|
<div className="flex flex-col items-end gap-1">
|
|
<span className="opacity-40">Succès</span>
|
|
<span className="text-brand-accent">{successRate}%</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<form id="agent-config-form" onSubmit={handleSubmit}>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div className="lg:col-span-2 space-y-12">
|
|
|
|
<section className="space-y-6">
|
|
<h3 className={sectionTitleCls}>{t('agents.form.agentType')}<FieldHelp tooltip={t('agents.help.tooltips.agentType')} /></h3>
|
|
<div className={cardCls}>
|
|
<div className="p-8 space-y-8">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[
|
|
{ value: 'researcher' as AgentType, labelKey: 'agents.types.researcher', descKey: 'agents.typeDescriptions.researcher', icon: Search },
|
|
{ value: 'scraper' as AgentType, labelKey: 'agents.types.scraper', descKey: 'agents.typeDescriptions.scraper', icon: Globe },
|
|
{ value: 'monitor' as AgentType, labelKey: 'agents.types.monitor', descKey: 'agents.typeDescriptions.monitor', icon: Eye },
|
|
{ value: 'custom' as AgentType, labelKey: 'agents.types.custom', descKey: 'agents.typeDescriptions.custom', icon: Settings },
|
|
{ value: 'slide-generator' as AgentType, labelKey: 'agents.types.slideGenerator', descKey: 'agents.typeDescriptions.slideGenerator', icon: Presentation },
|
|
{ value: 'excalidraw-generator' as AgentType, labelKey: 'agents.types.excalidrawGenerator', descKey: 'agents.typeDescriptions.excalidrawGenerator', icon: Pencil },
|
|
{ value: 'task-extractor' as AgentType, labelKey: 'agents.types.taskExtractor', descKey: 'agents.typeDescriptions.taskExtractor', icon: ListChecks },
|
|
].map(at => {
|
|
const TypeIcon = at.icon
|
|
return (
|
|
<button
|
|
key={at.value}
|
|
type="button"
|
|
onClick={() => setType(at.value)}
|
|
className={`p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer ${
|
|
type === at.value
|
|
? 'border-2 border-foreground bg-muted'
|
|
: 'border border-border hover:border-foreground/20'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<TypeIcon className={`w-4 h-4 ${type === at.value ? 'text-foreground' : 'text-muted-foreground'}`} />
|
|
<div className="text-left">
|
|
<div className="text-sm font-medium text-foreground">{t(at.labelKey)}</div>
|
|
<div className="text-[10px] text-muted-foreground mt-0.5">{t(at.descKey)}</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${
|
|
type === at.value
|
|
? 'border-4 border-foreground'
|
|
: 'border border-border'
|
|
}`}>
|
|
{type === at.value && <div className="w-2 h-2 bg-foreground rounded-full" />}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6">
|
|
<h3 className={sectionTitleCls}>{t('agents.form.configuration')}<FieldHelp tooltip={t('agents.help.tooltips.instructions')} /></h3>
|
|
<div className={cardCls}>
|
|
<div className="p-8 space-y-8">
|
|
|
|
{type === 'researcher' ? (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.researchTopic')}<FieldHelp tooltip={t('agents.help.tooltips.researchTopic')} /></label>
|
|
<input
|
|
type="text"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
className={inputCls}
|
|
placeholder={t('agents.form.researchTopicPlaceholder')}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.description')}<FieldHelp tooltip={t('agents.help.tooltips.description')} /></label>
|
|
<input
|
|
type="text"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
className={inputCls}
|
|
placeholder={t('agents.form.descriptionPlaceholder')}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{(type === 'scraper' || type === 'custom') && (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.urlsLabel')}<FieldHelp tooltip={t('agents.help.tooltips.urls')} /></label>
|
|
<div className="space-y-2">
|
|
{urls.map((url, i) => (
|
|
<div key={i} className="flex gap-2">
|
|
<input
|
|
type="url"
|
|
value={url}
|
|
onChange={e => updateUrl(i, e.target.value)}
|
|
className={inputCls}
|
|
placeholder="https://example.com"
|
|
/>
|
|
{urls.length > 1 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => removeUrl(i)}
|
|
className="p-2 text-destructive/80 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={addUrl}
|
|
className="flex items-center gap-1.5 text-xs text-foreground hover:opacity-60 font-medium"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
{t('agents.form.addUrl')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showSourceNotebook && (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
|
|
<HierarchicalNotebookSelector
|
|
notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
|
|
selectedId={sourceNotebookId || null}
|
|
onSelect={(id) => { setSourceNotebookId(id); setSourceNoteIds([]) }}
|
|
placeholder={t('agents.form.selectNotebook') || 'Select notebook...'}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{(type === 'slide-generator' || type === 'excalidraw-generator') && sourceNotebookId && noteOptions.length > 0 && (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.selectNotes')}<FieldHelp tooltip={t('agents.help.tooltips.selectNotes')} /></label>
|
|
<div className="border border-border rounded-xl max-h-48 overflow-y-auto bg-muted/30">
|
|
{noteOptions.map(note => {
|
|
const isSelected = sourceNoteIds.includes(note.id)
|
|
return (
|
|
<button
|
|
key={note.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setSourceNoteIds(prev =>
|
|
isSelected ? prev.filter(id => id !== note.id) : [...prev, note.id]
|
|
)
|
|
}}
|
|
className={`w-full flex items-center gap-2 px-4 py-2.5 text-sm text-left hover:bg-muted/50 transition-colors ${isSelected ? 'bg-foreground/5' : ''}`}
|
|
>
|
|
<div className={`w-4 h-4 rounded border-2 flex items-center justify-center flex-shrink-0 ${isSelected ? 'border-foreground bg-foreground' : 'border-border'}`}>
|
|
{isSelected && <Check className="w-3 h-3 text-background" />}
|
|
</div>
|
|
<span className={isSelected ? 'text-foreground font-medium' : 'text-foreground'}>{note.title}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{sourceNoteIds.length > 0 && (
|
|
<p className="text-xs text-muted-foreground">{t('agents.form.notesSelected', { count: sourceNoteIds.length })}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{type === 'slide-generator' && (
|
|
<>
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.slideTheme')}<FieldHelp tooltip={t('agents.help.tooltips.slideTheme')} /></label>
|
|
<select value={slideTheme} onChange={e => setSlideTheme(e.target.value)} className={selectCls}>
|
|
<option value="">{t('agents.form.slideThemeDefault')}</option>
|
|
{SLIDE_GENERATOR_THEME_VALUES.map(themeId => (
|
|
<option key={themeId} value={themeId}>{t(`agents.form.slideThemes.${themeId}`)}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.slideStyle')}<FieldHelp tooltip={t('agents.help.tooltips.slideStyle')} /></label>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{(['soft', 'sharp', 'rounded', 'pill'] as const).map(s => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
onClick={() => setSlideStyle(s)}
|
|
className={`p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer ${
|
|
slideStyle === s
|
|
? 'border-2 border-foreground bg-muted'
|
|
: 'border border-border hover:border-foreground/20'
|
|
}`}
|
|
>
|
|
<span className={`text-sm font-medium ${slideStyle === s ? 'text-foreground' : 'text-muted-foreground'}`}>
|
|
{t(`agents.form.slideStyle${s.charAt(0).toUpperCase() + s.slice(1)}` as any)}
|
|
</span>
|
|
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${slideStyle === s ? 'border-4 border-foreground' : 'border border-border'}`}>
|
|
{slideStyle === s && <div className="w-2 h-2 bg-foreground rounded-full" />}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{type === 'excalidraw-generator' && (
|
|
<>
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.excalidrawDiagramType')}</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{([
|
|
{ id: 'auto', labelKey: 'agents.form.excalidrawDiagramTypeAuto' },
|
|
{ id: 'flowchart', labelKey: 'agents.form.excalidrawDiagramTypeFlowchart' },
|
|
{ id: 'mindmap', labelKey: 'agents.form.excalidrawDiagramTypeMindmap' },
|
|
{ id: 'org-chart', labelKey: 'agents.form.excalidrawDiagramTypeOrgChart' },
|
|
{ id: 'timeline', labelKey: 'agents.form.excalidrawDiagramTypeTimeline' },
|
|
{ id: 'process-map', labelKey: 'agents.form.excalidrawDiagramTypeProcessMap' },
|
|
{ id: 'architecture-cloud', labelKey: 'agents.form.excalidrawDiagramTypeArchitectureCloud' },
|
|
] as const).map(opt => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
onClick={() => setExcalidrawType(opt.id)}
|
|
className={`p-3 rounded-xl text-sm text-left transition-all ${
|
|
excalidrawType === opt.id
|
|
? 'border-2 border-foreground bg-muted text-foreground font-medium'
|
|
: 'border border-border text-muted-foreground hover:border-foreground/20'
|
|
}`}
|
|
>
|
|
{t(opt.labelKey)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.excalidrawDiagramStyle')}</label>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{([
|
|
{ id: 'default', labelKey: 'agents.form.excalidrawDiagramStyleDefault' },
|
|
{ id: 'sketch-plus', labelKey: 'agents.form.excalidrawDiagramStyleSketchPlus' },
|
|
{ id: 'austere', labelKey: 'agents.form.excalidrawDiagramStyleAustere' },
|
|
] as const).map(opt => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
onClick={() => setExcalidrawStyle(opt.id)}
|
|
className={`p-3 rounded-xl text-sm text-left transition-all ${
|
|
excalidrawStyle === opt.id
|
|
? 'border-2 border-foreground bg-muted text-foreground font-medium'
|
|
: 'border border-border text-muted-foreground hover:border-foreground/20'
|
|
}`}
|
|
>
|
|
{t(opt.labelKey)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{type !== 'slide-generator' && type !== 'excalidraw-generator' && (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
|
|
<HierarchicalNotebookSelector
|
|
notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
|
|
selectedId={targetNotebookId || null}
|
|
onSelect={(id) => setTargetNotebookId(id)}
|
|
placeholder={t('agents.form.inbox') || 'Inbox'}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.form.instructions')}<FieldHelp tooltip={t('agents.help.tooltips.instructions')} /></label>
|
|
<textarea
|
|
value={role}
|
|
onChange={e => setRole(e.target.value)}
|
|
rows={6}
|
|
className="w-full bg-muted/50 border border-border rounded-2xl p-6 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all font-light leading-relaxed resize-none text-foreground"
|
|
placeholder={t('agents.form.instructionsPlaceholder')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{type !== 'slide-generator' && type !== 'excalidraw-generator' && (
|
|
<section className="space-y-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAdvanced(!showAdvanced)}
|
|
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground font-bold uppercase tracking-widest w-full pt-2"
|
|
>
|
|
{showAdvanced ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
|
{t('agents.form.advancedMode')}
|
|
</button>
|
|
|
|
{showAdvanced && (
|
|
<div className={cardCls}>
|
|
<div className="p-8 space-y-8">
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>{t('agents.tools.title')}<FieldHelp tooltip={t('agents.help.tooltips.tools')} /></label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{availableTools.map(at => {
|
|
const ToolIcon = at.icon
|
|
const isSelected = selectedTools.includes(at.id)
|
|
return (
|
|
<button
|
|
key={at.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedTools(prev =>
|
|
isSelected ? prev.filter(t => t !== at.id) : [...prev, at.id]
|
|
)
|
|
}}
|
|
className={`flex items-center gap-2.5 px-4 py-3 rounded-xl text-sm transition-all text-left ${
|
|
isSelected
|
|
? 'border-2 border-foreground bg-muted text-foreground font-medium'
|
|
: 'border border-border text-muted-foreground hover:border-foreground/20'
|
|
}`}
|
|
>
|
|
<ToolIcon className="w-4 h-4 flex-shrink-0" />
|
|
<span>{t(at.labelKey)}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{selectedTools.length > 0 && (
|
|
<p className="text-xs text-muted-foreground mt-1.5">
|
|
{t('agents.tools.selected', { count: selectedTools.length })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{selectedTools.length > 0 && (
|
|
<div className="space-y-4">
|
|
<label className={labelCls}>
|
|
{t('agents.tools.maxSteps')}<FieldHelp tooltip={t('agents.help.tooltips.maxSteps')} />
|
|
<span className="text-muted-foreground font-normal ml-1">({maxSteps})</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min={3}
|
|
max={50}
|
|
value={maxSteps}
|
|
onChange={e => setMaxSteps(Number(e.target.value))}
|
|
className="w-full accent-foreground"
|
|
/>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>3</span>
|
|
<span>50</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-10">
|
|
<section className="space-y-6">
|
|
<h3 className={sectionTitleCls}>{t('agents.form.frequency')}<FieldHelp tooltip={t('agents.help.tooltips.frequency')} /></h3>
|
|
<div className="bg-ink rounded-3xl p-8 space-y-8 text-paper shadow-2xl shadow-ink/20 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-10">
|
|
<Clock className="w-24 h-24" />
|
|
</div>
|
|
<div className="relative space-y-6">
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.form.frequency')}</span>
|
|
<select
|
|
value={frequency}
|
|
onChange={e => setFrequency(e.target.value)}
|
|
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-lg font-memento-serif italic text-background outline-none cursor-pointer appearance-none"
|
|
>
|
|
<option value="manual" className="text-foreground">{t('agents.frequencies.manual')}</option>
|
|
<option value="hourly" className="text-foreground">{t('agents.frequencies.hourly')}</option>
|
|
<option value="daily" className="text-foreground">{t('agents.frequencies.daily')}</option>
|
|
<option value="weekly" className="text-foreground">{t('agents.frequencies.weekly')}</option>
|
|
<option value="monthly" className="text-foreground">{t('agents.frequencies.monthly')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
{frequency !== 'manual' && frequency !== 'hourly' && (
|
|
<>
|
|
<div className="h-px bg-white/10" />
|
|
<div className="space-y-4">
|
|
{frequency === 'weekly' && (
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.dayOfWeek')}</span>
|
|
<select
|
|
value={scheduledDay}
|
|
onChange={e => setScheduledDay(Number(e.target.value))}
|
|
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none cursor-pointer appearance-none"
|
|
>
|
|
{[
|
|
{ value: 0, label: t('agents.schedule.days.mon') },
|
|
{ value: 1, label: t('agents.schedule.days.tue') },
|
|
{ value: 2, label: t('agents.schedule.days.wed') },
|
|
{ value: 3, label: t('agents.schedule.days.thu') },
|
|
{ value: 4, label: t('agents.schedule.days.fri') },
|
|
{ value: 5, label: t('agents.schedule.days.sat') },
|
|
{ value: 6, label: t('agents.schedule.days.sun') },
|
|
].map(d => (
|
|
<option key={d.value} value={d.value} className="text-foreground">{d.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
{frequency === 'monthly' && (
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.dayOfMonth')}</span>
|
|
<select
|
|
value={scheduledDay}
|
|
onChange={e => setScheduledDay(Number(e.target.value))}
|
|
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none cursor-pointer appearance-none"
|
|
>
|
|
{Array.from({ length: 31 }, (_, i) => i + 1).map(d => (
|
|
<option key={d} value={d} className="text-foreground">{d}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.time')}</span>
|
|
<input
|
|
type="time"
|
|
value={scheduledTime}
|
|
onChange={e => setScheduledTime(e.target.value)}
|
|
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6">
|
|
<h3 className={sectionTitleCls}>{t('agents.form.options')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></h3>
|
|
<div className="space-y-3">
|
|
{type !== 'slide-generator' && type !== 'excalidraw-generator' && (
|
|
<div
|
|
onClick={() => setNotifyEmail(!notifyEmail)}
|
|
className={`flex items-center justify-between p-4 rounded-2xl border cursor-pointer transition-all ${
|
|
notifyEmail ? 'bg-muted border-foreground/20' : 'bg-card border-border/50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Mail className={`w-4 h-4 ${notifyEmail ? 'text-foreground' : 'text-muted-foreground'}`} />
|
|
<div>
|
|
<p className="text-xs font-bold text-foreground">{t('agents.form.notifyEmail')}</p>
|
|
<p className="text-[10px] text-muted-foreground">{t('agents.form.notifyEmailHint')}</p>
|
|
</div>
|
|
</div>
|
|
<div className={`relative inline-flex items-center`}>
|
|
<div className={`w-8 h-4 rounded-full transition-colors ${notifyEmail ? 'bg-foreground' : 'bg-muted-foreground/30'}`}>
|
|
<span className={`absolute top-0.5 left-[2px] bg-background border border-border rounded-full h-3 w-3 transition-all ${notifyEmail ? 'translate-x-4' : ''}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{type !== 'slide-generator' && type !== 'excalidraw-generator' && (
|
|
<div
|
|
onClick={() => setIncludeImages(!includeImages)}
|
|
className={`flex items-center justify-between p-4 rounded-2xl border cursor-pointer transition-all ${
|
|
includeImages ? 'bg-muted border-foreground/20' : 'bg-card border-border/50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<ImageIcon className={`w-4 h-4 ${includeImages ? 'text-foreground' : 'text-muted-foreground'}`} />
|
|
<div>
|
|
<p className="text-xs font-bold text-foreground">{t('agents.form.includeImages')}</p>
|
|
<p className="text-[10px] text-muted-foreground">{t('agents.form.includeImagesHint')}</p>
|
|
</div>
|
|
</div>
|
|
<div className={`relative inline-flex items-center`}>
|
|
<div className={`w-8 h-4 rounded-full transition-colors ${includeImages ? 'bg-foreground' : 'bg-muted-foreground/30'}`}>
|
|
<span className={`absolute top-0.5 left-[2px] bg-background border border-border rounded-full h-3 w-3 transition-all ${includeImages ? 'translate-x-4' : ''}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{!isNew && (
|
|
<section className="pt-6">
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
if (!agent || !confirm(t('agents.actions.deleteConfirm', { name: agent.name }))) return
|
|
try {
|
|
const { deleteAgent } = await import('@/app/actions/agent-actions')
|
|
await deleteAgent(agent.id)
|
|
toast.success(t('agents.toasts.deleted', { name: agent.name }))
|
|
onBack()
|
|
} catch {
|
|
toast.error(t('agents.toasts.deleteError'))
|
|
}
|
|
}}
|
|
className="w-full py-4 border border-destructive/30 text-destructive bg-destructive/5 rounded-2xl text-xs font-bold uppercase tracking-widest hover:bg-destructive/10 transition-colors flex items-center justify-center gap-3"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
{t('agents.actions.delete')}
|
|
</button>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|