Initialized translations

.eslintrc-auto-import.json

@@ -294,6 +294,7 @@
     "watchWithFilter": true,
     "whenever": true,
     "toValue": true,
+    "useI18n": true,
     "afterAll": true,
     "afterEach": true,
     "assert": true,

.github/workflows/build.yml

@@ -21,6 +21,8 @@ jobs:
         node-version: 16
     - name: Install dependencies
       run: npm ci
+    - name: Check translations
+      run: npm run i18n
     - name: Build static files
       run: npm run build --if-present
     - name: Zip Release

auto-imports.d.ts

@@ -193,6 +193,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     ListboxButton: typeof import('@headlessui/vue')['ListboxButton']
     ListboxOption: typeof import('@headlessui/vue')['ListboxOption']
     ListboxOptions: typeof import('@headlessui/vue')['ListboxOptions']
+    LocaleChanger: typeof import('./src/components/LocaleChanger.vue')['default']
     MemorySelect: typeof import('./src/components/MemorySelect.vue')['default']
     Menu: typeof import('@headlessui/vue')['Menu']
     MenuButton: typeof import('@headlessui/vue')['MenuButton']

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "build-only": "vite build --base=/admin/",
     "type-check": "vue-tsc --noEmit",
+    "i18n": "vue-i18n-extract report",
     "e2e": "playwright test",
     "e2e:ui": "playwright test show-report",
     "unit": "vitest --run",
@@ -33,12 +34,14 @@
     "remarkable": "^2.0.1",
     "vite-tsconfig-paths": "^4.2.0",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4",
     "vue3-apexcharts": "^1.4.4"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.11",
     "@iconify-json/ph": "^1.1.5",
+    "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@pinia/testing": "^0.1.3",
     "@playwright/test": "^1.36.2",
     "@rushstack/eslint-patch": "^1.3.2",
@@ -66,6 +69,7 @@
     "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.16.5",
     "unplugin-vue-components": "^0.25.1",
+    "vue-i18n-extract": "^2.0.7",
     "vite": "^4.4.8",
     "vitest": "^0.34.1",
     "vue-tsc": "^1.8.8"

src/App.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { useSettings } from '@stores/useSettings'
 
+const { setLocale } = useSettings()
+
+setLocale()
 </script>
 
 <template>

src/components/Header.vue

@@ -20,27 +20,27 @@
 						class="menu menu-md absolute left-0 z-50 mt-4 w-min origin-top-left gap-2 whitespace-nowrap rounded-md bg-base-100 shadow-xl">
 						<MenuItem as="li">
 							<RouterLink to="/">
-								<heroicons-home-20-solid class="h-5 w-5" /> Home
+								<heroicons-home-20-solid class="h-5 w-5" /> {{ $t('headers.home') }}
 							</RouterLink>
 						</MenuItem>
 						<MenuItem as="li">
 							<RouterLink to="/memory">
-								<ph-brain-fill class="h-5 w-5" /> Memory
+								<ph-brain-fill class="h-5 w-5" /> {{ $t('headers.memory') }}
 							</RouterLink>
 						</MenuItem>
 						<MenuItem as="li">
 							<RouterLink to="/plugins">
-								<ph-plug-fill class="h-5 w-5" /> Plugins
+								<ph-plug-fill class="h-5 w-5" /> {{ $t('headers.plugins') }}
 							</RouterLink>
 						</MenuItem>
 						<MenuItem as="li">
 							<RouterLink to="/settings" :class="{ 'active': $route.path === '/settings' }">
-								<heroicons-cog-6-tooth-20-solid class="h-5 w-5" /> Settings
+								<heroicons-cog-6-tooth-20-solid class="h-5 w-5" /> {{ $t('headers.settings') }}
 							</RouterLink>
 						</MenuItem>
 						<MenuItem as="li">
 							<a href="https://cheshire-cat-ai.github.io/docs/" target="_blank">
-								<heroicons-document-text-solid class="h-5 w-5" /> Docs
+								<heroicons-document-text-solid class="h-5 w-5" /> {{ $t('headers.docs') }}
 							</a>
 						</MenuItem>
 					</MenuItems>
@@ -54,27 +54,27 @@
 			<ul class="menu menu-horizontal menu-md hidden gap-4 p-0 md:flex">
 				<li>
 					<RouterLink to="/">
-						<heroicons-home-20-solid class="h-5 w-5" /> Home
+						<heroicons-home-20-solid class="h-5 w-5" /> {{ $t('headers.home') }}
 					</RouterLink>
 				</li>
 				<li>
 					<RouterLink to="/memory">
-						<ph-brain-fill class="h-5 w-5" /> Memory
+						<ph-brain-fill class="h-5 w-5" /> {{ $t('headers.memory') }}
 					</RouterLink>
 				</li>
 				<li>
 					<RouterLink to="/plugins">
-						<ph-plug-fill class="h-5 w-5" /> Plugins
+						<ph-plug-fill class="h-5 w-5" /> {{ $t('headers.plugins') }}
 					</RouterLink>
 				</li>
 				<li>
 					<RouterLink to="/settings" :class="{ 'active': $route.path === '/settings' }">
-						<heroicons-cog-6-tooth-20-solid class="h-5 w-5" /> Settings
+						<heroicons-cog-6-tooth-20-solid class="h-5 w-5" /> {{ $t('headers.settings') }}
 					</RouterLink>
 				</li>
 				<li>
 					<a href="https://cheshire-cat-ai.github.io/docs/" target="_blank">
-						<heroicons-document-text-solid class="h-5 w-5" /> Docs
+						<heroicons-document-text-solid class="h-5 w-5" /> {{ $t('headers.docs') }}
 					</a>
 				</li>
 			</ul>

src/components/LocaleChanger.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Locales, type LocaleCode } from '@/i18n'
+import SelectBox from '@components/SelectBox.vue'
+import { useSettings } from '@stores/useSettings'
+
+const { setLocale } = useSettings()
+const selectLocale = ref<InstanceType<typeof SelectBox>>()
+
+const { availableLocales, locale } = useI18n()
+
+const changeLocale = () => {
+	const selectedLocale = selectLocale.value?.selectedElement?.value as LocaleCode
+	if (!selectedLocale) return
+	locale.value = setLocale(selectedLocale)
+}
+
+const getAvailableLocales = computed(() => {
+	return availableLocales.map(v => {
+		return {
+			label: Locales[v as LocaleCode].name,
+			value: v
+		}
+	})
+})
+</script>
+
+<template>
+	<div class="join w-fit self-center shadow-xl">
+		<button class="btn btn-primary join-item btn-sm" @click="changeLocale">
+			Change
+		</button>
+		<SelectBox ref="selectLocale" class="join-item min-w-fit bg-base-100" padding="py-1 px-2"
+			:picked="locale" :list="getAvailableLocales" />
+	</div>
+</template>

src/i18n.ts

@@ -0,0 +1,48 @@
+import type enJSON from "@locales/en-US.json"
+import messages from "@intlify/unplugin-vue-i18n/messages"
+import { createI18n, type IntlDateTimeFormat } from "vue-i18n"
+
+export enum LocaleCode {
+    IT_IT = "it-IT",
+    EN_US = "en-US",
+    de_DE = "de-DE",
+    es_ES = "es-ES",
+    fr_FR = "fr-FR",
+}
+
+/**
+ * Keys are locale codes in RFC 5646 (what browsers use).
+ * 
+ * The `dir` property is the text direction.
+ * @see [HTML `dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+ *
+ * The `name` property is the localized name of the language.
+ * @see [name source](https://en.wikipedia.org/wiki/List_of_language_names)
+ */
+export const Locales = {
+    [LocaleCode.IT_IT]: { dir: "ltr", name: "Italiano" },
+    [LocaleCode.EN_US]: { dir: "ltr", name: "English" },
+    [LocaleCode.de_DE]: { dir: "ltr", name: "Deutsch" },
+    [LocaleCode.es_ES]: { dir: "ltr", name: "Español" },
+    [LocaleCode.fr_FR]: { dir: "ltr", name: "Français" },
+} as const;
+
+type MessageSchema = typeof enJSON;
+
+const createDateTimeFormats = (): Record<LocaleCode, IntlDateTimeFormat> => {
+    const defaultFormats: IntlDateTimeFormat = {
+        shortest: { year: "numeric", month: "numeric", day: "numeric" },
+    }
+
+    return Object.fromEntries(
+        Object.keys(Locales).map((locale) => [locale, defaultFormats])
+    ) as Record<LocaleCode, IntlDateTimeFormat>
+}
+
+export default createI18n<[MessageSchema], LocaleCode, false>({
+    messages,
+    legacy: false,
+    locale: localStorage.currentLocale || LocaleCode.EN_US,
+    fallbackLocale: LocaleCode.EN_US,
+    datetimeFormats: createDateTimeFormats(),
+})

src/locales/de-DE.json

@@ -0,0 +1,88 @@
+{
+  "headers": {
+    "home": "headers.home",
+    "memory": "headers.memory",
+    "plugins": "headers.plugins",
+    "settings": "headers.settings",
+    "docs": "headers.docs"
+  },
+  "chat": {
+    "settings": {
+      "title": "chat.settings.title"
+    },
+    "loading": "chat.loading",
+    "dropdown": {
+      "settings": "chat.dropdown.settings",
+      "memories": "chat.dropdown.memories",
+      "url": "chat.dropdown.url",
+      "file": "chat.dropdown.file",
+      "clear": "chat.dropdown.clear"
+    },
+    "upload_url": {
+      "title": "chat.upload_url.title",
+      "desc": "chat.upload_url.desc"
+    }
+  },
+  "save": "save",
+  "failed_fetch": "failed_fetch",
+  "last_update": "last_update",
+  "error": {
+    "not_found": "error.not_found",
+    "go_back": "error.go_back"
+  },
+  "send": "send",
+  "memory": {
+    "all": "memory.all",
+    "label": {
+      "input": "memory.label.input",
+      "k": "memory.label.k"
+    },
+    "plot": {
+      "export": "memory.plot.export",
+      "details": "memory.plot.details",
+      "more": "memory.plot.more"
+    },
+    "metadata": {
+      "id": "ID",
+      "collection": "Collection",
+      "text": "Text",
+      "source": "Source",
+      "when": "When",
+      "score": "Score"
+    },
+    "wipe": "memory.wipe",
+    "delete": "memory.delete",
+    "wipe_modal": "memory.wipe_modal"
+  },
+  "no": "no",
+  "yes": "yes",
+  "cheshire_cat": "cheshire_cat",
+  "plugins": {
+    "search": "plugins.search",
+    "installed": "plugins.installed",
+    "upload": "plugins.upload",
+    "desc": "plugins.desc",
+    "item_title": "plugins.item_title"
+  },
+  "settings": {
+    "embedder": {
+      "panel": "settings.embedder.panel",
+      "title": "settings.embedder.title",
+      "desc": "settings.embedder.desc"
+    },
+    "llm": {
+      "panel": "settings.llm.panel",
+      "title": "settings.llm.title",
+      "desc": "settings.llm.desc"
+    },
+    "title": "settings.title",
+    "desc": "settings.desc",
+    "configure": "settings.configure",
+    "general": {
+      "title": "settings.general.title",
+      "language": "settings.general.language",
+      "sound": "settings.general.sound",
+      "summarization": "settings.general.summarization"
+    }
+  }
+}