codymaster 4.1.0

package/skills/cm-readit/examples/voice-cro.js

@@ -0,0 +1,390 @@
+/**
+ * Voice CRO System — AI Sales Consultant (1-chiều)
+ * Trigger-based bottom sheet + pre-generated MP3 + TTS fallback
+ * Config-driven, per-page voice scripts & triggers
+ */
+
+(function () {
+    'use strict';
+
+    /* ─── Page Config ─── */
+    const CONFIG = {
+        '/': {
+            delay: 20000, scroll: 0.30,
+            audio: ['/audio/homepage-intro.mp3', '/audio/homepage-full.mp3'],
+            sheetIcon: '🎧',
+            sheetText: 'Bạn muốn nghe giới thiệu nhanh về dịch vụ?',
+            ctaText: 'Đặt Lịch Ngay', ctaHref: '#uu-dai'
+        },
+        '/index.html': null, // alias → use '/'
+        '/tri-lieu-co-vai-gay.html': {
+            delay: 15000, scroll: 0.25,
+            audio: ['/audio/vai-gay-intro.mp3', '/audio/vai-gay-full.mp3'],
+            sheetIcon: '💆',
+            sheetText: 'Đau vai gáy lâu rồi? Nghe tư vấn nhanh từ chuyên gia',
+            ctaText: 'Đặt Lịch Ngay', ctaHref: '#dat-lich'
+        },
+        '/tri-mat-ngu.html': {
+            delay: 18000, scroll: 0.30,
+            audio: ['/audio/mat-ngu-intro.mp3', '/audio/mat-ngu-full.mp3'],
+            sheetIcon: '🌙',
+            sheetText: 'Mất ngủ kiệt sức? Dưỡng sinh tạng giúp lấy lại giấc ngủ sâu',
+            ctaText: 'Đặt Lịch Dưỡng Sinh', ctaHref: '#dat-lich',
+            checkboxTrigger: { selector: '.check-item input[type=checkbox]', minChecked: 2 }
+        },
+        '/tri-lieu-dau-lung-xuong-khop.html': {
+            delay: 20000, scroll: 0.35,
+            audio: ['/audio/dau-lung-intro.mp3', '/audio/dau-lung-full.mp3'],
+            sheetIcon: '🦴',
+            sheetText: 'Tìm hiểu cho bố mẹ? Nghe tư vấn an toàn từ chuyên gia',
+            ctaText: 'Tư Vấn Miễn Phí', ctaHref: '#dat-lich'
+        },
+        '/phuc-hoi-the-thao.html': {
+            delay: 12000, scroll: 0.20,
+            audio: ['/audio/the-thao-intro.mp3', '/audio/the-thao-full.mp3'],
+            sheetIcon: '💪',
+            sheetText: 'DOMS kéo dài? Massage Đông y giúp recovery thật sự',
+            ctaText: 'Đặt Lịch Massage', ctaHref: '#dat-lich'
+        },
+        '/cham-soc-me-sau-sinh.html': {
+            delay: 18000, scroll: 0.25,
+            audio: ['/audio/me-sau-sinh-intro.mp3', '/audio/me-sau-sinh-full.mp3'],
+            sheetIcon: '💝',
+            sheetText: 'Mẹ ơi, mẹ xứng đáng được chăm sóc',
+            ctaText: 'Đặt Lịch Cho Mẹ', ctaHref: '#dat-lich'
+        },
+        '/thu-gian-premium.html': {
+            delay: 22000, scroll: 0.35,
+            audio: ['/audio/premium-intro.mp3', '/audio/premium-full.mp3'],
+            sheetIcon: '✦',
+            sheetText: 'Tìm kiếm trải nghiệm dưỡng sinh toàn diện?',
+            ctaText: 'Đặt Lịch Dưỡng Sinh', ctaHref: '#dat-lich'
+        },
+        '/khoa-hoc-bam-huyet.html': {
+            delay: 25000, scroll: 0.40,
+            audio: ['/audio/khoa-hoc-intro.mp3', '/audio/khoa-hoc-full.mp3'],
+            sheetIcon: '📚',
+            sheetText: 'Muốn chuyển nghề? Nghe chia sẻ từ học viên',
+            ctaText: 'Đăng Ký Tư Vấn', ctaHref: '#dat-lich'
+        }
+    };
+
+    /* ─── State ─── */
+    const STATE_KEY = 'voiceCroDismissed';
+    const STATS_KEY = 'voiceCroStats';
+    let currentAudio = null;
+    let sheetEl = null;
+    let playerEl = null;
+    let isPlaying = false;
+    let playingPart = 0; // 0=none, 1=intro, 2=full
+
+    /* ─── Helpers ─── */
+    function getPageConfig() {
+        const path = window.location.pathname;
+        // Try exact match, then alias, then root
+        let cfg = CONFIG[path];
+        if (cfg === null && CONFIG['/']) cfg = CONFIG['/']; // alias
+        if (!cfg && path === '/') cfg = CONFIG['/'];
+        return cfg || null;
+    }
+
+    function isDismissed() {
+        try { return sessionStorage.getItem(STATE_KEY) === '1'; } catch { return false; }
+    }
+
+    function setDismissed() {
+        try { sessionStorage.setItem(STATE_KEY, '1'); } catch { /* noop */ }
+    }
+
+    function trackStat(event) {
+        try {
+            const stats = JSON.parse(localStorage.getItem(STATS_KEY) || '{}');
+            const page = window.location.pathname;
+            if (!stats[page]) stats[page] = {};
+            stats[page][event] = (stats[page][event] || 0) + 1;
+            stats[page].lastSeen = Date.now();
+            localStorage.setItem(STATS_KEY, JSON.stringify(stats));
+        } catch { /* noop */ }
+    }
+
+    function getScrollPercent() {
+        const h = document.documentElement.scrollHeight - window.innerHeight;
+        return h > 0 ? window.scrollY / h : 0;
+    }
+
+    /* ─── Audio Playback ─── */
+    function playAudio(src, onEnd) {
+        stopAudio();
+        currentAudio = new Audio(src);
+        currentAudio.volume = 0.85;
+        currentAudio.addEventListener('ended', () => {
+            isPlaying = false;
+            if (onEnd) onEnd();
+            updatePlayerUI();
+        });
+        currentAudio.addEventListener('error', () => {
+            isPlaying = false;
+            if (onEnd) onEnd();
+            updatePlayerUI();
+        });
+        const playPromise = currentAudio.play();
+        if (playPromise) {
+            playPromise.then(() => {
+                isPlaying = true;
+                updatePlayerUI();
+            }).catch(() => {
+                isPlaying = false;
+                updatePlayerUI();
+            });
+        }
+    }
+
+    function stopAudio() {
+        if (currentAudio) {
+            currentAudio.pause();
+            currentAudio.currentTime = 0;
+            currentAudio = null;
+        }
+        isPlaying = false;
+    }
+
+    function togglePause() {
+        if (!currentAudio) return;
+        if (currentAudio.paused) {
+            currentAudio.play();
+            isPlaying = true;
+        } else {
+            currentAudio.pause();
+            isPlaying = false;
+        }
+        updatePlayerUI();
+    }
+
+    /* ─── Bottom Sheet ─── */
+    function createSheet(cfg) {
+        const el = document.createElement('div');
+        el.className = 'vcro-sheet';
+        el.innerHTML = `
+      <div class="vcro-sheet-inner">
+        <button class="vcro-sheet-close" aria-label="Đóng">✕</button>
+        <div class="vcro-sheet-icon">${cfg.sheetIcon}</div>
+        <p class="vcro-sheet-text">${cfg.sheetText}</p>
+        <div class="vcro-sheet-actions">
+          <button class="vcro-sheet-listen btn btn-primary btn-sm">🔊 Nghe Ngay</button>
+          <button class="vcro-sheet-dismiss btn btn-outline btn-sm">Để Sau</button>
+        </div>
+      </div>
+    `;
+
+        // Close
+        el.querySelector('.vcro-sheet-close').addEventListener('click', () => dismiss(el));
+        el.querySelector('.vcro-sheet-dismiss').addEventListener('click', () => dismiss(el));
+
+        // Listen
+        el.querySelector('.vcro-sheet-listen').addEventListener('click', () => {
+            trackStat('listen');
+            el.classList.remove('active');
+            setTimeout(() => el.remove(), 400);
+            playIntro(cfg);
+        });
+
+        // Swipe down to dismiss (mobile)
+        let startY = 0;
+        el.addEventListener('touchstart', (e) => { startY = e.touches[0].clientY; }, { passive: true });
+        el.addEventListener('touchmove', (e) => {
+            const dy = e.touches[0].clientY - startY;
+            if (dy > 60) dismiss(el);
+        }, { passive: true });
+
+        document.body.appendChild(el);
+        // Animate in
+        requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('active')));
+        sheetEl = el;
+        trackStat('shown');
+    }
+
+    function dismiss(el) {
+        setDismissed();
+        trackStat('dismissed');
+        el.classList.remove('active');
+        setTimeout(() => el.remove(), 400);
+    }
+
+    /* ─── Mini Player Bar ─── */
+    function createPlayer(cfg) {
+        const el = document.createElement('div');
+        el.className = 'vcro-player';
+        el.innerHTML = `
+      <div class="vcro-player-inner">
+        <button class="vcro-player-toggle" aria-label="Play/Pause">
+          <span class="vcro-player-icon">⏸</span>
+        </button>
+        <div class="vcro-player-info">
+          <span class="vcro-player-label">Đang phát...</span>
+          <div class="vcro-player-progress"><div class="vcro-player-bar"></div></div>
+        </div>
+        <button class="vcro-player-next btn btn-primary btn-sm" style="display:none;">Nghe Tiếp</button>
+        <a href="${cfg.ctaHref}" class="vcro-player-cta btn btn-primary btn-sm">${cfg.ctaText}</a>
+        <button class="vcro-player-close" aria-label="Đóng">✕</button>
+      </div>
+    `;
+
+        el.querySelector('.vcro-player-toggle').addEventListener('click', togglePause);
+        el.querySelector('.vcro-player-close').addEventListener('click', () => {
+            stopAudio();
+            el.classList.remove('active');
+            setTimeout(() => el.remove(), 400);
+            playerEl = null;
+        });
+
+        // Next button → play full audio
+        el.querySelector('.vcro-player-next').addEventListener('click', () => {
+            trackStat('listenFull');
+            playingPart = 2;
+            el.querySelector('.vcro-player-next').style.display = 'none';
+            el.querySelector('.vcro-player-label').textContent = 'Nghe tư vấn chi tiết...';
+            playAudio(cfg.audio[1], () => {
+                el.querySelector('.vcro-player-label').textContent = 'Cảm ơn bạn đã lắng nghe!';
+                el.querySelector('.vcro-player-icon').textContent = '✓';
+                el.querySelector('.vcro-player-cta').style.display = 'inline-flex';
+            });
+        });
+
+        document.body.appendChild(el);
+        requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('active')));
+        playerEl = el;
+
+        // Progress tracking
+        startProgressTracking();
+    }
+
+    function updatePlayerUI() {
+        if (!playerEl) return;
+        const icon = playerEl.querySelector('.vcro-player-icon');
+        if (isPlaying) {
+            icon.textContent = '⏸';
+        } else if (currentAudio && !currentAudio.ended) {
+            icon.textContent = '▶';
+        }
+    }
+
+    function startProgressTracking() {
+        const update = () => {
+            if (!currentAudio || !playerEl) return;
+            const bar = playerEl.querySelector('.vcro-player-bar');
+            if (bar && currentAudio.duration) {
+                bar.style.width = (currentAudio.currentTime / currentAudio.duration * 100) + '%';
+            }
+            if (isPlaying) requestAnimationFrame(update);
+        };
+        requestAnimationFrame(update);
+        // Also re-trigger on play
+        if (currentAudio) {
+            currentAudio.addEventListener('play', () => requestAnimationFrame(update));
+        }
+    }
+
+    /* ─── Play Flow ─── */
+    function playIntro(cfg) {
+        playingPart = 1;
+        createPlayer(cfg);
+        playerEl.querySelector('.vcro-player-label').textContent = 'Nghe giới thiệu...';
+        playerEl.querySelector('.vcro-player-cta').style.display = 'none';
+
+        playAudio(cfg.audio[0], () => {
+            // Intro done → show "Nghe Tiếp" button
+            if (playerEl) {
+                playerEl.querySelector('.vcro-player-label').textContent = 'Bạn muốn nghe thêm?';
+                playerEl.querySelector('.vcro-player-next').style.display = 'inline-flex';
+                playerEl.querySelector('.vcro-player-icon').textContent = '✓';
+                playerEl.querySelector('.vcro-player-cta').style.display = 'inline-flex';
+            }
+        });
+    }
+
+    /* ─── Trigger Logic ─── */
+    function initTrigger(cfg) {
+        if (isDismissed()) return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+        let timeReady = false;
+        let scrollReady = false;
+        let checkboxReady = false;
+        let triggered = false;
+
+        const tryTrigger = () => {
+            if (triggered) return;
+            // Normal path: time + scroll
+            if (timeReady && scrollReady) {
+                triggered = true;
+                createSheet(cfg);
+                return;
+            }
+            // Checkbox shortcut (mất ngủ page)
+            if (checkboxReady) {
+                triggered = true;
+                createSheet(cfg);
+            }
+        };
+
+        // Time trigger
+        setTimeout(() => {
+            timeReady = true;
+            tryTrigger();
+        }, cfg.delay);
+
+        // Scroll trigger
+        const onScroll = () => {
+            if (getScrollPercent() >= cfg.scroll) {
+                scrollReady = true;
+                window.removeEventListener('scroll', onScroll);
+                tryTrigger();
+            }
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        // Check immediately in case page is already scrolled
+        onScroll();
+
+        // Checkbox trigger (if configured)
+        if (cfg.checkboxTrigger) {
+            const checkboxes = document.querySelectorAll(cfg.checkboxTrigger.selector);
+            if (checkboxes.length) {
+                checkboxes.forEach(cb => {
+                    cb.addEventListener('change', () => {
+                        const checked = document.querySelectorAll(cfg.checkboxTrigger.selector + ':checked').length;
+                        if (checked >= cfg.checkboxTrigger.minChecked) {
+                            checkboxReady = true;
+                            tryTrigger();
+                        }
+                    });
+                });
+            }
+        }
+    }
+
+    /* ─── Init ─── */
+    function init() {
+        const cfg = getPageConfig();
+        if (!cfg) return;
+
+        // Verify audio files exist (preload)
+        if (cfg.audio && cfg.audio.length) {
+            const preload = new Audio();
+            preload.preload = 'none'; // Just check existence later
+            preload.src = cfg.audio[0];
+        }
+
+        // Don't compete with blog reader
+        if (document.querySelector('.reader-player-bar.active')) return;
+
+        initTrigger(cfg);
+    }
+
+    // Wait for DOM
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+})();

package/skills/cm-readit/tts-engine.md

@@ -0,0 +1,262 @@
+# TTS Engine — SpeechSynthesis API Reference
+
+> The browser's built-in text-to-speech engine. Zero dependencies, works offline on most devices.
+
+---
+
+## API Quick Reference
+
+```javascript
+const synth = window.speechSynthesis;
+
+// Core methods
+synth.speak(utterance)     // Start speaking
+synth.pause()              // Pause
+synth.resume()             // Resume
+synth.cancel()             // Stop all (⚠️ triggers onerror!)
+synth.getVoices()          // Returns SpeechSynthesisVoice[]
+
+// Properties
+synth.speaking             // boolean — currently speaking?
+synth.paused               // boolean — currently paused?
+synth.pending              // boolean — utterances in queue?
+
+// Events
+synth.onvoiceschanged      // Fires when voice list changes
+```
+
+### SpeechSynthesisUtterance
+
+```javascript
+const u = new SpeechSynthesisUtterance(text);
+u.lang   = 'vi-VN';        // BCP-47 language tag
+u.voice  = voiceObject;     // SpeechSynthesisVoice
+u.rate   = 1.0;             // 0.1 — 10 (normal = 1.0)
+u.pitch  = 1.0;             // 0 — 2 (normal = 1.0)
+u.volume = 1.0;             // 0 — 1
+
+// Events
+u.onstart    = fn;          // Speaking started
+u.onend      = fn;          // Finished speaking this utterance
+u.onerror    = fn(event);   // Error occurred (event.error = string)
+u.onpause    = fn;          // Paused
+u.onresume   = fn;          // Resumed
+u.onboundary = fn(event);   // Word/sentence boundary (event.charIndex)
+```
+
+---
+
+## Content Extraction Pattern
+
+```javascript
+function extractCoreText(containerSelector) {
+    const container = document.querySelector(containerSelector);
+    if (!container || !container.textContent.trim()) return '';
+
+    const clone = container.cloneNode(true);
+
+    // STRIP non-content elements
+    clone.querySelectorAll([
+        // Navigation & structure
+        'nav, footer, header, aside',
+        // Media (cannot be spoken)
+        'img, video, audio, iframe, svg, figure, canvas',
+        // Scripts & styles
+        'script, style, noscript',
+        // Hidden elements
+        '[aria-hidden="true"], [hidden], .sr-only',
+        // Site-specific noise (customize per project)
+        '.cta-box, .tags, .related-posts, .comments',
+        '.advertisement, .promo, .popup'
+    ].join(', ')).forEach(el => el.remove());
+
+    return clone.innerText
+        .replace(/\n{3,}/g, '\n\n')   // collapse excess newlines
+        .replace(/\s{2,}/g, ' ')       // collapse excess spaces
+        .trim();
+}
+```
+
+**Customization:** The strip selector should be adapted per project. Common additions:
+- Blog: `.blog-cta-box, .blog-tags, .blog-related`
+- E-commerce: `.add-to-cart, .price-compare, .reviews-count`
+- Docs: `.sidebar-nav, .edit-on-github, .breadcrumb`
+
+---
+
+## Chunking Strategy
+
+### Why Chunk?
+
+Browsers have hard limits on utterance text length:
+- **Chrome**: ~5000 chars (silently fails beyond)
+- **Safari**: ~4000 chars
+- **Firefox**: ~3000 chars
+- **Safe maximum**: **2500 chars**
+
+### Sentence-Aware Splitting
+
+```javascript
+function splitIntoChunks(text, maxLen = 2500) {
+    const chunks = [];
+    const sentences = text.split(/(?<=[.!?。？！\n])\s+/);
+    let current = '';
+
+    for (const sentence of sentences) {
+        if ((current + ' ' + sentence).length > maxLen && current) {
+            chunks.push(current.trim());
+            current = sentence;
+        } else {
+            current += (current ? ' ' : '') + sentence;
+        }
+    }
+    if (current.trim()) chunks.push(current.trim());
+    return chunks;
+}
+```
+
+### Chunk Chaining
+
+```javascript
+function buildUtterances(chunks, voice, rate = 1.0) {
+    return chunks.map((chunk, i) => {
+        const u = new SpeechSynthesisUtterance(chunk);
+        u.lang = 'vi-VN'; // set per project
+        u.rate = rate;
+        u.pitch = 1.0;
+        if (voice) u.voice = voice;
+
+        u.onend = () => {
+            if (i < chunks.length - 1) {
+                currentIdx = i + 1;
+                synth.speak(utterances[currentIdx]);
+                updateProgress();
+            } else {
+                stopReading(); // last chunk done
+            }
+        };
+
+        u.onerror = (e) => {
+            // synth.cancel() fires onerror with 'canceled'
+            if (e.error === 'canceled' || e.error === 'interrupted') return;
+            stopReading();
+        };
+
+        return u;
+    });
+}
+```
+
+---
+
+## Voice Selection
+
+### Strategy
+
+```javascript
+function getVoice(langCode = 'vi-VN') {
+    const voices = speechSynthesis.getVoices();
+    const prefix = langCode.split('-')[0]; // 'vi'
+
+    // 1. Exact match + local (fastest, works offline)
+    const local = voices.find(v => v.lang === langCode && v.localService);
+    if (local) return local;
+
+    // 2. Exact match (may be network/higher quality)
+    const exact = voices.find(v => v.lang === langCode);
+    if (exact) return exact;
+
+    // 3. Language prefix match
+    const prefix_match = voices.find(v => v.lang.startsWith(prefix));
+    if (prefix_match) return prefix_match;
+
+    // 4. null = browser default
+    return null;
+}
+```
+
+### Voices Loading (Async)
+
+On some browsers (Chrome), `getVoices()` returns empty until loaded:
+
+```javascript
+if (synth.getVoices().length === 0) {
+    synth.addEventListener('voiceschanged', function onVoices() {
+        synth.removeEventListener('voiceschanged', onVoices);
+        // Now voices are available
+    });
+}
+```
+
+---
+
+## Chrome Keep-Alive
+
+> **The #1 TTS bug:** Chrome stops `SpeechSynthesis` after ~15 seconds of continuous speech. No error is thrown. Audio simply stops.
+
+### Fix
+
+```javascript
+let keepAliveTimer = null;
+
+function startKeepAlive() {
+    stopKeepAlive();
+    keepAliveTimer = setInterval(() => {
+        if (synth.speaking && !synth.paused) {
+            synth.pause();
+            synth.resume();
+        }
+    }, 10000); // every 10 seconds
+}
+
+function stopKeepAlive() {
+    if (keepAliveTimer) {
+        clearInterval(keepAliveTimer);
+        keepAliveTimer = null;
+    }
+}
+```
+
+**Always start keep-alive when speaking, stop when done.**
+
+---
+
+## Rate & Pitch Guide
+
+| Rate | Feel | Use Case |
+|------|------|----------|
+| 0.7 | Very slow | Elderly users, complex medical content |
+| 0.85 | Slow | Educational, foreign language |
+| 1.0 | Normal | General content |
+| 1.2 | Slightly fast | News, light reading |
+| 1.5 | Fast | Familiar content, power users |
+| 2.0 | Very fast | Scanning, speed reading |
+
+**Default recommendation:** `1.0` for general, `0.9` for specialized/medical content.
+
+---
+
+## Browser Support
+
+| Browser | SpeechSynthesis | Voices | Keep-Alive Needed |
+|---------|----------------|--------|-------------------|
+| Chrome | ✅ | Network + Local | ✅ Yes (pause/resume) |
+| Safari | ✅ | Local only | ❌ No |
+| Firefox | ✅ | Local only | ❌ No |
+| Edge | ✅ | Network + Local | ✅ Yes (same as Chrome) |
+| Mobile Chrome | ✅ | Limited | ✅ Yes |
+| Mobile Safari | ✅ | Good vi-VN | ❌ No |
+
+---
+
+## Error Handling Matrix
+
+| Error | Cause | Recovery |
+|-------|-------|----------|
+| `canceled` | `synth.cancel()` called | Ignore (expected) |
+| `interrupted` | New utterance replaced current | Ignore (expected) |
+| `audio-busy` | Another utterance playing | Wait and retry |
+| `network` | Network voice unavailable | Fall back to local voice |
+| `synthesis-unavailable` | TTS engine not available | Show "Not supported" message |
+| `synthesis-failed` | Voice failed to synthesize | Try different voice or skip chunk |
+| `not-allowed` | User hasn't interacted | Require button click first |