mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remember Settings menu

Browse Source
This commit is contained in:
kwaroran
2024-02-07 02:24:30 +09:00
parent 68382cb38e
commit ad90121850
3 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import { CheckCircle2Icon, Globe, XIcon } from "lucide-svelte"; import { CheckCircle2Icon, Globe, XIcon } from "lucide-svelte";
import { language } from "src/lang"; import { language } from "src/lang";
import Button from "src/lib/UI/GUI/Button.svelte"; import Button from "src/lib/UI/GUI/Button.svelte";
import { DataBase } from "src/ts/storage/database"; import { DataBase } from "src/ts/storage/database";
import { CurrentChat } from "src/ts/stores"; import { CurrentChat } from "src/ts/stores";
import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
export let close = () => {} export let close = () => {}
</script> </script>
@@ -63,6 +64,8 @@
</div> </div>
<div> <div>
<Button className="mt-4 flex-grow-0" size="sm" on:click={() => { <Button className="mt-4 flex-grow-0" size="sm" on:click={() => {
$SettingsMenuIndex = 14
$settingsOpen = true
close() close()
}}>{language.edit}</Button> }}>{language.edit}</Button>
</div> </div>

130
src/lib/Setting/Settings.svelte
View File

@@ -8,7 +8,7 @@
import PluginSettings from "./Pages/PluginSettings.svelte"; import PluginSettings from "./Pages/PluginSettings.svelte";
import FilesSettings from "./Pages/FilesSettings.svelte"; import FilesSettings from "./Pages/FilesSettings.svelte";
import AdvancedSettings from "./Pages/AdvancedSettings.svelte"; import AdvancedSettings from "./Pages/AdvancedSettings.svelte";
import { settingsOpen } from "src/ts/stores"; import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
import Botpreset from "./botpreset.svelte"; import Botpreset from "./botpreset.svelte";
import Communities from "./Pages/Communities.svelte"; import Communities from "./Pages/Communities.svelte";
import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte"; import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte";
@@ -20,133 +20,133 @@
import PromptSettings from "./Pages/PromptSettings.svelte"; import PromptSettings from "./Pages/PromptSettings.svelte";
import ThanksPage from "./Pages/ThanksPage.svelte"; import ThanksPage from "./Pages/ThanksPage.svelte";
import ModuleSettings from "./Pages/Module/ModuleSettings.svelte"; import ModuleSettings from "./Pages/Module/ModuleSettings.svelte";
let selected = -1
let openPresetList = false let openPresetList = false
let openLoreList = false let openLoreList = false
if(window.innerWidth >= 700 && selected === -1){ if(window.innerWidth >= 900 && $SettingsMenuIndex === -1){
selected = 1 $SettingsMenuIndex = 1
} }
</script> </script>
<div class="h-full w-full flex justify-center setting-bg"> <div class="h-full w-full flex justify-center setting-bg">
<div class="h-full max-w-screen-lg w-full flex relative"> <div class="h-full max-w-screen-lg w-full flex relative">
{#if window.innerWidth >= 700 || selected === -1} {#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" <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}> class:w-full={window.innerWidth < 700}>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 1 || selected === 13} class:text-textcolor={$SettingsMenuIndex === 1 || $SettingsMenuIndex === 13}
class:text-textcolor2={selected !== 1 && selected !== 13} class:text-textcolor2={$SettingsMenuIndex !== 1 && $SettingsMenuIndex !== 13}
on:click={() => { on:click={() => {
selected = 1 $SettingsMenuIndex = 1
}}> }}>
<BotIcon /> <BotIcon />
<span>{language.chatBot}</span> <span>{language.chatBot}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 12} class:text-textcolor={$SettingsMenuIndex === 12}
class:text-textcolor2={selected !== 12} class:text-textcolor2={$SettingsMenuIndex !== 12}
on:click={() => { on:click={() => {
selected = 12 $SettingsMenuIndex = 12
}}> }}>
<ContactIcon /> <ContactIcon />
<span>{language.persona}</span> <span>{language.persona}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 2} class:text-textcolor={$SettingsMenuIndex === 2}
class:text-textcolor2={selected !== 2} class:text-textcolor2={$SettingsMenuIndex !== 2}
on:click={() => { on:click={() => {
selected = 2 $SettingsMenuIndex = 2
}}> }}>
<Sailboat /> <Sailboat />
<span>{language.otherBots}</span> <span>{language.otherBots}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 3} class:text-textcolor={$SettingsMenuIndex === 3}
class:text-textcolor2={selected !== 3} class:text-textcolor2={$SettingsMenuIndex !== 3}
on:click={() => { on:click={() => {
selected = 3 $SettingsMenuIndex = 3
}}> }}>
<MonitorIcon /> <MonitorIcon />
<span>{language.display}</span> <span>{language.display}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 10} class:text-textcolor={$SettingsMenuIndex === 10}
class:text-textcolor2={selected !== 10} class:text-textcolor2={$SettingsMenuIndex !== 10}
on:click={() => { on:click={() => {
selected = 10 $SettingsMenuIndex = 10
}}> }}>
<LanguagesIcon /> <LanguagesIcon />
<span>{language.language}</span> <span>{language.language}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 11} class:text-textcolor={$SettingsMenuIndex === 11}
class:text-textcolor2={selected !== 11} class:text-textcolor2={$SettingsMenuIndex !== 11}
on:click={() => { on:click={() => {
selected = 11 $SettingsMenuIndex = 11
}}> }}>
<AccessibilityIcon /> <AccessibilityIcon />
<span>{language.accessibility}</span> <span>{language.accessibility}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 8} class:text-textcolor={$SettingsMenuIndex === 8}
class:text-textcolor2={selected !== 8} class:text-textcolor2={$SettingsMenuIndex !== 8}
on:click={() => { on:click={() => {
selected = 8 $SettingsMenuIndex = 8
}}> }}>
<BookIcon /> <BookIcon />
<span>{language.globalLoreBook}</span> <span>{language.globalLoreBook}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 9} class:text-textcolor={$SettingsMenuIndex === 9}
class:text-textcolor2={selected !== 9} class:text-textcolor2={$SettingsMenuIndex !== 9}
on:click={() => { on:click={() => {
selected = 9 $SettingsMenuIndex = 9
}}> }}>
<AlignLeft /> <AlignLeft />
<span>{language.globalRegexScript}</span> <span>{language.globalRegexScript}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 14} class:text-textcolor={$SettingsMenuIndex === 14}
class:text-textcolor2={selected !== 14} class:text-textcolor2={$SettingsMenuIndex !== 14}
on:click={() => { on:click={() => {
selected = 14 $SettingsMenuIndex = 14
}}> }}>
<PackageIcon /> <PackageIcon />
<span>{language.modules}</span> <span>{language.modules}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 4} class:text-textcolor={$SettingsMenuIndex === 4}
class:text-textcolor2={selected !== 4} class:text-textcolor2={$SettingsMenuIndex !== 4}
on:click={() => { on:click={() => {
selected = 4 $SettingsMenuIndex = 4
}}> }}>
<CodeIcon /> <CodeIcon />
<span>{language.plugin}</span> <span>{language.plugin}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 0} class:text-textcolor={$SettingsMenuIndex === 0}
class:text-textcolor2={selected !== 0} class:text-textcolor2={$SettingsMenuIndex !== 0}
on:click={() => { on:click={() => {
selected = 0 $SettingsMenuIndex = 0
}}> }}>
<UserIcon /> <UserIcon />
<span>{language.account} & {language.files}</span> <span>{language.account} & {language.files}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 6} class:text-textcolor={$SettingsMenuIndex === 6}
class:text-textcolor2={selected !== 6} class:text-textcolor2={$SettingsMenuIndex !== 6}
on:click={() => { on:click={() => {
selected = 6 $SettingsMenuIndex = 6
}}> }}>
<ActivityIcon /> <ActivityIcon />
<span>{language.advancedSettings}</span> <span>{language.advancedSettings}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 77} class:text-textcolor={$SettingsMenuIndex === 77}
class:text-textcolor2={selected !== 77} class:text-textcolor2={$SettingsMenuIndex !== 77}
on:click={() => { on:click={() => {
selected = 77 $SettingsMenuIndex = 77
}}> }}>
<BoxIcon /> <BoxIcon />
<span>{language.supporterThanks}</span> <span>{language.supporterThanks}</span>
@@ -158,44 +158,44 @@
{/if} {/if}
</div> </div>
{/if} {/if}
{#if window.innerWidth >= 700 || selected !== -1} {#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
{#key selected} {#key $SettingsMenuIndex}
<div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative"> <div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
{#if selected === 0} {#if $SettingsMenuIndex === 0}
<UserSettings /> <UserSettings />
{:else if selected === 1} {:else if $SettingsMenuIndex === 1}
<BotSettings bind:openPresetList goPromptTemplate={() => { <BotSettings bind:openPresetList goPromptTemplate={() => {
selected = 13 $SettingsMenuIndex = 13
}} /> }} />
{:else if selected === 2} {:else if $SettingsMenuIndex === 2}
<OtherBotSettings /> <OtherBotSettings />
{:else if selected === 3} {:else if $SettingsMenuIndex === 3}
<DisplaySettings /> <DisplaySettings />
{:else if selected === 4} {:else if $SettingsMenuIndex === 4}
<PluginSettings /> <PluginSettings />
{:else if selected === 5} {:else if $SettingsMenuIndex === 5}
<FilesSettings /> <FilesSettings />
{:else if selected === 6} {:else if $SettingsMenuIndex === 6}
<AdvancedSettings /> <AdvancedSettings />
{:else if selected === 7} {:else if $SettingsMenuIndex === 7}
<Communities /> <Communities />
{:else if selected === 8} {:else if $SettingsMenuIndex === 8}
<GlobalLoreBookSettings bind:openLoreList /> <GlobalLoreBookSettings bind:openLoreList />
{:else if selected === 9} {:else if $SettingsMenuIndex === 9}
<GlobalRegex/> <GlobalRegex/>
{:else if selected === 10} {:else if $SettingsMenuIndex === 10}
<LanguageSettings/> <LanguageSettings/>
{:else if selected === 11} {:else if $SettingsMenuIndex === 11}
<AccessibilitySettings/> <AccessibilitySettings/>
{:else if selected === 12} {:else if $SettingsMenuIndex === 12}
<PersonaSettings/> <PersonaSettings/>
{:else if selected === 14} {:else if $SettingsMenuIndex === 14}
<ModuleSettings/> <ModuleSettings/>
{:else if selected === 13} {:else if $SettingsMenuIndex === 13}
<PromptSettings onGoBack={() => { <PromptSettings onGoBack={() => {
selected = 1 $SettingsMenuIndex = 1
}}/> }}/>
{:else if selected === 77} {:else if $SettingsMenuIndex === 77}
<ThanksPage/> <ThanksPage/>
{/if} {/if}
</div> </div>
@@ -205,7 +205,7 @@
settingsOpen.set(false) settingsOpen.set(false)
} }
else{ else{
selected = -1 $SettingsMenuIndex = -1
} }
}}> }}>
<XCircleIcon /> <XCircleIcon />

1
src/ts/stores.ts
View File

@@ -37,6 +37,7 @@ export const CurrentUsername = writable(db.username)
export const CurrentUserIcon = writable(db.userIcon) export const CurrentUserIcon = writable(db.userIcon)
export const CurrentShowMemoryLimit = writable(db.showMemoryLimit) export const CurrentShowMemoryLimit = writable(db.showMemoryLimit)
export const ShowVN = writable(false) export const ShowVN = writable(false)
export const SettingsMenuIndex = writable(0)
function createSimpleCharacter(char:character|groupChat){ function createSimpleCharacter(char:character|groupChat){
if((!char) || char.type === 'group'){ if((!char) || char.type === 'group'){