${escapeHtml(sender)}
${timeStr}
${escapeHtml(msg.content)}
`;
stream.appendChild(row);
if (scroll) {
scrollToBottom();
}
}
function scrollToBottom() {
const stream = document.getElementById("messageStream");
stream.scrollTop = stream.scrollHeight;
}
function sendMessage(e) {
e.preventDefault();
const input = document.getElementById("chatInput");
const text = input.value.trim();
if (!text) return;
const payload = {
channel: currentChannel,
sender: currentUser,
content: text,
type: "message",
timestamp: new Date().toISOString()
};
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(payload));
input.value = "";
} else {
// Fallback via HTTP API if WS is disconnected
fetch("/api/chat/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
}).then(() => {
input.value = "";
loadMessages();
});
}
}
// Modal handling
function openModal() {
document.getElementById("channelModal").style.display = "flex";
document.getElementById("newChannelName").value = "";
document.getElementById("newChannelTopic").value = "";
document.getElementById("newChannelName").focus();
}
function closeModal() {
document.getElementById("channelModal").style.display = "none";
}
async function handleCreateChannel(e) {
e.preventDefault();
const name = document.getElementById("newChannelName").value.trim().toLowerCase();
const topic = document.getElementById("newChannelTopic").value.trim();
if (!name) return;
try {
const res = await fetch("/api/chat/channels", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, topic, created_by: currentUser })
});
if (res.ok) {
closeModal();
await loadChannels();
switchChannel(name);
}
} catch (err) {
alert("Error creating channel: " + err.message);
}
}
function escapeHtml(str) {
return (str || "").replace(/[&<>"']/g, function (m) {
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[m];
});
}
// Init
document.addEventListener("DOMContentLoaded", async () => {
setLang(currentLang);
document.getElementById("btnDe").addEventListener("click", () => setLang("de"));
document.getElementById("btnEn").addEventListener("click", () => setLang("en"));
const userField = document.getElementById("usernameInput");
userField.value = currentUser;
userField.addEventListener("change", (e) => {
currentUser = e.target.value.trim() || "admin";
localStorage.setItem("benzcloud_chat_user", currentUser);
connectWS();
});
document.getElementById("chatForm").addEventListener("submit", sendMessage);
document.getElementById("btnNewChannel").addEventListener("click", openModal);
document.getElementById("btnCloseModal").addEventListener("click", closeModal);
document.getElementById("btnCancelChannel").addEventListener("click", closeModal);
document.getElementById("newChannelForm").addEventListener("submit", handleCreateChannel);
await loadChannels();
await loadMessages();
connectWS();
});