MiTask/LinkUp-P2P-Chat
1
0
Fork 0
forked from snxraven/LinkUp-P2P-Chat
Code Pull Requests 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 fs from 'fs';
import Hyperdrive from 'hyperdrive'; import Hyperdrive from 'hyperdrive';
import Corestore from 'corestore'; import Corestore from 'corestore';
const store = new Corestore('./storage'); const store = new Corestore('./storage');
const drive = new Hyperdrive(store); 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) { function onMessageAdded(from, message, avatar) {
const $div = document.createElement('div'); const $div = document.createElement('div');
$div.classList.add('message'); $div.classList.add('message');
@ -255,21 +259,18 @@ function onMessageAdded(from, message, avatar) {
const $text = document.createElement('div'); const $text = document.createElement('div');
$text.classList.add('message-text'); $text.classList.add('message-text');
// Split message by line breaks and create a new paragraph for each line // Render Markdown content
const lines = message.split('\n'); const md = window.markdownit();
lines.forEach(line => { $text.innerHTML = md.render(message);
const $line = document.createElement('p');
$line.textContent = line;
$text.appendChild($line);
});
$content.appendChild($header); $content.appendChild($header);
$content.appendChild($text); $content.appendChild($text);
$div.appendChild($content); $div.appendChild($content);
document.querySelector('#messages').appendChild($div); document.querySelector('#messages').appendChild($div);
} scrollToBottom();
}
async function updateIcon(username, avatarBuffer) { async function updateIcon(username, avatarBuffer) {
// Update the icon in the local HTML if necessary // Update the icon in the local HTML if necessary
// This can be adjusted as per your needs // This can be adjusted as per your needs

3
index.html
View File

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

1
package.json
View File

@ -27,6 +27,7 @@
"hyperdrive": "^11.8.1", "hyperdrive": "^11.8.1",
"hyperswarm": "^4.7.14", "hyperswarm": "^4.7.14",
"localdrive": "^1.11.4", "localdrive": "^1.11.4",
"marked": "^12.0.2",
"serve-drive": "^5.0.8" "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; transition: background-color 0.3s ease, color 0.3s ease;
} }
#messages-container {
height: 45vh; /* Adjust as needed */
overflow-y: auto;
}
/* Header styles */ /* Header styles */
header { header {
display: flex; display: flex;