Only auto play on peers

revert test

README.md

@@ -10,3 +10,125 @@ To launch the App in Dev Mode:
 
 Lastly - run the app: 
 `pear dev -s /tmp/tmp_pear`
+
+--------
+
+# LinkUp Documentation
+
+## Overview
+LinkUp is a peer-to-peer chat application that allows users to create and join chat rooms, share files, and communicate with each other in real-time. The application uses the Hyperswarm, Hyperdrive, and Corestore libraries for decentralized networking and storage. This documentation provides a comprehensive guide to understanding, setting up, and using LinkUp.
+
+![Screenshot](images/screenshot.png)
+
+## Table of Contents
+- [Installation](#installation)
+- [Configuration](#configuration)
+- [Usage](#usage)
+  - [Registering a User](#registering-a-user)
+  - [Creating a Chat Room](#creating-a-chat-room)
+  - [Joining a Chat Room](#joining-a-chat-room)
+  - [Sending Messages](#sending-messages)
+  - [Attaching Files](#attaching-files)
+  - [Recording and Sending Audio Messages](#recording-and-sending-audio-messages)
+- [Commands](#commands)
+- [Development](#development)
+  - [Project Structure](#project-structure)
+  - [Event Handling](#event-handling)
+- [FAQs](#faqs)
+
+## Configuration
+LinkUp uses a configuration file (`config.json`) to store user information, chat room details, and registered users. This file is automatically created and managed by the application.
+
+### Configuration File Structure
+```json
+{
+  "userName": "",
+  "userAvatar": "",
+  "rooms": [],
+  "registeredUsers": {}
+}
+```
+
+- `userName`: The username of the registered user.
+- `userAvatar`: The URL of the user's avatar image.
+- `rooms`: An array of chat rooms the user has joined or created.
+- `registeredUsers`: An object containing registered usernames and their avatar URLs.
+
+## Usage
+
+### Registering a User
+1. Launch the application.
+2. If the configuration file does not exist, you will be prompted to register.
+3. Enter a username and optionally select an avatar image.
+4. Submit the registration form to complete the process.
+
+### Creating a Chat Room
+1. Click on the "Create/Join Room" button in the sidebar.
+2. Click on "Create Room".
+3. A new room will be created with a random topic.
+
+### Joining a Chat Room
+1. Click on the "Create/Join Room" button in the sidebar.
+2. Enter the topic of the room you wish to join in the "Topic" field.
+3. Click on "Join Room".
+
+### Sending Messages
+1. Select a chat room from the sidebar.
+2. Enter your message in the message input box at the bottom of the chat window.
+3. Press `Enter` or click on the "Send" button to send the message.
+
+### Attaching Files
+1. Click on the "Attach File" button in the message form.
+2. Select a file from your device.
+3. The file will be uploaded and a download link will be shared in the chat.
+
+### Recording and Sending Audio Messages
+1. Click and hold the "Talk" button to start recording an audio message.
+2. Release the button to stop recording and send the audio message.
+
+## Commands
+LinkUp supports several commands that can be entered in the chat input box:
+
+- `~clear`: Clears the chat messages.
+- `~ping`: Responds with "pong".
+- `~help`: Lists available commands.
+- `~join [topic]`: Joins a chat room with the specified topic.
+- `~leave`: Leaves the current chat room.
+- `~create [alias]`: Creates a new chat room with the specified alias.
+- `~list-files`: Lists all files available in the current chat room.
+
+## Development
+
+### Project Structure
+- `app.js`: Main application logic.
+- `commands.js`: Command handling logic.
+- `index.html`: HTML structure of the application.
+- `style.css`: CSS for styling the application.
+- `config.json`: Configuration file for storing user and room data.
+
+### Event Handling
+LinkUp uses an `EventEmitter` to handle various events such as receiving messages, joining rooms, and updating the peer count. Event listeners are set up during the initialization process.
+
+### Key Functions
+- `initialize()`: Initializes the application, sets up event listeners, and loads configuration.
+- `registerUser()`: Handles user registration.
+- `createChatRoom()`: Creates a new chat room.
+- `joinChatRoom()`: Joins an existing chat room.
+- `sendMessage()`: Sends a text message.
+- `handleFileInput()`: Handles file attachments.
+- `setupEventListeners()`: Sets up event listeners for UI interactions.
+
+## FAQs
+
+**Q: How do I change my username or avatar?**
+A: Currently, changing username or avatar after registration is not supported. You would need to delete the `config.json` file and restart the application to re-register.
+
+**Q: How can I see the list of files shared in a room?**
+A: Use the `~list-files` command to see all files shared in the current chat room.
+
+**Q: How do I leave a chat room?**
+A: Click on the "Leave Room" button in the chat window.
+
+For more information, please refer to the [Pears Documentation](https://docs.pears.com/).
+
+Feel free to contribute to this project by submitting issues or pull requests on [Git](https://git.ssh.surf/snxraven/LinkUp-P2P-Chat).

chatBot/commands/ping.js

@@ -1,7 +1,7 @@
 export default {
   handler: function(bot, args, message) {
     // Specify the path to the file you want to send
-    const filePath = '/to/file/path.js'; // Replace with the actual file path
+    const filePath = '/Users/raven/chat/chatBot/bot.js'; // Replace with the actual file path
     const fileType = 'text/html'; // Specify the correct file type
 
     // Send the file message using the bot instance

chatBot/commands/test-audio.js

@@ -1,10 +1,10 @@
 export default {
-    handler: function(bot, args, message) {
-      // Specify the path to the audio file you want to send
-      const audioFilePath = '/to/file/path.mp3'; // Replace with the actual audio file path
-      const audioType = 'audio';
+  handler: function(bot, args, message) {
+    // Specify the path to the audio file you want to send
+    const audioFilePath = '/to/file/path.mp3'; // Replace with the actual audio file path
+    const audioType = 'audio';
 
-      // Send the audio message using the bot instance
-      bot.sendAudioMessage(audioFilePath, audioType);
-    }
-  };
+    // Send the audio message using the bot instance
+    bot.sendAudioMessage(audioFilePath, audioType);
+  }
+};

commands.js

@@ -1,4 +1,3 @@
-// commands.js
 import b4a from 'b4a';
 import fs from 'fs';
 
@@ -12,45 +11,94 @@ if (fs.existsSync(agentAvatarPath)) {
 }
 
 export default async function handleCommand(command, context) {
-  const { eventEmitter, currentTopic, clearMessages, addMessage, joinRoom, leaveRoom, createRoom, listFiles } = context;
-  
+  const { eventEmitter, currentTopic, clearMessages, addMessage, joinRoom, leaveRoom, createRoom, listFiles, deleteFile, servePort } = context;
+
+  console.log("Context received in handleCommand:", context); // Add logging
+
   const args = command.trim().split(' ');
   const cmd = args[0].toLowerCase();
   const restArgs = args.slice(1).join(' ');
 
+  console.log("Command received:", cmd); // Add logging
+  console.log("Current topic:", currentTopic); // Add logging to check the current topic
+
   switch (cmd) {
-    case '~clear':
-      clearMessages();
+    case '>clear':
+      clearMessages(currentTopic);
       break;
-    case '~ping':
-      addMessage('LinkUp', 'pong', agentAvatar, currentTopic());
+    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());
+    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':
+    case '>join':
       if (restArgs) {
-        await joinRoom(restArgs);
+        await joinRoom(currentTopic, restArgs);
       } else {
-        addMessage('LinkUp', 'Usage: ~join [topic]', agentAvatar, currentTopic());
+        addMessage('LinkUp', 'Usage: >join [topic]', agentAvatar, currentTopic);
       }
       break;
-    case '~leave':
-      leaveRoom(currentTopic());
+    case '>leave':
+      leaveRoom(currentTopic);
       break;
-    case '~create':
+    case '>create':
       if (restArgs) {
-        await createRoom(restArgs);
+        await createRoom(currentTopic, restArgs);
       } else {
-        addMessage('LinkUp', 'Usage: ~create [alias]', agentAvatar, currentTopic());
+        addMessage('LinkUp', 'Usage: >create [alias]', agentAvatar, currentTopic);
       }
       break;
-    case '~list-files':
+    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());
+      addMessage('LinkUp', `Available files:\n${fileList}`, agentAvatar, currentTopic);
+
+      // Render the file list with delete buttons
+      renderFileList(files, deleteFile, servePort);
       break;
     default:
+      addMessage('LinkUp', `Unknown command: ${cmd}`, agentAvatar, currentTopic);
       console.log('Unknown command:', command);
   }
 }
+
+function renderFileList(files, deleteFile, servePort) {
+  const container = document.querySelector('#messages');
+  if (!container) {
+    console.error('Element #messages not found');
+    return;
+  }
+
+  const fileList = document.createElement('ul');
+
+  files.forEach(file => {
+    const listItem = document.createElement('li');
+    const fileButton = document.createElement('button');
+    fileButton.textContent = file.trim();
+    fileButton.onclick = () => downloadFile(file.trim(), servePort);
+
+    const deleteButton = document.createElement('button');
+    deleteButton.textContent = 'Delete';
+    deleteButton.onclick = async () => {
+      await deleteFile(file);
+      listItem.remove();
+    };
+
+    listItem.appendChild(fileButton);
+    listItem.appendChild(deleteButton);
+    fileList.appendChild(listItem);
+  });
+
+  container.appendChild(fileList);
+}
+
+function downloadFile(filename, servePort) {
+  const url = `http://localhost:${servePort}/files/${filename}`;
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

index.html

@@ -17,10 +17,10 @@
   </header>
   <main>
     <div id="sidebar">
-      <ul id="room-list">
-        <!-- Room list will be populated dynamically -->
+      <ul id="guild-list" class="list-group">
+        <!-- Guild list will be populated dynamically -->
       </ul>
-      <button id="toggle-setup-btn">Create/Join Room</button>
+      <button id="toggle-setup-btn">Create/Join Guild</button>
     </div>
     <div id="content">
       <div id="register" class="hidden">
@@ -35,12 +35,12 @@
         <div id="user-info">
           <!-- User info will be populated dynamically -->
         </div>
-        <button id="create-chat-room">Create Room</button>
+        <button id="create-guild-btn">Create Guild</button>
         <div id="or">- or -</div>
-        <div id="join-chat-room-container">
-          <label for="connection-topic">Topic:</label>
-          <input type="text" id="join-chat-room-topic" placeholder="connection topic">
-          <button id="join-chat-room">Join Room</button>
+        <div id="join-guild-container">
+          <label for="join-guild-topic">Guild Topic:</label>
+          <input type="text" id="join-guild-topic" placeholder="guild topic">
+          <button id="join-guild">Join Guild</button>
         </div>
       </div>
       <div id="chat" class="hidden">
@@ -49,11 +49,10 @@
             <div style="display: inline;">
               <strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a>
               <span id="chat-room-topic" style="display: none;"></span>
+              <span id="chat-guild-topic" style="display: none;"></span>
+              <span id="chat-guild-name" style="display: none;"></span>
             </div>
           </div>
-          <div id="user-list">
-            <!-- User list will be populated here -->
-          </div>
         </div>
         <div id="messages-container">
           <div id="messages"></div>
@@ -62,7 +61,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 -->
+          <button type="button" id="talk-btn">Talk</button>
           <input type="submit" value="Send" />
         </form>
         <button id="remove-room-btn">Leave Room</button>
@@ -70,11 +69,46 @@
       <div id="loading" class="hidden">Loading ...</div>
     </div>
   </main>
+
+  <!-- Create Guild Modal -->
+  <div id="create-guild-modal" class="modal hidden">
+    <div class="modal-content">
+      <span class="close-btn" id="close-create-guild-modal">&times;</span>
+      <h2>Create Guild</h2>
+      <form id="create-guild-form">
+        <label for="guild-name">Guild Name:</label>
+        <input type="text" id="guild-name" required>
+        <button type="submit">Create</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- Manage Guild Modal -->
+  <div id="manage-guild-modal" class="modal hidden">
+    <div class="modal-content">
+      <span class="close-btn" id="close-manage-guild-modal">&times;</span>
+      <h2>Manage Guild</h2>
+      <div id="guild-info">
+        <!-- Guild info will be populated dynamically -->
+      </div>
+      <button id="copy-guild-id" class="mini-button">Copy Guild ID</button>
+      <form id="add-room-form">
+        <label for="room-name">Room Name:</label>
+        <input type="text" id="room-name" required>
+        <button type="submit">Add Room</button>
+      </form>
+      <ul id="room-list">
+        <!-- Room list will be populated dynamically -->
+      </ul>
+    </div>
+  </div>
+
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       const messageInput = document.getElementById('message');
       const copyTopicLink = document.getElementById('copy-topic-link');
       const chatRoomTopic = document.getElementById('chat-room-topic');
+      const copyGuildIdButton = document.getElementById('copy-guild-id');
 
       if (messageInput) {
         messageInput.addEventListener('keydown', function(event) {
@@ -101,32 +135,123 @@
         });
       }
 
-      const switchRoom = (topic) => {
-        console.log('Switching to room:', topic); // Debugging log
-        const chatRoomTopic = document.querySelector('#chat-room-topic');
-        const chatRoomName = document.querySelector('#chat-room-name');
+      if (copyGuildIdButton) {
+        copyGuildIdButton.addEventListener('click', function(event) {
+          event.preventDefault();
+          const guildTopic = document.getElementById('manage-guild-modal').dataset.guildTopic;
+          navigator.clipboard.writeText(guildTopic).then(() => {
+            console.log('Guild ID copied to clipboard:', guildTopic);
+          }).catch(err => {
+            console.error('Failed to copy guild ID:', err);
+          });
+        });
+      }
 
-        if (chatRoomTopic) {
-          chatRoomTopic.innerText = topic; // Set full topic here
-        } else {
-          console.error('Element #chat-room-topic not found');
-        }
-
-        // Show chat UI elements
-        document.querySelector('#chat').classList.remove('hidden');
-        document.querySelector('#setup').classList.add('hidden');
-      };
-
-      const roomList = document.querySelector('#room-list');
-      if (roomList) {
-        roomList.addEventListener('click', function(event) {
-          const roomItem = event.target.closest('li');
+      const guildList = document.querySelector('#guild-list');
+      if (guildList) {
+        guildList.addEventListener('click', function(event) {
+          const roomItem = event.target.closest('.room-item');
           if (roomItem) {
-            switchRoom(roomItem.dataset.topic);
+            const guildTopic = roomItem.dataset.guildTopic;
+            const roomTopic = roomItem.dataset.topic;
+            switchRoom(guildTopic, roomTopic);
           }
         });
       }
+
+      const createGuildBtn = document.getElementById('create-guild-btn');
+      const createGuildModal = document.getElementById('create-guild-modal');
+      const closeCreateGuildModal = document.getElementById('close-create-guild-modal');
+      const createGuildForm = document.getElementById('create-guild-form');
+
+      createGuildBtn.addEventListener('click', () => {
+        createGuildModal.classList.remove('hidden');
+      });
+
+      closeCreateGuildModal.addEventListener('click', () => {
+        createGuildModal.classList.add('hidden');
+      });
+
+      createGuildForm.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const guildName = document.getElementById('guild-name').value.trim();
+        if (guildName) {
+          createGuild(guildName);
+          createGuildModal.classList.add('hidden');
+        }
+      });
+
+      const joinGuildBtn = document.getElementById('join-guild');
+      joinGuildBtn.addEventListener('click', async (event) => {
+        const guildTopic = document.getElementById('join-guild-topic').value.trim();
+        if (guildTopic) {
+          await joinGuildRequest(guildTopic);
+        }
+      });
+
+      const manageGuildModal = document.getElementById('manage-guild-modal');
+      const closeManageGuildModal = document.getElementById('close-manage-guild-modal');
+      const addRoomForm = document.getElementById('add-room-form');
+      const roomNameInput = document.getElementById('room-name');
+
+      closeManageGuildModal.addEventListener('click', () => {
+        manageGuildModal.classList.add('hidden');
+      });
+
+      addRoomForm.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const roomName = roomNameInput.value.trim();
+        const guildTopic = manageGuildModal.dataset.guildTopic;
+        if (roomName && guildTopic) {
+          addRoomToGuild(guildTopic, roomName);
+          roomNameInput.value = '';
+        }
+      });
     });
+
+    function createGuild(guildName) {
+      const event = new CustomEvent('createGuild', { detail: { guildName } });
+      document.dispatchEvent(event);
+    }
+
+    function addRoomToGuild(guildTopic, roomName) {
+      const event = new CustomEvent('addRoomToGuild', { detail: { guildTopic, roomName } });
+      document.dispatchEvent(event);
+    }
+
+    function manageGuild(guildTopic) {
+      const event = new CustomEvent('manageGuild', { detail: { guildTopic } });
+      document.dispatchEvent(event);
+    }
+
+    function switchRoom(guildTopic, roomTopic) {
+      const event = new CustomEvent('switchRoom', { detail: { guildTopic, roomTopic } });
+      document.dispatchEvent(event);
+    }
+
+    function openManageGuildModal(guildTopic) {
+      const manageGuildModal = document.getElementById('manage-guild-modal');
+      const guildInfo = document.getElementById('guild-info');
+      const roomList = document.getElementById('room-list');
+
+      manageGuildModal.dataset.guildTopic = guildTopic;
+      guildInfo.innerHTML = `<h3>${config.guilds[guildTopic].alias}</h3>`;
+      roomList.innerHTML = '';
+
+      config.guilds[guildTopic].rooms.forEach(room => {
+        const roomItem = document.createElement('li');
+        roomItem.textContent = room.alias;
+        roomItem.dataset.guildTopic = guildTopic;
+        roomItem.dataset.topic = room.topic;
+
+        roomItem.addEventListener('dblclick', () => enterEditMode(roomItem, guildTopic));
+        roomItem.addEventListener('click', () => switchRoom(guildTopic, room.topic));
+
+        roomList.appendChild(roomItem);
+      });
+
+      manageGuildModal.classList.remove('hidden');
+    }
   </script>
 </body>
 </html>

style.css

@@ -281,7 +281,6 @@ textarea::placeholder {
     background-color: #f04747;
 }
 
-
 /* Main container styles */
 main {
     display: flex;
@@ -444,6 +443,7 @@ main {
     border-radius: 50%;
     margin-right: 0.5rem;
     border: 2px solid #464343;
+    user-select: none;
 }
 
 .message-content {
@@ -473,78 +473,146 @@ main {
 }
 
 /* Updated Room List Styles */
-#room-list {
+#guild-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
-#room-list li {
+.guild-item {
     padding: 10px;
     margin-bottom: 10px;
     background-color: #3a3f44;
     border-radius: 5px;
     cursor: pointer;
     display: flex;
+    flex-direction: column;
+    transition: background-color 0.3s ease;
+}
+
+.guild-item:hover {
+    background-color: #4a5258;
+}
+
+.guild-item h3 {
+    margin: 0;
+    font-size: 16px;
+    color: #ffffff;
+}
+
+.guild-item .manage-guild-btn {
+    align-self: flex-end;
+    margin-top: 10px;
+    font-size: 12px;
+    padding: 5px 10px;
+}
+
+.guild-item .room-list {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.guild-item .room-list li {
+    padding: 5px;
+    margin-bottom: 5px;
+    background-color: #464343;
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background-color 0.3s ease;
 }
 
-#room-list li:hover {
-    background-color: #4a5258;
+.guild-item .room-list li:hover {
+    background-color: #5a5f64;
 }
 
-#room-list li span {
+.guild-item .room-list li span {
     flex: 1;
 }
 
-#room-list li .edit-icon,
-#room-list li .delete-icon {
+.guild-item .room-list li .edit-icon,
+.guild-item .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 {
+.guild-item .room-list li .edit-icon:hover,
+.guild-item .room-list li .delete-icon:hover {
     color: #a0a0a0;
 }
 
-/* Style for Edit Mode Input Box */
-#room-list li input[type="text"] {
+/* Modal styles */
+.modal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+}
+
+.modal-content {
     background-color: #2e2e2e;
-    border: 1px solid #464343;
-    border-radius: 5px;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 100%;
+    text-align: center;
+}
+
+.close-btn {
     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;
+    float: right;
+    font-size: 1.5rem;
+    cursor: pointer;
 }
 
-#room-list li input[type="text"]:focus {
-    outline: none;
-    background-color: #3a3a3a;
+.close-btn:hover {
+    color: #f04747;
 }
 
-/* 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;
+.modal h2 {
+    margin-bottom: 1rem;
+    color: #fff;
 }
 
-a:hover {
-    color: #b0b0b0; /* Lighter color on hover */
-    text-decoration: underline; /* Underline on hover */
+.modal form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-a:active {
-    color: #a0a0a0; /* Slightly darker color on active */
+.modal form input,
+.modal form button {
+    margin-bottom: 1rem;
+    width: 100%;
 }
 
-a:visited {
-    color: #b0b0b0; /* Different color for visited links */
+.modal form button {
+    width: auto;
+    background-color: #3e3e3e;
+    color: #fff;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
+
+.modal form button:hover {
+    background-color: #191919;
+    transform: scale(1.05);
+}
+