snxraven/LinkUp-P2P-Chat
1
1
Fork 2
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: snxraven:94ea9b6840f8430d514c296de6b36e4ceb5a2b17
Branches Tags
snxraven:main
snxraven:guilds
..
compare: snxraven:9d759e5af37a149d4c0ba53fa4016b083d5e1bc0
Branches Tags
snxraven:main
snxraven:guilds

No commits in common. "94ea9b6840f8430d514c296de6b36e4ceb5a2b17" and "9d759e5af37a149d4c0ba53fa4016b083d5e1bc0" have entirely different histories.
94ea9b6840 ... 9d759e5af3

5 changed files with 498 additions and 1091 deletions
Show Stats Expand all files Collapse all files

1149
app.js
View File

File diff suppressed because it is too large Load Diff

2
chatBot/commands/ping.js
View File

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

84
commands.js
View File

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

187
index.html
View File

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

147
style.css
View File

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