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

[feat] new sidebar

Browse Source
This commit is contained in:
kwaroran
2023-07-26 00:13:56 +09:00
parent 9d0c48574d
commit 5e9683a5e4
22 changed files with 186 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/SideBars/CharConfig.svelte
View File

@@ -4,7 +4,7 @@
import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
import { selectedCharID } from "../../ts/stores";
import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
import Check from "../UI/GUI/Check.svelte";
import Check from "../UI/GUI/CheckInput.svelte";
import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
import LoreBook from "./LoreBook/LoreBookSetting.svelte";
import { alertConfirm, alertError, alertNormal, alertSelectChar, alertTOS } from "../../ts/alert";

2
src/lib/SideBars/LoreBook/LoreBookData.svelte
View File

@@ -3,7 +3,7 @@
import { language } from "../../../lang";
import type { loreBook } from "../../../ts/storage/database";
import { alertConfirm } from "../../../ts/alert";
import Check from "../../UI/GUI/Check.svelte";
import Check from "../../UI/GUI/CheckInput.svelte";
import Help from "../../Others/Help.svelte";
import TextInput from "../../UI/GUI/TextInput.svelte";
import NumberInput from "../../UI/GUI/NumberInput.svelte";

2
src/lib/SideBars/LoreBook/LoreBookSetting.svelte
View File

@@ -4,7 +4,7 @@
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 Check from "../../UI/GUI/CheckInput.svelte";
import NumberInput from "../../UI/GUI/NumberInput.svelte";
import LoreBookList from "./LoreBookList.svelte";

2
src/lib/SideBars/Regex/RegexData.svelte
View File

@@ -3,7 +3,7 @@
import { language } from "src/lang";
import { alertConfirm } from "src/ts/alert";
import type { customscript } from "src/ts/storage/database";
import Check from "../../UI/GUI/Check.svelte";
import Check from "../../UI/GUI/CheckInput.svelte";
import TextInput from "../../UI/GUI/TextInput.svelte";
import SelectInput from "../../UI/GUI/SelectInput.svelte";
import OptionInput from "../../UI/GUI/OptionInput.svelte";

93
src/lib/SideBars/SideChatList.svelte Normal file
View File

@@ -0,0 +1,93 @@
<script lang="ts">
import type { character, groupChat } from "src/ts/storage/database";
import { DataBase } from "src/ts/storage/database";
import TextInput from "../UI/GUI/TextInput.svelte";
import { DownloadIcon, TrashIcon } from "lucide-svelte";
import { exportChat } from "src/ts/characters";
import { alertConfirm, alertError } from "src/ts/alert";
import { language } from "src/lang";
import Button from "../UI/GUI/Button.svelte";
import { findCharacterbyId } from "src/ts/util";
import CheckInput from "../UI/GUI/CheckInput.svelte";
export let chara:character|groupChat
let editMode = false
</script>
<div class="flex flex-col w-full h-[calc(100%-2rem)] max-h-[calc(100%-2rem)]">
<Button className="relative bottom-2" on:click={() => {
const cha = chara
const len = chara.chats.length
let chats = chara.chats
chats.unshift({
message:[], note:'', name:`New Chat ${len + 1}`, localLore:[]
})
if(cha.type === 'group'){
cha.characters.map((c) => {
chats[len].message.push({
saying: c,
role: 'char',
data: findCharacterbyId(c).firstMessage
})
})
}
chara.chats = chats
chara.chatPage = 0
}}>New Chat</Button>
<div class="flex flex-col w-full mt-2 overflow-y-auto flex-grow">
{#each chara.chats as chat, i}
<button on:click={() => {
if(!editMode){
chara.chatPage = i
}
}} class="flex items-center text-neutral-200 border-solid border-0 border-gray-600 p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
{#if editMode}
<TextInput bind:value={chara.chats[i].name} padding={false}/>
{:else}
<span>{chat.name}</span>
{/if}
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
exportChat(i)
}}>
<DownloadIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
if(chara.chats.length === 1){
alertError(language.errors.onlyOneChat)
return
}
const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
if(d){
chara.chatPage = 0
let chats = chara.chats
chats.splice(i, 1)
chara.chats = chats
}
}}>
<TrashIcon size={18}/>
</button>
</div>
</button>
{/each}
</div>
<div class="border-t border-selected mt-2">
<div class="flex mt-2 items-center">
<CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
</div>
{#if $DataBase.supaMemoryType !== 'none'}
<div class="flex mt-2 items-center">
<CheckInput bind:check={chara.supaMemory} name={language.ToggleSuperMemory}/>
</div>
{/if}
</div>
{#if chara.type === 'group'}
<div class="flex mt-2 items-center">
<CheckInput bind:check={chara.orderByOrder} name={language.orderByOrder}/>
</div>
{/if}
</div>

33
src/lib/SideBars/Sidebar.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import {
CharEmotion,
SizeStore,
DynamicGUI,
botMakerMode,
selectedCharID,
settingsOpen,
sideBarStore,
@@ -41,6 +42,7 @@
import Button from "../UI/GUI/Button.svelte";
import { fly } from "svelte/transition";
import { alertInput, alertSelect } from "src/ts/alert";
import SideChatList from "./SideChatList.svelte";
let openPresetList = false;
let sideBarMode = 0;
let editMode = false;
@@ -581,7 +583,7 @@
class="setting-area flex w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200 max-h-full"
class:risu-sidebar={!closing}
class:risu-sidebar-close={closing}
class:minw96={$SizeStore.w > 1028}
class:minw96={!$DynamicGUI}
on:animationend={() => {
if(closing){
closing = false
@@ -598,7 +600,7 @@
closing = true;
}}
>
<button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
<!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
</button>
{#if sideBarMode === 0}
{#if $selectedCharID < 0 || $settingsOpen}
@@ -607,7 +609,15 @@
<span class="text-xs text-gray-400">Select a bot to start chating</span>
</div>
{:else}
<CharConfig />
<div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
<button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-gray-500={$botMakerMode}>Chat</button>
<button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-gray-500={!$botMakerMode}>Bot</button>
</div>
{#if $botMakerMode}
<CharConfig />
{:else}
<SideChatList bind:chara={ $DataBase.characters[$selectedCharID]} />
{/if}
{/if}
{:else if sideBarMode === 1}
<Button
@@ -645,8 +655,13 @@
/>
{/if}
{#if $SizeStore.w <= 1028}
<div class="flex-grow h-full"
{#if $DynamicGUI}
<div class="flex-grow h-full min-w-12" on:click={() => {
if(closing){
return
}
closing = true;
}}
class:sidebar-dark-animation={!closing}
class:sidebar-dark-close-animation={closing}>
@@ -664,24 +679,18 @@
@keyframes sidebar-transition {
from {
width: 0rem;
min-width: 0rem;
}
to {
width: 24rem;
min-width: 24rem;
}
}
@keyframes sidebar-transition-close {
from {
width: 24rem;
min-width: 24rem;
max-width: 24rem;
right:0rem;
}
to {
width: 0rem;
min-width: 0rem;
max-width: 0rem;
right: 10rem;
}
}