Cody Tseng
9 months ago
committed by
GitHub
43 changed files with 1466 additions and 47 deletions
@ -0,0 +1,140 @@
@@ -0,0 +1,140 @@
|
||||
import { |
||||
EMAIL_REGEX, |
||||
EMBEDDED_EVENT_REGEX, |
||||
EMBEDDED_MENTION_REGEX, |
||||
EMOJI_REGEX, |
||||
HASHTAG_REGEX, |
||||
URL_REGEX, |
||||
WS_URL_REGEX |
||||
} from '@/constants' |
||||
import { useTranslatedEvent } from '@/hooks' |
||||
import { isSupportedKind } from '@/lib/event' |
||||
import { toTranslation } from '@/lib/link' |
||||
import { cn } from '@/lib/utils' |
||||
import { useSecondaryPage } from '@/PageManager' |
||||
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||
import { franc } from 'franc-min' |
||||
import { Languages, Loader } from 'lucide-react' |
||||
import { Event } from 'nostr-tools' |
||||
import { useMemo, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { toast } from 'sonner' |
||||
|
||||
export default function TranslateButton({ |
||||
event, |
||||
className |
||||
}: { |
||||
event: Event |
||||
className?: string |
||||
}) { |
||||
const { i18n } = useTranslation() |
||||
const { push } = useSecondaryPage() |
||||
const { translate, showOriginalEvent } = useTranslationService() |
||||
const [translating, setTranslating] = useState(false) |
||||
const translatedEvent = useTranslatedEvent(event.id) |
||||
const supported = useMemo(() => isSupportedKind(event.kind), [event]) |
||||
|
||||
const needTranslation = useMemo(() => { |
||||
const cleanText = event.content |
||||
.replace(URL_REGEX, '') |
||||
.replace(WS_URL_REGEX, '') |
||||
.replace(EMAIL_REGEX, '') |
||||
.replace(EMBEDDED_MENTION_REGEX, '') |
||||
.replace(EMBEDDED_EVENT_REGEX, '') |
||||
.replace(HASHTAG_REGEX, '') |
||||
.replace(EMOJI_REGEX, '') |
||||
.trim() |
||||
|
||||
if (!cleanText) { |
||||
return false |
||||
} |
||||
|
||||
const hasChinese = /[\u4e00-\u9fff]/.test(cleanText) |
||||
const hasJapanese = /[\u3040-\u309f\u30a0-\u30ff]/.test(cleanText) |
||||
const hasArabic = /[\u0600-\u06ff]/.test(cleanText) |
||||
const hasRussian = /[\u0400-\u04ff]/.test(cleanText) |
||||
|
||||
if (hasJapanese) return i18n.language !== 'ja' |
||||
if (hasChinese && !hasJapanese) return i18n.language !== 'zh' |
||||
|
||||
if (hasArabic) return i18n.language !== 'ar' |
||||
if (hasRussian) return i18n.language !== 'ru' |
||||
|
||||
try { |
||||
const detectedLang = franc(cleanText) |
||||
const langMap: { [key: string]: string } = { |
||||
ara: 'ar', // Arabic
|
||||
deu: 'de', // German
|
||||
eng: 'en', // English
|
||||
spa: 'es', // Spanish
|
||||
fra: 'fr', // French
|
||||
ita: 'it', // Italian
|
||||
jpn: 'ja', // Japanese
|
||||
pol: 'pl', // Polish
|
||||
por: 'pt', // Portuguese
|
||||
rus: 'ru', // Russian
|
||||
cmn: 'zh', // Chinese (Mandarin)
|
||||
zho: 'zh' // Chinese (alternative code)
|
||||
} |
||||
|
||||
const normalizedLang = langMap[detectedLang] |
||||
if (!normalizedLang) { |
||||
return true |
||||
} |
||||
|
||||
return !i18n.language.startsWith(normalizedLang) |
||||
} catch { |
||||
return true |
||||
} |
||||
}, [event, i18n.language]) |
||||
|
||||
if (!supported || !needTranslation) { |
||||
return null |
||||
} |
||||
|
||||
const handleTranslate = async () => { |
||||
if (translating) return |
||||
|
||||
setTranslating(true) |
||||
await translate(event) |
||||
.catch((error) => { |
||||
toast.error( |
||||
'Translation failed: ' + (error.message || 'An error occurred while translating the note') |
||||
) |
||||
if (error.message === 'Insufficient balance.') { |
||||
push(toTranslation()) |
||||
} |
||||
}) |
||||
.finally(() => { |
||||
setTranslating(false) |
||||
}) |
||||
} |
||||
|
||||
const showOriginal = () => { |
||||
showOriginalEvent(event.id) |
||||
} |
||||
|
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'flex items-center text-muted-foreground hover:text-pink-400 px-2 h-full disabled:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 transition-colors', |
||||
className |
||||
)} |
||||
disabled={translating} |
||||
onClick={(e) => { |
||||
e.stopPropagation() |
||||
if (translatedEvent) { |
||||
showOriginal() |
||||
} else { |
||||
handleTranslate() |
||||
} |
||||
}} |
||||
> |
||||
{translating ? ( |
||||
<Loader className="animate-spin" /> |
||||
) : ( |
||||
<Languages className={translatedEvent ? 'text-pink-400 hover:text-pink-400/60' : ''} /> |
||||
)} |
||||
</button> |
||||
) |
||||
} |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||
import { Event } from 'nostr-tools' |
||||
import { useEffect, useMemo, useState } from 'react' |
||||
|
||||
export function useTranslatedEvent(eventId?: string) { |
||||
const { translatedEventIdSet, getTranslatedEvent } = useTranslationService() |
||||
const translated = useMemo(() => { |
||||
return eventId ? translatedEventIdSet.has(eventId) : false |
||||
}, [eventId, translatedEventIdSet]) |
||||
const [translatedEvent, setTranslatedEvent] = useState<Event | null>(null) |
||||
|
||||
useEffect(() => { |
||||
if (translated && eventId) { |
||||
setTranslatedEvent(getTranslatedEvent(eventId)) |
||||
} else { |
||||
setTranslatedEvent(null) |
||||
} |
||||
}, [translated, eventId]) |
||||
|
||||
return translatedEvent |
||||
} |
||||
@ -0,0 +1,75 @@
@@ -0,0 +1,75 @@
|
||||
import { Button } from '@/components/ui/button' |
||||
import { Input } from '@/components/ui/input' |
||||
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import { Check, Copy, Eye, EyeOff } from 'lucide-react' |
||||
import { useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||
import RegenerateApiKeyButton from './RegenerateApiKeyButton' |
||||
import TopUp from './TopUp' |
||||
|
||||
export function AccountInfo() { |
||||
const { t } = useTranslation() |
||||
const { pubkey, startLogin } = useNostr() |
||||
const { account } = useJumbleTranslateAccount() |
||||
const [showApiKey, setShowApiKey] = useState(false) |
||||
const [copied, setCopied] = useState(false) |
||||
|
||||
if (!pubkey) { |
||||
return ( |
||||
<div className="w-full flex justify-center"> |
||||
<Button onClick={() => startLogin()}>{t('Login')}</Button> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-4"> |
||||
{/* Balance display in characters */} |
||||
<div className="space-y-2"> |
||||
<p className="font-medium">{t('Balance')}</p> |
||||
<div className="flex items-baseline gap-2"> |
||||
<p className="text-3xl font-bold">{account?.balance.toLocaleString() ?? '0'}</p> |
||||
<p className="text-muted-foreground">{t('characters')}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
{/* API Key section with visibility toggle and copy functionality */} |
||||
<div className="space-y-2"> |
||||
<p className="font-medium">API key</p> |
||||
<div className="flex items-center gap-2"> |
||||
<Input |
||||
type={showApiKey ? 'text' : 'password'} |
||||
value={account?.api_key ?? ''} |
||||
readOnly |
||||
className="font-mono flex-1 max-w-fit" |
||||
/> |
||||
<Button variant="outline" onClick={() => setShowApiKey(!showApiKey)}> |
||||
{showApiKey ? <Eye /> : <EyeOff />} |
||||
</Button> |
||||
<Button |
||||
variant="outline" |
||||
disabled={!account?.api_key} |
||||
onClick={() => { |
||||
if (!account?.api_key) return |
||||
navigator.clipboard.writeText(account.api_key) |
||||
setCopied(true) |
||||
setTimeout(() => setCopied(false), 4000) |
||||
}} |
||||
> |
||||
{copied ? <Check /> : <Copy />} |
||||
</Button> |
||||
<RegenerateApiKeyButton /> |
||||
</div> |
||||
<p className="text-sm text-muted-foreground select-text"> |
||||
{t('jumbleTranslateApiKeyDescription', { |
||||
serviceUrl: new URL('/v1/translation', JUMBLE_API_BASE_URL).toString() |
||||
})} |
||||
</p> |
||||
</div> |
||||
<TopUp /> |
||||
<div className="h-40" /> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||
import { TTranslationAccount } from '@/types' |
||||
import { createContext, useContext, useEffect, useState } from 'react' |
||||
import { toast } from 'sonner' |
||||
|
||||
type TJumbleTranslateAccountContext = { |
||||
account: TTranslationAccount | null |
||||
getAccount: () => Promise<void> |
||||
regenerateApiKey: () => Promise<void> |
||||
} |
||||
|
||||
export const JumbleTranslateAccountContext = createContext< |
||||
TJumbleTranslateAccountContext | undefined |
||||
>(undefined) |
||||
|
||||
export const useJumbleTranslateAccount = () => { |
||||
const context = useContext(JumbleTranslateAccountContext) |
||||
if (!context) { |
||||
throw new Error( |
||||
'useJumbleTranslateAccount must be used within a JumbleTranslateAccountProvider' |
||||
) |
||||
} |
||||
return context |
||||
} |
||||
|
||||
export function JumbleTranslateAccountProvider({ children }: { children: React.ReactNode }) { |
||||
const { pubkey } = useNostr() |
||||
const { getAccount: _getAccount, regenerateApiKey: _regenerateApiKey } = useTranslationService() |
||||
const [account, setAccount] = useState<TTranslationAccount | null>(null) |
||||
|
||||
useEffect(() => { |
||||
setAccount(null) |
||||
if (!pubkey) return |
||||
|
||||
setTimeout(() => { |
||||
getAccount() |
||||
}, 100) |
||||
}, [pubkey]) |
||||
|
||||
const regenerateApiKey = async (): Promise<void> => { |
||||
try { |
||||
if (!account) { |
||||
await getAccount() |
||||
} |
||||
const newApiKey = await _regenerateApiKey() |
||||
if (newApiKey) { |
||||
setAccount((prev) => { |
||||
if (!prev) return prev |
||||
return { |
||||
...prev, |
||||
api_key: newApiKey |
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
toast.error( |
||||
'Failed to regenerate Jumble translation API key: ' + |
||||
(error instanceof Error |
||||
? error.message |
||||
: 'An error occurred while regenerating the API key') |
||||
) |
||||
setAccount(null) |
||||
} |
||||
} |
||||
|
||||
const getAccount = async (): Promise<void> => { |
||||
try { |
||||
const data = await _getAccount() |
||||
if (data) { |
||||
setAccount(data) |
||||
} |
||||
} catch (error) { |
||||
toast.error( |
||||
'Failed to fetch Jumble translation account: ' + |
||||
(error instanceof Error ? error.message : 'An error occurred while fetching the account') |
||||
) |
||||
setAccount(null) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<JumbleTranslateAccountContext.Provider value={{ account, getAccount, regenerateApiKey }}> |
||||
{children} |
||||
</JumbleTranslateAccountContext.Provider> |
||||
) |
||||
} |
||||
@ -0,0 +1,67 @@
@@ -0,0 +1,67 @@
|
||||
import { Button } from '@/components/ui/button' |
||||
import { |
||||
Dialog, |
||||
DialogContent, |
||||
DialogDescription, |
||||
DialogFooter, |
||||
DialogHeader, |
||||
DialogTitle, |
||||
DialogTrigger |
||||
} from '@/components/ui/dialog' |
||||
import { Loader, RotateCcw } from 'lucide-react' |
||||
import { useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||
|
||||
export default function RegenerateApiKeyButton() { |
||||
const { t } = useTranslation() |
||||
const { account, regenerateApiKey } = useJumbleTranslateAccount() |
||||
const [resettingApiKey, setResettingApiKey] = useState(false) |
||||
const [showResetDialog, setShowResetDialog] = useState(false) |
||||
|
||||
const handleRegenerateApiKey = async () => { |
||||
if (resettingApiKey || !account) return |
||||
|
||||
setResettingApiKey(true) |
||||
await regenerateApiKey() |
||||
setShowResetDialog(false) |
||||
setResettingApiKey(false) |
||||
} |
||||
|
||||
return ( |
||||
<Dialog open={showResetDialog} onOpenChange={setShowResetDialog}> |
||||
<DialogTrigger asChild> |
||||
<Button variant="outline" disabled={!account?.api_key}> |
||||
<RotateCcw /> |
||||
</Button> |
||||
</DialogTrigger> |
||||
<DialogContent> |
||||
<DialogHeader> |
||||
<DialogTitle>{t('Reset API key')}</DialogTitle> |
||||
<DialogDescription> |
||||
{t('Are you sure you want to reset your API key? This action cannot be undone.')} |
||||
<br /> |
||||
<br /> |
||||
<strong>{t('Warning')}:</strong>{' '} |
||||
{t( |
||||
'Your current API key will become invalid immediately, and any applications using it will stop working until you update them with the new key.' |
||||
)} |
||||
</DialogDescription> |
||||
</DialogHeader> |
||||
<DialogFooter> |
||||
<Button |
||||
variant="outline" |
||||
onClick={() => setShowResetDialog(false)} |
||||
disabled={resettingApiKey} |
||||
> |
||||
{t('Cancel')} |
||||
</Button> |
||||
<Button variant="destructive" onClick={handleRegenerateApiKey} disabled={resettingApiKey}> |
||||
{resettingApiKey && <Loader className="animate-spin" />} |
||||
{t('Reset API key')} |
||||
</Button> |
||||
</DialogFooter> |
||||
</DialogContent> |
||||
</Dialog> |
||||
) |
||||
} |
||||
@ -0,0 +1,164 @@
@@ -0,0 +1,164 @@
|
||||
import { Button } from '@/components/ui/button' |
||||
import { Input } from '@/components/ui/input' |
||||
import { cn } from '@/lib/utils' |
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import transaction from '@/services/transaction.service' |
||||
import { closeModal, launchPaymentModal } from '@getalby/bitcoin-connect-react' |
||||
import { Loader } from 'lucide-react' |
||||
import { useState } from 'react' |
||||
import { toast } from 'sonner' |
||||
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export default function TopUp() { |
||||
const { t } = useTranslation() |
||||
const { pubkey } = useNostr() |
||||
const { getAccount } = useJumbleTranslateAccount() |
||||
const [topUpLoading, setTopUpLoading] = useState(false) |
||||
const [topUpAmount, setTopUpAmount] = useState(1000) |
||||
const [selectedAmount, setSelectedAmount] = useState<number | null>(1000) |
||||
|
||||
const presetAmounts = [ |
||||
{ amount: 1_000, text: '1k' }, |
||||
{ amount: 5_000, text: '5k' }, |
||||
{ amount: 10_000, text: '10k' }, |
||||
{ amount: 25_000, text: '25k' }, |
||||
{ amount: 50_000, text: '50k' }, |
||||
{ amount: 100_000, text: '100k' } |
||||
] |
||||
const charactersPerUnit = 100 // 1 unit = 100 characters
|
||||
|
||||
const calculateCharacters = (amount: number) => { |
||||
return amount * charactersPerUnit |
||||
} |
||||
|
||||
const handlePresetClick = (amount: number) => { |
||||
setSelectedAmount(amount) |
||||
setTopUpAmount(amount) |
||||
} |
||||
|
||||
const handleInputChange = (value: string) => { |
||||
const numValue = parseInt(value) || 0 |
||||
setTopUpAmount(numValue) |
||||
setSelectedAmount(numValue >= 1000 ? numValue : null) |
||||
} |
||||
|
||||
const handleTopUp = async (amount: number | null) => { |
||||
if (topUpLoading || !pubkey || !amount || amount < 1000) return |
||||
|
||||
setTopUpLoading(true) |
||||
try { |
||||
const { transactionId, invoiceId } = await transaction.createTransaction(pubkey, amount) |
||||
|
||||
let checkPaymentInterval: ReturnType<typeof setInterval> | undefined = undefined |
||||
const { setPaid } = launchPaymentModal({ |
||||
invoice: invoiceId, |
||||
onCancelled: () => { |
||||
clearInterval(checkPaymentInterval) |
||||
setTopUpLoading(false) |
||||
} |
||||
}) |
||||
|
||||
let failedCount = 0 |
||||
checkPaymentInterval = setInterval(async () => { |
||||
try { |
||||
const { state } = await transaction.checkTransaction(transactionId) |
||||
if (state === 'pending') return |
||||
|
||||
clearInterval(checkPaymentInterval) |
||||
setTopUpLoading(false) |
||||
|
||||
if (state === 'settled') { |
||||
setPaid({ preimage: '' }) // Preimage is not returned, but we can assume payment is successful
|
||||
getAccount() // Refresh account balance
|
||||
} else { |
||||
closeModal() |
||||
toast.error('The invoice has expired or the payment was not successful') |
||||
} |
||||
} catch (err) { |
||||
failedCount++ |
||||
if (failedCount <= 3) return |
||||
|
||||
clearInterval(checkPaymentInterval) |
||||
setTopUpLoading(false) |
||||
toast.error( |
||||
'Top up failed: ' + |
||||
(err instanceof Error ? err.message : 'An error occurred while topping up') |
||||
) |
||||
} |
||||
}, 2000) |
||||
} catch (err) { |
||||
setTopUpLoading(false) |
||||
toast.error( |
||||
'Top up failed: ' + |
||||
(err instanceof Error ? err.message : 'An error occurred while topping up') |
||||
) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-4"> |
||||
<p className="font-medium">{t('Top up')}</p> |
||||
|
||||
{/* Preset amounts */} |
||||
<div className="grid grid-cols-2 gap-2"> |
||||
{presetAmounts.map(({ amount, text }) => ( |
||||
<Button |
||||
key={amount} |
||||
variant="outline" |
||||
onClick={() => handlePresetClick(amount)} |
||||
className={cn( |
||||
'flex flex-col h-auto py-3 hover:bg-primary/10', |
||||
selectedAmount === amount && 'border border-primary bg-primary/10' |
||||
)} |
||||
> |
||||
<span className="text-lg font-semibold"> |
||||
{text} {t('sats')} |
||||
</span> |
||||
<span className="text-sm text-muted-foreground"> |
||||
{calculateCharacters(amount).toLocaleString()} {t('characters')} |
||||
</span> |
||||
</Button> |
||||
))} |
||||
</div> |
||||
|
||||
{/* Custom amount input */} |
||||
<div className="space-y-2"> |
||||
<div className="flex items-center gap-2"> |
||||
<Input |
||||
type="number" |
||||
placeholder="Custom amount" |
||||
value={topUpAmount} |
||||
onChange={(e) => handleInputChange(e.target.value)} |
||||
min={1000} |
||||
step={1000} |
||||
className="w-40" |
||||
/> |
||||
<span className="text-sm text-muted-foreground">{t('sats')}</span> |
||||
</div> |
||||
{selectedAmount && selectedAmount >= 1000 && ( |
||||
<p className="text-sm text-muted-foreground"> |
||||
{t('Will receive: {n} characters', { |
||||
n: calculateCharacters(selectedAmount).toLocaleString() |
||||
})} |
||||
</p> |
||||
)} |
||||
</div> |
||||
|
||||
<Button |
||||
className="w-full" |
||||
disabled={topUpLoading || !selectedAmount || selectedAmount < 1000} |
||||
onClick={() => handleTopUp(selectedAmount)} |
||||
> |
||||
{topUpLoading && <Loader className="animate-spin" />} |
||||
{selectedAmount && selectedAmount >= 1000 |
||||
? t('Top up {n} sats', { |
||||
n: selectedAmount?.toLocaleString() |
||||
}) |
||||
: t('Minimum top up is {n} sats', { |
||||
n: new Number(1000).toLocaleString() |
||||
})} |
||||
</Button> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
import { AccountInfo } from './AccountInfo' |
||||
import { JumbleTranslateAccountProvider } from './JumbleTranslateAccountProvider' |
||||
|
||||
export default function JumbleTranslate() { |
||||
return ( |
||||
<JumbleTranslateAccountProvider> |
||||
<AccountInfo /> |
||||
</JumbleTranslateAccountProvider> |
||||
) |
||||
} |
||||
@ -0,0 +1,59 @@
@@ -0,0 +1,59 @@
|
||||
import { Input } from '@/components/ui/input' |
||||
import { Label } from '@/components/ui/label' |
||||
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||
import { useEffect, useRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export default function LibreTranslate() { |
||||
const { t } = useTranslation() |
||||
const { config, updateConfig } = useTranslationService() |
||||
const [server, setServer] = useState( |
||||
config.service === 'libre_translate' ? (config.server ?? '') : '' |
||||
) |
||||
const [apiKey, setApiKey] = useState( |
||||
config.service === 'libre_translate' ? (config.api_key ?? '') : '' |
||||
) |
||||
const initialized = useRef(false) |
||||
|
||||
useEffect(() => { |
||||
if (!initialized.current) { |
||||
initialized.current = true |
||||
return |
||||
} |
||||
|
||||
updateConfig({ |
||||
service: 'libre_translate', |
||||
server, |
||||
api_key: apiKey |
||||
}) |
||||
}, [server, apiKey]) |
||||
|
||||
return ( |
||||
<div className="space-y-4"> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="libre-translate-server" className="text-base"> |
||||
{t('Service address')} |
||||
</Label> |
||||
<Input |
||||
id="libre-translate-server" |
||||
type="text" |
||||
value={server} |
||||
onChange={(e) => setServer(e.target.value)} |
||||
placeholder="Enter server address" |
||||
/> |
||||
</div> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="libre-translate-api-key" className="text-base"> |
||||
API key |
||||
</Label> |
||||
<Input |
||||
id="libre-translate-api-key" |
||||
type="text" |
||||
value={apiKey} |
||||
onChange={(e) => setApiKey(e.target.value)} |
||||
placeholder="Enter API Key" |
||||
/> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,74 @@
@@ -0,0 +1,74 @@
|
||||
import { Label } from '@/components/ui/label' |
||||
import { |
||||
Select, |
||||
SelectContent, |
||||
SelectItem, |
||||
SelectTrigger, |
||||
SelectValue |
||||
} from '@/components/ui/select' |
||||
import { LocalizedLanguageNames } from '@/i18n' |
||||
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' |
||||
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||
import { TLanguage } from '@/types' |
||||
import { forwardRef, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import JumbleTranslate from './JumbleTranslate' |
||||
import LibreTranslate from './LibreTranslate' |
||||
|
||||
const TranslationPage = forwardRef(({ index }: { index?: number }, ref) => { |
||||
const { t, i18n } = useTranslation() |
||||
const { config, updateConfig } = useTranslationService() |
||||
const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage) |
||||
|
||||
const handleLanguageChange = (value: TLanguage) => { |
||||
i18n.changeLanguage(value) |
||||
setLanguage(value) |
||||
} |
||||
|
||||
return ( |
||||
<SecondaryPageLayout ref={ref} index={index} title={t('Translation')}> |
||||
<div className="px-4 pt-2 space-y-4"> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="languages" className="text-base font-medium"> |
||||
{t('Languages')} |
||||
</Label> |
||||
<Select defaultValue="en" value={language} onValueChange={handleLanguageChange}> |
||||
<SelectTrigger id="languages" className="w-48"> |
||||
<SelectValue /> |
||||
</SelectTrigger> |
||||
<SelectContent> |
||||
{Object.entries(LocalizedLanguageNames).map(([key, value]) => ( |
||||
<SelectItem key={key} value={key}> |
||||
{value} |
||||
</SelectItem> |
||||
))} |
||||
</SelectContent> |
||||
</Select> |
||||
</div> |
||||
<div className="space-y-2"> |
||||
<Label htmlFor="translation-service-select" className="text-base font-medium"> |
||||
{t('Service')} |
||||
</Label> |
||||
<Select |
||||
defaultValue={config.service} |
||||
value={config.service} |
||||
onValueChange={(newService) => { |
||||
updateConfig({ service: newService as 'jumble' | 'libre_translate' }) |
||||
}} |
||||
> |
||||
<SelectTrigger id="translation-service-select" className="w-[180px]"> |
||||
<SelectValue placeholder={t('Select Translation Service')} /> |
||||
</SelectTrigger> |
||||
<SelectContent> |
||||
<SelectItem value="jumble">Jumble</SelectItem> |
||||
<SelectItem value="libre_translate">LibreTranslate</SelectItem> |
||||
</SelectContent> |
||||
</Select> |
||||
</div> |
||||
{config.service === 'jumble' ? <JumbleTranslate /> : <LibreTranslate />} |
||||
</div> |
||||
</SecondaryPageLayout> |
||||
) |
||||
}) |
||||
TranslationPage.displayName = 'TranslationPage' |
||||
export default TranslationPage |
||||
@ -0,0 +1,153 @@
@@ -0,0 +1,153 @@
|
||||
import libreTranslate from '@/services/libre-translate.service' |
||||
import storage from '@/services/local-storage.service' |
||||
import translation from '@/services/translation.service' |
||||
import { TTranslationAccount, TTranslationServiceConfig } from '@/types' |
||||
import { Event, kinds } from 'nostr-tools' |
||||
import { createContext, useContext, useEffect, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { useNostr } from './NostrProvider' |
||||
|
||||
const translatedEventCache: Record<string, Event> = {} |
||||
|
||||
type TTranslationServiceContext = { |
||||
config: TTranslationServiceConfig |
||||
translatedEventIdSet: Set<string> |
||||
translate: (event: Event) => Promise<Event | void> |
||||
getTranslatedEvent: (eventId: string) => Event | null |
||||
showOriginalEvent: (eventId: string) => void |
||||
getAccount: () => Promise<TTranslationAccount | void> |
||||
regenerateApiKey: () => Promise<string | undefined> |
||||
updateConfig: (newConfig: TTranslationServiceConfig) => void |
||||
} |
||||
|
||||
const TranslationServiceContext = createContext<TTranslationServiceContext | undefined>(undefined) |
||||
|
||||
export const useTranslationService = () => { |
||||
const context = useContext(TranslationServiceContext) |
||||
if (!context) { |
||||
throw new Error('useTranslation must be used within a TranslationProvider') |
||||
} |
||||
return context |
||||
} |
||||
|
||||
export function TranslationServiceProvider({ children }: { children: React.ReactNode }) { |
||||
const { i18n } = useTranslation() |
||||
const [config, setConfig] = useState<TTranslationServiceConfig>({ service: 'jumble' }) |
||||
const { pubkey, startLogin } = useNostr() |
||||
const [translatedEventIdSet, setTranslatedEventIdSet] = useState<Set<string>>(new Set()) |
||||
|
||||
useEffect(() => { |
||||
translation.changeCurrentPubkey(pubkey) |
||||
const config = storage.getTranslationServiceConfig(pubkey) |
||||
setConfig(config) |
||||
}, [pubkey]) |
||||
|
||||
const getAccount = async (): Promise<TTranslationAccount | void> => { |
||||
if (config.service !== 'jumble') return |
||||
if (!pubkey) { |
||||
startLogin() |
||||
return |
||||
} |
||||
return await translation.getAccount() |
||||
} |
||||
|
||||
const regenerateApiKey = async (): Promise<string | undefined> => { |
||||
if (config.service !== 'jumble') return |
||||
if (!pubkey) { |
||||
startLogin() |
||||
return |
||||
} |
||||
return await translation.regenerateApiKey() |
||||
} |
||||
|
||||
const getTranslatedEvent = (eventId: string): Event | null => { |
||||
const target = i18n.language |
||||
const cacheKey = eventId + '_' + target |
||||
return translatedEventCache[cacheKey] ?? null |
||||
} |
||||
|
||||
const translate = async (event: Event): Promise<Event | void> => { |
||||
if (config.service === 'jumble' && !pubkey) { |
||||
startLogin() |
||||
return |
||||
} |
||||
|
||||
const target = i18n.language |
||||
const cacheKey = event.id + '_' + target |
||||
if (translatedEventCache[cacheKey]) { |
||||
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||
return translatedEventCache[cacheKey] |
||||
} |
||||
|
||||
if (event.kind === kinds.Highlights) { |
||||
const comment = event.tags.find((tag) => tag[0] === 'comment')?.[1] |
||||
const [translatedContent, translatedComment] = await Promise.all([ |
||||
config.service === 'jumble' |
||||
? await translation.translate(event.content, target) |
||||
: await libreTranslate.translate(event.content, target, config.server, config.api_key), |
||||
!!comment && |
||||
(config.service === 'jumble' |
||||
? await translation.translate(comment, target) |
||||
: await libreTranslate.translate(comment, target, config.server, config.api_key)) |
||||
]) |
||||
|
||||
if (!translatedContent) { |
||||
return |
||||
} |
||||
const translatedEvent: Event = { |
||||
...event, |
||||
content: translatedContent |
||||
} |
||||
if (translatedComment) { |
||||
translatedEvent.tags = event.tags.map((tag) => |
||||
tag[0] === 'comment' ? ['comment', translatedComment] : tag |
||||
) |
||||
} |
||||
translatedEventCache[cacheKey] = translatedEvent |
||||
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||
return translatedEvent |
||||
} |
||||
|
||||
const translatedText = |
||||
config.service === 'jumble' |
||||
? await translation.translate(event.content, target) |
||||
: await libreTranslate.translate(event.content, target, config.server, config.api_key) |
||||
if (!translatedText) { |
||||
return |
||||
} |
||||
const translatedEvent: Event = { ...event, content: translatedText } |
||||
translatedEventCache[cacheKey] = translatedEvent |
||||
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||
return translatedEvent |
||||
} |
||||
|
||||
const showOriginalEvent = (eventId: string) => { |
||||
setTranslatedEventIdSet((prev) => { |
||||
const newSet = new Set(prev) |
||||
newSet.delete(eventId) |
||||
return newSet |
||||
}) |
||||
} |
||||
|
||||
const updateConfig = (newConfig: TTranslationServiceConfig) => { |
||||
setConfig(newConfig) |
||||
storage.setTranslationServiceConfig(newConfig, pubkey) |
||||
} |
||||
|
||||
return ( |
||||
<TranslationServiceContext.Provider |
||||
value={{ |
||||
config, |
||||
translatedEventIdSet, |
||||
getAccount, |
||||
regenerateApiKey, |
||||
translate, |
||||
getTranslatedEvent, |
||||
showOriginalEvent, |
||||
updateConfig |
||||
}} |
||||
> |
||||
{children} |
||||
</TranslationServiceContext.Provider> |
||||
) |
||||
} |
||||
@ -0,0 +1,35 @@
@@ -0,0 +1,35 @@
|
||||
class LibreTranslateService { |
||||
static instance: LibreTranslateService |
||||
|
||||
constructor() { |
||||
if (!LibreTranslateService.instance) { |
||||
LibreTranslateService.instance = this |
||||
} |
||||
return LibreTranslateService.instance |
||||
} |
||||
|
||||
async translate( |
||||
text: string, |
||||
target: string, |
||||
server?: string, |
||||
api_key?: string |
||||
): Promise<string | undefined> { |
||||
if (!server) { |
||||
throw new Error('LibreTranslate server address is not configured') |
||||
} |
||||
const url = new URL('/translate', server).toString() |
||||
const response = await fetch(url, { |
||||
method: 'POST', |
||||
headers: { 'Content-Type': 'application/json' }, |
||||
body: JSON.stringify({ q: text, target, source: 'auto', api_key }) |
||||
}) |
||||
const data = await response.json() |
||||
if (!response.ok) { |
||||
throw new Error(data.error ?? 'Failed to translate') |
||||
} |
||||
return data.translatedText |
||||
} |
||||
} |
||||
|
||||
const instance = new LibreTranslateService() |
||||
export default instance |
||||
@ -0,0 +1,55 @@
@@ -0,0 +1,55 @@
|
||||
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||
|
||||
class TransactionService { |
||||
static instance: TransactionService |
||||
|
||||
constructor() { |
||||
if (!TransactionService.instance) { |
||||
TransactionService.instance = this |
||||
} |
||||
return TransactionService.instance |
||||
} |
||||
|
||||
async createTransaction( |
||||
pubkey: string, |
||||
amount: number |
||||
): Promise<{ |
||||
transactionId: string |
||||
invoiceId: string |
||||
}> { |
||||
const url = new URL('/v1/transactions', JUMBLE_API_BASE_URL).toString() |
||||
const response = await fetch(url, { |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json' |
||||
}, |
||||
body: JSON.stringify({ |
||||
pubkey, |
||||
amount, |
||||
purpose: 'translation' |
||||
}) |
||||
}) |
||||
const data = await response.json() |
||||
if (!response.ok) { |
||||
throw new Error(data.error ?? 'Failed to create transaction') |
||||
} |
||||
return data |
||||
} |
||||
|
||||
async checkTransaction(transactionId: string): Promise<{ |
||||
state: 'pending' | 'failed' | 'settled' |
||||
}> { |
||||
const url = new URL(`/v1/transactions/${transactionId}/check`, JUMBLE_API_BASE_URL).toString() |
||||
const response = await fetch(url, { |
||||
method: 'POST' |
||||
}) |
||||
const data = await response.json() |
||||
if (!response.ok) { |
||||
throw new Error(data.error ?? 'Failed to complete transaction') |
||||
} |
||||
return data |
||||
} |
||||
} |
||||
|
||||
const instance = new TransactionService() |
||||
export default instance |
||||
@ -0,0 +1,129 @@
@@ -0,0 +1,129 @@
|
||||
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||
import client from '@/services/client.service' |
||||
import { TTranslationAccount } from '@/types' |
||||
|
||||
class TranslationService { |
||||
static instance: TranslationService |
||||
|
||||
private apiKeyMap: Record<string, string | undefined> = {} |
||||
private currentPubkey: string | null = null |
||||
|
||||
constructor() { |
||||
if (!TranslationService.instance) { |
||||
TranslationService.instance = this |
||||
} |
||||
return TranslationService.instance |
||||
} |
||||
|
||||
async getAccount(): Promise<TTranslationAccount> { |
||||
if (!this.currentPubkey) { |
||||
throw new Error('Please login first') |
||||
} |
||||
const apiKey = this.apiKeyMap[this.currentPubkey] |
||||
const path = '/v1/translation/account' |
||||
const method = 'GET' |
||||
let auth: string | undefined |
||||
if (!apiKey) { |
||||
auth = await client.signHttpAuth( |
||||
new URL(path, JUMBLE_API_BASE_URL).toString(), |
||||
method, |
||||
'Auth to get Jumble translation service account' |
||||
) |
||||
} |
||||
const act = await this._fetch<TTranslationAccount>({ |
||||
path, |
||||
method, |
||||
auth, |
||||
retryWhenUnauthorized: !auth |
||||
}) |
||||
|
||||
if (act.api_key && act.pubkey) { |
||||
this.apiKeyMap[act.pubkey] = act.api_key |
||||
} |
||||
|
||||
return act |
||||
} |
||||
|
||||
async regenerateApiKey(): Promise<string> { |
||||
try { |
||||
const data = await this._fetch({ |
||||
path: '/v1/translation/regenerate-api-key', |
||||
method: 'POST' |
||||
}) |
||||
if (data.api_key && this.currentPubkey) { |
||||
this.apiKeyMap[this.currentPubkey] = data.api_key |
||||
} |
||||
return data.api_key |
||||
} catch (error) { |
||||
const errMsg = error instanceof Error ? error.message : '' |
||||
throw new Error(errMsg || 'Failed to regenerate API key') |
||||
} |
||||
} |
||||
|
||||
async translate(text: string, target: string): Promise<string | undefined> { |
||||
try { |
||||
const data = await this._fetch({ |
||||
path: '/v1/translation/translate', |
||||
method: 'POST', |
||||
body: JSON.stringify({ q: text, target }) |
||||
}) |
||||
return data.translatedText |
||||
} catch (error) { |
||||
const errMsg = error instanceof Error ? error.message : '' |
||||
throw new Error(errMsg || 'Failed to translate') |
||||
} |
||||
} |
||||
|
||||
changeCurrentPubkey(pubkey: string | null): void { |
||||
this.currentPubkey = pubkey |
||||
} |
||||
|
||||
private async _fetch<T = any>({ |
||||
path, |
||||
method, |
||||
body, |
||||
auth, |
||||
retryWhenUnauthorized = true |
||||
}: { |
||||
path: string |
||||
method: string |
||||
body?: string |
||||
auth?: string |
||||
retryWhenUnauthorized?: boolean |
||||
}): Promise<T> { |
||||
if (!this.currentPubkey) { |
||||
throw new Error('Please login first') |
||||
} |
||||
const apiKey = this.apiKeyMap[this.currentPubkey] |
||||
const hasApiKey = !!apiKey |
||||
let _auth: string |
||||
if (auth) { |
||||
_auth = auth |
||||
} else if (hasApiKey) { |
||||
_auth = `Bearer ${apiKey}` |
||||
} else { |
||||
const act = await this.getAccount() |
||||
_auth = `Bearer ${act.api_key}` |
||||
} |
||||
|
||||
const url = new URL(path, JUMBLE_API_BASE_URL).toString() |
||||
const response = await fetch(url, { |
||||
method, |
||||
headers: { 'Content-Type': 'application/json', Authorization: _auth }, |
||||
body |
||||
}) |
||||
|
||||
const data = await response.json() |
||||
if (!response.ok) { |
||||
if (data.code === '00403' && hasApiKey && retryWhenUnauthorized) { |
||||
this.apiKeyMap[this.currentPubkey] = undefined |
||||
return this._fetch({ path, method, body, retryWhenUnauthorized: false }) |
||||
} |
||||
throw new Error(data.error) |
||||
} |
||||
return data |
||||
} |
||||
} |
||||
|
||||
const instance = new TranslationService() |
||||
export default instance |
||||
Loading…
Reference in new issue