Upload src/app.js

src/app.js

@@ -112,7 +112,7 @@ let autoGreetingSent = false;
 /** Pre-fetched short news hook */
 let preFetchedGreeting = null;
 
-// Store the latest news URL so frontend can inject it into the greeting
+/** URL và tên nguồn tin tức để frontend inject link clickable */
 let latestNewsUrl = null;
 let latestNewsSource = null;
 
@@ -135,6 +135,39 @@ function saveSettings() {
   localStorage.setItem(STORAGE_KEYS.subtitles, settings.subtitles ? "1" : "0");
 }
 
+/**
+ * Rút gọn hostname thành tên nguồn dễ đọc (vd: "vnexpress.net" → "VnExpress").
+ * Dùng cho cả instruction (AI nói) và regex matching (frontend inject link).
+ */
+function getSourceName(hostname) {
+  const name = hostname.replace(/^www\./, "").toLowerCase();
+  const known = {
+    "vnexpress.net": "VnExpress",
+    "dantri.com.vn": "Dân trí",
+    "tuoitre.vn": "Tuổi Trẻ",
+    "thanhnien.vn": "Thanh Niên",
+    "nhandan.vn": "Nhân Dân",
+    "vietnamnet.vn": "VietNamNet",
+    "zingnews.vn": "ZingNews",
+    "cafef.vn": "CafeF",
+    "techz.vn": "TechZ",
+    "genk.vn": "GenK",
+    "soha.vn": "Soha",
+    "kenh14.vn": "Kênh 14",
+    "afamily.vn": "Afamily",
+    "eva.vn": "Eva",
+    "ngoisao.vn": "Ngôi Sao",
+    "giadinh.net.vn": "Gia đình",
+    "tienphong.vn": "Tiền Phong",
+    "plo.vn": "PLO",
+    "vtc.vn": "VTC",
+    "vtv.vn": "VTV",
+    "dantri.com": "Dân trí",
+    "vnexpress": "VnExpress",
+  };
+  return known[name] || name;
+}
+
 /**
  * Build system instructions sent to the backend.
  * The AI gets a short news hook (if any) and is told to greet naturally.
@@ -148,13 +181,15 @@ function effectiveInstructions(newsHook) {
   const timeStr = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
   const dateLine = `Today is ${dateStr}. The current time is ${timeStr}.`;
   const extra = settings.instructions.trim();
-  // TIỀN TỐ: Câu giới thiệu được thêm vào mỗi câu chào
   const introLine = "Tôi tên là Vương đến V.AI STUDIO.";
-  // HẬU TỐ: Chỉ mention tên nguồn (vnexpress.net) — KHÔNG bao gồm URL hay thẻ <a>
-  // URL sẽ được frontend inject sau khi nhận response để tránh TTS đọc URL.
+  
+  // Chỉ mention tên nguồn (VnExpress) — KHÔNG có URL hay thẻ <a>
+  // AI chỉ nói "nguồn VnExpress" — TTS đọc 2 từ, ko đọc URL
+  const sourceName = newsHook ? getSourceName(new URL(newsHook.link).hostname) : "";
   const newsInst = newsHook
-    ? `\n\nWhen you start the conversation, greet the user naturally and briefly mention today's news hook: "${newsHook.title}"\nAfter the greeting, say the source name like: "(nguồn VnExpress)" — just the site name, NO URL.\nKeep your greeting to ONE short sentence.`
+    ? `\n\nWhen you start the conversation, greet the user naturally and briefly mention today's news hook: "${newsHook.title}"\nAfter the greeting, add the source in EXACT format: "(nguồn ${sourceName})" — WITH parentheses. Example: "Có tin nóng từ báo VnExpress hôm nay: ... (nguồn ${sourceName})"\nKeep your greeting to ONE short sentence.`
     : "";
+  
   const base = `${dateLine}\n\n${introLine}\n\n${DEFAULT_INSTRUCTIONS}${newsInst}`;
   return extra ? `${base}\n\nAdditional user instructions:\n${extra}` : base;
 }
@@ -217,10 +252,8 @@ function setCaption(text, kind = "") { caption.textContent = text; caption.class
 function showSubtitles(text) {
   if (!settings.subtitles) return;
   clearTimeout(subtitleTimer);
-  // Render HTML so source links are clickable
   subtitles.innerHTML = text;
   subtitles.classList.add("visible");
-  // Attach click handler to open links in a popup window
   subtitles.querySelectorAll("a[href]").forEach((a) => {
     a.addEventListener("click", (e) => {
       e.preventDefault();
@@ -233,30 +266,42 @@ function showSubtitles(text) {
 }
 function fadeSubtitles(delayMs = 2600) { clearTimeout(subtitleTimer); subtitleTimer = window.setTimeout(() => subtitles.classList.remove("visible"), delayMs); }
 
+/** Escape special regex characters in a string */
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 /**
  * Add a chat message with optional source link as popup.
- * If the text mentions "nguồn VnExpress" (or similar), inject the real link.
+ * Tự động biến "(nguồn VnExpress)" thành link clickable.
  */
 function addChatMessage(role, text) {
   const msg = document.createElement("div");
   msg.className = `chat-message ${role}`;
   
-  // Inject clickable source link for the first greeting
+  // Inject link clickable: match "(nguồn TênNguồn)" trong text
   let displayText = text;
   if (role === "assistant" && latestNewsUrl && latestNewsSource) {
-    const sourcePattern = new RegExp(`\\(nguồn\\s*${escapeRegex(latestNewsSource)}\\)`, 'gi');
-    if (sourcePattern.test(displayText)) {
-      displayText = displayText.replace(
-        sourcePattern,
-        `<a href="${latestNewsUrl}" target="_blank" rel="noopener" style="color:#22d3ee;text-decoration:none;">(nguồn ${latestNewsSource})</a>`
-      );
+    // Match nhiều format: (nguồn VnExpress), (Nguồn: VnExpress), v.v.
+    const sourceEscaped = escapeRegex(latestNewsSource);
+    const patterns = [
+      new RegExp(`\\(nguồn\\s*${sourceEscaped}\\)`, 'gi'),
+      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) =>
+          `<a href="${latestNewsUrl}" target="_blank" rel="noopener" style="color:#22d3ee;text-decoration:none;">${match}</a>`
+        );
+        break;
+      }
     }
   }
   
   msg.innerHTML = displayText;
   chatMessages.appendChild(msg);
   chatMessages.scrollTop = chatMessages.scrollHeight;
-  // Attach popup link click handlers
   msg.querySelectorAll("a[href]").forEach((a) => {
     a.addEventListener("click", (e) => {
       e.preventDefault();
@@ -268,11 +313,6 @@ function addChatMessage(role, text) {
   });
 }
 
-/** Escape special regex characters in a string */
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
 function showTextChat(show) { textChat.hidden = !show; if (show) chatInput.focus(); }
 
 function sendTextViaSession(text) {
@@ -369,7 +409,6 @@ async function connectSession(c) {
 async function startVoiceSession() {
   if (sessionInProgress) return;
   sessionInProgress = true;
-  // Await AudioContext resume — this runs in user-gesture handler so it resolves
   await stage.resume();
   let micStream;
   if (new URLSearchParams(location.search).has("fakemic")) { const ctx = /** @type {AudioContext} */ (stage.audioCtx); micStream = ctx.createMediaStreamDestination().stream; }
@@ -377,10 +416,10 @@ async function startVoiceSession() {
   const audioCtx = stage.audioCtx; const voiceSink = stage.voiceSink;
   if (!audioCtx || !voiceSink) { sessionInProgress = false; return; }
   const greeting = preFetchedGreeting || (await getHotNewsGreeting());
-  // Store news URL for frontend link injection
+  // Lưu URL và tên nguồn để frontend inject link clickable
   if (greeting) {
     latestNewsUrl = greeting.link;
-    try { latestNewsSource = new URL(greeting.link).hostname.replace(/^www\./, ""); } catch { latestNewsSource = "VnExpress"; }
+    try { latestNewsSource = getSourceName(new URL(greeting.link).hostname); } catch { latestNewsSource = "VnExpress"; }
   }
   const c = new S2sWsRealtimeClient({
     ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
@@ -397,21 +436,18 @@ async function startVoiceSession() {
 
 /**
  * Start a text-only session.
- * Called from user-gesture handler (mainBtn click) so AudioContext
- * resume resolves — audio plays, HeadAudio processes → lipsync works.
  */
 async function startTextSession(initialText) {
   if (sessionInProgress) { if (client && initialText) { client.sendUserText(initialText); client.requestResponse(); } return; }
   sessionInProgress = true;
-  // Await AudioContext resume — this is inside user-gesture handler, it WILL resolve
   await stage.resume();
   const audioCtx = stage.audioCtx; const voiceSink = stage.voiceSink;
   if (!audioCtx || !voiceSink) { sessionInProgress = false; return; }
   const newsHook = preFetchedGreeting || (await getHotNewsGreeting());
-  // Store news URL for frontend link injection
+  // Lưu URL và tên nguồn để frontend inject link clickable
   if (newsHook) {
     latestNewsUrl = newsHook.link;
-    try { latestNewsSource = new URL(newsHook.link).hostname.replace(/^www\./, ""); } catch { latestNewsSource = "VnExpress"; }
+    try { latestNewsSource = getSourceName(new URL(newsHook.link).hostname); } catch { latestNewsSource = "VnExpress"; }
   }
   const c = new S2sWsRealtimeClient({
     ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
@@ -433,7 +469,6 @@ function _attachClientEvents(c) {
   c.addEventListener("transcript", (e) => {
     const { role, text } = /** @type {CustomEvent} */ (e).detail;
     if (role === "assistant" && text) { 
-      // Display: keep numbers as digits for clean visual
       const normalized = smartNormalize(text); 
       showSubtitles(normalized); 
       addChatMessage("assistant", normalized); 
@@ -455,7 +490,6 @@ async function endSession(silent = false) {
 // ── UI events ────────────────────────────────────────────────────────────
 mainBtn.addEventListener("click", () => {
   if (mainAction === "start") {
-    // User gesture! AudioContext.resume() will resolve → audio plays + lipsync works.
     if (sessionInProgress) return;
     if (new URLSearchParams(location.search).has("fakemic")) {
       void startTextSession();
@@ -489,18 +523,11 @@ async function boot() {
   makeDraggable(); makeResizable();
   const url = new URL(location.href); url.searchParams.set("fakemic", "1"); history.replaceState(null, "", url.href);
   setCaption("WAKING HER UP…"); setMainButton("busy", "Loading…");
-  // Pre-fetch news hook in parallel with avatar
   const newsPromise = (settings.avatar === "vuong.glb" || !settings.avatar) ? getHotNewsGreeting().catch(() => null) : Promise.resolve(null);
   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))}%`; } }); }
   catch (err) { console.error(err); loading.textContent = "Avatar failed to load. Reload."; setCaption("AVATAR FAILED", "error"); return; }
   preFetchedGreeting = await newsPromise;
   loading.classList.add("done");
   setCaption(CAPTIONS.idle); setMainButton("start", "Start talking");
-
-  // NO auto-greeting here. On direct hf.space domains AudioContext is
-  // "suspended" before first click — any audio routed through a suspended
-  // context is silent and HeadAudio won't process any frames.
-  // User must tap "Start talking" → click provides user gesture →
-  // AudioContext.resume() resolves → audio plays → HeadAudio drives lipsync.
 }
 void boot();