`
: `${sourceInitial(item.source)}
`;
const link = item.link
? `data-link="${item.link.replace(/"/g, """)}"`
: "";
return `${src}
`;
}
// ── News Panel ─────────────────────────────────────────────────────────
function buildNewsItem(item, idx) {
const el = document.createElement("div");
el.className = "news-item";
const thumb = document.createElement("div");
thumb.className = "news-thumb";
if (item.image) {
const img = document.createElement("img");
img.loading = "lazy";
img.alt = "";
img.src = item.image;
img.addEventListener("error", () => {
thumb.classList.add("news-thumb--fallback");
thumb.textContent = sourceInitial(item.source);
img.remove();
});
thumb.appendChild(img);
} else {
thumb.classList.add("news-thumb--fallback");
thumb.textContent = sourceInitial(item.source);
}
const body = document.createElement("div");
body.className = "news-body";
const meta = document.createElement("div");
meta.className = "news-meta";
meta.innerHTML = `${item.source || "Tin tức"}` +
(typeof idx === "number" ? `#${idx + 1}` : "");
const title = document.createElement("div");
title.className = "news-title";
title.textContent = item.title;
if (item.description) {
const desc = document.createElement("div");
desc.className = "news-desc";
desc.textContent = item.description;
body.appendChild(desc);
}
body.appendChild(meta);
body.appendChild(title);
el.appendChild(thumb);
el.appendChild(body);
// Action row: open source + ask in chat
const actions = document.createElement("div");
actions.className = "news-actions";
const srcBtn = document.createElement("button");
srcBtn.className = "news-act-btn";
srcBtn.type = "button";
srcBtn.textContent = "🔗 Nguồn";
srcBtn.addEventListener("click", (e) => {
e.stopPropagation();
// VNEWS items open the short link so highlights/videos play on VNEWS.
const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
});
const askBtn = document.createElement("button");
askBtn.className = "news-act-btn news-act-btn--ask";
askBtn.type = "button";
askBtn.textContent = "💬 Hỏi";
askBtn.addEventListener("click", (e) => {
e.stopPropagation();
askAboutNews(item);
});
actions.appendChild(srcBtn);
actions.appendChild(askBtn);
el.appendChild(actions);
// Clicking the card body opens the source (VNEWS short link for VNEWS items).
el.addEventListener("click", () => {
const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
});
return el;
}
/** Fill the chat input with a question about a news item and focus/start chat. */
function askAboutNews(item) {
const q = `Kể chi tiết về tin này: ${item.title}`;
chatInput.value = q;
showTextChat(true);
textModeBtn.classList.add("active");
textMode = true;
chatInput.focus();
if (!client || !sessionInProgress) {
void startTextSession(q);
} else {
addChatMessage("user", q);
void maybeSwitchTopic(q);
if (!sendTextViaSession(q)) setCaption("QUEUED…");
}
}
function showNewsPanel(items) {
if (!newsPanel || !newsList) return;
newsList.innerHTML = "";
newsOffset = 0;
newsHasMore = true;
if (!items || items.length === 0) {
const empty = document.createElement("div");
empty.className = "news-empty";
empty.textContent = "Không có tin tức cho chủ đề này.";
newsList.appendChild(empty);
newsLoadMore.hidden = true;
newsPanel.hidden = false;
return;
}
items.forEach((item, i) => newsList.appendChild(buildNewsItem(item, i)));
newsOffset = items.length;
newsHasMore = items.length >= NEWS_PAGE_SIZE;
newsLoadMore.hidden = !newsHasMore;
newsPanel.hidden = false;
setupNewsObserver();
}
function appendNewsItems(items) {
if (!items || items.length === 0) {
newsHasMore = false;
newsLoadMore.hidden = true;
return;
}
items.forEach((item) => newsList.appendChild(buildNewsItem(item, newsOffset++)));
}
async function loadMoreNews() {
if (newsLoading || !newsHasMore) return;
newsLoading = true;
newsLoadMoreBtn.classList.add("loading");
newsLoadMoreBtn.disabled = true;
// If we're on a filtered topic, "load more" just re-fetches the filtered set.
let items;
if (newsTopicQuery) {
items = await getFilteredNews(newsTopicQuery, NEWS_PAGE_SIZE);
} else {
const r = await getMoreNews(newsOffset, NEWS_PAGE_SIZE);
items = r.items;
newsHasMore = r.hasMore;
newsOffset = r.nextOffset;
}
appendNewsItems(items);
if (!newsTopicQuery) newsLoadMore.hidden = !newsHasMore;
else newsLoadMore.hidden = true; // filtered set is already complete
newsLoadMoreBtn.classList.remove("loading");
newsLoadMoreBtn.disabled = false;
newsLoading = false;
}
function setupNewsObserver() {
if (newsObserver) newsObserver.disconnect();
if (!newsSentinel || !("IntersectionObserver" in window)) return;
newsObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting && newsHasMore && !newsLoading && !newsTopicQuery) {
void loadMoreNews();
}
}
}, { root: newsList, rootMargin: "120px" });
newsObserver.observe(newsSentinel);
}
// ── Topic detection & news sequence ─────────────────────────────────────
const VI_STOPWORDS = new Set([
"tôi", "bạn", "anh", "chị", "cô", "chú", "bác", "ông", "bà", "nó", "họ", "ta", "minh",
"có", "không", "được", "là", "và", "với", "của", "cho", "trong", "ngoài", "về", "tại", "từ",
"để", "khi", "nếu", "như", "đó", "này", "kia", "gì", "nào", "đâu", "ai", "sao", "thế",
"hãy", "xin", "vui", "lòng", "giúp", "biết", "tin", "tức", "bài", "viết", "nói", "chuyện",
"chủ", "đề", "muốn", "hỏi", "xem", "nghe", "à", "ừ", "ok", "okay", "ồ", "nhé", "nhỉ", "ạ",
"đây", "nè", "một", "hai", "ba", "mấy", "các", "những", "cái", "con", "chiếc", "bản",
"hôm", "nay", "tới", "mới", "nhất", "kể",
]);
/** Decide if the user is continuing the current news thread (not switching). */
function isFollowUp(text) {
const t = (text || "").toLowerCase();
// Only truly-continuation cues force a follow-up. Topic phrases like
// "kể về X", "tin tức X", "cho tôi biết về X" are treated as new topics.
if (/(tiếp|tiếp tục|nữa|thêm tin|tin này|tin đó|tin khác|còn tin|tin hot|tin nóng|tin hôm nay|tóm tắt|tóm lại|giải thích|ý nghĩa|chi tiết hơn|kể thêm)/.test(t)) {
return true;
}
return t.trim().split(/\s+/).length <= 3;
}
/** Detect an explicit AI / công nghệ request (route to GenK AI feed). */
function isAITopic(text) {
const t = (text || "").toLowerCase();
return /(\bai\b|trí tuệ nhân tạo|a\.i|a i|robot|machine learning|deep learning|chatbot|generative|gen ai|llm|gpt|qwen|kimi|chatgpt|gemini|openai|claude|tạo ảnh|tạo video|ứng dụng ai)/.test(t);
}
/** Extract a short keyword query from a user message (Vietnamese-aware). */
function extractTopicQuery(text) {
if (isFollowUp(text)) return ""; // follow-ups never trigger a topic switch
const words = (text || "")
.toLowerCase()
.replace(/[^a-zà-ỹ0-9\s]/g, " ")
.split(/\s+/)
.filter(Boolean);
// Keep meaningful words (>=2 chars, not a stopword). Compound nouns like
// "bóng đá", "kinh tế", "bóng rổ" stay intact because both parts are kept.
const keywords = words.filter((w) => w.length >= 2 && !VI_STOPWORDS.has(w));
if (!keywords.length) return "";
return keywords.slice(0, 2).join(" ");
}
/**
* Called when the user sends a message. If it's a new topic, re-filter the
* news list to that topic and reset the image sequence. AI topics pull the
* GenK "AI" feed from VNEWS.
*/
async function maybeSwitchTopic(userText) {
if (isFollowUp(userText)) return false; // keep current sequence/list
// AI topic -> pull GenK AI feed from VNEWS.
if (isAITopic(userText)) {
const aiItems = await getVnewsAIFeed(NEWS_PAGE_SIZE);
if (aiItems.length) {
newsTopicQuery = "ai";
preFetchedNews = aiItems;
newsSeq = aiItems.slice();
newsSeqIdx = -1;
showNewsPanel(aiItems);
setCurrentNews(aiItems[0]);
return true;
}
// Fall back to general news filter on "ai".
const filtered = await getFilteredNews("ai", NEWS_PAGE_SIZE);
if (filtered.length) {
newsTopicQuery = "ai";
preFetchedNews = filtered;
newsSeq = filtered.slice();
newsSeqIdx = -1;
showNewsPanel(filtered);
setCurrentNews(filtered[0]);
return true;
}
return false;
}
const query = extractTopicQuery(userText);
if (!query || query === newsTopicQuery) return false;
const filtered = await getFilteredNews(query, NEWS_PAGE_SIZE);
if (!filtered.length) return false; // no news for this topic -> keep general
newsTopicQuery = query;
preFetchedNews = filtered;
newsSeq = filtered.slice();
newsSeqIdx = -1;
showNewsPanel(filtered);
setCurrentNews(filtered[0]);
return true;
}
// Current news item being discussed + which image to show next.
let curNews = null;
let curImgIdx = 0;
/** Return the next image URL for the CURRENT news item, looping through its
* images (image[0], image[1], ...). Falls back to a single image. */
function nextNewsImage() {
if (!curNews) return null;
const imgs = (curNews.images && curNews.images.length)
? curNews.images
: (curNews.image ? [curNews.image] : []);
if (!imgs.length) return null;
const url = imgs[curImgIdx % imgs.length];
curImgIdx += 1;
return url;
}
/** Set the news item currently being discussed (resets the image cursor). */
function setCurrentNews(item) {
curNews = item || null;
curImgIdx = 0;
}
// ── Avatar list ─────────────────────────────────────────────────────────
let avatarList = [];
let avatarThumbs = {}; // name -> thumbnail URL (persisted on Space)
async function fetchAvatarList() {
try {
const resp = await fetch("/api/avatars");
if (resp.ok) {
const data = await resp.json();
avatarList = (data.avatars || []).map((a) => (typeof a === "string" ? a : a.name));
// Store thumbnail URLs from the API response
avatarThumbs = {};
for (const a of (data.avatars || [])) {
if (typeof a === "object" && a.name && a.thumbnail) {
avatarThumbs[a.name] = a.thumbnail;
}
}
}
} catch {}
}
function populateAvatarSelects(selectedName) {
for (const sel of [chatAvatarSelect, settingsAvatarSelect]) {
sel.innerHTML = "";
const def = document.createElement("option");
def.value = "";
def.textContent = "(Default - Brunette)";
sel.appendChild(def);
for (const name of avatarList) {
const opt = document.createElement("option");
opt.value = name;
opt.textContent = name.replace(/\.glb$/i, "").replace(/_/g, " ") + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
sel.appendChild(opt);
}
if (selectedName && avatarList.includes(selectedName)) {
sel.value = selectedName;
}
}
}
updateAvatarThumbPreview();
function setAvatarFromSelect(value) {
settings.avatar = value || "";
saveSettings();
}
async function reloadAvatar() {
if (!stage.head) return;
loading.classList.remove("done");
loading.textContent = "Loading avatar...";
try {
await stage.init({
avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
onprogress: (ev) => {
if (ev.lengthComputable) {
loading.textContent = `Loading avatar ${Math.min(100, Math.round((ev.loaded / ev.total) * 100))}%`;
}
}
});
stage.resume(); // keep the render loop running so the avatar stays visible
} catch (err) {
console.error(err);
}
loading.classList.add("done");
}
// ── Chat / captions ────────────────────────────────────────────────────
function clampRect() {
const vw = window.innerWidth, vh = window.innerHeight;
const r = textChat.getBoundingClientRect();
let l = r.left, t = r.top;
l = Math.max(10, Math.min(l, vw - r.width - 10));
t = Math.max(10, Math.min(t, vh - r.height - 10));
textChat.style.left = `${l}px`;
textChat.style.top = `${t}px`;
}
function makeDraggable() {
let dragging = false;
let startX, startY, startLeft, startTop;
function getPos(e) {
const p = e.changedTouches ? e.changedTouches[0] : e;
return { x: p.clientX, y: p.clientY };
}
function onStart(e) {
if (e.target.closest("#chat-header-actions") || e.target.closest("#chat-avatar-select")) {
return;
}
const p = getPos(e);
dragging = true;
const rect = textChat.getBoundingClientRect();
startX = p.x;
startY = p.y;
startLeft = rect.left;
startTop = rect.top;
textChat.classList.add("dragging");
e.preventDefault();
}
function onMove(e) {
if (!dragging) return;
const p = getPos(e);
textChat.style.left = `${startLeft + p.x - startX}px`;
textChat.style.top = `${startTop + p.y - startY}px`;
textChat.style.right = "auto";
textChat.style.bottom = "auto";
textChat.style.width = "";
textChat.style.height = "";
e.preventDefault();
}
function onEnd() {
if (!dragging) return;
dragging = false;
textChat.classList.remove("dragging");
clampRect();
}
chatHeader.addEventListener("mousedown", onStart);
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onEnd);
chatHeader.addEventListener("touchstart", onStart, { passive: false });
document.addEventListener("touchmove", onMove, { passive: false });
document.addEventListener("touchend", onEnd);
}
function makeResizable() {
let resizing = false;
let startX, startY, startW, startH;
function getPos(e) {
const p = e.changedTouches ? e.changedTouches[0] : e;
return { x: p.clientX, y: p.clientY };
}
function onStart(e) {
resizing = true;
const rect = textChat.getBoundingClientRect();
const p = getPos(e);
startX = p.x;
startY = p.y;
startW = rect.width;
startH = rect.height;
textChat.classList.add("resizing");
e.preventDefault();
e.stopPropagation();
}
function onMove(e) {
if (!resizing) return;
const p = getPos(e);
textChat.style.width = `${Math.max(260, startW + p.x - startX)}px`;
textChat.style.height = `${Math.max(120, startH + p.y - startY)}px`;
textChat.style.right = "auto";
textChat.style.bottom = "auto";
e.preventDefault();
}
function onEnd() {
if (!resizing) return;
resizing = false;
textChat.classList.remove("resizing");
}
chatResizeHandle.addEventListener("mousedown", onStart);
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onEnd);
chatResizeHandle.addEventListener("touchstart", onStart, { passive: false });
document.addEventListener("touchmove", onMove, { passive: false });
document.addEventListener("touchend", onEnd);
}
function setCaption(text, kind = "") {
caption.textContent = text;
caption.className = kind;
}
function showSubtitles(text) {
if (!settings.subtitles) return;
clearTimeout(subtitleTimer);
subtitles.innerHTML = text;
subtitles.classList.add("visible");
subtitles.querySelectorAll("a[href]").forEach((a) => {
a.addEventListener("click", (e) => {
e.preventDefault();
const href = a.getAttribute("href");
if (href) {
window.open(href, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
}
});
});
}
function fadeSubtitles(delayMs = 2600) {
clearTimeout(subtitleTimer);
subtitleTimer = window.setTimeout(() => subtitles.classList.remove("visible"), delayMs);
}
function escapeRegex(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function addChatMessage(role, text, newsItem = null) {
const msg = document.createElement("div");
msg.className = `chat-message ${role}`;
msg.dataset.text = text; // store plain text for rewrite selection
if (newsItem) {
if (newsItem.image) msg.dataset.img = newsItem.image;
if (newsItem.link) msg.dataset.src = newsItem.link;
}
// Detect AI keywords in assistant messages for tag display
let detectedAIKeywords = [];
if (role === "assistant" && text) {
const t = text.toLowerCase();
const AI_PATTERNS = [
"AI", "trí tuệ nhân tạo", "LLM", "GPT", "Qwen", "Kimi", "ChatGPT",
"Gemini", "OpenAI", "Claude", "machine learning", "deep learning",
"chatbot", "ứng dụng AI", "tạo ảnh", "tạo video", "AI tạo sinh",
"thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy",
"neural network", "mạng nơ-ron"
];
for (const kw of AI_PATTERNS) {
if (t.includes(kw.toLowerCase())) {
detectedAIKeywords.push(kw);
}
}
}
let displayText = text;
if (role === "assistant" && latestNewsUrl && latestNewsSource) {
const sourceEscaped = escapeRegex(latestNewsSource);
const patterns = [
new RegExp(`\\(nguồn\\s*${sourceEscaped}\\)`, 'gi'),
new RegExp(`\\(Nguồn\\s*${sourceEscaped}\\)`, 'gi'),
];
for (const pattern of patterns) {
if (pattern.test(displayText)) {
displayText = displayText.replace(pattern, (match) =>
`