Translate bio button (#1432)

* Translation button finished

* Fix bug in theme

* revert cause some stuff broke

* "Translated by Google" text

* Translate that too

* I am very stupid sorry

* Add API Key

* Make toggle work, oops

* Fix merge issues

* Fixed as requested

* Change translation icon

* Return settings back (oops)

* Beep

* Boop

* Delete import again as the icon has been replaced with a better one

* Change text

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -137,6 +137,20 @@
                 }}</el-button>
             </div>
         </div>
+        <div class="options-container">
+            <span class="header">{{ t('view.settings.advanced.advanced.translation_api.header') }}</span>
+            <simple-switch
+                :label="t('view.settings.advanced.advanced.translation_api.enable')"
+                :value="translationApi"
+                :tooltip="t('view.settings.advanced.advanced.translation_api.enable_tooltip')"
+                :long-label="true"
+                @change="changeTranslationAPI('VRCX_translationAPI')" />
+            <div class="options-container-item">
+                <el-button size="small" :icon="CaretRight" @click="showTranslationApiDialog">{{
+                    t('view.settings.advanced.advanced.translation_api.translation_api_key')
+                }}</el-button>
+            </div>
+        </div>
         <div class="options-container">
             <span class="header">{{ t('view.settings.advanced.advanced.video_progress_pie.header') }}</span>
             <simple-switch
@@ -323,6 +337,7 @@
 
         <RegistryBackupDialog />
         <YouTubeApiDialog v-model:isYouTubeApiDialogVisible="isYouTubeApiDialogVisible" />
+        <TranslationApiDialog v-model:isTranslationApiDialogVisible="isTranslationApiDialogVisible" />
         <AvatarProviderDialog v-model:isAvatarProviderDialogVisible="isAvatarProviderDialogVisible" />
         <PhotonSettings v-if="photonLoggingEnabled" />
     </div>
@@ -368,6 +383,7 @@
     import PhotonSettings from '../PhotonSettings.vue';
     import RegistryBackupDialog from '../../dialogs/RegistryBackupDialog.vue';
     import SimpleSwitch from '../SimpleSwitch.vue';
+    import TranslationApiDialog from '../../dialogs/TranslationApiDialog.vue';
     import YouTubeApiDialog from '../../dialogs/YouTubeApiDialog.vue';
 
     const { t } = useI18n();
@@ -400,6 +416,7 @@
         enableAppLauncherAutoClose,
         enableAppLauncherRunProcessOnce,
         youTubeApi,
+        translationApi,
         progressPie,
         progressPieFilter,
         showConfirmationOnSwitchAvatar,
@@ -428,6 +445,7 @@
     const { showAvatarProviderDialog } = useAvatarProviderStore();
 
     const isYouTubeApiDialogVisible = ref(false);
+    const isTranslationApiDialogVisible = ref(false);
 
     const cacheSize = reactive({
         cachedUsers: 0,
@@ -496,6 +514,10 @@
         isYouTubeApiDialogVisible.value = true;
     }
 
+    function showTranslationApiDialog() {
+        isTranslationApiDialogVisible.value = true;
+    }
+
     function refreshCacheSize() {
         cacheSize.cachedUsers = cachedUsers.size;
         cacheSize.cachedWorlds = cachedWorlds.size;
@@ -516,4 +538,10 @@
         updateVRLastLocation();
         updateOpenVR();
     }
+
+    async function changeTranslationAPI(configKey = '') {
+        if (configKey === 'VRCX_translationAPI') {
+            advancedSettingsStore.setTranslationApi();
+        }
+    }
 </script>

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -0,0 +1,115 @@
+<template>
+    <el-dialog
+        class="x-dialog"
+        :model-value="isTranslationApiDialogVisible"
+        :title="t('dialog.translation_api.header')"
+        width="400px"
+        @close="closeDialog">
+        <div class="options-container-item">
+            <span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
+            <el-dropdown trigger="click" size="small" @click.stop>
+                <el-button size="small">
+                    <span>
+                        {{ messages[bioLanguage]?.language || bioLanguage }}
+                        <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                    </span>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            v-for="(obj, language) in messages"
+                            :key="language"
+                            @click="setBioLanguage(language)"
+                            v-text="obj.language" />
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+        <div style="font-size: 12px">{{ t('dialog.translation_api.description') }} <br /></div>
+
+        <el-input
+            v-model="translationApiKey"
+            type="textarea"
+            :placeholder="t('dialog.translation_api.placeholder')"
+            maxlength="39"
+            show-word-limit
+            style="display: block; margin-top: 10px">
+        </el-input>
+
+        <template #footer>
+            <div style="display: flex">
+                <el-button
+                    @click="
+                        openExternalLink(
+                            'https://translatepress.com/docs/automatic-translation/generate-google-api-key/'
+                        )
+                    ">
+                    {{ t('dialog.translation_api.guide') }}
+                </el-button>
+                <el-button type="primary" style="margin-left: auto" @click="testTranslationApiKey">
+                    {{ t('dialog.translation_api.save') }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+    import { ArrowDown } from '@element-plus/icons-vue';
+    import { ElMessage } from 'element-plus';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import { openExternalLink } from '../../../shared/utils';
+    import { useAdvancedSettingsStore } from '../../../stores';
+
+    const advancedSettingsStore = useAdvancedSettingsStore();
+
+    const { bioLanguage, translationApiKey } = storeToRefs(advancedSettingsStore);
+
+    const { setBioLanguage, translateText, setTranslationApiKey } = advancedSettingsStore;
+
+    const { messages, t } = useI18n();
+
+    defineProps({
+        isTranslationApiDialogVisible: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const emit = defineEmits(['update:isTranslationApiDialogVisible']);
+
+    async function testTranslationApiKey() {
+        const previousKey = translationApiKey.value;
+        if (!translationApiKey.value) {
+            ElMessage({
+                message: 'Translation API key removed',
+                type: 'success'
+            });
+            closeDialog();
+            return;
+        }
+
+        const testText = 'Hello world';
+        const data = await translateText(testText, 'fr');
+        if (!data) {
+            setTranslationApiKey(previousKey);
+            ElMessage({
+                message: 'Invalid Translation API key',
+                type: 'error'
+            });
+        } else {
+            setTranslationApiKey(translationApiKey.value);
+            ElMessage({
+                message: 'Translation API key valid!',
+                type: 'success'
+            });
+            closeDialog();
+        }
+    }
+
+    function closeDialog() {
+        emit('update:isTranslationApiDialogVisible', false);
+    }
+</script>