templates — foydalanuvchi interfeysi

<div id="xabarlar"></div>

<form id="forma">
  <input id="savol" placeholder="Savolingizni yozing..." autocomplete="off">
  <button type="submit">Yuborish</button>
</form>

<script>
const forma = document.getElementById('forma');
const xabarlar = document.getElementById('xabarlar');

forma.onsubmit = async (e) => {
  e.preventDefault();
  const savol = document.getElementById('savol').value.trim();
  if (!savol) return;

  qoshish('siz', savol);
  document.getElementById('savol').value = '';

  const kutish = qoshish('bot', 'Javob tayyorlanmoqda...');

  try {
    const javob = await fetch('/api/ask', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({question: savol})
    });

    if (!javob.ok) throw new Error('Server xatosi: ' + javob.status);

    const natija = await javob.json();
    kutish.remove();
    qoshish('bot', natija.answer, natija.sources);

  } catch (xato) {
    kutish.remove();
    qoshish('xato', 'Javob olinmadi: ' + xato.message);
  }
};
</script>

const kutish = qoshish('bot', 'Javob tayyorlanmoqda...');

function qoshish(kim, matn, manbalar) {
  const div = document.createElement('div');
  div.className = 'xabar ' + kim;
  div.textContent = matn;

  if (manbalar && manbalar.length) {
    const m = document.createElement('div');
    m.className = 'manbalar';
    m.textContent = 'Manba: ' + manbalar
      .map(s => `${s.title} (${s.similarity})`)
      .join(', ');
    div.appendChild(m);
  }

  xabarlar.appendChild(div);
  xabarlar.scrollTop = xabarlar.scrollHeight;
  return div;
}

div.textContent = matn;     // XAVFSIZ
div.innerHTML = matn;       // XAVFLI — XSS