engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
opencompletion.com/templates/chat.html

331 lines
11 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatroom</title>
<!-- Include highlight.js library for syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- Include a highlight.js theme (replace 'default' with your preferred theme) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<!-- Include socket.io for real-time bidirectional event-based communication -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
<!-- Include marked.js for markdown parsing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.2/marked.min.js" integrity="sha512-rfX4p3RNnxdwLT3wWP1K0NR3ztTobn+sISlT9WhxDDK00zNYbQ6MCHA5OHm0hqKAzEMXYCgFrp8iY/ER5MkXqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Include DOMPurify to sanitize HTML and prevent XSS attacks -->
<script src="https://cdn.jsdelivr.net/npm/dompurify@2/dist/purify.min.js"></script>
<!-- Link to the favicon -->
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<style>
/* Basic styling for the chat application */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: grid;
place-items: center;
}
/* Styling for the chat container */
#chat-container {
display: grid;
grid-template-rows: 1fr auto;
width: 100%;
height: 90vh;
background-color: #ffffff;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
/* Styling for the chat area */
#chat {
overflow-y: auto;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
min-width: 400px;
}
/* Styling for the message input area */
#message {
width: 100%;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 5px;
}
/* Styling for individual message wrappers */
.message-wrapper {
display: flex;
align-items: start;
}
/* Styling for the delete button next to messages */
.message-wrapper button {
margin-top: 16px;
margin-right: 8px;
}
/* Styling for paragraphs, used for messages */
p {
margin-top: 8px;
margin-bottom: 8px;
}
/* Styling for the main container that holds the rooms list and chat */
.main-container {
display: grid;
grid-template-columns: 20% 80%; /* Adjust the 20% as needed */
width: 100%;
height: 90vh;
}
/* Styling for the rooms list */
#rooms-list {
border-right: 1px solid #e1e1e1;
overflow-y: auto;
}
/* Styling for the unordered list in the rooms list */
#rooms-list ul {
list-style: none; /* Removes default list styling */
padding: 0; /* Resets default padding */
margin: 0; /* Resets default margin */
}
/* Styling for list items in the rooms list */
#rooms-list li {
margin-bottom: 10px; /* Adds space between items */
padding: 5px; /* Adds padding inside each item */
border: 1px solid #e1e1e1; /* Adds a border around each item */
border-radius: 5px; /* Optional: Rounds the corners of the border */
}
/* Styling for links in the rooms list */
#rooms-list a {
text-decoration: none; /* Optional: Removes underline from links */
color: inherit; /* Optional: Ensures link color matches the text color */
}
</style>
</head>
<body>
<div class="main-container">
<div id="rooms-list">
<ul>
<!-- Loop through rooms and create list items for each room -->
{% for room in rooms %}
<a href="{{ url_for('chat', room_name=room.name) }}?username={{ username }}">
<li>
<!-- Display the room title if available, otherwise the room name -->
{{ room.title if room.title else room.name }}
</li>
</a>
{% endfor %}
</ul>
</div>
<div id="chat-container">
<!-- Chat area where messages will be displayed -->
<div id="chat"></div>
<!-- Form for sending messages -->
<form id="message-form">
<textarea id="message" rows="4" placeholder="Type your message..."></textarea>
</form>
</div>
</div>
<script>
// Connect to the server using socket.io
const socket = io.connect("http://" + document.domain + ":" + location.port);
// Retrieve username and room name from the URL parameters
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get("username");
const room_name = "{{ room_name }}";
// Configuration for DOMPurify to specify which tags and attributes are allowed
const dompurify_config = {
ADD_TAGS: ["iframe", "img"],
FORBID_TAGS: ["form"],
ALLOWED_ATTR: [
"src", "width", "height", "frameborder", "allowfullscreen",
"alt", "class", "title", "style"
]
};
// Function to handle sending the message
function sendMessage() {
const message = document.getElementById("message").value;
if (message.trim() !== "") { // Ensure we're not sending empty messages
socket.emit("message", {"username": username, "message": message, "room_name": room_name});
document.getElementById("message").value = "";
}
}
// Function to handle deleting a message
function deleteMessage(messageId, room_name) {
socket.emit("delete_message", {"message_id": messageId, "room_name": room_name});
}
// Event listener for form submission to send a message
document.getElementById("message-form").addEventListener("submit", (e) => {
e.preventDefault();
sendMessage();
});
// Event listener for the Enter key press in the textarea to send a message
document.getElementById("message").addEventListener("keydown", function(e) {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// Socket event for updating the room title
socket.on("update_room_title", (data) => {
document.title = data.title; // Update the window's title
});
// Socket event when the user connects
socket.on("connect", () => {
socket.emit("join", {"username": username, "room_name": room_name});
});
// Socket event for receiving a new message
socket.on("message", (data) => {
const messageWrapper = document.createElement("div");
messageWrapper.className = "message-wrapper";
messageWrapper.id = "message-" + data.id;
const newMessage = document.createElement("p");
newMessage.innerHTML = DOMPurify.sanitize(marked.marked(data.content), dompurify_config);
// Check if the message is NOT a join notification
if (!data.content.includes("has joined the room.") && !data.content.includes("Processing...")) {
// Create the delete button
const deleteButton = document.createElement("button");
deleteButton.innerHTML = "x";
deleteButton.onclick = () => deleteMessage(data.id, room_name);
messageWrapper.appendChild(deleteButton);
}
messageWrapper.appendChild(newMessage);
document.getElementById("chat").appendChild(messageWrapper);
// Apply syntax highlighting to code blocks within the message
newMessage.querySelectorAll("pre code").forEach((block) => {
hljs.highlightElement(block);
});
// Scroll to the bottom of the chat container
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
});
// Socket event for receiving previous messages
socket.on("previous_messages", (data) => {
const messageWrapper = document.createElement("div");
messageWrapper.className = "message-wrapper";
messageWrapper.id = "message-" + data.id;
const newMessage = document.createElement("p");
newMessage.innerHTML = DOMPurify.sanitize(marked.marked(`**${data.username}:**\n\n${data.message}`), dompurify_config);
// Create the delete button
const deleteButton = document.createElement("button");
deleteButton.innerHTML = "x";
deleteButton.onclick = () => deleteMessage(data.id, room_name);
messageWrapper.appendChild(deleteButton);
messageWrapper.appendChild(newMessage);
document.getElementById("chat").appendChild(messageWrapper);
// Apply syntax highlighting to code blocks within the message
newMessage.querySelectorAll("pre code").forEach((block) => {
hljs.highlightElement(block);
});
});
// Socket event for deleting a processing message
socket.on("delete_processing_message", (msg_id) => {
const tempMessages = document.querySelectorAll("#message-null");
tempMessages.forEach((tempMessage) => {
tempMessage.remove();
});
// Clear the message buffer for the corresponding message ID
delete messageBuffers[msg_id];
});
// A dictionary to hold buffers for each message ID
const messageBuffers = {};
// Socket event for receiving chunks of a message
socket.on("message_chunk", (data) => {
const wrapperId = "message-" + data.id;
let messageWrapper = document.getElementById(wrapperId);
let targetMessageElement;
// If the message wrapper doesn't exist, it's an initial chunk
if (!messageWrapper) {
messageWrapper = document.createElement("div");
messageWrapper.className = "message-wrapper";
messageWrapper.id = wrapperId;
document.getElementById("chat").appendChild(messageWrapper);
// Create the "x" button for deletion
const deleteButton = document.createElement("button");
deleteButton.innerHTML = "x";
deleteButton.onclick = () => deleteMessage(data.id, room_name);
messageWrapper.appendChild(deleteButton);
// Create the p element to hold the message content
targetMessageElement = document.createElement("p");
messageWrapper.appendChild(targetMessageElement);
} else {
// If the wrapper already exists, get the p element inside it
targetMessageElement = messageWrapper.querySelector("p");
}
// If the message buffer for this ID doesn't exist, create it
if (!messageBuffers[data.id]) {
messageBuffers[data.id] = "";
}
// Append the chunk to the buffer
messageBuffers[data.id] += data.content;
// Process the entire buffer with marked and set it as the content of the target element
targetMessageElement.innerHTML = DOMPurify.sanitize(marked.marked(messageBuffers[data.id]), dompurify_config);
// Apply syntax highlighting to code blocks within the content
targetMessageElement.querySelectorAll("pre code").forEach((block) => {
hljs.highlightElement(block);
});
// Scroll to the bottom of the chat container
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
});
// Socket event for when a message is deleted
socket.on("message_deleted", (data) => {
const messageElement = document.getElementById("message-" + data.message_id);
if (messageElement) {
messageElement.remove();
}
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink