MiTask/LinkUp-P2P-Chat
1
0
Fork 0
forked from snxraven/LinkUp-P2P-Chat
Code Pull Requests Activity

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

Browse Source 
Reviewed-on: #1
This commit is contained in:
MiTask 2024-06-14 08:32:25 +00:00
commit d3792b4bd0
11 changed files with 639 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

12
README.md Normal file
View File

@ -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`

565
app.js
View File

@ -6,16 +6,22 @@ import Hyperdrive from 'hyperdrive';
import Corestore from 'corestore'; import Corestore from 'corestore';
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import fs from "fs"; import fs from "fs";
import handleCommand from './commands.js';
const agentAvatarPath = './assets/agent.png';
let agentAvatar = '';
const storagePath = `./storage/`; const storagePath = `./storage/`;
const store = new Corestore(storagePath); const store = new Corestore(storagePath);
const drive = new Hyperdrive(store); const drive = new Hyperdrive(store);
await drive.ready(); 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 = []; let activeRooms = [];
const eventEmitter = new EventEmitter(); const eventEmitter = new EventEmitter();
@ -26,7 +32,8 @@ let servePort;
let config = { let config = {
userName: '', userName: '',
userAvatar: '', userAvatar: '',
rooms: [] rooms: [],
registeredUsers: {}
}; };
// Store messages for each room // Store messages for each room
@ -37,14 +44,81 @@ function getRandomPort() {
return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152; return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
} }
function currentTopic() {
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() { async function initialize() {
swarm = new Hyperswarm(); 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);
servePort = getRandomPort(); // Event listeners setup
const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive }); setupEventListeners();
await serve.ready();
console.log('Listening on http://localhost:' + serve.address().port);
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 registerForm = document.querySelector('#register-form');
const selectAvatarButton = document.querySelector('#select-avatar'); const selectAvatarButton = document.querySelector('#select-avatar');
const createChatRoomButton = document.querySelector('#create-chat-room'); const createChatRoomButton = document.querySelector('#create-chat-room');
@ -54,6 +128,7 @@ async function initialize() {
const removeRoomBtn = document.querySelector('#remove-room-btn'); const removeRoomBtn = document.querySelector('#remove-room-btn');
const attachFileButton = document.getElementById('attach-file'); const attachFileButton = document.getElementById('attach-file');
const fileInput = document.getElementById('file-input'); const fileInput = document.getElementById('file-input');
const talkButton = document.getElementById('talk-btn');
if (registerForm) { if (registerForm) {
registerForm.addEventListener('submit', registerUser); registerForm.addEventListener('submit', registerUser);
@ -77,7 +152,7 @@ async function initialize() {
} }
if (removeRoomBtn) { if (removeRoomBtn) {
removeRoomBtn.addEventListener('click', () => { removeRoomBtn.addEventListener('click', () => {
const topic = document.querySelector('#chat-room-topic').innerText; const topic = currentTopic();
leaveRoom(topic); leaveRoom(topic);
}); });
} }
@ -87,101 +162,155 @@ async function initialize() {
if (fileInput) { if (fileInput) {
fileInput.addEventListener('change', handleFileInput); 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) { console.log('Received message:', messageObj); // Debugging log
registerDiv.classList.remove('hidden');
}
eventEmitter.on('onMessage', async (messageObj) => { if (messageObj.type === 'icon') {
console.log('Received message:', messageObj); // Debugging log const username = messageObj.username;
if (messageObj.avatar) {
if (messageObj.type === 'icon') { const avatarBuffer = b4a.from(messageObj.avatar, 'base64');
const username = messageObj.username; drive.put(`/icons/${username}.png`, avatarBuffer);
if (messageObj.avatar) { updateIcon(username, avatarBuffer);
const avatarBuffer = b4a.from(messageObj.avatar, 'base64'); } else {
await drive.put(`/icons/${username}.png`, avatarBuffer); console.error('Received icon message with missing avatar data:', messageObj);
updateIcon(username, avatarBuffer); }
} else { } else if (messageObj.type === 'file') {
console.error('Received icon message with missing avatar data:', messageObj); if (messageObj.file && messageObj.fileName) {
} const fileBuffer = b4a.from(messageObj.file, 'base64');
} else if (messageObj.type === 'file') { drive.put(`/files/${messageObj.fileName}`, fileBuffer).then(() => {
if (messageObj.file && messageObj.fileName) {
const fileBuffer = b4a.from(messageObj.file, 'base64');
await drive.put(`/files/${messageObj.fileName}`, fileBuffer);
const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`; const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`;
addFileMessage(messageObj.name, messageObj.fileName, updatePortInUrl(fileUrl), messageObj.fileType, updatePortInUrl(messageObj.avatar), messageObj.topic); 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);
} else {
console.error('Received unknown message type:', messageObj);
}
});
swarm.on('connection', async (connection, info) => {
peerCount++;
updatePeerCount();
console.log('Peer connected, current peer count:', peerCount);
// Send the current user's icon to the new peer
const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
if (iconBuffer) {
const iconMessage = JSON.stringify({
type: 'icon',
username: config.userName,
avatar: b4a.toString(iconBuffer, 'base64'),
}); });
connection.write(iconMessage); } 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, 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);
}
}
connection.on('data', (data) => { async function handleConnection(connection, info) {
const messageObj = JSON.parse(data.toString()); console.log('New connection', info);
eventEmitter.emit('onMessage', messageObj);
// Sending the icon immediately upon connection
const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
if (iconBuffer) {
const iconMessage = JSON.stringify({
type: 'icon',
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) => {
const messageObj = JSON.parse(data.toString());
eventEmitter.emit('onMessage', messageObj);
});
connection.on('close', () => {
console.log('Connection closed', info);
updatePeerCount();
});
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);
}); });
connection.on('close', () => { mediaRecorder.addEventListener('stop', async () => {
peerCount--; const audioBlob = new Blob(audioChunks);
updatePeerCount(); audioChunks = [];
console.log('Peer disconnected, current peer count:', peerCount);
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(); e.preventDefault();
const regUsername = document.querySelector('#reg-username').value; const regUsername = document.querySelector('#reg-username').value;
if (registeredUsers[regUsername]) { if (config.registeredUsers[regUsername]) {
alert('Username already taken. Please choose another.'); alert('Username already taken. Please choose another.');
return; return;
} }
@ -201,8 +330,8 @@ function registerUser(e) {
const buffer = new Uint8Array(event.target.result); const buffer = new Uint8Array(event.target.result);
await drive.put(`/icons/${regUsername}.png`, buffer); await drive.put(`/icons/${regUsername}.png`, buffer);
config.userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL 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); continueRegistration(regUsername);
}; };
reader.readAsArrayBuffer(avatarFile); reader.readAsArrayBuffer(avatarFile);
@ -240,7 +369,15 @@ async function createChatRoom() {
async function joinChatRoom(e) { async function joinChatRoom(e) {
e.preventDefault(); 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'); const topicBuffer = b4a.from(topicStr, 'hex');
addRoomToList(topicStr); addRoomToList(topicStr);
await joinSwarm(topicBuffer); await joinSwarm(topicBuffer);
@ -249,28 +386,38 @@ async function joinChatRoom(e) {
async function joinSwarm(topicBuffer) { async function joinSwarm(topicBuffer) {
const topic = b4a.toString(topicBuffer, 'hex'); const topic = b4a.toString(topicBuffer, 'hex');
if (!activeRooms.some(room => room.topic === topic)) { if (!activeRooms.some(room => room.topic === topic)) {
const discovery = swarm.join(topicBuffer, { client: true, server: true }); try {
await discovery.flushed(); 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);
});
console.log('Joined room:', topic); // Debugging log activeRooms.push({ topic, swarm, discovery });
renderMessagesForRoom(topic); 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 roomList = document.querySelector('#room-list');
const roomItem = document.createElement('li'); const roomItem = document.createElement('li');
roomItem.textContent = truncateHash(topic); roomItem.textContent = alias || truncateHash(topic);
roomItem.dataset.topic = topic; roomItem.dataset.topic = topic;
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
roomItem.addEventListener('click', () => switchRoom(topic)); roomItem.addEventListener('click', () => switchRoom(topic));
roomList.appendChild(roomItem); roomList.appendChild(roomItem);
config.rooms.push({ topic, alias: truncateHash(topic) }); config.rooms.push({ topic, alias: alias || truncateHash(topic) });
writeConfigToFile("./config.json"); writeConfigToFile("./config.json");
} }
@ -315,8 +462,7 @@ function exitEditMode(roomItem, input, topic) {
} }
// Check if the edited room is the current room in view // 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'); const chatRoomName = document.querySelector('#chat-room-name');
if (chatRoomName) { if (chatRoomName) {
chatRoomName.innerText = newAlias; chatRoomName.innerText = newAlias;
@ -349,6 +495,7 @@ function switchRoom(topic) {
clearMessages(); clearMessages();
renderMessagesForRoom(topic); renderMessagesForRoom(topic);
updatePeerCount();
// Show chat UI elements // Show chat UI elements
document.querySelector('#chat').classList.remove('hidden'); document.querySelector('#chat').classList.remove('hidden');
@ -359,7 +506,7 @@ function leaveRoom(topic) {
const roomIndex = activeRooms.findIndex(room => room.topic === topic); const roomIndex = activeRooms.findIndex(room => room.topic === topic);
if (roomIndex !== -1) { if (roomIndex !== -1) {
const room = activeRooms[roomIndex]; const room = activeRooms[roomIndex];
room.discovery.destroy(); room.swarm.destroy();
activeRooms.splice(roomIndex, 1); activeRooms.splice(roomIndex, 1);
} }
@ -379,16 +526,34 @@ function leaveRoom(topic) {
} }
} }
function sendMessage(e) {
async function sendMessage(e) {
e.preventDefault(); e.preventDefault();
const message = document.querySelector('#message').value; const message = document.querySelector('#message').value;
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 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({ const messageObj = JSON.stringify({
type: 'message', type: 'message',
@ -396,10 +561,10 @@ function sendMessage(e) {
message, message,
avatar: config.userAvatar, avatar: config.userAvatar,
topic: topic, 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) { for (const peer of peers) {
peer.write(messageObj); peer.write(messageObj);
} }
@ -415,7 +580,7 @@ async function handleFileInput(event) {
await drive.put(filePath, buffer); await drive.put(filePath, buffer);
const fileUrl = `http://localhost:${servePort}${filePath}`; const fileUrl = `http://localhost:${servePort}${filePath}`;
const topic = document.querySelector('#chat-room-topic').innerText; const topic = currentTopic();
const fileMessage = { const fileMessage = {
type: 'file', type: 'file',
@ -429,7 +594,7 @@ async function handleFileInput(event) {
console.log('Sending file message:', fileMessage); // Debugging log 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) { for (const peer of peers) {
peer.write(JSON.stringify(fileMessage)); 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) { function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
console.log('Adding file message:', { from, fileName, fileUrl, fileType, avatar, topic }); // Debugging log console.log('Adding file message:', { from, fileName, fileUrl, fileType, avatar, topic }); // Debugging log
const $div = document.createElement('div'); const $div = document.createElement('div');
$div.classList.add('message'); $div.classList.add('message');
const $img = document.createElement('img'); 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'); $img.classList.add('avatar');
$div.appendChild($img); $div.appendChild($img);
@ -481,7 +625,7 @@ function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
if (fileType.startsWith('image/')) { if (fileType.startsWith('image/')) {
const $image = document.createElement('img'); const $image = document.createElement('img');
$image.src = fileUrl; $image.src = updatePortInUrl(fileUrl);
$image.alt = fileName; $image.alt = fileName;
$image.classList.add('attached-image'); $image.classList.add('attached-image');
$content.appendChild($image); $content.appendChild($image);
@ -500,19 +644,11 @@ function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) {
$div.appendChild($content); $div.appendChild($content);
// Only render the message if it's for the current room // 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); document.querySelector('#messages').appendChild($div);
scrollToBottom(); scrollToBottom();
} else { } 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; 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 console.log('Adding message:', { from, message, avatar, topic }); // Debugging log
const messageObj = { const messageObj = {
from, from,
message, message,
avatar avatar,
timestamp: timestamp || Date.now()
}; };
// Add the message to the store // Add the message to the store
addMessageToStore(topic, messageObj); addMessageToStore(topic, messageObj);
// Only render messages for the current room // 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'); const $div = document.createElement('div');
$div.classList.add('message'); $div.classList.add('message');
@ -553,6 +689,34 @@ function onMessageAdded(from, message, avatar, topic) {
const $text = document.createElement('div'); const $text = document.createElement('div');
$text.classList.add('message-text'); $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({ const md = window.markdownit({
highlight: function (str, lang) { highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) { if (lang && hljs.getLanguage(lang)) {
@ -563,9 +727,9 @@ function onMessageAdded(from, message, avatar, topic) {
return ''; // use external default escaping return ''; // use external default escaping
} }
}); });
const markdownContent = md.render(message); const markdownContent = md.render(message);
$text.innerHTML = markdownContent; $text.innerHTML = markdownContent;
}
$content.appendChild($header); $content.appendChild($header);
$content.appendChild($text); $content.appendChild($text);
@ -574,7 +738,54 @@ function onMessageAdded(from, message, avatar, topic) {
document.querySelector('#messages').appendChild($div); document.querySelector('#messages').appendChild($div);
scrollToBottom(); scrollToBottom();
} else { } 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() { function clearMessages() {
const messagesContainer = document.querySelector('#messages'); const messagesContainer = document.querySelector('#messages');
while (messagesContainer.firstChild) { while (messagesContainer.firstChild) {
messagesContainer.removeChild(messagesContainer.firstChild); messagesContainer.removeChild(messagesContainer.firstChild);
} }
// Clear the messages from the store for the current room
// const topic = currentTopic();
// messagesStore[topic] = [];
} }
function toggleSetupView() { function toggleSetupView() {
@ -643,7 +869,7 @@ function renderMessagesForRoom(topic) {
// Fetch and render messages for the selected room // Fetch and render messages for the selected room
const messages = getMessagesForRoom(topic); const messages = getMessagesForRoom(topic);
messages.forEach(message => { 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]) { if (!messagesStore[topic]) {
messagesStore[topic] = []; messagesStore[topic] = [];
} }
messagesStore[topic].push(messageObj);
// 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 // Call this function when loading the rooms initially

BIN
assets/agent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

1
chatBot/bot.js
View File

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

6
chatBot/includes/Client.js
View File

@ -7,7 +7,7 @@ import FileMessage from "./FileMessage.js";
class Client extends EventEmitter { class Client extends EventEmitter {
constructor(botName) { constructor(botName) {
super(); super();
if(!botName) return console.error("Bot Name is not defined!"); if (!botName) return console.error("Bot Name is not defined!");
this.botName = botName; this.botName = botName;
this.swarm = new Hyperswarm(); this.swarm = new Hyperswarm();
this.joinedRooms = new Set(); // Track the rooms the bot has joined this.joinedRooms = new Set(); // Track the rooms the bot has joined
@ -48,6 +48,10 @@ class Client extends EventEmitter {
} }
joinChatRoom(chatRoomID) { 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.joinedRooms.add(chatRoomID); // Add the room to the list of joined rooms
this.currentTopic = chatRoomID; // Store the current topic this.currentTopic = chatRoomID; // Store the current topic
this.discovery = this.swarm.join(Buffer.from(chatRoomID, 'hex'), { client: true, server: true }); this.discovery = this.swarm.join(Buffer.from(chatRoomID, 'hex'), { client: true, server: true });

4
chatBot/includes/FileMessage.js
View File

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

6
chatBot/includes/TextMessage.js
View File

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

56
commands.js Normal file
View File

@ -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);
}
}

3
index.html
View File

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

189
style.css
View File

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