98 lines
2.3 KiB
JavaScript
98 lines
2.3 KiB
JavaScript
const welcomeScreen = document.getElementById("welcomeScreen");
|
|
const chatScreen = document.getElementById("chatScreen");
|
|
const chatMessages = document.getElementById("chatMessages");
|
|
const welcomeInput = document.getElementById("welcomeInput");
|
|
const chatInput = document.getElementById("chatInput");
|
|
|
|
let isInChat = false;
|
|
|
|
function switchToChat() {
|
|
welcomeScreen.classList.add("hidden");
|
|
chatScreen.classList.remove("hidden");
|
|
chatInput.focus();
|
|
isInChat = true;
|
|
}
|
|
|
|
function addMessage(text, type = "user") {
|
|
const msg = document.createElement("div");
|
|
msg.className = `message ${type}`;
|
|
msg.innerHTML = `<div class="message-text">${escapeHtml(text)}</div>`;
|
|
chatMessages.appendChild(msg);
|
|
scrollToBottom();
|
|
}
|
|
|
|
function showTyping() {
|
|
const typing = document.createElement("div");
|
|
typing.className = "message assistant";
|
|
typing.id = "typing";
|
|
typing.innerHTML = `
|
|
<div class="message-text">
|
|
<div class="typing">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
chatMessages.appendChild(typing);
|
|
scrollToBottom();
|
|
}
|
|
|
|
function hideTyping() {
|
|
const typing = document.getElementById("typing");
|
|
if (typing) typing.remove();
|
|
}
|
|
|
|
function scrollToBottom() {
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function sendMessage(text) {
|
|
if (!text.trim()) return;
|
|
|
|
if (!isInChat) {
|
|
switchToChat();
|
|
}
|
|
|
|
addMessage(text, "user");
|
|
chatInput.value = "";
|
|
chatInput.disabled = true;
|
|
|
|
showTyping();
|
|
|
|
setTimeout(() => {
|
|
hideTyping();
|
|
addMessage(
|
|
"I'm DevDen - your AI assistant. Soon I'll be connected to your knowledge base!",
|
|
"assistant",
|
|
);
|
|
chatInput.disabled = false;
|
|
chatInput.focus();
|
|
}, 1000);
|
|
}
|
|
|
|
// Welcome screen input handler
|
|
welcomeInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
const text = welcomeInput.value.trim();
|
|
if (text) {
|
|
sendMessage(text);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Chat input handler
|
|
chatInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
sendMessage(chatInput.value);
|
|
}
|
|
});
|