From 110223f468c075a60382bbf4cf18467bc855b5db Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Thu, 17 Jul 2025 00:08:27 +0800
Subject: [PATCH] :bug: Improve showMessage() (#15305)

---
 app/src/assets/scss/component/_snackbar.scss |  1 +
 app/src/dialog/message.ts                    | 46 +++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/src/assets/scss/component/_snackbar.scss b/app/src/assets/scss/component/_snackbar.scss
index b4edf4028..cf2e75803 100644
--- a/app/src/assets/scss/component/_snackbar.scss
+++ b/app/src/assets/scss/component/_snackbar.scss
@@ -3,6 +3,7 @@
   position: relative;
   transition: transform 256ms cubic-bezier(.45, .05, .55, .95) 0ms;
   text-align: right;
+  justify-self: end;
   font-size: var(--b3-font-size);
 
   &--hide {
diff --git a/app/src/dialog/message.ts b/app/src/dialog/message.ts
index c931c30ca..6d17e7dcd 100644
--- a/app/src/dialog/message.ts
+++ b/app/src/dialog/message.ts
@@ -32,10 +32,21 @@ export const initMessage = () => {
             target = target.parentElement;
         }
     });
-    const tempMessageElement = document.getElementById("tempMessage");
-    if (tempMessageElement) {
-        showMessage(tempMessageElement.innerHTML);
-        tempMessageElement.remove();
+    
+    const tempMessages = document.getElementById("tempMessages");
+    if (tempMessages) {
+        const items = tempMessages.querySelectorAll("[temp-message]");
+        items.forEach((item) => {
+            const timeoutString = item.getAttribute("data-timeout");
+            let timeout;
+            if (timeoutString) {
+                timeout = parseInt(timeoutString);
+            }
+            const type = item.getAttribute("data-type");
+            const messageId = item.getAttribute("data-message-id");
+            showMessage(item.innerHTML, timeout, type, messageId);
+        });
+        tempMessages.remove();
     }
 };
 
@@ -43,14 +54,25 @@ export const initMessage = () => {
 export const showMessage = (message: string, timeout = 6000, type = "info", messageId?: string) => {
     const messagesElement = document.getElementById("message").firstElementChild;
     if (!messagesElement) {
-        document.body.insertAdjacentHTML("beforeend", `<div style="top: 10px;
-    position: fixed;
-    z-index: 100;
-    background: white;
-    padding: 10px;
-    border-radius: 5px;
-    right: 10px;
-    border: 1px solid #e0e0e0;" id='tempMessage'>${message}</div>`);
+        let tempMessages = document.getElementById("tempMessages");
+        if (!tempMessages) {
+            document.body.insertAdjacentHTML("beforeend", "<div id='tempMessages'></div>");
+            tempMessages = document.getElementById("tempMessages");
+        }
+        
+        tempMessages.insertAdjacentHTML("beforeend", `<div style="
+            top: 10px;
+            position: fixed;
+            z-index: 100;
+            background: white;
+            padding: 10px;
+            border-radius: 5px;
+            right: 10px;
+            border: 1px solid #e0e0e0;"
+            data-timeout='${timeout}'
+            data-type="${type}"
+            data-message-id='${messageId || ""}'
+            temp-message>${message}</div>`);
         return;
     }
     const id = messageId || genUUID();