Add background embeding to module

src/lib/ChatScreens/BackgroundDom.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { ParseMarkdown, risuChatParser } from "src/ts/parser";
     import { DataBase, type Database, type character, type groupChat } from "src/ts/storage/database";
-    import { CurrentVariablePointer, selectedCharID } from "src/ts/stores";
+    import { CurrentVariablePointer, moduleBackgroundEmbedding, selectedCharID } from "src/ts/stores";
     import { onDestroy } from "svelte";
 
     let backgroundHTML = ''
@@ -41,10 +41,10 @@
 </script>
 
 
-{#if backgroundHTML}
+{#if backgroundHTML || $moduleBackgroundEmbedding}
     {#key $CurrentVariablePointer}
         <div class="absolute top-0 left-0 w-full h-full">
-            {#await ParseMarkdown(risuChatParser(backgroundHTML, {chara:currentChar}), currentChar, 'back') then md} 
+            {#await ParseMarkdown(risuChatParser((backgroundHTML || '') + ($moduleBackgroundEmbedding || ''), {chara:currentChar}), currentChar, 'back') then md} 
                 {@html md}
             {/await}
         </div>

src/lib/Setting/Pages/Module/ModuleMenu.svelte

@@ -63,6 +63,15 @@
         }
     }
 
+    function toggleBackground(){
+        if(typeof(currentModule.backgroundEmbedding) !== 'string'){
+            currentModule.backgroundEmbedding = ''
+        }
+        else{
+            currentModule.backgroundEmbedding = undefined
+        }
+    }
+
     function addLorebook(){
         if(Array.isArray(currentModule.lorebook)){
             currentModule.lorebook.push({
@@ -121,7 +130,9 @@
     <button class={(!Array.isArray(currentModule.trigger)) ? 'p-4' : "p-4 bg-selected rounded-bl-md"} on:click={toggleTrigger}>
         {language.triggerScript}
     </button>
-    <button></button>
+    <button class={(!Array.isArray(currentModule.trigger)) ? 'p-4' : "p-4 bg-selected rounded-bl-md"} on:click={toggleBackground}>
+        {language.backgroundHTML}
+    </button>
 </div>
 
 {#if (Array.isArray(currentModule.lorebook))}
@@ -147,6 +158,11 @@
     </button>
 {/if}
 
+{#if typeof(currentModule.backgroundEmbedding) === 'string'}
+    <span class="mt-8 text-xl">{language.backgroundHTML}</span>
+    <TextAreaInput bind:value={currentModule.backgroundEmbedding} className="mt-2" placeholder={language.backgroundHTML} size="sm"/>
+{/if}
+
 {#if (Array.isArray(currentModule.trigger))}
     <span class="mt-8 text-xl">{language.triggerScript}</span>
     <div class="flex items-start mt-2 gap-2">

src/ts/process/modules.ts

@@ -18,6 +18,7 @@ export interface RisuModule{
     id: string
     lowLevelAccess?: boolean
     hideIcon?: boolean
+    backgroundEmbedding?:string
 }
 
 export async function exportModule(module:RisuModule){

src/ts/stores.ts

@@ -25,6 +25,7 @@ export const CharEmotion = writable({} as {[key:string]: [string, string, number
 export const ViewBoxsize = writable({ width: 12 * 16, height: 12 * 16 }); // Default width and height in pixels
 export const settingsOpen = writable(false)
 export const botMakerMode = writable(false)
+export const moduleBackgroundEmbedding = writable('')
 
 //optimization
 
@@ -202,12 +203,19 @@ function onModuleUpdate(){
     ])
     
     let moduleHideIcon = false
+    let backgroundEmbedding = ''
     m.forEach((module) => {
         if(module.hideIcon){
             moduleHideIcon = true
         }
+        if(module.backgroundEmbedding){
+            backgroundEmbedding += '\n' + module.backgroundEmbedding + '\n'
+        }
     })
 
+    if(backgroundEmbedding){
+        moduleBackgroundEmbedding.set(backgroundEmbedding)
+    }
     HideIconStore.set(characterHideIcon || moduleHideIcon)
 }