1.83.0 (#311)

# 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

Author: kwaroran

src-tauri/tauri.conf.json

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

src/etc/patchNote.ts

@@ -1,13 +1,13 @@
 export const patchNote = {
-    version: "1.82",
+    version: "1.83",
     content: 
 `
-# Update 1.82
-- Added native fetch handling for local version
-  - This would make the fetch request faster and more stable
-  - This would solve many issues with fetch request on local version
-- Added Claude-3 streaming
-- Force Plain Fetch is now unrecommended
+# Update 1.83
+- Added multi language support for creator's quote
+- Added Network error resolve tips
+- Added iPad fullscreen compatibility
+- Changed requirements for creator's quote on uploading to RisuRealm
+- Fixed inlayed emotion images not displaying properly
 `
 }
 

src/lang/en.ts

@@ -25,6 +25,9 @@ export const languageEnglish = {
         noUserIcon: "You must set your icon first.",
         emptyText: "Text is empty.",
         wrongPassword: "Wrong Password",
+        networkFetch: "This happens when the network is unstable or the server is down.",
+        networkFetchWeb: "This can be a CORS error. this only happens when using web version dude to limitations of the browser. try using desktop local version, or other version of RisuAI.",
+        networkFetchPlain: "This can be a plain fetch error. try disabling force plain fetch option in settings.",
     },
     showHelp: "Show Help",
     help:{

src/lib/ChatScreens/CreatorQuote.svelte

@@ -5,17 +5,13 @@
                 <XIcon />
             </button>
         </h1>
-        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
-            {#await ParseMarkdown(quote) then md} 
-                {@html md}
-            {/await}
-        </div>
+        <MultiLangDisplay value={quote} markdown={true} />
     </div>
 </div>
 <script lang="ts">
     import { XIcon } from "lucide-svelte";
     import { language } from "src/lang";
-    import { ParseMarkdown } from "src/ts/parser";
+    import MultiLangDisplay from "../UI/GUI/MultiLangDisplay.svelte";
 
     export let onRemove: () => void
     export let quote:string

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -229,7 +229,6 @@
 
     function abortChat(){
         if(abortController){
-            console.log('abort')
             abortController.abort()
         }
     }
@@ -290,8 +289,6 @@
             const lastMessageInputTranslate = messageInputTranslate
             await sleep(1500)
             if(lastMessageInputTranslate === messageInputTranslate){
-                console.log(lastMessageInputTranslate === messageInputTranslate)
-                console.log(lastMessageInputTranslate, messageInputTranslate)
                 translate(reverse ? messageInputTranslate : messageInput, reverse).then((translatedMessage) => {
                     if(translatedMessage){
                         if(reverse)

src/lib/Others/AlertComp.svelte

@@ -25,15 +25,10 @@
             btn.focus()
         }
         if($alertStore.type !== 'input'){
-            console.log('reset input')
             input = ''
         }
         
     })()
-
-    alertStore.subscribe(() => {
-        console.log('alup')
-    })
 </script>
 
 <svelte:window on:message={async (e) => {
@@ -73,6 +68,9 @@
                 }}>Terms of Service</a> to continue</div>
             {:else if $alertStore.type !== 'select'}
                 <span class="text-gray-300">{$alertStore.msg}</span>
+                {#if $alertStore.submsg}
+                    <span class="text-gray-500 text-sm">{$alertStore.submsg}</span>
+                {/if}
             {/if}
             {#if $alertStore.type === 'ask'}
                 <div class="flex gap-2 w-full">

src/lib/Setting/Pages/UserSettings.svelte

@@ -22,7 +22,6 @@
 <svelte:window on:message={async (e) => {
     if(e.origin.startsWith("https://sv.risuai.xyz") || e.origin.startsWith("http://127.0.0.1")){
         if(e.data.msg.type === 'drive'){
-            console.log(e.data.msg)
             await loadRisuAccountData()
             $DataBase.account.data.refresh_token = e.data.msg.data.refresh_token
             $DataBase.account.data.access_token = e.data.msg.data.access_token

src/lib/Setting/botpreset.svelte

@@ -60,7 +60,6 @@
                         if(d){
                             changeToPreset(0)
                             let botPresets = $DataBase.botPresets
-                            console.log(botPresets)
                             botPresets.splice(i, 1)
                             $DataBase.botPresets = botPresets
                             changeToPreset(0, false)

src/lib/SideBars/CharConfig.svelte

@@ -30,6 +30,7 @@
   import CheckInput from "../UI/GUI/CheckInput.svelte";
   import { updateInlayScreen } from "src/ts/process/inlayScreen";
   import { registerOnnxModel } from "src/ts/process/embedding/transformers";
+  import MultiLangInput from "../UI/GUI/MultiLangInput.svelte";
     
 
     let subMenu = 0
@@ -88,7 +89,6 @@
             return
         }
         if((!currentChar) || (!isEqual(currentChar.data, cha))){
-            console.log("updated")
             if(cha.type === 'character'){
                 currentChar = {
                     type: 'character',
@@ -653,9 +653,9 @@
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
 
         <span class="text-textcolor">{language.creatorNotes} <Help key="creatorQuotes"/></span>
-        <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
+        <MultiLangInput bind:value={currentChar.data.creatorNotes} className="my-2" onInput={() => {
             currentChar.data.removedQuotes = false
-        }}></TextAreaInput>
+        }}></MultiLangInput>
 
         <span class="text-textcolor">{language.systemPrompt} <Help key="systemPrompt"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
@@ -753,7 +753,6 @@
                                     return
                                 }
                                 for(const f of da){
-                                    console.log(f)
                                     const img = f.data
                                     const name = f.name
                                     const extension = name.split('.').pop().toLowerCase()

src/lib/UI/GUI/MultiLangDisplay.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ParseMarkdown } from "src/ts/parser";
+  import { parseMultilangString, toLangName } from "src/ts/util";
+
+    export let value: string
+    export let markdown: boolean = false
+    let valueObject: {[code:string]:string} = parseMultilangString(value)
+    let selectedLang = "en"
+    if(valueObject["en"] === undefined){
+        selectedLang = "xx"
+    }
+</script>
+
+<div class="flex flex-col">
+    <div class="flex flex-wrap max-w-fit p-1 gap-2">
+        {#each Object.keys(valueObject) as lang}
+            {#if lang !== 'xx' || Object.keys(valueObject).length === 1}
+                <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} on:click|stopPropagation={() => {
+                    selectedLang = lang
+                }}>{toLangName(lang)}</button>
+            {/if}
+        {/each}
+    </div>
+    {#if markdown}
+        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
+            {#await ParseMarkdown(valueObject[selectedLang]) then md} 
+                {@html md}
+            {/await}
+        </div>
+    {:else}
+        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
+            {valueObject[selectedLang]}
+        </div>
+    {/if}
+</div>

src/lib/UI/GUI/MultiLangInput.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { encodeMultilangString, languageCodes, parseMultilangString, toLangName } from "src/ts/util";
+    import TextAreaInput from "./TextAreaInput.svelte";
+    export let value: string
+    let addingLang = false
+    let valueObject: {[code:string]:string} = parseMultilangString(value)
+    let selectedLang = "en"
+    export let className = ""
+    export let onInput = () => {}
+    const updateValue = () => {
+        for(let lang in valueObject){
+            if(valueObject[lang] === "" && lang !== selectedLang && lang!=="en" ){
+                delete valueObject[lang]
+            }
+        }
+        if(valueObject.xx){
+            delete valueObject.xx
+        }
+        valueObject = valueObject // force update
+        value = encodeMultilangString(valueObject)
+    }
+    if(valueObject["en"] === undefined){
+        valueObject["en"] = valueObject["xx"]
+        delete valueObject["xx"]
+        updateValue()
+    }
+</script>
+
+<div class="flex flex-wrap max-w-fit p-1 gap-2">
+    {#each Object.keys(valueObject) as lang}
+        {#if lang !== 'xx'}
+            <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} on:click={() => {
+                selectedLang = lang
+                updateValue()
+            }}>{toLangName(lang)}</button>
+        {/if}
+    {/each}
+    <button class="text-nowrap bg-bgcolor py-2 rounded-lg px-4" class:ring-1={addingLang} on:click={() => {addingLang = !addingLang}}>+</button>
+</div>
+{#if addingLang}
+    <div class="m-1 p-1 g-2 flex max-w-fit rounded-md border-t-bgcolor flex-wrap gap-1">
+        {#each languageCodes as lang}
+            <button class="bg-bgcolor py-2 rounded-lg px-4 text-nowrap" on:click={() => {
+                valueObject[lang] = ""
+                selectedLang = lang
+                addingLang = false
+            }}>{toLangName(lang)}</button>
+        {/each}
+    </div>
+{/if}
+<TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => {
+    updateValue()
+    onInput()
+}} additionalClass={className} />

src/lib/UI/Realm/RealmHubIcon.svelte

@@ -2,18 +2,21 @@
     import { BookIcon, ImageIcon, SmileIcon } from "lucide-svelte";
     import { alertNormal } from "src/ts/alert";
     import { hubURL, type hubType } from "src/ts/characterCards";
+  import { trimNonLatin } from "src/ts/storage/globalApi";
+  import { parseMultilangString } from "src/ts/util";
 
     export let onClick = () => {}
     export let chara:hubType
 
 </script>
 
 
-<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={onClick}>                <div class="flex gap-2 w-full">
+<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={onClick}>
+    <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-textcolor text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-        <span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+        <span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{parseMultilangString(chara.desc).en ?? parseMultilangString(chara.desc).xx}</span>
         <div class="flex flex-wrap">
             {#each chara.tags as tag, i}
                 {#if i < 4}

src/lib/UI/Realm/RealmPopUp.svelte

@@ -6,7 +6,7 @@
     import { parseMarkdownSafe } from "src/ts/parser";
     import { DataBase } from "src/ts/storage/database";
     import RealmLicense from "./RealmLicense.svelte";
-  import { characterFormatUpdate } from "src/ts/characters";
+  import MultiLangDisplay from "../GUI/MultiLangDisplay.svelte";
 
     export let openedData:hubType
 
@@ -25,9 +25,7 @@
             {/if}
             <div class="flex justify-start gap-4 mt-4">
                 <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
-                <span class="text-textcolor2 break-words text-base chattext prose prose-invert">
-                    {@html parseMarkdownSafe(openedData.desc)}
-                </span>
+                <MultiLangDisplay value={openedData.desc} markdown={true} />
             </div>
             <RealmLicense license={openedData.license}/>
 

src/lib/UI/Realm/RealmUpload.svelte

@@ -1,6 +1,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
-    <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" on:click|stopPropagation>
+    <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl max-h-full overflow-y-auto" on:click|stopPropagation>
 
         {#if !$DataBase.account}
             <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
@@ -22,7 +22,7 @@
         <span class="text-textcolor">{language.creatorNotes}</span>
         <span class="text-textcolor2 text-sm">A description that displays when you search and when you first open a bot.</span>
         <span class="text-textcolor2 text-sm">More than 20 characters.</span>
-        <TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
+        <MultiLangInput bind:value={char.creatorNotes} />
         <span class="text-textcolor">{language.tags}</span>
         <span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
         <TextInput placeholder="" bind:value={tags} on:input={() => {
@@ -53,18 +53,21 @@
             <span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
         {/if}
         <Button on:click={async () => {
-            if(char.creatorNotes.length < 20){
-                alertError("Creator Notes must be longer than 20 characters")
+            const enNotes = creatorNotes.en
+            const latin1 = /^[\x00-\xFF]*$/
+            if(enNotes.length < 10){
+                alertError("English version of creator notes must be longer than 10 characters")
             }
-            else{
-                shareRisuHub(char, {
-                    anon: privateMode,
-                    nsfw: nsfwMode,
-                    tag: tags,
-                    license: license
-                })
-                close()
+            if(!latin1.test(enNotes)){
+                alertError("English version of creator notes must contain only Latin-1 characters")
             }
+            shareRisuHub(char, {
+                anon: privateMode,
+                nsfw: nsfwMode,
+                tag: tags,
+                license: license
+            })
+            close()
         }} className="mt-2" size="lg">{language.shareCloud}</Button>
         {/if}
 
@@ -79,16 +82,18 @@
     import { shareRisuHub } from "src/ts/characterCards";
     import { DataBase, type character } from "src/ts/storage/database";
     import TextInput from "../GUI/TextInput.svelte";
-    import TextAreaInput from "../GUI/TextAreaInput.svelte";
     import Button from "../GUI/Button.svelte";
     import SelectInput from "../GUI/SelectInput.svelte";
     import { CCLicenseData } from "src/ts/creation/license";
     import OptionInput from "../GUI/OptionInput.svelte";
+    import { parseMultilangString } from "src/ts/util";
+  import MultiLangInput from "../GUI/MultiLangInput.svelte";
     export let close = () => {}
     export let char:character
     let tags=""
     let privateMode = false
     let nsfwMode = false
     let license = ""
+    let creatorNotes: {[code:string]:string} = parseMultilangString(char.creatorNotes)
 
 </script>