forked from open-webui/open-webui
387 lines
13 KiB
Svelte
387 lines
13 KiB
Svelte
<script lang="ts">
|
|
import toast from 'svelte-french-toast';
|
|
import { models, settings, user } from '$lib/stores';
|
|
|
|
import { getOllamaModels } from '$lib/apis/ollama';
|
|
import { getOpenAIModels } from '$lib/apis/openai';
|
|
|
|
import Modal from '../common/Modal.svelte';
|
|
import Account from './Settings/Account.svelte';
|
|
import Advanced from './Settings/Advanced.svelte';
|
|
import About from './Settings/About.svelte';
|
|
import Models from './Settings/Models.svelte';
|
|
import General from './Settings/General.svelte';
|
|
import External from './Settings/External.svelte';
|
|
import Interface from './Settings/Interface.svelte';
|
|
import Audio from './Settings/Audio.svelte';
|
|
import Chats from './Settings/Chats.svelte';
|
|
|
|
export let show = false;
|
|
|
|
const saveSettings = async (updated) => {
|
|
console.log(updated);
|
|
await settings.set({ ...$settings, ...updated });
|
|
await models.set(await getModels());
|
|
localStorage.setItem('settings', JSON.stringify($settings));
|
|
};
|
|
|
|
let selectedTab = 'general';
|
|
|
|
const getModels = async (type = 'all') => {
|
|
const models = [];
|
|
models.push(
|
|
...(await getOllamaModels(localStorage.token).catch((error) => {
|
|
toast.error(error);
|
|
return [];
|
|
}))
|
|
);
|
|
|
|
if (type === 'all') {
|
|
const openAIModels = await getOpenAIModels(localStorage.token).catch((error) => {
|
|
console.log(error);
|
|
return null;
|
|
});
|
|
models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
|
|
}
|
|
|
|
return models;
|
|
};
|
|
</script>
|
|
|
|
<Modal bind:show>
|
|
<div>
|
|
<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
|
|
<div class=" text-lg font-medium self-center">Settings</div>
|
|
<button
|
|
class="self-center"
|
|
on:click={() => {
|
|
show = false;
|
|
}}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<hr class=" dark:border-gray-800" />
|
|
|
|
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
|
|
<div
|
|
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"
|
|
>
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'general'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'general';
|
|
}}
|
|
>
|
|
<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="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">General</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'advanced'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'advanced';
|
|
}}
|
|
>
|
|
<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
|
|
d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Advanced</div>
|
|
</button>
|
|
|
|
{#if $user?.role === 'admin'}
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'models'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'models';
|
|
}}
|
|
>
|
|
<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="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Models</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'external'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'external';
|
|
}}
|
|
>
|
|
<div class=" self-center mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
d="M1 9.5A3.5 3.5 0 0 0 4.5 13H12a3 3 0 0 0 .917-5.857 2.503 2.503 0 0 0-3.198-3.019 3.5 3.5 0 0 0-6.628 2.171A3.5 3.5 0 0 0 1 9.5Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">External</div>
|
|
</button>
|
|
{/if}
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'interface'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'interface';
|
|
}}
|
|
>
|
|
<div class=" self-center mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Interface</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'audio'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'audio';
|
|
}}
|
|
>
|
|
<div class=" self-center mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
d="M7.557 2.066A.75.75 0 0 1 8 2.75v10.5a.75.75 0 0 1-1.248.56L3.59 11H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.59l3.162-2.81a.75.75 0 0 1 .805-.124ZM12.95 3.05a.75.75 0 1 0-1.06 1.06 5.5 5.5 0 0 1 0 7.78.75.75 0 1 0 1.06 1.06 7 7 0 0 0 0-9.9Z"
|
|
/>
|
|
<path
|
|
d="M10.828 5.172a.75.75 0 1 0-1.06 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 1 0 1.06 1.06 4 4 0 0 0 0-5.656Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Audio</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'chats'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'chats';
|
|
}}
|
|
>
|
|
<div class=" self-center mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Chats</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'account'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
on:click={() => {
|
|
selectedTab = 'account';
|
|
}}
|
|
>
|
|
<div class=" self-center mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class=" self-center">Account</div>
|
|
</button>
|
|
|
|
<button
|
|
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
|
|
'about'
|
|
? 'bg-gray-200 dark:bg-gray-700'
|
|
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
|
|
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">About</div>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 md:min-h-[380px]">
|
|
{#if selectedTab === 'general'}
|
|
<General
|
|
{getModels}
|
|
{saveSettings}
|
|
on:save={() => {
|
|
show = false;
|
|
}}
|
|
/>
|
|
{:else if selectedTab === 'advanced'}
|
|
<Advanced
|
|
on:save={() => {
|
|
show = false;
|
|
}}
|
|
{saveSettings}
|
|
/>
|
|
{:else if selectedTab === 'models'}
|
|
<Models {getModels} />
|
|
{:else if selectedTab === 'external'}
|
|
<External
|
|
{getModels}
|
|
on:save={() => {
|
|
show = false;
|
|
}}
|
|
/>
|
|
{:else if selectedTab === 'interface'}
|
|
<Interface
|
|
{saveSettings}
|
|
on:save={() => {
|
|
show = false;
|
|
}}
|
|
/>
|
|
{:else if selectedTab === 'audio'}
|
|
<Audio
|
|
{saveSettings}
|
|
on:save={() => {
|
|
show = false;
|
|
}}
|
|
/>
|
|
{:else if selectedTab === 'chats'}
|
|
<Chats {saveSettings} />
|
|
{:else if selectedTab === 'account'}
|
|
<Account
|
|
saveHandler={() => {
|
|
show = false;
|
|
}}
|
|
/>
|
|
{:else if selectedTab === 'about'}
|
|
<About />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
<style>
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
/* display: none; <- Crashes Chrome on hover */
|
|
-webkit-appearance: none;
|
|
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
|
}
|
|
|
|
.tabs::-webkit-scrollbar {
|
|
display: none; /* for Chrome, Safari and Opera */
|
|
}
|
|
|
|
.tabs {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
}
|
|
</style>
|