Update app.py

app.py

@@ -183,8 +183,10 @@ Currently: English & 简体中文.
 
 # ================== CSS ==================
 CUSTOM_CSS = """
+/* --- Main Header --- */
 .header-container { padding: 10px 20px; background-color: #ffffff; border-bottom: 2px solid #f3f4f6; margin-bottom: 15px; display: flex; align-items: center; }
 
+/* --- Sidebar Login Panel --- */
 .login-panel {
     background-color: #e5e7eb;
     padding: 15px;
@@ -211,6 +213,7 @@ CUSTOM_CSS = """
     font-weight: bold !important;
 }
 
+/* User Guide */
 .main-user-guide { border: none !important; background: transparent !important; box-shadow: none !important; }
 .main-user-guide > .label-wrap { border: none !important; background: transparent !important; padding: 10px 0 !important; }
 .main-user-guide > .label-wrap span { font-size: 1.3rem !important; font-weight: 800 !important; color: #111827 !important; }
@@ -220,16 +223,24 @@ CUSTOM_CSS = """
 .clean-accordion > .label-wrap span { font-size: 0.9rem !important; font-weight: 500 !important; color: #374151 !important; }
 .clean-accordion > .label-wrap:hover { background-color: #f9fafb !important; }
 
+/* Action Buttons */
 .action-btn { font-weight: bold !important; font-size: 0.9rem !important; position: relative; overflow: visible !important; }
+.action-btn:hover::before { content: "See User Guide for details"; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; z-index: 1000; pointer-events: none; opacity: 0; animation: fadeIn 0.2s forwards; }
+.action-btn:hover::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; opacity: 0; animation: fadeIn 0.2s forwards; }
 
+/* Tooltips & Memory Line */
 .html-tooltip { border-bottom: 1px dashed #999; cursor: help; position: relative; }
+.html-tooltip:hover::before { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 0; background-color: #333; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 100; pointer-events: none; }
 .memory-line-box { border: 1px solid #e5e7eb; padding: 12px; border-radius: 8px; background-color: #f9fafb; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
 
+/* Results Box Style */
 .result-box { border: 1px solid #e5e7eb; background: #ffffff; padding: 10px; border-radius: 8px; height: 100%; }
 .result-box .prose { font-size: 0.9rem; }
+
+@keyframes fadeIn { to { opacity: 1; } }
 """
 
-# ========== Preload Module 10 ==========
+# ========== Preload Module 10 PDF ==========
 MODULE10_PATH = "module10_responsible_ai.pdf"
 MODULE10_DOC_TYPE = "Literature Review / Paper"
 
@@ -254,12 +265,14 @@ else:
 ls_client = Client()
 LS_DATASET_NAME = "clare_user_events"
 
-
 def log_event(data: Dict):
+    """
+    所有事件（chat_turn / micro_quiz_start / like / dislike）统一写入 LangSmith Dataset。
+    """
     try:
         inputs = {
-            "event_type": data.get("event_type"),
             "question": data.get("question"),
+            "event_type": data.get("event_type"),
             "student_id": data.get("student_id"),
         }
         outputs = {
@@ -280,8 +293,7 @@ def log_event(data: Dict):
     except Exception as e:
         print("LangSmith log failed:", e)
 
-
-# ===== Reference helper =====
+# ===== Reference Formatting Helper =====
 def format_references(
     rag_chunks: List[Dict], max_files: int = 2, max_sections_per_file: int = 3
 ) -> str:
@@ -314,7 +326,6 @@ def format_references(
         return ""
     return "\n".join(lines)
 
-
 def is_academic_query(message: str) -> bool:
     if not message:
         return False
@@ -330,7 +341,7 @@ def is_academic_query(message: str) -> bool:
         "thanks", "thank", "thank you",
         "ok", "okay",
         "bye", "goodbye", "see you",
-        "haha", "lol",
+        "haha", "lol"
     }
     tokens = m.split()
 
@@ -361,20 +372,56 @@ def is_academic_query(message: str) -> bool:
 
     return True
 
+# ======= Chatbot like/dislike handler (per-message, ChatGPT-style) =======
+def handle_like(data: gr.LikeData,
+                history,
+                user_id_val,
+                mode_val,
+                model_name_val,
+                lang_pref):
+    """
+    data.index: 第几条消息被点
+    data.value: "like" / "dislike"
+    history: 当前 Chatbot 的 [ [user, assistant], ... ]
+    """
+    try:
+        idx = data.index
+        value = data.value  # "like" or "dislike"
+        if history is None or idx < 0 or idx >= len(history):
+            print("[Like] invalid index", idx)
+            return
+
+        question, answer = history[idx]
+        student_id = user_id_val or "ANON"
+
+        log_event(
+            {
+                "experiment_id": "RESP_AI_W10",
+                "student_id": student_id,
+                "event_type": value,  # "like" / "dislike"
+                "timestamp": time.time(),
+                "question": question,
+                "answer": answer,
+                "model_name": model_name_val,
+                "language": lang_pref,
+                "learning_mode": mode_val,
+            }
+        )
+        print(f"[Like] event logged: index={idx}, value={value}")
+    except Exception as e:
+        print("handle_like error:", e)
 
 # ================== Gradio App ==================
 with gr.Blocks(
     title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
 ) as demo:
 
+    # 全局状态
     course_outline_state = gr.State(preloaded_topics or DEFAULT_COURSE_TOPICS)
     weakness_state = gr.State([])
     cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
     rag_chunks_state = gr.State(preloaded_chunks or [])
 
-    last_question_state = gr.State("")
-    last_answer_state = gr.State("")
-
     user_name_state = gr.State("")
     user_id_state = gr.State("")
 
@@ -429,6 +476,7 @@ with gr.Blocks(
                 interactive=False,
             )
 
+            # User Guide
             with gr.Accordion(
                 "User Guide", open=True, elem_classes="main-user-guide"
             ):
@@ -518,39 +566,17 @@ with gr.Blocks(
                 height=450,
                 avatar_images=(None, CLARE_LOGO_PATH),
                 show_label=False,
-                bubble_full_width=False,
                 type="tuples",
             )
 
-            gr.Markdown("#### Rate Clare’s last answer")
-            with gr.Row():
-                thumb_up_btn = gr.Button(
-                    "👍 Helpful", size="sm", interactive=False
-                )
-                thumb_down_btn = gr.Button(
-                    "👎 Not helpful", size="sm", interactive=False
-                )
-
-            feedback_toggle_btn = gr.Button(
-                "Give detailed feedback",
-                size="sm",
-                variant="secondary",
-                interactive=False,
-            )
-            feedback_text = gr.Textbox(
-                label="What worked well or what was wrong?",
-                placeholder="Optional: describe what you liked / what was confusing or incorrect.",
-                lines=3,
-                visible=False,
-            )
-            feedback_submit_btn = gr.Button(
-                "Submit Feedback",
-                size="sm",
-                variant="primary",
-                visible=False,
-                interactive=False,
+            # ChatGPT-style per-message like/dislike
+            chatbot.like(
+                fn=handle_like,
+                inputs=[chatbot, user_id_state, learning_mode, model_name, language_preference],
+                outputs=[],
             )
 
+            # 用户输入
             user_input = gr.Textbox(
                 label="Your Input",
                 placeholder="Please log in on the right before asking Clare anything...",
@@ -560,6 +586,7 @@ with gr.Blocks(
                 interactive=False,
             )
 
+            # Upload / File type / Memory Line
             with gr.Row():
                 with gr.Column(scale=2):
                     syllabus_file = gr.File(
@@ -690,11 +717,6 @@ with gr.Blocks(
                 learning_mode: gr.update(interactive=False),
                 model_name: gr.update(interactive=False),
                 docs_btn: gr.update(interactive=False),
-                thumb_up_btn: gr.update(interactive=False),
-                thumb_down_btn: gr.update(interactive=False),
-                feedback_toggle_btn: gr.update(interactive=False),
-                feedback_text: gr.update(visible=False, value=""),
-                feedback_submit_btn: gr.update(interactive=False, visible=False),
             }
 
         info_html = f"""
@@ -725,15 +747,6 @@ with gr.Blocks(
             learning_mode: gr.update(interactive=True),
             model_name: gr.update(interactive=False),
             docs_btn: gr.update(interactive=True),
-            thumb_up_btn: gr.update(
-                interactive=True, value="👍 Helpful", variant="secondary"
-            ),
-            thumb_down_btn: gr.update(
-                interactive=True, value="👎 Not helpful", variant="secondary"
-            ),
-            feedback_toggle_btn: gr.update(interactive=True),
-            feedback_text: gr.update(visible=False, value=""),
-            feedback_submit_btn: gr.update(interactive=True, visible=False),
         }
 
     login_confirm_btn.click(
@@ -758,11 +771,6 @@ with gr.Blocks(
             learning_mode,
             model_name,
             docs_btn,
-            thumb_up_btn,
-            thumb_down_btn,
-            feedback_toggle_btn,
-            feedback_text,
-            feedback_submit_btn,
         ],
     )
 
@@ -791,11 +799,6 @@ with gr.Blocks(
             language_preference: gr.update(interactive=False),
             learning_mode: gr.update(interactive=False),
             docs_btn: gr.update(interactive=False),
-            thumb_up_btn: gr.update(interactive=False),
-            thumb_down_btn: gr.update(interactive=False),
-            feedback_toggle_btn: gr.update(interactive=False),
-            feedback_text: gr.update(visible=False, value=""),
-            feedback_submit_btn: gr.update(interactive=False, visible=False),
         }
 
     logout_btn.click(
@@ -820,11 +823,6 @@ with gr.Blocks(
             language_preference,
             learning_mode,
             docs_btn,
-            thumb_up_btn,
-            thumb_down_btn,
-            feedback_toggle_btn,
-            feedback_text,
-            feedback_submit_btn,
         ],
     )
 
@@ -886,14 +884,6 @@ with gr.Blocks(
         doc_type_val,
         user_id_val,
     ):
-        # 没登录
-        default_up = gr.update(
-            value="👍 Helpful", variant="secondary", interactive=False
-        )
-        default_down = gr.update(
-            value="👎 Not helpful", variant="secondary", interactive=False
-        )
-
         if not user_id_val:
             out_msg = (
                 "🔒 Please log in with your Student Name and Email/ID on the right "
@@ -905,17 +895,7 @@ with gr.Blocks(
                 weaknesses or [],
                 cognitive_state or {"confusion": 0, "mastery": 0},
             )
-            return (
-                "",
-                new_history,
-                weaknesses,
-                cognitive_state,
-                new_status,
-                "",
-                "",
-                default_up,
-                default_down,
-            )
+            return "", new_history, weaknesses, cognitive_state, new_status
 
         resolved_lang = detect_language(message or "", lang_pref)
 
@@ -925,24 +905,7 @@ with gr.Blocks(
                 weaknesses or [],
                 cognitive_state or {"confusion": 0, "mastery": 0},
             )
-            # 已登录时，允许评分，所以按钮可点
-            logged_up = gr.update(
-                value="👍 Helpful", variant="secondary", interactive=True
-            )
-            logged_down = gr.update(
-                value="👎 Not helpful", variant="secondary", interactive=True
-            )
-            return (
-                "",
-                chat_history,
-                weaknesses,
-                cognitive_state,
-                new_status,
-                "",
-                "",
-                logged_up,
-                logged_down,
-            )
+            return "", chat_history, weaknesses, cognitive_state, new_status
 
         weaknesses = update_weaknesses_from_message(message, weaknesses or [])
         cognitive_state = update_cognitive_state_from_message(message, cognitive_state)
@@ -1004,25 +967,7 @@ with gr.Blocks(
 
         new_status = render_session_status(mode_val, weaknesses, cognitive_state)
 
-        # 新一轮回答出来 -> 重置按钮为默认可点状态
-        logged_up = gr.update(
-            value="👍 Helpful", variant="secondary", interactive=True
-        )
-        logged_down = gr.update(
-            value="👎 Not helpful", variant="secondary", interactive=True
-        )
-
-        return (
-            "",
-            new_history,
-            weaknesses,
-            cognitive_state,
-            new_status,
-            message,
-            answer,
-            logged_up,
-            logged_down,
-        )
+        return "", new_history, weaknesses, cognitive_state, new_status
 
     user_input.submit(
         respond,
@@ -1045,10 +990,6 @@ with gr.Blocks(
             weakness_state,
             cognitive_state_state,
             session_status,
-            last_question_state,
-            last_answer_state,
-            thumb_up_btn,
-            thumb_down_btn,
         ],
     )
 
@@ -1168,162 +1109,6 @@ with gr.Blocks(
         [chatbot, weakness_state, cognitive_state_state, session_status],
     )
 
-    # ===== Feedback Handlers =====
-    def show_feedback_box():
-        return {
-            feedback_text: gr.update(visible=True),
-            feedback_submit_btn: gr.update(visible=True),
-        }
-
-    feedback_toggle_btn.click(
-        show_feedback_box,
-        None,
-        [feedback_text, feedback_submit_btn],
-    )
-
-    def send_thumb_up(last_q, last_a, user_id_val, mode_val, model_name_val, lang_pref):
-        if not last_q and not last_a:
-            print("No last QA to log for thumbs_up.")
-            # 仍然返回按钮状态，防止 Gradio 报错
-            return (
-                gr.update(value="👍 Helpful", variant="secondary"),
-                gr.update(value="👎 Not helpful", variant="secondary"),
-            )
-        try:
-            log_event(
-                {
-                    "experiment_id": "RESP_AI_W10",
-                    "student_id": user_id_val or "ANON",
-                    "event_type": "thumbs_up",
-                    "timestamp": time.time(),
-                    "question": last_q,
-                    "answer": last_a,
-                    "model_name": model_name_val,
-                    "language": lang_pref,
-                    "learning_mode": mode_val,
-                }
-            )
-            print("[Feedback] thumbs_up logged to LangSmith.")
-        except Exception as e:
-            print("thumb_up log error:", e)
-
-        # 实时视觉反馈：左边按钮高亮 + 标记 sent，右边保持可点普通状态
-        return (
-            gr.update(
-                value="👍 Helpful (sent)", variant="primary", interactive=True
-            ),
-            gr.update(value="👎 Not helpful", variant="secondary", interactive=True),
-        )
-
-    def send_thumb_down(
-        last_q, last_a, user_id_val, mode_val, model_name_val, lang_pref
-    ):
-        if not last_q and not last_a:
-            print("No last QA to log for thumbs_down.")
-            return (
-                gr.update(value="👍 Helpful", variant="secondary"),
-                gr.update(value="👎 Not helpful", variant="secondary"),
-            )
-        try:
-            log_event(
-                {
-                    "experiment_id": "RESP_AI_W10",
-                    "student_id": user_id_val or "ANON",
-                    "event_type": "thumbs_down",
-                    "timestamp": time.time(),
-                    "question": last_q,
-                    "answer": last_a,
-                    "model_name": model_name_val,
-                    "language": lang_pref,
-                    "learning_mode": mode_val,
-                }
-            )
-            print("[Feedback] thumbs_down logged to LangSmith.")
-        except Exception as e:
-            print("thumb_down log error:", e)
-
-        return (
-            gr.update(value="👍 Helpful", variant="secondary", interactive=True),
-            gr.update(
-                value="👎 Not helpful (sent)",
-                variant="primary",
-                interactive=True,
-            ),
-        )
-
-    thumb_up_btn.click(
-        send_thumb_up,
-        [
-            last_question_state,
-            last_answer_state,
-            user_id_state,
-            learning_mode,
-            model_name,
-            language_preference,
-        ],
-        [thumb_up_btn, thumb_down_btn],
-    )
-
-    thumb_down_btn.click(
-        send_thumb_down,
-        [
-            last_question_state,
-            last_answer_state,
-            user_id_state,
-            learning_mode,
-            model_name,
-            language_preference,
-        ],
-        [thumb_up_btn, thumb_down_btn],
-    )
-
-    def submit_detailed_feedback(
-        text, last_q, last_a, user_id_val, mode_val, model_name_val, lang_pref
-    ):
-        if not text or not text.strip():
-            return gr.update(
-                value="",
-                placeholder="Please enter some feedback before submitting.",
-            )
-
-        try:
-            log_event(
-                {
-                    "experiment_id": "RESP_AI_W10",
-                    "student_id": user_id_val or "ANON",
-                    "event_type": "detailed_feedback",
-                    "timestamp": time.time(),
-                    "question": last_q,
-                    "answer": last_a,
-                    "feedback_text": text.strip(),
-                    "model_name": model_name_val,
-                    "language": lang_pref,
-                    "learning_mode": mode_val,
-                }
-            )
-            print("[Feedback] detailed_feedback logged to LangSmith.")
-        except Exception as e:
-            print("detailed_feedback log error:", e)
-
-        return gr.update(
-            value="",
-            placeholder="Thanks! Your feedback has been recorded.",
-        )
-
-    feedback_submit_btn.click(
-        submit_detailed_feedback,
-        [
-            feedback_text,
-            last_question_state,
-            last_answer_state,
-            user_id_state,
-            learning_mode,
-            model_name,
-            language_preference,
-        ],
-        [feedback_text],
-    )
-
     # ===== Export / Summary =====
     export_btn.click(
         lambda h, c, m, w, cog: export_conversation(h, c, m, w, cog),
@@ -1350,18 +1135,7 @@ with gr.Blocks(
     def clear_all():
         empty_state = {"confusion": 0, "mastery": 0}
         default_status = render_session_status("Concept Explainer", [], empty_state)
-        return (
-            [],
-            [],
-            empty_state,
-            [],
-            "",
-            default_status,
-            "",
-            "",
-            gr.update(value="👍 Helpful", variant="secondary", interactive=False),
-            gr.update(value="👎 Not helpful", variant="secondary", interactive=False),
-        )
+        return [], [], empty_state, [], "", default_status
 
     clear_btn.click(
         clear_all,
@@ -1373,10 +1147,6 @@ with gr.Blocks(
             rag_chunks_state,
             result_display,
             session_status,
-            last_question_state,
-            last_answer_state,
-            thumb_up_btn,
-            thumb_down_btn,
         ],
         queue=False,
     )