2024-02-05 09:58:54 +00:00
< script lang = "ts" >
import { getBackendConfig } from '$lib/apis';
import { setDefaultPromptSuggestions } from '$lib/apis/configs';
2024-03-26 07:59:57 +00:00
import { config , models , settings , user } from '$lib/stores';
2024-03-01 04:40:36 +00:00
import { createEventDispatcher , onMount , getContext } from 'svelte';
2024-03-01 09:18:07 +00:00
import { toast } from 'svelte-sonner';
2024-02-05 09:58:54 +00:00
const dispatch = createEventDispatcher();
2024-03-01 04:40:36 +00:00
const i18n = getContext('i18n');
2024-02-06 05:05:38 +00:00
export let saveSettings: Function;
// Addons
let titleAutoGenerate = true;
let responseAutoCopy = false;
let titleAutoGenerateModel = '';
2024-03-26 07:59:57 +00:00
let titleAutoGenerateModelExternal = '';
2024-02-15 08:34:55 +00:00
let fullScreenMode = false;
2024-02-21 20:51:52 +00:00
let titleGenerationPrompt = '';
2024-02-06 05:05:38 +00:00
2024-02-05 09:58:54 +00:00
// Interface
let promptSuggestions = [];
2024-02-06 10:22:34 +00:00
let showUsername = false;
2024-02-15 08:34:55 +00:00
const toggleFullScreenMode = async () => {
fullScreenMode = !fullScreenMode;
saveSettings({ fullScreenMode : fullScreenMode } );
};
2024-02-06 10:22:34 +00:00
const toggleShowUsername = async () => {
showUsername = !showUsername;
saveSettings({ showUsername : showUsername } );
};
2024-02-06 05:05:38 +00:00
const toggleTitleAutoGenerate = async () => {
titleAutoGenerate = !titleAutoGenerate;
2024-03-26 07:59:57 +00:00
saveSettings({
title: {
...$settings.title,
auto: titleAutoGenerate
}
});
2024-02-06 05:05:38 +00:00
};
const toggleResponseAutoCopy = async () => {
const permission = await navigator.clipboard
.readText()
.then(() => {
return 'granted';
})
.catch(() => {
return '';
});
console.log(permission);
if (permission === 'granted') {
responseAutoCopy = !responseAutoCopy;
saveSettings({ responseAutoCopy : responseAutoCopy } );
} else {
toast.error(
'Clipboard write permission denied. Please check your browser settings to grant the necessary access.'
);
}
};
2024-02-05 09:58:54 +00:00
const updateInterfaceHandler = async () => {
2024-02-21 20:51:52 +00:00
if ($user.role === 'admin') {
promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
await config.set(await getBackendConfig());
}
saveSettings({
2024-03-26 07:59:57 +00:00
title: {
...$settings.title,
model: titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined,
modelExternal:
titleAutoGenerateModelExternal !== '' ? titleAutoGenerateModelExternal : undefined,
prompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
}
2024-02-21 20:51:52 +00:00
});
2024-02-05 09:58:54 +00:00
};
onMount(async () => {
if ($user.role === 'admin') {
promptSuggestions = $config?.default_prompt_suggestions;
}
2024-02-06 05:05:38 +00:00
let settings = JSON.parse(localStorage.getItem('settings') ?? '{} ');
2024-03-26 07:59:57 +00:00
titleAutoGenerate = settings?.title?.auto ?? true;
titleAutoGenerateModel = settings?.title?.model ?? '';
titleAutoGenerateModelExternal = settings?.title?.modelExternal ?? '';
2024-02-21 20:51:52 +00:00
titleGenerationPrompt =
2024-03-26 07:59:57 +00:00
settings?.title?.prompt ??
2024-03-07 18:51:00 +00:00
$i18n.t(
"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':"
) + ' {{ prompt }} ';
2024-03-26 07:59:57 +00:00
responseAutoCopy = settings.responseAutoCopy ?? false;
showUsername = settings.showUsername ?? false;
fullScreenMode = settings.fullScreenMode ?? false;
2024-02-05 09:58:54 +00:00
});
< / script >
< form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit| preventDefault={() => {
updateInterfaceHandler();
dispatch('save');
}}
>
2024-03-16 09:24:32 +00:00
< div class = " space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]" >
2024-02-06 05:05:38 +00:00
< div >
2024-03-02 20:38:51 +00:00
< div class = " mb-1 text-sm font-medium" > { $i18n . t ( 'WebUI Add-ons' )} </ div >
2024-02-06 05:05:38 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
2024-03-02 20:38:51 +00:00
< div class = " self-center text-xs font-medium" > { $i18n . t ( 'Title Auto-Generation' )} </ div >
2024-02-06 05:05:38 +00:00
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleTitleAutoGenerate();
}}
type="button"
>
{ #if titleAutoGenerate === true }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'On' )} </ span >
2024-02-06 05:05:38 +00:00
{ : else }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'Off' )} </ span >
2024-02-06 05:05:38 +00:00
{ /if }
< / button >
< / div >
< / div >
< div >
< div class = " py-0.5 flex w-full justify-between" >
2024-03-02 21:53:41 +00:00
< div class = " self-center text-xs font-medium" >
{ $i18n . t ( 'Response AutoCopy to Clipboard' )}
< / div >
2024-02-06 05:05:38 +00:00
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleResponseAutoCopy();
}}
type="button"
>
{ #if responseAutoCopy === true }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'On' )} </ span >
2024-02-06 05:05:38 +00:00
{ : else }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'Off' )} </ span >
2024-02-06 05:05:38 +00:00
{ /if }
< / button >
< / div >
< / div >
2024-02-10 00:00:39 +00:00
2024-02-15 08:34:55 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
2024-03-02 20:38:51 +00:00
< div class = " self-center text-xs font-medium" > { $i18n . t ( 'Full Screen Mode' )} </ div >
2024-02-15 08:34:55 +00:00
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleFullScreenMode();
}}
type="button"
>
{ #if fullScreenMode === true }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'On' )} </ span >
2024-02-15 08:34:55 +00:00
{ : else }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'Off' )} </ span >
2024-02-15 08:34:55 +00:00
{ /if }
< / button >
< / div >
< / div >
2024-02-06 10:22:34 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
2024-02-10 00:00:39 +00:00
< div class = " self-center text-xs font-medium" >
2024-03-03 11:22:29 +00:00
{ $i18n . t ( 'Display the username instead of You in the Chat' )}
2024-02-10 00:00:39 +00:00
< / div >
2024-02-06 10:22:34 +00:00
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleShowUsername();
}}
type="button"
>
{ #if showUsername === true }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'On' )} </ span >
2024-02-06 10:22:34 +00:00
{ : else }
2024-03-02 20:38:51 +00:00
< span class = "ml-2 self-center" > { $i18n . t ( 'Off' )} </ span >
2024-02-06 10:22:34 +00:00
{ /if }
< / button >
< / div >
< / div >
2024-02-05 09:58:54 +00:00
< / div >
2024-02-06 05:05:38 +00:00
< hr class = " dark:border-gray-700" / >
2024-02-05 09:58:54 +00:00
2024-02-06 05:05:38 +00:00
< div >
2024-03-02 20:38:51 +00:00
< div class = " mb-2.5 text-sm font-medium" > { $i18n . t ( 'Set Title Auto-Generation Model' )} </ div >
2024-03-26 07:59:57 +00:00
< div class = "flex w-full gap-2 pr-2" >
< div class = "flex-1" >
< div class = " text-xs mb-1" > Local Models< / div >
2024-02-06 05:05:38 +00:00
< select
2024-03-10 05:55:13 +00:00
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-02-06 05:05:38 +00:00
bind:value={ titleAutoGenerateModel }
2024-03-02 21:53:41 +00:00
placeholder={ $i18n . t ( 'Select a model' )}
2024-02-06 05:05:38 +00:00
>
2024-03-03 11:22:29 +00:00
< option value = "" selected > { $i18n . t ( 'Current Model' )} </ option >
2024-02-29 17:37:46 +00:00
{ #each $models as model }
{ #if model . size != null }
< option value = { model . name } class="bg-gray-100 dark:bg-gray-700 " >
{ model . name + ' (' + ( model . size / 1024 ** 3 ). toFixed ( 1 ) + ' GB)' }
< / option >
{ /if }
2024-02-06 05:05:38 +00:00
{ /each }
< / select >
< / div >
2024-03-26 07:59:57 +00:00
< div class = "flex-1" >
< div class = " text-xs mb-1" > External Models< / div >
< select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={ titleAutoGenerateModelExternal }
placeholder={ $i18n . t ( 'Select a model' )}
>
< option value = "" selected > { $i18n . t ( 'Current Model' )} </ option >
{ #each $models as model }
{ #if model . name !== 'hr' }
< option value = { model . name } class="bg-gray-100 dark:bg-gray-700 " >
{ model . name }
< / option >
{ /if }
{ /each }
< / select >
< / div >
2024-02-06 05:05:38 +00:00
< / div >
2024-03-10 18:32:16 +00:00
2024-03-10 06:02:27 +00:00
< div class = "mt-3 mr-2" >
2024-03-02 20:38:51 +00:00
< div class = " mb-2.5 text-sm font-medium" > { $i18n . t ( 'Title Generation Prompt' )} </ div >
2024-02-21 20:51:52 +00:00
< textarea
bind:value={ titleGenerationPrompt }
2024-03-10 05:55:13 +00:00
class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
2024-02-21 20:51:52 +00:00
rows="3"
/>
< / div >
2024-02-06 05:05:38 +00:00
< / div >
{ #if $user . role === 'admin' }
< hr class = " dark:border-gray-700" / >
< div class = " space-y-3 pr-1.5 overflow-y-scroll max-h-80" >
< div class = "flex w-full justify-between mb-2" >
2024-03-02 21:53:41 +00:00
< div class = " self-center text-sm font-semibold" >
{ $i18n . t ( 'Default Prompt Suggestions' )}
< / div >
2024-02-05 09:58:54 +00:00
< button
2024-02-06 05:05:38 +00:00
class="p-1 px-3 text-xs flex rounded transition"
2024-02-05 09:58:54 +00:00
type="button"
on:click={() => {
2024-02-06 05:05:38 +00:00
if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
promptSuggestions = [...promptSuggestions, { content : '' , title : [ '' , '' ] } ];
}
2024-02-05 09:58:54 +00:00
}}
>
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
< path
2024-02-06 05:05:38 +00:00
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
2024-02-05 09:58:54 +00:00
/>
< / svg >
< / button >
< / div >
2024-02-06 05:05:38 +00:00
< div class = "flex flex-col space-y-1" >
{ #each promptSuggestions as prompt , promptIdx }
< div class = " flex border dark:border-gray-600 rounded-lg" >
< div class = "flex flex-col flex-1" >
< div class = "flex border-b dark:border-gray-600 w-full" >
< input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
2024-04-19 21:13:17 +00:00
placeholder={ $i18n . t ( 'Title (e.g. Tell me a fun fact)' )}
2024-02-06 05:05:38 +00:00
bind:value={ prompt . title [ 0 ]}
/>
< input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
2024-04-19 21:13:17 +00:00
placeholder={ $i18n . t ( 'Subtitle (e.g. about the Roman Empire)' )}
2024-02-06 05:05:38 +00:00
bind:value={ prompt . title [ 1 ]}
/>
< / div >
< input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
2024-04-19 21:13:17 +00:00
placeholder={ $i18n . t ( 'Prompt (e.g. Tell me a fun fact about the Roman Empire)' )}
2024-02-06 05:05:38 +00:00
bind:value={ prompt . content }
/>
< / div >
2024-02-05 09:58:54 +00:00
2024-02-06 05:05:38 +00:00
< button
class="px-2"
type="button"
on:click={() => {
promptSuggestions.splice(promptIdx, 1);
promptSuggestions = promptSuggestions;
}}
>
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
< 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 >
{ /each }
< / div >
{ #if promptSuggestions . length > 0 }
< div class = "text-xs text-left w-full mt-2" >
2024-03-04 08:53:56 +00:00
{ $i18n . t ( 'Adjusting these settings will apply changes universally to all users.' )}
2024-02-06 05:05:38 +00:00
< / div >
{ /if }
2024-02-05 09:58:54 +00:00
< / div >
{ /if }
< / div >
2024-03-16 09:24:32 +00:00
< div class = "flex justify-end text-sm font-medium" >
2024-02-05 09:58:54 +00:00
< button
2024-03-10 06:02:27 +00:00
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
2024-02-05 09:58:54 +00:00
type="submit"
>
2024-03-04 08:53:56 +00:00
{ $i18n . t ( 'Save' )}
2024-02-05 09:58:54 +00:00
< / button >
< / div >
< / form >