-
-
+ const drawer = document.createElement('div');
+ drawer.className = 'drawer';
+ drawer.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📋 Copy kết quả và dán vào ô reply nhé!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
📋 Copy kết quả và tự dán vào ô comment nhé!
-
`;
-
- overlay.appendChild(modal);
shadow.appendChild(style);
- shadow.appendChild(overlay);
+ shadow.appendChild(fab);
+ shadow.appendChild(drawer);
- // Điền text tweet
- shadow.getElementById('ai-tweet').textContent = tweetText;
+ const toggleDrawer = () => drawer.classList.toggle('open');
+ fab.addEventListener('click', toggleDrawer);
+ drawer.querySelector('.btn-x').addEventListener('click', () => drawer.classList.remove('open'));
+ requestAnimationFrame(() => drawer.classList.add('open'));
+
+ // Refs
+ const langSel = drawer.querySelector('#ai-lang');
+ const toneSel = drawer.querySelector('#ai-tone');
+ const toneHint = drawer.querySelector('#ai-tone-hint');
+ const angleSel = drawer.querySelector('#ai-angle');
+ const angleHint= drawer.querySelector('#ai-angle-hint');
+ const runBtn = drawer.querySelector('#ai-run');
+ const statusEl = drawer.querySelector('#ai-status');
+ const copyHint = drawer.querySelector('#ai-hint');
+
+ function buildLangOptions() {
+ return LANGS.map(l => `
`).join('');
+ }
+
+ function populateSelect(sel, items, selectedValue) {
+ sel.innerHTML = items.map(it =>
+ `
`
+ ).join('');
+ if (selectedValue && items.find(i => i.value === selectedValue)) {
+ sel.value = selectedValue;
+ }
+ }
+
+ function updateTone(lang, keepValueIfValid) {
+ const items = getTones(lang);
+ const old = toneSel.value;
+ populateSelect(toneSel, items, keepValueIfValid && items.find(i => i.value === old) ? old : null);
+ onToneChange();
+ }
+
+ function onToneChange() {
+ const lang = langSel.value;
+ const tone = toneSel.value;
+ const tItem = getTones(lang).find(i => i.value === tone);
+ toneHint.textContent = tItem ? tItem.text : '';
+
+ const oldAngle = angleSel.value;
+ const aItems = getAngles(tone);
+ populateSelect(angleSel, aItems, aItems.find(i => i.value === oldAngle) ? oldAngle : null);
+ onAngleChange();
+ }
+
+ function onAngleChange() {
+ const tone = toneSel.value;
+ const angle = angleSel.value;
+ const aItem = getAngles(tone).find(i => i.value === angle);
+ angleHint.textContent = aItem ? aItem.text : '';
+ }
// Events
- shadow.getElementById('ai-close').addEventListener('click', removeModal);
+ langSel.addEventListener('change', () => {
+ // Đổi lang: rebuild tone, nếu tone cũ không tồn tại trong list mới thì reset
+ updateTone(langSel.value, true);
+ });
- shadow.getElementById('ai-run').addEventListener('click', () => {
- const language = shadow.getElementById('ai-language').value;
- const tone = shadow.getElementById('ai-tone').value;
- const angle = shadow.getElementById('ai-angle').value;
- const status = shadow.getElementById('ai-status');
- const btn = shadow.getElementById('ai-run');
+ toneSel.addEventListener('change', onToneChange);
+ angleSel.addEventListener('change', onAngleChange);
- btn.disabled = true;
- status.style.display = 'block';
- status.className = 'status ok';
- status.innerHTML = '
⏳ Đang tạo comment...';
+ // Init
+ updateTone(langSel.value, false);
- chrome.runtime.sendMessage({
- action: 'GENERATE_COMMENT',
- data: { text: tweetText, tone, angle, language }
- });
+ // Generate
+ runBtn.addEventListener('click', () => {
+ const lang = langSel.value;
+ const tone = toneSel.value;
+ const angle = angleSel.value;
+
+ runBtn.disabled = true;
+ statusEl.style.display = 'block';
+ statusEl.className = 'status ok';
+ statusEl.textContent = '⏳ Đang gọi API...';
+ copyHint.style.display = 'none';
+
+ chrome.runtime.sendMessage(
+ { action: 'GENERATE_COMMENT', data: { text: tweetText, lang, tone, angle } },
+ () => {
+ if (chrome.runtime.lastError) {
+ statusEl.className = 'status err';
+ statusEl.textContent = 'Lỗi kết nối background: ' + chrome.runtime.lastError.message;
+ runBtn.disabled = false;
+ }
+ }
+ );
});
}
- // ===== D. HIỂN THỊ KẾT QUẢ / LỖI =====
+ // ===== D. RESULT / ERROR =====
function showResult(comment) {
- const host = document.getElementById('x-comment-ai-host');
- if (!host) return;
- const s = host.shadowRoot;
- const status = s.getElementById('ai-status');
- const btn = s.getElementById('ai-run');
- const hint = s.getElementById('ai-hint');
+ if (!sidebarHost) return;
+ const s = sidebarHost.shadowRoot;
+ const statusEl = s.querySelector('#ai-status');
+ const copyHint = s.querySelector('#ai-hint');
+ const runBtn = s.querySelector('#ai-run');
+ const drawer = s.querySelector('.drawer');
- status.style.display = 'block';
- status.className = 'status ok';
- status.textContent = comment;
-
- hint.style.display = 'block';
- if (btn) btn.disabled = false;
+ if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status ok'; statusEl.textContent = comment; }
+ if (copyHint) copyHint.style.display = 'block';
+ if (runBtn) runBtn.disabled = false;
+ if (drawer) drawer.classList.add('open');
}
function showError(msg) {
- const host = document.getElementById('x-comment-ai-host');
- if (!host) return;
- const s = host.shadowRoot;
- const status = s.getElementById('ai-status');
- const btn = s.getElementById('ai-run');
+ if (!sidebarHost) return;
+ const s = sidebarHost.shadowRoot;
+ const statusEl = s.querySelector('#ai-status');
+ const runBtn = s.querySelector('#ai-run');
+ const drawer = s.querySelector('.drawer');
- status.style.display = 'block';
- status.className = 'status err';
- status.textContent = 'Lỗi: ' + msg;
-
- if (btn) btn.disabled = false;
+ if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status err'; statusEl.textContent = 'Lỗi: ' + msg; }
+ if (runBtn) runBtn.disabled = false;
+ if (drawer) drawer.classList.add('open');
}
- function removeModal() {
- const el = document.getElementById('x-comment-ai-host');
- if (el) el.remove();
+ function removeSidebar() {
+ if (sidebarHost) { sidebarHost.remove(); sidebarHost = null; }
+ }
+
+ function escapeHtml(text) {
+ const d = document.createElement('div'); d.textContent = text; return d.innerHTML;
}
})();
\ No newline at end of file