124 lines
3.8 KiB
JavaScript
124 lines
3.8 KiB
JavaScript
const statusEl = document.getElementById("status");
|
|
const messagesEl = document.getElementById("messages");
|
|
const formEl = document.getElementById("chat-form");
|
|
const inputEl = document.getElementById("chat-input");
|
|
const settingsToggle = document.getElementById("settings-toggle");
|
|
const settingsDrawer = document.getElementById("settings-drawer");
|
|
const settingsClose = document.getElementById("settings-close");
|
|
const rangeInputs = settingsDrawer
|
|
? Array.from(settingsDrawer.querySelectorAll("input[type='range']"))
|
|
: [];
|
|
|
|
const scheme = window.location.protocol === "https:" ? "wss" : "ws";
|
|
const socketUrl = `${scheme}://${window.location.host}/ws`;
|
|
let socket;
|
|
let streamingBubble = null;
|
|
|
|
const addMessage = (text, direction) => {
|
|
const bubble = document.createElement("div");
|
|
bubble.className = `message message--${direction}`;
|
|
bubble.textContent = text;
|
|
messagesEl.appendChild(bubble);
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
};
|
|
|
|
const connect = () => {
|
|
socket = new WebSocket(socketUrl);
|
|
|
|
socket.addEventListener("open", () => {
|
|
statusEl.textContent = "Connected";
|
|
});
|
|
|
|
socket.addEventListener("message", (event) => {
|
|
let payload;
|
|
try {
|
|
payload = JSON.parse(event.data);
|
|
} catch (error) {
|
|
addMessage(event.data, "in");
|
|
return;
|
|
}
|
|
|
|
if (payload.type === "start") {
|
|
streamingBubble = document.createElement("div");
|
|
streamingBubble.className = "message message--in";
|
|
streamingBubble.textContent = "";
|
|
messagesEl.appendChild(streamingBubble);
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
return;
|
|
}
|
|
|
|
if (payload.type === "chunk") {
|
|
if (!streamingBubble) {
|
|
streamingBubble = document.createElement("div");
|
|
streamingBubble.className = "message message--in";
|
|
messagesEl.appendChild(streamingBubble);
|
|
}
|
|
streamingBubble.textContent += payload.data ?? "";
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
return;
|
|
}
|
|
|
|
if (payload.type === "end") {
|
|
streamingBubble = null;
|
|
return;
|
|
}
|
|
});
|
|
|
|
socket.addEventListener("close", () => {
|
|
statusEl.textContent = "Disconnected";
|
|
});
|
|
|
|
socket.addEventListener("error", () => {
|
|
statusEl.textContent = "Connection error";
|
|
});
|
|
};
|
|
|
|
const updateDrawerValue = (input) => {
|
|
const output = input.parentElement?.querySelector(".drawer__value");
|
|
if (!output) return;
|
|
output.textContent = input.value;
|
|
};
|
|
|
|
rangeInputs.forEach((input) => {
|
|
updateDrawerValue(input);
|
|
input.addEventListener("input", () => updateDrawerValue(input));
|
|
});
|
|
|
|
const closeDrawer = () => {
|
|
settingsDrawer?.classList.remove("drawer--open");
|
|
if (settingsDrawer) settingsDrawer.setAttribute("aria-hidden", "true");
|
|
if (settingsToggle) settingsToggle.setAttribute("aria-expanded", "false");
|
|
};
|
|
|
|
const openDrawer = () => {
|
|
settingsDrawer?.classList.add("drawer--open");
|
|
if (settingsDrawer) settingsDrawer.setAttribute("aria-hidden", "false");
|
|
if (settingsToggle) settingsToggle.setAttribute("aria-expanded", "true");
|
|
};
|
|
|
|
settingsToggle?.addEventListener("click", () => {
|
|
if (settingsDrawer?.classList.contains("drawer--open")) {
|
|
closeDrawer();
|
|
} else {
|
|
openDrawer();
|
|
}
|
|
});
|
|
|
|
settingsClose?.addEventListener("click", closeDrawer);
|
|
|
|
formEl.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
const text = inputEl.value.trim();
|
|
if (!text) return;
|
|
if (!socket || socket.readyState !== WebSocket.OPEN) {
|
|
addMessage("Not connected.", "in");
|
|
return;
|
|
}
|
|
addMessage(text, "out");
|
|
socket.send(text);
|
|
inputEl.value = "";
|
|
inputEl.focus();
|
|
});
|
|
|
|
connect();
|