Add UI language selection feature

wandb · Jun 26, 2024 · 7ed3c18 · 7ed3c18
1 parent 6dd35e8
commit 7ed3c18
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
@@ -43,6 +43,7 @@ import {
 	temperatureAtom
 } from 'state'
 import { Textarea } from './ui/textarea'
+import i18n from 'i18next'
 
 function slugToNiceName(slug?: string, float = true) {
 	if (slug) {
@@ -315,22 +316,27 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 							</SelectContent>
 						</Select>
 					</div>
-					{/* <div className='grid grid-cols-8 items-center gap-4'>
-						<Label className='col-span-2 text-right' htmlFor='beast'>
-							Agent Mode
+					<div className='grid grid-cols-8 items-center gap-4'>
+						<Label className='col-span-2 text-right' htmlFor='language'>
+							Language
 						</Label>
-						<Switch
-							className='-zoom-1 col-span-1'
-							name='beast'
-							disabled
-							checked={beastMode}
-							onCheckedChange={checked => setBeastMode(checked)}
-						/>
-						<div className='-ml-15 col-span-5 text-xs italic'>
-							Coming soon! Agent mode will make multiple calls to an LLM with
-							vision capabilities to iterate on a design.
-						</div>
-						</div> */}
+						<Select
+							value={i18n.language}
+							name='language'
+							onValueChange={val => {
+								i18n.changeLanguage(val)
+							}}
+						>
+							<SelectTrigger className='min-w-[200px]'>
+								<SelectValue placeholder='Select Language' />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value='en'>English</SelectItem>
+								<SelectItem value='ja'>Japanese</SelectItem>
+								<SelectItem value='kr'>Korean</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
 					<div className='mt-3 grid grid-cols-4 items-center gap-4'>
 						<div className='col-start-4 flex justify-end'>
 							<Button

diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
@@ -10,26 +10,37 @@ i18n
 			en: {
 				translation: {
 					'Chat Header': "Describe the UI you'd like to generate.",
-					'Pro Tip': 'Pro Tip: You can drag or paste a reference screenshot.'
+					'Pro Tip': 'Pro Tip: You can drag or paste a reference screenshot.',
+					'Language Selection': 'Select your preferred language',
+					'Language Updated': 'Language has been updated successfully'
 				}
 			},
 			ja: {
 				translation: {
 					'Chat Header': '生成したい UI について説明してください。',
 					'Pro Tip':
-						'ヒント: 参照したいスクリーンショットをドラッグ&ドロップできます。'
+						'ヒント: 参照したいスクリーンショットをドラッグ&ドロップできます。',
+					'Language Selection': '希望の言語を選択してください',
+					'Language Updated': '言語が正常に更新されました'
 				}
 			},
 			kr: {
 				translation: {
 					'Chat Header': '생성하고 싶은 UI에 대해 설명해주세요.',
-					'Pro Tip': '힌트: 참조 스크린샷을 끌어다 붙여넣을 수 있습니다.'
+					'Pro Tip':
+						'프로 팁: 참조 스크린샷을 드래그 또는 붙여넣기할 수 있습니다.',
+					'Language Selection': '선호하는 언어를 선택하세요',
+					'Language Updated': '언어가 성공적으로 업데이트되었습니다'
 				}
 			}
 		},
 		fallbackLng: 'en',
 		interpolation: {
 			escapeValue: false
+		},
+		detection: {
+			order: ['localStorage', 'navigator'],
+			caches: ['localStorage']
 		}
 	})
 	// eslint-disable-next-line unicorn/prefer-top-level-await