Add experimental multiuserroom

src/lib/ChatScreens/Chat.svelte

@@ -15,6 +15,7 @@
     import { capitalize } from "src/ts/util";
   import { longpress } from "src/ts/gui/longtouch";
   import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
+  import { ConnectionOpenStore } from "src/ts/sync/multiuser";
     export let message = ''
     export let name = ''
     export let largePortrait = false
@@ -202,20 +203,22 @@
                             </button>
                         {/if}
 
-                        <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
-                            if(!editMode){
-                                editMode = true
-                            }
-                            else{
-                                editMode = false
-                                edit()
-                            }
-                        }}>
-                            <PencilIcon size={20}/>
-                        </button>
-                        <button class="ml-2 hover:text-green-500 transition-colors" on:click={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
-                            <TrashIcon size={20}/>
-                        </button>
+                        {#if !$ConnectionOpenStore}
+                            <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
+                                if(!editMode){
+                                    editMode = true
+                                }
+                                else{
+                                    editMode = false
+                                    edit()
+                                }
+                            }}>
+                                <PencilIcon size={20}/>
+                            </button>
+                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
+                                <TrashIcon size={20}/>
+                            </button>
+                        {/if}
                     {/if}
                     {#if $DataBase.translator !== '' && !blankMessage}
                         <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} on:click={async () => {

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -25,6 +25,7 @@
     import { postChatFile } from 'src/ts/process/files/multisend';
     import { getInlayImage } from 'src/ts/process/files/image';
     import PlaygroundMenu from '../Playground/PlaygroundMenu.svelte';
+  import { ConnectionOpenStore } from 'src/ts/sync/multiuser';
 
     let messageInput:string = ''
     let messageInputTranslate:string = ''
@@ -81,7 +82,8 @@
                     if($DataBase.useSayNothing){
                         cha.push({
                             role: 'user',
-                            data: '*says nothing*'
+                            data: '*says nothing*',
+                            name: $ConnectionOpenStore ? $CurrentUsername : null
                         })
                     }
                 }
@@ -98,14 +100,16 @@
                 cha.push({
                     role: 'user',
                     data: await processScript(char,messageInput,'editinput'),
-                    time: Date.now()
+                    time: Date.now(),
+                    name: $ConnectionOpenStore ? $CurrentUsername : null
                 })
             }
             else{
                 cha.push({
                     role: 'user',
                     data: messageInput,
-                    time: Date.now()
+                    time: Date.now(),
+                    name: $ConnectionOpenStore ? $CurrentUsername : null
                 })
             }
         }
@@ -583,9 +587,9 @@
                     <Chat
                         character={$CurrentSimpleCharacter}
                         idx={chat.index}
-                        name={$CurrentUsername} 
+                        name={chat.name ?? $CurrentUsername} 
                         message={chat.data}
-                        img={getCharImage($CurrentUserIcon, 'css')}
+                        img={$ConnectionOpenStore ? '' : getCharImage($CurrentUserIcon, 'css')}
                         isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                         largePortrait={$UserIconProtrait}
                         MessageGenerationInfo={chat.generationInfo}

src/lib/Others/AlertComp.svelte

@@ -19,6 +19,7 @@
     import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
     import ModuleChatMenu from "../Setting/Pages/Module/ModuleChatMenu.svelte";
   import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
+  import Help from "./Help.svelte";
     let btn
     let input = ''
     let cardExportType = 'realm'
@@ -399,6 +400,21 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
+                    {#if $DataBase.useExperimental}
+                        <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                            alertStore.set({
+                                type: 'none',
+                                msg: '2'
+                            })
+                        }}>
+                            <div class="flex flex-col justify-start items-start">
+                                <span>{language.createMultiuserRoom} <Help key="experimental"/></span>
+                            </div>
+                            <div class="ml-9 float-right flex-1 flex justify-end">
+                                <ChevronRightIcon />
+                            </div>
+                        </button>
+                    {/if}
                     <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
                         alertStore.set({
                             type: 'none',

src/lib/Playground/PlaygroundMenu.svelte

@@ -13,6 +13,7 @@
     import PlaygroundImageGen from "./PlaygroundImageGen.svelte";
     import PlaygroundParser from "./PlaygroundParser.svelte";
     import ToolConvertion from "./ToolConvertion.svelte";
+  import { joinMultiuserRoom } from "src/ts/sync/multiuser";
 
     let easterEggTouch = 0
 
@@ -89,6 +90,11 @@
             }}>
                 <h1 class="text-2xl font-bold text-start">{language.promptConvertion}</h1>
             </button>
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                joinMultiuserRoom()
+            }}>
+                <h1 class="text-2xl font-bold text-start">{language.joinMultiUserRoom}</h1>
+            </button>
             <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
                 easterEggTouch += 1
             }}>

src/lib/SideBars/SideChatList.svelte

@@ -127,6 +127,10 @@
                                 }
                             }
                         }
+                        case 2:{
+                            chara.chatPage = i
+                            createMultiuserRoom()
+                        }
                     }
                 }}>
                     <MenuIcon size={18}/>

src/lib/SideBars/Sidebar.svelte

@@ -51,7 +51,7 @@
     import Button from "../UI/GUI/Button.svelte";
     import { alertAddCharacter, alertInput, alertSelect } from "src/ts/alert";
     import SideChatList from "./SideChatList.svelte";
-    import { joinMultiuserRoom } from "src/ts/sync/multiuser";
+    import { ConnectionIsHost, ConnectionOpenStore, joinMultiuserRoom, RoomIdStore } from "src/ts/sync/multiuser";
   import { sideBarSize } from "src/ts/gui/guisize";
   import DevTool from "./DevTool.svelte";
   let sideBarMode = 0;
@@ -659,6 +659,22 @@
       </div>
     {:else if $CurrentCharacter?.chaId === '§playground'}
       <SideChatList bind:chara={ $CurrentCharacter} />
+    {:else if $ConnectionOpenStore}
+      <div class="flex flex-col">
+        <h1 class="text-xl">{language.connectionOpen}</h1>
+        <span class="text-textcolor2 mb-4">{language.connectionOpenInfo}</span>
+        <div class="flex">
+          <span>ID: </span>
+          <span class="text-blue-600">{$RoomIdStore}</span>
+        </div>
+        <div>
+          {#if $ConnectionIsHost}
+            <span class="text-emerald-600">{language.connectionHost}</span>
+          {:else}
+            <span class="text-gray-500">{language.connectionGuest}</span>
+          {/if}
+        </div>
+      </div>
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
         <button on:click={() => {