227 lines
11 KiB
Svelte
227 lines
11 KiB
Svelte
<script lang="ts">
|
|
import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, PackageIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, ScrollTextIcon, UserIcon, XCircleIcon } from "lucide-svelte";
|
|
import { language } from "src/lang";
|
|
import DisplaySettings from "./Pages/DisplaySettings.svelte";
|
|
import UserSettings from "./Pages/UserSettings.svelte";
|
|
import BotSettings from "./Pages/BotSettings.svelte";
|
|
import OtherBotSettings from "./Pages/OtherBotSettings.svelte";
|
|
import PluginSettings from "./Pages/PluginSettings.svelte";
|
|
import FilesSettings from "./Pages/FilesSettings.svelte";
|
|
import AdvancedSettings from "./Pages/AdvancedSettings.svelte";
|
|
import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
|
|
import Botpreset from "./botpreset.svelte";
|
|
import Communities from "./Pages/Communities.svelte";
|
|
import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte";
|
|
import Lorepreset from "./lorepreset.svelte";
|
|
import GlobalRegex from "./Pages/GlobalRegex.svelte";
|
|
import LanguageSettings from "./Pages/LanguageSettings.svelte";
|
|
import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
|
|
import PersonaSettings from "./Pages/PersonaSettings.svelte";
|
|
import PromptSettings from "./Pages/PromptSettings.svelte";
|
|
import ThanksPage from "./Pages/ThanksPage.svelte";
|
|
import ModuleSettings from "./Pages/Module/ModuleSettings.svelte";
|
|
|
|
let openPresetList = false
|
|
let openLoreList = false
|
|
if(window.innerWidth >= 900 && $SettingsMenuIndex === -1){
|
|
$SettingsMenuIndex = 1
|
|
}
|
|
|
|
</script>
|
|
<div class="h-full w-full flex justify-center setting-bg">
|
|
<div class="h-full max-w-screen-lg w-full flex relative">
|
|
{#if window.innerWidth >= 700 || $SettingsMenuIndex === -1}
|
|
<div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
|
|
class:w-full={window.innerWidth < 700}>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 1 || $SettingsMenuIndex === 13}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 1 && $SettingsMenuIndex !== 13}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 1
|
|
|
|
}}>
|
|
<BotIcon />
|
|
<span>{language.chatBot}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 12}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 12}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 12
|
|
}}>
|
|
<ContactIcon />
|
|
<span>{language.persona}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 2}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 2}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 2
|
|
}}>
|
|
<Sailboat />
|
|
<span>{language.otherBots}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 3}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 3}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 3
|
|
}}>
|
|
<MonitorIcon />
|
|
<span>{language.display}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 10}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 10}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 10
|
|
}}>
|
|
<LanguagesIcon />
|
|
<span>{language.language}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 11}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 11}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 11
|
|
}}>
|
|
<AccessibilityIcon />
|
|
<span>{language.accessibility}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 8}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 8}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 8
|
|
}}>
|
|
<BookIcon />
|
|
<span>{language.globalLoreBook}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 9}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 9}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 9
|
|
}}>
|
|
<AlignLeft />
|
|
<span>{language.globalRegexScript}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 14}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 14}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 14
|
|
}}>
|
|
<PackageIcon />
|
|
<span>{language.modules}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 4}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 4}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 4
|
|
}}>
|
|
<CodeIcon />
|
|
<span>{language.plugin}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 0}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 0}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 0
|
|
}}>
|
|
<UserIcon />
|
|
<span>{language.account} & {language.files}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 6}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 6}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 6
|
|
}}>
|
|
<ActivityIcon />
|
|
<span>{language.advancedSettings}</span>
|
|
</button>
|
|
<button class="flex gap-2 items-center hover:text-textcolor"
|
|
class:text-textcolor={$SettingsMenuIndex === 77}
|
|
class:text-textcolor2={$SettingsMenuIndex !== 77}
|
|
on:click={() => {
|
|
$SettingsMenuIndex = 77
|
|
}}>
|
|
<BoxIcon />
|
|
<span>{language.supporterThanks}</span>
|
|
</button>
|
|
{#if window.innerWidth < 700}
|
|
<button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
|
|
settingsOpen.set(false)
|
|
}}> <XCircleIcon /> </button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
|
|
{#key $SettingsMenuIndex}
|
|
<div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
|
|
{#if $SettingsMenuIndex === 0}
|
|
<UserSettings />
|
|
{:else if $SettingsMenuIndex === 1}
|
|
<BotSettings bind:openPresetList goPromptTemplate={() => {
|
|
$SettingsMenuIndex = 13
|
|
}} />
|
|
{:else if $SettingsMenuIndex === 2}
|
|
<OtherBotSettings />
|
|
{:else if $SettingsMenuIndex === 3}
|
|
<DisplaySettings />
|
|
{:else if $SettingsMenuIndex === 4}
|
|
<PluginSettings />
|
|
{:else if $SettingsMenuIndex === 5}
|
|
<FilesSettings />
|
|
{:else if $SettingsMenuIndex === 6}
|
|
<AdvancedSettings />
|
|
{:else if $SettingsMenuIndex === 7}
|
|
<Communities />
|
|
{:else if $SettingsMenuIndex === 8}
|
|
<GlobalLoreBookSettings bind:openLoreList />
|
|
{:else if $SettingsMenuIndex === 9}
|
|
<GlobalRegex/>
|
|
{:else if $SettingsMenuIndex === 10}
|
|
<LanguageSettings/>
|
|
{:else if $SettingsMenuIndex === 11}
|
|
<AccessibilitySettings/>
|
|
{:else if $SettingsMenuIndex === 12}
|
|
<PersonaSettings/>
|
|
{:else if $SettingsMenuIndex === 14}
|
|
<ModuleSettings/>
|
|
{:else if $SettingsMenuIndex === 13}
|
|
<PromptSettings onGoBack={() => {
|
|
$SettingsMenuIndex = 1
|
|
}}/>
|
|
{:else if $SettingsMenuIndex === 77}
|
|
<ThanksPage/>
|
|
{/if}
|
|
</div>
|
|
{/key}
|
|
<button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
|
|
if(window.innerWidth >= 700){
|
|
settingsOpen.set(false)
|
|
}
|
|
else{
|
|
$SettingsMenuIndex = -1
|
|
}
|
|
}}>
|
|
<XCircleIcon />
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{#if openPresetList}
|
|
<Botpreset close={() => {openPresetList = false}} />
|
|
{/if}
|
|
{#if openLoreList}
|
|
<Lorepreset close={() => {openLoreList = false}} />
|
|
{/if}
|
|
<style>
|
|
.setting-bg{
|
|
background: linear-gradient(to right, var(--risu-theme-darkbg) 50%, var(--risu-theme-bgcolor) 50%);
|
|
|
|
}
|
|
</style> |