app.js

@@ -51,8 +51,6 @@ async function initialize() {
   const messageForm = document.querySelector('#message-form');
   const toggleSetupBtn = document.querySelector('#toggle-setup-btn');
   const removeRoomBtn = document.querySelector('#remove-room-btn');
-  const attachFileButton = document.getElementById('attach-file');
-  const fileInput = document.getElementById('file-input');
 
   if (registerForm) {
     registerForm.addEventListener('submit', registerUser);
@@ -77,25 +75,6 @@ async function initialize() {
   if (removeRoomBtn) {
     removeRoomBtn.addEventListener('click', leaveRoom);
   }
-  if (attachFileButton) {
-    attachFileButton.addEventListener('click', () => fileInput.click());
-  }
-  if (fileInput) {
-    fileInput.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = async (event) => {
-          const buffer = new Uint8Array(event.target.result);
-          const filePath = `/files/${file.name}`;
-          await drive.put(filePath, buffer);
-          const fileUrl = `http://localhost:${servePort}${filePath}`;
-          sendFileMessage(userName, fileUrl, file.type, userAvatar);
-        };
-        reader.readAsArrayBuffer(file);
-      }
-    });
-  }
 
   const registerDiv = document.querySelector('#register');
   if (registerDiv) {
@@ -108,8 +87,6 @@ async function initialize() {
       const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
       await drive.put(`/icons/${username}.png`, avatarBuffer);
       updateIcon(username, avatarBuffer);
-    } else if (messageObj.type === 'file') {
-      addFileMessage(messageObj.name, messageObj.fileName, messageObj.fileUrl, messageObj.fileType, messageObj.avatar);
     } else {
       onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
     }
@@ -288,62 +265,6 @@ function sendMessage(e) {
   }
 }
 
-function sendFileMessage(name, fileUrl, fileType, avatar) {
-  const fileName = fileUrl.split('/').pop();
-  const messageObj = JSON.stringify({
-    type: 'file',
-    name,
-    fileName,
-    fileUrl,
-    fileType,
-    avatar,
-    timestamp: Date.now(),
-  });
-
-  const peers = [...swarm.connections];
-  for (const peer of peers) {
-    peer.write(messageObj);
-  }
-
-  addFileMessage(name, fileName, fileUrl, fileType, avatar);
-}
-
-function addFileMessage(from, fileName, fileUrl, fileType, avatar) {
-  const $div = document.createElement('div');
-  $div.classList.add('message');
-
-  const $img = document.createElement('img');
-  $img.src = avatar || 'https://via.placeholder.com/40';
-  $img.classList.add('avatar');
-  $div.appendChild($img);
-
-  const $content = document.createElement('div');
-  $content.classList.add('message-content');
-
-  const $header = document.createElement('div');
-  $header.classList.add('message-header');
-  $header.textContent = from;
-  $content.appendChild($header);
-
-  if (fileType.startsWith('image/')) {
-    const $image = document.createElement('img');
-    $image.src = fileUrl;
-    $image.alt = fileName;
-    $image.classList.add('attached-image');
-    $content.appendChild($image);
-  } else {
-    const $fileLink = document.createElement('a');
-    $fileLink.href = fileUrl;
-    $fileLink.textContent = `File: ${fileName}`;
-    $fileLink.download = fileName;
-    $content.appendChild($fileLink);
-  }
-
-  $div.appendChild($content);
-  document.querySelector('#messages').appendChild($div);
-  scrollToBottom();
-}
-
 function updatePeerCount() {
   const peerCountElement = document.querySelector('#peers-count');
   if (peerCountElement) {
@@ -362,7 +283,6 @@ function onMessageAdded(from, message, avatar) {
 
   const $img = document.createElement('img');
   $img.src = avatar || 'https://via.placeholder.com/40'; // Default to a placeholder image if avatar URL is not provided
-  $img.classList.add('avatar');
   $div.appendChild($img);
 
   const $content = document.createElement('div');

index.html

@@ -60,8 +60,6 @@
         </div>
         <form id="message-form">
           <textarea id="message" rows="4"></textarea>
-          <input type="file" id="file-input" style="display:none;">
-          <button type="button" id="attach-file">Attach File</button>
           <input type="submit" value="Send" />
         </form>
         <button id="remove-room-btn">Leave Room</button>

style.css

@@ -385,16 +385,19 @@ main {
 /* Message styles */
 .message {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     margin-bottom: 0.5rem;
     /* Reduced margin */
 }
 
-.message img.avatar {
+.message img {
     width: 32px;
+    /* Reduced size */
     height: 32px;
+    /* Reduced size */
     border-radius: 50%;
     margin-right: 0.5rem;
+    /* Reduced margin */
     border: 2px solid #b0d944;
 }
 
@@ -415,15 +418,8 @@ main {
     /* Reduced font size */
 }
 
-.message-text {
+.message-time {
-    color: #e0e0e0;
+    color: #a0a0a0;
-}
+    font-size: 0.75rem;
-
+    margin-left: 0.5rem;
-.attached-image {
-    max-width: 100%;
-    height: auto;
-    margin-top: 0.5rem;
-    border-radius: 4px;
-    /* Removed circular border */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }