edited some more features

Author: Codesamp-Rohan

app.js

@@ -105,13 +105,14 @@ async function joinSwarm(seedBuffer) {
 }
 
 function sendMessage(e) {
+  e.preventDefault();
   const message = document.querySelector("#message").value;
   document.querySelector("#message").value = "";
-  e.preventDefault();
 
-  const name = userName || "You"; // Use the sender's name or 'You'
+  const name =
+    userName || b4a.toString(swarm.keyPair.publicKey, "hex").substr(0, 6); // Use the sender's name or 'You'
 
-  onMessageAdded(name, message); // Display the message in the sender's system
+  onMessageAdded("You", message); // Display the message in the sender's system
 
   // Prepare the message data as an object
   const messageData = {
@@ -134,17 +135,42 @@ function onMessageAdded(from, message) {
   // Create the message element
   const $message = document.createElement("p");
   $message.textContent = message;
-  $message.classList.add("message-item");
+  $message.classList.add(
+    from != "You" ? "message-item-right" : "message-item-left"
+  );
 
   // Create the sender element
   const $sender = document.createElement("p");
   $sender.textContent = from;
-  $sender.classList.add("by");
+  $sender.classList.add(from != "You" ? "by-right" : "by-left");
 
   // Append message and sender to the container div
   $messageDiv.appendChild($message);
   $messageDiv.appendChild($sender);
 
   // Append the container div to the #messages
-  document.querySelector("#messages").appendChild($messageDiv);
+  const messagesContainer = document.querySelector("#messages");
+  messagesContainer.appendChild($messageDiv);
+
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
 }
+
+// Message Edit
+document.querySelector("#message").addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && e.shiftKey) {
+    e.preventDefault();
+
+    const messageInput = document.querySelector("#message");
+    const cursorPosition = messageInput.selectionStart;
+
+    const textBefore = messageInput.value.substring(0, cursorPosition);
+    const textAfter = messageInput.value.substring(cursorPosition);
+
+    // Update the message input value with a newline at the current cursor position
+    messageInput.value = textBefore + "\n" + textAfter;
+
+    // Move the cursor to the correct position after the newline
+    messageInput.selectionStart = messageInput.selectionEnd =
+      cursorPosition + 1;
+  }
+});

index.html

@@ -146,35 +146,69 @@
         height: 0px; /* Adjust the height of the horizontal scrollbar */
       }
 
-      .message-item {
+      .message-item-left {
         padding-inline: 14px;
-        padding-block: 10px;
+        padding-block: 6px;
         margin-bottom: 5px;
-        background-color: #3c3d37;
+        background-color: #3c3d3756;
         border-radius: 10px;
         border-bottom-left-radius: 0;
         width: fit-content;
         border: 0.4px solid #bbb;
         max-width: 60%;
         color: #ecdfcc;
+        backdrop-filter: blur(20px);
+        align-self: flex-start;
+      }
+      .message-item-right {
+        padding-inline: 14px;
+        padding-block: 6px;
+        margin-bottom: 5px;
+        background-color: #3c3d3756;
+        border-radius: 10px;
+        border-bottom-right-radius: 0;
+        width: fit-content;
+        border: 0.4px solid #bbb;
+        max-width: 60%;
+        color: #ecdfcc;
+        backdrop-filter: blur(20px);
+        align-self: flex-end;
       }
       .hidden {
         display: none !important;
       }
-      .by {
+      .by-left {
         font-size: 10px;
         font-weight: 300;
         color: #ecdfcc;
-        background-color: #3c3d37;
+        background-color: #2e073f;
         width: fit-content;
         padding-inline: 10px;
         padding-block: 3px;
         border-radius: 50px;
         border-top-left-radius: 0;
-        border: 0.4px solid #bbb;
+        border: 0px solid #bbb;
+        align-self: flex-start;
+      }
+      .by-right {
+        font-size: 10px;
+        font-weight: 300;
+        color: #ecdfcc;
+        background-color: #2e073f;
+        width: fit-content;
+        padding-inline: 10px;
+        padding-block: 3px;
+        border-radius: 50px;
+        border-top-left-radius: 0;
+        border: 0px solid #bbb;
+        align-self: flex-end;
       }
       .message--div {
         margin-block: 10px;
+        width: 96%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
       }
       /* Pop Up */
       .popup {
@@ -216,12 +250,26 @@
         cursor: pointer;
       }
       .logo {
-        width: 14px;
+        width: 20px;
+      }
+      .blob {
+        width: 300px;
+        height: 300px;
+        border-radius: 50%;
+        position: fixed;
+        z-index: -1;
+        filter: blur(100px);
       }
     </style>
     <script type="module" src="./app.js"></script>
   </head>
   <body>
+    <div
+      class="blob"
+      style="background-color: #7a1cac94; top: -40px; left: -100px"></div>
+    <div
+      class="blob"
+      style="background-color: #eb367894; bottom: -250px; right: 0px"></div>
     <div id="bar"><pear-ctrl></pear-ctrl></div>
     <main>
       <button class="change--name">