[feat] added asset width option

src/lang/en.ts

@@ -344,5 +344,6 @@ export const languageEnglish = {
     noweb: "This feature cannot be used on web version.",
     createBotInternet: "Create Bot from Internet with AI",
     createBotInternetAlert: "Please provide the character's name and the corresponding series/game.",
-    able:"Able"
+    able:"Able",
+    assetWidth: "Asset Max Width",
 }

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -63,6 +63,13 @@
 <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
+
+<span class="text-neutral-200">{language.assetWidth}</span>
+<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
+<span class="text-gray-400 mb-6 text-sm">{
+    ($DataBase.assetWidth === -1) ? "Unlimited" : 
+    ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
+
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
 </div>

src/ts/parser.ts

@@ -56,11 +56,14 @@ DOMPurify.addHook("uponSanitizeAttribute", (node, data) => {
 })
 
 async function parseAdditionalAssets(data:string, char:character, mode:'normal'|'back'){
+    const db = get(DataBase)
+    const assetWidthString = (db.assetWidth && db.assetWidth !== -1 || db.assetWidth === 0) ? `max-width:${db.assetWidth}rem;` : ''
+
     if(char.additionalAssets){
         for(const asset of char.additionalAssets){
             const assetPath = await getFileSrc(asset[1])
             data = data.replaceAll(`{{raw::${asset[0]}}}`, assetPath).
-                    replaceAll(`{{img::${asset[0]}}}`,`<img src="${assetPath}" alt="${asset[0]}"/>`)
+                    replaceAll(`{{img::${asset[0]}}}`,`<img src="${assetPath}" alt="${asset[0]}" style="${assetWidthString} "/>`)
                     .replaceAll(`{{video::${asset[0]}}}`,`<video controls autoplay loop><source src="${assetPath}" type="video/mp4"></video>`)
                     .replaceAll(`{{audio::${asset[0]}}}`,`<audio controls autoplay loop><source src="${assetPath}" type="audio/mpeg"></audio>`)
             if(mode === 'back'){

src/ts/storage/database.ts

@@ -282,6 +282,7 @@ export function setDatabase(data:Database){
     data.openrouterRequestModel ??= 'openai/gpt-3.5-turbo'
     data.toggleConfirmRecommendedPreset ??= true
     data.officialplugins ??= {}
+    data.assetWidth ??= -1
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -574,6 +575,7 @@ export interface Database{
         name:string
         icon:string
     }[]
+    assetWidth:number
 }
 
 interface hordeConfig{