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

Update

Browse Source
This commit is contained in:
Raven Scott 2024-06-04 00:26:32 -04:00
parent 7ba32ea7c0
commit b62636ed0e
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app.js
View File

@ -6,7 +6,6 @@ import Localdrive from 'localdrive';
import fs from 'fs';
import Hyperdrive from 'hyperdrive';
import Corestore from 'corestore';
const store = new Corestore('./storage');
const drive = new Hyperdrive(store);
@ -236,8 +235,13 @@ function sendMessage(e) {
}
}
// appends element to #messages element with content set to sender and message
function scrollToBottom() {
var container = document.getElementById("messages-container");
container.scrollTop = container.scrollHeight;
}
function onMessageAdded(from, message, avatar) {
const $div = document.createElement('div');
$div.classList.add('message');
@ -255,21 +259,18 @@ function onMessageAdded(from, message, avatar) {
const $text = document.createElement('div');
$text.classList.add('message-text');
// Split message by line breaks and create a new paragraph for each line
const lines = message.split('\n');
lines.forEach(line => {
const $line = document.createElement('p');
$line.textContent = line;
$text.appendChild($line);
});
// Render Markdown content
const md = window.markdownit();
$text.innerHTML = md.render(message);
$content.appendChild($header);
$content.appendChild($text);
$div.appendChild($content);
document.querySelector('#messages').appendChild($div);
}
scrollToBottom();
}
async function updateIcon(username, avatarBuffer) {
// Update the icon in the local HTML if necessary
// This can be adjusted as per your needs

3
index.html
View File

@ -6,6 +6,7 @@
<title>LinkUp</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="./app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
</head>
<body>
<header>
@ -53,7 +54,9 @@
<!-- User list will be populated here -->
</div>
</div>
<div id="messages-container">
<div id="messages"></div>
</div>
<form id="message-form">
<textarea id="message" rows="4"></textarea>
<input type="submit" value="Send" />

1
package.json
View File

@ -27,6 +27,7 @@
"hyperdrive": "^11.8.1",
"hyperswarm": "^4.7.14",
"localdrive": "^1.11.4",
"marked": "^12.0.2",
"serve-drive": "^5.0.8"
}
}

5
style.css
View File

@ -12,6 +12,11 @@ body {
transition: background-color 0.3s ease, color 0.3s ease;
}
#messages-container {
height: 45vh; /* Adjust as needed */
overflow-y: auto;
}
/* Header styles */
header {
display: flex;