Show widget messages immediately

public/widget.js

@@ -158,6 +158,10 @@
       if (!body.message.trim() && !body.attachments.length) return;
       const pendingMessage = queuePendingMessage(body);
       const submitButton = root.querySelector(".mf-send");
+      form.message.value = "";
+      selectedFiles = [];
+      renderSelectedFiles(attachmentList, selectedFiles);
+      addMessage(messages, "visitor", "Visitor", body.message, body.attachments || [], null);
       submitButton.disabled = true;
 
       try {
@@ -165,9 +169,6 @@
         removePendingMessage(pendingMessage.clientMessageId);
         session.conversationId = data.conversation.id;
         saveSession();
-        form.message.value = "";
-        selectedFiles = [];
-        renderSelectedFiles(attachmentList, selectedFiles);
         handleConversationUpdate(data, messages, panel, launcher, settings, messageEffectState, { notify: false });
         connectEvents(messages, typing, panel, launcher, settings, messageEffectState);
         startConversationPolling(messages, panel, launcher, settings, messageEffectState);
@@ -388,13 +389,23 @@
     }
     const item = document.createElement("article");
     item.className = `mf-message ${sender}`;
-    item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
+    item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => {
+      const src = attachmentSrc(a);
+      return `<a class="mf-photo" href="${src}" target="_blank" rel="noreferrer"><img src="${src}" alt="${escapeHtml(a.name)}"></a>`;
+    }).join("")}`;
     messages.append(item);
     for (const image of item.querySelectorAll("img")) {
       image.addEventListener("load", () => scrollMessagesToBottom(messages), { once: true });
       image.addEventListener("error", () => scrollMessagesToBottom(messages), { once: true });
     }
     scrollMessagesToBottom(messages);
+    return item;
+  }
+
+  function attachmentSrc(attachment) {
+    if (attachment?.dataBase64) return attachment.dataBase64;
+    if (attachment?.url) return `${apiBase}${attachment.url}`;
+    return "";
   }
 
   function scrollMessagesToBottom(messages) {