From 2fee3aa70fe4d20fa40f08a20ab3930f8f6f8574 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Mon, 18 Mar 2024 00:25:18 +0900
Subject: [PATCH] Add image input display

---
 src/lib/ChatScreens/DefaultChatScreen.svelte | 23 ++++++++++++++++++--
 src/ts/process/files/image.ts                |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 0a218639..bbf7c823 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/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>
@@ -461,6 +469,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">
@@ -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'){
diff --git a/src/ts/process/files/image.ts b/src/ts/process/files/image.ts
index d4f76fd3..98c4a0ff 100644
--- a/src/ts/process/files/image.ts
+++ b/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){