[test] peer

src/lang/en.ts

@@ -449,5 +449,6 @@ export const languageEnglish = {
     largePortrait: "Portrait",
     postImage: "Post Image",
     lorePlus: "LoreBook+",
-    reverseProxyOobaMode: "Reverse Proxy Ooba Mode"
+    reverseProxyOobaMode: "Reverse Proxy Ooba Mode",
+    joinMultiUserRoom: "Join MultiUser Room",
 }

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -78,6 +78,20 @@
         <Help key="experimental"/><Help key="inlayImages"/>
     </Check>
 </div>
+<div class="flex items-center mt-4">
+    <Check check={$DataBase.tpo} name="2.0 Alpha Web-DevMode" onChange={() => {
+        // access code is "tendo"
+        // I just put it on source code so it's not really a secret
+        // well, if you are reading this, you are a developer, so you can use this feature
+
+        const accessCode = 'tendo'
+        if(prompt("Access Code") === accessCode){
+            $DataBase.tpo = !$DataBase.tpo
+        }
+    }}>
+        <Help key="experimental"/>
+    </Check>
+</div>
 <button
     on:click={async () => {
         alertMd(getRequestLog())

src/lib/SideBars/SideChatList.svelte

@@ -2,13 +2,14 @@
     import type { character, groupChat } from "src/ts/storage/database";
     import { DataBase } from "src/ts/storage/database";
     import TextInput from "../UI/GUI/TextInput.svelte";
-    import { DownloadIcon, EditIcon, FolderUpIcon, TrashIcon } from "lucide-svelte";
+    import { DownloadIcon, EditIcon, FolderUpIcon, MenuIcon, TrashIcon } from "lucide-svelte";
     import { exportChat, importChat } from "src/ts/characters";
-    import { alertConfirm, alertError } from "src/ts/alert";
+    import { alertConfirm, alertError, alertSelect } from "src/ts/alert";
     import { language } from "src/lang";
     import Button from "../UI/GUI/Button.svelte";
     import { findCharacterbyId } from "src/ts/util";
     import CheckInput from "../UI/GUI/CheckInput.svelte";
+  import { createMultiuserRoom } from "src/ts/sync/multiuser";
     export let chara:character|groupChat
     let editMode = false
 </script>
@@ -47,6 +48,16 @@
                 <span>{chat.name}</span>
             {/if}
             <div class="flex-grow flex justify-end">
+                {#if $DataBase.tpo}
+                    <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async () => {
+                        const multiuser = parseInt(await alertSelect(["Open Multiuser Room"]))
+                        if(multiuser === 0){
+                            createMultiuserRoom()
+                        }
+                    }}>
+                        <MenuIcon size={18}/>
+                    </button>
+                {/if}
                 <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
                     editMode = !editMode
                 }}>

src/lib/SideBars/Sidebar.svelte

@@ -20,6 +20,7 @@
     FolderIcon,
     FolderOpenIcon,
     HomeIcon,
+    MilestoneIcon,
   } from "lucide-svelte";
   import {
     characterFormatUpdate,
@@ -45,6 +46,7 @@
   import { fly } from "svelte/transition";
   import { alertInput, alertSelect } from "src/ts/alert";
   import SideChatList from "./SideChatList.svelte";
+  import { joinMultiuserRoom } from "src/ts/sync/multiuser";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -583,6 +585,17 @@
         ></BaseRoundedButton
       >
     </div>
+    {#if $DataBase.tpo}
+      <div class="flex flex-col items-center space-y-2 px-2 mt-2 mb-2">
+        <BaseRoundedButton
+          onClick={() => {
+            reseter()
+            sideBarMode = sideBarMode === 2 ? 0 : 2
+          }}
+          ><MilestoneIcon size="24" /></BaseRoundedButton
+        >
+      </div>
+    {/if}
   </div>
 </div>
 <div
@@ -655,6 +668,13 @@
     >
       {language.createBotwithAI}
     </Button>
+  {:else if sideBarMode === 2}
+    <Button
+      on:click={joinMultiuserRoom}
+      className="mt-2"
+    >
+      {language.joinMultiUserRoom}
+    </Button>
   {/if}
 </div>
 

src/ts/storage/database.ts

@@ -505,6 +505,7 @@ export interface Database{
     gptVisionQuality:string
     reverseProxyOobaMode:boolean
     reverseProxyOobaArgs: OobaChatCompletionRequestParams
+    tpo?:boolean
 }
 
 export interface customscript{
@@ -601,6 +602,7 @@ export interface character{
     extentions?:{[key:string]:any}
     largePortrait?:boolean
     lorePlus?:boolean
+    
 }
 
 

src/ts/storage/globalApi.ts

@@ -922,7 +922,9 @@ export function checkCharOrder() {
         const charId = db.characters[i].chaId
         charIdList.push(charId)
         if(!ordered.includes(charId)){
-            db.characterOrder.push(charId)
+            if(charId !== '§temp'){
+                db.characterOrder.push(charId)
+            }
         }
     }
 

src/ts/sync/multiuser.ts

@@ -0,0 +1,153 @@
+import { v4 } from 'uuid';
+import { alertError, alertInput, alertNormal, alertWait } from '../alert';
+import { get } from 'svelte/store';
+import { DataBase, setDatabase, type character } from '../storage/database';
+import { selectedCharID } from '../stores';
+import { cloneDeep } from 'lodash';
+import { findCharacterIndexbyId, sleep } from '../util';
+import type { DataConnection, Peer } from 'peerjs';
+
+async function importPeerJS(){
+    return await import('peerjs');
+}
+
+let conn:DataConnection
+let peer:Peer
+let connections:DataConnection[] = []
+
+export async function createMultiuserRoom(){
+    //create a room with webrtc
+    alertWait("Loading...")
+
+    const peerJS = await importPeerJS();
+    const roomId = v4();
+    peer = new peerJS.Peer(
+        roomId + "-risuai-multiuser"
+    )
+
+    peer.on('connection', function(conn) {
+        connections.push(conn)
+        conn.on('data', function(data:ReciveData) {
+            if(data.type === 'request-char'){
+                const db = get(DataBase)
+                const selectedCharId = get(selectedCharID)
+                const char = cloneDeep(db.characters[selectedCharId])
+                if(char.type === 'group'){
+                    return
+                }
+                char.chats = [char.chats[char.chatPage]]
+                conn.send({
+                    type: 'receive-char',
+                    data: char
+                });
+            }
+            if(data.type === 'receive-char'){
+                const db = get(DataBase)
+                const selectedCharId = get(selectedCharID)
+                const char = cloneDeep(db.characters[selectedCharId])
+                const recivedChar = data.data
+                if(char.type === 'group'){
+                    return
+                }
+                char.chats[char.chatPage] = recivedChar.chats[0]
+                sendPeerChar()
+            }
+        });
+    });
+
+    
+    alertNormal("Room ID: " + roomId)
+    return
+}
+
+interface ReciveFirst{
+    type: 'receive-char',
+    data: character
+}
+interface RequestFirst{
+    type: 'request-char'
+}
+
+type ReciveData = ReciveFirst|RequestFirst
+
+export async function joinMultiuserRoom(){
+
+    const roomId = await alertInput("Enter room id")
+    //join a room with webrtc
+    alertWait("Loading...")
+    const peerJS = await importPeerJS();
+    peer = new peerJS.Peer(
+        v4() + "-risuai-multiuser-join"
+    )
+
+    conn = peer.connect(roomId + '-risuai-multiuser');
+
+    alertWait("Waiting for host to accept connection")
+
+    let open = false
+    conn.on('open', function() {
+        open = true
+        conn.send({
+            type: 'request-char',
+        });
+        conn.on('data', function(data:ReciveData) {
+            switch(data.type){
+                case 'receive-char':{
+                    //create temp character
+                    const db = get(DataBase)
+                    const cha = data.data
+                    cha.chaId = '§temp'
+                    cha.chatPage = 0
+                    const ind = findCharacterIndexbyId('§temp')
+                    const selectedcharIndex = get(selectedCharID)
+                    if(ind === -1){
+                        db.characters.push(cha)
+                    }
+                    else{
+                        db.characters[ind] = cha
+                    }
+                    const tempInd = findCharacterIndexbyId('§temp')
+                    if(selectedcharIndex !== tempInd){
+                        selectedCharID.set(tempInd)
+                    }
+                    setDatabase(db)
+                    break
+                }
+            }
+        });
+    });
+
+    let waitTime = 0
+    while(!open){
+        await sleep(100)
+        waitTime += 100
+        if(waitTime > 10000){
+            alertError("Connection timed out")
+            return
+        }
+    }        
+
+    return {
+        peer, roomId, conn
+    }
+    
+}
+
+
+export function sendPeerChar(){
+    if(!conn){
+        // host user
+        for(const connection of connections){
+            connection.send({
+                type: 'receive-char',
+                data: get(DataBase).characters[get(selectedCharID)]
+            });
+        }
+    }
+    else{
+        conn.send({
+            type: 'receive-char',
+            data: get(DataBase).characters[get(selectedCharID)]
+        });
+    }
+}