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

feat(sidebar-avatar): Creat SidebarIndicator & Refactor Sidebar UI

Browse Source 
* Add SidebarIndicator
* Remove BarIcon components at Character at Bar
  * It replaced by SidebarAvatar component
  * (TODO: Refactor BarIcon to UI Components & Sidebar State Flow)
* Refactor getCharImage
  * Delete unused code

BREAKING CHANGE:
This commit is contained in:
phyyou
2023-05-13 01:58:14 +09:00
parent 9bfbe4c981
commit a10ee2e7a6
5 changed files with 798 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/SideBars/BarIcon.svelte
View File

@@ -1,13 +1,16 @@
<!-- TODO: REMOVE AND REFACTOR TO BASE BUTTON UI COMPONENT -->
<script lang="ts">
export let onClick = () => {};
export let additionalStyle: string | Promise<string> = "";
</script>
{#await additionalStyle} {#await additionalStyle}
<button on:click={onClick} class="ico"><slot /></button> <button on:click={onClick} class="ico"><slot /></button>
{:then as} {:then as}
<button on:click={onClick} class="ico" style={as}><slot /></button> <button on:click={onClick} class="ico" style={as}><slot /></button>
{/await} {/await}
<script lang="ts">
export let onClick = () => {}
export let additionalStyle:string|Promise<string> = ''
</script>
<style> <style>
.ico { .ico {
cursor: pointer; cursor: pointer;
@@ -15,13 +18,16 @@
height: 3.5rem; height: 3.5rem;
width: 3.5rem; width: 3.5rem;
min-height: 3.5rem; min-height: 3.5rem;
margin-top: 0.5rem;
--tw-shadow-color: 0, 0, 0; --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); --tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1),
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -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; --tw-bg-opacity: 1;
background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); display: flex; background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition-property: background-color, border-color, color, fill, stroke; transition-property: background-color, border-color, color, fill, stroke;

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

@@ -1,144 +1,217 @@
<script lang="ts"> <script lang="ts">
import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores"; import {
CharEmotion,
SizeStore,
selectedCharID,
settingsOpen,
sideBarStore,
} from "../../ts/stores";
import { DataBase } from "../../ts/database"; import { DataBase } from "../../ts/database";
import BarIcon from "./BarIcon.svelte"; import BarIcon from "./BarIcon.svelte";
import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte' import SidebarIndicator from "./SidebarIndicator.svelte";
import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage } from "../../ts/characters"; import {
import {importCharacter} from 'src/ts/characterCards' Plus,
import SettingsDom from './Settings.svelte' User,
X,
Settings,
Users,
Edit3Icon,
ArrowUp,
ArrowDown,
ListIcon,
LayoutGridIcon,
PlusIcon,
} from "lucide-svelte";
import {
characterFormatUpdate,
createNewCharacter,
createNewGroup,
getCharImage,
} from "../../ts/characters";
import { importCharacter } from "src/ts/characterCards";
import SettingsDom from "./Settings.svelte";
import CharConfig from "./CharConfig.svelte"; import CharConfig from "./CharConfig.svelte";
import { language } from "../../lang"; import { language } from "../../lang";
import Botpreset from "../Others/botpreset.svelte"; import Botpreset from "../Others/botpreset.svelte";
import { onDestroy } from "svelte"; import { onDestroy } from "svelte";
import {isEqual} from 'lodash' import { isEqual } from "lodash";
let openPresetList =false import SidebarAvatar from "./SidebarAvatar.svelte";
let sideBarMode = 0 let openPresetList = false;
let editMode = false let sideBarMode = 0;
let menuMode = 0 let editMode = false;
export let openGrid = () => {} let menuMode = 0;
export let openGrid = () => {};
function createScratch() { function createScratch() {
reseter(); reseter();
const cid = createNewCharacter() const cid = createNewCharacter();
selectedCharID.set(-1) selectedCharID.set(-1);
} }
function createGroup() { function createGroup() {
reseter(); reseter();
const cid = createNewGroup() const cid = createNewGroup();
selectedCharID.set(-1) selectedCharID.set(-1);
} }
async function createImport() { async function createImport() {
reseter(); reseter();
const cid = await importCharacter() const cid = await importCharacter();
selectedCharID.set(-1) selectedCharID.set(-1);
} }
function changeChar(index: number) { function changeChar(index: number) {
reseter(); reseter();
characterFormatUpdate(index) characterFormatUpdate(index);
selectedCharID.set(index) selectedCharID.set(index);
} }
function reseter() { function reseter() {
menuMode = 0; menuMode = 0;
sideBarMode = 0; sideBarMode = 0;
editMode = false editMode = false;
settingsOpen.set(false) settingsOpen.set(false);
CharEmotion.set({}) CharEmotion.set({});
} }
let charImages:string[] = [] let charImages: string[] = [];
const unsub = DataBase.subscribe((db) => { const unsub = DataBase.subscribe((db) => {
let newCharImages:string[] = [] let newCharImages: string[] = [];
for (const cha of db.characters) { for (const cha of db.characters) {
newCharImages.push(cha.image ?? '') newCharImages.push(cha.image ?? "");
} }
if (!isEqual(charImages, newCharImages)) { if (!isEqual(charImages, newCharImages)) {
charImages = newCharImages charImages = newCharImages;
} }
}) });
onDestroy(unsub)
onDestroy(unsub);
</script> </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}> <div
<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={() => { class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg gap-2"
menuMode = 1 - menuMode class:editMode
}}><ListIcon/></button> >
<div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div> <button
class="absolute top-0 flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
on:click={() => {
menuMode = 1 - menuMode;
}}><ListIcon /></button
>
<div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" />
{#if menuMode === 0} {#if menuMode === 0}
{#each charImages as charimg, i} {#each charImages as charimg, i}
<div class="flex items-center"> <div class="group relative flex items-center px-2">
{#if charimg !== ''} <SidebarIndicator isActive={$selectedCharID === i} />
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}> {#if charimg !== ""}
</BarIcon> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
on:click={() => {
changeChar(i);
}}
on:keydown={(e) => {
if (e.key === "Enter") {
changeChar(i);
}
}}
tabindex="0"
>
{#await getCharImage($DataBase.characters[i].image, "plain") then img}
<SidebarAvatar src={img} size="56" />
{:catch}
<SidebarAvatar size="56" src="https://via.placeholder.com/150" />
{/await}
</div>
{:else} {:else}
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
</BarIcon> on:click={() => {
changeChar(i);
}}
on:keydown={(e) => {
if (e.key === "Enter") {
changeChar(i);
}
}}
tabindex="0"
>
<SidebarAvatar size="56" src="https://via.placeholder.com/150" />
</div>
{/if} {/if}
{#if editMode} {#if editMode}
<div class="flex flex-col mt-2"> <div class="mt-2 flex flex-col">
<button on:click={() => { <button
let chars = $DataBase.characters on:click={() => {
let chars = $DataBase.characters;
if (chars[i - 1]) { if (chars[i - 1]) {
const currentchar = chars[i] const currentchar = chars[i];
chars[i] = chars[i-1] chars[i] = chars[i - 1];
chars[i-1] = currentchar chars[i - 1] = currentchar;
$DataBase.characters = chars $DataBase.characters = chars;
} }
}}> }}
>
<ArrowUp size={20} /> <ArrowUp size={20} />
</button> </button>
<button on:click={() => { <button
let chars = $DataBase.characters on:click={() => {
let chars = $DataBase.characters;
if (chars[i + 1]) { if (chars[i + 1]) {
const currentchar = chars[i] const currentchar = chars[i];
chars[i] = chars[i+1] chars[i] = chars[i + 1];
chars[i+1] = currentchar chars[i + 1] = currentchar;
$DataBase.characters = chars $DataBase.characters = chars;
} }
}}> }}
>
<ArrowDown size={22} /> <ArrowDown size={22} />
</button> </button>
</div> </div>
{/if} {/if}
</div> </div>
{/each} {/each}
<BarIcon onClick={() => { <BarIcon
onClick={() => {
if (sideBarMode === 1) { if (sideBarMode === 1) {
reseter(); reseter();
sideBarMode = 0 sideBarMode = 0;
} } else {
else{
reseter(); reseter();
sideBarMode = 1 sideBarMode = 1;
} }
}}><PlusIcon/></BarIcon> }}><PlusIcon /></BarIcon
>
{:else} {:else}
<BarIcon onClick={() => { <BarIcon
onClick={() => {
if ($settingsOpen) { if ($settingsOpen) {
reseter(); reseter();
settingsOpen.set(false) settingsOpen.set(false);
} } else {
else{
reseter(); reseter();
settingsOpen.set(true) settingsOpen.set(true);
} }
}}><Settings/></BarIcon> }}><Settings /></BarIcon
<BarIcon onClick={() => { >
<BarIcon
onClick={() => {
reseter(); reseter();
openGrid() openGrid();
}}><LayoutGridIcon/></BarIcon> }}><LayoutGridIcon /></BarIcon
>
{/if} {/if}
</div> </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)}> <div
<button class="flex w-full justify-end text-gray-200" on:click={() => {sideBarStore.set(false)}}> class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
<button class="p-0 bg-transparent border-none text-gray-200"><X/></button> 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="border-none bg-transparent p-0 text-gray-200"><X /></button>
</button> </button>
{#if sideBarMode === 0} {#if sideBarMode === 0}
{#if $selectedCharID < 0 || $settingsOpen} {#if $selectedCharID < 0 || $settingsOpen}
@@ -147,31 +220,46 @@
<CharConfig /> <CharConfig />
{/if} {/if}
{:else if sideBarMode === 1} {:else if sideBarMode === 1}
<h2 class="title font-bold text-xl mt-2">Create</h2> <h2 class="title mt-2 text-xl font-bold">Create</h2>
<button <button
on:click={createScratch} 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"> class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
>
{language.createfromScratch} {language.createfromScratch}
</button> </button>
<button <button
on:click={createImport} 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"> class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
>
{language.importCharacter} {language.importCharacter}
</button> </button>
<button <button
on:click={createGroup} 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"> class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
>
{language.createGroup} {language.createGroup}
</button> </button>
<h2 class="title font-bold text-xl mt-4">Edit</h2> <h2 class="title mt-4 text-xl font-bold">Edit</h2>
<button <button
on:click={() => {editMode = !editMode;$selectedCharID = -1}} on:click={() => {
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"> editMode = !editMode;
$selectedCharID = -1;
}}
class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
>
{language.editOrder} {language.editOrder}
</button> </button>
{/if} {/if}
</div> </div>
{#if openPresetList}
<Botpreset
close={() => {
openPresetList = false;
}}
/>
{/if}
<style> <style>
.minw96 { .minw96 {
min-width: 24rem; /* 384px */ min-width: 24rem; /* 384px */
@@ -183,7 +271,3 @@
min-width: 6rem; min-width: 6rem;
} }
</style> </style>
{#if openPresetList}
<Botpreset close={() => {openPresetList = false}}/>
{/if}

24
src/lib/SideBars/SidebarAvatar.svelte Normal file
View File

@@ -0,0 +1,24 @@
<script>
export let src;
export let size = "22";
</script>
<span class="flex shrink-0 items-center justify-center">
{#if src}
<img
{src}
class="bg-skin-border sidebar-avatar rounded-full object-cover"
style:width={size + "px"}
style:height={size + "px"}
style:minWidth={size + "px"}
alt="avatar"
/>
{:else}
<div
class="bg-skin-border sidebar-avatar rounded-full"
style:width={size + "px"}
style:height={size + "px"}
style:minWidth={size + "px"}
/>
{/if}
</span>

17
src/lib/SideBars/SidebarIndicator.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts">
export let isActive: boolean;
</script>
<div
class="
group-hover:bg-white
absolute
left-[-4px]
h-[8px]
w-[8px]
rounded-full
transition-all
duration-300
{isActive ? 'bg-white !h-[20px]' : 'group-hover:h-[10px]'}
"
/>

532
src/ts/characters.ts
View File

@@ -1,35 +1,60 @@
import { get, writable } from "svelte/store"; import { get, writable } from "svelte/store";
import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc } from "./database"; import {
import exifr from 'exifr' DataBase,
import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert"; saveImage,
setDatabase,
type character,
type Chat,
defaultSdDataFunc,
} from "./database";
import exifr from "exifr";
import {
alertConfirm,
alertError,
alertNormal,
alertSelect,
alertStore,
} from "./alert";
import { language } from "../lang"; import { language } from "../lang";
import { PngMetadata } from "./exif"; import { PngMetadata } from "./exif";
import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack"; import {
import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util"; encode as encodeMsgpack,
import { v4 as uuidv4 } from 'uuid'; decode as decodeMsgpack,
} from "@msgpack/msgpack";
import {
checkNullish,
findCharacterbyId,
selectMultipleFile,
selectSingleFile,
sleep,
} from "./util";
import { v4 as uuidv4 } from "uuid";
import { selectedCharID } from "./stores"; import { selectedCharID } from "./stores";
import { downloadFile, getFileSrc, readImage } from "./globalApi"; import { downloadFile, getFileSrc, readImage } from "./globalApi";
export function createNewCharacter() { export function createNewCharacter() {
let db = get(DataBase) let db = get(DataBase);
db.characters.push(createBlankChar()) db.characters.push(createBlankChar());
setDatabase(db) setDatabase(db);
return db.characters.length - 1 return db.characters.length - 1;
} }
export function createNewGroup() { export function createNewGroup() {
let db = get(DataBase) let db = get(DataBase);
db.characters.push({ db.characters.push({
type: 'group', type: "group",
name: "", name: "",
firstMessage: "", firstMessage: "",
chats: [{ chats: [
{
message: [], message: [],
note: '', note: "",
name: 'Chat 1', name: "Chat 1",
localLore: [] localLore: [],
}], chatPage: 0, },
viewScreen: 'none', ],
chatPage: 0,
viewScreen: "none",
globalLore: [], globalLore: [],
characters: [], characters: [],
autoMode: false, autoMode: false,
@@ -37,322 +62,323 @@ export function createNewGroup(){
emotionImages: [], emotionImages: [],
customscript: [], customscript: [],
chaId: uuidv4(), chaId: uuidv4(),
firstMsgIndex: -1 firstMsgIndex: -1,
}) });
setDatabase(db) setDatabase(db);
return db.characters.length - 1 return db.characters.length - 1;
} }
export async function getCharImage(loc:string, type:'plain'|'css'|'contain') { export async function getCharImage(
if(!loc || loc === ''){ loc: string,
if(type ==='css'){ type: "plain" | "css" | "contain" // TODO: REFACTOR BY REMOVE THIS PARAMETER
return '' ) {
} const filesrc = await getFileSrc(loc);
return null return filesrc;
}
const filesrc = await getFileSrc(loc)
if(type === 'plain'){
return filesrc
}
else if(type ==='css'){
return `background: url("${filesrc}");background-size: cover;`
}
else{
return `background: url("${filesrc}");background-size: contain;background-repeat: no-repeat;background-position: center;`
}
} }
export async function selectCharImg(charId: number) { export async function selectCharImg(charId: number) {
const selected = await selectSingleFile(['png']) const selected = await selectSingleFile(["png"]);
if (!selected) { if (!selected) {
return return;
} }
const img = selected.data const img = selected.data;
let db = get(DataBase) let db = get(DataBase);
const imgp = await saveImage(img) const imgp = await saveImage(img);
db.characters[charId].image = imgp db.characters[charId].image = imgp;
setDatabase(db) setDatabase(db);
} }
export async function selectUserImg() { export async function selectUserImg() {
const selected = await selectSingleFile(['png']) const selected = await selectSingleFile(["png"]);
if (!selected) { if (!selected) {
return return;
} }
const img = selected.data const img = selected.data;
let db = get(DataBase) let db = get(DataBase);
const imgp = await saveImage(img) const imgp = await saveImage(img);
db.userIcon = imgp db.userIcon = imgp;
setDatabase(db) setDatabase(db);
} }
export const addingEmotion = writable(false) export const addingEmotion = writable(false);
export async function addCharEmotion(charId: number) { export async function addCharEmotion(charId: number) {
addingEmotion.set(true) addingEmotion.set(true);
const selected = await selectMultipleFile(['png', 'webp', 'gif']) const selected = await selectMultipleFile(["png", "webp", "gif"]);
if (!selected) { if (!selected) {
addingEmotion.set(false) addingEmotion.set(false);
return return;
} }
let db = get(DataBase) let db = get(DataBase);
for (const f of selected) { for (const f of selected) {
console.log(f) console.log(f);
const img = f.data const img = f.data;
const imgp = await saveImage(img) const imgp = await saveImage(img);
const name = f.name.replace('.png','').replace('.webp','') const name = f.name.replace(".png", "").replace(".webp", "");
let dbChar = db.characters[charId] let dbChar = db.characters[charId];
if(dbChar.type !== 'group'){ if (dbChar.type !== "group") {
dbChar.emotionImages.push([name,imgp]) dbChar.emotionImages.push([name, imgp]);
db.characters[charId] = dbChar db.characters[charId] = dbChar;
} }
setDatabase(db) setDatabase(db);
} }
addingEmotion.set(false) addingEmotion.set(false);
} }
export async function rmCharEmotion(charId: number, emotionId: number) { export async function rmCharEmotion(charId: number, emotionId: number) {
let db = get(DataBase) let db = get(DataBase);
let dbChar = db.characters[charId] let dbChar = db.characters[charId];
if(dbChar.type !== 'group'){ if (dbChar.type !== "group") {
dbChar.emotionImages.splice(emotionId, 1) dbChar.emotionImages.splice(emotionId, 1);
db.characters[charId] = dbChar db.characters[charId] = dbChar;
} }
setDatabase(db) setDatabase(db);
} }
export async function exportChat(page: number) { export async function exportChat(page: number) {
try { try {
const mode = await alertSelect(["Export as JSON", "Export as TXT"]);
const mode = await alertSelect(['Export as JSON', "Export as TXT"]) const selectedID = get(selectedCharID);
const selectedID = get(selectedCharID) const db = get(DataBase);
const db = get(DataBase) const chat = db.characters[selectedID].chats[page];
const chat = db.characters[selectedID].chats[page] const char = db.characters[selectedID];
const char = db.characters[selectedID]
const date = new Date().toJSON(); const date = new Date().toJSON();
console.log(mode) console.log(mode);
if(mode === '0'){ if (mode === "0") {
const stringl = Buffer.from(JSON.stringify({ const stringl = Buffer.from(
type: 'risuChat', JSON.stringify({
type: "risuChat",
ver: 1, ver: 1,
data: chat data: chat,
}), 'utf-8') }),
"utf-8"
);
await downloadFile(`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + '.json', stringl) await downloadFile(
`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + ".json",
} stringl
else{ );
} else {
let stringl = chat.message.map((v) => { let stringl = chat.message
.map((v) => {
if (v.saying) { if (v.saying) {
return `${findCharacterbyId(v.saying).name}\n${v.data}` return `${findCharacterbyId(v.saying).name}\n${v.data}`;
} else {
return `${v.role === "char" ? char.name : db.username}\n${v.data}`;
} }
else{ })
return `${v.role === 'char' ? char.name : db.username}\n${v.data}` .join("\n\n");
}
}).join('\n\n')
if(char.type !== 'group'){ if (char.type !== "group") {
stringl = `${char.name}\n${char.firstMessage}\n\n` + stringl stringl = `${char.name}\n${char.firstMessage}\n\n` + stringl;
} }
await downloadFile(`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + '.txt', Buffer.from(stringl, 'utf-8')) await downloadFile(
`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + ".txt",
Buffer.from(stringl, "utf-8")
);
} }
alertNormal(language.successExport) alertNormal(language.successExport);
} catch (error) { } catch (error) {
alertError(`${error}`) alertError(`${error}`);
} }
} }
export async function importChat() { export async function importChat() {
const dat =await selectSingleFile(['json','jsonl']) const dat = await selectSingleFile(["json", "jsonl"]);
if (!dat) { if (!dat) {
return return;
} }
try { try {
const selectedID = get(selectedCharID) const selectedID = get(selectedCharID);
let db = get(DataBase) let db = get(DataBase);
if(dat.name.endsWith('jsonl')){ if (dat.name.endsWith("jsonl")) {
const lines = Buffer.from(dat.data).toString('utf-8').split('\n') const lines = Buffer.from(dat.data).toString("utf-8").split("\n");
let newChat: Chat = { let newChat: Chat = {
message: [], message: [],
note: "", note: "",
name: "Imported Chat", name: "Imported Chat",
localLore: [] localLore: [],
} };
let isFirst = true let isFirst = true;
for (const line of lines) { for (const line of lines) {
const presedLine = JSON.parse(line);
const presedLine = JSON.parse(line) if ((presedLine.name && presedLine.is_user, presedLine.mes)) {
if(presedLine.name && presedLine.is_user, presedLine.mes){
if (!isFirst) { if (!isFirst) {
newChat.message.push({ newChat.message.push({
role: presedLine.is_user ? "user" : 'char', role: presedLine.is_user ? "user" : "char",
data: formatTavernChat(presedLine.mes, db.characters[selectedID].name) data: formatTavernChat(
}) presedLine.mes,
db.characters[selectedID].name
),
});
} }
} }
isFirst = false isFirst = false;
} }
if (newChat.message.length === 0) { if (newChat.message.length === 0) {
alertError(language.errors.noData) alertError(language.errors.noData);
return return;
} }
db.characters[selectedID].chats.push(newChat) db.characters[selectedID].chats.push(newChat);
setDatabase(db) setDatabase(db);
alertNormal(language.successImport) alertNormal(language.successImport);
} else {
const json = JSON.parse(Buffer.from(dat.data).toString("utf-8"));
if (json.type === "risuChat" && json.ver === 1) {
const das: Chat = json.data;
if (
!(
checkNullish(das.message) ||
checkNullish(das.note) ||
checkNullish(das.name) ||
checkNullish(das.localLore)
)
) {
db.characters[selectedID].chats.push(das);
setDatabase(db);
alertNormal(language.successImport);
return;
} else {
alertError(language.errors.noData);
return;
} }
else{ } else {
const json = JSON.parse(Buffer.from(dat.data).toString('utf-8')) alertError(language.errors.noData);
if(json.type === 'risuChat' && json.ver === 1){ return;
const das:Chat = json.data
if(!(checkNullish(das.message) || checkNullish(das.note) || checkNullish(das.name) || checkNullish(das.localLore))){
db.characters[selectedID].chats.push(das)
setDatabase(db)
alertNormal(language.successImport)
return
}
else{
alertError(language.errors.noData)
return
} }
} }
else{
alertError(language.errors.noData)
return
}
}
} catch (error) { } catch (error) {
alertError(`${error}`) alertError(`${error}`);
} }
} }
function formatTavernChat(chat: string, charName: string) { function formatTavernChat(chat: string, charName: string) {
const db = get(DataBase) const db = get(DataBase);
return chat.replace(/<([Uu]ser)>|\{\{([Uu]ser)\}\}/g, db.username).replace(/((\{\{)|<)([Cc]har)(=.+)?((\}\})|>)/g, charName) return chat
.replace(/<([Uu]ser)>|\{\{([Uu]ser)\}\}/g, db.username)
.replace(/((\{\{)|<)([Cc]har)(=.+)?((\}\})|>)/g, charName);
} }
export function characterFormatUpdate(index: number | character) { export function characterFormatUpdate(index: number | character) {
let db = get(DataBase) let db = get(DataBase);
let cha = typeof(index) === 'number' ? db.characters[index] : index let cha = typeof index === "number" ? db.characters[index] : index;
if (cha.chats.length === 0) { if (cha.chats.length === 0) {
cha.chats = [{ cha.chats = [
{
message: [], message: [],
note: '', note: "",
name: 'Chat 1', name: "Chat 1",
localLore: [] localLore: [],
}] },
];
} }
if (!cha.chats[cha.chatPage]) { if (!cha.chats[cha.chatPage]) {
cha.chatPage = 0 cha.chatPage = 0;
} }
if (!cha.chats[cha.chatPage].message) { if (!cha.chats[cha.chatPage].message) {
cha.chats[cha.chatPage].message = [] cha.chats[cha.chatPage].message = [];
} }
if (!cha.type) { if (!cha.type) {
cha.type = 'character' cha.type = "character";
} }
if (!cha.chaId) { if (!cha.chaId) {
cha.chaId = uuidv4() cha.chaId = uuidv4();
} }
if(cha.type !== 'group'){ if (cha.type !== "group") {
if (checkNullish(cha.sdData)) { if (checkNullish(cha.sdData)) {
cha.sdData = defaultSdDataFunc() cha.sdData = defaultSdDataFunc();
} }
if (checkNullish(cha.utilityBot)) { if (checkNullish(cha.utilityBot)) {
cha.utilityBot = false cha.utilityBot = false;
} }
cha.alternateGreetings = cha.alternateGreetings ?? [] cha.alternateGreetings = cha.alternateGreetings ?? [];
cha.exampleMessage = cha.exampleMessage ?? '' cha.exampleMessage = cha.exampleMessage ?? "";
cha.creatorNotes = cha.creatorNotes ?? '' cha.creatorNotes = cha.creatorNotes ?? "";
cha.systemPrompt = cha.systemPrompt ?? '' cha.systemPrompt = cha.systemPrompt ?? "";
cha.postHistoryInstructions = cha.postHistoryInstructions ?? '' cha.postHistoryInstructions = cha.postHistoryInstructions ?? "";
cha.tags = cha.tags ?? [] cha.tags = cha.tags ?? [];
cha.creator = cha.creator ?? '' cha.creator = cha.creator ?? "";
cha.characterVersion = cha.characterVersion ?? 0 cha.characterVersion = cha.characterVersion ?? 0;
cha.personality = cha.personality ?? '' cha.personality = cha.personality ?? "";
cha.scenario = cha.scenario ?? '' cha.scenario = cha.scenario ?? "";
cha.firstMsgIndex = cha.firstMsgIndex ?? -1 cha.firstMsgIndex = cha.firstMsgIndex ?? -1;
} }
if (checkNullish(cha.customscript)) { if (checkNullish(cha.customscript)) {
cha.customscript = [] cha.customscript = [];
} }
if(typeof(index) === 'number'){ if (typeof index === "number") {
db.characters[index] = cha db.characters[index] = cha;
setDatabase(db) setDatabase(db);
} }
return cha return cha;
} }
export function createBlankChar(): character { export function createBlankChar(): character {
return { return {
name: '', name: "",
firstMessage: '', firstMessage: "",
desc: '', desc: "",
notes: '', notes: "",
chats: [{ chats: [
{
message: [], message: [],
note: '', note: "",
name: 'Chat 1', name: "Chat 1",
localLore: [] localLore: [],
}], },
],
chatPage: 0, chatPage: 0,
emotionImages: [], emotionImages: [],
bias: [], bias: [],
viewScreen: 'none', viewScreen: "none",
globalLore: [], globalLore: [],
chaId: uuidv4(), chaId: uuidv4(),
type: 'character', type: "character",
sdData: defaultSdDataFunc(), sdData: defaultSdDataFunc(),
utilityBot: false, utilityBot: false,
customscript: [], customscript: [],
exampleMessage: '', exampleMessage: "",
creatorNotes:'', creatorNotes: "",
systemPrompt:'', systemPrompt: "",
postHistoryInstructions:'', postHistoryInstructions: "",
alternateGreetings: [], alternateGreetings: [],
tags: [], tags: [],
creator: "", creator: "",
characterVersion: 0, characterVersion: 0,
personality: "", personality: "",
scenario: "", scenario: "",
firstMsgIndex: -1 firstMsgIndex: -1,
};
} }
}
export async function makeGroupImage() { export async function makeGroupImage() {
try { try {
alertStore.set({ alertStore.set({
type: 'wait', type: "wait",
msg: `Loading..` msg: `Loading..`,
}) });
const db = get(DataBase) const db = get(DataBase);
const charID = get(selectedCharID) const charID = get(selectedCharID);
const group = db.characters[charID] const group = db.characters[charID];
if(group.type !== 'group'){ if (group.type !== "group") {
return return;
} }
const imageUrls = await Promise.all(group.characters.map((v) => { const imageUrls = await Promise.all(
return getCharImage(findCharacterbyId(v).image, 'plain') group.characters.map((v) => {
})) return getCharImage(findCharacterbyId(v).image, "plain");
})
);
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = 256 canvas.width = 256;
canvas.height = 256 canvas.height = 256;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
// Load the images // Load the images
@@ -364,7 +390,7 @@ export async function makeGroupImage() {
(url) => (url) =>
new Promise<void>((resolve) => { new Promise<void>((resolve) => {
const img = new Image(); const img = new Image();
img.crossOrigin="anonymous" img.crossOrigin = "anonymous";
img.onload = () => { img.onload = () => {
images.push(img); images.push(img);
resolve(); resolve();
@@ -397,17 +423,17 @@ export async function makeGroupImage() {
// Return the image URI // Return the image URI
const uri = canvas.toDataURL() const uri = canvas.toDataURL();
console.log(uri) console.log(uri);
canvas.remove() canvas.remove();
db.characters[charID].image = await saveImage(dataURLtoBuffer(uri)); db.characters[charID].image = await saveImage(dataURLtoBuffer(uri));
setDatabase(db) setDatabase(db);
alertStore.set({ alertStore.set({
type: 'none', type: "none",
msg: '' msg: "",
}) });
} catch (error) { } catch (error) {
alertError(`${error}`) alertError(`${error}`);
} }
} }
@@ -417,55 +443,57 @@ function dataURLtoBuffer(string:string){
const matches = string.match(regex); const matches = string.match(regex);
const ext = matches[1]; const ext = matches[1];
const data = matches[2]; const data = matches[2];
return Buffer.from(data, 'base64'); return Buffer.from(data, "base64");
} }
export async function addDefaultCharacters() { export async function addDefaultCharacters() {
const imgs = [fetch('/sample/rika.png'),fetch('/sample/yuzu.png')] const imgs = [fetch("/sample/rika.png"), fetch("/sample/yuzu.png")];
alertStore.set({ alertStore.set({
type: 'wait', type: "wait",
msg: `Loading Sample bots...` msg: `Loading Sample bots...`,
}) });
for (const img of imgs) { for (const img of imgs) {
const imgBuffer = await (await img).arrayBuffer() const imgBuffer = await (await img).arrayBuffer();
const readed = (await exifr.parse(imgBuffer, true)) const readed = await exifr.parse(imgBuffer, true);
await sleep(10) await sleep(10);
const va = decodeMsgpack(Buffer.from(readed.risuai, 'base64')) as any const va = decodeMsgpack(Buffer.from(readed.risuai, "base64")) as any;
if (va.type !== 101) { if (va.type !== 101) {
alertError(language.errors.noData) alertError(language.errors.noData);
return return;
} }
let char:character = va.data let char: character = va.data;
let db = get(DataBase) let db = get(DataBase);
if (char.emotionImages && char.emotionImages.length > 0) { if (char.emotionImages && char.emotionImages.length > 0) {
for (let i = 0; i < char.emotionImages.length; i++) { for (let i = 0; i < char.emotionImages.length; i++) {
await sleep(10) await sleep(10);
const imgp = await saveImage(char.emotionImages[i][1] as any) const imgp = await saveImage(char.emotionImages[i][1] as any);
char.emotionImages[i][1] = imgp char.emotionImages[i][1] = imgp;
} }
} }
char.chats = [{ char.chats = [
{
message: [], message: [],
note: '', note: "",
name: 'Chat 1', name: "Chat 1",
localLore: [] localLore: [],
}] },
];
if (checkNullish(char.sdData)) { if (checkNullish(char.sdData)) {
char.sdData = defaultSdDataFunc() char.sdData = defaultSdDataFunc();
} }
char.chatPage = 0 char.chatPage = 0;
char.image = await saveImage(PngMetadata.filter(Buffer.from(imgBuffer))) char.image = await saveImage(PngMetadata.filter(Buffer.from(imgBuffer)));
char.chaId = uuidv4() char.chaId = uuidv4();
db.characters.push(characterFormatUpdate(char)) db.characters.push(characterFormatUpdate(char));
setDatabase(db) setDatabase(db);
} }
alertStore.set({ alertStore.set({
type: 'none', type: "none",
msg: '' msg: "",
}) });
} }