Risuai 0.6.3 first commit
This commit is contained in:
kwaroran
39
src/lib/ChatScreens/AutoresizeArea.svelte
Normal file
39
src/lib/ChatScreens/AutoresizeArea.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { DataBase } from "../../ts/database";
|
||||
|
||||
let textarea;
|
||||
let previousScrollHeight = 0;
|
||||
export let value = ''
|
||||
|
||||
function resize() {
|
||||
textarea.style.height = '0px'; // Reset the textarea height
|
||||
textarea.style.height = `calc(${textarea.scrollHeight}px + 1rem)`; // Set the new height
|
||||
}
|
||||
|
||||
function handleInput() {
|
||||
if (textarea.scrollHeight !== previousScrollHeight) {
|
||||
previousScrollHeight = textarea.scrollHeight;
|
||||
resize();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 1px solid rgba(98, 114, 164, 0.5);
|
||||
max-width: calc(95% - 2rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<textarea bind:this={textarea} on:input={handleInput} bind:value={value} style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem" style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem" />
|
||||
153
src/lib/ChatScreens/Chat.svelte
Normal file
153
src/lib/ChatScreens/Chat.svelte
Normal file
@@ -0,0 +1,153 @@
|
||||
<script lang="ts">
|
||||
import { ArrowLeft, ArrowRight, ChevronLeftIcon, ChevronRightIcon, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
|
||||
import { ParseMarkdown } from "../../ts/parser";
|
||||
import AutoresizeArea from "./AutoresizeArea.svelte";
|
||||
import { alertConfirm } from "../../ts/alert";
|
||||
import { language } from "../../lang";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
import { translate } from "../../ts/translator/translator";
|
||||
import { replacePlaceholders } from "../../ts/util";
|
||||
export let message = ''
|
||||
export let name = ''
|
||||
export let img = ''
|
||||
export let idx = -1
|
||||
export let rerollIcon = false
|
||||
export let onReroll = () => {}
|
||||
export let unReroll = () => {}
|
||||
let translating = false
|
||||
let editMode = false
|
||||
|
||||
let msgDisplay = ''
|
||||
|
||||
async function rm(){
|
||||
const rm = await alertConfirm(language.removeChat)
|
||||
if(rm){
|
||||
if($DataBase.instantRemove){
|
||||
const r = await alertConfirm(language.instantRemoveConfirm)
|
||||
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
|
||||
if(!r){
|
||||
msg = msg.slice(0, idx)
|
||||
}
|
||||
else{
|
||||
msg.splice(idx, 1)
|
||||
}
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
|
||||
}
|
||||
else{
|
||||
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
|
||||
msg.splice(idx, 1)
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function edit(){
|
||||
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
|
||||
msg[idx].data = message
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
|
||||
}
|
||||
|
||||
async function displaya(message:string){
|
||||
if($DataBase.autoTranslate && $DataBase.translator !== ''){
|
||||
msgDisplay = replacePlaceholders(message, name)
|
||||
msgDisplay = await translate(replacePlaceholders(message, name), false)
|
||||
}
|
||||
else{
|
||||
msgDisplay = replacePlaceholders(message, name)
|
||||
}
|
||||
}
|
||||
|
||||
$: displaya(message)
|
||||
</script>
|
||||
<div class="flex">
|
||||
<div class="text-neutral-200 mt-2 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start">
|
||||
{#if img === ''}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}>
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={img + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
|
||||
{/if}
|
||||
<span class="flex flex-col ml-4 w-full">
|
||||
<div class="flexium items-center chat">
|
||||
<span class="chat text-xl unmargin">{name}</span>
|
||||
<div class="flex-grow flex items-center justify-end text-gray-500">
|
||||
{#if idx > -1}
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
if(!editMode){
|
||||
editMode = true
|
||||
}
|
||||
else{
|
||||
editMode = false
|
||||
edit()
|
||||
}
|
||||
}}>
|
||||
<EditIcon size={20}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" on:click={rm}>
|
||||
<TrashIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{#if $DataBase.translator !== ''}
|
||||
<button class="ml-2 cursor-pointer hover:text-green-500 transition-colors" class:translating={translating} on:click={async () => {
|
||||
if(translating){
|
||||
return
|
||||
}
|
||||
if(msgDisplay === replacePlaceholders(message, name)){
|
||||
translating = true
|
||||
msgDisplay = (await translate(message, false))
|
||||
translating = false
|
||||
}
|
||||
else{
|
||||
msgDisplay = replacePlaceholders(message, name)
|
||||
}
|
||||
}}>
|
||||
<LanguagesIcon />
|
||||
</button>
|
||||
{/if}
|
||||
{#if rerollIcon}
|
||||
{#if $DataBase.swipe}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" on:click={unReroll}>
|
||||
<ArrowLeft size={22}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
|
||||
<ArrowRight size={22}/>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
|
||||
<RefreshCcwIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if editMode}
|
||||
<AutoresizeArea bind:value={message} />
|
||||
{:else}
|
||||
<span class="text chat chattext prose prose-invert"
|
||||
style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
|
||||
style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
|
||||
>{@html ParseMarkdown(msgDisplay)}</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.flexium{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.chat{
|
||||
max-width: calc(95% - 0.5rem);
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.translating{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
}
|
||||
</style>
|
||||
70
src/lib/ChatScreens/ChatScreen.svelte
Normal file
70
src/lib/ChatScreens/ChatScreen.svelte
Normal file
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import { getCustomBackground, getEmotion } from "../../ts/util";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import { CharEmotion, SizeStore, selectedCharID, sideBarStore } from "../../ts/stores";
|
||||
import ResizeBox from './ResizeBox.svelte'
|
||||
import DefaultChatScreen from "./DefaultChatScreen.svelte";
|
||||
import defaultWallpaper from '../../etc/bg.jpg'
|
||||
import ChatList from "../Others/ChatList.svelte";
|
||||
import TransitionImage from "./TransitionImage.svelte";
|
||||
let openChatList = false
|
||||
|
||||
const wallPaper = `background: url(${defaultWallpaper})`
|
||||
let bgImg= ''
|
||||
let lastBg = ''
|
||||
|
||||
$: (async () =>{
|
||||
if($DataBase.customBackground !== lastBg){
|
||||
lastBg = $DataBase.customBackground
|
||||
bgImg = await getCustomBackground($DataBase.customBackground)
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
{#if $DataBase.theme === ''}
|
||||
<div class="flex-grow h-full" style={bgImg}>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
|
||||
<ResizeBox />
|
||||
{/if}
|
||||
{/if}
|
||||
<DefaultChatScreen customStyle={bgImg.length > 2 ? 'background: rgba(0,0,0,0.8)': ''} bind:openChatList/>
|
||||
</div>
|
||||
{:else if $DataBase.theme === 'waifu'}
|
||||
<div class="flex-grow h-full flex justify-center" style="max-width:calc({$sideBarStore ? $SizeStore.w - 400 : $SizeStore.w}px);{bgImg.length < 4 ? wallPaper : bgImg}">
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
|
||||
<div class="h-full mr-10 flex justify-end halfw" style:width="{42 * ($DataBase.waifuWidth2 / 100)}rem">
|
||||
<TransitionImage classType="waifu" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="h-full w-2xl" style:width="{42 * ($DataBase.waifuWidth / 100)}rem" class:halfwp={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}>
|
||||
<DefaultChatScreen customStyle={'background: rgba(0,0,0,0.8);backdrop-filter: blur(4px);'} bind:openChatList/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if $DataBase.theme === 'waifuMobile'}
|
||||
<div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
|
||||
<div class="w-full h-1/3 absolute z-10 bottom-0 left-0">
|
||||
<DefaultChatScreen customStyle={'background: rgba(0,0,0,0.8);backdrop-filter: blur(4px);'} bind:openChatList/>
|
||||
</div>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
|
||||
<div class="h-full w-full absolute bottom-0 left-0 max-w-full">
|
||||
<TransitionImage classType="mobile" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if openChatList}
|
||||
<ChatList close={() => {openChatList = false}}/>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.halfw{
|
||||
max-width: calc(50% - 5rem);
|
||||
}
|
||||
.halfwp{
|
||||
max-width: calc(50% - 5rem);
|
||||
}
|
||||
</style>
|
||||
381
src/lib/ChatScreens/DefaultChatScreen.svelte
Normal file
381
src/lib/ChatScreens/DefaultChatScreen.svelte
Normal file
@@ -0,0 +1,381 @@
|
||||
<script lang="ts">
|
||||
import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, RefreshCcwIcon, Send } from "lucide-svelte";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
import Chat from "./Chat.svelte";
|
||||
import { DataBase, appVer, type Message } from "../../ts/database";
|
||||
import { getCharImage } from "../../ts/characters";
|
||||
import { doingChat, sendChat } from "../../ts/process/index";
|
||||
import { findCharacterbyId, messageForm } from "../../ts/util";
|
||||
import { language } from "../../lang";
|
||||
import { translate } from "../../ts/translator/translator";
|
||||
import { alertError } from "../../ts/alert";
|
||||
import sendSound from '../../etc/send.mp3'
|
||||
import {cloneDeep} from 'lodash'
|
||||
import { processScript } from "src/ts/process/scripts";
|
||||
|
||||
let messageInput = ''
|
||||
let openMenu = false
|
||||
export let openChatList = false
|
||||
let loadPages = 30
|
||||
let autoMode = false
|
||||
let rerolls:Message[][] = []
|
||||
let rerollid = -1
|
||||
let lastCharId = -1
|
||||
|
||||
async function send() {
|
||||
let selectedChar = $selectedCharID
|
||||
console.log('send')
|
||||
if($doingChat){
|
||||
return
|
||||
}
|
||||
if(lastCharId !== $selectedCharID){
|
||||
rerolls = []
|
||||
rerollid = -1
|
||||
}
|
||||
|
||||
let cha = $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message
|
||||
|
||||
if(messageInput === ''){
|
||||
if($DataBase.characters[selectedChar].type !== 'group'){
|
||||
if(cha.length === 0 || cha[cha.length - 1].role !== 'user'){
|
||||
if($DataBase.useSayNothing){
|
||||
cha.push({
|
||||
role: 'user',
|
||||
data: '*says nothing*'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
const char = $DataBase.characters[selectedChar]
|
||||
if(char.type === 'character'){
|
||||
cha.push({
|
||||
role: 'user',
|
||||
data: processScript(char,messageInput,'editinput')
|
||||
})
|
||||
}
|
||||
else{
|
||||
cha.push({
|
||||
role: 'user',
|
||||
data: messageInput
|
||||
})
|
||||
}
|
||||
}
|
||||
messageInput = ''
|
||||
$DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message = cha
|
||||
rerolls = []
|
||||
await sendChatMain()
|
||||
|
||||
}
|
||||
|
||||
async function reroll() {
|
||||
if($doingChat){
|
||||
return
|
||||
}
|
||||
if(lastCharId !== $selectedCharID){
|
||||
rerolls = []
|
||||
rerollid = -1
|
||||
}
|
||||
if(rerollid < rerolls.length - 1){
|
||||
if(Array.isArray(rerolls[rerollid + 1])){
|
||||
let db = $DataBase
|
||||
rerollid += 1
|
||||
db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cloneDeep(rerolls[rerollid])
|
||||
$DataBase = db
|
||||
}
|
||||
return
|
||||
}
|
||||
if(rerolls.length === 0){
|
||||
rerolls.push($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message)
|
||||
rerollid = rerolls.length - 1
|
||||
}
|
||||
let cha = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
|
||||
if(cha.length === 0 ){
|
||||
return
|
||||
}
|
||||
openMenu = false
|
||||
const saying = cha[cha.length - 1].saying
|
||||
let sayingQu = 2
|
||||
while(cha[cha.length - 1].role !== 'user'){
|
||||
if(cha[cha.length - 1].saying === saying){
|
||||
sayingQu -= 1
|
||||
if(sayingQu === 0){
|
||||
break
|
||||
}
|
||||
}
|
||||
cha.pop()
|
||||
}
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cha
|
||||
await sendChatMain()
|
||||
}
|
||||
|
||||
async function unReroll() {
|
||||
if(rerollid <= 0){
|
||||
return
|
||||
}
|
||||
if(lastCharId !== $selectedCharID){
|
||||
rerolls = []
|
||||
rerollid = -1
|
||||
}
|
||||
if($doingChat){
|
||||
return
|
||||
}
|
||||
if(Array.isArray(rerolls[rerollid - 1])){
|
||||
let db = $DataBase
|
||||
rerollid -= 1
|
||||
db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cloneDeep(rerolls[rerollid])
|
||||
$DataBase = db
|
||||
}
|
||||
}
|
||||
|
||||
async function sendChatMain(saveReroll = false) {
|
||||
messageInput = ''
|
||||
try {
|
||||
await sendChat()
|
||||
} catch (error) {
|
||||
alertError(`${error}`)
|
||||
}
|
||||
rerolls.push(cloneDeep($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message))
|
||||
rerollid = rerolls.length - 1
|
||||
lastCharId = $selectedCharID
|
||||
$doingChat = false
|
||||
if($DataBase.playMessage){
|
||||
const audio = new Audio(sendSound);
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
|
||||
async function runAutoMode() {
|
||||
if(autoMode){
|
||||
autoMode = false
|
||||
return
|
||||
}
|
||||
const selectedChar = $selectedCharID
|
||||
autoMode = true
|
||||
while(autoMode){
|
||||
await sendChatMain()
|
||||
if(selectedChar !== $selectedCharID){
|
||||
autoMode = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export let customStyle = ''
|
||||
let inputHeight = "44px"
|
||||
let inputEle:HTMLTextAreaElement
|
||||
|
||||
async function updateInputSize() {
|
||||
if(inputEle){
|
||||
inputEle.style.height = "0";
|
||||
inputHeight = (inputEle.scrollHeight) + "px";
|
||||
inputEle.style.height = inputHeight
|
||||
}
|
||||
}
|
||||
|
||||
$: updateInputSize()
|
||||
|
||||
</script>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="w-full h-full" style={customStyle} on:click={() => {
|
||||
openMenu = false
|
||||
}}>
|
||||
{#if $selectedCharID < 0}
|
||||
<div class="h-full w-full flex flex-col overflow-y-auto items-center">
|
||||
<h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
|
||||
<h3 class="text-gray-500 mt-1">Version {appVer}</h3>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="h-full w-full flex flex-col-reverse overflow-y-auto relative" on:scroll={(e) => {
|
||||
//@ts-ignore
|
||||
const scrolled = (e.target.scrollHeight - e.target.clientHeight + e.target.scrollTop)
|
||||
if(scrolled < 100 && $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length > loadPages){
|
||||
loadPages += 30
|
||||
}
|
||||
}}>
|
||||
<div class="flex items-end mt-2 mb-2">
|
||||
<textarea class="text-neutral-200 p-2 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected maxw overflow-y-hidden overflow-x-hidden"
|
||||
bind:value={messageInput}
|
||||
bind:this={inputEle}
|
||||
on:keydown={(e) => {
|
||||
if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
|
||||
send()
|
||||
e.preventDefault()
|
||||
}
|
||||
if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
|
||||
reroll()
|
||||
e.preventDefault()
|
||||
}
|
||||
}}
|
||||
on:input={updateInputSize}
|
||||
style:height={inputHeight}
|
||||
/>
|
||||
|
||||
|
||||
{#if $doingChat}
|
||||
<div
|
||||
class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
|
||||
<div class="loadmove" class:autoload={autoMode}>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div on:click={send}
|
||||
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
|
||||
</div>
|
||||
{/if}
|
||||
<div on:click={(e) => {
|
||||
openMenu = !openMenu
|
||||
e.stopPropagation()
|
||||
}}
|
||||
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
|
||||
</div>
|
||||
</div>
|
||||
{#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
|
||||
{#if chat.role === 'char'}
|
||||
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
|
||||
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={chat.data}
|
||||
img={''}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={chat.data}
|
||||
img={im}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
|
||||
/>
|
||||
{/await}
|
||||
{:else}
|
||||
{#await getCharImage(findCharacterbyId(chat.saying).image, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={findCharacterbyId(chat.saying).name}
|
||||
message={chat.data}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
img={''}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={findCharacterbyId(chat.saying).name}
|
||||
rerollIcon={i === 0}
|
||||
message={chat.data}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
img={im}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{:else}
|
||||
{#await getCharImage($DataBase.userIcon, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.username}
|
||||
message={chat.data}
|
||||
img={''}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.username}
|
||||
message={chat.data}
|
||||
img={im}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{/each}
|
||||
{#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
|
||||
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
|
||||
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
<Chat
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={ $DataBase.characters[$selectedCharID].firstMessage}
|
||||
img={''}
|
||||
idx={-1}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={ $DataBase.characters[$selectedCharID].firstMessage}
|
||||
img={im}
|
||||
idx={-1}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{/if}
|
||||
{#if openMenu}
|
||||
<div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
|
||||
e.stopPropagation()
|
||||
}}>
|
||||
{#if $DataBase.characters[$selectedCharID].type === 'group'}
|
||||
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={runAutoMode}>
|
||||
<DicesIcon />
|
||||
<span class="ml-2">{language.autoMode}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
|
||||
openChatList = true
|
||||
openMenu = false
|
||||
}}>
|
||||
<DatabaseIcon />
|
||||
<span class="ml-2">{language.chatList}</span>
|
||||
</div>
|
||||
{#if $DataBase.translator !== ''}
|
||||
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
|
||||
$doingChat = true
|
||||
messageInput = (await translate(messageInput, true))
|
||||
$doingChat = false
|
||||
}}>
|
||||
<LanguagesIcon />
|
||||
<span class="ml-2">{language.translateInput}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={reroll}>
|
||||
<RefreshCcwIcon />
|
||||
<span class="ml-2">{language.reroll}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
<style>
|
||||
.maxw{
|
||||
max-width: calc(100vw - 10rem);
|
||||
}
|
||||
.loadmove {
|
||||
animation: spin 1s linear infinite;
|
||||
border-radius: 50%;
|
||||
border: 0.4rem solid rgba(0,0,0,0);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-top: 0.4rem solid #6272a4;
|
||||
border-left: 0.4rem solid #6272a4;
|
||||
}
|
||||
|
||||
.autoload{
|
||||
border-top: 0.4rem solid #10b981;
|
||||
border-left: 0.4rem solid #10b981;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
21
src/lib/ChatScreens/EmotionBox.svelte
Normal file
21
src/lib/ChatScreens/EmotionBox.svelte
Normal file
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { DataBase } from '../../ts/database';
|
||||
import { CharEmotion } from '../../ts/stores';
|
||||
import { getEmotion } from '../../ts/util';
|
||||
</script>
|
||||
|
||||
{#await getEmotion($DataBase,$CharEmotion, 'contain') then images}
|
||||
{#each images as image, i}
|
||||
<div style={image + `width:${(100 / images.length)}%;bottom:0;left:${100 / images.length * i}%`} class="h-full bg-center absolute" />
|
||||
|
||||
{/each}
|
||||
{/await}
|
||||
|
||||
<style>
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
96
src/lib/ChatScreens/ResizeBox.svelte
Normal file
96
src/lib/ChatScreens/ResizeBox.svelte
Normal file
@@ -0,0 +1,96 @@
|
||||
<script>
|
||||
import { CharEmotion, ViewBoxsize } from '../../ts/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import EmotionBox from './EmotionBox.svelte';
|
||||
import TransitionImage from './TransitionImage.svelte';
|
||||
import { getEmotion } from '../../ts/util';
|
||||
import { DataBase } from '../../ts/database';
|
||||
|
||||
let box;
|
||||
let isResizing = false;
|
||||
let initialWidth;
|
||||
let initialHeight;
|
||||
let initialX;
|
||||
let initialY;
|
||||
|
||||
function handleStart(event) {
|
||||
isResizing = true;
|
||||
initialWidth = box.clientWidth;
|
||||
initialHeight = box.clientHeight;
|
||||
initialX = event.clientX || event.touches[0].clientX;
|
||||
initialY = event.clientY || event.touches[0].clientY;
|
||||
}
|
||||
|
||||
function handleEnd() {
|
||||
isResizing = false;
|
||||
}
|
||||
|
||||
function handleMove(event) {
|
||||
if (!isResizing) return;
|
||||
event.preventDefault();
|
||||
|
||||
const clientX = event.clientX || event.touches[0].clientX;
|
||||
const clientY = event.clientY || event.touches[0].clientY;
|
||||
const deltaX = initialX - clientX;
|
||||
const deltaY = clientY - initialY;
|
||||
|
||||
const newWidth = Math.min(initialWidth + deltaX, window.innerWidth * 0.8);
|
||||
const newHeight = Math.min(initialHeight + deltaY, window.innerHeight * 0.8);
|
||||
|
||||
ViewBoxsize.set({
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('mousemove', handleMove);
|
||||
window.addEventListener('mouseup', handleEnd);
|
||||
window.addEventListener('touchmove', handleMove, { passive: false });
|
||||
window.addEventListener('touchend', handleEnd);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMove);
|
||||
window.removeEventListener('mouseup', handleEnd);
|
||||
window.removeEventListener('touchmove', handleMove);
|
||||
window.removeEventListener('touchend', handleEnd);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
border-bottom: 1px solid #6272a4;
|
||||
border-left: 1px solid #6272a4;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-top: 1px solid #6272a4;
|
||||
border-right: 1px solid #6272a4;
|
||||
cursor: sw-resize;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box bg-darkbg bg-opacity-70" bind:this="{box}" style="width: {$ViewBoxsize.width}px; height: {$ViewBoxsize.height}px;">
|
||||
<!-- Your content here -->
|
||||
<TransitionImage classType='risu' src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
|
||||
<div
|
||||
class="resize-handle"
|
||||
on:mousedown="{handleStart}"
|
||||
on:mouseup="{handleEnd}"
|
||||
on:touchstart="{handleStart}"
|
||||
on:touchend="{handleEnd}"
|
||||
></div>
|
||||
</div>
|
||||
188
src/lib/ChatScreens/TransitionImage.svelte
Normal file
188
src/lib/ChatScreens/TransitionImage.svelte
Normal file
@@ -0,0 +1,188 @@
|
||||
<script lang="ts">
|
||||
let currentSrc:string[] = []
|
||||
let oldSrc:string[] = [];
|
||||
let showOldImage = false;
|
||||
let styleType:string = 'normal'
|
||||
let oldStyleType:string = 'normal'
|
||||
|
||||
export let src:string[]|Promise<string[]> = [];
|
||||
export let classType: 'waifu'|'risu'|'mobile'
|
||||
|
||||
async function processSrc(src:string[]|Promise<string[]>) {
|
||||
const resultSrc = await src
|
||||
|
||||
let styl = styleType
|
||||
if(resultSrc.length > 1){
|
||||
styl = resultSrc[0]
|
||||
resultSrc.splice(0, 1)
|
||||
}
|
||||
if (JSON.stringify(resultSrc) !== JSON.stringify(currentSrc) || styl !== styleType) {
|
||||
handleTransitionEnd()
|
||||
if(currentSrc.length === 0){
|
||||
currentSrc = resultSrc
|
||||
styleType = styl
|
||||
}
|
||||
else{
|
||||
oldSrc = currentSrc
|
||||
oldStyleType = styleType
|
||||
currentSrc = resultSrc
|
||||
styleType = styl
|
||||
showOldImage = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleTransitionEnd() {
|
||||
if (showOldImage) {
|
||||
showOldImage = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: processSrc(src)
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: scale-down;
|
||||
object-position: 50% 100%;
|
||||
}
|
||||
|
||||
.old-image {
|
||||
animation: fadeOutFromNone 0.5s ease-out;
|
||||
}
|
||||
|
||||
.new-image {
|
||||
animation: fadeInFromNone 0.5s ease-out;
|
||||
}
|
||||
.img-waifu{
|
||||
width: 100%; height: 90vh;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.img-mobile{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img-risu{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes fadeInFromNone {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutFromNone {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if currentSrc && currentSrc.length > 0}
|
||||
<div class="image-container"
|
||||
class:img-waifu={classType === 'waifu'}
|
||||
class:img-risu={classType === 'risu'}
|
||||
class:img-mobile={classType === 'mobile'}>
|
||||
{#if !showOldImage}
|
||||
{#each currentSrc as img, i}
|
||||
{#if styleType === 'normal'}
|
||||
<img
|
||||
src={img}
|
||||
alt="img"
|
||||
style:width={`${100 / currentSrc.length}%`}
|
||||
style:left={`${100 / currentSrc.length * i}%`}
|
||||
/>
|
||||
{:else if styleType === 'emp'}
|
||||
{#if i <= 1}
|
||||
<img
|
||||
src={img}
|
||||
alt="img"
|
||||
style:width={`${80 - (i*10)}%`}
|
||||
style:left={`${30-(i*30)}%`}
|
||||
style:z-index={9 - i}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{#if oldStyleType === 'normal'}
|
||||
{#each oldSrc as img2, i}
|
||||
<img
|
||||
src={oldSrc[i]}
|
||||
alt="img"
|
||||
class="old-image"
|
||||
on:animationend={handleTransitionEnd}
|
||||
style:width={`${100 / oldSrc.length}%`}
|
||||
style:left={`${100 / oldSrc.length * i}%`}
|
||||
/>
|
||||
{/each}
|
||||
{:else if oldStyleType === 'emp'}
|
||||
|
||||
{#each oldSrc as img2, i}
|
||||
{#if i <= 1}
|
||||
<img
|
||||
src={oldSrc[i]}
|
||||
alt="img"
|
||||
class="old-image"
|
||||
on:animationend={handleTransitionEnd}
|
||||
style:width={`${80 - (i*10)}%`}
|
||||
style:left={`${30-(i*30)}%`}
|
||||
style:z-index={9 - i}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{#if styleType === 'normal'}
|
||||
{#each currentSrc as img3, i}
|
||||
<img
|
||||
src={currentSrc[i]}
|
||||
alt="img"
|
||||
class="new-image"
|
||||
style:width={`${100 / currentSrc.length}%`}
|
||||
style:left={`${100 / currentSrc.length * i}%`}
|
||||
/>
|
||||
{/each}
|
||||
{:else if styleType === 'emp'}
|
||||
|
||||
{#each currentSrc as img3, i}
|
||||
{#if i <= 1}
|
||||
<img
|
||||
src={currentSrc[i]}
|
||||
alt="img"
|
||||
class="new-image"
|
||||
style:width={`${80 - (i*10)}%`}
|
||||
style:left={`${30-(i*30)}%`}
|
||||
style:z-index={9 - i}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
148
src/lib/Others/AlertComp.svelte
Normal file
148
src/lib/Others/AlertComp.svelte
Normal file
@@ -0,0 +1,148 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { alertStore } from "../../ts/alert";
|
||||
import { DataBase } from '../../ts/database';
|
||||
import { getCharImage } from '../../ts/characters';
|
||||
import { ParseMarkdown } from '../../ts/parser';
|
||||
import BarIcon from '../SideBars/BarIcon.svelte';
|
||||
import { User } from 'lucide-svelte';
|
||||
let btn
|
||||
let input = ''
|
||||
|
||||
$: (() => {
|
||||
if(btn){
|
||||
btn.focus()
|
||||
}
|
||||
if($alertStore.type !== 'input'){
|
||||
input = ''
|
||||
}
|
||||
|
||||
})()
|
||||
</script>
|
||||
|
||||
{#if $alertStore.type !== 'none' && $alertStore.type !== 'toast'}
|
||||
<div class="absolute w-full h-full z-50 bg-black bg-opacity-50 flex justify-center items-center" class:vis={ $alertStore.type === 'wait2'}>
|
||||
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto">
|
||||
{#if $alertStore.type === 'error'}
|
||||
<h2 class="text-red-700 mt-0 mb-2 w-40 max-w-full">Error</h2>
|
||||
{:else if $alertStore.type === 'ask'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Confirm</h2>
|
||||
{:else if $alertStore.type === 'selectChar'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Select</h2>
|
||||
{:else if $alertStore.type === 'input'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Input</h2>
|
||||
{/if}
|
||||
{#if $alertStore.type === 'markdown'}
|
||||
<span class="text-gray-300 chattext prose prose-invert chattext2">{@html ParseMarkdown($alertStore.msg)}</span>
|
||||
{:else if $alertStore.type !== 'select'}
|
||||
<span class="text-gray-300">{$alertStore.msg}</span>
|
||||
{/if}
|
||||
{#if $alertStore.type === 'ask'}
|
||||
<div class="flex gap-2 w-full">
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors flex-1 focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'yes'
|
||||
})
|
||||
}}>YES</button>
|
||||
<button class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-red-500 transition-colors focus:border-3 flex-1" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'no'
|
||||
})
|
||||
}}>NO</button>
|
||||
</div>
|
||||
{:else if $alertStore.type === 'select'}
|
||||
{#each $alertStore.msg.split('||') as n, i}
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: i.toString()
|
||||
})
|
||||
}}>{n}</button>
|
||||
{/each}
|
||||
{:else if $alertStore.type === 'error' || $alertStore.type === 'normal' || $alertStore.type === 'markdown'}
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
}}>OK</button>
|
||||
{:else if $alertStore.type === 'input'}
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected" bind:value={input}>
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: input
|
||||
})
|
||||
}}>OK</button>
|
||||
{:else if $alertStore.type === 'selectChar'}
|
||||
<div class="flex w-full items-start flex-wrap gap-2 justify-start">
|
||||
{#each $DataBase.characters as char, i}
|
||||
{#if char.type !== 'group'}
|
||||
{#if char.image}
|
||||
{#await getCharImage($DataBase.characters[i].image, 'css')}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}}>
|
||||
<User/>
|
||||
</BarIcon>
|
||||
{:then im}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}} additionalStyle={im} />
|
||||
|
||||
{/await}
|
||||
{:else}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}}>
|
||||
<User/>
|
||||
</BarIcon>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if $alertStore.type === 'toast'}
|
||||
<div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto z-50 text-neutral-200"
|
||||
on:animationend={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
}}
|
||||
>{$alertStore.msg}</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.break-any{
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@keyframes toastAnime {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-anime {
|
||||
animation: toastAnime 1s ease-out;
|
||||
}
|
||||
|
||||
.vis{
|
||||
opacity: 1 !important;
|
||||
--tw-bg-opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
104
src/lib/Others/ChatList.svelte
Normal file
104
src/lib/Others/ChatList.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script>
|
||||
import { alertConfirm, alertError } from "../../ts/alert";
|
||||
import { language } from "../../lang";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
import { DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
|
||||
import { exportChat, importChat } from "../../ts/characters";
|
||||
import { findCharacterbyId } from "../../ts/util";
|
||||
|
||||
let editMode = false
|
||||
export let close = () => {}
|
||||
</script>
|
||||
|
||||
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
|
||||
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-72">
|
||||
<div class="flex items-center text-neutral-200 mb-4">
|
||||
<h2 class="mt-0 mb-0">{language.chatList}</h2>
|
||||
<div class="flex-grow flex justify-end">
|
||||
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
|
||||
<XIcon size={24}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#each $DataBase.characters[$selectedCharID].chats as chat, i}
|
||||
<button on:click={() => {
|
||||
if(!editMode){
|
||||
$DataBase.characters[$selectedCharID].chatPage = i
|
||||
close()
|
||||
}
|
||||
}} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
|
||||
{#if editMode}
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.characters[$selectedCharID].chats[i].name} placeholder="string">
|
||||
{: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($DataBase.characters[$selectedCharID].chats.length === 1){
|
||||
alertError(language.errors.onlyOneChat)
|
||||
return
|
||||
}
|
||||
const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
|
||||
if(d){
|
||||
$DataBase.characters[$selectedCharID].chatPage = 0
|
||||
let chats = $DataBase.characters[$selectedCharID].chats
|
||||
chats.splice(i, 1)
|
||||
$DataBase.characters[$selectedCharID].chats = chats
|
||||
}
|
||||
}}>
|
||||
<TrashIcon size={18}/>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex mt-2 items-center">
|
||||
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
|
||||
const cha = $DataBase.characters[$selectedCharID]
|
||||
const len = $DataBase.characters[$selectedCharID].chats.length
|
||||
let chats = $DataBase.characters[$selectedCharID].chats
|
||||
chats.push({
|
||||
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
|
||||
})
|
||||
})
|
||||
}
|
||||
$DataBase.characters[$selectedCharID].chats = chats
|
||||
$DataBase.characters[$selectedCharID].chatPage = len
|
||||
close()
|
||||
}}>
|
||||
<PlusIcon/>
|
||||
</button>
|
||||
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
|
||||
importChat()
|
||||
}}>
|
||||
<FolderUpIcon size={18}/>
|
||||
</button>
|
||||
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
|
||||
editMode = !editMode
|
||||
}}>
|
||||
<EditIcon size={18}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.break-any{
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
19
src/lib/Others/Check.svelte
Normal file
19
src/lib/Others/Check.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { CheckIcon } from "lucide-svelte";
|
||||
|
||||
export let check = false
|
||||
export let onChange = (check) => {}
|
||||
</script>
|
||||
|
||||
<label class="mr-2">
|
||||
<input type="checkbox" class="hidden" bind:checked={check} on:change={() => {
|
||||
onChange(check)
|
||||
}}>
|
||||
{#if check}
|
||||
<div class="w-6 h-6 bg-green-500 flex justify-center items-center text-sm">
|
||||
<CheckIcon />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-6 h-6 bg-selected"></div>
|
||||
{/if}
|
||||
</label>
|
||||
52
src/lib/Others/GridCatalog.svelte
Normal file
52
src/lib/Others/GridCatalog.svelte
Normal file
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { characterFormatUpdate, getCharImage } from "../../ts/characters";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import BarIcon from "../SideBars/BarIcon.svelte";
|
||||
import { User, Users } from "lucide-svelte";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
export let endGrid = () => {}
|
||||
let search = ''
|
||||
|
||||
function changeChar(index = -1){
|
||||
characterFormatUpdate(index)
|
||||
selectedCharID.set(index)
|
||||
endGrid()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="h-full w-full flex justify-center">
|
||||
<div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
|
||||
<h1 class="text-neutral-200 text-2xl font-bold mt-2">Catalog</h1>
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-4/5 text-xl" placeholder="Search" bind:value={search}>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="flex flex-wrap gap-2 mx-auto container">
|
||||
{#each $DataBase.characters.filter((c) => {
|
||||
return c.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
|
||||
}) as char, i}
|
||||
<div class="flex items-center text-neutral-200">
|
||||
{#if char.image}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}></BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
|
||||
{#if char.type === 'group'}
|
||||
<Users />
|
||||
{:else}
|
||||
<User/>
|
||||
{/if}
|
||||
</BarIcon>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
src/lib/Others/Help.svelte
Normal file
19
src/lib/Others/Help.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
|
||||
<button class="relative help inline-block cursor-default hover:text-green-500" on:click={() => {
|
||||
alertMd(language.help[key])
|
||||
}}>
|
||||
{#if key === "experimental"}
|
||||
<FlaskConicalIcon size={14} />
|
||||
{:else}
|
||||
<HelpCircleIcon size={14} />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<script lang="ts">
|
||||
import { FlaskConicalIcon, HelpCircleIcon } from "lucide-svelte";
|
||||
import { language } from "src/lang";
|
||||
import { alertMd } from "src/ts/alert";
|
||||
|
||||
export let key: (keyof (typeof language.help))
|
||||
</script>
|
||||
191
src/lib/Others/WelcomeRisu.svelte
Normal file
191
src/lib/Others/WelcomeRisu.svelte
Normal file
@@ -0,0 +1,191 @@
|
||||
<script>
|
||||
import { ArrowBigLeftIcon } from "lucide-svelte";
|
||||
import { changeLanguage, language } from "src/lang";
|
||||
import { addDefaultCharacters } from "src/ts/characters";
|
||||
import { DataBase } from "src/ts/database";
|
||||
|
||||
let step = 0
|
||||
let provider = 0
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full bg-bgcolor flex justify-center">
|
||||
<article class="max-w-screen-md w-full prose prose-invert bg-darkbg p-5 overflow-y-auto overflow-x-hidden">
|
||||
<div class="w-full justify-center flex">
|
||||
<img src="/logo.png" alt="logo">
|
||||
</div>
|
||||
<div class="w-full justify-center flex">
|
||||
<h1>Welcome to RisuAI!</h1>
|
||||
</div>
|
||||
{#if step === 0}
|
||||
<h2>Choose the language</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('en')
|
||||
step = 1
|
||||
}}>• English</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
changeLanguage('ko')
|
||||
step = 1
|
||||
}}>• 한국어</button>
|
||||
</div>
|
||||
|
||||
{:else if step === 1}
|
||||
<h2>{language.setup.chooseProvider}</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
provider = 1
|
||||
step += 1
|
||||
}}>• {language.setup.openaikey}</button>
|
||||
<button class="hover:text-green-500 transition-colors"on:click={() => {
|
||||
provider = 2
|
||||
step += 1
|
||||
}}>• {language.setup.openaiProxy}</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
provider = 3
|
||||
step += 1
|
||||
}}>• {language.setup.setupmodelself}</button>
|
||||
</div>
|
||||
{:else if step === 2}
|
||||
{#if provider === 1}
|
||||
<h2>{language.setup.openaikey}</h2>
|
||||
<div class="w-full ml-2">
|
||||
<span>API key</span>
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.openAIKey}>
|
||||
</div>
|
||||
<span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
|
||||
<div class="flex flex-col items-start ml-2 mt-6">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
provider = 1
|
||||
step += 1
|
||||
}}>• {language.confirm}</button>
|
||||
</div>
|
||||
{:else if provider === 2}
|
||||
<h2>{language.setup.openaiProxy}</h2>
|
||||
<div class="w-full ml-2">
|
||||
<span>OpenAI Reverse Proxy URL</span>
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.forceReplaceUrl} placeholder="https://...">
|
||||
</div>
|
||||
<div class="w-full ml-2 mt-4">
|
||||
<span>API key (Used for passwords)</span>
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.openAIKey} placeholder="Optional">
|
||||
</div>
|
||||
<div class="flex flex-col items-start ml-2 mt-6">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
provider = 1
|
||||
step += 1
|
||||
}}>• {language.confirm}</button>
|
||||
</div>
|
||||
{:else}
|
||||
<h2>{language.setup.setupmodelself}</h2>
|
||||
<div class="w-full ml-2">
|
||||
<span>{language.setup.setupSelfHelp}</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-start ml-2 mt-6">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
provider = 1
|
||||
step += 1
|
||||
}}>• {language.confirm}</button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if step === 3}
|
||||
<h2>{language.setup.theme}</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = ''
|
||||
step += 1
|
||||
}}><span>• Standard Risu</span>
|
||||
<img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = 'waifu'
|
||||
step += 1
|
||||
}}><span>• Waifulike (Not suitable for mobile)</span>
|
||||
<img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
|
||||
</div>
|
||||
{:else if step === 4}
|
||||
<h2>{language.setup.theme}</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = ''
|
||||
step += 1
|
||||
}}><span>• Standard Risu</span>
|
||||
<img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = 'waifu'
|
||||
step += 1
|
||||
}}><span>• Waifulike</span>
|
||||
<img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
|
||||
</div>
|
||||
{:else if step === 4}
|
||||
<h2>{language.setup.theme}</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = ''
|
||||
step += 1
|
||||
}}><span>• Standard Risu</span>
|
||||
<img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = 'waifu'
|
||||
step += 1
|
||||
}}><span>• Waifulike</span>
|
||||
<img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
|
||||
</div>
|
||||
{:else if step === 5}
|
||||
<h2>{language.setup.texttheme}</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = ''
|
||||
step += 1
|
||||
}}><span>• {language.classicRisu}</span>
|
||||
<div class="border-borderc py-2 px-8 not-prose">
|
||||
<p class="mt-2 mb-0 classic p-0"> Normal Text</p>
|
||||
<p class="mt-2 mb-0 classic-italic italic p-0">Italic Text</p>
|
||||
<p class="mt-2 mb-0 classic font-bold p-0">Bold Text</p>
|
||||
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col items-start ml-2 mt-2 mb-2">
|
||||
<button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
|
||||
$DataBase.theme = ''
|
||||
step += 1
|
||||
}}><span>• {language.highcontrast}</span>
|
||||
<div class="border-borderc p-2 py-2 px-8 not-prose">
|
||||
<p class="mt-2 mb-0 classic p-0" style="color:#f8f8f2"> Normal Text</p>
|
||||
<p class="mt-2 mb-0 classic-italic italic p-0" style="color:#F1FA8C">Italic Text</p>
|
||||
<p class="mt-2 mb-0 classic font-bold p-0" style="color:#FFB86C">Bold Text</p>
|
||||
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{:else if step === 6}
|
||||
<h2>{language.setup.inputName}</h2>
|
||||
<div class="w-full ml-2">
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.username}>
|
||||
</div>
|
||||
<div class="flex flex-col items-start ml-2 mt-6">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={async () => {
|
||||
$DataBase.forceReplaceUrl2 = $DataBase.forceReplaceUrl
|
||||
await addDefaultCharacters()
|
||||
$DataBase.didFirstSetup = true
|
||||
}}>• {language.confirm}</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if step > 0}
|
||||
|
||||
<button class="hover:text-green-500 transition-colors ml-2" on:click={() => {
|
||||
step = step - 1
|
||||
}}>• Go Back</button>
|
||||
{/if}
|
||||
|
||||
</article>
|
||||
</div>
|
||||
<style>
|
||||
.classic{
|
||||
color: #fafafa;
|
||||
}
|
||||
.classic-italic{
|
||||
color: #8C8D93;
|
||||
}
|
||||
</style>
|
||||
83
src/lib/Others/botpreset.svelte
Normal file
83
src/lib/Others/botpreset.svelte
Normal file
@@ -0,0 +1,83 @@
|
||||
<script>
|
||||
import { alertConfirm, alertError } from "../../ts/alert";
|
||||
import { language } from "../../lang";
|
||||
import { DataBase, changeToPreset, presetTemplate } from "../../ts/database";
|
||||
import { EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
|
||||
|
||||
let editMode = false
|
||||
export let close = () => {}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
|
||||
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96">
|
||||
<div class="flex items-center text-neutral-200 mb-4">
|
||||
<h2 class="mt-0 mb-0">{language.presets}</h2>
|
||||
<div class="flex-grow flex justify-end">
|
||||
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
|
||||
<XIcon size={24}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#each $DataBase.botPresets as presets, i}
|
||||
<button on:click={() => {
|
||||
if(!editMode){
|
||||
changeToPreset(i)
|
||||
close()
|
||||
}
|
||||
}} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
|
||||
{#if editMode}
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.botPresets[i].name} placeholder="string">
|
||||
{:else}
|
||||
{#if i < 9}
|
||||
<span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>
|
||||
{/if}
|
||||
<span>{presets.name}</span>
|
||||
{/if}
|
||||
<div class="flex-grow flex justify-end">
|
||||
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
|
||||
e.stopPropagation()
|
||||
if($DataBase.botPresets.length === 1){
|
||||
alertError(language.errors.onlyOneChat)
|
||||
return
|
||||
}
|
||||
const d = await alertConfirm(`${language.removeConfirm}${presets.name}`)
|
||||
if(d){
|
||||
changeToPreset(0)
|
||||
let botPresets = $DataBase.botPresets
|
||||
botPresets.splice(i, 1)
|
||||
$DataBase.botPresets = botPresets
|
||||
}
|
||||
}}>
|
||||
<TrashIcon size={18}/>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex mt-2 items-center">
|
||||
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
|
||||
let botPresets = $DataBase.botPresets
|
||||
let newPreset = JSON.parse(JSON.stringify(presetTemplate))
|
||||
newPreset.name = `New Preset`
|
||||
botPresets.push(newPreset)
|
||||
|
||||
$DataBase.botPresets = botPresets
|
||||
}}>
|
||||
<PlusIcon/>
|
||||
</button>
|
||||
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
|
||||
editMode = !editMode
|
||||
}}>
|
||||
<EditIcon size={18}/>
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">{language.quickPreset}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.break-any{
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
36
src/lib/SideBars/BarIcon.svelte
Normal file
36
src/lib/SideBars/BarIcon.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
{#await additionalStyle}
|
||||
<button on:click={onClick} class="ico"><slot/></button>
|
||||
{:then as}
|
||||
<button on:click={onClick} class="ico" style={as}><slot/></button>
|
||||
{/await}
|
||||
<script lang="ts">
|
||||
export let onClick = () => {}
|
||||
export let additionalStyle:string|Promise<string> = ''
|
||||
</script>
|
||||
<style>
|
||||
.ico {
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
margin-top: 0.5rem;
|
||||
--tw-shadow-color: 0, 0, 0;
|
||||
--tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
|
||||
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ico:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
||||
}
|
||||
</style>
|
||||
466
src/lib/SideBars/CharConfig.svelte
Normal file
466
src/lib/SideBars/CharConfig.svelte
Normal file
@@ -0,0 +1,466 @@
|
||||
<script lang="ts">
|
||||
import { language } from "../../lang";
|
||||
import { tokenize } from "../../ts/tokenizer";
|
||||
import { DataBase, type Database, type character, type groupChat } from "../../ts/database";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User } from 'lucide-svelte'
|
||||
import Check from "../Others/Check.svelte";
|
||||
import { addCharEmotion, addingEmotion, exportChar, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
|
||||
import LoreBook from "./LoreBookSetting.svelte";
|
||||
import { alertConfirm, alertError, alertSelectChar } from "../../ts/alert";
|
||||
import BarIcon from "./BarIcon.svelte";
|
||||
import { findCharacterbyId } from "../../ts/util";
|
||||
import { onDestroy } from "svelte";
|
||||
import {isEqual, cloneDeep} from 'lodash'
|
||||
import Help from "../Others/Help.svelte";
|
||||
import RegexData from "./RegexData.svelte";
|
||||
|
||||
let subMenu = 0
|
||||
let subberMenu = 0
|
||||
|
||||
let tokens = {
|
||||
desc: 0,
|
||||
firstMsg: 0,
|
||||
localNote: 0
|
||||
}
|
||||
|
||||
let lasttokens = {
|
||||
desc: '',
|
||||
firstMsg: '',
|
||||
localNote: ''
|
||||
}
|
||||
|
||||
async function loadTokenize(chara){
|
||||
console.log('tokenize')
|
||||
const cha = chara
|
||||
if(cha.type !== 'group'){
|
||||
if(lasttokens.desc !== cha.desc){
|
||||
if(cha.desc){
|
||||
lasttokens.desc = cha.desc
|
||||
tokens.desc = await tokenize(cha.desc)
|
||||
}
|
||||
}
|
||||
if(lasttokens.firstMsg !==chara.firstMessage){
|
||||
lasttokens.firstMsg = chara.firstMessage
|
||||
tokens.firstMsg = await tokenize(chara.firstMessage)
|
||||
}
|
||||
}
|
||||
if(lasttokens.localNote !== currentChar.data.chats[currentChar.data.chatPage].note){
|
||||
lasttokens.localNote = currentChar.data.chats[currentChar.data.chatPage].note
|
||||
tokens.localNote = await tokenize(currentChar.data.chats[currentChar.data.chatPage].note)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
$:{
|
||||
loadTokenize(currentChar.data)
|
||||
}
|
||||
|
||||
async function addGroupChar(){
|
||||
let group = currentChar.data
|
||||
if(group.type === 'group'){
|
||||
const res = await alertSelectChar()
|
||||
if(res){
|
||||
if(group.characters.includes(res)){
|
||||
alertError(language.errors.alreadyCharInGroup)
|
||||
}
|
||||
else{
|
||||
if(await alertConfirm(language.askLoadFirstMsg)){
|
||||
group.chats[group.chatPage].message.push({
|
||||
role:'char',
|
||||
data: findCharacterbyId(res).firstMessage,
|
||||
saying: res,
|
||||
})
|
||||
}
|
||||
|
||||
group.characters.push(res)
|
||||
currentChar.data = group
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function rmCharFromGroup(index:number){
|
||||
let group = currentChar.data
|
||||
if(group.type === 'group'){
|
||||
group.characters.splice(index, 1)
|
||||
currentChar.data = group
|
||||
}
|
||||
}
|
||||
|
||||
let database:Database
|
||||
let currentChar:{
|
||||
type: 'character',
|
||||
data: character
|
||||
}|{
|
||||
type: 'group',
|
||||
data: groupChat
|
||||
}
|
||||
|
||||
|
||||
const unsub = DataBase.subscribe((v) => {
|
||||
database = v
|
||||
const cha = v.characters[$selectedCharID]
|
||||
if(!cha){
|
||||
return
|
||||
}
|
||||
if((!currentChar) || (!isEqual(currentChar.data, cha))){
|
||||
if(cha.type === 'character'){
|
||||
currentChar = {
|
||||
type: 'character',
|
||||
data: (cha)
|
||||
}
|
||||
}
|
||||
else{
|
||||
currentChar = {
|
||||
type: 'group',
|
||||
data: (cha)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$: {
|
||||
if(database.characters[$selectedCharID].chaId === currentChar.data.chaId){
|
||||
database.characters[$selectedCharID] = currentChar.data
|
||||
}
|
||||
|
||||
DataBase.set(database)
|
||||
}
|
||||
|
||||
onDestroy(unsub);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 mb-2">
|
||||
<button class={subMenu === 0 ? 'text-gray-200 ' : 'text-gray-500'} on:click={() => {subMenu = 0}}>
|
||||
<UserIcon />
|
||||
</button>
|
||||
<button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
|
||||
<SmileIcon />
|
||||
</button>
|
||||
<button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3;subberMenu = 0}}>
|
||||
<BookIcon />
|
||||
</button>
|
||||
<button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
|
||||
<ActivityIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
{#if subMenu === 0}
|
||||
{#if currentChar.type !== 'group'}
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Character Name" bind:value={currentChar.data.name}>
|
||||
<span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.desc}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
|
||||
<span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
|
||||
{:else}
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Group Name" bind:value={currentChar.data.name}>
|
||||
<span class="text-neutral-200">{language.character}</span>
|
||||
<div class="p-2 flex gap-2">
|
||||
{#if currentChar.data.characters.length === 0}
|
||||
<span class="text-gray-500">No Character</span>
|
||||
{:else}
|
||||
{#each currentChar.data.characters as char, i}
|
||||
{#await getCharImage(findCharacterbyId(char).image, 'css')}
|
||||
<BarIcon onClick={() => {
|
||||
rmCharFromGroup(i)
|
||||
}}>
|
||||
<User/>
|
||||
</BarIcon>
|
||||
{:then im}
|
||||
<BarIcon onClick={() => {
|
||||
rmCharFromGroup(i)
|
||||
}} additionalStyle={im} />
|
||||
{/await}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-gray-500 mt-1 flex mb-6">
|
||||
<button on:click={addGroupChar} class="hover:text-neutral-200 cursor-pointer">
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
<span class="text-neutral-200">{language.authorNote} <Help key="charNote"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
|
||||
|
||||
<div class="flex mt-6 items-center">
|
||||
<Check bind:check={$DataBase.jailbreakToggle}/>
|
||||
<span class="text-neutral-200 ml-2">{language.jailbreakToggle}</span>
|
||||
</div>
|
||||
{:else if subMenu === 1}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
|
||||
<span class="text-neutral-200 mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
|
||||
<button on:click={() => {selectCharImg($selectedCharID)}}>
|
||||
{#if currentChar.data.image === ''}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
|
||||
{:else}
|
||||
{#await getCharImage(currentChar.data.image, 'css')}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500"></div>
|
||||
{:then im}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />
|
||||
{/await}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if currentChar.type === 'group'}
|
||||
<button
|
||||
on:click={makeGroupImage}
|
||||
class="drop-shadow-lg p-2 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
|
||||
{language.createGroupImg}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
|
||||
<span class="text-neutral-200 mt-6 mb-2">{language.viewScreen}</span>
|
||||
<!-- svelte-ignore empty-block -->
|
||||
|
||||
{#if currentChar.type !== 'group'}
|
||||
<select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
|
||||
<option value="none" class="bg-darkbg appearance-none">{language.none}</option>
|
||||
<option value="emotion" class="bg-darkbg appearance-none">{language.emotionImage}</option>
|
||||
<option value="imggen" class="bg-darkbg appearance-none">{language.imageGeneration}</option>
|
||||
</select>
|
||||
{:else}
|
||||
<select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
|
||||
<option value="none" class="bg-darkbg appearance-none">{language.none}</option>
|
||||
<option value="single" class="bg-darkbg appearance-none">{language.singleView}</option>
|
||||
<option value="multiple" class="bg-darkbg appearance-none">{language.SpacedView}</option>
|
||||
<option value="emp" class="bg-darkbg appearance-none">{language.emphasizedView}</option>
|
||||
|
||||
</select>
|
||||
{/if}
|
||||
|
||||
{#if currentChar.data.viewScreen === 'emotion'}
|
||||
<span class="text-neutral-200 mt-6">{language.emotionImage} <Help key="emotion"/></span>
|
||||
<span class="text-gray-400 text-xs">{language.emotionWarn}</span>
|
||||
|
||||
<table class="contain w-full max-w-full tabler">
|
||||
<tr>
|
||||
<th class="font-medium w-1/3">{language.image}</th>
|
||||
<th class="font-medium w-1/2">{language.emotion}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{#if currentChar.data.emotionImages.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noImages}</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.emotionImages as emo, i}
|
||||
<tr>
|
||||
{#await getCharImage(emo[1], 'plain')}
|
||||
<td class="font-medium truncate w-1/3"></td>
|
||||
{:then im}
|
||||
<td class="font-medium truncate w-1/3"><img src={im} alt="img" class="w-full"></td>
|
||||
{/await}
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" bind:value={currentChar.data.emotionImages[i][0]}>
|
||||
</td>
|
||||
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
|
||||
rmCharEmotion($selectedCharID,i)
|
||||
}}><TrashIcon /></button>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
|
||||
{#if !$addingEmotion}
|
||||
<button class="cursor-pointer hover:text-green-500" on:click={() => {addCharEmotion($selectedCharID)}}>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
{:else}
|
||||
<span>Loading...</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if currentChar.data.viewScreen === 'imggen'}
|
||||
<span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
|
||||
<span class="text-gray-400 text-xs">{language.emotionWarn}</span>
|
||||
|
||||
|
||||
<table class="contain w-full max-w-full tabler">
|
||||
<tr>
|
||||
<th class="font-medium w-1/3">{language.key}</th>
|
||||
<th class="font-medium w-1/2">{language.value}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{#if currentChar.data.sdData.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noData}</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.sdData as emo, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate w-1/3">
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][0]}>
|
||||
</td>
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][1]}>
|
||||
</td>
|
||||
{#if (!['always','negative'].includes(currentChar.data.sdData[i][0]))}
|
||||
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
|
||||
let db = ($DataBase)
|
||||
let charId = $selectedCharID
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.sdData.splice(i, 1)
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
$DataBase = (db)
|
||||
}}><TrashIcon /></button>
|
||||
{:else}
|
||||
<td></td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</table>
|
||||
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
|
||||
{#if !$addingEmotion}
|
||||
<button class="cursor-pointer hover:text-green-500" on:click={() => {
|
||||
let db = ($DataBase)
|
||||
let charId = $selectedCharID
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.sdData.push(['', ''])
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
$DataBase = (db)
|
||||
}}>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
{:else}
|
||||
<span>Loading...</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
|
||||
{#if currentChar.data.chats[currentChar.data.chatPage].sdData}
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></textarea>
|
||||
{:else}
|
||||
<span><div class="text-gray-500">{language.noData}</div></span>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else if subMenu === 3}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.loreBook} <Help key="lorebook"/></h2>
|
||||
<LoreBook />
|
||||
{:else if subMenu === 2}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
|
||||
{#if currentChar.type !== 'group'}
|
||||
<span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<th class="font-medium w-1/2">Bias</th>
|
||||
<th class="font-medium w-1/3">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let bia = currentChar.data.bias
|
||||
bia.push(['', 0])
|
||||
currentChar.data.bias = bia
|
||||
}
|
||||
}}><PlusIcon /></th>
|
||||
</tr>
|
||||
{#if currentChar.data.bias.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noBias}</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.bias as bias, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][0]} placeholder="string">
|
||||
</td>
|
||||
<td class="font-medium truncate w-1/3">
|
||||
<input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][1]} type="number" max="100" min="-100">
|
||||
</td>
|
||||
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let bia = currentChar.data.bias
|
||||
bia.splice(i, 1)
|
||||
currentChar.data.bias = bia
|
||||
}
|
||||
}}><TrashIcon /></button>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
<span class="text-neutral-200 mt-4">{language.regexScript} <Help key="experimental"/></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
|
||||
{#if currentChar.data.customscript.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#each currentChar.data.customscript as customscript, i}
|
||||
<RegexData bind:value={currentChar.data.customscript[i]} onRemove={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let customscript = currentChar.data.customscript
|
||||
customscript.splice(i, 1)
|
||||
currentChar.data.customscript = customscript
|
||||
}
|
||||
}}/>
|
||||
{/each}
|
||||
</table>
|
||||
<th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let script = currentChar.data.customscript
|
||||
script.push({
|
||||
comment: "",
|
||||
in: "",
|
||||
out: "",
|
||||
type: "editinput"
|
||||
})
|
||||
currentChar.data.customscript = script
|
||||
}
|
||||
}}><PlusIcon /></th>
|
||||
<div class="flex items-center mt-4">
|
||||
<Check bind:check={currentChar.data.utilityBot}/>
|
||||
<span>{language.utilityBot}</span>
|
||||
</div>
|
||||
<button on:click={async () => {
|
||||
exportChar($selectedCharID)
|
||||
}} class="text-neutral-200 mt-6 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.exportCharacter}</button>
|
||||
|
||||
{:else}
|
||||
|
||||
<div class="flex mb-2 items-center">
|
||||
<Check bind:check={currentChar.data.useCharacterLore}/>
|
||||
<span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
<button on:click={async () => {
|
||||
const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
|
||||
if(!conf){
|
||||
return
|
||||
}
|
||||
const conf2 = await alertConfirm(language.removeConfirm2 + currentChar.data.name)
|
||||
if(!conf2){
|
||||
return
|
||||
}
|
||||
let chars = $DataBase.characters
|
||||
chars.splice($selectedCharID, 1)
|
||||
$selectedCharID = -1
|
||||
$DataBase.characters = chars
|
||||
|
||||
}} class="text-neutral-200 mt-2 bg-transparent border-solid border-1 border-borderc p-2 hover:bg-draculared transition-colors cursor-pointer">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</button>
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
.contain{
|
||||
border: #6272a4 1px solid
|
||||
}
|
||||
|
||||
.tabler {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.tabler td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
58
src/lib/SideBars/DropList.svelte
Normal file
58
src/lib/SideBars/DropList.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { ChevronDown, ChevronUp } from "lucide-svelte";
|
||||
import { language } from "../../lang";
|
||||
|
||||
export let list = []
|
||||
</script>
|
||||
|
||||
<div class="list flex flex-col bg-bgcolor rounded-md">
|
||||
{#each list as n, i}
|
||||
<div class="w-full h-10 flex items-center">
|
||||
<span class="ml-2 flex-grow">{language.formating[n]}</span>
|
||||
<button class="mr-1" on:click={() => {
|
||||
if(i !== 0){
|
||||
let tempList = list
|
||||
const temp = tempList[i]
|
||||
tempList[i] = tempList[i-1]
|
||||
tempList[i-1] = temp
|
||||
list = tempList
|
||||
}
|
||||
else{
|
||||
let tempList = list
|
||||
const temp = tempList[i]
|
||||
tempList[i] = tempList[i+1]
|
||||
tempList[i+1] = temp
|
||||
list = tempList
|
||||
}
|
||||
}}><ChevronUp /></button>
|
||||
<button class="mr-1" on:click={() => {
|
||||
if(i !== (list.length - 1)){
|
||||
let tempList = list
|
||||
const temp = tempList[i]
|
||||
tempList[i] = tempList[i+1]
|
||||
tempList[i+1] = temp
|
||||
list = tempList
|
||||
}
|
||||
else{
|
||||
let tempList = list
|
||||
const temp = tempList[i]
|
||||
tempList[i] = tempList[i-1]
|
||||
tempList[i-1] = temp
|
||||
list = tempList
|
||||
}
|
||||
}}><ChevronDown /></button>
|
||||
</div>
|
||||
{#if i !== (list.length - 1)}
|
||||
<div class="seperator"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.seperator{
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: 0;
|
||||
border-bottom: 1px solid #6272a4;
|
||||
}
|
||||
</style>
|
||||
75
src/lib/SideBars/LoreBookData.svelte
Normal file
75
src/lib/SideBars/LoreBookData.svelte
Normal file
@@ -0,0 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { XIcon } from "lucide-svelte";
|
||||
import { language } from "../../lang";
|
||||
import type { loreBook } from "../../ts/database";
|
||||
import { alertConfirm } from "../../ts/alert";
|
||||
import Check from "../Others/Check.svelte";
|
||||
import Help from "../Others/Help.svelte";
|
||||
export let value:loreBook
|
||||
export let onRemove: () => void = () => {}
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
open = !open
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? 'Unnamed Lore' : 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="seperator">
|
||||
<span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-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>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.key}>
|
||||
{/if}
|
||||
<span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.insertorder} type="number" min={0} max={1000}>
|
||||
<span class="text-neutral-200 mt-4">{language.prompt}</span>
|
||||
<textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
|
||||
<div class="flex items-center mt-4 mb-6">
|
||||
<Check bind:check={value.alwaysActive}/>
|
||||
<span>{language.alwaysActive}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seperator{
|
||||
border: none;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: #282a36;
|
||||
}
|
||||
|
||||
</style>
|
||||
82
src/lib/SideBars/LoreBookSetting.svelte
Normal file
82
src/lib/SideBars/LoreBookSetting.svelte
Normal file
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
import { DataBase } from "../../ts/database";
|
||||
import { language } from "../../lang";
|
||||
import {selectedCharID} from '../../ts/stores'
|
||||
import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
|
||||
import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/lorebook";
|
||||
import LoreBookData from "./LoreBookData.svelte";
|
||||
let submenu = 0
|
||||
</script>
|
||||
|
||||
<div class="flex w-full">
|
||||
<button on:click={() => {
|
||||
submenu = 0
|
||||
}} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 0}>
|
||||
<span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
submenu = 1
|
||||
}} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 1}>
|
||||
<span>{language.Chat}</span>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="border-solid border-borderc p-2 flex flex-col border-1">
|
||||
{#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-borderc 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 $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-borderc 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>
|
||||
|
||||
<div class="text-gray-500 mt-2 flex">
|
||||
<button on:click={() => {addLorebook(submenu)}} class="hover:text-neutral-200 cursor-pointer">
|
||||
<PlusIcon />
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
exportLoreBook(submenu === 0 ? 'global' : 'local')
|
||||
}} class="hover:text-neutral-200 ml-1 cursor-pointer">
|
||||
<DownloadIcon />
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
importLoreBook(submenu === 0 ? 'global' : 'local')
|
||||
}} class="hover:text-neutral-200 ml-2 cursor-pointer">
|
||||
<FolderUpIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.seperator{
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
</style>
|
||||
69
src/lib/SideBars/RegexData.svelte
Normal file
69
src/lib/SideBars/RegexData.svelte
Normal file
@@ -0,0 +1,69 @@
|
||||
<script lang="ts">
|
||||
import { XIcon } from "lucide-svelte";
|
||||
import { language } from "src/lang";
|
||||
import { alertConfirm } from "src/ts/alert";
|
||||
import type { customscript } from "src/ts/database";
|
||||
|
||||
export let value:customscript
|
||||
export let onRemove: () => void = () => {}
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
open = !open
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? 'Unnamed Script' : 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="seperator">
|
||||
<span class="text-neutral-200 mt-6">{language.name}</span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
|
||||
<span class="text-neutral-200 mt-4">Type</span>
|
||||
<select class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.type}>
|
||||
<option value="editinput">{language.editInput}</option>
|
||||
<option value="editoutput">{language.editOutput}</option>
|
||||
<option value="editprocess">{language.editProcess}</option>
|
||||
</select>
|
||||
<span class="text-neutral-200 mt-6">IN:</span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.in}>
|
||||
<span class="text-neutral-200 mt-6">OUT:</span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.out}>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seperator{
|
||||
border: none;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: #282a36;
|
||||
}
|
||||
|
||||
</style>
|
||||
539
src/lib/SideBars/Settings.svelte
Normal file
539
src/lib/SideBars/Settings.svelte
Normal file
@@ -0,0 +1,539 @@
|
||||
<script>
|
||||
import { ActivityIcon, Bot, CodeIcon, FolderIcon, LayoutDashboardIcon, MonitorIcon, PlusIcon, TrashIcon, UserIcon } from "lucide-svelte";
|
||||
import { tokenize } from "../../ts/tokenizer";
|
||||
import { DataBase, saveImage, updateTextTheme } from "../../ts/database";
|
||||
import DropList from "./DropList.svelte";
|
||||
import { changeLanguage, language } from "../../lang";
|
||||
import { getCharImage, selectUserImg } from "../../ts/characters";
|
||||
import { changeFullscreen, selectSingleFile, sleep } from "../../ts/util";
|
||||
import { customProviderStore, getCurrentPluginMax, importPlugin } from "../../ts/process/plugins";
|
||||
import { alertConfirm, alertMd } from "../../ts/alert";
|
||||
import Check from "../Others/Check.svelte";
|
||||
import { getRequestLog, isTauri } from "../../ts/globalApi";
|
||||
import { checkDriver } from "../../ts/drive/drive";
|
||||
import Help from "../Others/Help.svelte";
|
||||
let subMenu = -1
|
||||
let subSubMenu = 0
|
||||
export let openPresetList =false
|
||||
|
||||
let tokens = {
|
||||
mainPrompt: 0,
|
||||
jailbreak: 0,
|
||||
globalNote: 0
|
||||
}
|
||||
|
||||
let lasttokens = {
|
||||
mainPrompt: '',
|
||||
jailbreak: '',
|
||||
globalNote: ''
|
||||
}
|
||||
|
||||
async function loadTokenize(){
|
||||
if(lasttokens.mainPrompt !== $DataBase.mainPrompt){
|
||||
lasttokens.mainPrompt = $DataBase.mainPrompt
|
||||
tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
|
||||
}
|
||||
tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
|
||||
tokens.jailbreak = await tokenize($DataBase.jailbreak)
|
||||
tokens.globalNote = await tokenize($DataBase.globalNote)
|
||||
}
|
||||
|
||||
$: loadTokenize()
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 mb-2">
|
||||
<button class={subMenu === -1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = -1}}>
|
||||
<UserIcon />
|
||||
</button>
|
||||
<button class={subMenu === 0 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 0}}>
|
||||
<Bot />
|
||||
</button>
|
||||
<button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 3}}>
|
||||
<MonitorIcon />
|
||||
</button>
|
||||
<button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 2}}>
|
||||
<CodeIcon />
|
||||
</button>
|
||||
<button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 4}}>
|
||||
<FolderIcon />
|
||||
</button>
|
||||
<button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 1}}>
|
||||
<ActivityIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if subMenu === -1}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.userSetting}</h2>
|
||||
<span class="text-neutral-200 mt-2 mb-2">{language.userIcon}</span>
|
||||
<button on:click={() => {selectUserImg()}}>
|
||||
{#if $DataBase.userIcon === ''}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
|
||||
{:else}
|
||||
{#await getCharImage($DataBase.userIcon, 'css')}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
|
||||
{:then im}
|
||||
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />
|
||||
{/await}
|
||||
{/if}
|
||||
</button>
|
||||
<span class="text-neutral-200 mt-4">{language.username}</span>
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="User" bind:value={$DataBase.username}>
|
||||
|
||||
{:else if subMenu === 0 && subSubMenu === 0}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
|
||||
<div class="flex w-full mb-2">
|
||||
<button on:click={() => {
|
||||
subSubMenu = 0
|
||||
}} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 0}>
|
||||
<span>{language.Chat}</span>
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
subSubMenu = 1
|
||||
}} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer">
|
||||
<span>{language.others}</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
|
||||
<select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.aiModel}>
|
||||
<option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
|
||||
<option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
|
||||
<option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
|
||||
{#if $DataBase.plugins.length > 0}
|
||||
<option value="custom" class="bg-darkbg appearance-none">Plugin</option>
|
||||
{/if}
|
||||
</select>
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.subModel}>
|
||||
<option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
|
||||
<option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
|
||||
<option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
|
||||
{#if $customProviderStore.length > 0}
|
||||
<option value="custom" class="bg-darkbg appearance-none">Plugin</option>
|
||||
{/if}
|
||||
</select>
|
||||
|
||||
{#if $DataBase.aiModel === 'gpt35' || $DataBase.aiModel === 'gpt4' || $DataBase.subModel === 'gpt4' || $DataBase.subModel === 'gpt35'}
|
||||
<span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="sk-XXXXXXXXXXXXXXXXXXXX" bind:value={$DataBase.openAIKey}>
|
||||
{/if}
|
||||
{#if $DataBase.aiModel === 'custom'}
|
||||
<span class="text-neutral-200 mt-2">{language.plugin}</span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.currentPluginProvider}>
|
||||
<option value="" class="bg-darkbg appearance-none">None</option>
|
||||
{#each $customProviderStore as plugin}
|
||||
<option value={plugin} class="bg-darkbg appearance-none">{plugin}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
|
||||
<span class="text-neutral-200">TextGen {language.providerURL}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="https://..." bind:value={$DataBase.textgenWebUIURL}>
|
||||
<span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
|
||||
<span class="text-draculared text-xs mb-2">You must use textgen webui with --no-stream and without --cai-chat or --chat</span>
|
||||
{/if}
|
||||
<span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.mainPrompt}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.mainPrompt} {language.tokens}</span>
|
||||
<span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.jailbreak}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.jailbreak} {language.tokens}</span>
|
||||
<span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.globalNote}></textarea>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>
|
||||
<span class="text-neutral-200">{language.maxContextSize}</span>
|
||||
{#if $DataBase.aiModel === 'gpt35'}
|
||||
<input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="4000" bind:value={$DataBase.maxContext}>
|
||||
{:else if $DataBase.aiModel === 'gpt4' || $DataBase.aiModel === 'textgen_webui'}
|
||||
<input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="8000" bind:value={$DataBase.maxContext}>
|
||||
{:else if $DataBase.aiModel === 'custom'}
|
||||
<input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max={getCurrentPluginMax($DataBase.currentPluginProvider)} bind:value={$DataBase.maxContext}>
|
||||
{/if}
|
||||
<span class="text-neutral-200">{language.maxResponseSize}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.maxResponse}>
|
||||
<span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="200" bind:value={$DataBase.temperature}>
|
||||
<span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
|
||||
<span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.frequencyPenalty}>
|
||||
<span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
|
||||
<span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.PresensePenalty}>
|
||||
<span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.forceReplaceUrl} <Help key="forceUrl"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="Leave blank to not replace url">
|
||||
<span class="text-neutral-200 mt-2">{language.submodel} {language.forceReplaceUrl} <Help key="forceUrl"/></span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl2} placeholder="Leave blank to not replace url">
|
||||
|
||||
|
||||
|
||||
<details class="mt-4">
|
||||
<summary class="mb-2">{language.advancedSettings}</summary>
|
||||
<span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
|
||||
<DropList bind:list={$DataBase.formatingOrder} />
|
||||
<span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<th class="font-medium w-1/2">Bias</th>
|
||||
<th class="font-medium w-1/3">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
|
||||
let bia = $DataBase.bias
|
||||
bia.push(['', 0])
|
||||
$DataBase.bias = bia
|
||||
}}><PlusIcon /></th>
|
||||
</tr>
|
||||
{#if $DataBase.bias.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noBias}</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each $DataBase.bias as bias, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][0]} placeholder="string">
|
||||
</td>
|
||||
<td class="font-medium truncate w-1/3">
|
||||
<input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][1]} type="number" max="100" min="-100">
|
||||
</td>
|
||||
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
|
||||
let bia = $DataBase.bias
|
||||
bia.splice(i, 1)
|
||||
$DataBase.bias = bia
|
||||
}}><TrashIcon /></button>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<Check bind:check={$DataBase.promptPreprocess}/>
|
||||
<span>{language.promptPreprocess}</span>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<button on:click={() => {openPresetList = true}} class="mt-4 drop-shadow-lg p-3 border-borderc border-solid flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">{language.presets}</button>
|
||||
|
||||
|
||||
{:else if subMenu === 0 && subSubMenu === 1}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
|
||||
<div class="flex w-full mb-2">
|
||||
<button on:click={() => {
|
||||
subSubMenu = 0
|
||||
}} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer">
|
||||
<span>{language.Chat}</span>
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
subSubMenu = 1
|
||||
}} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 1}>
|
||||
<span>{language.others}</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.sdProvider}>
|
||||
<option value="" class="bg-darkbg appearance-none">None</option>
|
||||
<option value="webui" class="bg-darkbg appearance-none">Stable Diffusion WebUI</option>
|
||||
<!-- TODO -->
|
||||
<!-- <option value="runpod" class="bg-darkbg appearance-none">Runpod Serverless</option> -->
|
||||
</select>
|
||||
|
||||
{#if $DataBase.sdProvider === 'webui'}
|
||||
<span class="text-draculared text-xs mb-2">You must use WebUI with --api flag</span>
|
||||
<span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
|
||||
{#if !isTauri}
|
||||
<span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
|
||||
{/if}
|
||||
<span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="https://..." bind:value={$DataBase.webUiUrl}>
|
||||
{/if}
|
||||
|
||||
|
||||
<span class="text-neutral-200">Steps</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="100" bind:value={$DataBase.sdSteps}>
|
||||
|
||||
<span class="text-neutral-200">CFG Scale</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.sdCFG}>
|
||||
|
||||
<span class="text-neutral-200">Width</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.width}>
|
||||
<span class="text-neutral-200">Height</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.height}>
|
||||
<span class="text-neutral-200">Sampler</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.sampler_name}>
|
||||
|
||||
{:else if subMenu === 3}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
|
||||
<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
|
||||
<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
|
||||
await sleep(10)
|
||||
changeLanguage($DataBase.language)
|
||||
subMenu = -1
|
||||
}}>
|
||||
<option value="en" class="bg-darkbg appearance-none">English</option>
|
||||
<option value="ko" class="bg-darkbg appearance-none">한국어</option>
|
||||
</select>
|
||||
|
||||
<span class="text-neutral-200 mt-4">{language.theme}</span>
|
||||
<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.theme}>
|
||||
<option value="" class="bg-darkbg appearance-none">Standard Risu</option>
|
||||
<option value="waifu" class="bg-darkbg appearance-none">Waifulike</option>
|
||||
<option value="waifuMobile" class="bg-darkbg appearance-none">WaifuCut</option>
|
||||
<!-- <option value="free" class="bg-darkbg appearance-none">Freestyle</option> -->
|
||||
|
||||
</select>
|
||||
|
||||
|
||||
{#if $DataBase.theme === "waifu"}
|
||||
<span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
|
||||
<input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.waifuWidth}>
|
||||
<span class="text-gray-400text-sm">{($DataBase.waifuWidth)}%</span>
|
||||
|
||||
<span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
|
||||
<input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="20" max="150" bind:value={$DataBase.waifuWidth2}>
|
||||
<span class="text-gray-400text-sm">{($DataBase.waifuWidth2)}%</span>
|
||||
{/if}
|
||||
|
||||
<span class="text-neutral-200 mt-4">{language.textColor}</span>
|
||||
<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
|
||||
<option value="standard" class="bg-darkbg appearance-none">{language.classicRisu}</option>
|
||||
<option value="highcontrast" class="bg-darkbg appearance-none">{language.highcontrast}</option>
|
||||
<option value="custom" class="bg-darkbg appearance-none">Custom</option>
|
||||
</select>
|
||||
|
||||
{#if $DataBase.textTheme === "custom"}
|
||||
<div class="flex items-center mt-2">
|
||||
<input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorStandard} on:change={updateTextTheme}>
|
||||
<span class="ml-2">Normal Text</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalic} on:change={updateTextTheme}>
|
||||
<span class="ml-2">Italic Text</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorBold} on:change={updateTextTheme}>
|
||||
<span class="ml-2">Bold Text</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:change={updateTextTheme}>
|
||||
<span class="ml-2">Italic Bold Text</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if isTauri}
|
||||
<span class="text-neutral-200 mt-4">{language.translator}</span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
|
||||
<option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
|
||||
<option value="ko" class="bg-darkbg appearance-none">한국어</option>
|
||||
</select>
|
||||
{/if}
|
||||
<span class="text-neutral-200">{language.UISize}</span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.zoomsize}>
|
||||
<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
|
||||
|
||||
<span class="text-neutral-200">{language.iconSize}</span>
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.iconsize}>
|
||||
<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
|
||||
|
||||
{#if isTauri}
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={$DataBase.autoTranslate} />
|
||||
<span>{language.autoTranslation}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen}/>
|
||||
<span>{language.fullscreen}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
|
||||
if(check){
|
||||
$DataBase.customBackground = '-'
|
||||
const d = await selectSingleFile(['png', 'webp', 'gif'])
|
||||
if(!d){
|
||||
$DataBase.customBackground = ''
|
||||
return
|
||||
}
|
||||
const img = await saveImage(d.data)
|
||||
$DataBase.customBackground = img
|
||||
}
|
||||
else{
|
||||
$DataBase.customBackground = ''
|
||||
}
|
||||
}}></Check>
|
||||
<span>{language.useCustomBackground}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={$DataBase.playMessage}/>
|
||||
<span>{language.playMessage} <Help key="msgSound"/></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={$DataBase.swipe}/>
|
||||
<span>{language.SwipeRegenerate}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<Check bind:check={$DataBase.instantRemove}/>
|
||||
<span>{language.instantRemove}</span>
|
||||
</div>
|
||||
|
||||
{:else if subMenu === 2}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
|
||||
<span class="text-draculared text-xs mb-4">{language.pluginWarn}</span>
|
||||
|
||||
|
||||
<div class="border-solid border-borderc p-2 flex flex-col border-1">
|
||||
{#if $DataBase.plugins.length === 0}
|
||||
<span class="text-gray-500">No Plugins</span>
|
||||
{:else}
|
||||
{#each $DataBase.plugins as plugin, i}
|
||||
{#if i !== 0}
|
||||
<div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
|
||||
{/if}
|
||||
<div class="flex">
|
||||
<span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
|
||||
<button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
|
||||
const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
|
||||
if(v){
|
||||
if($DataBase.currentPluginProvider === plugin.name){
|
||||
$DataBase.currentPluginProvider = ''
|
||||
}
|
||||
let plugins = $DataBase.plugins
|
||||
plugins.splice(i, 1)
|
||||
$DataBase.plugins = plugins
|
||||
}
|
||||
}}>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
{#if Object.keys(plugin.arguments).length > 0}
|
||||
<div class="flex flex-col mt-2 bg-dark-900 bg-opacity-50 p-3">
|
||||
{#each Object.keys(plugin.arguments) as arg}
|
||||
<span>{arg}</span>
|
||||
{#if Array.isArray(plugin.arguments[arg])}
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none" bind:value={$DataBase.plugins[i].realArg[arg]}>
|
||||
{#each plugin.arguments[arg] as a}
|
||||
<option value={a} class="bg-darkbg appearance-none">a</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if plugin.arguments[arg] === 'string'}
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.plugins[i].realArg[arg]}>
|
||||
{:else if plugin.arguments[arg] === 'int'}
|
||||
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="number" bind:value={$DataBase.plugins[i].realArg[arg]}>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-gray-500 mt-2 flex">
|
||||
<button on:click={() => {
|
||||
importPlugin()
|
||||
}} class="hover:text-neutral-200 cursor-pointer">
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</div>
|
||||
{:else if subMenu === 1}
|
||||
<h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
|
||||
<span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
|
||||
<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.loreBookDepth}>
|
||||
<span class="text-neutral-200">{language.loreBookToken}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.loreBookToken}>
|
||||
|
||||
<span class="text-neutral-200">{language.additionalPrompt}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.additionalPrompt}>
|
||||
|
||||
<span class="text-neutral-200">{language.descriptionPrefix}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.descriptionPrefix}>
|
||||
|
||||
<span class="text-neutral-200">{language.emotionPrompt}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default">
|
||||
|
||||
<span class="text-neutral-200">{language.requestretrys}</span>
|
||||
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.requestRetrys}>
|
||||
|
||||
|
||||
{#if isTauri}
|
||||
<span class="text-neutral-200 mt-2">Request Lib</span>
|
||||
<select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
|
||||
<option value="new" class="bg-darkbg appearance-none">Reqwest</option>
|
||||
<option value="old" class="bg-darkbg appearance-none">Tauri</option>
|
||||
</select>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<Check bind:check={$DataBase.useSayNothing}/>
|
||||
<span>{language.sayNothing}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={async () => {
|
||||
alertMd(getRequestLog())
|
||||
}}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
|
||||
{language.ShowLog}
|
||||
</button>
|
||||
|
||||
{:else if subMenu === 4}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.files}</h2>
|
||||
|
||||
<button
|
||||
on:click={async () => {
|
||||
if(await alertConfirm(language.backupConfirm)){
|
||||
localStorage.setItem('backup', 'save')
|
||||
if(isTauri){
|
||||
checkDriver('savetauri')
|
||||
}
|
||||
else{
|
||||
checkDriver('save')
|
||||
}
|
||||
}
|
||||
}}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
|
||||
{language.savebackup}
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={async () => {
|
||||
if((await alertConfirm(language.backupLoadConfirm)) && (await alertConfirm(language.backupLoadConfirm2))){
|
||||
localStorage.setItem('backup', 'load')
|
||||
if(isTauri){
|
||||
checkDriver('loadtauri')
|
||||
}
|
||||
else{
|
||||
checkDriver('load')
|
||||
}
|
||||
}
|
||||
}}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
|
||||
{language.loadbackup}
|
||||
</button>
|
||||
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.style2 {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.style2::-webkit-color-swatch {
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #6272a4;
|
||||
}
|
||||
.style2::-moz-color-swatch {
|
||||
border-radius: 0.5rem;
|
||||
border: 1pxs solid #6272a4;
|
||||
}
|
||||
</style>
|
||||
190
src/lib/SideBars/Sidebar.svelte
Normal file
190
src/lib/SideBars/Sidebar.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import BarIcon from "./BarIcon.svelte";
|
||||
import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte'
|
||||
import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage, importCharacter } from "../../ts/characters";
|
||||
import SettingsDom from './Settings.svelte'
|
||||
import CharConfig from "./CharConfig.svelte";
|
||||
import { language } from "../../lang";
|
||||
import Botpreset from "../Others/botpreset.svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import {isEqual} from 'lodash'
|
||||
let openPresetList =false
|
||||
let sideBarMode = 0
|
||||
let editMode = false
|
||||
let menuMode = 0
|
||||
export let openGrid = () => {}
|
||||
|
||||
|
||||
function createScratch(){
|
||||
reseter();
|
||||
const cid = createNewCharacter()
|
||||
selectedCharID.set(cid)
|
||||
}
|
||||
function createGroup(){
|
||||
reseter();
|
||||
const cid = createNewGroup()
|
||||
selectedCharID.set(cid)
|
||||
}
|
||||
async function createImport(){
|
||||
reseter();
|
||||
const cid = await importCharacter()
|
||||
if(cid){
|
||||
selectedCharID.set(cid)
|
||||
}
|
||||
}
|
||||
|
||||
function changeChar(index:number){
|
||||
reseter();
|
||||
characterFormatUpdate(index)
|
||||
selectedCharID.set(index)
|
||||
}
|
||||
|
||||
function reseter(){
|
||||
menuMode = 0;
|
||||
sideBarMode = 0;
|
||||
editMode = false
|
||||
settingsOpen.set(false)
|
||||
CharEmotion.set({})
|
||||
}
|
||||
|
||||
let charImages:string[] = []
|
||||
|
||||
const unsub = DataBase.subscribe((db) => {
|
||||
let newCharImages:string[] = []
|
||||
for(const cha of db.characters){
|
||||
newCharImages.push(cha.image ?? '')
|
||||
}
|
||||
if(!isEqual(charImages, newCharImages)){
|
||||
charImages = newCharImages
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onDestroy(unsub)
|
||||
|
||||
</script>
|
||||
<div class="w-20 flex flex-col bg-bgcolor text-white items-center overflow-y-scroll h-full shadow-lg min-w-20 overflow-x-hidden"
|
||||
class:editMode={editMode}>
|
||||
<button class="bg-gray-500 w-14 min-w-14 flex justify-center h-8 items-center rounded-b-md cursor-pointer hover:bg-green-500 transition-colors absolute top-0" on:click={() => {
|
||||
menuMode = 1 - menuMode
|
||||
}}><ListIcon/></button>
|
||||
<div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div>
|
||||
{#if menuMode === 0}
|
||||
{#each charImages as charimg, i}
|
||||
<div class="flex items-center">
|
||||
{#if charimg !== ''}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}>
|
||||
</BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
|
||||
|
||||
</BarIcon>
|
||||
{/if}
|
||||
{#if editMode}
|
||||
<div class="flex flex-col mt-2">
|
||||
<button on:click={() => {
|
||||
let chars = $DataBase.characters
|
||||
if(chars[i-1]){
|
||||
const currentchar = chars[i]
|
||||
chars[i] = chars[i-1]
|
||||
chars[i-1] = currentchar
|
||||
$DataBase.characters = chars
|
||||
}
|
||||
}}>
|
||||
<ArrowUp size={20}/>
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
let chars = $DataBase.characters
|
||||
if(chars[i+1]){
|
||||
const currentchar = chars[i]
|
||||
chars[i] = chars[i+1]
|
||||
chars[i+1] = currentchar
|
||||
$DataBase.characters = chars
|
||||
}
|
||||
}}>
|
||||
<ArrowDown size={22}/>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<BarIcon onClick={() => {
|
||||
if(sideBarMode === 1){
|
||||
reseter();
|
||||
sideBarMode = 0
|
||||
}
|
||||
else{
|
||||
reseter();
|
||||
sideBarMode = 1
|
||||
}
|
||||
}}><PlusIcon/></BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {
|
||||
if($settingsOpen){
|
||||
reseter();
|
||||
settingsOpen.set(false)
|
||||
}
|
||||
else{
|
||||
reseter();
|
||||
settingsOpen.set(true)
|
||||
}
|
||||
}}><Settings/></BarIcon>
|
||||
<BarIcon onClick={() => {
|
||||
reseter();
|
||||
openGrid()
|
||||
}}><LayoutGridIcon/></BarIcon>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-96 p-6 flex flex-col bg-darkbg text-gray-200 overflow-y-auto overflow-x-hidden setting-area" class:flex-grow={($SizeStore.w <= 1000)} class:minw96={($SizeStore.w > 1000)}>
|
||||
<button class="flex w-full justify-end text-gray-200" on:click={() => {sideBarStore.set(false)}}>
|
||||
<button class="p-0 bg-transparent border-none text-gray-200"><X/></button>
|
||||
</button>
|
||||
{#if sideBarMode === 0}
|
||||
{#if $selectedCharID < 0 || $settingsOpen}
|
||||
<SettingsDom bind:openPresetList/>
|
||||
{:else}
|
||||
<CharConfig />
|
||||
{/if}
|
||||
{:else if sideBarMode === 1}
|
||||
<h2 class="title font-bold text-xl mt-2">Create</h2>
|
||||
<button
|
||||
on:click={createScratch}
|
||||
class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
|
||||
{language.createfromScratch}
|
||||
</button>
|
||||
<button
|
||||
on:click={createImport}
|
||||
class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
|
||||
{language.importCharacter}
|
||||
</button>
|
||||
<button
|
||||
on:click={createGroup}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
|
||||
{language.createGroup}
|
||||
</button>
|
||||
<h2 class="title font-bold text-xl mt-4">Edit</h2>
|
||||
<button
|
||||
on:click={() => {editMode = !editMode;$selectedCharID = -1}}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
|
||||
{language.editOrder}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.minw96 {
|
||||
min-width: 24rem; /* 384px */
|
||||
}
|
||||
.title{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.editMode{
|
||||
min-width: 6rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if openPresetList}
|
||||
<Botpreset close={() => {openPresetList = false}}/>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user