[feat] added lorebook sorting
This commit is contained in:
kwaroran
97
src/lib/SideBars/LoreBook/LoreBookData.svelte
Normal file
97
src/lib/SideBars/LoreBook/LoreBookData.svelte
Normal file
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
import { XIcon } from "lucide-svelte";
|
||||
import { language } from "../../../lang";
|
||||
import type { loreBook } from "../../../ts/storage/database";
|
||||
import { alertConfirm } from "../../../ts/alert";
|
||||
import Check from "../../UI/GUI/Check.svelte";
|
||||
import Help from "../../Others/Help.svelte";
|
||||
import TextInput from "../../UI/GUI/TextInput.svelte";
|
||||
import NumberInput from "../../UI/GUI/NumberInput.svelte";
|
||||
import TextAreaInput from "../../UI/GUI/TextAreaInput.svelte";
|
||||
export let value:loreBook
|
||||
export let onRemove: () => void = () => {}
|
||||
export let idx:number
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
value.secondkey = value.secondkey ?? ''
|
||||
open = !open
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? value.key.length === 0 ? "Unnamed Lore" : value.key : value.comment}</span>
|
||||
</button>
|
||||
<button class="valuer" on:click={async () => {
|
||||
const d = await alertConfirm(language.removeConfirm + value.comment)
|
||||
if(d){
|
||||
onRemove()
|
||||
}
|
||||
}}>
|
||||
<XIcon />
|
||||
</button>
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="border-0 outline-none w-full mt-2 flex flex-col mb-2">
|
||||
<span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
|
||||
<TextInput size="sm" bind:value={value.comment}/>
|
||||
{#if !value.alwaysActive}
|
||||
<span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
|
||||
<span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
|
||||
<TextInput size="sm" bind:value={value.key}/>
|
||||
|
||||
{#if value.selective}
|
||||
<span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
|
||||
<span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
|
||||
<TextInput size="sm" bind:value={value.secondkey}/>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !(value.activationPercent === undefined || value.activationPercent === null)}
|
||||
<span class="text-neutral-200 mt-6">{language.activationProbability}</span>
|
||||
<NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
|
||||
if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
|
||||
value.activationPercent = 0
|
||||
}
|
||||
if(value.activationPercent > 100){
|
||||
value.activationPercent = 100
|
||||
}
|
||||
}} />
|
||||
{/if}
|
||||
<span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
|
||||
<NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
|
||||
<span class="text-neutral-200 mt-4 mb-2">{language.prompt}</span>
|
||||
<TextAreaInput autocomplete="off" bind:value={value.content} />
|
||||
<div class="flex items-center mt-4">
|
||||
<Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={value.selective} name={language.selective}/>
|
||||
<Help key="loreSelective" name={language.selective}/>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 mb-6">
|
||||
{#if value.activationPercent === undefined || value.activationPercent === null}
|
||||
<Check name={language.loreRandomActivation} check={false} onChange={() => {value.activationPercent = 50}}/>
|
||||
{:else}
|
||||
<Check name={language.loreRandomActivation} check={true} onChange={() => {value.activationPercent = null}}/>
|
||||
{/if}
|
||||
<span><Help name={language.loreRandomActivation} key="loreRandomActivation"/></span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
99
src/lib/SideBars/LoreBook/LoreBookList.svelte
Normal file
99
src/lib/SideBars/LoreBook/LoreBookList.svelte
Normal file
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { DataBase, type loreBook } from "src/ts/storage/database";
|
||||
import LoreBookData from "./LoreBookData.svelte";
|
||||
import { selectedCharID } from "src/ts/stores";
|
||||
import Sortable from 'sortablejs/modular/sortable.core.esm.js';
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { sleep } from "src/ts/util";
|
||||
|
||||
export let globalMode = false
|
||||
export let submenu = 0
|
||||
let stb: Sortable = null
|
||||
let ele: HTMLDivElement
|
||||
let sorted = 0
|
||||
const createStb = () => {
|
||||
stb = Sortable.create(ele, {
|
||||
onEnd: async () => {
|
||||
let idx:number[] = []
|
||||
ele.querySelectorAll('[data-risu-idx]').forEach((e, i) => {
|
||||
idx.push(parseInt(e.getAttribute('data-risu-idx')))
|
||||
})
|
||||
if(globalMode){
|
||||
let newLore:loreBook[] = []
|
||||
idx.forEach((i) => {
|
||||
newLore.push($DataBase.loreBook[$DataBase.loreBookPage].data[i])
|
||||
})
|
||||
$DataBase.loreBook[$DataBase.loreBookPage].data = newLore
|
||||
}
|
||||
else if(submenu === 1){
|
||||
let newLore:loreBook[] = []
|
||||
idx.forEach((i) => {
|
||||
newLore.push($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i])
|
||||
})
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = newLore
|
||||
}
|
||||
else{
|
||||
let newLore:loreBook[] = []
|
||||
idx.forEach((i) => {
|
||||
newLore.push($DataBase.characters[$selectedCharID].globalLore[i])
|
||||
})
|
||||
$DataBase.characters[$selectedCharID].globalLore = newLore
|
||||
}
|
||||
stb.destroy()
|
||||
sorted += 1
|
||||
await sleep(1)
|
||||
createStb()
|
||||
}
|
||||
})
|
||||
}
|
||||
onMount(createStb)
|
||||
|
||||
onDestroy(() => {
|
||||
if(stb){
|
||||
stb.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<div class="border-solid border-selected p-2 flex flex-col border-1 rounded-md" bind:this={ele}>
|
||||
{#key sorted}
|
||||
{#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}
|
||||
<LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={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}
|
||||
<LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={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}
|
||||
<LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={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}
|
||||
{/key}
|
||||
</div>
|
||||
86
src/lib/SideBars/LoreBook/LoreBookSetting.svelte
Normal file
86
src/lib/SideBars/LoreBook/LoreBookSetting.svelte
Normal file
@@ -0,0 +1,86 @@
|
||||
<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 Check from "../../UI/GUI/Check.svelte";
|
||||
import NumberInput from "../../UI/GUI/NumberInput.svelte";
|
||||
import LoreBookList from "./LoreBookList.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}
|
||||
<LoreBookList bind:globalMode bind:submenu />
|
||||
{: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}
|
||||
Reference in New Issue
Block a user