Update app.py

app.py

@@ -1,7 +1,8 @@
-import gradio as gr
-import os
+# app.py
 from typing import List, Dict, Tuple, Optional
 
+import gradio as gr
+
 from config import (
     DEFAULT_MODEL,
     DEFAULT_COURSE_TOPICS,
@@ -26,314 +27,663 @@ from rag_engine import (
 )
 from syllabus_utils import extract_course_topics_from_file
 
-# ================== Assets (图片路径配置) ==================
-# 确保文件名与你上传到 Hugging Face Space 的文件名完全一致
+
+# ================== Assets ==================
+
 HANBRIDGE_LOGO_PATH = "hanbridge_logo.png"
 CLARE_LOGO_PATH = "clare_mascot.png"
-CLARE_RUN_PATH = "Clare_Run.png"
-
-# ================== CSS (样式调整) ==================
-CUSTOM_CSS = """
-/* 顶部 Header 容器样式 */
-.header-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 20px;
-    background-color: #ffffff;
-    border-bottom: 2px solid #f3f4f6;
-    margin-bottom: 15px;
+CLARE_RUN_PATH = "Clare_Run.png"  # 预留：之后可用于 Memory Line 动画等
+
+
+# ================== CSS（只控制 User Guide 样式） ==================
+
+USER_GUIDE_CSS = """
+#user-guide-panel h2 {
+  font-size: 1rem;
+  margin-bottom: 0.35rem;
+}
+#user-guide-panel h3 {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+#user-guide-panel p,
+#user-guide-panel li {
+  font-size: 0.8rem;
 }
 
-/* User Guide 链接样式 */
+/* 左侧 User Guide 链接按钮 → 蓝色小链接风格 */
 #user-guide-links button {
-    background: transparent !important; border: none !important; box-shadow: none !important;
-    padding: 2px 0 !important; margin: 1px 0 !important; text-align: left !important;
-    color: #004a99 !important; text-decoration: underline; font-size: 0.8rem;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 2px 0 !important;
+  margin: 1px 0 !important;
+  text-align: left !important;
+  color: #004a99 !important;
+  text-decoration: underline;
+  font-size: 0.8rem;
 }
-#user-guide-links button:hover { color: #002b66 !important; }
-
-/* Memory Line 区域样式 */
-.memory-line-box {
-    border: 1px solid #e5e7eb;
-    padding: 12px;
-    border-radius: 8px;
-    background-color: #f9fafb;
-    height: 100%; 
+#user-guide-links button:hover {
+  background: transparent !important;
+  color: #002b66 !important;
 }
 """
 
-# ========= Clare User Guide Content (保持原样) =========
+
+# ========= Clare User Guide Content =========
+
 USER_GUIDE_SECTIONS = {
-    "getting_started": "## Getting started\n\nWelcome to **Clare**...",
-    "mode_definition": "## Mode Definition\n\nClare offers different teaching modes...",
-    "how_clare_works": "## How Clare Works\n\nClare combines course context...",
-    "memory_line": "## What is Memory Line?\n\nMemory Line is a visualization...",
-    "learning_progress": "## Learning Progress Report\n\nThe Learning Progress Report highlights...",
-    "how_files": "## How Clare Uses Your Files\n\nYour uploaded syllabus / slides...",
-    "micro_quiz": "## Micro-Quiz\n\nThe Micro-Quiz function provides...",
-    "summarization": "## Summarization\n\nClare can summarize...",
-    "export_conversation": "## Export Conversation\n\nYou can export your chat session...",
-    "faq": "## FAQ\n\n**Q: Does Clare give assignment answers?**..."
+    "getting_started": """
+## Getting started
+
+Welcome to **Clare — Your Personalized AI Tutor**.
+
+Clare is designed to support your learning through:
+- Clear explanations of course concepts  
+- Socratic-style reasoning guidance  
+- Personalized reinforcement based on learning science  
+- Course-aligned answers using your uploaded materials  
+- Micro-quizzes & summaries to strengthen understanding  
+
+**To begin:**
+1. Select your **Learning Mode** on the left  
+2. (Optional) Upload your **syllabus / slides / notes** at the top  
+3. Ask Clare any question about your course, assignment, or study plan.
+""",
+    "mode_definition": """
+## Mode Definition
+
+Clare offers different teaching modes to match how you prefer to learn.
+
+### Concept Explainer
+Clear, structured explanations with examples — ideal for learning new topics.
+
+### Socratic Tutor
+Clare asks guiding questions instead of giving direct answers.  
+Helps you build reasoning and problem-solving skills.
+
+### Exam Prep / Quiz
+Generates short practice questions aligned with your course week.  
+Useful for self-testing and preparing for exams.
+
+### Assignment Helper
+Helps you interpret assignment prompts, plan structure, and understand requirements.  
+❗ Clare does **not** produce full assignment answers (academic integrity).
+
+### Quick Summary
+Gives brief summaries of slides, reading materials, or long questions.
+""",
+    "how_clare_works": """
+## How Clare Works
+
+Clare combines **course context + learning science + AI reasoning** to generate answers.
+
+Clare uses:
+- **Your selected Learning Mode**  
+  Determines tone, depth, and interaction style.
+
+- **Your uploaded course files**  
+  Syllabus, slides, or papers help align answers with your specific course.
+
+- **Reinforcement learning cycle**  
+  Answers may prioritize key concepts you’re likely to forget (based on the forgetting curve).
+
+- **Adaptive explanation depth**  
+  Clare can adjust complexity depending on your previous interactions.
+
+- **Responsible AI principles**  
+  Avoids harmful output and preserves academic integrity.
+""",
+    "memory_line": """
+## What is Memory Line?
+
+**Memory Line** is a visualization of your *learning reinforcement cycle*.
+
+Based on the **forgetting-curve model**, Clare organizes your review topics into:
+- **T+0 (Current Week)** – new concepts  
+- **T+7** – first spaced review  
+- **T+14** – reinforcement review  
+- **T+30** – long-term consolidation  
+
+Clare uses these cycles to decide:
+- Which concepts to reinforce today  
+- Which explanations to prioritize  
+- When to introduce quick review questions  
+
+**Review Now** will generate a small set of concepts that are due for spaced repetition.
+""",
+    "learning_progress": """
+## Learning Progress Report
+
+The Learning Progress Report highlights:
+- **Concepts mastered**  
+- **Concepts in progress**  
+- **Concepts due for review**  
+- Your recent **micro-quiz results**  
+- Suggested **next-step topics**
+
+You can download a **summary** at any time to use as study notes.
+""",
+    "how_files": """
+## How Clare Uses Your Files
+
+Your uploaded syllabus / slides / notes help Clare:
+
+- Align explanations with your exact course  
+- Use terminology consistent with your professor  
+- Improve factual accuracy  
+- Generate personalized reinforcement content  
+
+🔒 **Privacy**
+- Files are used only within your session  
+- They are not kept as permanent training data  
+
+Accepted formats: **.docx / .pdf / .pptx**
+""",
+    "micro_quiz": """
+## Micro-Quiz
+
+The **Micro-Quiz** function provides a:
+
+- 1-minute self-check  
+- 1–3 questions based on your recent topics  
+- Instant feedback
+
+Micro-quizzes strengthen your memory and are part of Clare’s reinforcement system.
+""",
+    "summarization": """
+## Summarization
+
+Clare can summarize:
+
+- Lecture notes  
+- Uploaded PDFs  
+- Long conversation threads  
+- Complex concepts  
+
+Summary styles can include:
+- Bullet points  
+- Key ideas  
+- Study notes  
+- Comparison-style highlights.
+""",
+    "export_conversation": """
+## Export Conversation
+
+You can export your chat session for:
+
+- Study review  
+- Exam preparation  
+- Documentation for tutoring help  
+- Saving important explanations  
+
+Export format: **Markdown / plain text** (depending on this Space configuration).
+""",
+    "faq": """
+## FAQ
+
+**Q: Does Clare give assignment answers?**  
+No. Clare assists with understanding and planning but does **not** generate full solutions.
+
+**Q: Does Clare replace lectures or TA office hours?**  
+No. Clare supplements your learning by providing on-demand guidance.
+
+**Q: Can Clare explain my professor’s slides?**  
+Yes — upload your slides so Clare can align explanations with your course.
+
+**Q: What languages does Clare support?**  
+Currently: English & 简体中文.
+
+**Q: Why does Clare sometimes ask me questions instead of answering directly?**  
+You may be in **Socratic Tutor** mode — Clare is guiding your reasoning.
+"""
 }
 
+
 def get_user_guide_section(section_key: str) -> str:
+    """Return markdown text for a User Guide section."""
     return USER_GUIDE_SECTIONS.get(section_key, "Section not found.")
 
-# ================== Gradio App ==================
 
-# 【修正】：这里去掉了 allowed_paths=["."]
-with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS) as demo:
-    
-    # 状态变量
-    course_outline_state = gr.State(DEFAULT_COURSE_TOPICS)
-    weakness_state = gr.State([])
-    cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
-    rag_chunks_state = gr.State([]) 
+# ================== Gradio App ==================
 
-    # ============ 1. 顶部 Header (全宽布局) ============
-    gr.HTML(
+with gr.Blocks(
+    title="Clare – Hanbridge AI Teaching Assistant",
+    css=USER_GUIDE_CSS,
+) as demo:
+    # ---------- Header using Markdown + <img> ----------
+    gr.Markdown(
         f"""
-        <div class="header-container">
-            <div style="display:flex; align-items:center; gap: 20px;">
-                <img src="file/{CLARE_LOGO_PATH}" style="height: 75px; object-fit: contain;">
-                <div style="display:flex; flex-direction:column;">
-                    <div style="font-size: 32px; font-weight: 800; line-height: 1.1; color: #000;">
-                        Clare
-                        <span style="font-size: 18px; font-weight: 600; margin-left: 10px;">Your Personalized AI Tutor</span>
-                    </div>
-                    <div style="font-size: 14px; font-style: italic; color: #333; margin-top: 4px;">
-                        Personalized guidance, review, and intelligent reinforcement - designed for how you learn
-                    </div>
+        <div style="display:flex;align-items:center;gap:20px; padding:8px 0;">
+
+            <!-- Clare Mascot -->
+            <img src="file/{CLARE_LOGO_PATH}" style="height:80px;">
+
+            <!-- Text Block -->
+            <div style="display:flex;flex-direction:column;">
+                <div style="font-size:40px;font-weight:700; line-height:1.1;">
+                    Clare
+                </div>
+                <div style="font-size:18px;font-weight:600; line-height:1.2;">
+                    Your Personalized AI Tutor
+                </div>
+                <div style="font-size:13px;color:#666;">
+                    Personalized guidance, review, and intelligent reinforcement – designed for how you learn.
                 </div>
             </div>
 
-            <div style="text-align: right;">
-                <img src="file/{HANBRIDGE_LOGO_PATH}" style="height: 55px; object-fit: contain; margin-bottom: 5px;">
-                <div style="font-size: 12px; color: #666;">
-                    🎓 (Student Name) (Student Email/ID)
+            <!-- Right-side Hanbridge Logo + text -->
+            <div style="margin-left:auto; display:flex; flex-direction:column; align-items:flex-end;">
+                <div style="display:flex;align-items:center;gap:8px;">
+                    <img src="file/{HANBRIDGE_LOGO_PATH}" style="height:40px;">
+                    <div style="font-size:20px;font-weight:700;">Hanbridge University</div>
+                </div>
+                <div style="font-size:11px;color:#555; margin-top:4px;">
+                    <span style="font-size:13px;">🎓</span> (Student Name) (Student Email/ID)
                 </div>
             </div>
+
         </div>
         """
     )
 
-    # ============ 2. 主体分栏布局：左(1) - 中(3) - 右(1) ============
-    with gr.Row():
-        
-        # ============ [左侧] 控制面板 Sidebar ============
-        with gr.Column(scale=1, min_width=200):
-            clear_btn = gr.Button("Reset Conversation", variant="stop")
-            
-            gr.Markdown("### Model Settings")
-            model_name = gr.Textbox(label="Model", value=DEFAULT_MODEL, lines=1)
-            language_preference = gr.Radio(
-                choices=["Auto", "English", "简体中文"], 
-                value="Auto", 
-                label="Language"
-            )
-            
-            learning_mode = gr.Radio(
-                choices=LEARNING_MODES,
-                value="Concept Explainer",
-                label="Learning Mode",
-                info="Select style"
-            )
-
-            with gr.Accordion("User Guide", open=False):
-                with gr.Column(elem_id="user-guide-links"):
-                    ug_getting_started = gr.Button("Getting started")
-                    ug_mode_def = gr.Button("Mode Definition")
-                    ug_how_works = gr.Button("How Clare Works")
-                    ug_memory_line = gr.Button("What is Memory Line")
-            
-            with gr.Group():
-                gr.Button("System Settings", variant="secondary")
-                gr.Button("Log Out", variant="secondary")
-
-        # ============ [中间] 主内容区 Center Main ============
-        with gr.Column(scale=3):
-            
-            # 上半部分：上传区(左) + Memory Line(右) 并排
-            with gr.Row():
-                # --- Upload File ---
-                with gr.Column(scale=1):
-                    syllabus_file = gr.File(
-                        label="Upload file (.docx/.pdf/.pptx)",
-                        file_types=[".docx", ".pdf", ".pptx"],
-                        file_count="single",
-                        height=100
-                    )
-                    doc_type = gr.Dropdown(
-                        choices=DOC_TYPES, 
-                        value="Syllabus", 
-                        label="File type",
-                        container=False 
-                    )
-                
-                # --- Memory Line (包含 CLARE_RUN_PATH) ---
-                with gr.Column(scale=1):
-                    # 使用 HTML 渲染带图片的进度条
-                    gr.HTML(
-                        f"""
-                        <div class="memory-line-box">
-                            <div style="display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; font-weight:bold;">
-                                <span>Memory Line <span style="font-weight:normal; color:#999; cursor:help;" title="Visualizes your spaced repetition progress">?</span></span>
-                            </div>
-                            
-                            <div style="position: relative; height: 35px; margin-top: 15px; margin-bottom: 5px;">
-                                <div style="position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background-color: #e5e7eb; border-radius: 4px;"></div>
-                                <div style="position: absolute; bottom: 5px; left: 0; width: 40%; height: 8px; background-color: #8B1A1A; border-radius: 4px 0 0 4px;"></div>
-                                <img src="file/{CLARE_RUN_PATH}" style="position: absolute; left: 36%; bottom: 8px; height: 35px; z-index: 10;">
-                            </div>
-
-                            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
-                                <div style="font-size: 12px; color: #666;">Next Review: T+7</div>
-                                <div style="font-size: 12px; color: #004a99; text-decoration:underline; cursor:pointer;">
-                                    Learning Progress Report ⬇️
-                                </div>
-                            </div>
-                        </div>
-                        """
-                    )
-                    # Review 按钮放在 HTML 下方
-                    review_btn = gr.Button("Review Now", size="sm", variant="primary")
-                    session_status = gr.Markdown(visible=False)
-
-            # --- Chat Interface ---
-            gr.Markdown(
-                """
-                <div style="background-color:#f9fafb; padding:10px; border-radius:5px; margin-top:10px; font-size:0.9em; color:#555;">
-                ✦ <b>Instruction:</b> Use different learning modes to change Clare's teaching style.<br>
-                ✦ <b>Example:</b> "Why does context length matter?" or "How does RAG reduce hallucination?"
-                </div>
-                """
-            )
+    # 简短说明
+    gr.Markdown(
+        """
+- Ask in **English** → Clare answers in English.  
+- Ask in **Chinese** → Clare can answer in Chinese.  
+- Use different **learning modes** to change Clare's teaching style.  
+- Optionally upload your **course syllabus / slides / literature (.docx / .pdf / .pptx)** so Clare stays aligned with your course.
+        """
+    )
 
-            chatbot = gr.Chatbot(
-                label="",
-                height=450,
-                avatar_images=(None, CLARE_LOGO_PATH), # 聊天框内的头像
-                show_label=False,
-                bubble_full_width=False
-            )
-            
-            user_input = gr.Textbox(
-                label="Your Input",
-                placeholder="Ask about a concept, your assignment, or let Clare test you...",
-                show_label=False,
-                container=True,
-                autofocus=True
-            )
+    # 顶部：模型、语言偏好、学习模式
+    with gr.Row():
+        model_name = gr.Textbox(
+            label="Model name",
+            value=DEFAULT_MODEL,
+            info="For example: gpt-4.1-mini, gpt-4.1, gpt-4o, etc.",
+        )
+        language_preference = gr.Radio(
+            choices=["Auto", "English", "中文"],
+            value="Auto",
+            label="Preferred answer language",
+        )
+        learning_mode = gr.Radio(
+            choices=LEARNING_MODES,
+            value="Concept Explainer",
+            label="Learning mode",
+        )
 
-        # ============ [右侧] 功能栏 Right Sidebar ============
-        with gr.Column(scale=1, min_width=180):
-            gr.Markdown("### Actions")
-            export_btn = gr.Button("Export Conversation", size="sm")
-            quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm")
-            summary_btn = gr.Button("Summarization", size="sm")
-            
-            gr.Markdown("### Results")
-            result_display = gr.Textbox(
-                label="Generated Content",
-                lines=15,
-                placeholder="Results from Export, Quiz, or Summary will appear here...",
-                show_label=False
-            )
+    # 课程文件上传
+    with gr.Row():
+        syllabus_file = gr.File(
+            label="Upload course file (.docx / .pdf / .pptx)",
+            file_types=[".docx", ".pdf", ".pptx"],
+        )
+        doc_type = gr.Dropdown(
+            choices=DOC_TYPES,
+            value="Syllabus",
+            label="File type",
+        )
 
-    # ================== Logic Bindings ==================
+    # 状态：课程大纲 + 学生弱项 + 认知状态 + RAG chunks
+    course_outline_state = gr.State(DEFAULT_COURSE_TOPICS)
+    weakness_state = gr.State([])
+    cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
+    rag_chunks_state = gr.State([])  # Session 级 RAG 向量库
 
+    # 上传 syllabus 时更新课程大纲 + RAG chunks
     def update_course_and_rag(file, doc_type_val):
+        """
+        上传文件时：
+        - 如果 doc_type 是 Syllabus，就尝试从文件中解析课程大纲（支持 docx / pdf）；
+        - 否则使用默认大纲；
+        - 同时无论 doc_type 为何，都用文件内容构建一次 RAG chunks。
+        """
         topics = extract_course_topics_from_file(file, doc_type_val)
         rag_chunks = build_rag_chunks_from_file(file, doc_type_val)
-        status_md = f"✅ **File Loaded:** {doc_type_val}\n\nAnalyzing content for Memory Line..."
-        return topics, rag_chunks, status_md
+        return topics, rag_chunks
 
     syllabus_file.change(
         fn=update_course_and_rag,
         inputs=[syllabus_file, doc_type],
-        outputs=[course_outline_state, rag_chunks_state, session_status],
+        outputs=[course_outline_state, rag_chunks_state],
+    )
+
+    # 左侧聊天，右侧 Session 状态栏
+    with gr.Row():
+        chatbot = gr.Chatbot(
+            label="Clare Chat",
+            height=450,
+            avatar_images=(None, CLARE_LOGO_PATH),  # 用户默认头像，助教用小火苗
+        )
+        session_status = gr.Markdown(
+            value=render_session_status(
+                "Concept Explainer",
+                [],
+                {"confusion": 0, "mastery": 0},
+            ),
+            label="Session status",
+        )
+
+    user_input = gr.Textbox(
+        label="Your question",
+        placeholder="Ask about a concept, your assignment, or let Clare test you with a quick question...",
+    )
+
+    with gr.Row():
+        clear_btn = gr.Button("Reset conversation")
+        export_btn = gr.Button("Export conversation")
+        quiz_btn = gr.Button("Generate 3 quiz questions")
+        summary_btn = gr.Button("Summarize concepts")
+
+    export_box = gr.Textbox(
+        label="Conversation export (Markdown)",
+        lines=8,
+    )
+    quiz_box = gr.Textbox(
+        label="Generated quiz (with answer key)",
+        lines=8,
+    )
+    summary_box = gr.Textbox(
+        label="Concept summary (for study notes)",
+        lines=8,
     )
 
-    def respond(message, chat_history, course_outline, weaknesses, cognitive_state, rag_chunks, model, lang, mode, doc_type_val):
-        resolved_lang = detect_language(message or "", lang)
-        
+    # ========== User Guide ==========
+
+    with gr.Accordion("User Guide", open=False):
+        with gr.Row():
+            # 左侧“蓝色链接列表”
+            with gr.Column(scale=1, min_width=180, elem_id="user-guide-links"):
+                ug_getting_started = gr.Button("Getting started", variant="secondary")
+                ug_mode_def = gr.Button("Mode Definition", variant="secondary")
+                ug_how_works = gr.Button("How Clare Works", variant="secondary")
+                ug_memory_line = gr.Button("What is Memory line", variant="secondary")
+                ug_learning_progress = gr.Button("Learning Progress Report", variant="secondary")
+                ug_how_files = gr.Button("How Clare Uses Your Files", variant="secondary")
+                ug_micro_quiz = gr.Button("Micro-Quiz", variant="secondary")
+                ug_summarization = gr.Button("Summarization", variant="secondary")
+                ug_export_conv = gr.Button("Export Conversation", variant="secondary")
+                ug_faq = gr.Button("FAQ", variant="secondary")
+
+            # 右侧具体内容框
+            with gr.Column(scale=3):
+                user_guide_md = gr.Markdown(
+                    value=USER_GUIDE_SECTIONS["getting_started"],
+                    elem_id="user-guide-panel",
+                )
+
+    # ================== 主对话逻辑 ==================
+
+    def respond(
+        message,
+        chat_history,
+        course_outline,
+        weaknesses,
+        cognitive_state,
+        rag_chunks,
+        model_name_val,
+        language_pref_val,
+        learning_mode_val,
+        doc_type_val,
+    ):
+        # 1) 决定本轮语言（Auto / English / 中文）
+        resolved_lang = detect_language(message or "", language_pref_val)
+
+        # 2) 空输入防护
         if not message or not message.strip():
-             return "", chat_history, weaknesses, cognitive_state, session_status.value
+            empty_msg = get_empty_input_prompt(resolved_lang)
+            new_history = chat_history + [("", empty_msg)]
+            status_text = render_session_status(
+                learning_mode_val,
+                weaknesses or [],
+                cognitive_state,
+            )
+            return "", new_history, weaknesses, cognitive_state, status_text
 
+        # 3) 更新弱项 & 认知状态
         weaknesses = update_weaknesses_from_message(message, weaknesses or [])
         cognitive_state = update_cognitive_state_from_message(message, cognitive_state)
+
+        # 4) Same Question Check（session 内复用答案）
+        dup = find_similar_past_question(message, chat_history)
+        if dup is not None:
+            past_q, past_a, sim = dup
+            prefix_en = (
+                "I noticed this question is very similar to one you asked earlier, "
+                "so I'm showing the previous explanation again. "
+                "If there's a specific part that's still unclear, tell me and I can "
+                "re-explain it in a different way.\n\n"
+                "**Earlier answer:**\n"
+            )
+            prefix_zh = (
+                "我注意到你现在的问题和之前问过的非常相似，"
+                "所以我先把当时的回答再展示一次。"
+                "如果还有具体不清楚的地方，可以告诉我，我会换一种方式解释。\n\n"
+                "**之前的回答：**\n"
+            )
+            if resolved_lang == "中文":
+                answer = prefix_zh + past_a
+            else:
+                answer = prefix_en + past_a
+
+            new_history = chat_history + [(message, answer)]
+            status_text = render_session_status(
+                learning_mode_val,
+                weaknesses,
+                cognitive_state,
+            )
+            return "", new_history, weaknesses, cognitive_state, status_text
+
+        # 5) RAG：基于上传文档做检索
         rag_context = retrieve_relevant_chunks(message, rag_chunks or [])
 
+        # 6) 正常调用 Clare（带上 RAG context）
         answer, new_history = chat_with_clare(
             message=message,
             history=chat_history,
-            model_name=model,
+            model_name=model_name_val,
             language_preference=resolved_lang,
-            learning_mode=mode,
+            learning_mode=learning_mode_val,
             doc_type=doc_type_val,
             course_outline=course_outline,
             weaknesses=weaknesses,
             cognitive_state=cognitive_state,
-            rag_context=rag_context
+            rag_context=rag_context,
+        )
+
+        # RAG 标记
+        if rag_context:
+            # 根据语言给不同提示
+            if resolved_lang == "中文":
+                prefix = "（本次回答参考了你上传的课程文档内容。）\n\n"
+            else:
+                prefix = "(This answer used excerpts from your uploaded course document.)\n\n"
+
+            tagged_answer = prefix + answer
+            # 更新最后一条记录里的 assistant 内容
+            if new_history:
+                new_history[-1] = (message, tagged_answer)
+            answer = tagged_answer
+
+        status_text = render_session_status(
+            learning_mode_val,
+            weaknesses,
+            cognitive_state,
         )
-        
-        new_status = render_session_status(mode, weaknesses, cognitive_state)
-        return "", new_history, weaknesses, cognitive_state, new_status
+        return "", new_history, weaknesses, cognitive_state, status_text
 
     user_input.submit(
         respond,
-        [user_input, chatbot, course_outline_state, weakness_state, cognitive_state_state, rag_chunks_state, model_name, language_preference, learning_mode, doc_type],
-        [user_input, chatbot, weakness_state, cognitive_state_state, session_status]
+        [
+            user_input,
+            chatbot,
+            course_outline_state,
+            weakness_state,
+            cognitive_state_state,
+            rag_chunks_state,
+            model_name,
+            language_preference,
+            learning_mode,
+            doc_type,
+        ],
+        [user_input, chatbot, weakness_state, cognitive_state_state, session_status],
+    )
+
+    # 清空对话 & 状态
+    def clear_all():
+        empty_state = {"confusion": 0, "mastery": 0}
+        status_text = render_session_status("Concept Explainer", [], empty_state)
+        return (
+            [],          # chatbot
+            [],          # weaknesses
+            empty_state, # cognitive_state
+            [],          # rag_chunks
+            "",          # export_box
+            "",          # quiz_box
+            "",          # summary_box
+            status_text, # session_status
+        )
+
+    clear_btn.click(
+        clear_all,
+        None,
+        [
+            chatbot,
+            weakness_state,
+            cognitive_state_state,
+            rag_chunks_state,
+            export_box,
+            quiz_box,
+            summary_box,
+            session_status,
+        ],
+        queue=False,
     )
 
-    def on_export(chat_history, course_outline, mode, weaknesses, cognitive_state):
-        return export_conversation(chat_history, course_outline, mode, weaknesses, cognitive_state)
+    # 导出对话
+    def on_export(chat_history, course_outline, learning_mode_val, weaknesses, cognitive_state):
+        return export_conversation(
+            chat_history,
+            course_outline,
+            learning_mode_val,
+            weaknesses or [],
+            cognitive_state,
+        )
 
     export_btn.click(
         on_export,
         [chatbot, course_outline_state, learning_mode, weakness_state, cognitive_state_state],
-        [result_display]
+        [export_box],
     )
 
-    def on_quiz(chat_history, course_outline, weaknesses, cognitive_state, model, lang):
-        return generate_quiz_from_history(chat_history, course_outline, weaknesses, cognitive_state, model, lang)
+    # 生成 quiz
+    def on_quiz(
+        chat_history,
+        course_outline,
+        weaknesses,
+        cognitive_state,
+        model_name_val,
+        language_pref_val,
+    ):
+        return generate_quiz_from_history(
+            chat_history,
+            course_outline,
+            weaknesses or [],
+            cognitive_state,
+            model_name_val,
+            language_pref_val,
+        )
 
     quiz_btn.click(
         on_quiz,
-        [chatbot, course_outline_state, weakness_state, cognitive_state_state, model_name, language_preference],
-        [result_display]
+        [
+            chatbot,
+            course_outline_state,
+            weakness_state,
+            cognitive_state_state,
+            model_name,
+            language_preference,
+        ],
+        [quiz_box],
     )
 
-    def on_summary(chat_history, course_outline, weaknesses, cognitive_state, model, lang):
-        return summarize_conversation(chat_history, course_outline, weaknesses, cognitive_state, model, lang)
+    # 概念总结
+    def on_summary(
+        chat_history,
+        course_outline,
+        weaknesses,
+        cognitive_state,
+        model_name_val,
+        language_pref_val,
+    ):
+        return summarize_conversation(
+            chat_history,
+            course_outline,
+            weaknesses or [],
+            cognitive_state,
+            model_name_val,
+            language_pref_val,
+        )
 
     summary_btn.click(
         on_summary,
-        [chatbot, course_outline_state, weakness_state, cognitive_state_state, model_name, language_preference],
-        [result_display]
+        [
+            chatbot,
+            course_outline_state,
+            weakness_state,
+            cognitive_state_state,
+            model_name,
+            language_preference,
+        ],
+        [summary_box],
     )
 
-    def clear_all():
-        empty_state = {"confusion": 0, "mastery": 0}
-        default_status = render_session_status("Concept Explainer", [], empty_state)
-        return [], [], empty_state, [], "", default_status
+    # ========== User Guide button bindings ==========
 
-    clear_btn.click(
-        clear_all,
-        None,
-        [chatbot, weakness_state, cognitive_state_state, rag_chunks_state, result_display, session_status],
-        queue=False
+    ug_getting_started.click(
+        lambda: get_user_guide_section("getting_started"),
+        outputs=user_guide_md,
+    )
+    ug_mode_def.click(
+        lambda: get_user_guide_section("mode_definition"),
+        outputs=user_guide_md,
+    )
+    ug_how_works.click(
+        lambda: get_user_guide_section("how_clare_works"),
+        outputs=user_guide_md,
+    )
+    ug_memory_line.click(
+        lambda: get_user_guide_section("memory_line"),
+        outputs=user_guide_md,
+    )
+    ug_learning_progress.click(
+        lambda: get_user_guide_section("learning_progress"),
+        outputs=user_guide_md,
+    )
+    ug_how_files.click(
+        lambda: get_user_guide_section("how_files"),
+        outputs=user_guide_md,
+    )
+    ug_micro_quiz.click(
+        lambda: get_user_guide_section("micro_quiz"),
+        outputs=user_guide_md,
+    )
+    ug_summarization.click(
+        lambda: get_user_guide_section("summarization"),
+        outputs=user_guide_md,
+    )
+    ug_export_conv.click(
+        lambda: get_user_guide_section("export_conversation"),
+        outputs=user_guide_md,
+    )
+    ug_faq.click(
+        lambda: get_user_guide_section("faq"),
+        outputs=user_guide_md,
     )
-    
-    def show_guide(section):
-        return get_user_guide_section(section)
 
-    ug_getting_started.click(lambda: show_guide("getting_started"), outputs=result_display)
-    ug_mode_def.click(lambda: show_guide("mode_definition"), outputs=result_display)
-    ug_how_works.click(lambda: show_guide("how_clare_works"), outputs=result_display)
-    ug_memory_line.click(lambda: show_guide("memory_line"), outputs=result_display)
 
 if __name__ == "__main__":
-    # 【修正】：allowed_paths 必须放在 launch() 中
-    demo.launch(allowed_paths=["."])
+    demo.launch()