[feat] basic risuhub

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -3,9 +3,9 @@
     import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, MicOffIcon, PowerIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
     import Chat from "./Chat.svelte";
-    import { DataBase, appVer, type Message, type character } from "../../ts/storage/database";
+    import { DataBase, type Message } from "../../ts/storage/database";
     import { getCharImage } from "../../ts/characters";
-    import { doingChat, sendChat, type OpenAIChat } from "../../ts/process/index";
+    import { doingChat, sendChat } from "../../ts/process/index";
     import { findCharacterbyId, messageForm, sleep } from "../../ts/util";
     import { language } from "../../lang";
     import { translate } from "../../ts/translator/translator";
@@ -13,9 +13,9 @@
     import sendSound from '../../etc/send.mp3'
     import {cloneDeep} from 'lodash'
     import { processScript } from "src/ts/process/scripts";
-    import GithubStars from "../Others/GithubStars.svelte";
     import CreatorQuote from "./CreatorQuote.svelte";
     import { stopTTS } from "src/ts/process/tts";
+    import MainMenu from '../UI/MainMenu.svelte';
 
     let messageInput = ''
     let openMenu = false
@@ -186,11 +186,7 @@
     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>
-            <GithubStars />
-        </div>
+        <MainMenu />
     {:else}
         <div class="h-full w-full flex flex-col-reverse overflow-y-auto relative"  on:scroll={(e) => {
             //@ts-ignore

src/lib/Others/Help.svelte

@@ -4,7 +4,9 @@
     alertMd(language.help[key])
 }}>
     {#if key === "experimental"}
-        <FlaskConicalIcon size={14} />
+        <div class="text-red-500 hover:text-green-500">
+            <FlaskConicalIcon size={16} />
+        </div>
     {:else if unrecommended}
         <div class="text-red-500 hover:text-green-500">
             <AlertTriangle size={14} />

src/lib/SideBars/CharConfig.svelte

@@ -14,7 +14,7 @@
     import {isEqual, cloneDeep} from 'lodash'
     import Help from "../Others/Help.svelte";
     import RegexData from "./RegexData.svelte";
-    import { exportChar } from "src/ts/characterCards";
+    import { exportChar, shareRisuHub } from "src/ts/characterCards";
     import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
     import { checkCharOrder } from "src/ts/storage/globalApi";
   import { addGroupChar, rmCharFromGroup } from "src/ts/process/group";
@@ -663,7 +663,15 @@
         <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>
-    
+
+        {#if $DataBase.useExperimental}
+        <button on:click={async () => {
+            const cha = $DataBase.characters[$selectedCharID]
+            if(cha.type !== 'group'){
+                shareRisuHub(cha)
+            }
+        }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">Upload Hub (experimental)</button>
+        {/if}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
             <span class="text-neutral-200">{language.SuperMemory}</span>

src/lib/SideBars/Sidebar.svelte

@@ -51,18 +51,27 @@
 
   function createScratch() {
     reseter();
-    const cid = createNewCharacter();
-    selectedCharID.set(-1);
+    createNewCharacter();
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
   function createGroup() {
     reseter();
-    const cid = createNewGroup();
-    selectedCharID.set(-1);
+    createNewGroup();
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
   async function createImport() {
     reseter();
     await importCharacter();
-    selectedCharID.set(-1);
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
 
   function changeChar(index: number) {

src/lib/UI/Hub.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
+    import Help from "../Others/Help.svelte";
+    import { DownloadIcon, FlagIcon } from "lucide-svelte";
+
+    let openedData:null|{
+        name:string
+        desc: string
+        download: number,
+        id: string,
+        img: string
+    } = null
+
+</script>
+<h1 class="text-3xl font-bold mt-4">Shared Characters <Help key="experimental" /> </h1>
+<div class="w-full flex gap-4 p-2 flex-wrap">
+    {#await getRisuHub() then charas}
+        {#each charas as chara}
+            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative sm:w-44 w-full items-center" on:click={() => {
+                openedData = chara
+            }}>
+                <div class="flex flex-col">
+                    <img class="h-36 w-36 rounded-md" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+                    <span class="text-white text-lg max-w-36 text-ellipsis whitespace-nowrap overflow-hidden">{chara.name}</span>
+                    <span class="text-gray-400 text-xs max-w-36 text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden">{chara.desc}</span>
+                </div>
+            </button>
+        {/each}
+    {/await}
+</div>
+
+
+{#if openedData}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
+        openedData = null
+    }}>
+        <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
+            <div class="w-full flex flex-wrap gap-4">
+                <div class="flex flex-col">
+                    <img class="h-36 w-36 rounded-md" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
+                    <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis mt-4">{openedData.name}</h1>
+                </div>
+                <span class="text-gray-400 break-words text-base">{openedData.desc}</span>
+            </div>
+            <div class="flex flex-row-reverse gap-2">
+                <button class="text-gray-400 hover:text-red-500">
+                    <FlagIcon />
+                </button>
+                <button class="text-gray-400 hover:text-green-500" on:click={() => {
+                    downloadRisuHub(openedData.id ,openedData.img)
+                    openedData = null
+                }}>
+                    <DownloadIcon />
+                </button>
+            </div>
+        </div>
+    </div>
+
+{/if}

src/lib/UI/MainMenu.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { appVer } from "src/ts/storage/database";
+  import GithubStars from "../Others/GithubStars.svelte";
+  import Hub from "./Hub.svelte";
+
+</script>
+<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>
+    <GithubStars />
+  <div class="w-full flex p-4 flex-col text-2xl text-white">
+    <Hub />
+  </div>
+</div>