<!-- B21 Bible Bot Widget for Webnode (frontend) + WordPress (backend API) -->

<div>

<button>

Bible Chat

</button>

<div>

<!-- Header -->

<div>

<div>

<div>Bible21 • jen Písmo</div>

<button>×</button>

</div>

<div>

Jen Písmo • Bible21 • Písmo vykládá Písmo

</div>

</div>

<!-- Log -->

<div></div>

<!-- Composer -->

<div>

<input placeholder="Napiš otázku…" />

<button>

Send

</button>

</div>

</div>

</div>

<script>

(function(){

// ✅ SET THIS to your WordPress domain (where the plugin runs)

const API_BASE = "https://TVUJ-WORDPRESS-WEB.cz"; // ← změň na tvoji doménu

const ENDPOINT_ASK = API_BASE + "/wp-json/b21bot/v1/ask";

const ENDPOINT_HELLO = API_BASE + "/wp-json/b21bot/v1/hello";

const openBtn = document.getElementById('b21-open');

const closeBtn = document.getElementById('b21-close');

const panel = document.getElementById('b21-panel');

const log = document.getElementById('b21-log');

const input = document.getElementById('b21-input');

const send = document.getElementById('b21-send');

const mottoEl = document.getElementById('b21-motto');

let helloShown = false;

let currentLang = "cs"; // default

function addBubble(text, who){

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

row.style.margin = "8px 0";

row.style.display = "flex";

row.style.justifyContent = (who === "me") ? "flex-end" : "flex-start";

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

b.style.maxWidth = "88%";

b.style.whiteSpace = "pre-wrap";

b.style.padding = "10px 12px";

b.style.borderRadius = "12px";

b.style.border = "1px solid #e5e5e5";

b.style.background = (who === "me") ? "#111" : "#fff";

b.style.color = (who === "me") ? "#fff" : "#111";

b.style.boxShadow = "0 1px 0 rgba(0,0,0,.04)";

b.textContent = text;

row.appendChild(b);

log.appendChild(row);

log.scrollTop = log.scrollHeight;

return b; // return bubble element for later update

}

function looksEnglish(text){

if (!text) return false;

// simple heuristic

if (/[ěščřžýáíéúůďťň]/i.test(text)) return false;

return /\b(what|who|why|how|when|where|does|do|is|are|can|jesus|god|bible)\b/i.test(text);

}

async function fetchHello(langHint=""){

const url = ENDPOINT_HELLO + (langHint ? ("?lang=" + encodeURIComponent(langHint)) : "");

const res = await fetch(url, { method: "GET" });

const data = await res.json();

if (!data || !data.ok) return null;

return data;

}

async function ensureHello(langHint=""){

if (helloShown) return;

try{

const data = await fetchHello(langHint);

if (data && data.message){

currentLang = data.lang || currentLang;

if (mottoEl && data.motto) mottoEl.textContent = data.motto;

addBubble(data.message, "bot");

helloShown = true;

// update input placeholder based on language

input.placeholder = (currentLang === "en") ? "Type your question…" : "Napiš otázku…";

}

} catch(e){

// fallback local (still ok)

const cs = "📜 Oficiální úvodní prohlášení\n\n" +

"Tento chatbot odpovídá výhradně podle Písma svatého z překladu Bible21.\n" +

"Nepoužívá žádné tradice, teologické systémy ani lidské výklady.\n" +

"Drží se zásady formulované Martinem Lutherem:\n" +

""Bible se vykládá pouze Biblí."";

addBubble(cs, "bot");

helloShown = true;

}

}

async function ask(){

const q = (input.value || "").trim();

if(!q) return;

input.value = "";

// If user starts English, switch hello/motto to EN (once)

const en = looksEnglish(q);

if (!helloShown) await ensureHello(en ? "en" : "cs");

if (en && currentLang !== "en"){

try{

const data = await fetchHello("en");

if (data && data.ok){

currentLang = "en";

if (mottoEl && data.motto) mottoEl.textContent = data.motto;

input.placeholder = "Type your question…";

}

} catch(e) {}

}

addBubble(q, "me");

const waitingBubble = addBubble("…", "bot"); // placeholder bubble

try{

const res = await fetch(ENDPOINT_ASK, {

method:"POST",

headers: { "Content-Type":"application/json" },

body: JSON.stringify({ q: q, lang: currentLang })

});

const data = await res.json();

if (!data || data.ok !== true){

waitingBubble.textContent = (data && data.error) ? data.error : ((currentLang === "en") ? "Error." : "Chyba.");

return;

}

// show answer

waitingBubble.textContent = data.answer || "";

// optionally append citations list returned by backend

if (data.citations && data.citations.length){

const citeText = (currentLang === "en" ? "\n\nCitations:\n- " : "\n\nCitace:\n- ") + data.citations.join("\n- ");

addBubble(citeText, "bot");

}

} catch(e){

waitingBubble.textContent = (currentLang === "en")

? "Connection error. Please try again."

: "Chyba připojení k serveru. Zkus to prosím znovu.";

}

}

openBtn.addEventListener('click', async ()=>{

panel.style.display = "block";

openBtn.style.display = "none";

log.scrollTop = log.scrollHeight;

// Always show first message from backend (locked)

if (!helloShown) {

await ensureHello("cs");

}

input.focus();

});

closeBtn.addEventListener('click', ()=>{

panel.style.display = "none";

openBtn.style.display = "inline-block";

});

send.addEventListener('click', ask);

input.addEventListener('keydown', (e)=>{ if(e.key === "Enter") ask(); });

})();

</script>