static/script.js

// // Handle the chat interaction
// let history = [];

// // Function to handle the submission of messages in the chat
// function sendMessage() {
//     const message = document.getElementById('user-input').value;

//     // Display the user message
//     const userMessage = {
//         role: 'user',
//         content: message
//     };

//     history.push(userMessage);

//     // Display the user message in the chat history
//     const chatHistoryDiv = document.getElementById('chat-history');
//     const userMessageDiv = document.createElement('div');
//     userMessageDiv.classList.add('chat-message', 'user');
//     userMessageDiv.innerHTML = `<p><strong>User:</strong> ${message}</p>`;
//     chatHistoryDiv.appendChild(userMessageDiv);

//     // Clear the input field
//     document.getElementById('user-input').value = '';

//     // Send the message to the server for OpenAI processing
//     fetch('/chat', {
//         method: 'POST',
//         headers: {
//             'Content-Type': 'application/json',
//         },
//         body: JSON.stringify({
//             message: message,
//             history: history
//         })
//     })
//     .then(response => response.json())
//     .then(data => {
//         // Get the bot's response from OpenAI
//         const botMessage = data.bot_response;

//         // Display the bot message
//         const botMessageDiv = document.createElement('div');
//         botMessageDiv.classList.add('chat-message', 'assistant');
//         botMessageDiv.innerHTML = `<p><strong>Assistant:</strong> ${botMessage}</p>`;
//         chatHistoryDiv.appendChild(botMessageDiv);

//         // Scroll to the bottom of the chat history
//         chatHistoryDiv.scrollTop = chatHistoryDiv.scrollHeight;
//     })
//     .catch(error => {
//         console.error('Error:', error);
//     });
// }

// // Event listener for the send button
// document.getElementById('send-btn').addEventListener('click', sendMessage);

// // Allow Enter key to send the message
// document.getElementById('user-input').addEventListener('keypress', function(event) {
//     if (event.key === 'Enter') {
//         sendMessage();
//     }
// });
// static/script.js

// const chat = document.getElementById('chat-history');
// const input = document.getElementById('user-input');
// const btn   = document.getElementById('send-btn');
// const form  = document.getElementById('chat-form');

// function scrollToBottom() {
//   chat.scrollTop = chat.scrollHeight;
// }

// function addMessage(role, text) {
//   const wrap = document.createElement('div');
//   wrap.className = `chat-message ${role}`;

//   const p = document.createElement('p');
//   const strong = document.createElement('strong');
//   strong.textContent = role === 'user' ? 'User: ' : 'Assistant: ';

//   const span = document.createElement('span');
//   span.textContent = text;

//   p.appendChild(strong);
//   p.appendChild(span);
//   wrap.appendChild(p);
//   chat.appendChild(wrap);
//   scrollToBottom();
// }

// function addTyping() {
//   const wrap = document.createElement('div');
//   wrap.id = 'typing';
//   wrap.className = 'chat-message assistant';
//   const p = document.createElement('p');
//   const strong = document.createElement('strong');
//   strong.textContent = 'Assistant: ';
//   const span = document.createElement('span');
//   span.textContent = 'typing…';
//   p.appendChild(strong);
//   p.appendChild(span);
//   wrap.appendChild(p);
//   chat.appendChild(wrap);
//   scrollToBottom();
// }

// function removeTyping() {
//   const t = document.getElementById('typing');
//   if (t) t.remove();
// }

// async function sendMessage() {
//   const msg = (input.value || '').trim();
//   if (!msg) return;

//   // Show user message immediately
//   addMessage('user', msg);
//   input.value = '';
//   input.disabled = true;
//   btn.disabled = true;
//   addTyping();

//   try {
//     const res = await fetch('/message', {
//       method: 'POST',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify({ message: msg })
//     });

//     const data = await res.json();
//     removeTyping();

//     if (!res.ok) {
//       addMessage('assistant', data.error || 'Something went wrong.');
//       return;
//     }

//     const reply = data.reply || data.bot_response || '…';
//     addMessage('assistant', reply);
//   } catch (err) {
//     console.error(err);
//     removeTyping();
//     addMessage('assistant', 'Network error. Please try again.');
//   } finally {
//     input.disabled = false;
//     btn.disabled = false;
//     input.focus();
//   }
// }

// // Wire up events
// if (btn) btn.addEventListener('click', sendMessage);
// if (form) {
//   form.addEventListener('submit', (e) => {
//     e.preventDefault();
//     sendMessage();
//   });
// }
// if (input) {
//   input.addEventListener('keydown', (e) => {
//     if (e.key === 'Enter') {
//       e.preventDefault(); // prevent form submit refresh
//       sendMessage();
//     }
//   });
// }
// Elements
// const chat  = document.getElementById('chat-history');
// const form  = document.getElementById('chat-form');
// const input = document.getElementById('user-input');
// const btn   = document.getElementById('send-btn');

// function scrollToBottom(){ if (chat) chat.scrollTop = chat.scrollHeight; }

// function addMessage(role, text){
//   const wrap = document.createElement('div');
//   wrap.className = `chat-message ${role}`;
//   const p = document.createElement('p');

//   const who = document.createElement('strong');
//   who.textContent = role === 'user' ? 'User: ' : 'Assistant: ';

//   const span = document.createElement('span');
//   span.textContent = text;

//   p.appendChild(who);
//   p.appendChild(span);
//   wrap.appendChild(p);
//   chat.appendChild(wrap);
//   scrollToBottom();
// }

// function addTyping(){
//   if (document.getElementById('typing')) return;
//   const wrap = document.createElement('div');
//   wrap.id = 'typing';
//   wrap.className = 'chat-message assistant';
//   const p = document.createElement('p');
//   p.innerHTML = '<strong>Assistant: </strong><span>typing…</span>';
//   wrap.appendChild(p);
//   chat.appendChild(wrap);
//   scrollToBottom();
// }
// function removeTyping(){ const t = document.getElementById('typing'); if (t) t.remove(); }

// async function sendMessage(){
//   const msg = (input.value || '').trim();
//   if (!msg) return;

//   addMessage('user', msg);
//   input.value = '';
//   input.disabled = true;
//   btn.disabled = true;
//   addTyping();

//   try{
//     const res = await fetch('/message', {
//       method: 'POST',
//       headers: {'Content-Type':'application/json'},
//       body: JSON.stringify({ message: msg })
//     });
//     const data = await res.json();
//     removeTyping();

//     if (!res.ok) {
//       addMessage('assistant', data.error || 'Server error.');
//     } else {
//       addMessage('assistant', data.reply || data.bot_response || '…');
//     }
//   }catch(e){
//     console.error(e);
//     removeTyping();
//     addMessage('assistant', 'Network error.');
//   }finally{
//     input.disabled = false;
//     btn.disabled = false;
//     input.focus();
//   }
// }

// btn?.addEventListener('click', sendMessage);
// form?.addEventListener('submit', (e)=>{ e.preventDefault(); sendMessage(); });

// // Scroll to bottom on load if history exists
// scrollToBottom();
console.log('[chat] script.js loaded at', new Date().toISOString());
const chat  = document.getElementById('chat-history');
const form  = document.getElementById('chat-form');
const input = document.getElementById('user-input');
const btn   = document.getElementById('send-btn');

function scrollToBottom(){ if (chat) chat.scrollTop = chat.scrollHeight; }

function addMessage(role, text){
  const wrap = document.createElement('div');
  wrap.className = `chat-message ${role}`;
  const bubble = document.createElement('div');
  bubble.className = 'bubble';

  const who = document.createElement('div');
  who.className = 'label';
  who.textContent = role === 'user' ? 'You' : 'Assistant';

  const body = document.createElement('div');
  body.className = 'text';
  body.textContent = text;

  bubble.appendChild(who);
  bubble.appendChild(body);
  wrap.appendChild(bubble);
  chat.appendChild(wrap);
  chat.classList.add('has-messages');
  scrollToBottom();
}


function addTyping(){
  if (document.getElementById('typing')) return;
  const wrap = document.createElement('div');
  wrap.id = 'typing';
  wrap.className = 'chat-message assistant';
  const bubble = document.createElement('div');
  bubble.className = 'bubble';
  bubble.innerHTML = '<div class="label">Assistant</div><div class="text">typing…</div>';
  wrap.appendChild(bubble);
  chat.appendChild(wrap);
  scrollToBottom();
}
function removeTyping(){ const t = document.getElementById('typing'); if (t) t.remove(); }

async function sendMessage(){
  const msg = (input.value || '').trim();
  if (!msg) return;

  addMessage('user', msg);
  input.value = '';
  input.disabled = true;
  btn.disabled = true;
  addTyping();

  try{
    console.log('[chat] POST message', { message: msg });
    const res = await fetch('message', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      credentials: 'same-origin',
      body: JSON.stringify({ message: msg })
    });

    let data;
    try {
      data = await res.json();
    } catch (e) {
      console.error('[chat] Failed to parse JSON', e);
      removeTyping();
      addMessage('assistant', 'Server returned non-JSON response.');
      return;
    }

    console.log('[chat] /message response', res.status, data);
    removeTyping();

    if (!res.ok) {
      addMessage('assistant', data.error || `Server error (${res.status}).`);
    } else {
      addMessage('assistant', data.reply || data.bot_response || '…');
    }
  }catch(e){
    console.error('[chat] network error', e);
    removeTyping();
    addMessage('assistant', 'Network error.');
  }finally{
    input.disabled = false;
    btn.disabled = false;
    input.focus();
  }
}

btn?.addEventListener('click', sendMessage);
form?.addEventListener('submit', (e)=>{ e.preventDefault(); sendMessage(); });

// Scroll to bottom on load if history exists
scrollToBottom();
console.log('[chat] script loaded');