216 lines
8.0 KiB
TypeScript
216 lines
8.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
|
import { Label } from '@/components/ui/label'
|
|
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 } from 'lucide-react'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
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'
|
|
}
|
|
}
|
|
|
|
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 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('titleSuggestions.available').replace('💡 ', ''),
|
|
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 (
|
|
<div className="space-y-8">
|
|
{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>
|
|
)}
|
|
|
|
{/* Feature toggles as cards */}
|
|
<div>
|
|
<h2 className="text-base font-semibold text-foreground mb-4">{t('aiSettings.features')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{features.map(({ key, icon: Icon, name, description, value }) => (
|
|
<div
|
|
key={key}
|
|
className="bg-card rounded-lg border border-border p-5 shadow-sm flex items-start justify-between gap-4"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0 mt-0.5">
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">{name}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{description}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={value}
|
|
onClick={() => handleToggle(key, !value)}
|
|
className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/30 mt-0.5 ${value ? 'bg-primary' : 'bg-muted-foreground/30'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${value ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Memory Echo frequency — shown when enabled */}
|
|
{settings.memoryEcho && (
|
|
<div className="bg-card rounded-lg border border-border p-5 shadow-sm">
|
|
<h3 className="text-sm font-semibold text-foreground mb-1">{t('aiSettings.frequency')}</h3>
|
|
<p className="text-xs text-muted-foreground mb-4">{t('aiSettings.frequencyDesc')}</p>
|
|
<RadioGroup value={settings.memoryEchoFrequency} onValueChange={handleFrequencyChange} className="space-y-2">
|
|
{[
|
|
{ value: 'daily', label: t('aiSettings.frequencyDaily') },
|
|
{ value: 'weekly', label: t('aiSettings.frequencyWeekly') },
|
|
].map((opt) => (
|
|
<div key={opt.value} className="flex items-center space-x-2">
|
|
<RadioGroupItem value={opt.value} id={`freq-${opt.value}`} />
|
|
<Label htmlFor={`freq-${opt.value}`} className="font-normal text-sm cursor-pointer">{opt.label}</Label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
)}
|
|
|
|
{/* Note History mode — shown when enabled */}
|
|
{settings.noteHistory && (
|
|
<div className="bg-card rounded-lg border border-border p-5 shadow-sm">
|
|
<h3 className="text-sm font-semibold text-foreground mb-1">{t('notes.historyMode')}</h3>
|
|
<RadioGroup
|
|
value={settings.noteHistoryMode ?? 'manual'}
|
|
onValueChange={(value) => {
|
|
const mode = value as 'manual' | 'auto'
|
|
setSettings(s => ({ ...s, noteHistoryMode: mode }))
|
|
updateAISettings({ noteHistoryMode: mode }).then(() => toast.success(t('settings.settingsSaved')))
|
|
}}
|
|
className="space-y-3 mt-3"
|
|
>
|
|
{[
|
|
{ value: 'manual', label: t('notes.historyModeManual'), desc: t('notes.historyModeManualDesc') },
|
|
{ value: 'auto', label: t('notes.historyModeAuto'), desc: t('notes.historyModeAutoDesc') },
|
|
].map((opt) => (
|
|
<div key={opt.value} className="flex items-start gap-2">
|
|
<RadioGroupItem value={opt.value} id={`history-${opt.value}`} className="mt-0.5" />
|
|
<div>
|
|
<Label htmlFor={`history-${opt.value}`} className="text-sm font-medium cursor-pointer">{opt.label}</Label>
|
|
<p className="text-xs text-muted-foreground">{opt.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
)}
|
|
|
|
{/* Demo Mode */}
|
|
<DemoModeToggle demoMode={settings.demoMode} onToggle={handleDemoModeToggle} />
|
|
</div>
|
|
)
|
|
}
|