Merge pull request 'Up to date fork' (#1) from snxraven/LinkUp-P2P-Chat:main into main
Reviewed-on: MiTask/LinkUp-P2P-Chat#1
This commit is contained in:
commit
d3792b4bd0
1
.gitignore
vendored
1
.gitignore
vendored
@ -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
12
README.md
Normal 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`
|
483
app.js
483
app.js
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function initialize() {
|
function currentTopic() {
|
||||||
swarm = new Hyperswarm();
|
return document.querySelector('#chat-room-topic').innerText;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentPeerCount() {
|
||||||
|
const topic = currentTopic();
|
||||||
|
const room = activeRooms.find(room => room.topic === topic);
|
||||||
|
return room ? room.swarm.connections.size : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePeerCount() {
|
||||||
|
const peerCountElement = document.querySelector('#peers-count');
|
||||||
|
if (peerCountElement) {
|
||||||
|
peerCountElement.textContent = getCurrentPeerCount(); // Display the actual peer count
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function joinRoom(topicStr) {
|
||||||
|
const topicBuffer = b4a.from(topicStr, 'hex');
|
||||||
|
addRoomToList(topicStr);
|
||||||
|
await joinSwarm(topicBuffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createRoom(alias) {
|
||||||
|
const topicBuffer = crypto.randomBytes(32);
|
||||||
|
const topic = b4a.toString(topicBuffer, 'hex');
|
||||||
|
addRoomToList(topic, alias);
|
||||||
|
await joinSwarm(topicBuffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function listFiles() {
|
||||||
|
const files = [];
|
||||||
|
for await (const entry of drive.readdir('/files')) {
|
||||||
|
files.push(entry);
|
||||||
|
}
|
||||||
|
return files;
|
||||||
|
}
|
||||||
|
async function deleteFile(filename) {
|
||||||
|
await drive.del(`/files/${filename}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initialize() {
|
||||||
|
try {
|
||||||
servePort = getRandomPort();
|
servePort = getRandomPort();
|
||||||
const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
|
const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
|
||||||
await serve.ready();
|
await serve.ready();
|
||||||
console.log('Listening on http://localhost:' + serve.address().port);
|
console.log('Listening on http://localhost:' + serve.address().port);
|
||||||
|
|
||||||
|
// Event listeners setup
|
||||||
|
setupEventListeners();
|
||||||
|
|
||||||
|
const configExists = fs.existsSync("./config.json");
|
||||||
|
if (configExists) {
|
||||||
|
loadConfigFromFile();
|
||||||
|
renderRoomList();
|
||||||
|
await connectToAllRooms();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!configExists) {
|
||||||
|
document.querySelector('#register').classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
eventEmitter.on('onMessage', async (messageObj) => {
|
||||||
|
handleIncomingMessage(messageObj);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", (event) => {
|
||||||
|
hljs.highlightAll();
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error during initialization:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupEventListeners() {
|
||||||
const registerForm = document.querySelector('#register-form');
|
const 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,42 +162,19 @@ 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
|
function handleIncomingMessage(messageObj) {
|
||||||
|
|
||||||
// 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');
|
|
||||||
if (registerDiv && !configExists) {
|
|
||||||
registerDiv.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
eventEmitter.on('onMessage', async (messageObj) => {
|
|
||||||
console.log('Received message:', messageObj); // Debugging log
|
console.log('Received message:', messageObj); // Debugging log
|
||||||
|
|
||||||
if (messageObj.type === 'icon') {
|
if (messageObj.type === 'icon') {
|
||||||
const username = messageObj.username;
|
const username = messageObj.username;
|
||||||
if (messageObj.avatar) {
|
if (messageObj.avatar) {
|
||||||
const avatarBuffer = b4a.from(messageObj.avatar, 'base64');
|
const avatarBuffer = b4a.from(messageObj.avatar, 'base64');
|
||||||
await drive.put(`/icons/${username}.png`, avatarBuffer);
|
drive.put(`/icons/${username}.png`, avatarBuffer);
|
||||||
updateIcon(username, avatarBuffer);
|
updateIcon(username, avatarBuffer);
|
||||||
} else {
|
} else {
|
||||||
console.error('Received icon message with missing avatar data:', messageObj);
|
console.error('Received icon message with missing avatar data:', messageObj);
|
||||||
@ -130,25 +182,31 @@ async function initialize() {
|
|||||||
} else if (messageObj.type === 'file') {
|
} else if (messageObj.type === 'file') {
|
||||||
if (messageObj.file && messageObj.fileName) {
|
if (messageObj.file && messageObj.fileName) {
|
||||||
const fileBuffer = b4a.from(messageObj.file, 'base64');
|
const fileBuffer = b4a.from(messageObj.file, 'base64');
|
||||||
await drive.put(`/files/${messageObj.fileName}`, fileBuffer);
|
drive.put(`/files/${messageObj.fileName}`, fileBuffer).then(() => {
|
||||||
const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`;
|
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 {
|
} else {
|
||||||
console.error('Received file message with missing file data or fileName:', messageObj);
|
console.error('Received file message with missing file data or fileName:', messageObj);
|
||||||
}
|
}
|
||||||
} else if (messageObj.type === 'message') {
|
} else if (messageObj.type === 'message') {
|
||||||
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic);
|
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic, messageObj.timestamp);
|
||||||
|
} else if (messageObj.type === 'audio') {
|
||||||
|
const audioBuffer = b4a.from(messageObj.audio, 'base64');
|
||||||
|
const filePath = `/audio/${Date.now()}.webm`;
|
||||||
|
drive.put(filePath, audioBuffer).then(() => {
|
||||||
|
const audioUrl = `http://localhost:${servePort}${filePath}`;
|
||||||
|
addAudioMessage(messageObj.name, audioUrl, messageObj.avatar, messageObj.topic);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
console.error('Received unknown message type:', messageObj);
|
console.error('Received unknown message type:', messageObj);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
swarm.on('connection', async (connection, info) => {
|
async function handleConnection(connection, info) {
|
||||||
peerCount++;
|
console.log('New connection', info);
|
||||||
updatePeerCount();
|
|
||||||
console.log('Peer connected, current peer count:', peerCount);
|
|
||||||
|
|
||||||
// Send the current user's icon to the new peer
|
// Sending the icon immediately upon connection
|
||||||
const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
|
const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
|
||||||
if (iconBuffer) {
|
if (iconBuffer) {
|
||||||
const iconMessage = JSON.stringify({
|
const iconMessage = JSON.stringify({
|
||||||
@ -156,7 +214,10 @@ async function initialize() {
|
|||||||
username: config.userName,
|
username: config.userName,
|
||||||
avatar: b4a.toString(iconBuffer, 'base64'),
|
avatar: b4a.toString(iconBuffer, 'base64'),
|
||||||
});
|
});
|
||||||
|
console.log('Sending icon to new peer:', iconMessage);
|
||||||
connection.write(iconMessage);
|
connection.write(iconMessage);
|
||||||
|
} else {
|
||||||
|
console.error('Icon not found for user:', config.userName);
|
||||||
}
|
}
|
||||||
|
|
||||||
connection.on('data', (data) => {
|
connection.on('data', (data) => {
|
||||||
@ -165,23 +226,91 @@ async function initialize() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
connection.on('close', () => {
|
connection.on('close', () => {
|
||||||
peerCount--;
|
console.log('Connection closed', info);
|
||||||
updatePeerCount();
|
updatePeerCount();
|
||||||
console.log('Peer disconnected, current peer count:', peerCount);
|
});
|
||||||
|
|
||||||
|
connection.on('error', (error) => {
|
||||||
|
console.error('Connection error', error);
|
||||||
|
if (error.code === 'ETIMEDOUT') {
|
||||||
|
retryConnection(info.topicBuffer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePeerCount();
|
||||||
|
}
|
||||||
|
|
||||||
|
function retryConnection(topicBuffer) {
|
||||||
|
const topic = b4a.toString(topicBuffer, 'hex');
|
||||||
|
const room = activeRooms.find(room => room.topic === topic);
|
||||||
|
if (room) {
|
||||||
|
console.log('Retrying connection to room:', topic);
|
||||||
|
room.swarm.leave(topicBuffer);
|
||||||
|
joinSwarm(topicBuffer).catch((error) => {
|
||||||
|
console.error('Failed to rejoin room after timeout:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupTalkButton() {
|
||||||
|
const talkButton = document.getElementById('talk-btn');
|
||||||
|
if (!talkButton) return;
|
||||||
|
|
||||||
|
let mediaRecorder;
|
||||||
|
let audioChunks = [];
|
||||||
|
|
||||||
|
talkButton.addEventListener('mousedown', async () => {
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||||
|
mediaRecorder = new MediaRecorder(stream);
|
||||||
|
mediaRecorder.start();
|
||||||
|
|
||||||
|
mediaRecorder.addEventListener('dataavailable', event => {
|
||||||
|
audioChunks.push(event.data);
|
||||||
|
});
|
||||||
|
|
||||||
|
mediaRecorder.addEventListener('stop', async () => {
|
||||||
|
const audioBlob = new Blob(audioChunks);
|
||||||
|
audioChunks = [];
|
||||||
|
|
||||||
|
const arrayBuffer = await audioBlob.arrayBuffer();
|
||||||
|
const buffer = new Uint8Array(arrayBuffer);
|
||||||
|
|
||||||
|
const topic = currentTopic();
|
||||||
|
const filePath = `/audio/${Date.now()}.webm`;
|
||||||
|
await drive.put(filePath, buffer);
|
||||||
|
|
||||||
|
const audioUrl = `http://localhost:${servePort}${filePath}`;
|
||||||
|
|
||||||
|
const audioMessage = {
|
||||||
|
type: 'audio',
|
||||||
|
name: config.userName,
|
||||||
|
audio: b4a.toString(buffer, 'base64'),
|
||||||
|
audioType: audioBlob.type,
|
||||||
|
avatar: updatePortInUrl(config.userAvatar),
|
||||||
|
topic: topic
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Sending audio message:', audioMessage); // Debugging log
|
||||||
|
|
||||||
|
const peers = [...activeRooms.find(room => room.topic === topic).swarm.connections];
|
||||||
|
for (const peer of peers) {
|
||||||
|
peer.write(JSON.stringify(audioMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
addAudioMessage(config.userName, audioUrl, config.userAvatar, topic);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
swarm.on('error', (err) => {
|
talkButton.addEventListener('mouseup', () => {
|
||||||
console.error('Swarm error:', err);
|
if (mediaRecorder) {
|
||||||
|
mediaRecorder.stop();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
swarm.on('close', () => {
|
talkButton.addEventListener('mouseleave', () => {
|
||||||
console.log('Swarm closed');
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
||||||
});
|
mediaRecorder.stop();
|
||||||
|
}
|
||||||
// Initialize highlight.js once the DOM is fully loaded
|
|
||||||
document.addEventListener("DOMContentLoaded", (event) => {
|
|
||||||
hljs.highlightAll();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,7 +318,7 @@ function registerUser(e) {
|
|||||||
e.preventDefault();
|
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)) {
|
||||||
|
try {
|
||||||
|
const swarm = new Hyperswarm();
|
||||||
const discovery = swarm.join(topicBuffer, { client: true, server: true });
|
const discovery = swarm.join(topicBuffer, { client: true, server: true });
|
||||||
await discovery.flushed();
|
await discovery.flushed();
|
||||||
|
|
||||||
activeRooms.push({ topic, discovery });
|
swarm.on('connection', (connection, info) => {
|
||||||
|
handleConnection(connection, info);
|
||||||
|
});
|
||||||
|
|
||||||
|
activeRooms.push({ topic, swarm, discovery });
|
||||||
|
|
||||||
console.log('Joined room:', topic); // Debugging log
|
console.log('Joined room:', topic); // Debugging log
|
||||||
|
|
||||||
renderMessagesForRoom(topic);
|
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] = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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);
|
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
BIN
assets/agent.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
@ -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);
|
||||||
});
|
});
|
@ -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 });
|
||||||
|
@ -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,
|
||||||
|
@ -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
56
commands.js
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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
189
style.css
@ -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 */
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user