Upload static/app_v2.js with huggingface_hub

static/app_v2.js

@@ -769,3 +769,172 @@ async function publishPersonalPostFromModal() {
         btn.textContent = origText;
     }
 }
+
+// ===== PERSONAL OPINION POST: Viết bài dựa trên quan điểm cá nhân + tin HOT =====
+async function openPersonalPostPreview() {
+    const opinion = document.getElementById('opinion-input')?.value.trim();
+    if (!opinion || opinion.length < 10) {
+        alert('Vui lòng nhập quan điểm cá nhân (ít nhất 10 ký tự)');
+        return;
+    }
+    
+    const selectedTopics = [];
+    if (window._htTopic) {
+        selectedTopics.push(window._htTopic);
+    }
+    
+    const selectedSources = [];
+    document.querySelectorAll('.hashtag-src-item.selected').forEach(el => {
+        const idx = parseInt(el.dataset.idx || '0');
+    });
+    
+    const btn = event?.target;
+    const origText = btn ? btn.textContent : '';
+    if (btn) { btn.disabled = true; btn.textContent = '⏳ Đang tạo preview...'; }
+    
+    try {
+        const resp = await fetch('/api/personal_post/preview', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                opinion: opinion,
+                selected_topics: selectedTopics,
+                selected_sources: selectedSources
+            })
+        });
+        const data = await resp.json();
+        if (!resp.ok || data.error) throw new Error(data.error || 'Lỗi tạo preview');
+        
+        showPersonalPostModal(data.preview, opinion, selectedTopics, selectedSources);
+    } catch (e) {
+        toast('❌ ' + e.message);
+    } finally {
+        if (btn) { btn.disabled = false; btn.textContent = origText; }
+    }
+}
+
+function showPersonalPostModal(preview, originalOpinion, selectedTopics, selectedSources) {
+    const existing = document.getElementById('personal-post-modal');
+    if (existing) existing.remove();
+    
+    const modal = document.createElement('div');
+    modal.id = 'personal-post-modal';
+    modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto';
+    
+    const slidesHtml = (preview.slides || []).map((s, i) => {
+        return '<div class="preview-slide" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:16px;margin-bottom:12px;max-width:600px;margin-left:auto;margin-right:auto">'
+            + '<div style="display:flex;gap:8px;align-items:flex-start">'
+            + '<div style="flex:0 0 32px;color:#5cb87a;font-size:12px;font-weight:700;margin-top:4px">Slide ' + (i+1) + '</div>'
+            + '<div style="flex:1;min-width:0">'
+            + (s.image ? '<img src="' + s.image + '" style="width:100%;max-height:200px;object-fit:cover;border-radius:8px;margin-bottom:8px" onerror="this.style.display='none'">' : '')
+            + '<textarea class="preview-slide-text" data-index="' + i + '" style="width:100%;min-height:80px;background:#222;border:1px solid #333;color:#eee;border-radius:8px;padding:8px;font-size:13px;resize:vertical;font-family:inherit">' + (s.text || '').replace(/"/g, '"') + '</textarea>'
+            + '</div></div></div>';
+    }).join('');
+    
+    const sourcesHtml = (preview.sources || []).map((s, i) => {
+        const imgSrc = (preview.images && preview.images[i+1]) ? preview.images[i+1] : '';
+        return '<div style="display:flex;gap:8px;padding:8px;background:#202020;border-radius:8px;margin:4px 0;cursor:pointer" onclick="toggleSourceSelection(this, ' + i + ')" data-source-idx="' + i + '" data-url="' + (s.url || '') + '">'
+            + '<div style="flex:0 0 60px;aspect-ratio:16/9;background:#333;border-radius:4px;overflow:hidden">'
+            + (imgSrc ? '<img src="' + imgSrc + '" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none'">' : '')
+            + '</div>'
+            + '<div style="flex:1;min-width:0;font-size:11px;color:#ddd">' + (s.title || '') + '</div>'
+            + '<input type="checkbox" class="source-checkbox" style="margin-top:4px" ' + (i < 3 ? 'checked' : '') + '>'
+            + '</div>';
+    }).join('');
+    
+    modal.innerHTML = '<div style="background:#1a1a1a;border:2px solid #2d8659;border-radius:16px;padding:20px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto">'
+        + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">'
+        + '<h3 style="color:#5cb87a;margin:0;font-size:16px">📝 Xem trước bài quan điểm cá nhân</h3>'
+        + '<button onclick="this.closest('#personal-post-modal').remove()" style="background:none;border:0;color:#fff;font-size:24px;cursor:pointer">✕</button>'
+        + '</div>'
+        + '<div style="margin-bottom:12px">'
+        + '<label style="display:block;color:#888;font-size:11px;margin-bottom:4px">Tiêu đề:</label>'
+        + '<input id="preview-title" value="' + (preview.title || '').replace(/"/g, '"') + '" style="width:100%;background:#222;border:1px solid #333;color:#eee;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:700">'
+        + '</div>'
+        + '<div style="margin-bottom:12px">'
+        + '<label style="display:block;color:#888;font-size:11px;margin-bottom:4px">Quan điểm gốc:</label>'
+        + '<textarea id="preview-opinion" readonly style="width:100%;min-height:60px;background:#141414;border:1px solid #2a2a2a;color:#aaa;border-radius:8px;padding:8px 12px;font-size:12px;resize:vertical">' + originalOpinion.replace(/"/g, '"') + '</textarea>'
+        + '</div>'
+        + '<div style="margin-bottom:12px;max-height:300px;overflow-y:auto">'
+        + '<label style="display:block;color:#888;font-size:11px;margin-bottom:8px">Các slide (có thể chỉnh sửa):</label>'
+        + slidesHtml
+        + '</div>'
+        + '<div style="margin-bottom:12px">'
+        + '<label style="display:block;color:#888;font-size:11px;margin-bottom:8px">Nguồn tin tham khảo (bỏ chọn để loại):</label>'
+        + '<div style="max-height:200px;overflow-y:auto">'
+        + (sourcesHtml || '<div style="color:#777;font-size:12px;padding:8px">Không có nguồn tin</div>')
+        + '</div></div>'
+        + '<div style="display:flex;gap:8px">'
+        + '<button onclick="publishPersonalPostFromModal()" style="flex:1;background:#2d8659;border:0;color:#fff;padding:12px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer">✅ Đăng lên Tường AI</button>'
+        + '<button onclick="this.closest('#personal-post-modal').remove()" style="background:#333;border:0;color:#ccc;padding:12px 16px;border-radius:12px;font-size:12px;cursor:pointer">Hủy</button>'
+        + '</div></div>';
+    
+    document.body.appendChild(modal);
+    
+    window._personalPostPreview = preview;
+    window._personalPostOpinion = originalOpinion;
+}
+
+function toggleSourceSelection(el, idx) {
+    const checkbox = el.querySelector('.source-checkbox');
+    checkbox.checked = !checkbox.checked;
+    el.style.border = checkbox.checked ? '1px solid #2d8659' : '1px solid transparent';
+    el.style.background = checkbox.checked ? '#1a2a1f' : '#202020';
+}
+
+async function publishPersonalPostFromModal() {
+    const title = document.getElementById('preview-title')?.value.trim();
+    if (!title) {
+        alert('Vui lòng nhập tiêu đề');
+        return;
+    }
+    
+    const slides = [];
+    document.querySelectorAll('.preview-slide-text').forEach(ta => {
+        const text = ta.value.trim();
+        if (text) slides.push({ text, image: '', index: slides.length + 1 });
+    });
+    
+    const sources = [];
+    document.querySelectorAll('[data-source-idx]').forEach((el, i) => {
+        const checkbox = el.querySelector('.source-checkbox');
+        if (checkbox.checked && window._personalPostPreview?.sources?.[i]) {
+            sources.push(window._personalPostPreview.sources[i]);
+        }
+    });
+    
+    const btn = event.target;
+    const origText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Đang đăng...';
+    
+    try {
+        const resp = await fetch('/api/personal_post', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                opinion: window._personalPostOpinion,
+                selected_topics: [],
+                selected_sources: sources,
+                custom_title: title,
+                custom_slides: slides
+            })
+        });
+        const data = await resp.json();
+        if (!resp.ok || data.error) throw new Error(data.error || 'Lỗi đăng bài');
+        
+        toast('✅ Đã đăng bài quan điểm lên Tường AI!');
+        
+        if (data.post && typeof prependWallPost === 'function') {
+            prependWallPost(data.post);
+        }
+        
+        document.getElementById('personal-post-modal')?.remove();
+        document.getElementById('opinion-input').value = '';
+    } catch (e) {
+        toast('❌ ' + e.message);
+    } finally {
+        btn.disabled = false;
+        btn.textContent = origText;
+    }
+}