Add image input display

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -23,6 +23,7 @@
     import { PreUnreroll, Prereroll } from 'src/ts/process/prereroll';
     import { processMultiCommand } from 'src/ts/process/command';
     import { postChatFile } from 'src/ts/process/files/multisend';
+  import { getInlayImage } from 'src/ts/process/files/image';
 
     let messageInput:string = ''
     let messageInputTranslate:string = ''
@@ -35,6 +36,7 @@
     let doingChatInputTranslate = false
     let currentCharacter:character|groupChat = $CurrentCharacter
     let toggleStickers:boolean = false
+    let fileInput:string[] = []
     export let openModuleList = false
     export let openChatList:boolean = false 
 
@@ -65,6 +67,12 @@
             }
         }
 
+        if(fileInput.length > 0){
+            for(const file of fileInput){
+                messageInput += `{{inlay::${file}}}`
+            }
+            fileInput = []
+        }
 
         if(messageInput === ''){
             if($DataBase.characters[selectedChar].type !== 'group'){
@@ -436,7 +444,7 @@
                     </div>
             </div>
             {#if $DataBase.useAutoTranslateInput}
-                <div class="flex items-center mt-2 mb-2 w-full">
+                <div class="flex items-center mt-2 mb-2">
                     <label for='messageInputTranslate' class="text-textcolor ml-4">
                         <LanguagesIcon />
                     </label>
@@ -462,6 +470,17 @@
                 </div>
             {/if}
 
+            {#if fileInput.length > 0}
+                <div class="flex items-center ml-4 flex-wrap p-2 m-2 border-darkborderc border rounded-md">
+                    {#each fileInput as file, i}
+                        {#await getInlayImage(file) then inlayImage}
+                            <img src={inlayImage.data} alt="Inlay" class="max-w-24 max-h-24">
+                        {/await}
+                    {/each}
+                </div>
+
+            {/if}
+            
             {#if toggleStickers}
                 <div class="ml-4 flex flex-wrap">
                     <AssetInput bind:currentCharacter={currentCharacter} onSelect={(additionalAsset)=>{
@@ -644,7 +663,7 @@
                     <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
                         const res = await postChatFile(messageInput)
                         if(res?.type === 'image'){
-                            messageInput += res.data
+                            fileInput.push(res.data)
                             updateInputSizeAll()
                         }
                         if(res?.type === 'text'){

src/ts/process/files/image.ts

@@ -67,7 +67,7 @@ export async function writeInlayImage(imgObj:HTMLImageElement, arg:{name?:string
         width: drawWidth
     })
 
-    return `{{inlay::${imgid}}}`
+    return `${imgid}`
 }
 
 export async function getInlayImage(id: string){