Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
+// web/src/components/Message.tsx
+import React, { useMemo, useState } from "react";
+import { Button } from "./ui/button";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import { 
-  Copy, 
-  ThumbsUp, 
-  ThumbsDown, 
-  ChevronDown, 
+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';
-import type { Message as MessageType } from '../App';
-import { toast } from 'sonner';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+  X,
+} from "lucide-react";
+import { Badge } from "./ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import { Textarea } from "./ui/textarea";
+import type { Message as MessageType } from "../App";
+import { toast } from "sonner";
+import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
 interface MessageProps {
   key?: React.Key;
@@ -26,69 +27,58 @@ interface MessageProps {
   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
+  chatMode?: "ask" | "review" | "quiz"; // Current chat mode
 }
 
 // 反馈标签选项
 const FEEDBACK_TAGS = {
-  'not-helpful': [
-    'Code was incorrect',
+  "not-helpful": [
+    "Code was incorrect",
     "Shouldn't have used Memory",
     "Don't like the personality",
     "Don't like the style",
-    'Not factually correct',
-  ],
-  'helpful': [
-    'Accurate and helpful',
-    'Clear explanation',
-    'Good examples',
-    'Solved my problem',
-    'Well structured',
+    "Not factually correct",
   ],
+  helpful: ["Accurate and helpful", "Clear explanation", "Good examples", "Solved my problem", "Well structured"],
 };
 
-export function Message({ 
-  message, 
-  showSenderInfo = false, 
+export function Message({
+  message,
+  showSenderInfo = false,
   isFirstGreeting = false,
   showNextButton = false,
   onNextQuestion,
-  chatMode = 'ask',
+  chatMode = "ask",
 }: MessageProps) {
-  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [feedback, setFeedback] = useState<"helpful" | "not-helpful" | null>(null);
   const [copied, setCopied] = useState(false);
   const [referencesOpen, setReferencesOpen] = useState(false);
   const [showFeedbackArea, setShowFeedbackArea] = useState(false);
-  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
-  const [feedbackText, setFeedbackText] = useState('');
+  const [feedbackType, setFeedbackType] = useState<"helpful" | "not-helpful" | null>(null);
+  const [feedbackText, setFeedbackText] = useState("");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [isHovered, setIsHovered] = useState(false);
   const [nextButtonClicked, setNextButtonClicked] = useState(false);
-  
-  const isUser = message.role === 'user';
-  // For user messages: always show. For assistant messages: always show except first greeting (or review-1, quiz-1)
-  const isWelcomeMessage = isFirstGreeting || message.id === 'review-1' || message.id === 'quiz-1';
+
+  const isUser = message.role === "user";
+  const isWelcomeMessage = isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
   const shouldShowActions = isUser ? true : !isWelcomeMessage;
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(message.content);
     setCopied(true);
-    toast.success('Message copied to clipboard');
+    toast.success("Message copied to clipboard");
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
+  const handleFeedbackClick = (type: "helpful" | "not-helpful") => {
     if (feedback === type) {
-      // 如果点击的是已选中的反馈，则关闭反馈区域
       setFeedback(null);
       setShowFeedbackArea(false);
       setFeedbackType(null);
-      setFeedbackText('');
+      setFeedbackText("");
       setSelectedTags([]);
     } else {
-      // 立即设置反馈状态（按钮会立即显示颜色）
       setFeedback(type);
-      // 打开反馈区域
       setFeedbackType(type);
       setShowFeedbackArea(true);
     }
@@ -97,50 +87,122 @@ export function Message({
   const handleFeedbackClose = () => {
     setShowFeedbackArea(false);
     setFeedbackType(null);
-    setFeedbackText('');
+    setFeedbackText("");
     setSelectedTags([]);
-    // 注意：不重置 feedback，保持点赞/点踩的状态
+    // 不重置 feedback，保持点赞/点踩的状态
   };
 
   const handleTagToggle = (tag: string) => {
-    setSelectedTags(prev => 
-      prev.includes(tag) 
-        ? prev.filter(t => t !== tag)
-        : [...prev, tag]
-    );
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
   };
 
   const handleFeedbackSubmit = () => {
-    // 这里可以发送反馈到后端
     const feedbackData = {
       type: feedbackType,
       tags: selectedTags,
       text: feedbackText,
       messageId: message.id || message.content.substring(0, 50),
     };
-    
-    console.log('Feedback submitted:', feedbackData);
-    toast.success('感谢您的反馈！');
+
+    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;
+  }, []);
+
+  const renderBubbleContent = () => {
+    if (isUser) {
+      return <p className="whitespace-pre-wrap text-base break-words">{message.content}</p>;
+    }
+
+    return (
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        className={markdownClass}
+        components={{
+          // 保证段落不要把气泡撑得很松
+          p: ({ children, ...props }) => (
+            <p className="my-2 whitespace-pre-wrap break-words" {...props}>
+              {children}
+            </p>
+          ),
+          ul: ({ children, ...props }) => (
+            <ul className="my-2 list-disc pl-5" {...props}>
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }) => (
+            <ol className="my-2 list-decimal pl-5" {...props}>
+              {children}
+            </ol>
+          ),
+          li: ({ children, ...props }) => (
+            <li className="my-1" {...props}>
+              {children}
+            </li>
+          ),
+          strong: ({ children, ...props }) => (
+            <strong className="font-semibold" {...props}>
+              {children}
+            </strong>
+          ),
+          em: ({ children, ...props }) => (
+            <em className="italic" {...props}>
+              {children}
+            </em>
+          ),
+          // 避免 code 把气泡撑开
+          code: ({ children, ...props }) => (
+            <code className="px-1 py-0.5 rounded bg-black/5 dark:bg-white/10" {...props}>
+              {children}
+            </code>
+          ),
+          pre: ({ children, ...props }) => (
+            <pre className="my-2 p-3 rounded-lg overflow-auto bg-black/5 dark:bg-white/10" {...props}>
+              {children}
+            </pre>
+          ),
+          // 你如果不想自动生成链接样式，可以在这里控制
+          a: ({ children, ...props }) => (
+            <a className="underline underline-offset-2" target="_blank" rel="noreferrer" {...props}>
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {message.content}
+      </ReactMarkdown>
+    );
   };
 
   return (
-    <div className={`flex gap-2 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'} px-4`}>
+    <div className={`flex gap-2 ${isUser && !showSenderInfo ? "justify-end" : "justify-start"} px-4`}>
       {/* Avatar */}
       {showSenderInfo && message.sender ? (
-        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-          message.sender.isAI 
-            ? 'overflow-hidden bg-white' 
-            : 'overflow-hidden bg-white'
-        }`}>
+        <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-white">
           {message.sender.isAI ? (
             <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
           ) : (
             <img
               src={
-                message.sender.avatar || 
-                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
+                message.sender.avatar ||
+                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(
+                  message.sender.email || message.sender.name
+                )}`
               }
               alt={message.sender.name}
               className="w-full h-full object-cover"
@@ -153,59 +215,30 @@ 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))' }}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
+      <div
+        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>
-            {message.sender.isAI && (
-              <Badge variant="secondary" className="text-xs h-4 px-1">AI</Badge>
-            )}
+            {message.sender.isAI && <Badge variant="secondary" className="text-xs h-4 px-1">AI</Badge>}
           </div>
         )}
 
+        {/* Bubble */}
         <div
           className={`
             rounded-2xl px-4 py-3
-            ${isUser && !showSenderInfo
-              ? 'bg-primary text-primary-foreground' 
-              : 'bg-muted'
-            }
+            ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
-          {/* ✅ 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>
+          {renderBubbleContent()}
         </div>
 
         {/* Next Question Button for Quiz Mode */}
-        {!isUser && showNextButton && !nextButtonClicked && chatMode === 'quiz' && onNextQuestion && (
+        {!isUser && showNextButton && !nextButtonClicked && chatMode === "quiz" && onNextQuestion && (
           <div className="mt-2">
             <Button
               onClick={() => {
@@ -224,12 +257,8 @@ export function Message({
           <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
             <CollapsibleTrigger asChild>
               <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs">
-                {referencesOpen ? (
-                  <ChevronUp className="h-3 w-3" />
-                ) : (
-                  <ChevronDown className="h-3 w-3" />
-                )}
-                {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
+                {referencesOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+                {message.references.length} {message.references.length === 1 ? "reference" : "references"}
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent className="space-y-1 mt-1">
@@ -249,16 +278,12 @@ export function Message({
               variant="ghost"
               size="icon"
               className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                copied ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
+                copied ? "bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400" : ""
               }`}
               onClick={handleCopy}
               title="Copy"
             >
-              {copied ? (
-                <Check className="h-4 w-4" />
-              ) : (
-                <Copy className="h-4 w-4" />
-              )}
+              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
             </Button>
 
             {!isUser && (
@@ -267,9 +292,9 @@ export function Message({
                   variant="ghost"
                   size="icon"
                   className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                    feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400' : ''
+                    feedback === "helpful" ? "bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400" : ""
                   }`}
-                  onClick={() => handleFeedbackClick('helpful')}
+                  onClick={() => handleFeedbackClick("helpful")}
                   title="Helpful"
                 >
                   <ThumbsUp className="h-4 w-4" />
@@ -278,9 +303,9 @@ export function Message({
                   variant="ghost"
                   size="icon"
                   className={`h-7 w-7 rounded-md transition-all hover:bg-accent hover:scale-110 active:scale-95 ${
-                    feedback === 'not-helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400' : ''
+                    feedback === "not-helpful" ? "bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400" : ""
                   }`}
-                  onClick={() => handleFeedbackClick('not-helpful')}
+                  onClick={() => handleFeedbackClick("not-helpful")}
                   title="Not helpful"
                 >
                   <ThumbsDown className="h-4 w-4" />
@@ -290,29 +315,21 @@ export function Message({
           </div>
         )}
 
-        {/* Feedback Area - 展开在消息下方 */}
+        {/* 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">
-              <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                Tell us more:
-              </h4>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0"
-                onClick={handleFeedbackClose}
-              >
+              <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">Tell us more:</h4>
+              <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleFeedbackClose}>
                 <X className="h-4 w-4" />
               </Button>
             </div>
-            
-            {/* 标签按钮 */}
+
             <div className="flex flex-wrap gap-2 mb-4">
               {FEEDBACK_TAGS[feedbackType].map((tag) => (
                 <Button
                   key={tag}
-                  variant={selectedTags.includes(tag) ? 'default' : 'outline'}
+                  variant={selectedTags.includes(tag) ? "default" : "outline"}
                   size="sm"
                   className="h-7 text-xs"
                   onClick={() => handleTagToggle(tag)}
@@ -322,7 +339,6 @@ export function Message({
               ))}
             </div>
 
-            {/* 文本输入框 */}
             <Textarea
               className="min-h-[60px] mb-4 bg-gray-100/50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600"
               value={feedbackText}
@@ -330,20 +346,11 @@ export function Message({
               placeholder="Additional feedback (optional)..."
             />
 
-            {/* 提交按钮 */}
             <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleFeedbackClose}
-              >
+              <Button variant="outline" size="sm" onClick={handleFeedbackClose}>
                 Cancel
               </Button>
-              <Button
-                size="sm"
-                onClick={handleFeedbackSubmit}
-                disabled={selectedTags.length === 0 && !feedbackText.trim()}
-              >
+              <Button size="sm" onClick={handleFeedbackSubmit} disabled={selectedTags.length === 0 && !feedbackText.trim()}>
                 Submit
               </Button>
             </div>
@@ -356,7 +363,7 @@ export function Message({
           {message.sender ? (
             <img
               src={
-                message.sender.avatar || 
+                message.sender.avatar ||
                 `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
               }
               alt={message.sender.name}