mirror of
https://github.com/open-webui/open-webui
synced 2025-05-24 23:04:36 +00:00
Merge pull request #6749 from dannyl1u/feat/settings-search
feat: search in settings
This commit is contained in:
Timothy Jaeryang Baek
GitHub
commit
be079e7ea2
@ -15,11 +15,284 @@
|
|||||||
import Chats from './Settings/Chats.svelte';
|
import Chats from './Settings/Chats.svelte';
|
||||||
import User from '../icons/User.svelte';
|
import User from '../icons/User.svelte';
|
||||||
import Personalization from './Settings/Personalization.svelte';
|
import Personalization from './Settings/Personalization.svelte';
|
||||||
|
import SearchInput from '../layout/Sidebar/SearchInput.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
export let show = false;
|
export let show = false;
|
||||||
|
|
||||||
|
interface SettingsTab {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
keywords: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchData: SettingsTab[] = [
|
||||||
|
{
|
||||||
|
id: 'general',
|
||||||
|
title: 'General',
|
||||||
|
keywords: [
|
||||||
|
'general',
|
||||||
|
'theme',
|
||||||
|
'language',
|
||||||
|
'notifications',
|
||||||
|
'system',
|
||||||
|
'systemprompt',
|
||||||
|
'prompt',
|
||||||
|
'advanced',
|
||||||
|
'settings',
|
||||||
|
'defaultsettings',
|
||||||
|
'configuration',
|
||||||
|
'systemsettings',
|
||||||
|
'notificationsettings',
|
||||||
|
'systempromptconfig',
|
||||||
|
'languageoptions',
|
||||||
|
'defaultparameters',
|
||||||
|
'systemparameters'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'interface',
|
||||||
|
title: 'Interface',
|
||||||
|
keywords: [
|
||||||
|
'defaultmodel',
|
||||||
|
'selectmodel',
|
||||||
|
'ui',
|
||||||
|
'userinterface',
|
||||||
|
'display',
|
||||||
|
'layout',
|
||||||
|
'design',
|
||||||
|
'landingpage',
|
||||||
|
'landingpagemode',
|
||||||
|
'default',
|
||||||
|
'chat',
|
||||||
|
'chatbubble',
|
||||||
|
'chatui',
|
||||||
|
'username',
|
||||||
|
'showusername',
|
||||||
|
'displayusername',
|
||||||
|
'widescreen',
|
||||||
|
'widescreenmode',
|
||||||
|
'fullscreen',
|
||||||
|
'expandmode',
|
||||||
|
'chatdirection',
|
||||||
|
'lefttoright',
|
||||||
|
'ltr',
|
||||||
|
'righttoleft',
|
||||||
|
'rtl',
|
||||||
|
'notifications',
|
||||||
|
'toast',
|
||||||
|
'toastnotifications',
|
||||||
|
'largechunks',
|
||||||
|
'streamlargechunks',
|
||||||
|
'scroll',
|
||||||
|
'scrollonbranchchange',
|
||||||
|
'scrollbehavior',
|
||||||
|
'richtext',
|
||||||
|
'richtextinput',
|
||||||
|
'background',
|
||||||
|
'chatbackground',
|
||||||
|
'chatbackgroundimage',
|
||||||
|
'backgroundimage',
|
||||||
|
'uploadbackground',
|
||||||
|
'resetbackground',
|
||||||
|
'titleautogen',
|
||||||
|
'titleautogeneration',
|
||||||
|
'autotitle',
|
||||||
|
'chattags',
|
||||||
|
'autochattags',
|
||||||
|
'responseautocopy',
|
||||||
|
'clipboard',
|
||||||
|
'location',
|
||||||
|
'userlocation',
|
||||||
|
'userlocationaccess',
|
||||||
|
'haptic',
|
||||||
|
'hapticfeedback',
|
||||||
|
'vibration',
|
||||||
|
'voice',
|
||||||
|
'voicecontrol',
|
||||||
|
'voiceinterruption',
|
||||||
|
'call',
|
||||||
|
'emojis',
|
||||||
|
'displayemoji',
|
||||||
|
'save',
|
||||||
|
'interfaceoptions',
|
||||||
|
'interfacecustomization'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'personalization',
|
||||||
|
title: 'Personalization',
|
||||||
|
keywords: [
|
||||||
|
'personalization',
|
||||||
|
'memory',
|
||||||
|
'personalize',
|
||||||
|
'preferences',
|
||||||
|
'profile',
|
||||||
|
'personalsettings',
|
||||||
|
'customsettings',
|
||||||
|
'userpreferences',
|
||||||
|
'accountpreferences'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'audio',
|
||||||
|
title: 'Audio',
|
||||||
|
keywords: [
|
||||||
|
'audio',
|
||||||
|
'sound',
|
||||||
|
'soundsettings',
|
||||||
|
'audiocontrol',
|
||||||
|
'volume',
|
||||||
|
'speech',
|
||||||
|
'speechrecognition',
|
||||||
|
'stt',
|
||||||
|
'speechtotext',
|
||||||
|
'tts',
|
||||||
|
'texttospeech',
|
||||||
|
'playback',
|
||||||
|
'playbackspeed',
|
||||||
|
'voiceplayback',
|
||||||
|
'speechplayback',
|
||||||
|
'audiooutput',
|
||||||
|
'speechengine',
|
||||||
|
'voicecontrol',
|
||||||
|
'audioplayback',
|
||||||
|
'transcription',
|
||||||
|
'autotranscribe',
|
||||||
|
'autosend',
|
||||||
|
'speechsettings',
|
||||||
|
'audiovoice',
|
||||||
|
'voiceoptions',
|
||||||
|
'setvoice',
|
||||||
|
'nonlocalvoices',
|
||||||
|
'savesettings',
|
||||||
|
'audioconfig',
|
||||||
|
'speechconfig',
|
||||||
|
'voicerecognition',
|
||||||
|
'speechsynthesis',
|
||||||
|
'speechmode',
|
||||||
|
'voicespeed',
|
||||||
|
'speechrate',
|
||||||
|
'speechspeed',
|
||||||
|
'audioinput',
|
||||||
|
'audiofeatures',
|
||||||
|
'voicemodes'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chats',
|
||||||
|
title: 'Chats',
|
||||||
|
keywords: [
|
||||||
|
'chat',
|
||||||
|
'messages',
|
||||||
|
'conversations',
|
||||||
|
'chatsettings',
|
||||||
|
'history',
|
||||||
|
'chathistory',
|
||||||
|
'messagehistory',
|
||||||
|
'messagearchive',
|
||||||
|
'convo',
|
||||||
|
'chats',
|
||||||
|
'conversationhistory',
|
||||||
|
'exportmessages',
|
||||||
|
'chatactivity'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'account',
|
||||||
|
title: 'Account',
|
||||||
|
keywords: [
|
||||||
|
'account',
|
||||||
|
'profile',
|
||||||
|
'security',
|
||||||
|
'privacy',
|
||||||
|
'settings',
|
||||||
|
'login',
|
||||||
|
'useraccount',
|
||||||
|
'userdata',
|
||||||
|
'api',
|
||||||
|
'apikey',
|
||||||
|
'userprofile',
|
||||||
|
'profiledetails',
|
||||||
|
'accountsettings',
|
||||||
|
'accountpreferences',
|
||||||
|
'securitysettings',
|
||||||
|
'privacysettings'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'about',
|
||||||
|
title: 'About',
|
||||||
|
keywords: [
|
||||||
|
'about',
|
||||||
|
'info',
|
||||||
|
'information',
|
||||||
|
'version',
|
||||||
|
'documentation',
|
||||||
|
'help',
|
||||||
|
'support',
|
||||||
|
'details',
|
||||||
|
'aboutus',
|
||||||
|
'softwareinfo',
|
||||||
|
'timothyjaeryangbaek',
|
||||||
|
'openwebui',
|
||||||
|
'release',
|
||||||
|
'updates',
|
||||||
|
'updateinfo',
|
||||||
|
'versioninfo',
|
||||||
|
'aboutapp',
|
||||||
|
'terms',
|
||||||
|
'termsandconditions',
|
||||||
|
'contact',
|
||||||
|
'aboutpage'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'admin',
|
||||||
|
title: 'Admin',
|
||||||
|
keywords: [
|
||||||
|
'admin',
|
||||||
|
'administrator',
|
||||||
|
'adminsettings',
|
||||||
|
'adminpanel',
|
||||||
|
'systemadmin',
|
||||||
|
'administratoraccess',
|
||||||
|
'systemcontrol',
|
||||||
|
'manage',
|
||||||
|
'management',
|
||||||
|
'admincontrols',
|
||||||
|
'adminfeatures',
|
||||||
|
'usercontrol'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
let search = '';
|
||||||
|
let visibleTabs = searchData.map((tab) => tab.id);
|
||||||
|
let searchDebounceTimeout;
|
||||||
|
|
||||||
|
const searchSettings = (query: string): string[] => {
|
||||||
|
const lowerCaseQuery = query.toLowerCase().trim();
|
||||||
|
return searchData
|
||||||
|
.filter(
|
||||||
|
(tab) =>
|
||||||
|
tab.title.toLowerCase().includes(lowerCaseQuery) ||
|
||||||
|
tab.keywords.some((keyword) => keyword.includes(lowerCaseQuery))
|
||||||
|
)
|
||||||
|
.map((tab) => tab.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchDebounceHandler = () => {
|
||||||
|
clearTimeout(searchDebounceTimeout);
|
||||||
|
searchDebounceTimeout = setTimeout(() => {
|
||||||
|
visibleTabs = searchSettings(search);
|
||||||
|
if (visibleTabs.length > 0 && !visibleTabs.includes(selectedTab)) {
|
||||||
|
selectedTab = visibleTabs[0];
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
const saveSettings = async (updated) => {
|
const saveSettings = async (updated) => {
|
||||||
console.log(updated);
|
console.log(updated);
|
||||||
await settings.set({ ...$settings, ...updated });
|
await settings.set({ ...$settings, ...updated });
|
||||||
@ -93,6 +366,36 @@
|
|||||||
id="settings-tabs-container"
|
id="settings-tabs-container"
|
||||||
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
|
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
|
||||||
>
|
>
|
||||||
|
<!-- <div class="flex w-full rounded-xl" id="chat-search">
|
||||||
|
<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
|
||||||
|
bind:value={search}
|
||||||
|
on:input={sear}
|
||||||
|
placeholder={$i18n.t('Search')}
|
||||||
|
/>
|
||||||
|
</div> -->
|
||||||
|
<SearchInput
|
||||||
|
bind:value={search}
|
||||||
|
on:input={searchDebounceHandler}
|
||||||
|
placeholder={$i18n.t('Search')}
|
||||||
|
/>
|
||||||
|
{#if visibleTabs.length > 0}
|
||||||
|
{#each visibleTabs as tabId (tabId)}
|
||||||
|
{#if tabId === 'general'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'general'
|
'general'
|
||||||
@ -118,7 +421,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('General')}</div>
|
<div class=" self-center">{$i18n.t('General')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'interface'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'interface'
|
'interface'
|
||||||
@ -144,7 +447,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('Interface')}</div>
|
<div class=" self-center">{$i18n.t('Interface')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'personalization'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'personalization'
|
'personalization'
|
||||||
@ -159,7 +462,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('Personalization')}</div>
|
<div class=" self-center">{$i18n.t('Personalization')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'audio'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'audio'
|
'audio'
|
||||||
@ -186,7 +489,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('Audio')}</div>
|
<div class=" self-center">{$i18n.t('Audio')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'chats'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'chats'
|
'chats'
|
||||||
@ -212,7 +515,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('Chats')}</div>
|
<div class=" self-center">{$i18n.t('Chats')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'account'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
'account'
|
'account'
|
||||||
@ -238,7 +541,33 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('Account')}</div>
|
<div class=" self-center">{$i18n.t('Account')}</div>
|
||||||
</button>
|
</button>
|
||||||
|
{:else if tabId === 'about'}
|
||||||
|
<button
|
||||||
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
|
'about'
|
||||||
|
? 'bg-gray-100 dark:bg-gray-800'
|
||||||
|
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
|
||||||
|
on:click={() => {
|
||||||
|
selectedTab = 'about';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class=" self-center mr-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class=" self-center">{$i18n.t('About')}</div>
|
||||||
|
</button>
|
||||||
|
{:else if tabId === 'admin'}
|
||||||
{#if $user.role === 'admin'}
|
{#if $user.role === 'admin'}
|
||||||
<button
|
<button
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||||
@ -267,32 +596,13 @@
|
|||||||
<div class=" self-center">{$i18n.t('Admin Settings')}</div>
|
<div class=" self-center">{$i18n.t('Admin Settings')}</div>
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
{/if}
|
||||||
<button
|
{/each}
|
||||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
{:else}
|
||||||
'about'
|
<div class="text-center text-gray-500 mt-4">
|
||||||
? 'bg-gray-100 dark:bg-gray-800'
|
{$i18n.t('No results found')}
|
||||||
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
|
|
||||||
on:click={() => {
|
|
||||||
selectedTab = 'about';
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class=" self-center mr-2">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-4 h-4"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div class=" self-center">{$i18n.t('About')}</div>
|
{/if}
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 md:min-h-[28rem]">
|
<div class="flex-1 md:min-h-[28rem]">
|
||||||
{#if selectedTab === 'general'}
|
{#if selectedTab === 'general'}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user