Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Button } from './ui/button';
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
 import { 
   Copy, 
   ThumbsUp, 
@@ -7,7 +10,6 @@ import {
   ChevronDown, 
   ChevronUp,
   Check,
-  Bot,
   X
 } from 'lucide-react';
 import { Badge } from './ui/badge';
@@ -73,46 +75,6 @@ export function Message({
     setCopied(true);
     toast.success('Message copied to clipboard');
     setTimeout(() => setCopied(false), 2000);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   };
 
   const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
@@ -138,7 +100,6 @@ export function Message({
     setFeedbackText('');
     setSelectedTags([]);
     // 注意：不重置 feedback，保持点赞/点踩的状态
-
   };
 
   const handleTagToggle = (tag: string) => {
@@ -147,7 +108,6 @@ export function Message({
         ? prev.filter(t => t !== tag)
         : [...prev, tag]
     );
-
   };
 
   const handleFeedbackSubmit = () => {
@@ -193,7 +153,6 @@ export function Message({
         </div>
       ) : null}
 
-
       <div 
         className={`group flex flex-col gap-2 ${isUser && !showSenderInfo ? 'items-end' : 'items-start'}`}
         style={{ maxWidth: 'min(770px, calc(100% - 2rem))' }}
@@ -210,7 +169,6 @@ export function Message({
           </div>
         )}
 
-
         <div
           className={`
             rounded-2xl px-4 py-3
@@ -220,15 +178,32 @@ export function Message({
             }
           `}
         >
-          <p className="whitespace-pre-wrap text-base">{message.content}</p>
+          {/* ✅ Render markdown so **bold** becomes bold (no asterisks shown) */}
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            className={[
+              "text-base",
+              "whitespace-pre-wrap",
+              "prose prose-sm max-w-none",
+              "prose-p:my-1",
+              "prose-ul:my-1 prose-ol:my-1",
+              "prose-li:my-0",
+              "prose-strong:font-semibold",
+              "dark:prose-invert",
+              "prose-code:before:content-[''] prose-code:after:content-['']",
+              "prose-pre:bg-background/60 prose-pre:border prose-pre:border-border prose-pre:rounded-lg",
+              "prose-pre:p-3",
+            ].join(" ")}
+            components={{
+              a: ({ node, ...props }) => (
+                <a {...props} target="_blank" rel="noreferrer" />
+              ),
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
         </div>
 
-
-
-
-
-
-
         {/* Next Question Button for Quiz Mode */}
         {!isUser && showNextButton && !nextButtonClicked && chatMode === 'quiz' && onNextQuestion && (
           <div className="mt-2">
@@ -394,4 +369,4 @@ export function Message({
       )}
     </div>
   );
-}
+}