risuai/src/lib/SideBars/LoreBookSetting.svelte

<script lang="ts">
    import { DataBase } from "../../ts/storage/database";
    import { language } from "../../lang";
    import {selectedCharID} from '../../ts/stores'
    import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
    import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/process/lorebook";
    import LoreBookData from "./LoreBookData.svelte";
    import Check from "../UI/GUI/Check.svelte";
  import NumberInput from "../UI/GUI/NumberInput.svelte";
    let submenu = 0
    export let globalMode = false
</script>

{#if !globalMode}
    <div class="flex w-full rounded-md border border-selected">
        <button on:click={() => {
            submenu = 0
        }} class="p-2 flex-1" class:bg-selected={submenu === 0}>
            <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
        </button>
        <button on:click={() => {
            submenu = 1
        }} class="p2 flex-1 border-r border-l border-selected" class:bg-selected={submenu === 1}>
            <span>{language.Chat}</span>
        </button>
        <button on:click={() => {
            submenu = 2
        }} class="p-2 flex-1" class:bg-selected={submenu === 2}>
            <span>{language.settings}</span>
        </button>
    </div>
{/if}
{#if submenu !== 2}
    {#if !globalMode}
        <span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
    {/if}
    <div class="border-solid border-selected p-2 flex flex-col border-1 rounded-md">
        {#if globalMode}
            {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
                <span class="text-gray-500">No Lorebook</span>
            {:else}
                {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
                    {#if i !== 0}
                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
                    {/if}
                    <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} onRemove={() => {
                        let lore = $DataBase.loreBook[$DataBase.loreBookPage].data
                        lore.splice(i, 1)
                        $DataBase.loreBook[$DataBase.loreBookPage].data = lore
                    }}/>
                {/each}
            {/if}
        {:else if submenu === 0}
            {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
                <span class="text-gray-500">No Lorebook</span>
            {:else}
                {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
                    {#if i !== 0}
                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
                    {/if}
                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} onRemove={() => {
                        let lore  = $DataBase.characters[$selectedCharID].globalLore
                        lore.splice(i, 1)
                        $DataBase.characters[$selectedCharID].globalLore = lore
                    }}/>
                {/each}
            {/if}
        {:else if submenu === 1}
            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
                <span class="text-gray-500">No Lorebook</span>
            {:else}
                {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
                    {#if i !== 0}
                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
                    {/if}
                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} onRemove={() => {
                        let lore  = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore
                        lore.splice(i, 1)
                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = lore
                    }}/>
                {/each}
            {/if}
        {/if}
    </div>
{:else}
    {#if $DataBase.characters[$selectedCharID].loreSettings}
        <div class="flex items-center mt-4">
            <Check check={false} onChange={() => {
                $DataBase.characters[$selectedCharID].loreSettings = undefined
            }}
            name={language.useGlobalSettings}
            />
        </div>
        <div class="flex items-center mt-4">
            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
        </div>
        <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
        <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
        <span class="text-neutral-200">{language.loreBookToken}</span>
        <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
    {:else}
        <div class="flex items-center mt-4">
            <Check check={true} onChange={() => {
                $DataBase.characters[$selectedCharID].loreSettings = {
                    tokenBudget: $DataBase.loreBookToken,
                    scanDepth:$DataBase.loreBookDepth,
                    recursiveScanning: false
                }
            }}
            name={language.useGlobalSettings}
            />
        </div>
    {/if}
{/if}
{#if submenu !== 2}

<div class="text-gray-500 mt-2 flex">
    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
        <PlusIcon />
    </button>
    <button on:click={() => {
        exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
        <DownloadIcon />
    </button>
    <button on:click={() => {
        importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
        <FolderUpIcon />
    </button>
</div>
{/if}
<style>
    .seperator{
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }
</style>