bhetherman/open-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek committed 2026-07-15 18:09:34 -04:00
1 parent 933ab1e1cd
commit 4b0122a120
20 files changed
+137 -165
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/chat/Settings/Account.svelte
+3 -3
View File
@@ -17,7 +17,7 @@
import UserProfileImage from './Account/UserProfileImage.svelte';
import UserSettingField from './UserSettingField.svelte';
import UserSettingRow from './UserSettingRow.svelte';
import UserSettingSelect from './UserSettingSelect.svelte';
import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
import UserSettingSection from './UserSettingSection.svelte';
const i18n = getContext('i18n');
@@ -172,7 +172,7 @@
label={$i18n.t('Gender')}
description={$i18n.t('Choose the gender value stored on your profile.')}
>
<UserSettingSelect
<SettingsSelect
className="w-full"
bind:value={_gender}
ariaLabel={$i18n.t('Gender')}
@@ -191,7 +191,7 @@
<option value="male">{$i18n.t('Male')}</option>
<option value="female">{$i18n.t('Female')}</option>
<option value="custom">{$i18n.t('Custom')}</option>
</UserSettingSelect>
</SettingsSelect>
{#if _gender === 'custom'}
<input
src/lib/components/chat/Settings/Audio.svelte
+9 -9
View File
@@ -10,7 +10,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte';
import UserSettingField from './UserSettingField.svelte';
import UserSettingRow from './UserSettingRow.svelte';
import UserSettingSelect from './UserSettingSelect.svelte';
import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
import UserSettingSection from './UserSettingSection.svelte';
const dispatch = createEventDispatcher();
@@ -192,14 +192,14 @@
label={$i18n.t('Speech-to-Text Engine')}
description={$i18n.t('Choose the engine used to transcribe voice input.')}
>
<UserSettingSelect
<SettingsSelect
bind:value={STTEngine}
ariaLabel={$i18n.t('Speech-to-Text Engine')}
placeholder={$i18n.t('Select an engine')}
>
<option value="">{$i18n.t('Default')}</option>
<option value="web">{$i18n.t('Web API')}</option>
</UserSettingSelect>
</SettingsSelect>
</UserSettingRow>
<UserSettingRow
@@ -250,14 +250,14 @@
label={$i18n.t('Text-to-Speech Engine')}
description={$i18n.t('Choose the engine used to read assistant responses aloud.')}
>
<UserSettingSelect
<SettingsSelect
bind:value={TTSEngine}
ariaLabel={$i18n.t('Text-to-Speech Engine')}
placeholder={$i18n.t('Select an engine')}
>
<option value="">{$i18n.t('Default')}</option>
<option value="browser-kokoro">{$i18n.t('Kokoro.js (Browser)')}</option>
</UserSettingSelect>
</SettingsSelect>
</UserSettingRow>
{#if TTSEngine === 'browser-kokoro'}
@@ -265,7 +265,7 @@
label={$i18n.t('Kokoro.js Dtype')}
description={$i18n.t('Select the local model precision used by Kokoro.js.')}
>
<UserSettingSelect
<SettingsSelect
bind:value={TTSEngineConfig.dtype}
ariaLabel={$i18n.t('Kokoro.js Dtype')}
placeholder={$i18n.t('Select dtype')}
@@ -275,7 +275,7 @@
<option value="fp16">fp16</option>
<option value="q8">q8</option>
<option value="q4">q4</option>
</UserSettingSelect>
</SettingsSelect>
</UserSettingRow>
{/if}
@@ -360,7 +360,7 @@
label={$i18n.t('Set Voice')}
description={$i18n.t('Choose the browser voice used for speech output.')}
>
<UserSettingSelect className="w-full" bind:value={voice} ariaLabel={$i18n.t('Voice')}>
<SettingsSelect className="w-full" bind:value={voice} ariaLabel={$i18n.t('Voice')}>
<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
{#each voices.filter((v) => nonLocalVoices || v.localService === true) as _voice}
<option
@@ -369,7 +369,7 @@
selected={voice === _voice.name}>{_voice.name}</option
>
{/each}
</UserSettingSelect>
</SettingsSelect>
</UserSettingField>
<UserSettingRow
label={$i18n.t('Allow non-local voices')}
src/lib/components/chat/Settings/General.svelte
+5 -5
View File
@@ -13,7 +13,7 @@
import UserSettingField from './UserSettingField.svelte';
import UserSettingRow from './UserSettingRow.svelte';
import UserSettingSection from './UserSettingSection.svelte';
import UserSettingSelect from './UserSettingSelect.svelte';
import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
export let saveSettings: Function;
export let getModels: Function;
@@ -223,7 +223,7 @@
label={$i18n.t('Theme')}
description={$i18n.t('Choose the color theme used by the interface.')}
>
<UserSettingSelect
<SettingsSelect
bind:value={selectedTheme}
ariaLabel={$i18n.t('Theme')}
placeholder={$i18n.t('Select a theme')}
@@ -236,14 +236,14 @@
{#if $config?.features?.enable_easter_eggs}
<option value="her">🌷 Her</option>
{/if}
</UserSettingSelect>
</SettingsSelect>
</UserSettingRow>
<UserSettingRow
label={$i18n.t('Language')}
description={$i18n.t('Choose the language used for interface text.')}
>
<UserSettingSelect
<SettingsSelect
bind:value={lang}
ariaLabel={$i18n.t('Language')}
className="w-48"
@@ -255,7 +255,7 @@
{#each languages as language}
<option value={language['code']}>{language['title']}</option>
{/each}
</UserSettingSelect>
</SettingsSelect>
</UserSettingRow>
{#if $i18n.language === 'en-US' && !($config?.license_metadata ?? false)}
<div class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
src/lib/components/chat/Settings/Interface.svelte
+4 -4
View File
@@ -109,9 +109,9 @@
const settingRowClass = 'flex items-center justify-between gap-2.5';
const settingLabelClass = 'min-w-0 text-xs text-gray-600 dark:text-gray-400';
const settingControlClass = 'flex shrink-0 items-center justify-end gap-1.5';
const sectionHeadingClass = 'mt-2 text-xs text-gray-400 dark:text-gray-600';
const sectionHeadingClass = 'mt-4 text-xs text-gray-400 dark:text-gray-600';
const firstSectionHeadingClass = 'text-xs text-gray-400 dark:text-gray-600';
const settingDescriptionClass = '-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600';
const settingDescriptionClass = 'mt-1.5 text-[0.6875rem] text-gray-400 dark:text-gray-600';
const actionButtonClass =
'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
@@ -1229,7 +1229,7 @@
{$i18n.t('Floating Quick Actions')}
</label>
<div class="flex shrink-0 items-center gap-3">
<div class={settingControlClass}>
{#if showFloatingActionButtons}
<button
class={actionButtonClass}
@@ -1546,7 +1546,7 @@
{$i18n.t('Image Compression')}
</div>
<div class="flex shrink-0 items-center gap-3">
<div class={settingControlClass}>
{#if imageCompression}
<button
class={actionButtonClass}
src/lib/components/chat/Settings/UserSettingSelect.svelte
-19
View File
@@ -1,19 +0,0 @@
<script lang="ts">
export let value = '';
export let ariaLabel = '';
export let placeholder = '';
export let className = 'w-fit min-w-32';
export let selectClassName = '';
</script>
<div class="relative inline-flex {className}">
<select
bind:value
aria-label={ariaLabel || undefined}
title={placeholder || undefined}
class="h-7 w-full truncate rounded-lg border border-gray-100/50 !bg-gray-50/40 ps-2.5 pe-9 text-left text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:!bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500 {selectClassName}"
on:change
>
<slot />
</select>
</div>