tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

feat: WIP: Initial setup for i18next

Browse source
This commit is contained in:
Ased Mammad 2024-03-01 08:10:36 +03:30
parent 9b86e0bb41
commit fab89a76b1
17 changed files with 180 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/chat/MessageInput.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { onMount, tick } from 'svelte';
import { onMount, tick, getContext } from 'svelte';
import { settings } from '$lib/stores';
import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
@ -14,6 +14,8 @@
import { transcribeAudio } from '$lib/apis/audio';
import Tooltip from '../common/Tooltip.svelte';
const i18n = getContext('i18n');
export let submitPrompt: Function;
export let stopResponse: Function;
@ -669,8 +671,8 @@
placeholder={chatInputPlaceholder !== ''
? chatInputPlaceholder
: isRecording
? 'Listening...'
: 'Send a message'}
? $i18n.t('ChatInputPlaceholderListening')
: $i18n.t('ChatInputPlaceholder')}
bind:value={prompt}
on:keypress={(e) => {
if (e.keyCode == 13 && !e.shiftKey) {

4
src/lib/components/chat/MessageInput/Models.svelte
View file

@ -2,9 +2,11 @@
import { generatePrompt } from '$lib/apis/ollama';
import { models } from '$lib/stores';
import { splitStream } from '$lib/utils';
import { tick } from 'svelte';
import { tick, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let prompt = '';
export let user = null;

8
src/lib/components/chat/Messages/Placeholder.svelte
View file

@ -1,7 +1,9 @@
<script lang="ts">
import { WEBUI_BASE_URL } from '$lib/constants';
import { user } from '$lib/stores';
import { onMount } from 'svelte';
import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n');
export let models = [];
export let modelfiles = [];
@ -64,9 +66,9 @@
</div>
{/if}
{:else}
<div class=" line-clamp-1">Hello, {$user.name}</div>
<div class=" line-clamp-1">{$i18n.t('Hello', { name: $user.name })}</div>
<div>How can I help you today?</div>
<div>{$i18n.t('GreetingPlaceholder')}</div>
{/if}
</div>
</div>

10
src/lib/components/chat/ModelSelector.svelte
View file

@ -1,9 +1,11 @@
<script lang="ts">
import { setDefaultModels } from '$lib/apis/configs';
import { models, showSettings, settings, user } from '$lib/stores';
import { onMount, tick } from 'svelte';
import { onMount, tick, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let selectedModels = [''];
export let disabled = false;
@ -39,7 +41,9 @@
bind:value={selectedModel}
{disabled}
>
<option class=" text-gray-700" value="" selected disabled>Select a model</option>
<option class=" text-gray-700" value="" selected disabled
>{$i18n.t('ModelSelectorPlaceholder')}</option
>
{#each $models as model}
{#if model.name === 'hr'}
@ -133,5 +137,5 @@
</div>
<div class="text-left mt-1.5 text-xs text-gray-500">
<button on:click={saveDefaultModel}> Set as default</button>
<button on:click={saveDefaultModel}> {$i18n.t('SetAsDefault')}</button>
</div>

26
src/lib/components/chat/Settings/General.svelte
View file

@ -1,10 +1,12 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { createEventDispatcher, onMount } from 'svelte';
import { createEventDispatcher, onMount, getContext } from 'svelte';
const dispatch = createEventDispatcher();
import { models, user } from '$lib/stores';
const i18n = getContext('i18n');
import AdvancedParams from './Advanced/AdvancedParams.svelte';
export let saveSettings: Function;
@ -13,6 +15,9 @@
// General
let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
let theme = 'dark';
// TODO: Get these dynamically from the i18n module
let languages = ['en', 'fa', 'fr', 'de'];
let lang = $i18n.language;
let notificationEnabled = false;
let system = '';
@ -149,6 +154,25 @@
</div>
</div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">Language</div>
<div class="flex items-center relative">
<select
class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
bind:value={lang}
placeholder="Select a language"
on:change={(e) => {
console.log($i18n);
$i18n.changeLanguage(lang);
}}
>
{#each languages as value}
<option {value}>{value}</option>
{/each}
</select>
</div>
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">Notification</div>

8
src/lib/components/chat/Settings/Images.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { createEventDispatcher, onMount } from 'svelte';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { config, user } from '$lib/stores';
import {
getAUTOMATIC1111Url,
@ -19,6 +19,8 @@
import { getBackendConfig } from '$lib/apis';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let saveSettings: Function;
let loading = false;
@ -193,10 +195,10 @@
<select
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
bind:value={selectedModel}
placeholder="Select a model"
placeholder={$i18n.t('ModelSelectorPlaceholder')}
>
{#if !selectedModel}
<option value="" disabled selected>Select a model</option>
<option value="" disabled selected>{$i18n.t('ModelSelectorPlaceholder')}</option>
{/if}
{#each models ?? [] as model}
<option value={model.title} class="bg-gray-100 dark:bg-gray-700"

6
src/lib/components/chat/Settings/Interface.svelte
View file

@ -2,10 +2,12 @@
import { getBackendConfig } from '$lib/apis';
import { setDefaultPromptSuggestions } from '$lib/apis/configs';
import { config, models, user } from '$lib/stores';
import { createEventDispatcher, onMount } from 'svelte';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let saveSettings: Function;
// Addons
@ -188,7 +190,7 @@
<select
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
bind:value={titleAutoGenerateModel}
placeholder="Select a model"
placeholder={$i18n.t('ModelSelectorPlaceholder')}
>
<option value="" selected>Current Model</option>
{#each $models as model}

13
src/lib/components/chat/Settings/Models.svelte
View file

@ -6,9 +6,11 @@
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, models, user } from '$lib/stores';
import { splitStream } from '$lib/utils';
import { onMount } from 'svelte';
import { onMount, getContext } from 'svelte';
import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
const i18n = getContext('i18n');
export let getModels: Function;
let showLiteLLM = false;
@ -465,10 +467,10 @@
<select
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={deleteModelTag}
placeholder="Select a model"
placeholder={$i18n.t('ModelSelectorPlaceholder')}
>
{#if !deleteModelTag}
<option value="" disabled selected>Select a model</option>
<option value="" disabled selected>{$i18n.t('ModelSelectorPlaceholder')}</option>
{/if}
{#each $models.filter((m) => m.size != null) as model}
<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
@ -805,10 +807,11 @@
<select
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={deleteLiteLLMModelId}
placeholder="Select a model"
placeholder={$i18n.t('ModelSelectorPlaceholder')}
>
{#if !deleteLiteLLMModelId}
<option value="" disabled selected>Select a model</option>
<option value="" disabled selected>{$i18n.t('ModelSelectorPlaceholder')}</option
>
{/if}
{#each liteLLMModelInfo as model}
<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"

8
src/lib/components/layout/Sidebar.svelte
View file

@ -8,6 +8,10 @@
import { page } from '$app/stores';
import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
import { onMount } from 'svelte';
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import {
deleteChatById,
getChatList,
@ -124,7 +128,7 @@
/>
</div>
<div class=" self-center font-medium text-sm">New Chat</div>
<div class=" self-center font-medium text-sm">{$i18n.t('NewChat')}</div>
</div>
<div class="self-center">
@ -169,7 +173,7 @@
</div>
<div class="flex self-center">
<div class=" self-center font-medium text-sm">Modelfiles</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Modelfiles')}</div>
</div>
</a>
</div>