mirror of
https://github.com/open-webui/open-webui
synced 2025-01-29 13:58:09 +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 User from '../icons/User.svelte';
|
||||
import Personalization from './Settings/Personalization.svelte';
|
||||
import SearchInput from '../layout/Sidebar/SearchInput.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
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) => {
|
||||
console.log(updated);
|
||||
await settings.set({ ...$settings, ...updated });
|
||||
@ -93,6 +366,36 @@
|
||||
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"
|
||||
>
|
||||
<!-- <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
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'general'
|
||||
@ -118,7 +421,7 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('General')}</div>
|
||||
</button>
|
||||
|
||||
{:else if tabId === 'interface'}
|
||||
<button
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'interface'
|
||||
@ -144,7 +447,7 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Interface')}</div>
|
||||
</button>
|
||||
|
||||
{:else if tabId === 'personalization'}
|
||||
<button
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'personalization'
|
||||
@ -159,7 +462,7 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Personalization')}</div>
|
||||
</button>
|
||||
|
||||
{:else if tabId === 'audio'}
|
||||
<button
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'audio'
|
||||
@ -186,7 +489,7 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Audio')}</div>
|
||||
</button>
|
||||
|
||||
{:else if tabId === 'chats'}
|
||||
<button
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'chats'
|
||||
@ -212,7 +515,7 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Chats')}</div>
|
||||
</button>
|
||||
|
||||
{:else if tabId === 'account'}
|
||||
<button
|
||||
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
|
||||
'account'
|
||||
@ -238,7 +541,33 @@
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Account')}</div>
|
||||
</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'}
|
||||
<button
|
||||
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>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<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>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="text-center text-gray-500 mt-4">
|
||||
{$i18n.t('No results found')}
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('About')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-1 md:min-h-[28rem]">
|
||||
{#if selectedTab === 'general'}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user