Merge pull request #53 from tarkalabs/fix/report-message

Fix/report message

dev/init.js

@@ -109,7 +109,7 @@ async function sendMessage(message, optionalFiles) {
 async function reportMessage(messageId, payload, message) {
   console.log("messageId " + messageId);
   console.log("message " + message);
-  console.log("payload :>> ", JSON.parse(payload));
+  console.log("payload :>> ", payload);
 }
 
 const chat = TarkaChat.init({

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tarka-chat",
   "private": true,
-  "version": "2.4.2",
+  "version": "2.4.3",
   "type": "module",
   "repository": {
     "type": "git",

src/layout.html

@@ -10,13 +10,14 @@
       <div class="report-dialog">
         <textarea
           class="report-text"
-          placeholder="Write a message to explain your issue..."
+          placeholder="Provide your feedback to help us improve..."
           rows="6"
           cols="30"
+          maxlength="256"
         ></textarea>
         <div class="button-container">
           <button class="cancel-btn">Cancel</button>
-          <button class="report-btn">Report</button>
+          <button class="report-btn" disabled="true">Report</button>
         </div>
       </div>
     </div>

src/main.js

@@ -194,15 +194,20 @@ export default {
     const msgInput = document.querySelector("#tarka-chat .chat-input");
     const cancelButton = document.querySelector(".cancel-btn");
     const reportButton = document.querySelector(".report-btn");
+    const reportText = document.querySelector(".report-dialog .report-text");
+
+    reportText.addEventListener("input", (e) => {
+      reportButton.disabled = reportText.value === "";
+    });
 
     cancelButton.addEventListener("click", () => {
       const messageContainer = document.querySelector(
         "#tarka-chat .message-container",
       );
       const footer = document.querySelector(".footer");
       const reportDialog = document.querySelector(".report-dialog");
-      const reportText = document.querySelector(".report-dialog .report-text");
       reportText.value = "";
+      reportButton.disabled = true;
       reportDialog.style.display = "none";
       messageContainer.classList.remove("blur-background");
       footer.classList.remove("blur-background");
@@ -226,6 +231,8 @@ export default {
         JSON.parse(wrapper.getAttribute("data-payload")),
         reportMessageInput.value,
       );
+      reportText.value = "";
+      reportButton.disabled = true;
       reportDialog.style.display = "none";
       messageContainer.classList.remove("blur-background");
       footer.classList.remove("blur-background");

src/style.scss

@@ -294,6 +294,10 @@
             margin-left: 10px;
             border: 1px solid var(--primary-primary, #9500b3);
             border-radius: 5px;
+
+            &:disabled {
+              background-color: grey;
+            }
           }
         }
       }