Update package.json

Reviewed-on: snxraven/LinkUp-P2P-Chat#12

.gitignore

@@ -1,5 +1,10 @@
 node_modules
 package-lock.json
 shared-storage
+storage_*
 storage
-chatBot/.env
+chatBot/.env
+chatBot/commands/ai.js
+config.json
+.idea
+AIBot

README.md

@@ -0,0 +1,134 @@
+`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`
+
+--------
+
+# 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/README.md

@@ -0,0 +1,220 @@
+# Bot System Documentation
+
+## Overview
+
+This document provides a comprehensive guide to the bot system, detailing its structure, functionalities, and how to set it up. This bot system leverages the Hyperswarm network to enable decentralized communication and supports various types of messages, including text, files, and audio.
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [Getting Started](#getting-started)
+   - [Prerequisites](#prerequisites)
+   - [Installation](#installation)
+   - [Configuration](#configuration)
+3. [Bot Architecture](#bot-architecture)
+   - [Client Class](#client-class)
+   - [Message Classes](#message-classes)
+4. [Command Handling](#command-handling)
+5. [Event Handling](#event-handling)
+6. [Running the Bot](#running-the-bot)
+7. [API Reference](#api-reference)
+
+## Introduction
+
+This bot system is designed for decentralized chat rooms using the Hyperswarm network. It supports multiple message types and dynamic command handling, making it highly customizable and extensible.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (version 14.x or later)
+- npm (version 6.x or later)
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://git.ssh.surf/snxraven/LinkUp-P2P-Chat.git
+   cd LinkUp-P2P-Chat
+   ```
+
+2. Install the dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Change to bot directory
+   ```bash
+   cd chatBot
+   ```
+
+4. Run the bot:
+   ```
+   node bot.js
+   ```
+
+
+### Configuration
+
+Create a `.env` file in the root directory and add the following environment variables:
+
+```
+BOT_NAME=MyBot
+ON_READY_MESSAGE=Bot is ready and operational!
+LINKUP_ROOM_ID=<room_id>
+```
+
+## Bot Architecture
+
+### Client Class
+
+The `Client` class is the core component of the bot system. It handles connections to the Hyperswarm network, manages message sending and receiving, and emits events for various actions.
+
+#### Constructor
+
+```javascript
+constructor(botName)
+```
+
+- `botName`: The name of the bot.
+
+#### Methods
+
+- `initializeServeDrive()`: Initializes the ServeDrive for serving files and audio.
+- `getRandomPort()`: Returns a random port number.
+- `fetchAvatar(filePath)`: Fetches and sets the bot's avatar from a local file.
+- `setupSwarm()`: Sets up the Hyperswarm network and connection handlers.
+- `joinChatRoom(chatRoomID)`: Joins a specified chat room.
+- `sendTextMessage(message)`: Sends a text message.
+- `sendFileMessage(filePath, fileType)`: Sends a file message.
+- `sendAudioMessage(filePath, audioType)`: Sends an audio message.
+- `sendMessage(message)`: Sends a generic message.
+- `destroy()`: Disconnects the bot and shuts down the Hyperswarm network.
+
+### Message Classes
+
+The bot system supports various message types through dedicated classes, all extending the base `Message` class.
+
+#### Message Class
+
+```javascript
+class Message {
+    constructor(messageType, peerName, peerAvatar, topic, timestamp)
+}
+```
+
+#### TextMessage Class
+
+```javascript
+class TextMessage extends Message {
+    constructor(peerName, peerAvatar, topic, timestamp, message)
+    static new(bot, message)
+}
+```
+
+#### FileMessage Class
+
+```javascript
+class FileMessage extends Message {
+    constructor(peerName, peerAvatar, topic, timestamp, fileName, fileUrl, fileType, fileData)
+    static new(bot, fileName, fileUrl, fileType, fileBuffer)
+}
+```
+
+#### AudioMessage Class
+
+```javascript
+class AudioMessage extends Message {
+    constructor(peerName, peerAvatar, topic, timestamp, audioUrl, audioType, audioData)
+    static new(bot, audioUrl, audioType, audioBuffer)
+}
+```
+
+#### IconMessage Class
+
+```javascript
+class IconMessage extends Message {
+    constructor(peerName, peerAvatar, timestamp)
+    static new(bot, avatarBuffer)
+}
+```
+
+## Command Handling
+
+Commands are dynamically loaded from the `commands` directory. Each command is a JavaScript module with a default export containing a `handler` function.
+
+### Example Command Module
+
+```javascript
+// commands/example.js
+export default {
+  handler: (bot, args, message) => {
+    bot.sendTextMessage(`Example command executed with args: ${args.join(' ')}`);
+  }
+};
+```
+
+## Event Handling
+
+The bot uses Node.js `EventEmitter` to handle events. Key events include:
+
+- `onMessage`: Triggered when a new message is received.
+- `onFile`: Triggered when a file message is received.
+- `onAudio`: Triggered when an audio message is received.
+- `onIcon`: Triggered when an icon message is received.
+- `onError`: Triggered when there is a connection error.
+- `onBotJoinRoom`: Triggered when the bot joins a room.
+
+### Example Event Listener
+
+```javascript
+bot.on('onMessage', (peer, message) => {
+  console.log(`Message from ${message.peerName}: ${message.message}`);
+});
+```
+
+## Running the Bot
+
+To start the bot, run the following command:
+
+```bash
+node bot.js
+```
+
+Ensure that the `.env` file is correctly configured and that all necessary dependencies are installed.
+
+## API Reference
+
+### Client
+
+- `constructor(botName)`: Creates a new instance of the Client.
+- `initializeServeDrive()`: Initializes ServeDrive.
+- `getRandomPort()`: Generates a random port number.
+- `fetchAvatar(filePath)`: Fetches the bot's avatar.
+- `setupSwarm()`: Sets up the Hyperswarm network.
+- `joinChatRoom(chatRoomID)`: Joins a specified chat room.
+- `sendTextMessage(message)`: Sends a text message.
+- `sendFileMessage(filePath, fileType)`: Sends a file message.
+- `sendAudioMessage(filePath, audioType)`: Sends an audio message.
+- `sendMessage(message)`: Sends a generic message.
+- `destroy()`: Disconnects the bot.
+
+### TextMessage
+
+- `constructor(peerName, peerAvatar, topic, timestamp, message)`: Creates a new text message.
+- `static new(bot, message)`: Creates a new text message instance.
+
+### FileMessage
+
+- `constructor(peerName, peerAvatar, topic, timestamp, fileName, fileUrl, fileType, fileData)`: Creates a new file message.
+- `static new(bot, fileName, fileUrl, fileType, fileBuffer)`: Creates a new file message instance.
+
+### AudioMessage
+
+- `constructor(peerName, peerAvatar, topic, timestamp, audioUrl, audioType, audioData)`: Creates a new audio message.
+- `static new(bot, audioUrl, audioType, audioBuffer)`: Creates a new audio message instance.
+
+### IconMessage
+
+- `constructor(peerName, peerAvatar, timestamp)`: Creates a new icon message.
+- `static new(bot, avatarBuffer)`: Creates a new icon message instance.

chatBot/bot.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import Client from './includes/client.js'; // Adjust the import path as necessary
+import Client from './includes/Client.js'; // Adjust the import path as necessary
 import 'dotenv/config';
 
 // Create a new instance of the chatBot class with a valid botName
@@ -35,15 +35,13 @@ async function loadCommands() {
 
 loadCommands().then(commands => {
   // Create the chatBot instance with the defined onMessageReceived function
-  const bot = new Client(process.env.LINKUP_ROOM_ID, botName);
+  const bot = new Client(botName);
 
   // We use Event Emitter here to handle new messages
   bot.on('onMessage', (peer, message) => {
-    if (message.type == "icon") return;
+    console.log(`Message received from ${message.peerName} at ${new Date(message.timestamp).toLocaleTimeString()}: ${message.message}`);
     console.log(message);
 
-    console.log(`Message received from ${message.name} at ${new Date(message.timestamp).toLocaleTimeString()}: ${message.message}`);
-
     // Check if the message starts with a command prefix
     if (message.message.startsWith('!')) {
       // Extract the command and arguments
@@ -54,17 +52,24 @@ loadCommands().then(commands => {
 
       // If the command exists, execute its handler
       if (commandHandler && typeof commandHandler.handler === 'function') {
+        console.log(`Executing command: ${command} with arguments: ${args}`);
         commandHandler.handler(bot, args, message);
+      } else {
+        console.warn(`Command not found: ${command}`);
       }
     }
-  })
-  bot.joinChatRoom();
+  });
+
+  bot.on('onBotJoinRoom', () => {
+    console.log("Bot is ready!");
+    bot.sendTextMessage(process.env.ON_READY_MESSAGE);
+  });
+
+  bot.joinChatRoom(process.env.LINKUP_ROOM_ID);
+
+  const iconPath = path.join(new URL('./assets/icon.png', import.meta.url).pathname);
+  bot.fetchAvatar(iconPath); // Fetch the avatar from local file
 
-  // Wait for 2 seconds for the bot to connect
-  setTimeout(() => {
-    // Send a message
-    bot.sendMessage(process.env.ON_READY_MESSAGE);
-  }, 2000); // Adjust the delay as necessary
 }).catch(error => {
   console.error('Error loading commands:', error);
 });

chatBot/commands/8ball.js

@@ -4,6 +4,6 @@ export default {
     handler: function(bot, args, message) {
       const responses = ['It is certain.', 'It is decidedly so.', 'Without a doubt.', 'Yes - definitely.', 'You may rely on it.', 'As I see it, yes.', 'Most likely.', 'Outlook good.', 'Yes.', 'Signs point to yes.', 'Reply hazy, try again.', 'Ask again later.', 'Better not tell you now.', 'Cannot predict now.', 'Concentrate and ask again.', 'Don\'t count on it.', 'My reply is no.', 'My sources say no.', 'Outlook not so good.', 'Very doubtful.'];
       const randomIndex = Math.floor(Math.random() * responses.length);
-      bot.sendMessage(responses[randomIndex]);
+      bot.sendTextMessage(responses[randomIndex]);
     }
   };

chatBot/commands/hello.js

@@ -3,6 +3,6 @@ export default {
     description: 'Greet the user',
     handler: function(bot, args, message) {
       const userName = message.name;
-      bot.sendMessage(`Hello, ${userName}! How can I assist you today?`);
+      bot.sendTextMessage(`Hello, ${userName}! How can I assist you today?`);
     }
   };

chatBot/commands/ping.js

@@ -1,7 +1,10 @@
-// ping.js
-
 export default {
-    handler: function(bot, args, message) {
-      bot.sendMessage('Pong!');
-    }
-  };
+  handler: function(bot, args, message) {
+    // Specify the path to the file you want to send
+    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
+    bot.sendFileMessage(filePath, fileType);
+  }
+};

chatBot/commands/test-audio.js

@@ -0,0 +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';
+
+    // Send the audio message using the bot instance
+    bot.sendAudioMessage(audioFilePath, audioType);
+  }
+};

chatBot/env.default

@@ -2,4 +2,4 @@ LINKUP_ROOM_ID=
 
 BOT_NAME=myBot
 
-ON_READY_MESSAGE="Hello, I am a bot. I am here to help you. Please type 'help' to see the list of commands."
+ON_READY_MESSAGE="Hello, I am a bot. I am here to help you."

chatBot/includes/Client.js

@@ -0,0 +1,211 @@
+import path from 'path';
+import Hyperswarm from 'hyperswarm';
+import EventEmitter from 'node:events';
+import b4a from "b4a";
+import TextMessage from "./message/TextMessage.js";
+import FileMessage from "./message/FileMessage.js";
+import AudioMessage from "./message/AudioMessage.js";
+import Message from "./message/Message.js";
+import IconMessage from "./message/IconMessage.js";
+import Corestore from 'corestore';
+import Hyperdrive from 'hyperdrive';
+import fs from 'fs';
+import ServeDrive from 'serve-drive';
+
+class Client extends EventEmitter {
+  constructor(botName) {
+    super();
+    if (!botName) return console.error("Bot Name is not defined!");
+    this.botName = botName;
+    this.swarm = new Hyperswarm();
+    this.joinedRooms = new Set(); // Track the rooms the bot has joined
+    this.currentTopic = null; // Track the current topic
+
+    // Initialize Corestore and Hyperdrive
+    this.storagePath = './storage/';
+    this.store = new Corestore(this.storagePath);
+    this.drive = new Hyperdrive(this.store);
+
+    // Initialize ServeDrive
+    this.servePort = null;
+    this.initializeServeDrive();
+
+    this.setupSwarm();
+
+    process.on('exit', () => {
+      console.log('EXIT signal received. Shutting down HyperSwarm...');
+      this.destroy();
+    });
+
+    process.on('SIGTERM', async () => {
+      console.log('SIGTERM signal received. Shutting down HyperSwarm...');
+      await this.destroy();
+      console.log('HyperSwarm was shut down. Exiting the process with exit code 0.');
+      process.exit(0);
+    });
+
+    process.on('SIGINT', async () => {
+      console.log('SIGINT signal received. Shutting down HyperSwarm...');
+      await this.destroy();
+      console.log('HyperSwarm was shut down. Exiting the process with exit code 0.');
+      process.exit(0);
+    });
+  }
+
+  async initializeServeDrive() {
+    try {
+      this.servePort = this.getRandomPort();
+      const serve = new ServeDrive({
+        port: this.servePort,
+        get: ({ key, filename, version }) => this.drive
+      });
+      await serve.ready();
+      console.log('ServeDrive listening on port:', this.servePort);
+    } catch (error) {
+      console.error('Error initializing ServeDrive:', error);
+    }
+  }
+
+  getRandomPort() {
+    return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
+  }
+
+  async fetchAvatar(filePath) {
+    try {
+      await this.drive.ready();
+      const iconBuffer = fs.readFileSync(filePath);
+      await this.drive.put(`/icons/${this.botName}.png`, iconBuffer);
+      this.botAvatar = `http://localhost:${this.servePort}/icons/${this.botName}.png`;
+
+      // Cache the icon message
+      this.iconMessage = IconMessage.new(this, iconBuffer);
+    } catch (error) {
+      console.error('Error fetching avatar:', error);
+    }
+  }
+
+  setupSwarm() {
+    this.swarm.on('connection', (peer) => {
+      // Send the cached icon message to the new peer
+      if (this.iconMessage) {
+        peer.write(this.iconMessage.toJsonString());
+      }
+
+      peer.on('data', async message => {
+        const messageObj = JSON.parse(message.toString());
+        if (this.joinedRooms.has(messageObj.topic)) { // Process message only if it is from a joined room
+          this.currentTopic = messageObj.topic; // Set the current topic from the incoming message
+
+          const msgType = messageObj.type;
+          const peerName = messageObj.name; // Changed from name to userName
+          const peerAvatar = messageObj.avatar;
+          const timestamp = messageObj.timestamp;
+
+          if (msgType === "message")
+            this.emit('onMessage', peer, new TextMessage(peerName, peerAvatar, this.currentTopic, timestamp, messageObj.message));
+
+          if (msgType === "file") {
+            const fileBuffer = await this.drive.get(`/files/${messageObj.fileName}`);
+            this.emit('onFile', peer, new FileMessage(peerName, peerAvatar, this.currentTopic, timestamp, messageObj.fileName, `http://localhost:${this.servePort}/files/${messageObj.fileName}`, messageObj.fileType, messageObj.fileData));
+          }
+
+          if (msgType === "icon")
+            this.emit('onIcon', peer, new IconMessage(peerName, peerAvatar, timestamp));
+
+          if (msgType === "audio") {
+            const audioBuffer = await this.drive.get(`/audio/${messageObj.audioName}`);
+            this.emit('onAudio', peer, new AudioMessage(peerName, peerAvatar, this.currentTopic, timestamp, `http://localhost:${this.servePort}/audio/${messageObj.audioName}`, messageObj.audioType, messageObj.audioData));
+          }
+        }
+      });
+
+      peer.on('error', e => {
+        this.emit('onError', e);
+        console.error(`Connection error: ${e}`);
+      });
+    });
+
+    this.swarm.on('update', () => {
+      console.log(`Connections count: ${this.swarm.connections.size} / Peers count: ${this.swarm.peers.size}`);
+    });
+  }
+
+  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 });
+    this.discovery.flushed().then(() => {
+      console.log(`Bot ${this.botName} joined the chat room.`);
+      this.emit('onBotJoinRoom');
+    });
+  }
+
+  sendTextMessage(message) {
+    console.log(`Preparing to send text message: ${message}`);
+    this.sendMessage(TextMessage.new(this, message));
+  }
+
+  async sendFileMessage(filePath, fileType) {
+    try {
+      await this.drive.ready();
+      const fileBuffer = fs.readFileSync(filePath);
+      const fileName = path.basename(filePath);
+      await this.drive.put(`/files/${fileName}`, fileBuffer);
+      const fileUrl = `http://localhost:${this.servePort}/files/${fileName}`;
+      const fileMessage = FileMessage.new(this, fileName, fileUrl, fileType, fileBuffer); // Pass fileBuffer to the new method
+      this.sendMessage(fileMessage);
+    } catch (error) {
+      console.error('Error sending file message:', error);
+    }
+  }
+
+  async sendAudioMessage(filePath, audioType) {
+    try {
+      await this.drive.ready();
+      const audioBuffer = fs.readFileSync(filePath);
+      const audioName = path.basename(filePath);
+      await this.drive.put(`/audio/${audioName}`, audioBuffer);
+      const audioUrl = `http://localhost:${this.servePort}/audio/${audioName}`;
+      const audioMessage = AudioMessage.new(this, audioUrl, audioType, audioBuffer); // Pass audioBuffer to the new method
+      this.sendMessage(audioMessage);
+    } catch (error) {
+      console.error('Error sending audio message:', error);
+    }
+  }
+
+  sendMessage(message) {
+    if (!(message instanceof Message)) {
+      console.error(`message does not extend Message class (TextMessage, FileMessage, AudioMessage).`, message);
+      return;
+    }
+
+    console.log("Sending message:", message);
+    const data = message.toJsonString();
+    const peers = [...this.swarm.connections];
+    if (peers.length === 0) {
+      console.warn("No active peer connections found.");
+      return;
+    }
+
+    console.log(`Sending message to ${peers.length} peers.`);
+    for (const peer of peers) {
+      try {
+        peer.write(data);
+        console.log(`Message sent to peer: ${peer.remoteAddress}`);
+      } catch (error) {
+        console.error(`Failed to send message to peer: ${peer.remoteAddress}`, error);
+      }
+    }
+  }
+
+  async destroy() {
+    await this.swarm.destroy();
+    console.log(`Bot ${this.botName} disconnected.`);
+  }
+}
+
+export default Client;

chatBot/includes/client.js

@@ -1,45 +0,0 @@
-import Hyperswarm from 'hyperswarm';
-import EventEmitter from 'node:events'
-
-class Client extends EventEmitter {
-  constructor(chatRoomID, botName) {
-    super();
-    this.topicBuffer = Buffer.from(chatRoomID, 'hex');
-    this.botName = botName;
-    this.swarm = new Hyperswarm();
-    this.setupSwarm();
-  }
-
-  setupSwarm() {
-    this.swarm.on('connection', (peer) => {
-      peer.on('data', message => this.emit("onMessage", peer, JSON.parse(message.toString())));
-      peer.on('error', e => console.log(`Connection error: ${e}`));
-    });
-
-    this.swarm.on('update', () => {
-      console.log(`Peers count: ${this.swarm.connections.size}`);
-    });
-  }
-
-  joinChatRoom() {
-    this.discovery = this.swarm.join(this.topicBuffer, { client: true, server: true });
-    this.discovery.flushed().then(() => {
-      console.log(`Bot ${this.botName} joined the chat room.`);
-    });
-  }
-
-  sendMessage(message) {
-    console.log('Bot name:', this.botName);
-    const timestamp = Date.now(); // Generate timestamp
-    const peers = [...this.swarm.connections];
-    const data = JSON.stringify({ name: this.botName, message, timestamp }); // Include timestamp
-    for (const peer of peers) peer.write(data);
-  }
-
-  destroy() {
-    this.swarm.destroy();
-    console.log(`Bot ${this.botName} disconnected.`);
-  }
-}
-
-export default Client;

chatBot/includes/message/AudioMessage.js

@@ -0,0 +1,27 @@
+import Message from "./Message.js";
+import b4a from "b4a";
+
+class AudioMessage extends Message {
+    constructor(peerName, peerAvatar, topic, timestamp, audioUrl, audioType, audioData) {
+        super("audio", peerName, peerAvatar, topic, timestamp);
+        this.audioUrl = audioUrl;
+        this.audioType = audioType;
+        this.audioData = audioData; // Add audio data property
+    }
+
+    toJsonString() {
+        return JSON.stringify({
+            ...this.toJson(),
+            audioUrl: this.audioUrl,
+            audioType: this.audioType,
+            audio: this.audioData // Include audio data in JSON
+        });
+    }
+
+    static new(bot, audioUrl, audioType, audioBuffer) {
+        const audioData = b4a.toString(audioBuffer, 'base64'); // Convert audio buffer to base64
+        return new AudioMessage(bot.botName, bot.botAvatar, bot.currentTopic, Date.now(), audioUrl, audioType, audioData);
+    }
+}
+
+export default AudioMessage;

chatBot/includes/message/FileMessage.js

@@ -0,0 +1,29 @@
+import Message from "./Message.js";
+import b4a from "b4a";
+
+class FileMessage extends Message {
+    constructor(peerName, peerAvatar, topic, timestamp, fileName, fileUrl, fileType, fileData) {
+        super("file", peerName, peerAvatar, topic, timestamp);
+        this.fileName = fileName;
+        this.fileUrl = fileUrl;
+        this.fileType = fileType;
+        this.fileData = fileData; // Add file data property
+    }
+
+    toJsonString() {
+        return JSON.stringify({
+            ...this.toJson(),
+            fileName: this.fileName,
+            fileUrl: this.fileUrl,
+            fileType: this.fileType,
+            file: this.fileData // Include file data in JSON
+        });
+    }
+
+    static new(bot, fileName, fileUrl, fileType, fileBuffer) {
+        const fileData = b4a.toString(fileBuffer, 'base64'); // Convert file buffer to base64
+        return new FileMessage(bot.botName, bot.botAvatar, bot.currentTopic, Date.now(), fileName, fileUrl, fileType, fileData);
+    }
+}
+
+export default FileMessage;

chatBot/includes/message/IconMessage.js

@@ -0,0 +1,20 @@
+import Message from "./Message.js";
+import b4a from "b4a";
+
+class IconMessage extends Message {
+    constructor(peerName, peerAvatar, timestamp) {
+        super("icon", peerName, peerAvatar, null, timestamp);
+    }
+
+    toJsonString() {
+        return JSON.stringify({
+            ...this.toJson()
+        });
+    }
+
+    static new(bot, avatarBuffer) {
+        return new IconMessage(bot.botName, b4a.toString(avatarBuffer, 'base64'), Date.now());
+    }
+}
+
+export default IconMessage;

chatBot/includes/message/Message.js

@@ -0,0 +1,21 @@
+class Message {
+    constructor(messageType, peerName, peerAvatar, topic, timestamp) {
+        this.type = messageType;
+        this.peerName = peerName;
+        this.peerAvatar = peerAvatar;
+        this.topic = topic;
+        this.timestamp = timestamp;
+    }
+
+    toJson() {
+        return {
+            type: this.type,
+            name: this.peerName,
+            avatar: this.peerAvatar,
+            topic: this.topic,
+            timestamp: this.timestamp
+        };
+    }
+}
+
+export default Message;

chatBot/includes/message/TextMessage.js

@@ -0,0 +1,21 @@
+import Message from "./Message.js";
+
+class TextMessage extends Message {
+  constructor(peerName, peerAvatar, topic, timestamp, message) {
+    super("message", peerName, peerAvatar, topic, timestamp);
+    this.message = message;
+  }
+
+  toJsonString() {
+    return JSON.stringify({
+      ...this.toJson(),
+      message: this.message,
+    });
+  }
+
+  static new(bot, message) {
+    return new TextMessage(bot.botName, bot.botAvatar, bot.currentTopic, Date.now(), message);
+  }
+}
+
+export default TextMessage;

commands.js

@@ -0,0 +1,104 @@
+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, 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(currentTopic);
+      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(currentTopic, restArgs);
+      } else {
+        addMessage('LinkUp', 'Usage: >join [topic]', agentAvatar, currentTopic);
+      }
+      break;
+    case '>leave':
+      leaveRoom(currentTopic);
+      break;
+    case '>create':
+      if (restArgs) {
+        await createRoom(currentTopic, 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);
+
+      // 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

@@ -7,22 +7,20 @@
   <link rel="stylesheet" type="text/css" href="style.css">
   <script type="module" src="./app.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
 </head>
 <body>
   <header>
-    <div>LinkUp</div>
-    <div class="window-controls">
-      <button id="minimize-button">-</button>
-      <button id="maximize-button">+</button>
-      <button id="close-button">x</button>
-    </div>
+    <pear-ctrl></pear-ctrl>
+    <div id="linkup-text">LinkUp | Peers: <span id="peers-count">0</span></div>
   </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">
@@ -37,26 +35,23 @@
         <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">
         <div id="header">
           <div id="details">
-            <div>
-              Topic: <span id="chat-room-topic"></span>
+            <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>
-              Peers: <span id="peers-count">0</span>
-            </div>
-          </div>
-          <div id="user-list">
-            <!-- User list will be populated here -->
           </div>
         </div>
         <div id="messages-container">
@@ -64,6 +59,9 @@
         </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>
+          <button type="button" id="talk-btn">Talk</button>
           <input type="submit" value="Send" />
         </form>
         <button id="remove-room-btn">Leave Room</button>
@@ -71,16 +69,189 @@
       <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');
-      messageInput.addEventListener('keydown', function(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
+      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) {
+          if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            document.getElementById('message-form').dispatchEvent(new Event('submit'));
+          }
+        });
+      }
+
+      if (copyTopicLink) {
+        copyTopicLink.addEventListener('click', function(event) {
           event.preventDefault();
-          document.getElementById('message-form').dispatchEvent(new Event('submit'));
+          if (chatRoomTopic) {
+            const topic = chatRoomTopic.innerText;
+            navigator.clipboard.writeText(topic).then(() => {
+              console.log('Topic copied to clipboard:', topic);
+            }).catch(err => {
+              console.error('Failed to copy topic:', err);
+            });
+          } else {
+            console.error('Element #chat-room-topic not found');
+          }
+        });
+      }
+
+      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);
+          });
+        });
+      }
+
+      const guildList = document.querySelector('#guild-list');
+      if (guildList) {
+        guildList.addEventListener('click', function(event) {
+          const roomItem = event.target.closest('.room-item');
+          if (roomItem) {
+            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>

package.json

@@ -7,9 +7,12 @@
     "type": "desktop",
     "gui": {
       "backgroundColor": "#1F2430",
-      "height": 540,
-      "width": 720
-    }
+      "height": 547,
+      "minWidth": 955,
+      "minHeight": 547,
+      "width": 955
+    },
+    "links": ["http://127.0.0.1", "http://localhost", "https://ka-f.fontawesome.com", "https://cdn.jsdelivr.net", "https://cdnjs.cloudflare.com"]
   },
   "license": "Apache-2.0",
   "devDependencies": {
@@ -22,12 +25,15 @@
   "dependencies": {
     "b4a": "^1.6.6",
     "corestore": "^6.18.2",
+    "dompurify": "^3.1.6",
     "dotenv": "^16.4.5",
     "electron": "^30.0.8",
+    "highlight.js": "^11.10.0",
     "hypercore-crypto": "^3.4.1",
     "hyperdrive": "^11.8.1",
     "hyperswarm": "^4.7.14",
     "localdrive": "^1.11.4",
+    "markdown-it": "^14.1.0",
     "marked": "^12.0.2",
     "serve-drive": "^5.0.8"
   }

style.css

@@ -12,65 +12,164 @@ body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-#messages-container {
-    height: 45vh; /* Adjust as needed */
-    overflow-y: auto;
-  }
+.mini-button {
+    display: inline-block;
+    padding: 3px 7px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    background-color: #464343;
+    border: none;
+    border-radius: 3px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
 
-  /* body {
+.mini-button:hover {
+    background-color: #181717;
+    transform: scale(1.05);
+}
+
+.bold {
+    font-weight: bold;
+}
+
+pear-ctrl[data-platform="darwin"] { 
+    float: right; 
+    margin-top: 4px; 
+}
+
+pear-ctrl {
+    margin-top: 9px;
+    margin-left: 9px;
+    position: absolute;
+}
+
+pear-ctrl:after {
+    content: '';
+    display: block;
+    height: 1.8rem;
+    position: fixed;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #1f1f1f;
+    filter: drop-shadow(2px 10px 6px #888);
+}
+
+main {
     display: flex;
-  } */
-  
-  #sidebar {
+    flex: 1;
+    overflow: hidden;
+}
+
+#sidebar {
     width: 200px;
     background-color: #2f3136;
     color: white;
-    height: 100vh;
+    height: 100%;
     padding: 10px;
     box-sizing: border-box;
-  }
-  
-  #room-list {
-    list-style: none;
-    padding: 0;
-    margin-bottom: 20px;
-  }
-  
-  #room-list li {
-    padding: 10px;
-    cursor: pointer;
-    margin-bottom: 5px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  
-  #room-list li:hover {
-    background-color: #40444b;
-  }
-  
-  #content {
+}
+
+#content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     padding: 10px;
-  }
-  
-  #sidebar button {
+}
+
+#register,
+#setup,
+#chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    background-color: #1f1f1f;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+#chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 1rem;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    width: 100%;
+}
+
+#messages-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+#messages-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+#messages-container::-webkit-scrollbar-thumb {
+    background-color: #464343;
+    border-radius: 10px;
+}
+
+#messages-container::-webkit-scrollbar-track {
+    background: #2e2e2e;
+}
+
+#message-form {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
+    width: 100%;
+}
+
+#message {
+    flex: 1;
+    margin-right: 0.5rem;
+    padding-right: 0.5rem;
+    height: 1.5rem;
+    overflow-y: hidden;
+}
+
+#message:focus {
+    height: auto;
+}
+
+#message:empty {
+    height: 1.5rem;
+}
+
+#sidebar button {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     cursor: pointer;
-    background-color: #7289da;
+    background-color: #3e3c3c;
     border: none;
     color: white;
     font-size: 14px;
     border-radius: 5px;
-  }
-  
-  #sidebar button:hover {
-    background-color: #5b6eae;
-  }
-  
-  #remove-room-btn {
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#sidebar button:hover {
+    background-color: #191919;
+    transform: scale(1.05);
+}
+
+#remove-room-btn {
     margin-top: 10px;
     padding: 10px;
     background-color: #f04747;
@@ -78,21 +177,22 @@ body {
     color: white;
     cursor: pointer;
     border-radius: 5px;
-  }
-  
-  #remove-room-btn:hover {
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#remove-room-btn:hover {
     background-color: #c03535;
-  }
-  
-  .hidden {
+    transform: scale(1.05);
+}
+
+.hidden {
     display: none;
-  }
+}
 
 /* Header styles */
 header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
     padding: 1rem;
     background-color: #1f1f1f;
     color: #fff;
@@ -101,9 +201,12 @@ header {
     -webkit-app-region: drag;
 }
 
+#linkup-text {
+    margin-left: auto;
+}
+
 .window-controls {
     display: flex;
-    align-items: center;
     -webkit-app-region: no-drag;
 }
 
@@ -116,42 +219,68 @@ 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;
-    padding: 0.75rem;
+    color: #e0e0e0;
+    padding: 0.5rem;
     font-family: 'Roboto Mono', monospace;
     font-size: 1rem;
-    line-height: 1.5rem;
+    line-height: 1.25rem;
     border-radius: 4px;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-    resize: none; /* Prevent resizing */
-    overflow-y: hidden; /* Hide scrollbar */
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
+    resize: none;
+    overflow-y: hidden;
+}
+
+button:hover,
+input[type="submit"]:hover {
+    background-color: #191919;
+    transform: scale(1.05);
 }
 
 textarea {
-    height: auto; /* Allow the textarea to grow dynamically */
+    height: auto;
 }
 
 textarea:focus {
-    outline: none; /* Remove focus outline */
+    outline: none;
 }
 
 textarea::placeholder {
     color: #a0a0a0;
 }
 
+#attach-file, 
+#message-form input[type="submit"] {
+    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;
@@ -181,7 +310,7 @@ main {
 
 #or {
     margin: 1.5rem 0;
-    color: #b0d944;
+    color: #e0e0e0;
 }
 
 #loading {
@@ -204,6 +333,7 @@ main {
 }
 
 #header {
+    width: 100%;
     margin-bottom: 1rem;
 }
 
@@ -224,35 +354,57 @@ 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 {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 1rem;
     background-color: #2b2b2b;
     border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#details>div {
+    display: flex;
+    flex-direction: column;
 }
 
 #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 {
     flex: 1;
     min-height: 200px;
     overflow-y: auto;
-    padding: 1rem;
+    padding: 0.5rem;
     background-color: #262626;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
 #message-form {
     display: flex;
+    align-items: center;
     margin-top: 1rem;
-    margin-right: 1rem;
+    width: 100%;
 }
 
 #message {
@@ -281,97 +433,186 @@ main {
 /* Message styles */
 .message {
     display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
 }
 
-.message img {
-    width: 40px;
-    height: 40px;
+.message img.avatar {
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
-    margin-right: 0.75rem;
-    border: 2px solid #b0d944;
+    margin-right: 0.5rem;
+    border: 2px solid #464343;
+    user-select: none;
 }
 
 .message-content {
     max-width: 70%;
     background-color: #2e2e2e;
     padding: 0.5rem;
-    border-radius: 10px;
+    border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .message-header {
     font-weight: bold;
-    color: #b0d944;
+    color: #e0e0e0;
+    font-size: 0.9rem;
 }
 
-.message-time {
-    color: #a0a0a0;
-    font-size: 0.75rem;
-    margin-left: 0.5rem;
+.message-text {
+    color: #e0e0e0;
 }
 
-/* Button and input styles */
-button,
-input,
-textarea {
-    border: 1px solid #b0d944;
-    background-color: #333;
-    color: #b0d944;
-    padding: 0.75rem;
-    font-family: 'Roboto Mono', monospace;
-    font-size: 1rem;
-    line-height: 1.5rem;
+.attached-image {
+    max-width: 100%;
+    height: auto;
+    margin-top: 0.5rem;
     border-radius: 4px;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-    resize: none; /* Prevent resizing */
-    overflow-y: hidden; /* Hide scrollbar */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-textarea {
-    height: auto; /* Allow the textarea to grow dynamically */
+/* Updated Room List Styles */
+#guild-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-textarea:focus {
-    outline: none; /* Remove focus outline */
-}
-
-textarea::placeholder {
-    color: #a0a0a0;
-}
-
-/* Chat container styles */
-#chat {
+.guild-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #3a3f44;
+    border-radius: 5px;
+    cursor: pointer;
     display: flex;
     flex-direction: column;
-    flex: 1;
-    width: 100%;
-    padding: 1rem;
-    background-color: #1e1e1e;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
+    transition: background-color 0.3s ease;
 }
 
-#message-form {
+.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;
-    margin-top: 1rem;
-    margin-right: 1rem;
+    flex-direction: column;
 }
 
-#message {
+.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;
+}
+
+.guild-item .room-list li:hover {
+    background-color: #5a5f64;
+}
+
+.guild-item .room-list li span {
     flex: 1;
-    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 */
+.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;
+}
+
+.guild-item .room-list li .edit-icon:hover,
+.guild-item .room-list li .delete-icon:hover {
+    color: #a0a0a0;
+}
+
+/* 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;
+    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;
+    float: right;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.close-btn:hover {
+    color: #f04747;
+}
+
+.modal h2 {
+    margin-bottom: 1rem;
+    color: #fff;
+}
+
+.modal form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.modal form input,
+.modal form button {
+    margin-bottom: 1rem;
+    width: 100%;
+}
+
+.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);
 }
 
-#message:empty {
-    height: 1.5rem; /* Ensure single line height when empty */
-}