feat: multilingual glossary templates + inline GlossarySelector rewrite
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m28s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m28s
- Enriched 8 glossary templates with 18,191 translations across 11 languages using LLM batch generation + back-translation validation (99.98% confirmed) - Rewrote GlossarySelector as inline section with template creation - Fixed sidebar duplicate (single Glossaries link with proOnly flag) - Added glossaryId reset when sourceLang changes - Always show GlossarySelector (locked with Pro badge for free users) - Added source_language flag on glossary cards - Redirected /dashboard/context to /dashboard/glossaries - Updated import endpoint to read translations from templates - Added enrichment script (scripts/enrich_glossary_templates.py) - Added 6 i18n keys across all 13 locales Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,262 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Zap, Save, Crown, Loader2, Trash2,
|
||||
Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
|
||||
Megaphone, Car, MessageSquare, BookOpen, CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
import { useTranslationStore } from '@/lib/store';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import Link from 'next/link';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const PRESETS = [
|
||||
{ key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench, templateId: 'hvac' },
|
||||
{ key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat, templateId: 'construction' },
|
||||
{ key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor, templateId: 'technology' },
|
||||
{ key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale, templateId: 'legal' },
|
||||
{ key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope, templateId: 'medical' },
|
||||
{ key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
|
||||
{ key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
|
||||
{ key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car, templateId: 'automotive' },
|
||||
];
|
||||
|
||||
export default function ContextGlossaryPage() {
|
||||
const { t } = useI18n();
|
||||
const { settings, updateSettings } = useTranslationStore();
|
||||
const { toast } = useToast();
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isPro, setIsPro] = useState(false);
|
||||
const [creatingPreset, setCreatingPreset] = useState<string | null>(null);
|
||||
|
||||
const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function ContextPage() {
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
setSystemPrompt(settings.systemPrompt);
|
||||
}, [settings]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkTier = async () => {
|
||||
const isProTier = (user: any) => ['pro', 'business', 'enterprise'].includes(user?.plan ?? user?.tier ?? '');
|
||||
const userStr = localStorage.getItem('user');
|
||||
if (userStr) {
|
||||
try {
|
||||
const user = JSON.parse(userStr);
|
||||
if (user?.plan || user?.tier) { setIsPro(isProTier(user)); return; }
|
||||
} catch { /* continue */ }
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
const res = await fetch(`${API_BASE}/api/v1/auth/me`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
if (res.ok) {
|
||||
const result = await res.json();
|
||||
const user = result.data;
|
||||
setIsPro(isProTier(user));
|
||||
localStorage.setItem('user', JSON.stringify(user));
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
checkTier();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
updateSettings({ systemPrompt });
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
toast({ title: t('context.saved'), description: t('context.savedDesc') });
|
||||
} finally { setIsSaving(false); }
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
updateSettings({ systemPrompt: '' });
|
||||
setSystemPrompt('');
|
||||
};
|
||||
|
||||
const handleCreatePresetGlossary = async (preset: typeof PRESETS[0]) => {
|
||||
setCreatingPreset(preset.key);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
};
|
||||
|
||||
// Import the template as a new glossary via the API
|
||||
const params = new URLSearchParams({ template_id: preset.templateId });
|
||||
const res = await fetch(`${API_BASE}/api/v1/glossaries/import?${params.toString()}`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const result = await res.json();
|
||||
const glossary = result.data;
|
||||
toast({
|
||||
title: t('context.presets.created'),
|
||||
description: t('context.presets.createdDesc', {
|
||||
name: glossary?.name ?? preset.title,
|
||||
count: String(glossary?.terms?.length ?? 0),
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: t('glossaries.toast.error'),
|
||||
description: t('glossaries.toast.errorCreate'),
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: t('glossaries.toast.error'),
|
||||
description: t('glossaries.toast.errorImport'),
|
||||
});
|
||||
} finally {
|
||||
setCreatingPreset(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isPro) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] gap-6 p-6">
|
||||
<div className="w-20 h-20 bg-brand-dark dark:bg-white/10 rounded-[32px] flex items-center justify-center text-brand-accent shadow-2xl">
|
||||
<Crown className="w-10 h-10" />
|
||||
</div>
|
||||
<div className="text-center space-y-2 max-w-md">
|
||||
<h1 className="text-3xl font-black uppercase tracking-tighter text-brand-dark dark:text-white">{t('context.proTitle')}</h1>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('context.proDesc')}</p>
|
||||
</div>
|
||||
<Link href="/pricing">
|
||||
<button className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl flex items-center gap-2">
|
||||
<Crown size={14} /> {t('context.viewPlans')}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto w-full p-6 lg:p-8">
|
||||
{/* ── Editorial Header ───────────────────────────────────── */}
|
||||
<div className="mb-12">
|
||||
<span className="accent-pill mb-4 block w-fit italic">{t('context.presets.title')}</span>
|
||||
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
|
||||
{t('context.title')}
|
||||
</h1>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 font-medium max-w-2xl">{t('context.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{/* ── Professional Presets ──────────────────────────────── */}
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<Zap size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
{t('context.presets.title')}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-brand-dark/40 dark:text-white/40 mb-12 font-medium">{t('context.presets.desc')}</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{PRESETS.map((p) => {
|
||||
const Icon = p.icon;
|
||||
const isCreating = creatingPreset === p.key;
|
||||
return (
|
||||
<button
|
||||
key={p.key}
|
||||
onClick={() => handleCreatePresetGlossary(p)}
|
||||
disabled={!!creatingPreset}
|
||||
className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
|
||||
{isCreating ? (
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
) : (
|
||||
<Icon size={24} />
|
||||
)}
|
||||
</div>
|
||||
<h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
|
||||
{p.title}
|
||||
</h4>
|
||||
<p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
|
||||
{p.desc}
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-1 mt-3 px-3 py-1 rounded-full bg-brand-accent/10 text-brand-accent text-[8px] font-black uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<BookOpen size={10} />
|
||||
{t('context.presets.createGlossary')}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-6">
|
||||
{t('context.presets.hint')}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* ── Context Instructions ──────────────────────────────── */}
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<MessageSquare size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
{t('context.instructions.title')}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
|
||||
<textarea
|
||||
value={systemPrompt}
|
||||
onChange={e => setSystemPrompt(e.target.value)}
|
||||
placeholder={t('context.instructions.placeholder')}
|
||||
className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
|
||||
/>
|
||||
<div className="flex justify-end mt-6 gap-4">
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all"
|
||||
>
|
||||
<Trash2 size={12} className="inline mr-2" />{t('context.clearAll')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
{isSaving ? t('context.saving') : t('context.save')}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Glossary link ────────────────────────────────────── */}
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-14 h-14 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent shrink-0">
|
||||
<BookOpen size={28} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
|
||||
{t('context.glossary.title')}
|
||||
</h3>
|
||||
<p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
|
||||
{t('context.glossary.desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/dashboard/glossaries">
|
||||
<button className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl flex items-center gap-3">
|
||||
<BookOpen size={14} />
|
||||
{t('context.glossary.manage')}
|
||||
</button>
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
router.replace('/dashboard/glossaries');
|
||||
}, [router]);
|
||||
return null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user