Making the code base easy to read and maintain and making it a oneline install
This commit is contained in:
Tyler
+566
@@ -0,0 +1,566 @@
|
||||
// === FRONTEND_JS_TEMPLATE ===
|
||||
(async () => {
|
||||
const is_interactive = __IS_INTERACTIVE__;
|
||||
const q_init = __JS_Q__;
|
||||
const lang_init = __JS_LANG__;
|
||||
let urls = __JS_URLS__;
|
||||
const b64_init = __B64_CONTEXT__;
|
||||
const tk_init = __TK__;
|
||||
const script_root = __SCRIPT_ROOT__;
|
||||
const model_init = __MODEL_INIT__;
|
||||
const conversation = {
|
||||
originalQuery: q_init,
|
||||
originalContext: new TextDecoder().decode(Uint8Array.from(atob(b64_init), c => c.charCodeAt(0))),
|
||||
originalSources: [...urls],
|
||||
turns: [{role: 'user', content: q_init, ts: Date.now()}]
|
||||
};
|
||||
const box = document.getElementById('sxng-stream-box');
|
||||
const data = document.getElementById('sxng-stream-data');
|
||||
const wrapper = box.closest('.answer');
|
||||
if (wrapper) wrapper.style.display = 'none';
|
||||
let restored = false;
|
||||
let isStreaming = false;
|
||||
|
||||
__CITATION_HELPER_JS__
|
||||
|
||||
__INTERACTIVE_JS_INIT__
|
||||
|
||||
function synthesizeQuery(original, followup) {
|
||||
const cleanOrig = original.replace(/^(what|how|why|when|where|who|which|is|are|can|does|do)(\s+(is|are|do|does|can|to|a|an|the))?\s+/i, '');
|
||||
const origWords = cleanOrig.split(' ').slice(0, 12);
|
||||
return `${origWords.join(' ')} ${followup}`.trim();
|
||||
}
|
||||
|
||||
__STREAM_FN_SIG__ {
|
||||
if (isStreaming) {
|
||||
console.warn('[AI Answers] Stream already in progress, ignoring duplicate call');
|
||||
return;
|
||||
}
|
||||
|
||||
isStreaming = true;
|
||||
try {
|
||||
const ctx = auxContext || conversation.originalContext;
|
||||
if (wrapper) wrapper.style.display = '';
|
||||
box.style.display = 'block';
|
||||
|
||||
const controller = new AbortController();
|
||||
let timeoutId = setTimeout(() => controller.abort(), 60000);
|
||||
const finalQ = __STREAM_Q__;
|
||||
|
||||
const _selMdl = (document.getElementById('sxng-model-select') || {value: ''}).value;
|
||||
const bodyObj = { q: finalQ, lang: lang_init, context: ctx, tk: tk_init, model: _selMdl__STREAM_BODY__ };
|
||||
const res = await fetch(script_root + '/ai-stream', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(bodyObj),
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
if (!res.ok) {
|
||||
const errSpan = document.createElement('span');
|
||||
errSpan.style.color = '#bf616a';
|
||||
errSpan.textContent = "Error: " + res.statusText;
|
||||
data.appendChild(errSpan);
|
||||
return;
|
||||
}
|
||||
|
||||
const respJson = await res.json();
|
||||
|
||||
if (respJson.error) {
|
||||
const cursorErr = data.querySelector('.sxng-cursor');
|
||||
if (cursorErr) cursorErr.remove();
|
||||
const errSpan = document.createElement('span');
|
||||
errSpan.style.color = '#bf616a';
|
||||
errSpan.textContent = "⚠️ " + respJson.error;
|
||||
data.appendChild(errSpan);
|
||||
return;
|
||||
}
|
||||
|
||||
const fullText = (respJson.text || '').trim();
|
||||
|
||||
if (!fullText) {
|
||||
const cursorErr = data.querySelector('.sxng-cursor');
|
||||
if (cursorErr) cursorErr.remove();
|
||||
const errSpan = document.createElement('span');
|
||||
errSpan.style.color = '#bf616a';
|
||||
errSpan.textContent = 'No response received. Check API configuration and server logs.';
|
||||
data.appendChild(errSpan);
|
||||
return;
|
||||
}
|
||||
|
||||
let mainText = fullText;
|
||||
const thinkMatch = mainText.match(/^<think>([\s\S]*?)<\/think>\s*/);
|
||||
if (thinkMatch) {
|
||||
const cursorTh = data.querySelector('.sxng-cursor');
|
||||
const details = document.createElement('details');
|
||||
details.className = 'sxng-reasoning';
|
||||
details.innerHTML = '<summary>Thought Process</summary>';
|
||||
const thoughtDiv = document.createElement('div');
|
||||
thoughtDiv.className = 'sxng-thought-content';
|
||||
thoughtDiv.textContent = thinkMatch[1];
|
||||
details.appendChild(thoughtDiv);
|
||||
if (cursorTh) cursorTh.before(details);
|
||||
else data.appendChild(details);
|
||||
mainText = mainText.substring(thinkMatch[0].length);
|
||||
}
|
||||
|
||||
let cursor = data.querySelector('.sxng-cursor');
|
||||
if (!cursor) {
|
||||
cursor = document.createElement('span');
|
||||
cursor.className = 'sxng-cursor';
|
||||
data.appendChild(cursor);
|
||||
}
|
||||
|
||||
let buffer = '';
|
||||
const flushBuffer = (force = false) => {
|
||||
if (!buffer) return;
|
||||
|
||||
if (force) {
|
||||
const fragment = renderCitations(buffer, urls);
|
||||
if (cursor) cursor.before(fragment);
|
||||
else data.appendChild(fragment);
|
||||
buffer = '';
|
||||
return;
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const match = buffer.match(/(\[\d+(?:,\s*\d+)*\])/);
|
||||
|
||||
if (!match) break;
|
||||
|
||||
const preText = buffer.substring(0, match.index);
|
||||
if (preText) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = preText;
|
||||
cursor.before(s);
|
||||
}
|
||||
|
||||
const citationText = match[0];
|
||||
const fragment = renderCitations(citationText, urls);
|
||||
cursor.before(fragment);
|
||||
|
||||
buffer = buffer.substring(match.index + match[0].length);
|
||||
}
|
||||
|
||||
const openIdx = buffer.lastIndexOf('[');
|
||||
if (openIdx === -1) {
|
||||
if (buffer) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = buffer;
|
||||
cursor.before(s);
|
||||
buffer = '';
|
||||
}
|
||||
} else {
|
||||
const safeChunk = buffer.substring(0, openIdx);
|
||||
if (safeChunk) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = safeChunk;
|
||||
cursor.before(s);
|
||||
}
|
||||
buffer = buffer.substring(openIdx);
|
||||
|
||||
if (buffer.length > 50) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = buffer[0];
|
||||
cursor.before(s);
|
||||
buffer = buffer.substring(1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let twPos = 0;
|
||||
const twBatch = 4;
|
||||
await new Promise(resolve => {
|
||||
function twTick() {
|
||||
if (twPos >= mainText.length) {
|
||||
flushBuffer(true);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
const end = Math.min(twPos + twBatch, mainText.length);
|
||||
buffer += mainText.substring(twPos, end);
|
||||
twPos = end;
|
||||
flushBuffer(false);
|
||||
setTimeout(twTick, 8);
|
||||
}
|
||||
twTick();
|
||||
});
|
||||
|
||||
if (cursor) cursor.remove();
|
||||
|
||||
let last = data.lastChild;
|
||||
while (last) {
|
||||
if (last.textContent && last.textContent.trim().length === 0) {
|
||||
const prev = last.previousSibling;
|
||||
last.remove();
|
||||
last = prev;
|
||||
} else {
|
||||
if (last.textContent) last.textContent = last.textContent.trimEnd();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
renderCitationFooter(mainText, urls, data);
|
||||
|
||||
const collectedResponse = mainText;
|
||||
|
||||
__INTERACTIVE_JS_COMPLETE__
|
||||
|
||||
if (collectedResponse) {
|
||||
conversation.turns.push({role: 'assistant', content: collectedResponse.trim(), ts: Date.now()});
|
||||
}
|
||||
|
||||
// Save state if this was an initial generation or a regeneration
|
||||
if (arguments.length === 0 && typeof updateState === 'function') {
|
||||
updateState();
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('[AI Answers] Fatal stream exception:', e);
|
||||
const errSpan = document.createElement('span');
|
||||
errSpan.style.cssText = 'color: #bf616a; font-weight: bold; display: block; margin-top: 0.5rem;';
|
||||
|
||||
if (e.name === 'AbortError') {
|
||||
errSpan.textContent = "⚠️ Connection to AI provider timed out.";
|
||||
} else {
|
||||
errSpan.textContent = "⚠️ AI Widget encountered a fatal error. Check browser console.";
|
||||
}
|
||||
|
||||
if (data) {
|
||||
const cursor = data.querySelector('.sxng-cursor');
|
||||
if (cursor) cursor.remove();
|
||||
data.appendChild(errSpan);
|
||||
}
|
||||
} finally {
|
||||
isStreaming = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!restored) startStream();
|
||||
})();
|
||||
// === CITATION_HELPER_JS ===
|
||||
function renderCitations(text, urls) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
const re = /\[(\d{1,2}(?:\s*,\s*\d{1,2})*)\]/g;
|
||||
let lastIdx = 0;
|
||||
const matches = [...text.matchAll(re)];
|
||||
|
||||
matches.forEach(match => {
|
||||
if (match.index > lastIdx) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = text.substring(lastIdx, match.index);
|
||||
fragment.appendChild(s);
|
||||
}
|
||||
match[1].split(/\s*,\s*/).forEach(n => {
|
||||
const idx = parseInt(n.trim());
|
||||
if (idx >= 1 && idx <= urls.length) {
|
||||
const url = urls[idx-1];
|
||||
if (url) {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.target = '_blank';
|
||||
a.style.cssText = 'text-decoration:none;color:var(--color-result-link);font-weight:bold;';
|
||||
a.textContent = `[${n.trim()}]`;
|
||||
a.className = 'sxng-chunk';
|
||||
fragment.appendChild(a);
|
||||
} else {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = `[${n.trim()}]`;
|
||||
fragment.appendChild(s);
|
||||
}
|
||||
} else {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
s.textContent = `[${n.trim()}]`;
|
||||
fragment.appendChild(s);
|
||||
}
|
||||
});
|
||||
lastIdx = match.index + match[0].length;
|
||||
});
|
||||
|
||||
if (lastIdx < text.length) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sxng-chunk';
|
||||
// Preserve whitespace by not trimming
|
||||
s.textContent = text.substring(lastIdx);
|
||||
fragment.appendChild(s);
|
||||
}
|
||||
return fragment;
|
||||
}
|
||||
|
||||
function renderCitationFooter(textContent, urls, container) {
|
||||
const re = /\[(\d{1,2}(?:\s*,\s*\d{1,2})*)\]/g;
|
||||
const usedIndices = new Set();
|
||||
let m;
|
||||
while ((m = re.exec(textContent)) !== null) {
|
||||
m[1].split(/\s*,\s*/).forEach(n => {
|
||||
const idx = parseInt(n.trim());
|
||||
if (idx >= 1 && idx <= urls.length && urls[idx - 1]) {
|
||||
usedIndices.add(idx);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (usedIndices.size === 0) return;
|
||||
const sorted = [...usedIndices].sort((a, b) => a - b);
|
||||
const footer = document.createElement('div');
|
||||
footer.className = 'sxng-citation-footer';
|
||||
sorted.forEach(n => {
|
||||
const url = urls[n - 1];
|
||||
if (!url) return;
|
||||
let domain;
|
||||
try { domain = new URL(url).hostname.replace('www.', ''); } catch(e) { domain = url; }
|
||||
const item = document.createElement('span');
|
||||
item.className = 'sxng-citation-item';
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.target = '_blank';
|
||||
a.textContent = `[${n}] ${domain}`;
|
||||
item.appendChild(a);
|
||||
footer.appendChild(item);
|
||||
});
|
||||
container.appendChild(footer);
|
||||
}
|
||||
// === INTERACTIVE_JS ===
|
||||
const footer = document.getElementById('sxng-footer');
|
||||
const input = document.getElementById('sxng-action-input');
|
||||
if (typeof model_init !== 'undefined' && model_init) {
|
||||
const _ms = document.getElementById('sxng-model-select');
|
||||
if (_ms) {
|
||||
const _o = document.createElement('option');
|
||||
_o.value = model_init;
|
||||
_o.textContent = model_init;
|
||||
_o.selected = true;
|
||||
_ms.appendChild(_o);
|
||||
}
|
||||
}
|
||||
if (window.getComputedStyle && box) {
|
||||
try {
|
||||
const docStyles = getComputedStyle(document.documentElement);
|
||||
let accent = docStyles.getPropertyValue('--color-result-link').trim();
|
||||
if (!accent) {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
accent = getComputedStyle(a).color;
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
if (accent) {
|
||||
box.style.setProperty('--color-result-link', accent);
|
||||
box.style.setProperty('--sxng-ai-accent', accent);
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// conversation saved as base64 URL fragment.
|
||||
const updateState = () => {
|
||||
try {
|
||||
let state = {
|
||||
t: conversation.turns.map(t => ({
|
||||
r: t.role === 'user' ? 'u' : 'a',
|
||||
c: t.content.replace(/\s+/g, ' ').trim()
|
||||
})),
|
||||
u: urls
|
||||
};
|
||||
const encodeB64 = (obj) => {
|
||||
const u8 = new TextEncoder().encode(JSON.stringify(obj));
|
||||
let bin = '';
|
||||
// Use a loop to avoid RangeError: Maximum call stack size exceeded
|
||||
for (let i = 0; i < u8.byteLength; i++) {
|
||||
bin += String.fromCharCode(u8[i]);
|
||||
}
|
||||
return btoa(bin);
|
||||
};
|
||||
|
||||
let b64 = encodeB64(state);
|
||||
while (b64.length > 2000 && state.t.length > 2) {
|
||||
state.t.splice(1, 2); // Delete in Q&A pairs
|
||||
b64 = encodeB64(state);
|
||||
}
|
||||
|
||||
history.replaceState(null, null, '#ai=' + b64);
|
||||
} catch(e) {}
|
||||
};
|
||||
|
||||
if (location.hash.includes('ai=')) {
|
||||
try {
|
||||
const b64 = location.hash.split('ai=')[1];
|
||||
const uint8 = new Uint8Array(atob(b64).split('').map(c => c.charCodeAt(0)));
|
||||
const json = new TextDecoder().decode(uint8);
|
||||
const state = JSON.parse(json);
|
||||
if (state.t && state.t.length > 0) {
|
||||
// Restore URLs for citation indexing
|
||||
if (state.u && Array.isArray(state.u)) {
|
||||
urls = state.u;
|
||||
}
|
||||
|
||||
conversation.turns = state.t.map(t => ({
|
||||
role: t.r === 'u' ? 'user' : 'assistant',
|
||||
content: t.c.trim(),
|
||||
ts: 0
|
||||
}));
|
||||
|
||||
const injectCitations = (text) => {
|
||||
return renderCitations(text, urls);
|
||||
};
|
||||
|
||||
data.innerHTML = '';
|
||||
conversation.turns.forEach((turn, i) => {
|
||||
if (turn.role === 'user') {
|
||||
if (turn.content !== conversation.originalQuery) {
|
||||
const u = document.createElement('span');
|
||||
u.className = 'sxng-user-msg';
|
||||
u.textContent = turn.content;
|
||||
data.appendChild(u);
|
||||
const clr = document.createElement('div');
|
||||
clr.style.clear = 'both';
|
||||
data.appendChild(clr);
|
||||
}
|
||||
} else {
|
||||
data.appendChild(injectCitations(turn.content));
|
||||
}
|
||||
});
|
||||
box.style.display = 'block';
|
||||
if(wrapper) wrapper.style.display = '';
|
||||
if(footer && is_interactive) footer.style.display = 'flex';
|
||||
restored = true;
|
||||
}
|
||||
} catch(e) { console.warn('Restore failed', e); }
|
||||
}
|
||||
document.getElementById('btn-copy').onclick = async (e) => {
|
||||
const btn = e.currentTarget;
|
||||
const originalContent = btn.innerHTML;
|
||||
const text = Array.from(data.childNodes)
|
||||
.filter(n => n.nodeType === 3 || n.tagName === 'SPAN')
|
||||
.map(n => n.textContent)
|
||||
.join('');
|
||||
await navigator.clipboard.writeText(text);
|
||||
btn.innerHTML = '<svg viewBox="0 0 24 24" style="color:#a3be8c;"><path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z"/></svg>';
|
||||
setTimeout(() => btn.innerHTML = originalContent, 2000);
|
||||
};
|
||||
|
||||
document.getElementById('btn-regen').onclick = async () => {
|
||||
data.innerHTML = '<span class="sxng-cursor"></span>';
|
||||
footer.style.display = 'none';
|
||||
|
||||
if (conversation.turns.length > 0 && conversation.turns[conversation.turns.length - 1].role === 'assistant') {
|
||||
conversation.turns.pop();
|
||||
}
|
||||
|
||||
updateState();
|
||||
|
||||
if (conversation.turns.length <= 1) {
|
||||
await startStream();
|
||||
} else {
|
||||
const val = conversation.turns[conversation.turns.length - 1].content;
|
||||
const currentText = conversation.turns.slice(0, -1).slice(-6)
|
||||
.map(t => (t.role === 'user' ? 'Q' : 'A') + ': ' + t.content)
|
||||
.join('\\n\\n');
|
||||
await startStream(val, currentText);
|
||||
}
|
||||
updateState();
|
||||
};
|
||||
|
||||
const handleAction = async (e) => {
|
||||
if (e) e.preventDefault();
|
||||
const val = input.value.trim();
|
||||
|
||||
conversation.turns.push({role: 'user', content: val, ts: Date.now()});
|
||||
updateState();
|
||||
|
||||
const currentText = conversation.turns.slice(0, -1).slice(-6)
|
||||
.map(t => (t.role === 'user' ? 'Q' : 'A') + ': ' + t.content)
|
||||
.join('\\n\\n');
|
||||
|
||||
input.value = '';
|
||||
input.blur();
|
||||
footer.style.display = 'none';
|
||||
|
||||
if (val) {
|
||||
const cursor = data.querySelector('.sxng-cursor');
|
||||
if (cursor) cursor.remove();
|
||||
const userMsg = document.createElement('span');
|
||||
userMsg.className = 'sxng-user-msg';
|
||||
userMsg.textContent = val;
|
||||
data.appendChild(userMsg);
|
||||
const clr = document.createElement('div');
|
||||
clr.style.clear = 'both';
|
||||
data.appendChild(clr);
|
||||
|
||||
const newCursor = document.createElement('span');
|
||||
newCursor.className = 'sxng-cursor';
|
||||
data.appendChild(newCursor);
|
||||
|
||||
const synthesized = synthesizeQuery(q_init, val);
|
||||
let auxContext = null;
|
||||
try {
|
||||
const auxData = await fetch(script_root + '/ai-auxiliary-search', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({query: synthesized, lang: lang_init, offset: urls.length, tk: tk_init})
|
||||
}).then(r => r.json());
|
||||
if (auxData.context) {
|
||||
const originalBackground = conversation.originalContext.substring(0, 1500);
|
||||
auxContext = `FRESH SOURCES (most relevant):\\n${auxData.context}\\n\\nBACKGROUND (for reference):\\n${originalBackground}`;
|
||||
if (auxData.new_urls && Array.isArray(auxData.new_urls)) {
|
||||
urls = urls.concat(auxData.new_urls);
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
await startStream(val, currentText, auxContext);
|
||||
updateState();
|
||||
} else {
|
||||
const cursor = data.querySelector('.sxng-cursor');
|
||||
if (cursor) cursor.remove();
|
||||
data.appendChild(document.createElement('br'));
|
||||
data.appendChild(document.createElement('br'));
|
||||
const newCursor = document.createElement('span');
|
||||
newCursor.className = 'sxng-cursor';
|
||||
data.appendChild(newCursor);
|
||||
await startStream("Continue", currentText);
|
||||
updateState();
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('sxng-action-form').onsubmit = handleAction;
|
||||
input.onfocus = () => {
|
||||
setTimeout(() => {
|
||||
input.scrollIntoView({behavior: 'smooth', block: 'center'});
|
||||
}, 300);
|
||||
};
|
||||
|
||||
(function fetchModels() {
|
||||
const _msel2 = document.getElementById('sxng-model-select');
|
||||
if (!_msel2) return;
|
||||
const _modelsUrl = script_root + '/ai-models?tk=' + encodeURIComponent(tk_init);
|
||||
console.log('[AI Answers] Fetching models from', _modelsUrl);
|
||||
fetch(_modelsUrl)
|
||||
.then(r => r.ok ? r.json() : Promise.reject('HTTP ' + r.status))
|
||||
.then(d => {
|
||||
const models = (d && d.models && d.models.length > 0) ? d.models : [model_init];
|
||||
const _cur = _msel2.value || model_init;
|
||||
_msel2.innerHTML = '';
|
||||
models.forEach(m => {
|
||||
const o = document.createElement('option');
|
||||
o.value = m; o.textContent = m;
|
||||
if (m === _cur) o.selected = true;
|
||||
_msel2.appendChild(o);
|
||||
});
|
||||
_msel2.style.display = 'inline-block';
|
||||
})
|
||||
.catch(() => {
|
||||
if (model_init) {
|
||||
const o = document.createElement('option');
|
||||
o.value = model_init; o.textContent = model_init;
|
||||
o.selected = true;
|
||||
_msel2.appendChild(o);
|
||||
_msel2.style.display = 'inline-block';
|
||||
}
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user