Allow image-only visitor messages

public/admin.js

@@ -69,21 +69,28 @@ $("#settingsForm").addEventListener("submit", async (event) => {
 $("#replyForm").addEventListener("submit", async (event) => {
   event.preventDefault();
   if (!state.activeId) return;
+  const textarea = event.currentTarget.querySelector("textarea[name='message']");
+  const originalMessage = textarea.value;
   const form = new FormData(event.currentTarget);
   const payload = {
     message: form.get("message") || "",
     attachments: await Promise.all(state.replyFiles.slice(0, 3).map(fileToPayload))
   };
   if (!payload.message.trim() && !payload.attachments.length) return;
-  await api(`/api/admin/conversations/${state.activeId}/messages`, {
-    method: "POST",
-    body: payload
-  });
-  event.currentTarget.querySelector("textarea[name='message']").value = "";
-  event.currentTarget.reset();
-  state.replyFiles = [];
-  renderReplyAttachments();
-  await openConversation(state.activeId);
+  textarea.value = "";
+  try {
+    await api(`/api/admin/conversations/${state.activeId}/messages`, {
+      method: "POST",
+      body: payload
+    });
+    event.currentTarget.reset();
+    state.replyFiles = [];
+    renderReplyAttachments();
+    await openConversation(state.activeId);
+  } catch (error) {
+    textarea.value = originalMessage;
+    throw error;
+  }
 });
 
 $("#replyForm textarea").addEventListener("keydown", (event) => {
@@ -299,7 +306,7 @@ function renderActive() {
   $("#messages").innerHTML = messages.map((message) => `
     <article class="message ${message.senderType}">
       <div class="by">${escapeHtml(message.senderName || message.senderType)} · ${escapeHtml(message.createdAt)}</div>
-      <p>${escapeHtml(message.body)}</p>
+      ${message.body ? `<p>${escapeHtml(message.body)}</p>` : ""}
       ${renderAttachments(message.attachments)}
     </article>
   `).join("");

public/widget.js

@@ -37,7 +37,7 @@
         <div class="mf-typing" hidden>Operator pise...</div>
         <form class="mf-form">
           <div class="mf-composer">
-            <textarea name="message" required rows="3" placeholder="${escapeHtml(copy.placeholder)}"></textarea>
+            <textarea name="message" rows="3" placeholder="${escapeHtml(copy.placeholder)}"></textarea>
             <button class="mf-send" type="submit" aria-label="${escapeHtml(copy.sendLabel)}" title="${escapeHtml(copy.sendLabel)}">
               <svg viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M3.7 20.3 21 12 3.7 3.7l2.5 7.1L14 12l-7.8 1.2-2.5 7.1Z"></path>
@@ -121,7 +121,7 @@
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       const body = await payloadFromForm(form, selectedFiles);
-      if (!body.message.trim()) return;
+      if (!body.message.trim() && !body.attachments.length) return;
       const submitButton = root.querySelector(".mf-send");
       submitButton.disabled = true;
 
@@ -200,7 +200,7 @@
   function addMessage(messages, sender, body, attachments) {
     const item = document.createElement("article");
     item.className = `mf-message ${sender}`;
-    item.innerHTML = `<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) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
     messages.append(item);
     messages.scrollTop = messages.scrollHeight;
   }

server.js

@@ -354,7 +354,7 @@ function getVisitorConversation(res, url) {
 
 async function createConversation(req, res) {
   const body = await readJson(req, 8_000_000);
-  if (!body.message || !String(body.message).trim()) return json(res, 400, { error: "message_required" });
+  if ((!body.message || !String(body.message).trim()) && !(body.attachments || []).length) return json(res, 400, { error: "message_or_image_required" });
   if (!attachmentsAreAllowed(body.attachments || [])) return json(res, 400, { error: "only_images_allowed" });
   const site = db.prepare("SELECT * FROM sites WHERE site_key = ?").get(body.siteKey || "9b-plus");
   if (!site) return json(res, 404, { error: "site_not_found" });
@@ -389,7 +389,7 @@ async function createConversation(req, res) {
       nullish(countryFromHeaders(req))
     ).lastInsertRowid;
 
-    const messageId = insertMessage(conversationId, "visitor", info.name || "Visitor", String(body.message).trim());
+    const messageId = insertMessage(conversationId, "visitor", info.name || "Visitor", String(body.message || "").trim());
     saveAttachments(conversationId, messageId, body.attachments || []);
     return conversationId;
   });
@@ -403,11 +403,11 @@ async function createConversation(req, res) {
 
 async function createVisitorMessage(req, res, url) {
   const body = await readJson(req, 8_000_000);
-  if (!body.message || !String(body.message).trim()) return json(res, 400, { error: "message_required" });
+  if ((!body.message || !String(body.message).trim()) && !(body.attachments || []).length) return json(res, 400, { error: "message_or_image_required" });
   if (!attachmentsAreAllowed(body.attachments || [])) return json(res, 400, { error: "only_images_allowed" });
   const conversation = findConversation(publicIdFrom(url));
   if (!conversation) return json(res, 404, { error: "conversation_not_found" });
-  const messageId = insertMessage(conversation.id, "visitor", conversation.visitor_name || "Visitor", String(body.message).trim());
+  const messageId = insertMessage(conversation.id, "visitor", conversation.visitor_name || "Visitor", String(body.message || "").trim());
   saveAttachments(conversation.id, messageId, body.attachments || []);
   updateVisitorContext(conversation.id, body);
   markConversationUnread(conversation.id);