Upload app.py

app.py

@@ -374,59 +374,80 @@ inject_custom_css()
 
 
 def _render_action_buttons(content, msg_id):
-    """生成消息底部的复制/分享/播报按钮"""
-    # 转义内容用于 JavaScript
-    escaped = content.replace("\\", "\\\\").replace("`", "\\`").replace("$", "\\$")
+    """生成消息底部的复制/分享/播报按钮（纯HTML部分）"""
     return f'''
     <div style="display:flex; gap:12px; margin-top:8px; padding-top:6px; border-top:1px solid #eee;">
-        <button onclick="copyText_{msg_id}()" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;" onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='none'">📋 复制</button>
-        <button onclick="shareText_{msg_id}()" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;" onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='none'">🔗 分享</button>
-        <button id="tts_btn_{msg_id}" onclick="speakText_{msg_id}()" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;" onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='none'">🔊 播报</button>
+        <button id="copy_btn_{msg_id}" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;">📋 复制</button>
+        <button id="share_btn_{msg_id}" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;">🔗 分享</button>
+        <button id="tts_btn_{msg_id}" style="background:none; border:none; cursor:pointer; color:#666; font-size:13px; padding:4px 8px; border-radius:4px;">🔊 播报</button>
     </div>
+    '''
+
+
+def _inject_action_js(content, msg_id):
+    """注入按钮的 JavaScript（需要用 components.html 执行）"""
+    # 转义内容用于 JavaScript
+    escaped = content.replace("\\", "\\\\").replace("`", "\\`").replace("$", "\\$").replace("</script>", "<\\/script>")
+    js_code = f'''
     <script>
-    const msgContent_{msg_id} = `{escaped}`;
-    let speaking_{msg_id} = false;
-    
-    function copyText_{msg_id}() {{
-        navigator.clipboard.writeText(msgContent_{msg_id}).then(() => {{
-            alert('已复制到剪贴板');
-        }}).catch(() => {{
-            alert('复制失败，请手动复制');
-        }});
-    }}
-    
-    function shareText_{msg_id}() {{
-        if (navigator.share) {{
-            navigator.share({{
-                title: '智答AI助手',
-                text: msgContent_{msg_id}
-            }}).catch(() => {{}});
-        }} else {{
-            navigator.clipboard.writeText(msgContent_{msg_id}).then(() => {{
-                alert('链接已复制，可粘贴分享');
-            }});
+    (function() {{
+        const msgContent = `{escaped}`;
+        let speaking = false;
+        
+        const copyBtn = window.parent.document.getElementById('copy_btn_{msg_id}');
+        const shareBtn = window.parent.document.getElementById('share_btn_{msg_id}');
+        const ttsBtn = window.parent.document.getElementById('tts_btn_{msg_id}');
+        
+        if (copyBtn) {{
+            copyBtn.onclick = function() {{
+                navigator.clipboard.writeText(msgContent).then(() => {{
+                    copyBtn.textContent = '✅ 已复制';
+                    setTimeout(() => {{ copyBtn.textContent = '📋 复制'; }}, 1500);
+                }}).catch(() => {{ alert('复制失败'); }});
+            }};
+            copyBtn.onmouseover = function() {{ this.style.background='#f0f0f0'; }};
+            copyBtn.onmouseout = function() {{ this.style.background='none'; }};
         }}
-    }}
-    
-    function speakText_{msg_id}() {{
-        const btn = document.getElementById('tts_btn_{msg_id}');
-        if (speaking_{msg_id}) {{
-            window.speechSynthesis.cancel();
-            speaking_{msg_id} = false;
-            btn.textContent = '🔊 播报';
-        }} else {{
-            const utterance = new SpeechSynthesisUtterance(msgContent_{msg_id});
-            utterance.lang = 'zh-CN';
-            utterance.rate = 1.0;
-            utterance.onend = () => {{ speaking_{msg_id} = false; btn.textContent = '🔊 播报'; }};
-            utterance.onerror = () => {{ speaking_{msg_id} = false; btn.textContent = '🔊 播报'; }};
-            window.speechSynthesis.speak(utterance);
-            speaking_{msg_id} = true;
-            btn.textContent = '⏹️ 停止';
+        
+        if (shareBtn) {{
+            shareBtn.onclick = function() {{
+                if (navigator.share) {{
+                    navigator.share({{ title: '智答AI助手', text: msgContent }}).catch(() => {{}});
+                }} else {{
+                    navigator.clipboard.writeText(msgContent).then(() => {{
+                        shareBtn.textContent = '✅ 已复制';
+                        setTimeout(() => {{ shareBtn.textContent = '🔗 分享'; }}, 1500);
+                    }});
+                }}
+            }};
+            shareBtn.onmouseover = function() {{ this.style.background='#f0f0f0'; }};
+            shareBtn.onmouseout = function() {{ this.style.background='none'; }};
+        }}
+        
+        if (ttsBtn) {{
+            ttsBtn.onclick = function() {{
+                if (speaking) {{
+                    window.speechSynthesis.cancel();
+                    speaking = false;
+                    ttsBtn.textContent = '🔊 播报';
+                }} else {{
+                    const utterance = new SpeechSynthesisUtterance(msgContent);
+                    utterance.lang = 'zh-CN';
+                    utterance.rate = 1.0;
+                    utterance.onend = () => {{ speaking = false; ttsBtn.textContent = '🔊 播报'; }};
+                    utterance.onerror = () => {{ speaking = false; ttsBtn.textContent = '🔊 播报'; }};
+                    window.speechSynthesis.speak(utterance);
+                    speaking = true;
+                    ttsBtn.textContent = '⏹️ 停止';
+                }}
+            }};
+            ttsBtn.onmouseover = function() {{ this.style.background='#f0f0f0'; }};
+            ttsBtn.onmouseout = function() {{ this.style.background='none'; }};
         }}
-    }}
+    }})();
     </script>
     '''
+    components.html(js_code, height=0)
 
 
 # 全局游客标识（session_state 在单次渲染中不变）
@@ -1775,6 +1796,7 @@ def _chat_fragment():
                         m["content"] + meta_html + action_btns,
                         unsafe_allow_html=True,
                     )
+                    _inject_action_js(m["content"], f"hist_{idx}")
                 else:
                     st.markdown(m["content"])
 
@@ -1835,6 +1857,7 @@ def _chat_fragment():
                         full_response + meta_html + action_btns,
                         unsafe_allow_html=True,
                     )
+                    _inject_action_js(full_response, f"new_{msg_idx}")
                     st.session_state.messages.append(
                         {"role": "assistant", "content": full_response, "meta": meta_info}
                     )