// API base URL - use relative path to work from any host

const API_URL = '/api';

// Global state

let currentSessionId = null;

// DOM elements

let chatMessages, chatInput, sendButton, totalCourses, courseTitles, newChatButton, themeToggle;

// Initialize

document.addEventListener('DOMContentLoaded', () => {

// Get DOM elements after page loads

chatMessages = document.getElementById('chatMessages');

chatInput = document.getElementById('chatInput');

sendButton = document.getElementById('sendButton');

totalCourses = document.getElementById('totalCourses');

courseTitles = document.getElementById('courseTitles');

newChatButton = document.getElementById('newChatButton');

themeToggle = document.getElementById('themeToggle');

setupEventListeners();

initializeTheme();

createNewSession();

loadCourseStats();

});

// Event Listeners

function setupEventListeners() {

// Chat functionality

sendButton.addEventListener('click', sendMessage);

chatInput.addEventListener('keypress', (e) => {

if (e.key === 'Enter') sendMessage();

});

// New chat button

newChatButton.addEventListener('click', startNewChat);

// Theme toggle

themeToggle.addEventListener('click', toggleTheme);

// Keyboard shortcut for theme toggle (Ctrl/Cmd + Shift + T)

document.addEventListener('keydown', (e) => {

if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'T') {

e.preventDefault();

toggleTheme();

}

});

// Suggested questions

document.querySelectorAll('.suggested-item').forEach(button => {

button.addEventListener('click', (e) => {

const question = e.target.getAttribute('data-question');

chatInput.value = question;

sendMessage();

});

});

}

// Chat Functions

async function sendMessage() {

const query = chatInput.value.trim();

if (!query) return;

// Disable input

chatInput.value = '';

chatInput.disabled = true;

sendButton.disabled = true;

// Add user message

addMessage(query, 'user');

// Add loading message - create a unique container for it

const loadingMessage = createLoadingMessage();

chatMessages.appendChild(loadingMessage);

chatMessages.scrollTop = chatMessages.scrollHeight;

try {

const response = await fetch(`${API_URL}/query`, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({

query: query,

session_id: currentSessionId

})

});

if (!response.ok) throw new Error('Query failed');

const data = await response.json();

// Update session ID if new

if (!currentSessionId) {

currentSessionId = data.session_id;

}

// Replace loading message with response

loadingMessage.remove();

addMessage(data.answer, 'assistant', data.sources, data.source_links);

} catch (error) {

// Replace loading message with error

loadingMessage.remove();

addMessage(`Error: ${error.message}`, 'assistant');

} finally {

chatInput.disabled = false;

sendButton.disabled = false;

chatInput.focus();

}

}

function createLoadingMessage() {

const messageDiv = document.createElement('div');

messageDiv.className = 'message assistant';

messageDiv.innerHTML = `

<div class="message-content">

<div class="loading">

<span></span>

<span></span>

<span></span>

</div>

</div>

`;

return messageDiv;

}

function addMessage(content, type, sources = null, sourceLinks = null, isWelcome = false) {

const messageId = Date.now();

const messageDiv = document.createElement('div');

messageDiv.className = `message ${type}${isWelcome ? ' welcome-message' : ''}`;

messageDiv.id = `message-${messageId}`;

// Convert markdown to HTML for assistant messages

const displayContent = type === 'assistant' ? marked.parse(content) : escapeHtml(content);

let html = `<div class="message-content">${displayContent}</div>`;

if (sources && sources.length > 0) {

// Create sources with clickable links when available

const sourcesHtml = sources.map((source, index) => {

const link = sourceLinks && sourceLinks[index];

if (link) {

return `<a href="${link}" target="_blank" class="source-link">${source}</a>`;

} else {

return source;

}

}).join(', ');

html += `

<details class="sources-collapsible">

<summary class="sources-header">Sources</summary>

<div class="sources-content">${sourcesHtml}</div>

</details>

`;

}

messageDiv.innerHTML = html;

chatMessages.appendChild(messageDiv);

chatMessages.scrollTop = chatMessages.scrollHeight;

return messageId;

}

// Helper function to escape HTML for user messages

function escapeHtml(text) {

const div = document.createElement('div');

div.textContent = text;

return div.innerHTML;

}

// Removed removeMessage function - no longer needed since we handle loading differently

async function startNewChat() {

// Clear the current session on backend if exists

if (currentSessionId) {

try {

await fetch(`${API_URL}/clear-session`, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({

session_id: currentSessionId

})

});

} catch (error) {

console.error('Error clearing session:', error);

// Continue with frontend cleanup even if backend fails

}

}

// Clear frontend state and UI

await createNewSession();

}

async function createNewSession() {

currentSessionId = null;

chatMessages.innerHTML = '';

chatInput.value = '';

chatInput.disabled = false;

sendButton.disabled = false;

addMessage('Welcome to the Course Materials Assistant! I can help you with questions about courses, lessons and specific content. What would you like to know?', 'assistant', null, null, true);

}

// Load course statistics

async function loadCourseStats() {

try {

console.log('Loading course stats...');

const response = await fetch(`${API_URL}/courses`);

if (!response.ok) throw new Error('Failed to load course stats');

const data = await response.json();

console.log('Course data received:', data);

// Update stats in UI

if (totalCourses) {

totalCourses.textContent = data.total_courses;

}

// Update course titles

if (courseTitles) {

if (data.course_titles && data.course_titles.length > 0) {

courseTitles.innerHTML = data.course_titles

.map(title => `<div class="course-title-item">${title}</div>`)

.join('');

} else {

courseTitles.innerHTML = '<span class="no-courses">No courses available</span>';

}

}

} catch (error) {

console.error('Error loading course stats:', error);

// Set default values on error

if (totalCourses) {

totalCourses.textContent = '0';

}

if (courseTitles) {

courseTitles.innerHTML = '<span class="error">Failed to load courses</span>';

}

}

}

// Theme Functions

function initializeTheme() {

// Get saved theme preference or default to dark

const savedTheme = localStorage.getItem('theme') || 'dark';

setTheme(savedTheme);

}

function toggleTheme() {

const currentTheme = document.documentElement.getAttribute('data-theme');

const newTheme = currentTheme === 'light' ? 'dark' : 'light';

setTheme(newTheme);

}

function setTheme(theme) {

if (theme === 'light') {

document.documentElement.setAttribute('data-theme', 'light');

themeToggle.setAttribute('aria-label', 'Switch to dark theme');

} else {

document.documentElement.removeAttribute('data-theme');

themeToggle.setAttribute('aria-label', 'Switch to light theme');

}

// Save theme preference

localStorage.setItem('theme', theme);

}