Hashtag inline: show sources on homepage + rewrite button"

hashtag_inline.py

@@ -0,0 +1,87 @@
+"""Hashtag inline: click hashtag → show sources on homepage + rewrite button."""
+HASHTAG_INLINE_INJECT = r'''
+<style>
+.hashtag-sources{margin:8px 4px;background:#141414;border:1px solid #2a2a2a;border-radius:10px;padding:10px;display:none}
+.hashtag-sources.active{display:block}
+.hashtag-sources h3{font-size:13px;color:#5cb87a;margin-bottom:8px}
+.hashtag-source-item{display:flex;gap:8px;padding:8px;background:#1a1a1a;border-radius:8px;margin:6px 0;cursor:pointer}
+.hashtag-source-item:active{opacity:.8}
+.hashtag-source-item img{width:80px;height:50px;object-fit:cover;border-radius:6px;background:#333;flex-shrink:0}
+.hashtag-source-item .info{flex:1;min-width:0}
+.hashtag-source-item .title{font-size:12px;font-weight:700;color:#eee;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.hashtag-source-item .desc{font-size:10px;color:#888;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.hashtag-source-item .via{font-size:9px;color:#5cb87a;margin-top:2px}
+.hashtag-rewrite-btn{display:block;width:100%;margin-top:10px;background:#2d8659;border:0;color:#fff;border-radius:14px;padding:10px;font-size:12px;font-weight:700;cursor:pointer}
+.hashtag-rewrite-btn:disabled{opacity:.5}
+.hashtag-close{float:right;background:none;border:0;color:#999;font-size:18px;cursor:pointer}
+</style>
+<div id="hashtag-sources-panel" class="hashtag-sources"></div>
+<script>
+(function(){
+function esc(s){return String(s||'').replace(/[&<>"']/g,function(m){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]});}
+
+// Override hashtag click: show sources inline on homepage
+window.hashtagClick=async function(topic){
+  var panel=document.getElementById('hashtag-sources-panel');
+  if(!panel){panel=document.createElement('div');panel.id='hashtag-sources-panel';panel.className='hashtag-sources';var home=document.getElementById('view-home');if(home)home.insertBefore(panel,home.children[1]||null);}
+  panel.innerHTML='<button class="hashtag-close" onclick="closeHashtagPanel()">✕</button><h3>#'+esc(topic)+' — Đang tìm nguồn...</h3>';
+  panel.classList.add('active');
+  try{
+    var r=await fetch('/api/topic_sources?topic='+encodeURIComponent(topic));
+    var j=await r.json();
+    var sources=j.sources||[];
+    if(!sources.length){panel.innerHTML='<button class="hashtag-close" onclick="closeHashtagPanel()">✕</button><h3>#'+esc(topic)+'</h3><p style="color:#888;font-size:12px">Không tìm thấy nguồn cho chủ đề này.</p>';return;}
+    var h='<button class="hashtag-close" onclick="closeHashtagPanel()">✕</button>';
+    h+='<h3>#'+esc(topic)+' — '+sources.length+' nguồn</h3>';
+    sources.forEach(function(s){
+      h+='<div class="hashtag-source-item" onclick="if(typeof readArticle===\'function\')readArticle(\''+esc(s.url||'')+'\')">';
+      h+='<img src="/api/proxy/img?url='+encodeURIComponent(s.url||'')+'" onerror="this.style.display=\'none\'" loading="lazy">';
+      h+='<div class="info"><div class="title">'+esc(s.title||'')+'</div><div class="desc">'+esc((s.excerpt||s.snippet||'').slice(0,120))+'</div><div class="via">'+esc(s.via||'')+'</div></div>';
+      h+='</div>';
+    });
+    h+='<button class="hashtag-rewrite-btn" onclick="rewriteHashtagSources(\''+esc(topic)+'\',this)">🤖 Rewrite AI tổng hợp và đăng tường</button>';
+    panel.innerHTML=h;
+    // Try to load og:image for each source
+    sources.forEach(function(s,i){
+      if(!s.url)return;
+      fetch('/api/article?url='+encodeURIComponent(s.url)).then(function(r){return r.json()}).then(function(d){
+        if(d&&(d.og_image||d.img)){
+          var items=panel.querySelectorAll('.hashtag-source-item');
+          if(items[i]){var img=items[i].querySelector('img');if(img)img.src=d.og_image||d.img;}
+        }
+      }).catch(function(){});
+    });
+  }catch(e){panel.innerHTML='<button class="hashtag-close" onclick="closeHashtagPanel()">✕</button><h3>#'+esc(topic)+'</h3><p style="color:#f66;font-size:12px">Lỗi: '+esc(e.message)+'</p>';}
+};
+
+window.closeHashtagPanel=function(){
+  var panel=document.getElementById('hashtag-sources-panel');
+  if(panel)panel.classList.remove('active');
+};
+
+window.rewriteHashtagSources=async function(topic,btn){
+  btn.disabled=true;btn.textContent='Đang tổng hợp...';
+  try{
+    var r=await fetch('/api/topic_post',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({topic:topic})});
+    var j=await r.json();
+    if(!r.ok||j.error)throw new Error(j.error||'Lỗi');
+    btn.textContent='✅ Đã đăng tường AI!';
+    setTimeout(function(){closeHashtagPanel();},2000);
+    // Update wall
+    if(j.post&&typeof prependWallPost==='function')prependWallPost(j.post);
+  }catch(e){btn.textContent='❌ '+e.message;setTimeout(function(){btn.disabled=false;btn.textContent='🤖 Rewrite AI tổng hợp và đăng tường';},3000);}
+};
+
+// Patch existing hot-chip buttons to use hashtagClick instead of filling input
+document.addEventListener('click',function(e){
+  var chip=e.target.closest('.hot-chip');
+  if(chip){
+    e.preventDefault();e.stopPropagation();
+    var topic=chip.textContent.replace(/^#/,'').trim()||chip.getAttribute('onclick')?.match(/value='([^']+)'/)?.[1]||'';
+    if(topic)hashtagClick(topic);
+  }
+},true);
+
+})();
+</script>
+'''