// RAG 에이전트 데모 — 프런트엔드
// 좌측에서 질문을 보내고, 응답의 answer 를 대화에, trace 를 우측 패널에 렌더한다.

const f = document.getElementById('f');
const q = document.getElementById('q');
const log = document.getElementById('log');
const tr = document.getElementById('trace');

function addMsg(cls, text) {
  const div = document.createElement('div');
  div.className = 'msg ' + cls;
  div.textContent = text;            // textContent: HTML 주입 방지
  log.appendChild(div);
  log.scrollTop = log.scrollHeight;
}

function renderTrace(trace) {
  if (!trace || !trace.length) return;
  tr.innerHTML = trace.map(s => `
    <div class="step ${s.step.includes('도구') ? 'tool' : ''}">
      <span class="k">${s.step}</span>${s.tool ? ` <code>${s.tool}</code>` : ''}
      <div class="v">${s.text ? s.text : JSON.stringify(s.args || {})}</div>
    </div>`).join('');
}

// 백엔드 POST /ask 에 질문을 보내고 {answer, trace} 를 받아 반환한다.
async function ask(question) {
  const res = await fetch('/ask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question }),
  });
  return await res.json();
}

f.onsubmit = async (e) => {
  e.preventDefault();
  const text = q.value.trim();
  if (!text) return;
  q.value = '';
  addMsg('user', text);
  const data = await ask(text);
  addMsg('bot', data.answer || data.error || '(응답 없음)');
  renderTrace(data.trace);
};
