389 lines
17 KiB
TypeScript
389 lines
17 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { updateAISettings } from '@/app/actions/ai-settings'
|
|
import { DemoModeToggle } from '@/components/demo-mode-toggle'
|
|
import { toast } from 'sonner'
|
|
import { Loader2, Sparkles, Brain, Languages, Tag, History, Wand2, ImageIcon } from 'lucide-react'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { motion } from 'motion/react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface AISettingsPanelProps {
|
|
initialSettings: {
|
|
titleSuggestions: boolean
|
|
semanticSearch: boolean
|
|
paragraphRefactor: boolean
|
|
memoryEcho: boolean
|
|
memoryEchoFrequency: 'daily' | 'weekly' | 'custom'
|
|
aiProvider: 'auto' | 'openai' | 'ollama'
|
|
preferredLanguage: 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl'
|
|
demoMode: boolean
|
|
languageDetection: boolean
|
|
autoLabeling: boolean
|
|
noteHistory: boolean
|
|
noteHistoryMode: 'manual' | 'auto'
|
|
svgComplexity?: 'simple' | 'illustrated' | 'rich'
|
|
}
|
|
}
|
|
|
|
export function AISettingsPanel({ initialSettings }: AISettingsPanelProps) {
|
|
const [settings, setSettings] = useState(initialSettings)
|
|
const [isPending, setIsPending] = useState(false)
|
|
const { t } = useLanguage()
|
|
|
|
const handleToggle = async (feature: string, value: boolean) => {
|
|
setSettings(prev => ({ ...prev, [feature]: value }))
|
|
try {
|
|
setIsPending(true)
|
|
await updateAISettings({ [feature]: value })
|
|
toast.success(t('aiSettings.saved'))
|
|
} catch {
|
|
toast.error(t('aiSettings.error'))
|
|
setSettings(initialSettings)
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
const handleFrequencyChange = async (value: 'daily' | 'weekly' | 'custom') => {
|
|
setSettings(prev => ({ ...prev, memoryEchoFrequency: value }))
|
|
try {
|
|
setIsPending(true)
|
|
await updateAISettings({ memoryEchoFrequency: value })
|
|
toast.success(t('aiSettings.saved'))
|
|
} catch {
|
|
toast.error(t('aiSettings.error'))
|
|
setSettings(initialSettings)
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
const handleHistoryModeChange = async (value: 'manual' | 'auto') => {
|
|
setSettings(prev => ({ ...prev, noteHistoryMode: value }))
|
|
try {
|
|
setIsPending(true)
|
|
await updateAISettings({ noteHistoryMode: value })
|
|
toast.success(t('settings.settingsSaved'))
|
|
} catch {
|
|
toast.error(t('aiSettings.error'))
|
|
setSettings(initialSettings)
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
const handleSvgComplexityChange = async (value: 'simple' | 'illustrated' | 'rich') => {
|
|
setSettings(prev => ({ ...prev, svgComplexity: value }))
|
|
try {
|
|
setIsPending(true)
|
|
await updateAISettings({ svgComplexity: value })
|
|
toast.success(t('aiSettings.saved'))
|
|
} catch {
|
|
toast.error(t('aiSettings.error'))
|
|
setSettings(initialSettings)
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
const handleDemoModeToggle = async (enabled: boolean) => {
|
|
setSettings(prev => ({ ...prev, demoMode: enabled }))
|
|
try {
|
|
setIsPending(true)
|
|
await updateAISettings({ demoMode: enabled })
|
|
} catch {
|
|
toast.error(t('aiSettings.error'))
|
|
setSettings(initialSettings)
|
|
throw new Error()
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
const features = [
|
|
{
|
|
key: 'titleSuggestions',
|
|
icon: Wand2,
|
|
name: t('aiSettings.titleSuggestions'),
|
|
description: t('aiSettings.titleSuggestionsDesc'),
|
|
value: settings.titleSuggestions,
|
|
},
|
|
{
|
|
key: 'paragraphRefactor',
|
|
icon: Sparkles,
|
|
name: t('aiSettings.aiNote'),
|
|
description: t('aiSettings.aiNoteDesc'),
|
|
value: settings.paragraphRefactor,
|
|
},
|
|
{
|
|
key: 'memoryEcho',
|
|
icon: Brain,
|
|
name: t('memoryEcho.title'),
|
|
description: t('memoryEcho.dailyInsight'),
|
|
value: settings.memoryEcho,
|
|
},
|
|
{
|
|
key: 'languageDetection',
|
|
icon: Languages,
|
|
name: t('aiSettings.languageDetection'),
|
|
description: t('aiSettings.languageDetectionDesc'),
|
|
value: settings.languageDetection ?? true,
|
|
},
|
|
{
|
|
key: 'autoLabeling',
|
|
icon: Tag,
|
|
name: t('aiSettings.autoLabeling'),
|
|
description: t('aiSettings.autoLabelingDesc'),
|
|
value: settings.autoLabeling ?? true,
|
|
},
|
|
{
|
|
key: 'noteHistory',
|
|
icon: History,
|
|
name: t('aiSettings.noteHistory'),
|
|
description: t('aiSettings.noteHistoryDesc'),
|
|
value: settings.noteHistory ?? false,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="space-y-16 pb-20"
|
|
>
|
|
{isPending && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
{t('aiSettings.saving')}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-10">
|
|
<div className="space-y-6">
|
|
<h4 className="text-sm font-bold text-ink border-b border-border/40 pb-4">
|
|
{t('aiSettings.features')}
|
|
</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
{features.map(({ key, icon: Icon, name, description, value }) => (
|
|
<div
|
|
key={key}
|
|
className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-6 flex items-center justify-between group hover:shadow-xl hover:shadow-brand-accent/5 transition-all duration-300"
|
|
>
|
|
<div className="flex items-center gap-5">
|
|
<div className={cn(
|
|
'p-3 bg-paper dark:bg-brand-accent/10 rounded-2xl border border-brand-accent/20 transition-all duration-300',
|
|
'group-hover:bg-brand-accent group-hover:text-white group-hover:scale-110',
|
|
'text-brand-accent'
|
|
)}>
|
|
<Icon size={18} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h4 className="text-[13px] font-bold text-ink">{name}</h4>
|
|
<p className="text-[10px] text-concrete leading-relaxed pr-4 line-clamp-2">{description}</p>
|
|
</div>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only peer"
|
|
checked={value}
|
|
onChange={() => handleToggle(key, !value)}
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-brand-accent" />
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6">
|
|
{settings.memoryEcho && (
|
|
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
|
|
<div className="space-y-1.5 text-left text-brand-accent">
|
|
<h4 className="text-sm font-bold">{t('aiSettings.frequency')}</h4>
|
|
<p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">
|
|
{t('aiSettings.frequencyDesc')}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{(['daily', 'weekly'] as const).map((opt) => (
|
|
<label key={opt} className="flex items-center gap-4 cursor-pointer group">
|
|
<input
|
|
type="radio"
|
|
name="freq"
|
|
className="sr-only peer"
|
|
checked={settings.memoryEchoFrequency === opt}
|
|
onChange={() => handleFrequencyChange(opt)}
|
|
/>
|
|
<div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-brand-accent flex items-center justify-center p-0.5 transition-all">
|
|
<div className={cn(
|
|
'w-full h-full rounded-full transition-all',
|
|
settings.memoryEchoFrequency === opt ? 'bg-brand-accent' : 'bg-transparent'
|
|
)} />
|
|
</div>
|
|
<span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">
|
|
{opt === 'daily' ? t('aiSettings.frequencyDaily') : t('aiSettings.frequencyWeekly')}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{settings.noteHistory && (
|
|
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
|
|
<div className="space-y-1.5 text-left text-brand-accent">
|
|
<h4 className="text-sm font-bold">{t('notes.historyMode')}</h4>
|
|
<p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">
|
|
{t('aiSettings.noteHistoryDesc')}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-6">
|
|
{([
|
|
{ value: 'manual' as const, label: t('notes.historyModeManual'), desc: t('notes.historyModeManualDesc') },
|
|
{ value: 'auto' as const, label: t('notes.historyModeAuto'), desc: t('notes.historyModeAutoDesc') },
|
|
]).map((opt) => (
|
|
<label key={opt.value} className="flex items-center gap-4 cursor-pointer group">
|
|
<input
|
|
type="radio"
|
|
name="hist"
|
|
className="sr-only peer"
|
|
checked={(settings.noteHistoryMode ?? 'manual') === opt.value}
|
|
onChange={() => handleHistoryModeChange(opt.value)}
|
|
/>
|
|
<div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-brand-accent flex items-center justify-center p-0.5 transition-all">
|
|
<div className={cn(
|
|
'w-full h-full rounded-full transition-all',
|
|
(settings.noteHistoryMode ?? 'manual') === opt.value ? 'bg-brand-accent' : 'bg-transparent'
|
|
)} />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<p className="text-sm font-bold text-ink">{opt.label}</p>
|
|
<p className="text-[10px] text-concrete">{opt.desc}</p>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* SVG Complexity selector */}
|
|
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-paper dark:bg-brand-accent/10 rounded-2xl border border-brand-accent/20 text-brand-accent">
|
|
<ImageIcon size={18} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h4 className="text-[13px] font-bold text-ink">{t('aiSettings.svgComplexity')}</h4>
|
|
<p className="text-[10px] text-concrete leading-relaxed">{t('aiSettings.svgComplexityDesc')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
{([
|
|
{
|
|
value: 'simple' as const,
|
|
label: t('aiSettings.svgComplexitySimple'),
|
|
desc: t('aiSettings.svgComplexitySimpleDesc'),
|
|
preview: (
|
|
<svg viewBox="0 0 80 60" className="w-full h-full">
|
|
<rect width="80" height="60" fill="#F5F0E8" rx="4"/>
|
|
<circle cx="40" cy="28" r="14" fill="none" stroke="#C4A882" strokeWidth="2.5"/>
|
|
<line x1="40" y1="14" x2="40" y2="42" stroke="#C4A882" strokeWidth="2"/>
|
|
<line x1="26" y1="28" x2="54" y2="28" stroke="#C4A882" strokeWidth="2"/>
|
|
<circle cx="40" cy="28" r="3" fill="#8B4513"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
value: 'illustrated' as const,
|
|
label: t('aiSettings.svgComplexityIllustrated'),
|
|
desc: t('aiSettings.svgComplexityIllustratedDesc'),
|
|
preview: (
|
|
<svg viewBox="0 0 80 60" className="w-full h-full">
|
|
<defs>
|
|
<linearGradient id="bg-grad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#1a1a2e"/>
|
|
<stop offset="100%" stopColor="#16213e"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx="50%" cy="40%">
|
|
<stop offset="0%" stopColor="#5F9EA0" stopOpacity="0.6"/>
|
|
<stop offset="100%" stopColor="#5F9EA0" stopOpacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="80" height="60" fill="url(#bg-grad)" rx="4"/>
|
|
<ellipse cx="40" cy="24" rx="28" ry="18" fill="url(#glow)"/>
|
|
<rect x="18" y="30" width="44" height="22" fill="#2a2a4a" rx="3"/>
|
|
<rect x="24" y="35" width="8" height="12" fill="#5F9EA0" rx="2" opacity="0.8"/>
|
|
<rect x="36" y="32" width="8" height="15" fill="#C4A882" rx="2" opacity="0.8"/>
|
|
<rect x="48" y="37" width="8" height="10" fill="#C9A9A6" rx="2" opacity="0.8"/>
|
|
<circle cx="40" cy="16" r="8" fill="none" stroke="#5F9EA0" strokeWidth="1.5" opacity="0.7"/>
|
|
<circle cx="40" cy="16" r="3" fill="#5F9EA0" opacity="0.9"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
value: 'rich' as const,
|
|
label: t('aiSettings.svgComplexityRich'),
|
|
desc: t('aiSettings.svgComplexityRichDesc'),
|
|
preview: (
|
|
<svg viewBox="0 0 80 60" className="w-full h-full">
|
|
<rect width="80" height="60" fill="#0F172A" rx="4"/>
|
|
<circle cx="40" cy="30" r="8" fill="#5F9EA0" opacity="0.9"/>
|
|
<circle cx="16" cy="18" r="6" fill="#C4A882" opacity="0.8"/>
|
|
<circle cx="64" cy="18" r="6" fill="#C9A9A6" opacity="0.8"/>
|
|
<circle cx="16" cy="42" r="6" fill="#A8B5A0" opacity="0.8"/>
|
|
<circle cx="64" cy="42" r="6" fill="#8B4513" opacity="0.8"/>
|
|
<line x1="40" y1="30" x2="16" y2="18" stroke="#5F9EA0" strokeWidth="1" opacity="0.5"/>
|
|
<line x1="40" y1="30" x2="64" y2="18" stroke="#C4A882" strokeWidth="1" opacity="0.5"/>
|
|
<line x1="40" y1="30" x2="16" y2="42" stroke="#A8B5A0" strokeWidth="1" opacity="0.5"/>
|
|
<line x1="40" y1="30" x2="64" y2="42" stroke="#C9A9A6" strokeWidth="1" opacity="0.5"/>
|
|
<text x="40" y="33" textAnchor="middle" fontSize="4" fill="white" fontFamily="sans-serif">MAIN</text>
|
|
<text x="16" y="21" textAnchor="middle" fontSize="3.5" fill="white" fontFamily="sans-serif">idea 1</text>
|
|
<text x="64" y="21" textAnchor="middle" fontSize="3.5" fill="white" fontFamily="sans-serif">idea 2</text>
|
|
</svg>
|
|
),
|
|
},
|
|
] as const).map((opt) => {
|
|
const isActive = (settings.svgComplexity ?? 'simple') === opt.value
|
|
return (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => handleSvgComplexityChange(opt.value)}
|
|
className={cn(
|
|
'relative flex flex-col rounded-2xl border-2 overflow-hidden transition-all duration-200 text-left cursor-pointer',
|
|
isActive
|
|
? 'border-brand-accent shadow-md shadow-brand-accent/10'
|
|
: 'border-border hover:border-brand-accent/40 hover:shadow-sm',
|
|
)}
|
|
>
|
|
<div className="aspect-[4/3] w-full bg-muted/30">
|
|
{opt.preview}
|
|
</div>
|
|
<div className={cn(
|
|
'p-3 space-y-0.5 transition-colors',
|
|
isActive ? 'bg-brand-accent/5' : 'bg-transparent',
|
|
)}>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[11px] font-bold text-ink">{opt.label}</span>
|
|
{isActive && (
|
|
<div className="w-2.5 h-2.5 rounded-full bg-brand-accent"/>
|
|
)}
|
|
</div>
|
|
<p className="text-[9px] text-concrete leading-relaxed">{opt.desc}</p>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<DemoModeToggle demoMode={settings.demoMode} onToggle={handleDemoModeToggle} />
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|