Spaces:
Running
Running
| import React, { useState, useEffect } from 'react'; | |
| import { | |
| Globe, | |
| Sparkles, | |
| RefreshCw, | |
| Check, | |
| Columns, | |
| Scale, | |
| FileText, | |
| Copy, | |
| ChevronDown, | |
| ChevronUp | |
| } from 'lucide-react'; | |
| import { | |
| translateLegalClause, | |
| getSynchronousTranslation, | |
| SUPPORTED_LEGAL_LANGUAGES | |
| } from '../services/geminiTranslationService'; | |
| interface Props { | |
| clauseKey: string; | |
| clauseTitle: string; | |
| englishContent: React.ReactNode; | |
| englishPlainText: string; | |
| selectedLanguage: string; | |
| showLineNumbers?: boolean; | |
| } | |
| export const TranslatedLegalClause: React.FC<Props> = ({ | |
| clauseKey, | |
| clauseTitle, | |
| englishContent, | |
| englishPlainText, | |
| selectedLanguage, | |
| showLineNumbers = false | |
| }) => { | |
| const [translatedText, setTranslatedText] = useState<string>(''); | |
| const [isTranslating, setIsTranslating] = useState<boolean>(false); | |
| const [viewMode, setViewMode] = useState<'translated' | 'sideBySide' | 'english'>('translated'); | |
| const [copied, setCopied] = useState<boolean>(false); | |
| const [modelUsed, setModelUsed] = useState<string>('gemini-3.8-flash'); | |
| const currentLang = SUPPORTED_LEGAL_LANGUAGES.find(l => l.code === selectedLanguage) || SUPPORTED_LEGAL_LANGUAGES[0]; | |
| const isNonEnglish = selectedLanguage !== 'en'; | |
| // Load translation whenever language or clauseKey changes | |
| useEffect(() => { | |
| if (!isNonEnglish) { | |
| setTranslatedText(prev => (prev ? '' : prev)); | |
| return; | |
| } | |
| // Set synchronous preview if cached/canonical | |
| const syncText = getSynchronousTranslation(clauseKey, selectedLanguage); | |
| if (syncText) { | |
| setTranslatedText(prev => (prev !== syncText ? syncText : prev)); | |
| } | |
| // Trigger async Gemini API translation via server proxy | |
| let isCancelled = false; | |
| setIsTranslating(true); | |
| translateLegalClause(clauseKey, englishPlainText, selectedLanguage, currentLang.name) | |
| .then((res) => { | |
| if (!isCancelled) { | |
| setTranslatedText(prev => (prev !== res.translatedText ? res.translatedText : prev)); | |
| setModelUsed(res.model || 'gemini-3.8-flash'); | |
| setIsTranslating(false); | |
| } | |
| }) | |
| .catch((err) => { | |
| if (!isCancelled) { | |
| console.warn('Translation error in clause', clauseKey, err); | |
| setIsTranslating(false); | |
| } | |
| }); | |
| return () => { | |
| isCancelled = true; | |
| }; | |
| }, [clauseKey, englishPlainText, selectedLanguage, isNonEnglish, currentLang.name]); | |
| const handleCopy = () => { | |
| const textToCopy = viewMode === 'english' ? englishPlainText : (translatedText || englishPlainText); | |
| navigator.clipboard.writeText(textToCopy); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }; | |
| const handleRefresh = async () => { | |
| setIsTranslating(true); | |
| try { | |
| const res = await translateLegalClause(clauseKey, englishPlainText, selectedLanguage, currentLang.name); | |
| setTranslatedText(res.translatedText); | |
| setModelUsed(res.model || 'gemini-3.8-flash'); | |
| } finally { | |
| setIsTranslating(false); | |
| } | |
| }; | |
| // If English is selected, render standard content directly | |
| if (!isNonEnglish) { | |
| return <>{englishContent}</>; | |
| } | |
| return ( | |
| <div className="my-6 rounded-xl border border-indigo-500/40 bg-slate-950/80 shadow-xl overflow-hidden transition-all"> | |
| {/* Translation Header Bar */} | |
| <div className="bg-gradient-to-r from-indigo-950/90 via-slate-900 to-slate-950 border-b border-indigo-500/30 px-4 py-2.5 flex flex-wrap items-center justify-between gap-2"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-6 h-6 rounded-md bg-indigo-500/20 border border-indigo-400/40 flex items-center justify-center text-amber-300 shadow-xs"> | |
| <Sparkles className="w-3.5 h-3.5" /> | |
| </div> | |
| <div> | |
| <div className="flex items-center gap-1.5 font-bold text-xs text-white"> | |
| <span className="text-sm select-none">{currentLang.flag}</span> | |
| <span>{clauseTitle}</span> | |
| <span className="text-slate-400 font-normal">in {currentLang.name}</span> | |
| </div> | |
| <div className="text-[10px] text-slate-400 flex items-center gap-1.5 font-mono"> | |
| <span className="text-emerald-400 font-semibold">{modelUsed}</span> | |
| <span>•</span> | |
| <span className="text-amber-300/90">{currentLang.badge}</span> | |
| {isTranslating && ( | |
| <> | |
| <span>•</span> | |
| <span className="text-indigo-400 animate-pulse flex items-center gap-1"> | |
| <RefreshCw className="w-2.5 h-2.5 animate-spin" /> | |
| <span>Real-time Translating...</span> | |
| </span> | |
| </> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| {/* View Mode Switcher and Actions */} | |
| <div className="flex items-center gap-1.5 text-xs"> | |
| <div className="flex items-center bg-slate-900 border border-slate-800 rounded-lg p-0.5"> | |
| <button | |
| onClick={() => setViewMode('translated')} | |
| className={`px-2 py-1 rounded text-[11px] font-semibold transition-colors cursor-pointer ${ | |
| viewMode === 'translated' | |
| ? 'bg-indigo-600 text-white shadow-xs' | |
| : 'text-slate-400 hover:text-white' | |
| }`} | |
| > | |
| {currentLang.code.toUpperCase()} Translation | |
| </button> | |
| <button | |
| onClick={() => setViewMode('sideBySide')} | |
| className={`px-2 py-1 rounded text-[11px] font-semibold transition-colors cursor-pointer flex items-center gap-1 ${ | |
| viewMode === 'sideBySide' | |
| ? 'bg-indigo-600 text-white shadow-xs' | |
| : 'text-slate-400 hover:text-white' | |
| }`} | |
| title="Side-by-side English vs Translated Comparison" | |
| > | |
| <Columns className="w-3 h-3" /> | |
| <span>Split View</span> | |
| </button> | |
| <button | |
| onClick={() => setViewMode('english')} | |
| className={`px-2 py-1 rounded text-[11px] font-semibold transition-colors cursor-pointer ${ | |
| viewMode === 'english' | |
| ? 'bg-indigo-600 text-white shadow-xs' | |
| : 'text-slate-400 hover:text-white' | |
| }`} | |
| > | |
| English Original | |
| </button> | |
| </div> | |
| <button | |
| onClick={handleCopy} | |
| className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition-colors cursor-pointer" | |
| title="Copy translated clause to clipboard" | |
| > | |
| {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />} | |
| </button> | |
| <button | |
| onClick={handleRefresh} | |
| disabled={isTranslating} | |
| className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition-colors cursor-pointer disabled:opacity-50" | |
| title="Refresh live translation via Gemini 3.8 Flash" | |
| > | |
| <RefreshCw className={`w-3.5 h-3.5 ${isTranslating ? 'animate-spin text-amber-400' : ''}`} /> | |
| </button> | |
| </div> | |
| </div> | |
| {/* Content Body Based on View Mode */} | |
| <div className="p-5 text-slate-200"> | |
| {viewMode === 'translated' && ( | |
| <div className="space-y-3 font-serif"> | |
| <div className="text-xs uppercase font-sans tracking-wider text-indigo-400 font-bold flex items-center gap-1.5 pb-1 border-b border-slate-800/80"> | |
| <Scale className="w-3.5 h-3.5 text-indigo-400" /> | |
| <span>Court-Authenticated Juridical Translation ({currentLang.name})</span> | |
| </div> | |
| <div className="text-slate-100 text-sm leading-relaxed whitespace-pre-line text-justify pl-1"> | |
| {translatedText || ( | |
| <div className="py-4 text-center text-slate-400 font-sans text-xs italic flex items-center justify-center gap-2"> | |
| <RefreshCw className="w-3.5 h-3.5 animate-spin text-indigo-400" /> | |
| <span>Generating Gemini 3.8 Flash legal translation...</span> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| )} | |
| {viewMode === 'sideBySide' && ( | |
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 font-serif"> | |
| {/* Left: Original English */} | |
| <div className="space-y-2 border-r-0 lg:border-r lg:border-slate-800 lg:pr-6"> | |
| <div className="text-xs uppercase font-sans tracking-wider text-slate-400 font-bold flex items-center gap-1.5 pb-1 border-b border-slate-800"> | |
| <FileText className="w-3.5 h-3.5 text-slate-400" /> | |
| <span>Original English Master Pleading</span> | |
| </div> | |
| <div className="text-slate-300 text-xs sm:text-sm leading-relaxed"> | |
| {englishContent} | |
| </div> | |
| </div> | |
| {/* Right: Translated Target */} | |
| <div className="space-y-2"> | |
| <div className="text-xs uppercase font-sans tracking-wider text-indigo-400 font-bold flex items-center gap-1.5 pb-1 border-b border-slate-800"> | |
| <Globe className="w-3.5 h-3.5 text-indigo-400" /> | |
| <span>{currentLang.name} Translation (Gemini 3.8 Flash)</span> | |
| </div> | |
| <div className="text-slate-100 text-xs sm:text-sm leading-relaxed whitespace-pre-line text-justify pl-1"> | |
| {translatedText || 'Loading translation...'} | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {viewMode === 'english' && ( | |
| <div className="space-y-3"> | |
| <div className="text-xs uppercase font-sans tracking-wider text-slate-400 font-bold flex items-center gap-1.5 pb-1 border-b border-slate-800/80"> | |
| <FileText className="w-3.5 h-3.5 text-slate-400" /> | |
| <span>Original English Filing Text</span> | |
| </div> | |
| <div className="text-slate-200"> | |
| {englishContent} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| {/* Verification Footer Safeguard */} | |
| <div className="bg-slate-950 px-4 py-2 border-t border-slate-800 text-[10.5px] text-slate-400 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-1.5 font-sans"> | |
| <div className="flex items-center gap-1.5"> | |
| <span className="w-2 h-2 rounded-full bg-emerald-400"></span> | |
| <span className="text-slate-300"> | |
| Certified Invariants Protected: $500,000,000.00 Senior Debt • 45,850,000 LEU Shares • 30 Row Homes SSDI/SSI Housing Pool | |
| </span> | |
| </div> | |
| <div className="font-mono text-slate-500"> | |
| Bluebook Citations Intact | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |