Merge pull request 'Up to date fork' (#1) from snxraven/LinkUp-P2P-Chat:main into main

Reviewed-on: #1

.gitignore

@@ -7,3 +7,4 @@ chatBot/.env
 chatBot/commands/ai.js
 config.json
 .idea
+AIBot

README.md

@@ -0,0 +1,12 @@
+`LinkUp`  is currently in` active development` and `not fully launched`. 
+
+To launch the App in Dev Mode:
+
+`git clone https://git.ssh.surf/snxraven/LinkUp-P2P-Chat.git`
+
+`cd LinkUp-P2P-Chat`
+
+`npm i; npm i pear -g;`
+
+Lastly - run the app: 
+`pear dev -s /tmp/tmp_pear`

app.js

@@ -6,16 +6,22 @@ import Hyperdrive from 'hyperdrive';
 import Corestore from 'corestore';
 import { EventEmitter } from 'events';
 import fs from "fs";
+import handleCommand from './commands.js';
 
+const agentAvatarPath = './assets/agent.png';
+let agentAvatar = '';
 const storagePath = `./storage/`;
 const store = new Corestore(storagePath);
 const drive = new Hyperdrive(store);
 
 await drive.ready();
 
-let swarm;
+// Load the agent avatar once when the app starts
-let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
+if (fs.existsSync(agentAvatarPath)) {
-let peerCount = 0;
+  const avatarBuffer = fs.readFileSync(agentAvatarPath);
+  agentAvatar = `data:image/png;base64,${b4a.toString(avatarBuffer, 'base64')}`;
+}
+
 let activeRooms = [];
 const eventEmitter = new EventEmitter();
 
@@ -26,7 +32,8 @@ let servePort;
 let config = {
   userName: '',
   userAvatar: '',
-  rooms: []
+  rooms: [],
+  registeredUsers: {}
 };
 
 // Store messages for each room
@@ -37,14 +44,81 @@ function getRandomPort() {
   return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
 }
 
-async function initialize() {
+function currentTopic() {
-  swarm = new Hyperswarm();
+  return document.querySelector('#chat-room-topic').innerText;
+}
 
+function getCurrentPeerCount() {
+  const topic = currentTopic();
+  const room = activeRooms.find(room => room.topic === topic);
+  return room ? room.swarm.connections.size : 0;
+}
+
+function updatePeerCount() {
+  const peerCountElement = document.querySelector('#peers-count');
+  if (peerCountElement) {
+    peerCountElement.textContent = getCurrentPeerCount(); // Display the actual peer count
+  }
+}
+
+async function joinRoom(topicStr) {
+  const topicBuffer = b4a.from(topicStr, 'hex');
+  addRoomToList(topicStr);
+  await joinSwarm(topicBuffer);
+}
+
+async function createRoom(alias) {
+  const topicBuffer = crypto.randomBytes(32);
+  const topic = b4a.toString(topicBuffer, 'hex');
+  addRoomToList(topic, alias);
+  await joinSwarm(topicBuffer);
+}
+
+async function listFiles() {
+  const files = [];
+  for await (const entry of drive.readdir('/files')) {
+    files.push(entry);
+  }
+  return files;
+}
+async function deleteFile(filename) {
+  await drive.del(`/files/${filename}`);
+}
+
+async function initialize() {
+  try {
     servePort = getRandomPort();
     const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
     await serve.ready();
     console.log('Listening on http://localhost:' + serve.address().port);
 
+    // Event listeners setup
+    setupEventListeners();
+
+    const configExists = fs.existsSync("./config.json");
+    if (configExists) {
+      loadConfigFromFile();
+      renderRoomList();
+      await connectToAllRooms();
+    }
+
+    if (!configExists) {
+      document.querySelector('#register').classList.remove('hidden');
+    }
+
+    eventEmitter.on('onMessage', async (messageObj) => {
+      handleIncomingMessage(messageObj);
+    });
+
+    document.addEventListener("DOMContentLoaded", (event) => {
+      hljs.highlightAll();
+    });
+  } catch (error) {
+    console.error('Error during initialization:', error);
+  }
+}
+
+function setupEventListeners() {
   const registerForm = document.querySelector('#register-form');
   const selectAvatarButton = document.querySelector('#select-avatar');
   const createChatRoomButton = document.querySelector('#create-chat-room');
@@ -54,6 +128,7 @@ async function initialize() {
   const removeRoomBtn = document.querySelector('#remove-room-btn');
   const attachFileButton = document.getElementById('attach-file');
   const fileInput = document.getElementById('file-input');
+  const talkButton = document.getElementById('talk-btn');
 
   if (registerForm) {
     registerForm.addEventListener('submit', registerUser);
@@ -77,7 +152,7 @@ async function initialize() {
   }
   if (removeRoomBtn) {
     removeRoomBtn.addEventListener('click', () => {
-      const topic = document.querySelector('#chat-room-topic').innerText;
+      const topic = currentTopic();
       leaveRoom(topic);
     });
   }
@@ -87,42 +162,19 @@ async function initialize() {
   if (fileInput) {
     fileInput.addEventListener('change', handleFileInput);
   }
-
+  if (talkButton) {
-  const configExists = fs.existsSync("./config.json");
+    setupTalkButton();
-  if (configExists) {
-    config = JSON.parse(fs.readFileSync("./config.json", 'utf8'));
-    console.log("Read config from file:", config);
-    // Update port in URLs
-    config.userAvatar = updatePortInUrl(config.userAvatar);
-    config.rooms.forEach(room => {
-      room.alias = room.alias || truncateHash(room.topic);
-    });
-    for (let user in registeredUsers) {
-      registeredUsers[user] = updatePortInUrl(registeredUsers[user]);
-    }
-
-    renderRoomList(); // Render the room list with aliases
-
-    // Connect to all rooms on startup
-    for (const room of config.rooms) {
-      const topicBuffer = b4a.from(room.topic, 'hex');
-      await joinSwarm(topicBuffer);
   }
 }
 
-  const registerDiv = document.querySelector('#register');
+function handleIncomingMessage(messageObj) {
-  if (registerDiv && !configExists) {
-    registerDiv.classList.remove('hidden');
-  }
-
-  eventEmitter.on('onMessage', async (messageObj) => {
   console.log('Received message:', messageObj); // Debugging log
 
   if (messageObj.type === 'icon') {
     const username = messageObj.username;
     if (messageObj.avatar) {
       const avatarBuffer = b4a.from(messageObj.avatar, 'base64');
-        await drive.put(`/icons/${username}.png`, avatarBuffer);
+      drive.put(`/icons/${username}.png`, avatarBuffer);
       updateIcon(username, avatarBuffer);
     } else {
       console.error('Received icon message with missing avatar data:', messageObj);
@@ -130,25 +182,31 @@ async function initialize() {
   } else if (messageObj.type === 'file') {
     if (messageObj.file && messageObj.fileName) {
       const fileBuffer = b4a.from(messageObj.file, 'base64');
-        await drive.put(`/files/${messageObj.fileName}`, fileBuffer);
+      drive.put(`/files/${messageObj.fileName}`, fileBuffer).then(() => {
         const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`;
         addFileMessage(messageObj.name, messageObj.fileName, updatePortInUrl(fileUrl), messageObj.fileType, updatePortInUrl(messageObj.avatar), messageObj.topic);
+      });
     } else {
       console.error('Received file message with missing file data or fileName:', messageObj);
     }
   } else if (messageObj.type === 'message') {
-      onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic);
+    onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic, messageObj.timestamp);
+  } else if (messageObj.type === 'audio') {
+    const audioBuffer = b4a.from(messageObj.audio, 'base64');
+    const filePath = `/audio/${Date.now()}.webm`;
+    drive.put(filePath, audioBuffer).then(() => {
+      const audioUrl = `http://localhost:${servePort}${filePath}`;
+      addAudioMessage(messageObj.name, audioUrl, messageObj.avatar, messageObj.topic);
+    });
   } else {
     console.error('Received unknown message type:', messageObj);
   }
-  });
+}
 
-  swarm.on('connection', async (connection, info) => {
+async function handleConnection(connection, info) {
-    peerCount++;
+  console.log('New connection', info);
-    updatePeerCount();
-    console.log('Peer connected, current peer count:', peerCount);
 
-    // Send the current user's icon to the new peer
+  // Sending the icon immediately upon connection
   const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
   if (iconBuffer) {
     const iconMessage = JSON.stringify({
@@ -156,7 +214,10 @@ async function initialize() {
       username: config.userName,
       avatar: b4a.toString(iconBuffer, 'base64'),
     });
+    console.log('Sending icon to new peer:', iconMessage);
     connection.write(iconMessage);
+  } else {
+    console.error('Icon not found for user:', config.userName);
   }
 
   connection.on('data', (data) => {
@@ -165,23 +226,91 @@ async function initialize() {
   });
 
   connection.on('close', () => {
-      peerCount--;
+    console.log('Connection closed', info);
     updatePeerCount();
-      console.log('Peer disconnected, current peer count:', peerCount);
+  });
+
+  connection.on('error', (error) => {
+    console.error('Connection error', error);
+    if (error.code === 'ETIMEDOUT') {
+      retryConnection(info.topicBuffer);
+    }
+  });
+
+  updatePeerCount();
+}
+
+function retryConnection(topicBuffer) {
+  const topic = b4a.toString(topicBuffer, 'hex');
+  const room = activeRooms.find(room => room.topic === topic);
+  if (room) {
+    console.log('Retrying connection to room:', topic);
+    room.swarm.leave(topicBuffer);
+    joinSwarm(topicBuffer).catch((error) => {
+      console.error('Failed to rejoin room after timeout:', error);
+    });
+  }
+}
+
+function setupTalkButton() {
+  const talkButton = document.getElementById('talk-btn');
+  if (!talkButton) return;
+
+  let mediaRecorder;
+  let audioChunks = [];
+
+  talkButton.addEventListener('mousedown', async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(stream);
+    mediaRecorder.start();
+
+    mediaRecorder.addEventListener('dataavailable', event => {
+      audioChunks.push(event.data);
+    });
+
+    mediaRecorder.addEventListener('stop', async () => {
+      const audioBlob = new Blob(audioChunks);
+      audioChunks = [];
+
+      const arrayBuffer = await audioBlob.arrayBuffer();
+      const buffer = new Uint8Array(arrayBuffer);
+
+      const topic = currentTopic();
+      const filePath = `/audio/${Date.now()}.webm`;
+      await drive.put(filePath, buffer);
+
+      const audioUrl = `http://localhost:${servePort}${filePath}`;
+
+      const audioMessage = {
+        type: 'audio',
+        name: config.userName,
+        audio: b4a.toString(buffer, 'base64'),
+        audioType: audioBlob.type,
+        avatar: updatePortInUrl(config.userAvatar),
+        topic: topic
+      };
+
+      console.log('Sending audio message:', audioMessage); // Debugging log
+
+      const peers = [...activeRooms.find(room => room.topic === topic).swarm.connections];
+      for (const peer of peers) {
+        peer.write(JSON.stringify(audioMessage));
+      }
+
+      addAudioMessage(config.userName, audioUrl, config.userAvatar, topic);
     });
   });
 
-  swarm.on('error', (err) => {
+  talkButton.addEventListener('mouseup', () => {
-    console.error('Swarm error:', err);
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+    }
   });
 
-  swarm.on('close', () => {
+  talkButton.addEventListener('mouseleave', () => {
-    console.log('Swarm closed');
+    if (mediaRecorder && mediaRecorder.state === 'recording') {
-  });
+      mediaRecorder.stop();
-
+    }
-  // Initialize highlight.js once the DOM is fully loaded
-  document.addEventListener("DOMContentLoaded", (event) => {
-    hljs.highlightAll();
   });
 }
 
@@ -189,7 +318,7 @@ function registerUser(e) {
   e.preventDefault();
   const regUsername = document.querySelector('#reg-username').value;
 
-  if (registeredUsers[regUsername]) {
+  if (config.registeredUsers[regUsername]) {
     alert('Username already taken. Please choose another.');
     return;
   }
@@ -201,8 +330,8 @@ function registerUser(e) {
       const buffer = new Uint8Array(event.target.result);
       await drive.put(`/icons/${regUsername}.png`, buffer);
       config.userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
-      registeredUsers[regUsername] = `http://localhost:${servePort}/icons/${regUsername}.png`; // Use placeholder URL
+      config.registeredUsers[regUsername] = `http://localhost:${servePort}/icons/${regUsername}.png`; // Use placeholder URL
-      localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
+      writeConfigToFile("./config.json");
       continueRegistration(regUsername);
     };
     reader.readAsArrayBuffer(avatarFile);
@@ -240,7 +369,15 @@ async function createChatRoom() {
 
 async function joinChatRoom(e) {
   e.preventDefault();
-  const topicStr = document.querySelector('#join-chat-room-topic').value;
+  const topicStr = document.querySelector('#join-chat-room-topic').value.trim();
+
+  // Validate the topic string
+  const isValidTopic = /^[0-9a-fA-F]{64}$/.test(topicStr);
+  if (!isValidTopic) {
+    alert('Invalid topic format. Please enter a 64-character hexadecimal string.');
+    return;
+  }
+
   const topicBuffer = b4a.from(topicStr, 'hex');
   addRoomToList(topicStr);
   await joinSwarm(topicBuffer);
@@ -249,28 +386,38 @@ async function joinChatRoom(e) {
 async function joinSwarm(topicBuffer) {
   const topic = b4a.toString(topicBuffer, 'hex');
   if (!activeRooms.some(room => room.topic === topic)) {
+    try {
+      const swarm = new Hyperswarm();
       const discovery = swarm.join(topicBuffer, { client: true, server: true });
       await discovery.flushed();
 
-    activeRooms.push({ topic, discovery });
+      swarm.on('connection', (connection, info) => {
+        handleConnection(connection, info);
+      });
+
+      activeRooms.push({ topic, swarm, discovery });
 
       console.log('Joined room:', topic); // Debugging log
 
       renderMessagesForRoom(topic);
+      updatePeerCount();
+    } catch (error) {
+      console.error('Error joining swarm for topic:', topic, error);
+    }
   }
 }
 
-function addRoomToList(topic) {
+function addRoomToList(topic, alias) {
   const roomList = document.querySelector('#room-list');
   const roomItem = document.createElement('li');
-  roomItem.textContent = truncateHash(topic);
+  roomItem.textContent = alias || truncateHash(topic);
   roomItem.dataset.topic = topic;
 
   roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
   roomItem.addEventListener('click', () => switchRoom(topic));
   roomList.appendChild(roomItem);
 
-  config.rooms.push({ topic, alias: truncateHash(topic) });
+  config.rooms.push({ topic, alias: alias || truncateHash(topic) });
   writeConfigToFile("./config.json");
 }
 
@@ -315,8 +462,7 @@ function exitEditMode(roomItem, input, topic) {
     }
 
     // Check if the edited room is the current room in view
-    const currentTopic = document.querySelector('#chat-room-topic').innerText;
+    if (currentTopic() === topic) {
-    if (currentTopic === topic) {
       const chatRoomName = document.querySelector('#chat-room-name');
       if (chatRoomName) {
         chatRoomName.innerText = newAlias;
@@ -349,6 +495,7 @@ function switchRoom(topic) {
 
   clearMessages();
   renderMessagesForRoom(topic);
+  updatePeerCount();
 
   // Show chat UI elements
   document.querySelector('#chat').classList.remove('hidden');
@@ -359,7 +506,7 @@ function leaveRoom(topic) {
   const roomIndex = activeRooms.findIndex(room => room.topic === topic);
   if (roomIndex !== -1) {
     const room = activeRooms[roomIndex];
-    room.discovery.destroy();
+    room.swarm.destroy();
     activeRooms.splice(roomIndex, 1);
   }
 
@@ -379,16 +526,34 @@ function leaveRoom(topic) {
   }
 }
 
-function sendMessage(e) {
+
+async function sendMessage(e) {
   e.preventDefault();
   const message = document.querySelector('#message').value;
   document.querySelector('#message').value = '';
 
-  const topic = document.querySelector('#chat-room-topic').innerText;
+  const topic = currentTopic();
+  const timestamp = Date.now();
+
+  if (message.startsWith('~')) {
+    // Handle command
+    await handleCommand(message, {
+      eventEmitter,
+      currentTopic,
+      clearMessages,
+      addMessage: (from, message, avatar, topic) => onMessageAdded(from, message, avatar, topic, timestamp),
+      joinRoom,
+      leaveRoom,
+      createRoom,
+      listFiles,
+      deleteFile
+    });
+    return;
+  }
 
   console.log('Sending message:', message); // Debugging log
 
-  onMessageAdded(config.userName, message, config.userAvatar, topic);
+  onMessageAdded(config.userName, message, config.userAvatar, topic, timestamp);
 
   const messageObj = JSON.stringify({
     type: 'message',
@@ -396,10 +561,10 @@ function sendMessage(e) {
     message,
     avatar: config.userAvatar,
     topic: topic,
-    timestamp: Date.now()
+    timestamp: timestamp
   });
 
-  const peers = [...swarm.connections];
+  const peers = [...activeRooms.find(room => room.topic === topic).swarm.connections];
   for (const peer of peers) {
     peer.write(messageObj);
   }
@@ -415,7 +580,7 @@ async function handleFileInput(event) {
       await drive.put(filePath, buffer);
       const fileUrl = `http://localhost:${servePort}${filePath}`;
 
-      const topic = document.querySelector('#chat-room-topic').innerText;
+      const topic = currentTopic();
 
       const fileMessage = {
         type: 'file',
@@ -429,7 +594,7 @@ async function handleFileInput(event) {
 
       console.log('Sending file message:', fileMessage); // Debugging log
 
-      const peers = [...swarm.connections];
+      const peers = [...activeRooms.find(room => room.topic === topic).swarm.connections];
       for (const peer of peers) {
         peer.write(JSON.stringify(fileMessage));
       }
@@ -440,34 +605,13 @@ async function handleFileInput(event) {
   }
 }
 
-function sendFileMessage(name, fileUrl, fileType, avatar) {
-  const fileName = fileUrl.split('/').pop();
-  const messageObj = JSON.stringify({
-    type: 'file',
-    name,
-    fileName,
-    fileUrl,
-    fileType,
-    avatar,
-    topic: document.querySelector('#chat-room-topic').innerText,
-    timestamp: Date.now(),
-  });
-
-  const peers = [...swarm.connections];
-  for (const peer of peers) {
-    peer.write(messageObj);
-  }
-
-  addFileMessage(name, fileName, fileUrl, fileType, avatar, document.querySelector('#chat-room-topic').innerText);
-}
-
 function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
   console.log('Adding file message:', { from, fileName, fileUrl, fileType, avatar, topic }); // Debugging log
   const $div = document.createElement('div');
   $div.classList.add('message');
 
   const $img = document.createElement('img');
-  $img.src = avatar || 'https://via.placeholder.com/40';
+  $img.src = updatePortInUrl(avatar) || 'https://via.placeholder.com/40';
   $img.classList.add('avatar');
   $div.appendChild($img);
 
@@ -481,7 +625,7 @@ function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
 
   if (fileType.startsWith('image/')) {
     const $image = document.createElement('img');
-    $image.src = fileUrl;
+    $image.src = updatePortInUrl(fileUrl);
     $image.alt = fileName;
     $image.classList.add('attached-image');
     $content.appendChild($image);
@@ -500,19 +644,11 @@ function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
   $div.appendChild($content);
 
   // Only render the message if it's for the current room
-  const currentTopic = document.querySelector('#chat-room-topic').innerText;
+  if (currentTopic() === topic) {
-  if (currentTopic === topic) {
     document.querySelector('#messages').appendChild($div);
     scrollToBottom();
   } else {
-    console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log
+    console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic()}`); // Debugging log
-  }
-}
-
-function updatePeerCount() {
-  const peerCountElement = document.querySelector('#peers-count');
-  if (peerCountElement) {
-    peerCountElement.textContent = peerCount; // Display the actual peer count
   }
 }
 
@@ -521,20 +657,20 @@ function scrollToBottom() {
   container.scrollTop = container.scrollHeight;
 }
 
-function onMessageAdded(from, message, avatar, topic) {
+function onMessageAdded(from, message, avatar, topic, timestamp) {
   console.log('Adding message:', { from, message, avatar, topic }); // Debugging log
   const messageObj = {
     from,
     message,
-    avatar
+    avatar,
+    timestamp: timestamp || Date.now()
   };
   
   // Add the message to the store
   addMessageToStore(topic, messageObj);
 
   // Only render messages for the current room
-  const currentTopic = document.querySelector('#chat-room-topic').innerText;
+  if (currentTopic() === topic) {
-  if (currentTopic === topic) {
     const $div = document.createElement('div');
     $div.classList.add('message');
 
@@ -553,6 +689,34 @@ function onMessageAdded(from, message, avatar, topic) {
     const $text = document.createElement('div');
     $text.classList.add('message-text');
 
+    if (message.includes('Available files:')) {
+      const files = message.split('\n').slice(1); // Skip the "Available files:" line
+      const fileList = document.createElement('ul');
+
+      files.forEach(file => {
+        file = file.replace("- ", "")
+        const listItem = document.createElement('li');
+        const fileButton = document.createElement('button');
+        fileButton.textContent = file.trim();
+        fileButton.onclick = () => downloadFile(file.trim());
+
+        const deleteButton = document.createElement('button');
+        deleteButton.textContent = 'Delete';
+        deleteButton.onclick = () => {
+          console.log("file to delete: ", file);
+          deleteFile(file);
+          listItem.remove();
+        };
+
+
+        listItem.appendChild(fileButton);
+        listItem.appendChild(deleteButton);
+        fileList.appendChild(listItem);
+      });
+
+      $text.appendChild(fileList);
+    } else {
+
     const md = window.markdownit({
       highlight: function (str, lang) {
         if (lang && hljs.getLanguage(lang)) {
@@ -563,9 +727,9 @@ function onMessageAdded(from, message, avatar, topic) {
         return ''; // use external default escaping
       }
     });
-
     const markdownContent = md.render(message);
     $text.innerHTML = markdownContent;
+  }
 
     $content.appendChild($header);
     $content.appendChild($text);
@@ -574,7 +738,54 @@ function onMessageAdded(from, message, avatar, topic) {
     document.querySelector('#messages').appendChild($div);
     scrollToBottom();
   } else {
-    console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log
+    console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic()}`); // Debugging log
+  }
+}
+
+function downloadFile(filename) {
+  const fileUrl = `http://localhost:${servePort}/files/${filename}`;
+  const a = document.createElement('a');
+  a.href = fileUrl;
+  a.download = filename;
+  a.click();
+}
+
+
+function addAudioMessage(from, audioUrl, avatar, topic) {
+  console.log('Adding audio message:', { from, audioUrl, avatar, topic }); // Debugging log
+  const $div = document.createElement('div');
+  $div.classList.add('message');
+
+  const $img = document.createElement('img');
+  $img.src = updatePortInUrl(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);
+
+  const $audio = document.createElement('audio');
+  $audio.controls = true;
+  if (from !== config.userName) {
+    $audio.autoplay = true; // Add autoplay attribute for peers only
+  }
+  $audio.src = updatePortInUrl(audioUrl);
+  $audio.classList.add('attached-audio');
+  $content.appendChild($audio);
+
+  $div.appendChild($content);
+
+  // Only render the message if it's for the current room
+  if (currentTopic() === topic) {
+    document.querySelector('#messages').appendChild($div);
+    scrollToBottom();
+  } else {
+    console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic()}`); // Debugging log
   }
 }
 
@@ -594,11 +805,26 @@ async function updateIcon(username, avatarBuffer) {
   }
 }
 
+function clearMessagesCMD() {
+  const messagesContainer = document.querySelector('#messages');
+  while (messagesContainer.firstChild) {
+    messagesContainer.removeChild(messagesContainer.firstChild);
+  }
+
+  // Clear the messages from the store for the current room
+  const topic = currentTopic();
+  messagesStore[topic] = [];
+}
+
 function clearMessages() {
   const messagesContainer = document.querySelector('#messages');
   while (messagesContainer.firstChild) {
     messagesContainer.removeChild(messagesContainer.firstChild);
   }
+
+  // Clear the messages from the store for the current room
+  // const topic = currentTopic();
+  // messagesStore[topic] = [];
 }
 
 function toggleSetupView() {
@@ -643,7 +869,7 @@ function renderMessagesForRoom(topic) {
   // Fetch and render messages for the selected room
   const messages = getMessagesForRoom(topic);
   messages.forEach(message => {
-    onMessageAdded(message.from, message.message, message.avatar, topic);
+    onMessageAdded(message.from, message.message, message.avatar, topic, message.timestamp);
   });
 }
 
@@ -655,7 +881,40 @@ function addMessageToStore(topic, messageObj) {
   if (!messagesStore[topic]) {
     messagesStore[topic] = [];
   }
+  
+  // Check for duplicates using a combination of message content and timestamp
+  const isDuplicate = messagesStore[topic].some(msg => 
+    msg.from === messageObj.from &&
+    msg.message === messageObj.message &&
+    msg.timestamp === messageObj.timestamp
+  );
+
+  if (!isDuplicate) {
     messagesStore[topic].push(messageObj);
+  } else {
+    console.log('Duplicate message detected:', messageObj); // Debugging log
+  }
+}
+
+function loadConfigFromFile() {
+  config = JSON.parse(fs.readFileSync("./config.json", 'utf8'));
+  console.log("Read config from file:", config);
+  // Update port in URLs
+  config.userAvatar = updatePortInUrl(config.userAvatar);
+  config.rooms.forEach(room => {
+    room.alias = room.alias || truncateHash(room.topic);
+  });
+  for (let user in config.registeredUsers) {
+    config.registeredUsers[user] = updatePortInUrl(config.registeredUsers[user]);
+  }
+}
+
+async function connectToAllRooms() {
+  // Connect to all rooms on startup
+  for (const room of config.rooms) {
+    const topicBuffer = b4a.from(room.topic, 'hex');
+    await joinSwarm(topicBuffer);
+  }
 }
 
 // Call this function when loading the rooms initially

chatBot/bot.js

@@ -64,7 +64,6 @@ loadCommands().then(commands => {
   });
 
   bot.joinChatRoom(process.env.LINKUP_ROOM_ID);
-  bot.joinChatRoom(process.env.LINKUP_ROOM_ID2);
 }).catch(error => {
   console.error('Error loading commands:', error);
 });

chatBot/includes/Client.js

@@ -48,6 +48,10 @@ class Client extends EventEmitter {
   }
 
   joinChatRoom(chatRoomID) {
+    if (!chatRoomID || typeof chatRoomID !== 'string') {
+      return console.error("Invalid chat room ID!");
+    }
+
     this.joinedRooms.add(chatRoomID); // Add the room to the list of joined rooms
     this.currentTopic = chatRoomID; // Store the current topic
     this.discovery = this.swarm.join(Buffer.from(chatRoomID, 'hex'), { client: true, server: true });

chatBot/includes/FileMessage.js

@@ -1,5 +1,5 @@
 class FileMessage {
-    public FileMessage(peerName, fileName, fileUrl, fileType, peerAvatar, topic, timestamp) {
+    constructor(peerName, fileName, fileUrl, fileType, peerAvatar, topic, timestamp) {
         this.peerName = peerName;
         this.fileName = fileName;
         this.fileUrl = fileUrl;
@@ -9,7 +9,7 @@ class FileMessage {
         this.timestamp = timestamp;
     }
 
-    public toJsonString() {
+    toJsonString() {
         return JSON.stringify({
             type: 'file',
             name: this.peerName,

chatBot/includes/TextMessage.js

@@ -1,5 +1,5 @@
 class TextMessage {
-    public TextMessage(peerName, peerAvatar, topic, message, timestamp) {
+    constructor(peerName, peerAvatar, topic, message, timestamp) {
         this.peerName = peerName;
         this.peerAvatar = peerAvatar;
         this.topic = topic;
@@ -7,7 +7,7 @@ class TextMessage {
         this.timestamp = timestamp;
     }
 
-    public toJsonString() {
+    toJsonString() {
         return JSON.stringify({
             type: 'message',
             name: this.peerName,
@@ -18,7 +18,7 @@ class TextMessage {
         });
     }
 
-    public static new(bot, message) {
+    static new(bot, message) {
         return new TextMessage(bot.botName, "", bot.currentTopic, message, Date.now());
     }
 }

commands.js

@@ -0,0 +1,56 @@
+// commands.js
+import b4a from 'b4a';
+import fs from 'fs';
+
+const agentAvatarPath = './assets/agent.png';
+let agentAvatar = '';
+
+// Load the agent avatar once when the module is imported
+if (fs.existsSync(agentAvatarPath)) {
+  const avatarBuffer = fs.readFileSync(agentAvatarPath);
+  agentAvatar = `data:image/png;base64,${b4a.toString(avatarBuffer, 'base64')}`;
+}
+
+export default async function handleCommand(command, context) {
+  const { eventEmitter, currentTopic, clearMessages, addMessage, joinRoom, leaveRoom, createRoom, listFiles } = context;
+  
+  const args = command.trim().split(' ');
+  const cmd = args[0].toLowerCase();
+  const restArgs = args.slice(1).join(' ');
+
+  switch (cmd) {
+    case '~clear':
+      clearMessages();
+      break;
+    case '~ping':
+      addMessage('LinkUp', 'pong', agentAvatar, currentTopic());
+      break;
+    case '~help':
+      addMessage('LinkUp', 'Available commands:\n- ~clear\n- ~ping\n- ~help\n- ~join [topic]\n- ~leave\n- ~create [alias]\n- ~list-files', agentAvatar, currentTopic());
+      break;
+    case '~join':
+      if (restArgs) {
+        await joinRoom(restArgs);
+      } else {
+        addMessage('LinkUp', 'Usage: ~join [topic]', agentAvatar, currentTopic());
+      }
+      break;
+    case '~leave':
+      leaveRoom(currentTopic());
+      break;
+    case '~create':
+      if (restArgs) {
+        await createRoom(restArgs);
+      } else {
+        addMessage('LinkUp', 'Usage: ~create [alias]', agentAvatar, currentTopic());
+      }
+      break;
+    case '~list-files':
+      const files = await listFiles();
+      const fileList = files.length > 0 ? files.map(file => `- ${file}`).join('\n') : 'No files available';
+      addMessage('LinkUp', `Available files:\n${fileList}`, agentAvatar, currentTopic());
+      break;
+    default:
+      console.log('Unknown command:', command);
+  }
+}

index.html

@@ -62,6 +62,7 @@
           <textarea id="message" rows="4"></textarea>
           <input type="file" id="file-input" style="display:none;">
           <button type="button" id="attach-file">Attach File</button>
+          <button type="button" id="talk-btn">Talk</button> <!-- New Talk button -->
           <input type="submit" value="Send" />
         </form>
         <button id="remove-room-btn">Leave Room</button>
@@ -90,7 +91,7 @@
           if (chatRoomTopic) {
             const topic = chatRoomTopic.innerText;
             navigator.clipboard.writeText(topic).then(() => {
-              alert('Topic copied to clipboard!');
+              console.log('Topic copied to clipboard:', topic);
             }).catch(err => {
               console.error('Failed to copy topic:', err);
             });

style.css

@@ -17,23 +17,28 @@ body {
     padding: 3px 7px;
     font-size: 14px;
     font-weight: bold;
-    color: #fff;
+    color: #ffffff;
-    background-color: #7289da;
+    background-color: #464343;
     border: none;
     border-radius: 3px;
     text-decoration: none;
     cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 .mini-button:hover {
-    background-color: #0056b3;
+    background-color: #181717;
+    transform: scale(1.05);
 }
 
 .bold {
     font-weight: bold;
 }
 
-pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; }
+pear-ctrl[data-platform="darwin"] { 
+    float: right; 
+    margin-top: 4px; 
+}
 
 pear-ctrl {
     margin-top: 9px;
@@ -50,7 +55,7 @@ pear-ctrl:after {
     left: 0;
     top: 0;
     width: 100%;
-    background-color: #B0D94413;
+    background-color: #1f1f1f;
     filter: drop-shadow(2px 10px 6px #888);
 }
 
@@ -58,7 +63,6 @@ main {
     display: flex;
     flex: 1;
     overflow: hidden;
-    /* Ensure no overflow in main */
 }
 
 #sidebar {
@@ -107,27 +111,21 @@ main {
 #messages-container {
     flex: 1;
     overflow-y: auto;
-    /* Allow vertical scrolling */
     overflow-x: hidden;
-    /* Hide horizontal scrolling */
     width: 100%;
 }
 
 #messages-container::-webkit-scrollbar {
     width: 8px;
-    /* Set the width of the scrollbar */
 }
 
 #messages-container::-webkit-scrollbar-thumb {
-    background-color: #b0d944;
+    background-color: #464343;
-    /* Set the color of the scrollbar thumb */
     border-radius: 10px;
-    /* Round the corners of the scrollbar thumb */
 }
 
 #messages-container::-webkit-scrollbar-track {
     background: #2e2e2e;
-    /* Set the color of the scrollbar track */
 }
 
 #message-form {
@@ -142,19 +140,15 @@ main {
     margin-right: 0.5rem;
     padding-right: 0.5rem;
     height: 1.5rem;
-    /* Initial single line height */
     overflow-y: hidden;
-    /* Hide scrollbar */
 }
 
 #message:focus {
     height: auto;
-    /* Allow the textarea to grow dynamically when focused */
 }
 
 #message:empty {
     height: 1.5rem;
-    /* Ensure single line height when empty */
 }
 
 #sidebar button {
@@ -162,15 +156,17 @@ main {
     padding: 10px;
     margin-bottom: 10px;
     cursor: pointer;
-    background-color: #7289da;
+    background-color: #3e3c3c;
     border: none;
     color: white;
     font-size: 14px;
     border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 #sidebar button:hover {
-    background-color: #5b6eae;
+    background-color: #191919;
+    transform: scale(1.05);
 }
 
 #remove-room-btn {
@@ -181,10 +177,12 @@ main {
     color: white;
     cursor: pointer;
     border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 #remove-room-btn:hover {
     background-color: #c03535;
+    transform: scale(1.05);
 }
 
 .hidden {
@@ -221,53 +219,69 @@ header {
     padding: 0.5rem;
     border-radius: 4px;
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 .window-controls button:hover {
     background-color: #3e3e3e;
+    transform: scale(1.05);
 }
 
 /* Button and input styles */
 button,
 input,
 textarea {
-    border: 1px solid #b0d944;
+    border: 1px solid #464343;
     background-color: #333;
-    color: #b0d944;
+    color: #e0e0e0;
     padding: 0.5rem;
-    /* Reduced padding */
     font-family: 'Roboto Mono', monospace;
     font-size: 1rem;
     line-height: 1.25rem;
-    /* Adjusted line height */
     border-radius: 4px;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
     resize: none;
-    /* Prevent resizing */
     overflow-y: hidden;
-    /* Hide scrollbar */
+}
+
+button:hover,
+input[type="submit"]:hover {
+    background-color: #191919;
+    transform: scale(1.05);
 }
 
 textarea {
     height: auto;
-    /* Allow the textarea to grow dynamically */
 }
 
 textarea:focus {
     outline: none;
-    /* Remove focus outline */
 }
 
 textarea::placeholder {
     color: #a0a0a0;
 }
 
-#attach-file, #message-form input[type="submit"] {
+#attach-file, 
-    padding: 0.5rem 1rem; /* Add padding to buttons */
+#message-form input[type="submit"] {
-    margin-left: 0.5rem; /* Add margin between buttons */
+    padding: 0.5rem 1rem;
+    margin-left: 0.5rem;
 }
 
+#talk-btn {
+    padding: 0.5rem 1rem;
+    margin-left: 0.5rem;
+    font-size: 14px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#talk-btn:active {
+    color: #fff;
+    background-color: #f04747;
+}
+
+
 /* Main container styles */
 main {
     display: flex;
@@ -297,7 +311,7 @@ main {
 
 #or {
     margin: 1.5rem 0;
-    color: #b0d944;
+    color: #e0e0e0;
 }
 
 #loading {
@@ -341,6 +355,12 @@ main {
 
 #join-chat-room-container button {
     margin-left: 0.5rem;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#join-chat-room-container button:hover {
+    background-color: #191919;
+    transform: scale(1.05);
 }
 
 #details {
@@ -352,17 +372,21 @@ main {
     border-radius: 4px;
     width: 100%;
     box-sizing: border-box;
-    /* Added to ensure box model includes padding */
 }
 
 #details>div {
     display: flex;
     flex-direction: column;
-    /* Allow peers count to stack */
 }
 
 #submit-button {
     margin-left: 1rem;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#submit-button:hover {
+    background-color: #191919;
+    transform: scale(1.05);
 }
 
 #messages {
@@ -370,7 +394,6 @@ main {
     min-height: 200px;
     overflow-y: auto;
     padding: 0.5rem;
-    /* Reduced padding */
     background-color: #262626;
     border-radius: 4px;
     display: flex;
@@ -413,7 +436,6 @@ main {
     display: flex;
     align-items: flex-start;
     margin-bottom: 0.5rem;
-    /* Reduced margin */
 }
 
 .message img.avatar {
@@ -421,24 +443,21 @@ main {
     height: 32px;
     border-radius: 50%;
     margin-right: 0.5rem;
-    border: 2px solid #b0d944;
+    border: 2px solid #464343;
 }
 
 .message-content {
     max-width: 70%;
     background-color: #2e2e2e;
     padding: 0.5rem;
-    /* Reduced padding */
     border-radius: 8px;
-    /* Reduced border radius */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .message-header {
     font-weight: bold;
-    color: #b0d944;
+    color: #e0e0e0;
     font-size: 0.9rem;
-    /* Reduced font size */
 }
 
 .message-text {
@@ -450,6 +469,82 @@ main {
     height: auto;
     margin-top: 0.5rem;
     border-radius: 4px;
-    /* Removed circular border */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+/* Updated Room List Styles */
+#room-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#room-list li {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #3a3f44;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s ease;
+}
+
+#room-list li:hover {
+    background-color: #4a5258;
+}
+
+#room-list li span {
+    flex: 1;
+}
+
+#room-list li .edit-icon,
+#room-list li .delete-icon {
+    margin-left: 10px;
+    color: #e0e0e0;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+#room-list li .edit-icon:hover,
+#room-list li .delete-icon:hover {
+    color: #a0a0a0;
+}
+
+/* Style for Edit Mode Input Box */
+#room-list li input[type="text"] {
+    background-color: #2e2e2e;
+    border: 1px solid #464343;
+    border-radius: 5px;
+    color: #e0e0e0;
+    padding: 5px;
+    width: calc(100% - 40px);
+    margin-right: 10px;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+#room-list li input[type="text"]:focus {
+    outline: none;
+    background-color: #3a3a3a;
+}
+
+/* Link styles */
+a {
+    color: #e0e0e0; /* Base color for links matching the text color */
+    text-decoration: none; /* Remove underline */
+    transition: color 0.3s ease, text-decoration 0.3s ease;
+}
+
+a:hover {
+    color: #b0b0b0; /* Lighter color on hover */
+    text-decoration: underline; /* Underline on hover */
+}
+
+a:active {
+    color: #a0a0a0; /* Slightly darker color on active */
+}
+
+a:visited {
+    color: #b0b0b0; /* Different color for visited links */
+}