+
+ # BabelBridge
-BabelBridge is a web-based translation tool with a modern UI, supporting live language identification, multi-message context, and a pluggable AI backend (Ollama or Cohere).
+ [](https://github.com/daniel-sullivan/babel-bridge/actions/workflows/ci.yml)
+ [](https://codecov.io/gh/daniel-sullivan/babel-bridge)
-## Features
+ **A modern web-based translation tool with live language identification and pluggable AI backends**
++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 10.9% | +54/495 | +68.75% | +11/16 | +66.66% | +8/12 | +10.9% | +54/495 | +
| src/components | +
+
+ |
+ 67.18% | +473/704 | +71.92% | +41/57 | +33.33% | +12/36 | +67.18% | +473/704 | +
| src/context | +
+
+ |
+ 96.87% | +62/64 | +91.66% | +11/12 | +100% | +3/3 | +96.87% | +62/64 | +
| src/hooks | +
+
+ |
+ 100% | +131/131 | +81.25% | +26/32 | +100% | +2/2 | +100% | +131/131 | +
| src/types | +
+
+ |
+ 0% | +0/0 | +0% | +1/1 | +0% | +1/1 | +0% | +0/0 | +
| src/utils | +
+
+ |
+ 94.89% | +93/98 | +72.22% | +13/18 | +100% | +5/5 | +94.89% | +93/98 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react' +import { Box, Container, AppBar, Toolbar, Typography, Paper } from '@mui/material' +import { TranslationProvider } from './context/TranslationContext' +import { useTranslation } from './hooks/useTranslation' +import { TranslationComposer } from './components/TranslationComposer' +import { TranslationOutput } from './components/TranslationOutput' +import { TranslationHistory } from './components/TranslationHistory' +import { ModalsContainer } from './components/ModalsContainer' +import { toLanguageName } from './utils/languages' +import logoUrl from './assets/logo.svg' + +function AppContent() { + const { translate, context } = useTranslation() + + const handleTranslate = async (text: string, targetLang: string) => { + try { + await translate(text, targetLang) + } catch (err) { + // Error handling is managed by the translation hook + console.error('Translation failed:', err) + } + } + + return ( + <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}> + <AppHeader /> + + <Container + component="main" + maxWidth="lg" + sx={{ + flex: 1, + py: 3, + display: 'flex', + flexDirection: 'column', + gap: 3, + }} + > + <TranslationComposer onTranslate={handleTranslate} /> + + <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}> + <TranslationOutput /> + <TranslationHistory /> + </Box> + </Container> + + <AppFooter targetLang={context.targetLang} /> + <ModalsContainer /> + </Box> + ) +} + +function AppHeader() { + return ( + <AppBar + position="sticky" + elevation={0} + sx={{ + background: 'linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0))', + borderBottom: '1px solid #111827', + backdropFilter: 'blur(6px) saturate(1.05)', + }} + > + <Toolbar sx={{ gap: 1.5, minHeight: 56 }}> + <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}> + <Box + component="img" + src={logoUrl} + alt="BabelBridge logo" + sx={{ + height: 40, + borderRadius: 2, + }} + /> + <Typography + variant="h6" + sx={{ + fontWeight: 700, + letterSpacing: 0.3, + }} + > + BabelBridge + </Typography> + </Box> + </Toolbar> + </AppBar> + ) +} + +interface AppFooterProps { + targetLang: string +} + +function AppFooter({ targetLang }: AppFooterProps) { + // Default to Japanese if no target language is set + const displayLang = targetLang || 'ja' + const flagEmoji = getFlagEmoji(displayLang) + + return ( + <Box + component="footer" + sx={{ + py: 2, + px: 3, + display: 'flex', + alignItems: 'center', + gap: 1, + borderTop: '1px solid', + borderColor: 'divider', + backgroundColor: 'background.paper', + }} + > + <Typography variant="body2" color="text.secondary"> + Last target: {toLanguageName(displayLang)} {flagEmoji} + </Typography> + <Box + sx={{ + width: 4, + height: 4, + borderRadius: '50%', + backgroundColor: 'text.secondary', + opacity: 0.5, + }} + /> + <Typography + variant="body2" + component="a" + href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie" + target="_blank" + rel="noreferrer" + sx={{ + color: 'text.secondary', + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }} + > + Session via cookie + </Typography> + </Box> + ) +} + +function getFlagEmoji(langCode: string): string { + const flags: Record<string, string> = { + ja: '🇯🇵', + es: '🇪🇸', + de: '🇩🇪', + en: '🇺🇸', + fr: '🇫🇷', + it: '🇮🇹', + pt: '🇵🇹', + zh: '🇨🇳', + ko: '🇰🇷', + ru: '🇷🇺' + } + return flags[langCode.split('-')[0]] || '🌐' +} + +export default function App() { + return ( + <TranslationProvider> + <AppContent /> + </TranslationProvider> + ) +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 | 1x + + + + + + + + + + + + +3x +3x +3x +3x +3x +3x +3x +3x +3x + +3x + | import React from 'react'
+import { LanguageSelector } from './components/LanguageSelector'
+
+// The original tests import `LanguageButtons` from src/LanguageButtons
+// Provide a default export compatible with the previous API.
+
+interface Props {
+ excludeLang?: string
+ loading: boolean
+ loadingTarget?: string | null
+ onTranslate: (languageCode: string) => void
+}
+
+export default function LanguageButtons(props: Props) {
+ const { excludeLang, loading, loadingTarget, onTranslate } = props
+ return (
+ <LanguageSelector
+ excludeLang={excludeLang}
+ loading={loading}
+ loadingTarget={loadingTarget}
+ onTranslate={onTranslate}
+ />
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | + + + + + + + + +1x + +1x +6x +6x + +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x +4x + + + +4x + + +4x +4x + +4x +4x +4x +4x +4x +4x +4x +4x +4x + +4x + + +4x + + + + + +4x +1x +1x +1x +3x +3x + +1x +1x +1x + + + + + + + + + +3x +3x +3x + | export type StartRequest = { source: string; lang: string }
+export type StartResponse = { contextId: string; result: string; sourceLang: string }
+export type ImproveRequest = { contextId: string; feedback: string }
+export type ImproveResponse = { result: string }
+export type PreviewRequest = { source: string; lang: string }
+export type PreviewResponse = { result: string }
+export type IdentifyRequest = { source: string }
+export type IdentifyResponse = { lang: string }
+
+let sessionPromise: Promise<void> | null = null
+
+export function __resetSessionCache() {
+ sessionPromise = null
+}
+
+async function ensureSession(): Promise<void> {
+ if (!sessionPromise) {
+ sessionPromise = fetch('/session', { credentials: 'include' })
+ .then(() => undefined)
+ .catch(() => undefined)
+ }
+ return sessionPromise
+}
+
+async function json<T>(res: Response): Promise<T> {
+ const text = await res.text()
+ try {
+ return JSON.parse(text) as T
+ } catch {
+ // @ts-ignore
+ return text as T
+ }
+}
+
+// Centralized POST helper for API calls with session
+async function apiPost<T>(url: string, body: any): Promise<T> {
+ await ensureSession()
+
+ const doFetch = async (): Promise<Response> =>
+ fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ body: JSON.stringify(body),
+ })
+
+ let res = await doFetch()
+
+ // If session is invalid, refresh once and retry
+ if (res.status === 401) {
+ __resetSessionCache()
+ await ensureSession()
+ res = await doFetch()
+ }
+
+ if (!res.ok) {
+ const data = await json<any>(res)
+ throw new Error(data?.error || `${url} failed: ${res.status}`)
+ }
+ return json<T>(res)
+}
+
+export async function startTranslation(req: StartRequest): Promise<StartResponse> {
+ return apiPost<StartResponse>('/api/translate/start', req)
+}
+
+export async function improveTranslation(req: ImproveRequest): Promise<ImproveResponse> {
+ return apiPost<ImproveResponse>('/api/translate/improve', req)
+}
+
+export async function previewTranslation(req: PreviewRequest): Promise<PreviewResponse> {
+ return apiPost<PreviewResponse>('/api/translate/preview', req)
+}
+
+export async function identifyLanguage(req: IdentifyRequest): Promise<IdentifyResponse> {
+ return apiPost<IdentifyResponse>('/api/translate/identify', req)
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 | 1x + + + + + + + + + + + + + + + + + + + + + + + + + +1x +18x +18x +18x +18x +18x +18x + +18x + + +18x +18x + + + + + + +18x +18x +18x +18x +18x + + + + +18x +18x + + +18x + + +18x +18x + + +18x +9x + +9x + +9x +9x +9x +9x + +9x + +9x +9x +9x +9x +18x + +18x +18x + +18x + +18x + + + +18x + + + +18x + + + + + + + + + + + +18x + + + + + + +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x + + +18x +258x +258x +63x +195x + +258x +258x +258x +258x +258x +258x +258x +258x +258x +258x +258x +258x + +258x +258x +258x +258x +258x +258x + + +258x + + +258x +258x +258x +258x +258x +258x +258x +258x +258x +258x +258x + +258x +258x +258x +258x +258x + +18x + + +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x + +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x + +18x +18x + + + +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x +18x + +18x +195x +195x +195x +195x + +195x +195x +195x +195x +195x +195x +195x +18x +18x +18x +18x +18x + +18x +18x +18x + +18x + +18x + + + + + + +108x +108x + +108x +108x +108x +108x +108x +108x +108x +108x +108x +108x +108x +108x +108x + +108x + + + + + + + + | import React, { useState, useRef, useEffect, useCallback } from 'react'
+import {
+ Box,
+ Button,
+ Menu,
+ MenuItem,
+ Divider,
+ CircularProgress,
+ Typography,
+ useTheme,
+ useMediaQuery,
+ Fade,
+ Grow
+} from '@mui/material'
+import { ExpandMore } from '@mui/icons-material'
+import { Language } from '../types/translation'
+import { getAvailableLanguages, getPrimaryLang, COMMON_LANGUAGES } from '../utils/languages'
+import { getFlagSvgUrl } from '../utils/flags'
+
+interface LanguageSelectorProps {
+ excludeLang?: string
+ loading: boolean
+ loadingTarget?: string | null
+ onTranslate: (languageCode: string) => void
+}
+
+export function LanguageSelector({ excludeLang, loading, loadingTarget, onTranslate }: LanguageSelectorProps) {
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+ const [visibleCount, setVisibleCount] = useState(6)
+ const containerRef = useRef<HTMLDivElement>(null)
+ const theme = useTheme()
+ const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+ const isTablet = useMediaQuery(theme.breakpoints.down('md'))
+
+ const availableLanguages = getAvailableLanguages(excludeLang)
+
+ // Calculate how many language buttons can fit
+ const calculateVisibleCount = useCallback(() => {
+ if (!containerRef.current) {
+ // Fallback based on screen size
+ if (isMobile) return 2
+ if (isTablet) return 4
+ return 6
+ }
+
+ const containerWidth = containerRef.current.offsetWidth
+ const buttonWidth = 120 // Approximate width per language button
+ const moreButtonWidth = 120 // Width of "More" button (increased to ensure full visibility)
+ const gap = 8 // Gap between buttons
+ const padding = 32 // Container padding (16px on each side = 32px total)
+
+ // Always reserve space for the More button, even if all languages could theoretically fit
+ // Formula: containerWidth = padding + (n * buttonWidth) + ((n-1) * gap) + gap + moreButtonWidth
+ // Solving for n: n = (containerWidth - padding - moreButtonWidth - gap) / (buttonWidth + gap)
+ const availableWidth = containerWidth - padding - moreButtonWidth - gap
+ const maxButtons = Math.floor(availableWidth / (buttonWidth + gap))
+
+ // Always keep at least one language in the More menu (except when there's only 1 total language)
+ const maxVisibleLanguages = availableLanguages.length <= 1 ? availableLanguages.length : availableLanguages.length - 1
+
+ // Ensure at least 1 visible, but cap at maxVisibleLanguages
+ return Math.max(1, Math.min(maxButtons, maxVisibleLanguages))
+ }, [containerRef, isMobile, isTablet, availableLanguages.length])
+
+ // Update visible count on resize
+ useEffect(() => {
+ const updateCount = () => setVisibleCount(calculateVisibleCount())
+
+ updateCount()
+
+ const resizeObserver = new ResizeObserver(updateCount)
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current)
+ }
+
+ window.addEventListener('resize', updateCount)
+
+ return () => {
+ resizeObserver.disconnect()
+ window.removeEventListener('resize', updateCount)
+ }
+ }, [calculateVisibleCount])
+
+ const visibleLanguages = availableLanguages.slice(0, visibleCount)
+ const overflowLanguages = availableLanguages.slice(visibleCount)
+
+ const open = Boolean(anchorEl)
+
+ const handleMoreClick = (event: React.MouseEvent<HTMLElement>) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleClose = () => {
+ setAnchorEl(null)
+ }
+
+ function handleLanguageSelect(languageCode: string) {
+ // Move language to front for better UX
+ const langIndex = COMMON_LANGUAGES.findIndex(l => getPrimaryLang(l.code) === getPrimaryLang(languageCode))
+ if (langIndex > 0) {
+ const [language] = COMMON_LANGUAGES.splice(langIndex, 1)
+ COMMON_LANGUAGES.unshift(language)
+ }
+
+ handleClose()
+ onTranslate(languageCode)
+ }
+
+ function handleCustomLanguage() {
+ const customLang = prompt('Enter custom BCP‑47 language tag (e.g., en-GB)')?.trim()
+ if (customLang) {
+ handleLanguageSelect(customLang)
+ }
+ }
+
+ return (
+ <Box
+ ref={containerRef}
+ sx={{
+ display: 'flex',
+ gap: 1,
+ alignItems: 'center',
+ width: '100%',
+ overflow: 'hidden'
+ }}
+ >
+ {/* Visible language buttons with directional fade transitions */}
+ {availableLanguages.map((language, index) => {
+ const isVisible = index < visibleCount
+ const animationDelay = isVisible
+ ? index * 50 // Left to right when appearing
+ : (availableLanguages.length - index - 1) * 35 // Right to left when disappearing (slightly longer)
+
+ return (
+ <Grow
+ key={language.code}
+ in={isVisible}
+ timeout={{
+ enter: 300 + animationDelay,
+ exit: 250 + animationDelay // Longer exit animation for smoother More button transition
+ }}
+ style={{
+ transformOrigin: isVisible ? 'center left' : 'center right',
+ }}
+ unmountOnExit
+ >
+ <Button
+ variant="outlined"
+ onClick={() => handleLanguageSelect(language.code)}
+ disabled={loading}
+ startIcon={
+ loading && loadingTarget === language.code ? (
+ <CircularProgress size={14} color="secondary" />
+ ) : (
+ <LanguageFlag languageCode={language.code} />
+ )
+ }
+ sx={{
+ borderRadius: '999px',
+ px: 1.5,
+ py: 0.75,
+ minWidth: 'auto',
+ whiteSpace: 'nowrap',
+ flexShrink: 0,
+ opacity: loading ? 0.7 : 1,
+ }}
+ title={`Translate to ${language.label}`}
+ data-testid={`language-button-${language.code}`}
+ >
+ <Typography variant="body2" sx={{ ml: 0.5 }}>
+ {language.label}
+ </Typography>
+ </Button>
+ </Grow>
+ )
+ })}
+
+ {/* More dropdown - animated in sync with the language buttons */}
+ {availableLanguages.length > 1 && (
+ <Grow
+ in={true}
+ timeout={{
+ enter: 300 + (visibleCount * 50), // Appears after the last visible button
+ exit: 50 // Much faster exit to move aggressively to new position
+ }}
+ style={{
+ transformOrigin: 'center left',
+ transition: 'transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1)', // Faster, more aggressive transition
+ }}
+ >
+ <Button
+ variant="outlined"
+ onClick={handleMoreClick}
+ disabled={loading}
+ endIcon={<ExpandMore />}
+ sx={{
+ borderRadius: '999px',
+ px: 1.5,
+ py: 0.75,
+ minWidth: 90,
+ flexShrink: 0,
+ whiteSpace: 'nowrap',
+ transition: 'all 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', // Custom easing for position changes
+ }}
+ aria-haspopup="menu"
+ aria-expanded={open}
+ data-testid="language-more-button"
+ title="More languages"
+ >
+ More ▾
+ </Button>
+ </Grow>
+ )}
+
+ {/* Menu for More dropdown */}
+ {availableLanguages.length > 1 && (
+ <Menu
+ anchorEl={anchorEl}
+ open={open}
+ onClose={handleClose}
+ MenuListProps={{
+ 'aria-labelledby': 'more-languages-button',
+ dense: true,
+ }}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ >
+ {overflowLanguages.map((language) => (
+ <MenuItem
+ key={language.code}
+ onClick={() => handleLanguageSelect(language.code)}
+ data-testid={`language-option-${language.code}`}
+ >
+ <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+ <LanguageFlag languageCode={language.code} />
+ <Typography variant="body2">
+ {language.label} ({language.code})
+ </Typography>
+ </Box>
+ </MenuItem>
+ ))}
+ <Divider />
+ <MenuItem
+ onClick={handleCustomLanguage}
+ data-testid="language-custom-option"
+ >
+ <Typography variant="body2">Custom…</Typography>
+ </MenuItem>
+ </Menu>
+ )}
+ </Box>
+ )
+}
+
+
+interface LanguageFlagProps {
+ languageCode: string
+}
+
+function LanguageFlag({ languageCode }: LanguageFlagProps) {
+ const flagUrl = getFlagSvgUrl(languageCode)
+
+ if (flagUrl) {
+ return (
+ <Box
+ component="img"
+ src={flagUrl}
+ alt=""
+ sx={{
+ width: '1.2em',
+ height: '1.2em',
+ display: 'inline-block',
+ verticalAlign: 'text-bottom',
+ }}
+ />
+ )
+ }
+
+ return (
+ <Typography component="span" role="img" aria-label="globe">
+ 🌐
+ </Typography>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 | 1x + + + + + + + + + + + + + + + + +1x +4x +4x + +4x +4x +4x +4x +4x +4x +4x +4x +4x + +4x + + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x + + +4x +4x +4x +4x +4x + +4x + +4x +4x +4x +4x +4x + + +4x +4x + + + + +4x +4x +4x + +4x + + + + +4x + + + + + + + + + + + +4x + + + + + +4x +4x +4x +4x +4x +4x +4x + +4x + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x +4x + +4x + +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x + +4x + | import React, { useState, useEffect, useRef } from 'react'
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ TextField,
+ Alert,
+ AlertTitle,
+ IconButton,
+ CircularProgress
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
+import { useTranslation } from '../hooks/useTranslation'
+import { useTranslationContext } from '../context/TranslationContext'
+
+export function ModalsContainer() {
+ const { error } = useTranslation()
+ const { dispatch } = useTranslationContext()
+
+ return (
+ <>
+ <ErrorModal
+ open={Boolean(error)}
+ error={error || ''}
+ onClose={() => dispatch({ type: 'SET_ERROR', payload: null })}
+ />
+ <ImproveModal />
+ </>
+ )
+}
+
+interface ErrorModalProps {
+ open: boolean
+ error: string
+ onClose: () => void
+}
+
+function ErrorModal({ open, error, onClose }: ErrorModalProps) {
+ return (
+ <Dialog
+ open={open}
+ onClose={onClose}
+ maxWidth="sm"
+ fullWidth
+ data-testid="error-modal"
+ >
+ <DialogContent sx={{ p: 3 }}>
+ <Alert
+ severity="error"
+ action={
+ <IconButton
+ aria-label="close"
+ color="inherit"
+ size="small"
+ onClick={onClose}
+ data-testid="error-dismiss"
+ >
+ <Close fontSize="inherit" />
+ </IconButton>
+ }
+ >
+ <AlertTitle>Error</AlertTitle>
+ <span data-testid="error-message">{error}</span>
+ </Alert>
+ </DialogContent>
+ </Dialog>
+ )
+}
+
+function ImproveModal() {
+ const [isOpen, setIsOpen] = useState(false)
+ const [feedback, setFeedback] = useState('')
+ const { improve, loading } = useTranslation()
+ const inputRef = useRef<HTMLInputElement>(null)
+
+ // Listen for improve modal open events
+ useEffect(() => {
+ const handleOpenImprove = () => {
+ setIsOpen(true)
+ setFeedback('')
+ }
+
+ window.addEventListener('openImproveModal', handleOpenImprove)
+ return () => window.removeEventListener('openImproveModal', handleOpenImprove)
+ }, [])
+
+ const handleClose = () => {
+ setIsOpen(false)
+ setFeedback('')
+ }
+
+ const handleApply = async () => {
+ if (!feedback.trim()) return
+
+ try {
+ await improve(feedback)
+ handleClose()
+ } catch (err) {
+ // Error handling is managed by the useTranslation hook
+ console.error('Improve failed:', err)
+ }
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && feedback.trim() && !loading.improve) {
+ handleApply()
+ }
+ }
+
+ return (
+ <Dialog
+ open={isOpen}
+ onClose={handleClose}
+ maxWidth="sm"
+ fullWidth
+ data-testid="improve-modal"
+ >
+ <DialogTitle>Improve output</DialogTitle>
+
+ <DialogContent>
+ <TextField
+ inputRef={inputRef}
+ fullWidth
+ variant="outlined"
+ placeholder="e.g. More formal, add details..."
+ value={feedback}
+ onChange={(e) => setFeedback(e.target.value)}
+ onKeyDown={handleKeyDown}
+ data-testid="improve-feedback-input"
+ autoFocus
+ sx={{ mt: 1 }}
+ />
+ </DialogContent>
+
+ <DialogActions sx={{ p: 3, pt: 1 }}>
+ <Button
+ onClick={handleClose}
+ data-testid="improve-cancel-button"
+ >
+ Cancel
+ </Button>
+
+ <Button
+ variant="contained"
+ onClick={handleApply}
+ disabled={!feedback.trim() || loading.improve}
+ data-testid="improve-apply-button"
+ startIcon={loading.improve ? <CircularProgress size={16} /> : null}
+ >
+ {loading.improve ? 'Applying...' : 'Apply'}
+ </Button>
+ </DialogActions>
+ </Dialog>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 | 1x + + + + + + + + + + + + + + + + + + + + + + + +1x +5x +5x +5x +5x + +5x + + +5x +5x +5x +5x + +5x + + + +5x + + + + + +5x + + + + + + +5x + + + + +5x +5x +5x +5x + +5x +5x +5x + + + + + + +5x +5x +5x +5x + +5x + +5x + + + + + + + +5x +5x +5x +5x +5x + + +5x +5x +5x +5x +5x +5x +5x + +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + +5x +5x +5x + +5x + + + + + + + + +5x +5x +5x +5x +5x +5x +5x +5x +5x +5x + +5x + | import React, { useState, useEffect, useRef } from 'react'
+import {
+ Paper,
+ Typography,
+ TextField,
+ Box,
+ IconButton,
+ CircularProgress,
+ List,
+ ListItem,
+ Chip
+} from '@mui/material'
+import { Add, Close } from '@mui/icons-material'
+import { Message } from '../types/translation'
+import { generateId } from '../utils/id'
+import { useLanguageDetection } from '../hooks/useLanguageDetection'
+import { useTranslationContext } from '../context/TranslationContext'
+import { toLanguageName } from '../utils/languages'
+import { LanguageSelector } from './LanguageSelector'
+
+interface TranslationComposerProps {
+ onTranslate: (text: string, targetLang: string) => void
+}
+
+export function TranslationComposer({ onTranslate }: TranslationComposerProps) {
+ const [messages, setMessages] = useState<Message[]>([{ id: generateId(), text: '' }])
+ const [isChain, setIsChain] = useState(false)
+ const { state } = useTranslationContext()
+ const { sourceLang, detectLanguageDebounced } = useLanguageDetection()
+
+ const currentText = messages[messages.length - 1]?.text || ''
+
+ // Language detection effect
+ useEffect(() => {
+ const cleanup = detectLanguageDebounced(currentText)
+ return cleanup
+ }, [currentText, detectLanguageDebounced])
+
+ const updateMessage = (id: string, text: string) => {
+ setMessages(prev => prev.map(m => m.id === id ? { ...m, text } : m))
+ }
+
+ const addMessage = () => {
+ const newMessage = { id: generateId(), text: '' }
+ setMessages(prev => [...prev, newMessage])
+ if (!isChain) setIsChain(true)
+ }
+
+ const removeMessage = (id: string) => {
+ setMessages(prev => {
+ const filtered = prev.filter(m => m.id !== id)
+ return filtered.length > 0 ? filtered : [{ id: generateId(), text: '' }]
+ })
+ }
+
+ const handleTranslateClick = (targetLang: string) => {
+ const text = messages.map(m => m.text).join(' ').trim()
+ onTranslate(text, targetLang)
+ }
+
+ return (
+ <Paper elevation={0} sx={{ p: 3, backgroundColor: 'background.paper' }}>
+ <Box className="composer-header" sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+ <Typography variant="h6" component="h2">
+ Input
+ {sourceLang && ` — ${toLanguageName(sourceLang)}`}
+ </Typography>
+ {state.loading.languageDetection && (
+ <CircularProgress
+ size={14}
+ color="secondary"
+ aria-label="Detecting language"
+ />
+ )}
+ {sourceLang && !state.loading.languageDetection && (
+ <Box sx={{ position: 'absolute', left: '-9999px' }} aria-live="polite">
+ Detected language: {toLanguageName(sourceLang)}
+ </Box>
+ )}
+ </Box>
+
+ {isChain ? (
+ <MultipleMessageInput
+ messages={messages}
+ onUpdateMessage={updateMessage}
+ onRemoveMessage={removeMessage}
+ onAddMessage={addMessage}
+ />
+ ) : (
+ <SingleMessageInput
+ message={messages[0]}
+ onUpdateMessage={updateMessage}
+ onAddMessage={addMessage}
+ />
+ )}
+
+ <TranslateControls
+ sourceLang={sourceLang}
+ loading={state.loading.translate}
+ loadingTarget={state.loadingTarget}
+ onTranslate={handleTranslateClick}
+ />
+ </Paper>
+ )
+}
+
+interface MultipleMessageInputProps {
+ messages: Message[]
+ onUpdateMessage: (id: string, text: string) => void
+ onRemoveMessage: (id: string) => void
+ onAddMessage: () => void
+}
+
+function MultipleMessageInput({
+ messages,
+ onUpdateMessage,
+ onRemoveMessage,
+ onAddMessage
+}: MultipleMessageInputProps) {
+ return (
+ <Box sx={{ mb: 2 }}>
+ <List disablePadding>
+ {messages.map((message, index) => (
+ <ListItem key={message.id} disablePadding sx={{ mb: 1 }}>
+ <Box sx={{ display: 'flex', width: '100%', gap: 1, alignItems: 'flex-start' }}>
+ <TextField
+ multiline
+ fullWidth
+ minRows={2}
+ value={message.text}
+ onChange={(e) => onUpdateMessage(message.id, e.target.value)}
+ placeholder={
+ index === messages.length - 1
+ ? 'Final message to translate…'
+ : 'Earlier context (optional)…'
+ }
+ variant="outlined"
+ data-testid={`message-input-${index}`}
+ />
+ <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, pt: 1 }}>
+ <Chip
+ label={index + 1}
+ size="small"
+ sx={{ width: 28, height: 28, fontSize: '0.75rem' }}
+ />
+ {messages.length > 1 && (
+ <IconButton
+ size="small"
+ aria-label="Remove message"
+ onClick={() => onRemoveMessage(message.id)}
+ data-testid={`remove-message-${index}`}
+ >
+ <Close fontSize="small" />
+ </IconButton>
+ )}
+ </Box>
+ </Box>
+ </ListItem>
+ ))}
+ </List>
+ <IconButton
+ onClick={onAddMessage}
+ aria-label="Add message"
+ data-testid="add-message-button"
+ sx={{ mt: 1 }}
+ >
+ <Add />
+ </IconButton>
+ </Box>
+ )
+}
+
+interface SingleMessageInputProps {
+ message: Message
+ onUpdateMessage: (id: string, text: string) => void
+ onAddMessage: () => void
+}
+
+function SingleMessageInput({ message, onUpdateMessage, onAddMessage }: SingleMessageInputProps) {
+ return (
+ <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', mb: 2 }}>
+ <TextField
+ multiline
+ fullWidth
+ minRows={3}
+ value={message.text}
+ onChange={(e) => onUpdateMessage(message.id, e.target.value)}
+ placeholder="Enter text to translate…"
+ variant="outlined"
+ data-testid="single-message-input"
+ />
+ <IconButton
+ onClick={onAddMessage}
+ aria-label="Add message"
+ data-testid="add-message-button"
+ sx={{ mt: 1 }}
+ >
+ <Add />
+ </IconButton>
+ </Box>
+ )
+}
+
+interface TranslateControlsProps {
+ sourceLang: string
+ loading: boolean
+ loadingTarget: string | null
+ onTranslate: (targetLang: string) => void
+}
+
+function TranslateControls({ sourceLang, loading, loadingTarget, onTranslate }: TranslateControlsProps) {
+ return (
+ <Box role="group" aria-label="Translate to">
+ <LanguageSelector
+ excludeLang={sourceLang}
+ loading={loading}
+ loadingTarget={loadingTarget}
+ onTranslate={onTranslate}
+ />
+ </Box>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 | 1x + + + + + + + + + + + + + + + + +1x +4x +4x +4x + +4x + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x +3x +3x +3x +3x +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x + +4x +4x +4x +4x +3x +3x +3x +3x +3x +3x +3x +3x +4x +4x +4x +4x + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'
+import {
+ Paper,
+ Box,
+ Typography,
+ Button,
+ Collapse,
+ List,
+ ListItem,
+ Chip,
+ Divider
+} from '@mui/material'
+import { ExpandLess, ExpandMore, SwapHoriz } from '@mui/icons-material'
+import { useTranslation } from '../hooks/useTranslation'
+import { HistoryItem } from '../types/translation'
+import { toLanguageName } from '../utils/languages'
+
+export function TranslationHistory() {
+ const { history, context, preview } = useTranslation()
+ const [isOpen, setIsOpen] = useState(false)
+ const [historyReverse, setHistoryReverse] = useState<Record<number, { active: boolean; preview?: string }>>({})
+
+ if (history.length === 0) return null
+
+ const toggleHistoryItem = async (index: number) => {
+ if (!context.sourceLang) return
+
+ const reverse = historyReverse[index]
+ if (reverse?.active) {
+ // Switch back to translation
+ setHistoryReverse(prev => ({
+ ...prev,
+ [index]: { ...reverse, active: false }
+ }))
+ return
+ }
+
+ if (reverse?.preview) {
+ // Show cached preview
+ setHistoryReverse(prev => ({
+ ...prev,
+ [index]: { active: true, preview: reverse.preview }
+ }))
+ return
+ }
+
+ // Generate preview
+ try {
+ const historyItem = history[index]
+ if (!historyItem) return
+
+ const result = await preview(historyItem.text, context.sourceLang.split('-')[0])
+ setHistoryReverse(prev => ({
+ ...prev,
+ [index]: { active: true, preview: result }
+ }))
+ } catch (err) {
+ console.error('History reverse preview error:', err)
+ }
+ }
+
+ return (
+ <Paper elevation={0} sx={{ backgroundColor: 'background.paper' }}>
+ <Button
+ fullWidth
+ onClick={() => setIsOpen(!isOpen)}
+ endIcon={isOpen ? <ExpandLess /> : <ExpandMore />}
+ startIcon={
+ <Chip
+ label={history.length}
+ size="small"
+ color="primary"
+ sx={{ fontSize: '0.75rem' }}
+ />
+ }
+ sx={{
+ justifyContent: 'flex-start',
+ p: 2,
+ color: 'text.primary',
+ }}
+ data-testid="history-toggle"
+ >
+ <Typography variant="body2">
+ {isOpen ? 'Hide' : 'Show'} context history
+ </Typography>
+ </Button>
+
+ <Collapse in={isOpen} timeout="auto" unmountOnExit>
+ <Divider />
+ <List dense data-testid="history-list" sx={{ px: 2, pb: 2 }}>
+ {history.map((item, index) => (
+ <HistoryItemComponent
+ key={index}
+ item={item}
+ index={index}
+ sourceLang={context.sourceLang}
+ reverse={historyReverse[index]}
+ onToggleReverse={() => toggleHistoryItem(index)}
+ />
+ ))}
+ </List>
+ </Collapse>
+ </Paper>
+ )
+}
+
+interface HistoryItemComponentProps {
+ item: HistoryItem
+ index: number
+ sourceLang: string
+ reverse?: { active: boolean; preview?: string }
+ onToggleReverse: () => void
+}
+
+function HistoryItemComponent({
+ item,
+ index,
+ sourceLang,
+ reverse,
+ onToggleReverse
+}: HistoryItemComponentProps) {
+ const displayText = reverse?.active ? reverse.preview : item.text
+ const badgeText = item.kind === 'initial' ? 'Initial' : `Improve: ${item.feedback}`
+
+ return (
+ <ListItem
+ disablePadding
+ sx={{ display: 'block', mb: 1 }}
+ data-testid={`history-item-${index}`}
+ >
+ <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+ <Chip
+ label={badgeText}
+ size="small"
+ variant="outlined"
+ sx={{ fontSize: '0.75rem' }}
+ />
+ <Typography variant="caption" color="text.secondary">
+ {new Date(item.at).toLocaleString()}
+ </Typography>
+ <Box sx={{ flex: 1 }} />
+
+ {sourceLang && (
+ <Button
+ size="small"
+ variant="outlined"
+ startIcon={<SwapHoriz />}
+ onClick={onToggleReverse}
+ title={
+ reverse?.active
+ ? 'Show translation'
+ : `Show in original (${toLanguageName(sourceLang)})`
+ }
+ data-testid={`history-reverse-${index}`}
+ sx={{ fontSize: '0.75rem', py: 0.25, px: 1 }}
+ >
+ {reverse?.active ? 'Translation' : 'Original'}
+ </Button>
+ )}
+ </Box>
+
+ <Box
+ sx={{
+ p: 1.5,
+ backgroundColor: 'background.default',
+ borderRadius: 1,
+ border: '1px solid',
+ borderColor: 'divider',
+ fontSize: '0.875rem',
+ lineHeight: 1.4,
+ }}
+ id={`history-text-${index}`}
+ >
+ <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+ {displayText || 'Loading...'}
+ </Typography>
+ </Box>
+ </ListItem>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 | 1x + + + + + + +1x +7x +7x +7x +7x +7x +7x + +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +7x +7x +3x +3x +3x +3x +3x +3x +7x + +7x +7x + +7x +7x +7x +7x + +7x +7x + +7x +6x +6x +6x +6x +6x +6x +6x + +6x + +6x +6x + +6x + +6x +6x + + +7x +7x + +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x +7x + +7x +7x +7x +7x +7x +7x + +7x +6x +6x +6x + +7x + +7x + + + + + +7x +7x + +7x +7x +7x +7x +7x + + + +7x +7x + +7x +7x + +7x + | import React, { useState } from 'react'
+import { Paper, Box, Typography, Button, CircularProgress, Fade } from '@mui/material'
+import { SwapHoriz } from '@mui/icons-material'
+import { useTranslation } from '../hooks/useTranslation'
+import { toLanguageName } from '../utils/languages'
+import { ReverseView } from '../types/translation'
+
+export function TranslationOutput() {
+ const { context, loading, preview } = useTranslation()
+ const [reverseView, setReverseView] = useState<ReverseView>({
+ active: false,
+ forwardText: '',
+ preview: undefined
+ })
+
+ const handleReverse = async () => {
+ if (!context.output || !context.sourceLang) return
+
+ if (reverseView.active) {
+ // Switch back to translation
+ setReverseView(prev => ({ ...prev, active: false }))
+ return
+ }
+
+ if (reverseView.preview) {
+ // Show cached preview
+ setReverseView(prev => ({ ...prev, active: true }))
+ return
+ }
+
+ // Generate preview
+ try {
+ const result = await preview(context.output, context.sourceLang.split('-')[0])
+ setReverseView({
+ active: true,
+ forwardText: context.output,
+ preview: result
+ })
+ } catch (err) {
+ console.error('Reverse preview error:', err)
+ }
+ }
+
+ // Update reverse view when translation output changes
+ React.useEffect(() => {
+ if (context.output !== reverseView.forwardText) {
+ setReverseView({
+ active: false,
+ forwardText: context.output,
+ preview: undefined
+ })
+ }
+ }, [context.output, reverseView.forwardText])
+
+ const displayText = reverseView.active ? reverseView.preview : context.output
+ const hasOutput = Boolean(context.output)
+
+ return (
+ <Paper elevation={0} sx={{ p: 3, backgroundColor: 'background.paper' }}>
+ <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+ <Typography variant="h6" component="h2">
+ Output
+ </Typography>
+ <Box sx={{ flex: 1 }} />
+
+ {hasOutput && context.sourceLang && (
+ <Button
+ size="small"
+ variant="outlined"
+ startIcon={<SwapHoriz />}
+ onClick={handleReverse}
+ title={
+ reverseView.active
+ ? 'Show translation'
+ : `Show in original (${toLanguageName(context.sourceLang)})`
+ }
+ data-testid="reverse-translation-button"
+ sx={{ mr: 1 }}
+ >
+ {reverseView.active
+ ? 'Translation'
+ : `Original`}
+ </Button>
+ )}
+
+ <ImproveButton disabled={!hasOutput || loading.improve} />
+ </Box>
+
+ <Box
+ sx={{
+ minHeight: '120px',
+ maxHeight: '400px',
+ overflowY: 'auto',
+ p: 1.5,
+ backgroundColor: 'background.default',
+ borderRadius: 1,
+ border: '1px solid',
+ borderColor: 'divider',
+ fontSize: '1rem',
+ lineHeight: 1.5,
+ }}
+ aria-live="polite"
+ data-testid="translation-output"
+ >
+ <Fade in={hasOutput} timeout={300}>
+ <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap' }}>
+ {displayText || 'No output yet'}
+ </Typography>
+ </Fade>
+ </Box>
+
+ {context.sourceLang && hasOutput && (
+ <Typography className="detected-lang" variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+ Translated from {toLanguageName(context.sourceLang)}
+ </Typography>
+ )}
+ </Paper>
+ )
+}
+
+interface ImproveButtonProps {
+ disabled: boolean
+}
+
+function ImproveButton({ disabled }: ImproveButtonProps) {
+ const { loading } = useTranslation()
+
+ return (
+ <Button
+ variant="outlined"
+ disabled={disabled}
+ onClick={() => {
+ // Dispatch event to open improve modal
+ window.dispatchEvent(new CustomEvent('openImproveModal'))
+ }}
+ data-testid="improve-button"
+ startIcon={loading.improve ? <CircularProgress size={16} /> : null}
+ >
+ {loading.improve ? 'Improving…' : 'Improve'}
+ </Button>
+ )
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| LanguageSelector.tsx | +
+
+ |
+ 87.31% | +179/205 | +78.94% | +15/19 | +33.33% | +3/9 | +87.31% | +179/205 | +
| ModalsContainer.tsx | +
+
+ |
+ 83.63% | +92/110 | +66.66% | +6/9 | +33.33% | +3/9 | +83.63% | +92/110 | +
| TranslationComposer.tsx | +
+
+ |
+ 48.68% | +74/152 | +66.66% | +4/6 | +33.33% | +3/9 | +48.68% | +74/152 | +
| TranslationHistory.tsx | +
+
+ |
+ 35.6% | +47/132 | +75% | +6/8 | +20% | +1/5 | +35.6% | +47/132 | +
| TranslationOutput.tsx | +
+
+ |
+ 77.14% | +81/105 | +66.66% | +10/15 | +50% | +2/4 | +77.14% | +81/105 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 | 1x + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + +1x +57x +57x +29x +29x +29x +29x +29x +29x +29x +57x +8x +57x +7x +57x +3x +57x +2x +2x +2x +2x +57x +4x +4x +4x +4x +57x +3x +57x +1x +57x +57x + + + + + + + +1x + + + + + + +1x +5x + +5x +5x +5x +5x + +5x + + +1x +48x +48x + + +48x +48x + | import React, { createContext, useContext, useReducer, ReactNode } from 'react'
+import { TranslationState, TranslationContext as TContext, HistoryItem } from '../types/translation'
+
+// Define action types
+export type TranslationAction =
+ | { type: 'SET_LOADING'; payload: { type: keyof TranslationState['loading']; value: boolean } }
+ | { type: 'SET_LOADING_TARGET'; payload: string | null }
+ | { type: 'SET_ERROR'; payload: string | null }
+ | { type: 'SET_TRANSLATION_CONTEXT'; payload: TContext }
+ | { type: 'SET_OUTPUT'; payload: string }
+ | { type: 'ADD_HISTORY_ITEM'; payload: HistoryItem }
+ | { type: 'RESET_HISTORY' }
+
+// Initial state
+const initialState: TranslationState = {
+ context: {
+ contextId: null,
+ output: '',
+ sourceLang: '',
+ targetLang: ''
+ },
+ history: [],
+ loading: {
+ translate: false,
+ improve: false,
+ languageDetection: false
+ },
+ loadingTarget: null,
+ error: null
+}
+
+// Reducer
+export function translationReducer(state: TranslationState, action: TranslationAction): TranslationState {
+ switch (action.type) {
+ case 'SET_LOADING':
+ return {
+ ...state,
+ loading: {
+ ...state.loading,
+ [action.payload.type]: action.payload.value
+ }
+ }
+ case 'SET_LOADING_TARGET':
+ return { ...state, loadingTarget: action.payload }
+ case 'SET_ERROR':
+ return { ...state, error: action.payload }
+ case 'SET_TRANSLATION_CONTEXT':
+ return { ...state, context: action.payload }
+ case 'SET_OUTPUT':
+ return {
+ ...state,
+ context: { ...state.context, output: action.payload }
+ }
+ case 'ADD_HISTORY_ITEM':
+ return {
+ ...state,
+ history: [...state.history, action.payload]
+ }
+ case 'RESET_HISTORY':
+ return { ...state, history: [] }
+ default:
+ return state
+ }
+}
+
+// Context
+interface TranslationContextValue {
+ state: TranslationState
+ dispatch: React.Dispatch<TranslationAction>
+}
+
+export const TranslationContext = createContext<TranslationContextValue | null>(null)
+
+// Provider component
+interface TranslationProviderProps {
+ children: ReactNode
+}
+
+export function TranslationProvider({ children }: TranslationProviderProps) {
+ const [state, dispatch] = useReducer(translationReducer, initialState)
+
+ return (
+ <TranslationContext.Provider value={{ state, dispatch }}>
+ {children}
+ </TranslationContext.Provider>
+ )
+}
+
+// Hook to use translation context
+export function useTranslationContext() {
+ const context = useContext(TranslationContext)
+ if (!context) {
+ throw new Error('useTranslationContext must be used within a TranslationProvider')
+ }
+ return context
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| TranslationContext.tsx | +
+
+ |
+ 96.87% | +62/64 | +91.66% | +11/12 | +100% | +3/3 | +96.87% | +62/64 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| useLanguageDetection.ts | +
+
+ |
+ 100% | +42/42 | +92.3% | +12/13 | +100% | +1/1 | +100% | +42/42 | +
| useTranslation.ts | +
+
+ |
+ 100% | +89/89 | +73.68% | +14/19 | +100% | +1/1 | +100% | +89/89 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 | 1x + + + +1x + +1x +21x +21x + +21x +9x +1x +1x +1x +1x + +8x +8x +8x +6x + + +6x +9x +2x +2x +2x +9x +8x +8x +21x + +21x +2x +1x +2x + +2x +21x + + +21x +11x +11x +11x +11x +21x + +21x +21x +21x +21x +21x +21x + | import { useState, useEffect, useCallback } from 'react'
+import { useTranslationContext } from '../context/TranslationContext'
+import { identifyLanguage } from '../api'
+
+const LANGUAGE_DETECTION_DELAY = 1000 // ms
+
+export function useLanguageDetection() {
+ const { dispatch } = useTranslationContext()
+ const [sourceLang, setSourceLang] = useState<string>('')
+
+ const detectLanguage = useCallback(async (text: string, currentTargetLang?: string) => {
+ if (!text.trim()) {
+ setSourceLang('')
+ dispatch({ type: 'SET_LOADING', payload: { type: 'languageDetection', value: false } })
+ return
+ }
+
+ try {
+ dispatch({ type: 'SET_LOADING', payload: { type: 'languageDetection', value: true } })
+ const response = await identifyLanguage({ source: text.trim() })
+ setSourceLang(response.lang)
+
+ // Return detected language for potential auto-switching logic
+ return response.lang
+ } catch (err) {
+ console.error('Language identification failed:', err)
+ setSourceLang('')
+ return null
+ } finally {
+ dispatch({ type: 'SET_LOADING', payload: { type: 'languageDetection', value: false } })
+ }
+ }, [dispatch])
+
+ const detectLanguageDebounced = useCallback((text: string, currentTargetLang?: string) => {
+ const timeoutId = setTimeout(() => {
+ detectLanguage(text, currentTargetLang)
+ }, LANGUAGE_DETECTION_DELAY)
+
+ return () => clearTimeout(timeoutId)
+ }, [detectLanguage])
+
+ // Clear source language when text is empty
+ useEffect(() => {
+ return () => {
+ setSourceLang('')
+ dispatch({ type: 'SET_LOADING', payload: { type: 'languageDetection', value: false } })
+ }
+ }, [dispatch])
+
+ return {
+ sourceLang,
+ detectLanguageDebounced,
+ detectLanguage
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 | 1x + + + + + + + + + + + +1x +17x + +17x +4x +1x +1x +1x + +3x +3x +3x + +3x +3x +3x + +2x +2x +2x +2x +2x +4x +4x +4x +4x + +4x +4x +4x +4x +4x + +4x +4x + +4x +4x +1x +1x +1x +4x +3x +3x +3x +17x + +17x +3x +1x +1x + +2x + +2x +2x +2x +2x +2x +2x + +1x + +1x +1x +1x +1x +1x +1x + +1x + +1x +1x +1x +1x +1x +3x +2x +2x +17x + +17x +2x +2x +2x +1x +1x +1x +1x +1x +17x + +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x +17x + | import { useCallback } from 'react'
+import { useTranslationContext } from '../context/TranslationContext'
+import {
+ startTranslation,
+ improveTranslation,
+ previewTranslation,
+ type StartRequest,
+ type ImproveRequest,
+ type PreviewRequest
+} from '../api'
+import { HistoryItem } from '../types/translation'
+
+export function useTranslation() {
+ const { state, dispatch } = useTranslationContext()
+
+ const translate = useCallback(async (source: string, targetLang: string) => {
+ if (!source.trim()) {
+ dispatch({ type: 'SET_ERROR', payload: 'Please enter a message to translate' })
+ return
+ }
+
+ dispatch({ type: 'SET_LOADING', payload: { type: 'translate', value: true } })
+ dispatch({ type: 'SET_LOADING_TARGET', payload: targetLang })
+ dispatch({ type: 'SET_ERROR', payload: null })
+
+ try {
+ const request: StartRequest = { source: source.trim(), lang: targetLang }
+ const response = await startTranslation(request)
+
+ dispatch({
+ type: 'SET_TRANSLATION_CONTEXT',
+ payload: {
+ contextId: response.contextId,
+ output: response.result,
+ sourceLang: response.sourceLang || '',
+ targetLang
+ }
+ })
+
+ const historyItem: HistoryItem = {
+ kind: 'initial',
+ text: response.result,
+ at: Date.now()
+ }
+
+ dispatch({ type: 'RESET_HISTORY' })
+ dispatch({ type: 'ADD_HISTORY_ITEM', payload: historyItem })
+
+ return response.result
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'Translation failed'
+ dispatch({ type: 'SET_ERROR', payload: message })
+ throw err
+ } finally {
+ dispatch({ type: 'SET_LOADING', payload: { type: 'translate', value: false } })
+ dispatch({ type: 'SET_LOADING_TARGET', payload: null })
+ }
+ }, [dispatch])
+
+ const improve = useCallback(async (feedback: string) => {
+ if (!state.context.contextId) {
+ throw new Error('No active translation context')
+ }
+
+ dispatch({ type: 'SET_LOADING', payload: { type: 'improve', value: true } })
+
+ try {
+ const request: ImproveRequest = {
+ contextId: state.context.contextId,
+ feedback: feedback.trim()
+ }
+ const response = await improveTranslation(request)
+
+ dispatch({ type: 'SET_OUTPUT', payload: response.result })
+
+ const historyItem: HistoryItem = {
+ kind: 'improve',
+ feedback: feedback.trim(),
+ text: response.result,
+ at: Date.now()
+ }
+
+ dispatch({ type: 'ADD_HISTORY_ITEM', payload: historyItem })
+
+ return response.result
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'Improvement failed'
+ dispatch({ type: 'SET_ERROR', payload: message })
+ throw err
+ } finally {
+ dispatch({ type: 'SET_LOADING', payload: { type: 'improve', value: false } })
+ }
+ }, [state.context.contextId, dispatch])
+
+ const preview = useCallback(async (source: string, targetLang: string) => {
+ try {
+ const request: PreviewRequest = { source, lang: targetLang }
+ const response = await previewTranslation(request)
+ return response.result
+ } catch (err) {
+ console.error('Preview failed:', err)
+ throw err
+ }
+ }, [])
+
+ return {
+ translate,
+ improve,
+ preview,
+ context: state.context,
+ history: state.history,
+ loading: state.loading,
+ loadingTarget: state.loadingTarget,
+ error: state.error
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.tsx | +
+
+ |
+ 0% | +0/132 | +0% | +0/1 | +0% | +0/1 | +0% | +0/132 | +
| LanguageButtons.tsx | +
+
+ |
+ 100% | +11/11 | +100% | +1/1 | +100% | +1/1 | +100% | +11/11 | +
| api.ts | +
+
+ |
+ 78.18% | +43/55 | +76.92% | +10/13 | +77.77% | +7/9 | +78.18% | +43/55 | +
| theme.ts | +
+
+ |
+ 0% | +0/297 | +0% | +0/1 | +0% | +0/1 | +0% | +0/297 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // theme.ts +import { createTheme } from '@mui/material/styles' + +const charsSvg = ` +<svg xmlns="http://www.w3.org/2000/svg" width="900" height="500" viewBox="0 0 900 500"> + <defs> + <!-- 45° gradient: top-left (0%) -> bottom-right (100%) --> + <linearGradient id="langGradient" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0%" stop-color="#0f172a" stop-opacity="0" /> + <stop offset="35%" stop-color="#2563eb" stop-opacity="0.35" /> + <stop offset="65%" stop-color="#7c3aed" stop-opacity="0.4" /> + <stop offset="100%" stop-color="#22c55e" stop-opacity="0.45" /> + </linearGradient> + </defs> + + <!-- Shift whole cluster down so it occupies bottom ~quarter of page --> + <g transform="translate(0,220)"> + <g transform="rotate(-18 120 80)"> + <text x="60" y="110" font-family="system-ui, sans-serif" font-size="120" + fill="url(#langGradient)" fill-opacity="0.9">漢</text> + </g> + + <g transform="rotate(9 260 120)"> + <text x="210" y="130" font-family="system-ui, sans-serif" font-size="170" + fill="url(#langGradient)" fill-opacity="0.75">あ</text> + </g> + + <g transform="rotate(-5 420 140)"> + <text x="370" y="155" font-family="system-ui, sans-serif" font-size="140" + fill="url(#langGradient)" fill-opacity="0.85">Б</text> + </g> + + <g transform="rotate(14 580 160)"> + <text x="540" y="175" font-family="system-ui, sans-serif" font-size="130" + fill="url(#langGradient)" fill-opacity="0.8">अ</text> + </g> + + <g transform="rotate(-11 720 190)"> + <text x="690" y="200" font-family="system-ui, sans-serif" font-size="150" + fill="url(#langGradient)" fill-opacity="0.8">ñ</text> + </g> + + <g transform="rotate(6 840 210)"> + <text x="820" y="215" font-family="system-ui, sans-serif" font-size="110" + fill="url(#langGradient)" fill-opacity="0.7">ج</text> + </g> + + <!-- a couple of faint background glyphs for extra randomness --> + <g transform="rotate(-24 320 210)"> + <text x="280" y="230" font-family="system-ui, sans-serif" font-size="190" + fill="url(#langGradient)" fill-opacity="0.25">文</text> + </g> + + <g transform="rotate(21 640 230)"> + <text x="610" y="245" font-family="system-ui, sans-serif" font-size="200" + fill="url(#langGradient)" fill-opacity="0.22">字</text> + </g> + </g> +</svg> +` +const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(charsSvg)}` + +const NAVY = '#020617' // page / deep background +const PANEL = '#020617' // cards +const PANEL_SOFT = '#020617' // inner areas + +const BLUE = '#2563eb' // from logo +const PURPLE = '#7c3aed' // from logo +const GREEN = '#22c55e' // from logo + +const theme = createTheme({ + palette: { + mode: 'dark', + background: { + default: NAVY, // used by Boxes with bgcolor="background.default" + paper: PANEL, // used by Paper/Card + }, + text: { + primary: '#e5e7eb', + secondary: '#9ca3af', + }, + primary: { + main: BLUE, + }, + secondary: { + main: GREEN, + }, + divider: 'rgba(148, 163, 184, 0.35)', + error: { + main: '#ef4444', + }, + }, + typography: { + fontFamily: + 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', + fontSize: 16, + h4: { + fontWeight: 600, + letterSpacing: 0.01, + }, + h6: { + fontWeight: 600, + fontSize: '1.02rem', + }, + body1: { + fontSize: '0.95rem', + lineHeight: 1.6, + }, + button: { + textTransform: 'none', + fontWeight: 500, + letterSpacing: 0.02, + }, + }, + shape: { + borderRadius: 18, + }, + components: { + // Global body background + MuiCssBaseline: { + styleOverrides: { + body: { + margin: 0, + minHeight: '100vh', + // SVG on top, gradient underneath + backgroundImage: [ + `url("${svgDataUrl}")`, + 'radial-gradient(circle at 0% 0%, #111827 0, #020617 40%, #000000 100%)', + ].join(','), + backgroundRepeat: 'no-repeat, no-repeat', + // Desktop: bottom-right bias + backgroundPosition: 'right 30% bottom 10%, center', + backgroundSize: 'auto 80vh, cover', + backgroundAttachment: 'fixed, fixed', + color: '#e5e7eb', + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + + // Mobile tweaks + '@media (max-width:600px)': { + // Center horizontally, push slightly below bottom so letters start ~middle + backgroundPosition: 'center bottom 10%, center', + // Make the SVG wider than the viewport so some part is always visible + backgroundSize: '120vw auto, cover', + // Avoid mobile "fixed background" bugs + backgroundAttachment: 'scroll, scroll', + }, + }, + }, + }, + + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: 'transparent', + boxShadow: 'none', + borderBottom: '1px solid rgba(15,23,42,0.9)', + backdropFilter: 'blur(6px) saturate(1.1)', + }, + }, + }, + MuiToolbar: { + styleOverrides: { + root: { + minHeight: 56, + paddingInline: 16, + gap: 16, + }, + }, + }, + + // Cards / panels (Input, Output, context history bar) + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: PANEL, + backgroundImage: 'none', + borderRadius: 24, + border: '1px solid rgba(15,23,42,0.9)', + boxShadow: + '0 24px 80px rgba(15,23,42,0.85), 0 0 0 1px rgba(15,23,42,0.85)', + }, + }, + }, + MuiCard: { + defaultProps: { + elevation: 0, + }, + styleOverrides: { + root: { + backgroundColor: PANEL, + borderRadius: 24, + border: '1px solid rgba(15,23,42,0.9)', + }, + }, + }, + + // Buttons (Original / Improve, etc.) + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: { + root: { + borderRadius: 999, + paddingInline: 16, + }, + containedPrimary: { + background: + 'linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #22c55e 100%)', + color: '#f9fafb', + '&:hover': { + background: + 'linear-gradient(135deg, #1d4ed8 0%, #6d28d9 45%, #16a34a 100%)', + }, + }, + outlinedPrimary: { + borderColor: 'rgba(148, 163, 184, 0.7)', + color: '#e5e7eb', + backgroundColor: 'rgba(15,23,42,0.9)', + '&:hover': { + borderColor: BLUE, + backgroundColor: 'rgba(37,99,235,0.16)', + }, + }, + }, + }, + + // Language chips / pills + MuiChip: { + styleOverrides: { + root: { + borderRadius: 999, + backgroundColor: PANEL_SOFT, + border: '1px solid rgba(148,163,184,0.45)', + color: '#e5e7eb', + fontSize: '0.85rem', + }, + clickable: { + '&:hover': { + backgroundColor: 'rgba(37,99,235,0.18)', + borderColor: BLUE, + }, + }, + colorPrimary: { + background: + 'linear-gradient(135deg, rgba(37,99,235,0.95), rgba(124,58,237,0.9))', + borderColor: 'transparent', + color: '#f9fafb', + }, + }, + }, + + // Text fields for input *and* output areas + MuiTextField: { + defaultProps: { + variant: 'outlined', + fullWidth: true, + }, + styleOverrides: { + root: { + '& .MuiOutlinedInput-root': { + backgroundColor: PANEL_SOFT, + borderRadius: 18, + '& fieldset': { + borderColor: 'rgba(55,65,81,0.9)', + }, + '&:hover fieldset': { + borderColor: 'rgba(148,163,184,0.9)', + }, + '&.Mui-focused fieldset': { + borderColor: BLUE, + boxShadow: '0 0 0 1px rgba(37,99,235,0.7)', + }, + }, + '& .MuiInputBase-input': { + color: '#e5e7eb', + fontSize: '0.98rem', + }, + '& .MuiInputBase-input::placeholder': { + color: '#6b7280', + opacity: 1, + }, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + color: '#e5e7eb', + }, + multiline: { + padding: '14px 16px', + }, + }, + }, + + // Labels / helper text under Output + MuiFormLabel: { + styleOverrides: { + root: { + color: '#9ca3af', + '&.Mui-focused': { + color: BLUE, + }, + }, + }, + }, + + // Menu used for the “More” languages dropdown + MuiMenu: { + styleOverrides: { + paper: { + backgroundColor: PANEL_SOFT, + borderRadius: 16, + border: '1px solid rgba(31,41,55,0.9)', + boxShadow: '0 20px 60px rgba(0,0,0,0.75)', + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + fontSize: '0.95rem', + '&:hover': { + backgroundColor: 'rgba(37,99,235,0.18)', + }, + }, + }, + }, + + // Accordion-ish “Show context history” + MuiAccordion: { + styleOverrides: { + root: { + backgroundColor: PANEL, + borderRadius: 999, + border: '1px solid rgba(31,41,55,0.9)', + boxShadow: 'none', + marginTop: 16, + '&:before': {display: 'none'}, + + '&:hover': { + borderColor: 'transparent', + boxShadow: '0 0 0 1px rgba(15,23,42,0.9)', + backgroundImage: + 'linear-gradient(135deg, rgba(37,99,235,0.16), rgba(124,58,237,0.18), rgba(34,197,94,0.12))', + }, + + '&.Mui-expanded': { + margin: '16px 0 8px', + backgroundImage: + 'linear-gradient(135deg, rgba(37,99,235,0.22), rgba(124,58,237,0.25), rgba(34,197,94,0.18))', + borderColor: 'rgba(59,130,246,0.7)', + }, + }, + }, + }, + + MuiAccordionSummary: { + styleOverrides: { + root: { + paddingInline: 20, + minHeight: 52, + '& .MuiAccordionSummary-content': { + margin: 0, + display: 'flex', + alignItems: 'center', + gap: 12, + }, + }, + }, + }, + + MuiAccordionDetails: { + styleOverrides: { + root: { + padding: '8px 20px 16px', + }, + }, + }, + } +}) + +export default theme |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| translation.ts | +
+
+ |
+ 0% | +0/0 | +0% | +1/1 | +0% | +1/1 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // Core domain types for translation functionality
+
+export interface Message {
+ id: string
+ text: string
+}
+
+export interface TranslationContext {
+ contextId: string | null
+ output: string
+ sourceLang: string
+ targetLang: string
+}
+
+export interface HistoryItem {
+ kind: 'initial' | 'improve'
+ text: string
+ at: number
+ feedback?: string
+}
+
+export interface ReverseView {
+ active: boolean
+ forwardText: string
+ preview?: string
+}
+
+export interface Language {
+ code: string
+ label: string
+}
+
+export interface TranslationState {
+ context: TranslationContext
+ history: HistoryItem[]
+ loading: {
+ translate: boolean
+ improve: boolean
+ languageDetection: boolean
+ }
+ loadingTarget: string | null
+ error: string | null
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | 1x + + +1x +108x +108x + +108x + +108x +108x +108x +108x + +108x +108x + | import twemoji from 'twemoji'
+import { getPrimaryLang, LANGUAGE_TO_COUNTRY } from '../utils/languages'
+
+export function getFlagSvgUrl(languageCode: string): string | null {
+ const lang = getPrimaryLang(languageCode)
+ const countryCode = LANGUAGE_TO_COUNTRY[lang] || lang.toUpperCase()
+
+ if (!countryCode || countryCode.length !== 2) return null
+
+ const codePoints = [...countryCode].map(c => 127397 + c.charCodeAt(0))
+ const emoji = String.fromCodePoint(...codePoints)
+ const parsed = twemoji.parse(emoji, { folder: 'svg', ext: '.svg' })
+ const match = /src="([^"]+)"/.exec(parsed)
+
+ return match ? match[1] : null
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | +1x +12157x + +12157x +12157x +376867x +376867x +376867x +376867x +376867x +12157x +12157x + + + + + + + + +12157x +7597x +7597x + +12157x +12157x + + | // Utility function for generating UUIDs that are safe for DOM element IDs
+export function generateId(): string {
+ let id: string;
+
+ if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+ id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+ const array = new Uint32Array(1);
+ crypto.getRandomValues(array);
+ const r = array[0] % 16;
+ const v = c === 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ });
+ } else {
+ // Fallback: Math.random (not cryptographically secure)
+ id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c: string) {
+ var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ });
+ }
+
+ // Ensure the ID starts with a letter for DOM compatibility
+ if (!/^[a-zA-Z]/.test(id)) {
+ id = 'id-' + id;
+ }
+
+ return id;
+}
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| flags.ts | +
+
+ |
+ 100% | +11/11 | +40% | +2/5 | +100% | +1/1 | +100% | +11/11 | +
| id.ts | +
+
+ |
+ 76.19% | +16/21 | +83.33% | +5/6 | +100% | +1/1 | +76.19% | +16/21 | +
| languages.ts | +
+
+ |
+ 100% | +66/66 | +85.71% | +6/7 | +100% | +3/3 | +100% | +66/66 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 | + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +22x +22x + +1x +300x +300x + +1x +18x + +12x +12x +12x + | import { Language } from '../types/translation'
+
+export const COMMON_LANGUAGES: Language[] = [
+ { code: 'ja', label: 'Japanese' },
+ { code: 'en', label: 'English' },
+ { code: 'pt', label: 'Portuguese' },
+ { code: 'es', label: 'Spanish' },
+ { code: 'de', label: 'German' },
+ { code: 'fr', label: 'French' },
+ { code: 'it', label: 'Italian' },
+ { code: 'zh', label: 'Chinese (zh)' },
+ { code: 'ko', label: 'Korean' },
+ { code: 'ru', label: 'Russian' },
+ { code: 'ar', label: 'Arabic' },
+ { code: 'hi', label: 'Hindi' },
+ { code: 'nl', label: 'Dutch' },
+ { code: 'sv', label: 'Swedish' },
+ { code: 'tr', label: 'Turkish' },
+]
+
+export const LANGUAGE_NAMES: Record<string, string> = {
+ 'en': 'English',
+ 'en-US': 'American English',
+ 'ja': 'Japanese',
+ 'ja-JP': 'Japanese',
+ 'es': 'Spanish',
+ 'es-ES': 'Spanish',
+ 'de': 'German',
+ 'de-DE': 'German',
+ 'fr': 'French',
+ 'it': 'Italian',
+ 'pt': 'Portuguese',
+ 'zh': 'Chinese',
+ 'ko': 'Korean',
+ 'ru': 'Russian',
+ 'ar': 'Arabic',
+ 'hi': 'Hindi',
+ 'nl': 'Dutch',
+ 'sv': 'Swedish',
+ 'tr': 'Turkish'
+}
+
+export const LANGUAGE_TO_COUNTRY: Record<string, string> = {
+ en: 'GB',
+ ja: 'JP',
+ es: 'ES',
+ de: 'DE',
+ fr: 'FR',
+ it: 'IT',
+ zh: 'CN',
+ ko: 'KR',
+ pt: 'PT',
+ ru: 'RU',
+ ar: 'SA',
+ hi: 'IN',
+ nl: 'NL',
+ sv: 'SE',
+ tr: 'TR'
+}
+
+export function toLanguageName(langTag: string): string {
+ return LANGUAGE_NAMES[langTag] || langTag
+}
+
+export function getPrimaryLang(code: string): string {
+ return code.split('-')[0].toLowerCase()
+}
+
+export function getAvailableLanguages(excludeLang?: string): Language[] {
+ if (!excludeLang) return COMMON_LANGUAGES
+
+ const exclude = getPrimaryLang(excludeLang)
+ return COMMON_LANGUAGES.filter(l => getPrimaryLang(l.code) !== exclude)
+}
+ |