';
const limit = Math.min(results.length, 5);
for(let i=0;i
'; setPendingProductCards(html); }
send(result);
return;
}
if(name==="combo_suggest"){
const combo = window.vaix?.comboByCriteria(args||{})||null;
if(combo && combo.items && combo.items.length){
// Reconstruct a human-readable query from the tool args so the embedded
// "Đổi combo" button can re-derive the SAME criteria for an alternate.
let qParts = ["combo"];
const cats = (args && Array.isArray(args.categories)) ? args.categories.slice() : [];
if (cats.length) qParts = qParts.concat(cats);
if (args && args.brand) qParts.push(args.brand);
if (args && args.maxPrice) qParts.push("dưới " + (args.maxPrice / 1000000) + " triệu");
else if (args && args.minPrice) qParts.push("trên " + (args.minPrice / 1000000) + " triệu");
const _q = qParts.join(" ");
const html = '' + window.vaix.renderComboCardsBlock(combo, _q) + '
';
setPendingProductCards(html);
const lines = combo.items.map(function(p){ return '• ' + p.title_clean + ' — ' + (p.brand||'') + ' — ' + (p.priceNum>0?p.priceNum.toLocaleString("vi-VN")+"₫":"Liên hệ"); });
const _tot = (combo.items||[]).reduce(function(s,p){ return s + ((p.priceNum||0)); }, 0);
send("Em gợi ý combo sau đây " + (combo.brand?("thương hiệu "+combo.brand+" "):"") + "cho anh chị:\n" + lines.join("\n") + "\n\nTổng combo (" + combo.items.length + " món): " + (_tot>0 ? (_tot.toLocaleString("vi-VN")+" ₫") : "Liên hệ") + " — đã tính đủ theo tổng các món. Anh chị có muốn tôi điều chỉnh theo giá/ chất liệu/ màu sắc/ thương hiệu không?");
} else {
send("Xin lỗi, em chưa tìm được combo phù hợp với yêu cầu đó. Anh chị có thể thử với tiêu chí khác như thương hiệu Malloca, Eurogold hoặc khoảng giá nhé.");
}
return;
}
const r=stage.runTool(name,args)??`Unknown: ${name}`;send(r);
}
async function connectSession(c){try{await c.connect();return c}catch(e){const code=e?.code;if(isGreetingSession){sessionInProgress=false;return null}if(code==="limit")setCaption("DAILY LIMIT","error");else if(code==="queue-full")setCaption("ALL SEATS","error");else if(code==="join-expired")setCaption("EXPIRED","error");else if(code!=="aborted"){console.error(e);setCaption("NO CONNECTION","error")}sessionInProgress=false;return null}}
// ✨ Quick Consult: text chat WITHOUT loading the 3D avatar. Builds its own
// AudioContext + playback so voice of the AI still plays, but no GLB/lip-sync
// is loaded — instant start. "showText" also opens the product panel at once.
let _quickAudioCtx = null;
function getQuickAudioCtx(){
if(_quickAudioCtx && _quickAudioCtx.state!=="closed") return _quickAudioCtx;
try{ _quickAudioCtx = new (window.AudioContext||window.webkitAudioContext)({latencyHint:"interactive"}); }catch(e){ _quickAudioCtx = null; }
return _quickAudioCtx;
}
function openCatalogPanelNow(){
const p=document.getElementById("vaistudio-panel"), t=document.getElementById("vaistudio-toggle");
if(p){ p.classList.add("open"); p.style.display="flex"; }
if(t){ t.classList.add("active"); }
}
function openTextChatUI(){
if(showTextChat){ showTextChat(true); }
if(textModeBtn) toggleClass(textModeBtn,"active",true);
textMode = true;
startComboPoll();
}
async function startQuickConsult(t){
const msg = t || "Xin chào! Tôi muốn tư vấn nhanh sản phẩm.";
openTextChatUI();
// Tư vấn nhanh → text chat dùng model google/gemma-4-31B-it
await sendTextMessage(msg);
// Open the product panel immediately so a product page shows right away.
if(window.vaix && window.vaix.isLoaded && window.vaix.isLoaded()){
openCatalogPanelNow();
} else if(window.vaix && window.vaix.load){
window.vaix.load().then(function(){ openCatalogPanelNow(); }).catch(function(){ openCatalogPanelNow(); });
} else {
openCatalogPanelNow();
}
}
async function startTextSession(t, opt){
if(sessionInProgress){ if(client&&t){client.sendUserText(t);client.requestResponse()} return }
const opts = opt || {};
sessionInProgress=true; isGreetingSession=false;
let ac, vs;
if(opts.quick){
ac = getQuickAudioCtx(); vs = ac ? ac.destination : null;
if(!ac){ sessionInProgress=false; return; }
if(ac.state==="suspended"){ try{ await ac.resume(); }catch(_){} }
} else {
await stage.resume();
ac = stage.audioCtx; vs = stage.voiceSink;
if(!ac || !vs){ sessionInProgress=false; return; }
}
const nh=preFetchedGreeting||(await getHotNewsGreeting());const c=new S2sWsRealtimeClient({...(config.lb?{sessionUrl:"api/session"}:{directUrl:settings.directUrl}),voice:settings.voice,instructions:effectiveInstructions(nh),audioContext:ac,outputNode:vs,workletBaseUrl:"/worklets/",tools:TOOL_DEFS,_textOnly:true});client=c;_a(c);textMode=true;showTextChat(true);toggleClass(textModeBtn,"active",true);const ok=await connectSession(c);if(!ok)return;if(!autoGreetingSent)c.requestResponse();startComboPoll();if(t){c.sendUserText(t);c.requestResponse()}}
async function startVoiceSession(){if(sessionInProgress)return;sessionInProgress=true;isGreetingSession=false;await stage.resume();let ms;if(FAKEMIC_MODE){ms=stage.audioCtx.createMediaStreamDestination().stream}else{try{ms=await navigator.mediaDevices.getUserMedia({audio:{echoCancellation:true,noiseSuppression:true,autoGainControl:true}})}catch{setCaption("MIC BLOCKED","error");sessionInProgress=false;return}}const ac=stage.audioCtx,vs=stage.voiceSink;if(!ac||!vs){sessionInProgress=false;return}const g=preFetchedGreeting||(await getHotNewsGreeting());const c=new S2sWsRealtimeClient({...(config.lb?{sessionUrl:"api/session"}:{directUrl:settings.directUrl}),voice:settings.voice,instructions:effectiveInstructions(g),micStream:ms,audioContext:ac,outputNode:vs,workletBaseUrl:"/worklets/",tools:TOOL_DEFS,_textOnly:false});client=c;_a(c);setCaption("REQUESTING A SLOT…");const ok=await connectSession(c);if(ok&&!autoGreetingSent)c.requestResponse();startComboPoll();
// Voice-understanding fix: rely on correct BROWSER vi-VN STT text for what the
// avatar understands, and stop sending raw mic audio to the backend so it never
// produces a misrecognized (English/"mai yomui") audio transcript that the model
// would answer incorrectly. Correct browser text is injected via sendUserText.
if(ok){try{c.setUserAudioEnabled(false);}catch(_){} startVoiceRecognition();}}
async function startGreetingSession(){if(sessionInProgress)return;isGreetingSession=true;sessionInProgress=true;await stage.resume();const ac=stage.audioCtx,vs=stage.voiceSink;if(!ac||!vs){sessionInProgress=false;isGreetingSession=false;return}const fm=ac.createMediaStreamDestination(),ms=fm.stream;const c=new S2sWsRealtimeClient({...(config.lb?{sessionUrl:"api/session"}:{directUrl:settings.directUrl}),voice:settings.voice,instructions:GREETING_INSTRUCTIONS,micStream:ms,audioContext:ac,outputNode:vs,workletBaseUrl:"/worklets/",tools:[],_textOnly:false});client=c;_a(c);setCaption("");const ok=await connectSession(c);if(!ok){isGreetingSession=false;return}autoGreetingSent=true;c.requestResponse()}
function _a(c){
c.addEventListener("status",e=>onStatus(e.detail.status));
c.addEventListener("queue",e=>{const{position}=e.detail;if(isGreetingSession)return;setCaption(position>0?`#${position} IN LINE…`:"ALMOST THERE…","live")});
c.addEventListener("transcript",e=>{const{role,text}=e.detail;if(role==="assistant"&&text){lastAssistantMessage=text; const n=smartNormalize(text);showSubtitles(n);addChatMessage("assistant",n,isGreetingSession)}});
// Server-side Vietnamese STT → user subtitles (the OFFICIAL recognition path).
// The backend runs whisper-1 with language "vi" (see _buildSessionUpdate) and
// streams the user's recognized speech here. Display it under subtitles so the
// user can SEE that their voice was understood, and mirror it into the chat
// input so the avatar is clearly working from the same recognized text.
c.addEventListener("user-transcript", e => {
const text = (e.detail && e.detail.text) || "";
if (!text) return;
_noteUserMessage(text); // update news-list visibility from user speech
if (settings.subtitles) {
showSubtitles("🗣️ " + text);
if (chatInput) { chatInput.value = text; }
} else if (chatInput && text) {
chatInput.value = text;
}
});
c.addEventListener("response-finished",()=>{
autoGreetingSent=true;
fadeSubtitles();
if(voiceTyper && !voiceTyper.active && voiceTyper._recognition){ try{ voiceTyper.stop(); }catch(_){} voiceTyper=null; }
// Suggestions are now embedded directly in addChatMessage — no separate render needed
if(isGreetingSession){
// After greeting, show ONE consolidated "Tin HOT hôm nay" section with
// distinct, context-aware cards. This is the SINGLE owner of the greeting
// news section — the legacy observers (greeting-news.js / greeting-source-cards.js)
// are disabled so no duplicate list is appended.
(async () => {
try {
const lastMsg = chatMessages.lastElementChild;
if (!lastMsg || !lastMsg.classList.contains("chat-message")) return;
if (lastMsg.querySelector(".news-section")) return; // already has news — never duplicate
const section = document.createElement("div");
section.className = "news-section";
section.setAttribute("data-owner", "app-news");
const h = document.createElement("div");
h.className = "news-section-title";
h.innerHTML = ' Tin HOT hôm nay:';
section.appendChild(h);
// Build up to 8 DIFFERENT cards spanning several HOT topics (each topic
// yields its own cards → a varied, single consolidated list).
let topics = [];
try { topics = await fetchHotTags().catch(()=>[]); } catch(_) {}
const used = new Set();
const sources = [];
for (const t of topics) {
if (sources.length >= 8) break;
try {
const s = await generateSourceCards((t && t.query) || 'tin tức mới nhất hôm nay').catch(()=>[]);
for (const c of s) {
const key = (c.url && String(c.url)) || (c.title && String(c.title)) || '';
if (key && (used.has(key) || _shownNewsUrls.has(key))) continue;
if (key) used.add(key);
sources.push({ ...c, category: (t && t.label) || c.category });
if (sources.length >= 8) break;
}
} catch (_) {}
}
// Fall back to the plain hot-articles list if nothing came back.
if (sources.length === 0) {
try {
const data = await (await fetch("/api/news/hot")).json();
const hotArticles = (data.articles || []).slice(0, 4);
hotArticles.forEach(a => sources.push({
source: a.source || 'Nguồn tin', title: a.title, url: a.url, icon: '📰', desc: '', articleTitle: a.title || ''
}));
} catch (_) {}
}
_markShown(sources);
_trimShown();
if (sources.length) {
const sourceCardsRow = document.createElement("div");
sourceCardsRow.className = "source-cards-row";
sources.forEach(src => sourceCardsRow.appendChild(createSourceCard(src)));
section.appendChild(sourceCardsRow);
}
lastMsg.appendChild(section);
chatMessages.scrollTop = chatMessages.scrollHeight;
} catch (_) {}
})();
setTimeout(()=>{ isGreetingSession=false; sessionInProgress=false; setCaption(CAPTIONS.idle); setMainButton("start","Start talking"); updateChatAudioToggleBtn(); },1500);
}
});
c.addEventListener("toolcall",e=>{const{name,arguments:a,callId}=e.detail;runTool(name,a,callId)});
c.addEventListener("server-error",e=>console.warn("err:",e.detail.error));
c.addEventListener("error",()=>void endSession());
}
/** Show suggested questions after avatar finishes a general response */
function renderSuggestedQuestionsAfterResponse(responseText) {
// Don't show suggestions right after showing products or tool calls
if (responseText && (responseText.includes('Sản phẩm phù hợp') || responseText.includes('Tìm thấy ') || responseText.includes('Đã mở thông tin'))) {
return; // Already showing product suggestions, skip
}
var container = document.getElementById("suggested-questions");
if (!container) return;
clearSuggestedQuestions();
// Generate contextual suggestions based on what avatar just said
var questions = generateSuggestionsFromContext(responseText);
container.innerHTML = "";
for (var i = 0; i < questions.length; i++) {
var pill = document.createElement("button");
pill.className = "suggested-pill";
pill.textContent = "💡 " + questions[i];
(function(q) {
pill.addEventListener("click", function() { sendUserSuggestion(q); });
})(questions[i]);
container.appendChild(pill);
}
container.style.display = "flex";
}
/** Generate contextual suggestions from the avatar's last response */
function generateSuggestionsFromContext(responseText) {
var lower = (responseText || "").toLowerCase();
// If mentions time/datetime
if (lower.includes("thứ") || lower.includes("tháng") || lower.includes("năm")) {
return [
"Thời tiết hôm nay thế nào?",
"Có sự kiện gì thú vị hôm nay không?",
"Cho tôi xem tin tức mới nhất"
];
}
// If mentions news or weather
if (lower.includes("tin") || lower.includes("thời tiết") || lower.includes("tin tức") || lower.includes("news") || lower.includes("báo")) {
return [
"Tin tức nóng nhất hôm nay là gì?",
"Cập nhật tin tức mới nhất",
"Có tin gì thú vị không?"
];
}
// If mentions specific topics — use dynamic HOT_TOPIC_KEYWORDS for suggestions
var topicSuggestions = [];
for (const kw of HOT_TOPIC_KEYWORDS) {
if (lower.includes(kw.keyword.toLowerCase())) {
topicSuggestions.push(kw.query);
if (topicSuggestions.length >= 3) break;
}
}
if (topicSuggestions.length > 0) return topicSuggestions;
// ── Topic-contextual suggestions (ngữ cảnh chủ đề) ──
// Build follow-up questions that stay on the SAME topic the user/assistant
// just talked about (Fifa/Infantino, Đội tuyển Việt Nam/Indonesia, ...).
if (lower.includes("infantino") || lower.includes("fifa") || lower.includes("giải vô địch bóng đá thế giới")) {
return [
"Infantino là ai và vai trò của ông ở FIFA?",
"FIFA có những thay đổi gì mới nhất?",
"Cho tôi xem tin tức về bóng đá thế giới hôm nay"
];
}
if (lower.includes("đội tuyển việt nam") || lower.includes("việt nam") && (lower.includes("indonesia") || lower.includes("trận đấu"))) {
return [
"Kết quả trận Việt Nam vs Indonesia thế nào?",
"Đội tuyển Việt Nam thi đấu khi nào?",
"Lịch thi đấu sắp tới của đội tuyển Việt Nam"
];
}
if (lower.includes("indonesia") && (lower.includes("việt nam") || lower.includes("trận") || lower.includes("bóng"))) {
return [
"Trận đấu Việt Nam vs Indonesia diễn ra khi nào?",
"Đội hình ra sân của hai đội thế nào?",
"Kết quả trận đấu ra sao?"
];
}
// Topic-specific fallbacks (Vietnamese keywords)
if (lower.includes("bóng đá") || lower.includes("football") || lower.includes("thể thao") || lower.includes("sport")) {
return [
"Kết quả bóng đá hôm nay",
"Ngoại hạng Anh tuần này",
"Đội tuyển Việt Nam sắp thi đấu"
];
}
if (lower.includes("chứng khoán") || lower.includes("stock") || lower.includes("vn-index") || lower.includes("cổ phiếu")) {
return [
"Thị trường chứng khoán hôm nay",
"VN-Index biến động ra sao?",
"Cổ phiếu nào tăng mạnh?"
];
}
if (lower.includes("phim") || lower.includes("movie") || lower.includes("netflix") || lower.includes("phim hay")) {
return [
"Phim hay nhất tuần này",
"Phim Netflix đáng xem",
"Bom tấn phòng vé mới"
];
}
if (lower.includes("iphone") || lower.includes("apple") || lower.includes("galaxy") || lower.includes("smartphone")) {
return [
"iPhone 17 Pro Max có gì mới?",
"So sánh iPhone vs Samsung",
"Smartphone nào tốt nhất 2026?"
];
}
// General fallback — pick random products
return getRandomSuggestions();
}
/** Handle Vietnamese voice recognition result: fill chat input */
let _lastSentVoiceText = "";
function onVoiceResult(e) {
if (!e || !e.transcript) return;
const text = e.transcript.trim();
if (voiceTyperMode === "subtitle") {
// Voice mode (subtitle): browser vi-VN STT is the AUTHORITATIVE Vietnamese
// channel. Show the recognized text AND send it into the session so the
// avatar understands the user's Vietnamese even if backend Whisper fails.
if (text && settings.subtitles) showSubtitles("🗣️ " + text);
if (e.isFinal && text && sessionInProgress && !textMode) {
// avoid re-sending the same accumulated utterance in continuous mode
if (text === _lastSentVoiceText) return;
_lastSentVoiceText = text;
// Mirror into chat input for visibility
if (chatInput) chatInput.value = text;
try { sendTextViaSession(text); } catch (_) {}
}
return;
}
if (!chatInput || !sessionInProgress) return;
chatInput.value = text;
if (e.isFinal && sessionInProgress) {
const triggerRe = /(?:gửi đi|gửi|send|ok|đồng ý|đồng)\s*$/i;
if (triggerRe.test(text)) {
setCaption("Đang gửi…", "live");
sendTextMessage();
if (voiceTyper && voiceTyper.active) try{voiceTyper.stop();}catch(_){}
} else {
setCaption("Nhấp Send để gửi", "live");
}
}
}
function startVoiceTyping() {
try {
if (!sessionInProgress || !chatInput) return false;
if (voiceTyper && voiceTyper.active) return true;
if (voiceTyper) { try{ voiceTyper.stop(); }catch(_){} voiceTyper = null; }
voiceTyper = new VoiceTyper({ lang: "vi-VN", continuous: true, interimResults: true, autoSubmit: false });
if (!voiceTyper.init()) {
voiceTyper = new VoiceTyper({ lang: "en-US", continuous: true, interimResults: true, autoSubmit: false });
if (!voiceTyper.init()) { console.warn("[voiceTyper] Speech Recognition not supported"); voiceTyper = null; return false; }
}
voiceTyperMode = "chat";
voiceTyper.onResult = onVoiceResult;
voiceTyper.onError = (e) => { console.warn("[voiceTyper]", e); voiceTyper=null; };
voiceTyper.onSoundStart = () => { try{setCaption("🎤 Đang nghe…", "live");}catch(_){} };
voiceTyper.onSoundEnd = () => {};
voiceTyper.start();
try{setCaption("🎤 Đang nghe…", "live");}catch(_){}
return true;
} catch(e) { console.warn("[voiceTyper] start failed:", e); voiceTyper = null; return false; }
}
function startVoiceSubtitle() {
try {
if (!sessionInProgress || textMode) return false;
// PREFER server-side Vietnamese STT (whisper-1, language "vi") which is wired
// to subtitles via the "user-transcript" event — this is the reliable VN path.
// If the browser supports vi-VN Web Speech, it only ADDS interim feedback for
// VN; it must NEVER fall back to en-US (that would show English when user
// speaks Vietnamese).
if (voiceTyper && voiceTyper.active && voiceTyperMode === "subtitle") return true;
if (voiceTyper) { try{voiceTyper.stop();}catch(_){} voiceTyper = null; }
var vt = new VoiceTyper({ lang: "vi-VN", continuous: true, interimResults: true, autoSubmit: false });
if (!vt.init()) {
// No vi-VN browser support → rely solely on server STT (no English fallback)
voiceTyper = null;
return false;
}
voiceTyper = vt;
voiceTyperMode = "subtitle";
voiceTyper.onResult = onVoiceResult;
voiceTyper.onError = (e) => console.warn("[voiceTyper]", e);
voiceTyper.onSoundStart = () => {};
voiceTyper.onSoundEnd = () => {};
voiceTyper.start();
return true;
} catch(e) { console.warn("[voiceTyper] subtitle start failed:", e); voiceTyper = null; return false; }
}
// Voice-understanding fix: run the browser vi-VN recognizer as the authoritative
// Vietnamese input channel for voice mode. Because we disable backend mic audio
// (setUserAudioEnabled(false)), server VAD events (speech_started/user-speaking)
// no longer fire, so we start the recognizer here directly instead of waiting for
// them. On each final result onVoiceResult() sends the correct Vietnamese text
// into the session (sendTextViaSession), so the avatar understands Vietnamese.
function startVoiceRecognition() {
try {
if (!sessionInProgress || textMode) return;
if (voiceTyper && voiceTyper.active && voiceTyperMode === "subtitle") return;
if (voiceTyper) { try{voiceTyper.stop();}catch(_){} voiceTyper = null; }
var vt = new VoiceTyper({ lang: "vi-VN", continuous: true, interimResults: true, autoSubmit: false });
if (!vt.init()) { console.warn("[voiceTyper] vi-VN SpeechRecognition unavailable"); voiceTyper = null; return; }
voiceTyper = vt;
voiceTyperMode = "subtitle";
voiceTyper.onResult = onVoiceResult;
voiceTyper.onError = function () {
// auto-restart unless session ended
try { if (sessionInProgress && !textMode && voiceTyperMode === "subtitle") setTimeout(startVoiceRecognition, 600); } catch (_) {}
};
voiceTyper.onSoundStart = function(){};
voiceTyper.onSoundEnd = function(){};
voiceTyper.onEnd = function(){ try { if (sessionInProgress && !textMode && voiceTyperMode === "subtitle") setTimeout(startVoiceRecognition, 400); } catch(_){} };
voiceTyper.start();
// Voice mode = always show subtitles ("talking" feedback), regardless of any
// previously stored toggle, so the user sees their Vietnamese transcribed live.
if (subtitles) {
settings.subtitles = true;
subtitles.textContent = "🎤 Đang nghe tiếng Việt…";
subtitles.classList.add("visible");
}
return true;
} catch(e) { console.warn("[voiceTyper] startVoiceRecognition failed:", e); voiceTyper = null; return false; }
}
function toggleVoiceTyping() {
try {
if (!voiceTyper) { startVoiceTyping(); if (chatMicBtn) chatMicBtn.classList.add("active"); return; }
if (voiceTyper.active) { try{voiceTyper.stop();}catch(_){} voiceTyper=null; try{setCaption("Voice stopped", "live");}catch(_){} if (chatMicBtn) chatMicBtn.classList.remove("active"); }
else { startVoiceTyping(); if (chatMicBtn) chatMicBtn.classList.add("active"); }
} catch(e) { console.warn("[voiceTyper] toggle failed:", e); voiceTyper = null; }
}
async function endSession(silent=false){
_lastSentVoiceText = "";
if(voiceTyper){try{voiceTyper.stop();}catch(_){}voiceTyper=null;voiceTyperMode=null;}
const c=client;client=null;sessionInProgress=false;autoGreetingSent=false;isGreetingSession=false;currentContextForSuggestions=null;
if(c){if(c.options.micStream)for(const t of c.options.micStream?.getTracks()??[])t.stop();await c.close().catch(()=>{})}
stage.setConversationState("idle");subtitles.classList.remove("visible");
if(!silent)setCaption(CAPTIONS.idle);setMainButton("start","Start talking");
clearSuggestedQuestions();
}
// ── Chat audio toggle (mute/unmute avatar voice in chat) ──
// Default: MUTED (im lặng). Khi profile mute, TTS không phải xử lý tin nhắn nên
// tốc độ phản hồi nhanh hơn. User nghe từng tin bằng nút âm thanh trên mỗi tin.
// Nhấn nút mute để BẬT chế độ âm thanh (TTS tự xử lý tin nhắn tiếp theo).
function _loadMutedDefault() {
try { const v = localStorage.getItem("avatar.chatMuted"); if (v !== null) return v === "1"; } catch (_) {}
return true; // mặc định mute
}
let avatarAudioMuted = _loadMutedDefault();
let chatAudioToggleBtn = null;
let chatboxMuteBtn = null;
// Single source of truth for the muted state. Swaps the sound/muted icons on
// BOTH the chat-audio-toggle button (voice-session header) and the always-visible
// chatbox-mute button, stops any in-flight Edge TTS, and reflects state on the
// playback node.
function setAvatarAudioMuted(v){
const next = !!v;
if (avatarAudioMuted === next) return;
avatarAudioMuted = next;
try { localStorage.setItem("avatar.chatMuted", next ? "1" : "0"); } catch(_) {}
try { client?.setMuted(avatarAudioMuted); } catch(_) {}
if (avatarAudioMuted) { try { stopEdgeTts(); } catch(_) {} }
const syncIcons = function(root){
if(!root) return;
const snd = root.querySelector("#audio-icon-sound, #chatbox-mute-sound");
const mtc = root.querySelector("#audio-icon-muted, #chatbox-mute-muted");
if (snd) snd.style.display = avatarAudioMuted ? "none" : "";
if (mtc) mtc.style.display = avatarAudioMuted ? "" : "none";
};
if (chatboxMuteBtn) {
chatboxMuteBtn.classList.toggle("mute-on", avatarAudioMuted);
chatboxMuteBtn.setAttribute("aria-label", avatarAudioMuted ? "Bật âm thanh" : "Im lặng (tắt âm thanh)");
chatboxMuteBtn.title = avatarAudioMuted ? "Bật âm thanh" : "Tắt âm thanh (im lặng)";
}
// sync per-root icons (this button's SVG + the other button's SVG live in
// different subtrees, so update both).
if(chatboxMuteBtn) syncIcons(chatboxMuteBtn);
if(chatAudioToggleBtn) chatAudioToggleBtn.setAttribute("aria-label", avatarAudioMuted ? "Unmute avatar audio" : "Mute avatar audio");
if(client&&client._playbackNode){ var n=client._playbackNode; if(n.port)n.port.postMessage({kind:avatarAudioMuted?"mute":"unmute"}); }
}
function updateChatboxMuteBtn(){
if(!chatboxMuteBtn) return;
chatboxMuteBtn.classList.toggle("mute-on", avatarAudioMuted);
const snd = chatboxMuteBtn.querySelector("#chatbox-mute-sound");
const mtc = chatboxMuteBtn.querySelector("#chatbox-mute-muted");
if (snd) snd.style.display = avatarAudioMuted ? "none" : "";
if (mtc) mtc.style.display = avatarAudioMuted ? "" : "none";
}
function initChatboxMute(){
chatboxMuteBtn = $("#chatbox-mute-btn");
if(!chatboxMuteBtn) return;
chatboxMuteBtn.addEventListener("click", ()=>{ setAvatarAudioMuted(!avatarAudioMuted); });
updateChatboxMuteBtn();
}
function initChatAudioToggle(){
chatAudioToggleBtn = $("#chat-audio-toggle-btn");
if(!chatAudioToggleBtn) return;
chatAudioToggleBtn.addEventListener("click",()=>{
setAvatarAudioMuted(!avatarAudioMuted);
});
updateChatboxMuteBtn();
}
function updateChatAudioToggleBtn(){
if(!chatAudioToggleBtn) return;
var show=(client&&(client._playbackNode||client._status==="ai-speaking"||client._status==="connected"||client._status==="processing"));
chatAudioToggleBtn.style.display=show?"grid":"none";
}
// ✨ Welcome button handlers
if (welcomeChatBtn) {
welcomeChatBtn.addEventListener("click", async () => {
welcomeMode = "text";
// Hide the picker FIRST so the avatar loading % bar can show right after.
hideWelcome();
await ensureAvatarReady();
openTextChatUI();
sendTextMessage("Xin chào! Tôi muốn trò chuyện.");
});
}
if (welcomeVoiceBtn) {
welcomeVoiceBtn.addEventListener("click", async () => {
welcomeMode = "voice";
hideWelcome();
await ensureAvatarReady();
startGreetingSession();
});
}
// ✨ Quick Consult: no avatar load — instant text chat + product panel open.
if (welcomeQuickBtn) {
welcomeQuickBtn.addEventListener("click", async () => {
welcomeMode = "quick";
hideWelcome();
startQuickConsult();
});
}
function g(s){try{return document.querySelector(s)}catch{return null}}
/** Random general suggestions from catalog */
function getGreetingSuggestions() {
try {
var prods = (window.vaix && window.vaix.allProducts) ? window.vaix.allProducts() : [];
if (prods.length < 3) return ["Tôi muốn tìm bếp từ Malloca", "Tư vấn máy hút mùi cho tôi", "Xem sản phẩm gia dụng"];
var diverse = (window.vaix.getDiverseProducts) ? window.vaix.getDiverseProducts(6) : [...prods].sort(() => Math.random() - 0.5).slice(0, 6);
if (!diverse || !diverse.length) return ["Tôi muốn tìm bếp từ Malloca", "Tư vấn máy hút mùi cho tôi", "Xem sản phẩm gia dụng"];
var out = [];
for (var i = 0; i < diverse.length && out.length < 3; i++) {
var p = diverse[i];
if (!p) continue;
if (p.brand) out.push("Tôi muốn tìm " + ((p.category || "").toLowerCase() + " ").trim() + p.title_clean.toLowerCase() + " của " + p.brand);
else out.push("Cho tôi xem " + ((p.category || "").toLowerCase() + " ").trim() + p.title_clean.toLowerCase());
}
return out.length ? out : ["Tôi muốn tìm bếp từ Malloca", "Tư vấn máy hút mùi cho tôi", "Xem sản phẩm gia dụng"];
} catch (e) {
return ["Tôi muốn tìm bếp từ Malloca", "Tư vấn máy hút mùi cho tôi", "Xem sản phẩm gia dụng"];
}
}
function getRandomSuggestions() {
var prods = (window.vaix && window.vaix.allProducts) ? window.vaix.allProducts() : [];
if (prods.length < 5) return [
"Tôi muốn tìm máy hút mùi âm tủ 700mm",
"Hãy cho tôi biết về bếp từ Malloca",
"Tôi muốn tìm máy hút mùi âm tủ"
];
var shuffled = prods.sort(function(){ return Math.random() - 0.5; });
var selected = [];
var brandsSeen = new Set();
for (var i = 0; i < shuffled.length && selected.length < 3; i++) {
if (brandsSeen.has(shuffled[i].brand)) continue;
brandsSeen.add(shuffled[i].brand);
selected.push(shuffled[i]);
}
while (selected.length < 3 && selected.length < shuffled.length) {
selected.push(shuffled[selected.length]);
}
return selected.map(function(p) {
if (p.brand) {
return "Tôi muốn tìm " + (p.category ? p.category.toLowerCase() + " " : "") + p.title_clean.toLowerCase() + " của " + p.brand;
}
return "Cho tôi xem " + (p.category ? p.category.toLowerCase() + " " : "") + p.title_clean.toLowerCase();
});
}
/** Clear suggestion pills */
function clearSuggestedQuestions() {
var container = document.getElementById("suggested-questions");
if (container) { container.innerHTML = ""; container.style.display = "none"; }
}
/** Handle sending a suggested question */
function sendUserSuggestion(text) {
if (window._triggerSuggestionSend) {
window._triggerSuggestionSend(text);
}
}
on(mainBtn,"click",()=>{if(mainAction==="start"){if(sessionInProgress)return;if(FAKEMIC_MODE)void startTextSession();else void startVoiceSession()}else if(mainAction==="join"){stage.resume();client?.join()}else if(mainAction==="stop")void endSession()});
on(muteBtn,"click",()=>{
muted=!muted;
toggleClass(muteBtn,"active",muted);
if(client && client._playbackNode && client._playbackNode.port){
client._playbackNode.port.postMessage({kind: muted ? "mute" : "unmute"});
}
client?.setMuted(muted);
var chatToggle=$("#chat-audio-toggle-btn");
if(chatToggle){ var snd=$("#audio-icon-sound"), mtc=$("#audio-icon-muted"); if(snd) snd.style.display=muted?"none":""; if(mtc) mtc.style.display=muted?"":"none"; }
});
on(textModeBtn,"click",()=>{textMode=!textMode;showTextChat(textMode);toggleClass(textModeBtn,"active",textMode)});
on(chatSendBtn,"click",()=>sendTextMessage());
on(chatMicBtn,"click",()=>toggleVoiceTyping());
on(chatInput,"keypress",e=>{if(e.key==="Enter")sendTextMessage()});
on(chatAvatarSelect,"change",()=>{setAvatarFromSelect(chatAvatarSelect.value);void reloadAvatar()});
on(settingsAvatarSelect,"change",()=>{setAvatarFromSelect(settingsAvatarSelect.value);if(chatAvatarSelect)chatAvatarSelect.value=settingsAvatarSelect.value||"";void reloadAvatar()});
on(settingsBtn,"click",()=>{if(inputVoice)inputVoice.value=settings.voice;if(inputInstructions)inputInstructions.value=settings.instructions;if(inputDirectUrl)inputDirectUrl.value=settings.directUrl;if(inputSubtitles)inputSubtitles.checked=settings.subtitles;if(settingsAvatarSelect&&chatAvatarSelect)settingsAvatarSelect.value=chatAvatarSelect.value||"";if(settingsDialog)settingsDialog.showModal()});
settingsDialog.addEventListener("close",()=>{
var iv=(inputVoice&&(inputVoice.value||""))||DEFAULT_VOICE;
var sa=(settingsAvatarSelect&&settingsAvatarSelect.value)||"";
var ii=(inputInstructions&&inputInstructions.value)||"";
var du=inputDirectUrl?(inputDirectUrl.value||"").trim():settings.directUrl||"";
var cb=(inputSubtitles&&inputSubtitles.checked)||false;
settings={voice:iv,avatar:sa,instructions:ii,directUrl:du,subtitles:cb};
if(settings.avatar!=="vuong.glb")autoGreetingSent=false;
saveSettings();
if(chatAvatarSelect)chatAvatarSelect.value=settings.avatar;
if(subtitles&&!settings.subtitles)subtitles.classList.remove("visible");
client?.updateSession({voice:settings.voice,instructions:effectiveInstructions(preFetchedGreeting||"")});
});
window.addEventListener("beforeunload",()=>client?.close());
initAudioUnlock();
initChatboxMute();
initChatAudioToggle();
async function boot(){
for(const v of VOICES){const o=document.createElement("option");o.value=v;o.textContent=v.replaceAll("_"," ");inputVoice.append(o)}
try{const r=await fetch("api/config");if(r.ok)config={...config,...(await r.json())}}catch{}
directUrlRow.hidden=!config.allowDirect;
await fetchAvatarList();populateAvatarSelects(settings.avatar);
makeDraggable();makeResizable();
setCaption("KHỞI ĐỘNG…");setMainButton("busy","Loading…");
// ── Deferred avatar init ──
// Show the character-picker (welcome) modal FIRST. The avatar (and its
// loading %) is only initialized AFTER the user picks a character, so the
// picker is always visible immediately. ensureAvatarReady() is awaited by
// the session starters.
loading.classList.add("done"); // hide native loading text; picker modal shows now
setCaption(CAPTIONS.idle);setMainButton("start","Start talking");
const panel=document.getElementById("vaistudio-panel");
const toggle=document.getElementById("vaistudio-toggle");
const closeBtn=document.getElementById("vaistudio-close");
const retryBtn=document.getElementById("vaistudio-retry-btn");
// ── Fixed: toggle opens panel, loads + renders reliably ──
if(toggle)toggle.addEventListener("click",()=>{
const o=!panel.classList.contains("open");
panel.classList.toggle("open",o);
panel.style.display=o?"flex":"none";
toggle.classList.toggle("active",o);
if(o){ window.vaix?.load().then(()=>{if(panel.classList.contains("open"))renderAll();}); }
});
if(closeBtn)closeBtn.addEventListener("click",()=>{panel.classList.remove("open");panel.style.display="none";toggle?.classList.remove("active")});
// ── Fixed: retry always renders (not dependent on load() returning Promise) ──
if(retryBtn)retryBtn.addEventListener("click",()=>{window.vaix?.load();renderAll()});
// ── Fixed renderAll: guard against premature call + avoid double-render from ?product=xxx + auto-render when loaded ──
function renderAll(){
const p=document.getElementById("vaistudio-panel"),l=document.getElementById("vaistudio-loading"),pe=document.getElementById("vaistudio-products"),ce=document.getElementById("vaistudio-count"),sc=document.getElementById("vaix-suggestions");
if(!p)return;
if(!pe)return;
// If panel is NOT open, we still try to render if products are loaded
// (handles case where products finish loading before user opens panel)
const isOpen = p.classList.contains("open");
if(!isOpen && !window.vaix?.isLoaded()) return; // Not ready yet
// Don't overwrite if ?product=xxx URL param already rendered panel content
if(isOpen && window.vaix?.hasProductUrlHandled())return;
const prods=window.vaix?.allProducts()||[];
if(!prods.length && !window.vaix?.isLoaded()){
// Products still loading — keep loading indicator visible, retry shortly
if(l) l.hidden=false;
clearTimeout(renderAll._timer);
renderAll._timer=setTimeout(renderAll,500);
return;
}
// Products are loaded (or explicitly failed) — clear loading and render
if(l)l.hidden=true;
if(sc)sc.style.display="none";
pe.innerHTML="";
pe.style.display="block";
if(ce)ce.textContent=prods.length+" sản phẩm";
// Show a DIVERSE random mix of categories on the initial floating list
// (bếp, máy hút mùi, chậu, vòi, khóa, kệ, lò...) instead of the first N
// catalog rows, which can be dominated by one product type (khóa cửa).
// STRICT diversity guard (v19): the initial floating list MUST be a diverse
// round-robin across product families. NEVER fall back to prods.slice(0,20)
// (the first catalog rows), because a stale/missing getDiverseProducts would
// otherwise render whatever rows the index happens to start with. If we have
// no diverse helper or it returns empty, re-derive a diverse mix from the raw
// catalog via a guaranteed function, and as a last resort pick spread-apart
// products (every ~Nth row) so a single family can never dominate the panel.
let listProds = (window.vaix?.getDiverseProducts) ? window.vaix.getDiverseProducts(20) : [];
if(!listProds || !listProds.length){
if(window.vaix && typeof window.vaix.getDiverseProducts === "function"){
try{ listProds = window.vaix.getDiverseProducts(20); }catch(_e){ listProds = []; }
}
if(!listProds || !listProds.length){
const step = Math.max(1, Math.floor(prods.length / 20));
for(let i=0;i`:'📦
')+`${item.title_clean||item.name}
${item.brand||""}
${item.priceNum>0?item.priceNum.toLocaleString("vi-VN")+"₫":"Liên hệ"}