Update to 1.23.3 (#158)

# PR Checklist
- [ ] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [ ] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [ ] Did you added a type def?

# Description

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "RisuAI",
-    "version": "1.23.2"
+    "version": "1.23.3"
   },
   "tauri": {
     "allowlist": {

src/lib/Others/GithubStars.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { MailIcon, WalletIcon } from "lucide-svelte";
   import { isTauri, openURL } from "src/ts/storage/globalApi";
 
 </script>
@@ -16,9 +17,14 @@
       <img src="/icon/github-mark-white.svg" width="24" alt="github" />
     </button>
   {/if}
-  <button on:click={() => {
+  <button class="text-white" on:click={() => {
     openURL("https://www.patreon.com/RisuAI")
   }}>
-    <img src="/icon/patreon.png" width="24" alt="github" />
+    <WalletIcon size={24} />
+  </button>
+  <button class="text-white" on:click={() => {
+    openURL("mailto:amasio1234@proton.me")
+  }}>
+    <MailIcon size={24} />
   </button>
 </div>

src/lib/UI/Hub.svelte

@@ -2,13 +2,15 @@
     import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
     import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
+  import { parseMarkdownSafe } from "src/ts/parser";
 
     let openedData:null|{
         name:string
         desc: string
         download: number,
         id: string,
-        img: string
+        img: string,
+        tags: string[]
     } = null
 
     let charas:{
@@ -53,32 +55,34 @@
     </div>
 </div>
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
-    {#each charas as chara}
-        <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
-            openedData = chara
-        }}>
-            <div class="flex gap-2 w-full">
-                <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
-                <div class="flex flex-col flex-grow min-w-0">
-                    <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-                    <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
-                    <div class="flex flex-wrap">
-                        {#each chara.tags as tag, i}
-                            {#if i < 4}
-                                <div class="text-xs p-1 text-blue-400">{tag}</div>
-                            {:else if i === 4}
-                                <div class="text-xs p-1 text-blue-400">...</div>
-                            {/if}
-                        {/each}
+    {#key charas}
+        {#each charas as chara}
+            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
+                openedData = chara
+            }}>
+                <div class="flex gap-2 w-full">
+                    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+                    <div class="flex flex-col flex-grow min-w-0">
+                        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+                        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+                        <div class="flex flex-wrap">
+                            {#each chara.tags as tag, i}
+                                {#if i < 4}
+                                    <div class="text-xs p-1 text-blue-400">{tag}</div>
+                                {:else if i === 4}
+                                    <div class="text-xs p-1 text-blue-400">...</div>
+                                {/if}
+                            {/each}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </button>
-    {/each}
+            </button>
+        {/each}
+    {/key}
 </div>
 <div class="w-full flex justify-center">
-    <div>
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+    <div class="flex">
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" on:click={() => {
             if(page > 0){
                 page -= 1
                 getHub()
@@ -105,12 +109,21 @@
         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 gap-4">
-                <div class="flex flex-col">
+            <div class="w-full flex gap-4 flex-col">
+                <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">{openedData.name}</h1>
+                <div class="flex justify-start gap-4">
                     <img class="h-36 w-36 rounded-md object-top object-cover" 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>
+                    <span class="text-gray-400 break-words text-base chattext prose prose-invert">
+                        {#await parseMarkdownSafe(openedData.desc) then msg}
+                            {@html msg}                        
+                        {/await}
+                    </span>
+                </div>
+                <div class="flex justify-start gap-2">
+                    {#each openedData.tags as tag, i}
+                        <div class="text-xs p-1 text-blue-400">{tag}</div>
+                    {/each}
                 </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" on:click|stopPropagation={async () => {

src/ts/parser.ts

@@ -10,6 +10,12 @@ const convertor = new showdown.Converter({
     tables: true
 })
 
+const safeConvertor = new showdown.Converter({
+    simpleLineBreaks: true,
+    strikethrough: true,
+    tables: true,
+    backslashEscapesHTMLTags: true
+})
 
 DOMPurify.addHook("uponSanitizeElement", (node: HTMLElement, data) => {
     if (data.tagName === "iframe") {
@@ -38,6 +44,12 @@ export async function ParseMarkdown(data:string, char:(character | groupChat) =
     })
 }
 
+export function parseMarkdownSafe(data:string) {
+    return DOMPurify.sanitize(safeConvertor.makeHtml(data), {
+        FORBID_TAGS: ["a", "style"]
+    })
+}
+
 export async function hasher(data:Uint8Array){
     return Buffer.from(await crypto.subtle.digest("SHA-256", data)).toString('hex');
 }

src/ts/storage/database.ts

@@ -8,7 +8,7 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.23.2'
+export let appVer = '1.23.3'
 
 export function setDatabase(data:Database){
     if(checkNullish(data.characters)){

version.json

@@ -1 +1 @@
-{"version":"1.23.2"}
+{"version":"1.23.3"}