input.addEventListener('input', function() {
input.style.height = 'auto';
input.style.height = Math.min(input.scrollHeight, 100) + 'px';
});
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
});
sendBtn.addEventListener('click', send);
function showWelcome() {
addBotMessage("Welcome. What would you like to know about Ritual?");
var suggestions = document.createElement('div');
suggestions.className = 'rc-suggestions';
var prompts = [
"What is a Ritual class actually like?",
"How hot is the room?",
"I've never done hot yoga. Where do I start?",
"What should I bring to my first class?"
];
prompts.forEach(function(text) {
var chip = document.createElement('button');
chip.className = 'rc-chip';
chip.textContent = text;
chip.addEventListener('click', function() {
suggestions.remove();
input.value = text;
send();
});
suggestions.appendChild(chip);
});
messagesEl.appendChild(suggestions);
}
function addBotMessage(text) {
var msg = document.createElement('div');
msg.className = 'rc-msg bot';
var label = document.createElement('div');
label.className = 'rc-label';
label.textContent = 'Ritual';
var body = document.createElement('div');
body.textContent = text;
msg.appendChild(label);
msg.appendChild(body);
messagesEl.appendChild(msg);
messagesEl.scrollTop = messagesEl.scrollHeight;
}
function addUserMessage(text) {
var msg = document.createElement('div');
msg.className = 'rc-msg user';
var bubble = document.createElement('div');
bubble.className = 'rc-bubble';
bubble.textContent = text;
msg.appendChild(bubble);
messagesEl.appendChild(msg);
messagesEl.scrollTop = messagesEl.scrollHeight;
}
function showTyping() {
var msg = document.createElement('div');
msg.className = 'rc-msg bot';
msg.innerHTML = '
Ritual
';
messagesEl.appendChild(msg);
messagesEl.scrollTop = messagesEl.scrollHeight;
return msg;
}
async function send() {
var text = input.value.trim();
if (!text || isThinking) return;
isThinking = true;
sendBtn.disabled = true;
addUserMessage(text);
conversation.push({ role: 'user', content: text });
input.value = '';
input.style.height = 'auto';
var typingEl = showTyping();
try {
var res = await fetch(ENDPOINT_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ messages: conversation })
});
var data = await res.json();
typingEl.remove();
if (!res.ok || !data.reply) {
addBotMessage("Something interrupted the connection. Try again in a moment.");
} else {
addBotMessage(data.reply);
conversation.push({ role: 'assistant', content: data.reply });
}
} catch (err) {
typingEl.remove();
addBotMessage("Something interrupted the connection. Try again in a moment.");
} finally {
isThinking = false;
sendBtn.disabled = false;
input.focus();
}
}
})();
