Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -4,15 +4,7 @@ import { Button } from "./ui/button";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import {
-  Copy,
-  ThumbsUp,
-  ThumbsDown,
-  ChevronDown,
-  ChevronUp,
-  Check,
-  X,
-} from "lucide-react";
+import { Copy, ThumbsUp, ThumbsDown, ChevronDown, ChevronUp, Check, X } from "lucide-react";
 import { Badge } from "./ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import { Textarea } from "./ui/textarea";
@@ -23,14 +15,13 @@ import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png"
 interface MessageProps {
   key?: React.Key;
   message: MessageType;
-  showSenderInfo?: boolean; // For group chat mode
-  isFirstGreeting?: boolean; // Indicates if this is the first greeting message
-  showNextButton?: boolean; // For quiz mode
-  onNextQuestion?: () => void; // For quiz mode
-  chatMode?: "ask" | "review" | "quiz"; // Current chat mode
+  showSenderInfo?: boolean;
+  isFirstGreeting?: boolean;
+  showNextButton?: boolean;
+  onNextQuestion?: () => void;
+  chatMode?: "ask" | "review" | "quiz";
 }
 
-// 反馈标签选项
 const FEEDBACK_TAGS = {
   "not-helpful": [
     "Code was incorrect",
@@ -42,6 +33,14 @@ const FEEDBACK_TAGS = {
   helpful: ["Accurate and helpful", "Clear explanation", "Good examples", "Solved my problem", "Well structured"],
 };
 
+function unescapeMarkdown(s: string) {
+  // 处理最常见的“被转义导致 Markdown 不生效”的情况：\*\*bold\*\*
+  return (s || "")
+    .replace(/\\\*/g, "*")
+    .replace(/\\_/g, "_")
+    .replace(/\\`/g, "`");
+}
+
 export function Message({
   message,
   showSenderInfo = false,
@@ -89,7 +88,6 @@ export function Message({
     setFeedbackType(null);
     setFeedbackText("");
     setSelectedTags([]);
-    // 不重置 feedback，保持点赞/点踩的状态
   };
 
   const handleTagToggle = (tag: string) => {
@@ -103,25 +101,16 @@ export function Message({
       text: feedbackText,
       messageId: message.id || message.content.substring(0, 50),
     };
-
     console.log("Feedback submitted:", feedbackData);
     toast.success("感谢您的反馈！");
     handleFeedbackClose();
   };
 
-  // ✅ Markdown renderer (only for assistant; user keeps plain text)
   const markdownClass = useMemo(() => {
-    // 这里用 prose 让列表/加粗/斜体更自然；并控制尺寸不要太夸张
-    // 注意：Tailwind 的 prose 需要你项目里已启用 typography 插件；如果你没启用，也不会报错，只是 class 不生效
-    // 即便 prose 不生效，下面 components 也能保证基本样式
-    const base =
-      "text-base leading-relaxed " +
-      "prose prose-sm max-w-none " +
-      "prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 " +
-      "prose-strong:font-semibold prose-code:px-1 prose-code:py-0.5 prose-code:rounded " +
-      "prose-pre:p-3 prose-pre:rounded-lg " +
-      "whitespace-pre-wrap break-words";
-    return base;
+    return (
+      "text-base leading-relaxed max-w-none " +
+      "whitespace-pre-wrap break-words"
+    );
   }, []);
 
   const renderBubbleContent = () => {
@@ -134,7 +123,6 @@ export function Message({
         remarkPlugins={[remarkGfm]}
         className={markdownClass}
         components={{
-          // 保证段落不要把气泡撑得很松
           p: ({ children, ...props }) => (
             <p className="my-2 whitespace-pre-wrap break-words" {...props}>
               {children}
@@ -165,7 +153,6 @@ export function Message({
               {children}
             </em>
           ),
-          // 避免 code 把气泡撑开
           code: ({ children, ...props }) => (
             <code className="px-1 py-0.5 rounded bg-black/5 dark:bg-white/10" {...props}>
               {children}
@@ -176,7 +163,6 @@ export function Message({
               {children}
             </pre>
           ),
-          // 你如果不想自动生成链接样式，可以在这里控制
           a: ({ children, ...props }) => (
             <a className="underline underline-offset-2" target="_blank" rel="noreferrer" {...props}>
               {children}
@@ -184,7 +170,7 @@ export function Message({
           ),
         }}
       >
-        {message.content}
+        {unescapeMarkdown(message.content)}
       </ReactMarkdown>
     );
   };
@@ -219,7 +205,6 @@ export function Message({
         className={`group flex flex-col gap-2 ${isUser && !showSenderInfo ? "items-end" : "items-start"}`}
         style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}
       >
-        {/* Sender name in group chat */}
         {showSenderInfo && message.sender && (
           <div className="flex items-center gap-2 px-1">
             <span className="text-xs">{message.sender.name}</span>
@@ -227,17 +212,10 @@ export function Message({
           </div>
         )}
 
-        {/* Bubble */}
-        <div
-          className={`
-            rounded-2xl px-4 py-3
-            ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
-          `}
-        >
+        <div className={`rounded-2xl px-4 py-3 ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
           {renderBubbleContent()}
         </div>
 
-        {/* Next Question Button for Quiz Mode */}
         {!isUser && showNextButton && !nextButtonClicked && chatMode === "quiz" && onNextQuestion && (
           <div className="mt-2">
             <Button
@@ -252,7 +230,6 @@ export function Message({
           </div>
         )}
 
-        {/* References */}
         {message.references && message.references.length > 0 && (
           <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
             <CollapsibleTrigger asChild>
@@ -271,7 +248,6 @@ export function Message({
           </Collapsible>
         )}
 
-        {/* Message Actions */}
         {shouldShowActions && (
           <div className="flex items-center gap-1">
             <Button
@@ -315,7 +291,6 @@ export function Message({
           </div>
         )}
 
-        {/* Feedback Area */}
         {!isUser && showFeedbackArea && feedbackType && (
           <div className="w-full mt-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
             <div className="flex items-start justify-between mb-4">