Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -4,9 +4,21 @@ 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 {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
 import { Textarea } from "./ui/textarea";
 import type { Message as MessageType } from "../App";
 import { toast } from "sonner";
@@ -15,13 +27,14 @@ import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png"
 interface MessageProps {
   key?: React.Key;
   message: MessageType;
-  showSenderInfo?: boolean;
-  isFirstGreeting?: boolean;
-  showNextButton?: boolean;
-  onNextQuestion?: () => void;
-  chatMode?: "ask" | "review" | "quiz";
+  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
 }
 
+// 反馈标签选项
 const FEEDBACK_TAGS = {
   "not-helpful": [
     "Code was incorrect",
@@ -30,15 +43,50 @@ const FEEDBACK_TAGS = {
     "Don't like the style",
     "Not factually correct",
   ],
-  helpful: ["Accurate and helpful", "Clear explanation", "Good examples", "Solved my problem", "Well structured"],
+  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, "`");
+// ---- Markdown list normalization ----
+// Fixes patterns like:
+// 1.
+//
+// **Title**
+// ... -> 1. **Title**
+function normalizeMarkdownLists(input: string) {
+  if (!input) return input;
+
+  return (
+    input
+      // ordered list: "1.\n\n  text" -> "1. text"
+      .replace(/(^|\n)(\s*)(\d+\.)\s*\n+\s+/g, "$1$2$3 ")
+      // unordered list: "-\n\n text" -> "- text"
+      .replace(/(^|\n)(\s*)([-*+])\s*\n+\s+/g, "$1$2$3 ")
+  );
+}
+
+function firstTextish(children: React.ReactNode): string {
+  const arr = React.Children.toArray(children);
+  for (const ch of arr) {
+    if (typeof ch === "string") return ch;
+    if (React.isValidElement(ch)) {
+      const inner = (ch.props as any)?.children;
+      const t = firstTextish(inner);
+      if (t) return t;
+    }
+  }
+  return "";
+}
+
+function startsWithEmojiBullet(text: string) {
+  const t = (text || "").trim();
+  // 你图二里的风格：✅ / 🔧 等开头就不要再加圆点
+  return /^(✅|☑️|✔️|🟢|🔧|⭐️|✨|🔥|👉|➡️|•)/.test(t);
 }
 
 export function Message({
@@ -49,17 +97,22 @@ export function Message({
   onNextQuestion,
   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 [feedbackType, setFeedbackType] = useState<
+    "helpful" | "not-helpful" | null
+  >(null);
   const [feedbackText, setFeedbackText] = useState("");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [nextButtonClicked, setNextButtonClicked] = useState(false);
 
   const isUser = message.role === "user";
-  const isWelcomeMessage = isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
+  const isWelcomeMessage =
+    isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
   const shouldShowActions = isUser ? true : !isWelcomeMessage;
 
   const handleCopy = async () => {
@@ -91,7 +144,9 @@ export function Message({
   };
 
   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 = () => {
@@ -101,21 +156,38 @@ export function Message({
       text: feedbackText,
       messageId: message.id || message.content.substring(0, 50),
     };
+
     console.log("Feedback submitted:", feedbackData);
     toast.success("感谢您的反馈！");
     handleFeedbackClose();
   };
 
+  const normalizedMarkdown = useMemo(() => {
+    return normalizeMarkdownLists(message.content || "");
+  }, [message.content]);
+
   const markdownClass = useMemo(() => {
-    return (
-      "text-base leading-relaxed max-w-none " +
-      "whitespace-pre-wrap break-words"
-    );
+    return [
+      "text-base leading-relaxed break-words",
+      // 让段落/列表更紧凑，像产品文案
+      " [&_p]:my-2",
+      " [&_p:first-child]:mt-0",
+      " [&_p:last-child]:mb-0",
+      // code / pre
+      " [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-black/5 dark:[&_code]:bg-white/10",
+      " [&_pre]:my-2 [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-auto [&_pre]:bg-black/5 dark:[&_pre]:bg-white/10",
+      // links
+      " [&_a]:underline [&_a]:underline-offset-2",
+    ].join("");
   }, []);
 
   const renderBubbleContent = () => {
     if (isUser) {
-      return <p className="whitespace-pre-wrap text-base break-words">{message.content}</p>;
+      return (
+        <p className="whitespace-pre-wrap text-base break-words">
+          {message.content}
+        </p>
+      );
     }
 
     return (
@@ -123,65 +195,120 @@ export function Message({
         remarkPlugins={[remarkGfm]}
         className={markdownClass}
         components={{
+          // paragraphs: keep compact and preserve line breaks
           p: ({ children, ...props }) => (
-            <p className="my-2 whitespace-pre-wrap break-words" {...props}>
+            <p className="whitespace-pre-wrap break-words" {...props}>
               {children}
             </p>
           ),
+
+          // unordered list: "product" bullet style (dot), but if emoji-leading, no dot
           ul: ({ children, ...props }) => (
-            <ul className="my-2 list-disc pl-5" {...props}>
+            <ul className="my-2 space-y-2 pl-0" {...props}>
               {children}
             </ul>
           ),
+
+          // ordered list: keep decimal marker but nicer spacing + prevent huge gaps
           ol: ({ children, ...props }) => (
-            <ol className="my-2 list-decimal pl-5" {...props}>
+            <ol
+              className="my-2 space-y-4 pl-6 list-decimal marker:font-semibold marker:text-foreground/60"
+              {...props}
+            >
               {children}
             </ol>
           ),
-          li: ({ children, ...props }) => (
-            <li className="my-1" {...props}>
-              {children}
-            </li>
-          ),
+
+          li: ({ children, node, ...props }) => {
+            const parentTag = (node as any)?.parent?.tagName;
+
+            // For UL: custom bullet layout
+            if (parentTag === "ul") {
+              const first = firstTextish(children);
+              const emoji = startsWithEmojiBullet(first);
+
+              return (
+                <li className="list-none" {...props}>
+                  <div className="flex gap-2">
+                    {!emoji ? (
+                      <span className="mt-[0.62rem] h-1.5 w-1.5 rounded-full bg-foreground/40 flex-shrink-0" />
+                    ) : null}
+                    <div className="min-w-0">{children}</div>
+                  </div>
+                </li>
+              );
+            }
+
+            // For OL: keep marker, but tighten inner spacing
+            return (
+              <li className="pl-1 [&_p]: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: ({ children, ...props }) => (
-            <code className="px-1 py-0.5 rounded bg-black/5 dark:bg-white/10" {...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}>
+            <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}>
+            <a
+              className="underline underline-offset-2"
+              target="_blank"
+              rel="noreferrer"
+              {...props}
+            >
               {children}
             </a>
           ),
         }}
       >
-        {unescapeMarkdown(message.content)}
+        {normalizedMarkdown}
       </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 overflow-hidden bg-white">
           {message.sender.isAI ? (
-            <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+            <img
+              src={clareAvatar}
+              alt="Clare"
+              className="w-full h-full object-cover"
+            />
           ) : (
             <img
               src={
@@ -202,40 +329,64 @@ export function Message({
       ) : null}
 
       <div
-        className={`group flex flex-col gap-2 ${isUser && !showSenderInfo ? "items-end" : "items-start"}`}
+        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>
         )}
 
-        <div className={`rounded-2xl px-4 py-3 ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+        {/* Bubble */}
+        <div
+          className={`
+            rounded-2xl px-4 py-3
+            ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
+          `}
+        >
           {renderBubbleContent()}
         </div>
 
-        {!isUser && showNextButton && !nextButtonClicked && chatMode === "quiz" && onNextQuestion && (
-          <div className="mt-2">
-            <Button
-              onClick={() => {
-                setNextButtonClicked(true);
-                onNextQuestion();
-              }}
-              className="bg-primary hover:bg-primary/90"
-            >
-              Next Question
-            </Button>
-          </div>
-        )}
+        {/* Next Question Button for Quiz Mode */}
+        {!isUser &&
+          showNextButton &&
+          !nextButtonClicked &&
+          chatMode === "quiz" &&
+          onNextQuestion && (
+            <div className="mt-2">
+              <Button
+                onClick={() => {
+                  setNextButtonClicked(true);
+                  onNextQuestion();
+                }}
+                className="bg-primary hover:bg-primary/90"
+              >
+                Next Question
+              </Button>
+            </div>
+          )}
 
+        {/* References */}
         {message.references && message.references.length > 0 && (
           <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">
@@ -248,13 +399,16 @@ export function Message({
           </Collapsible>
         )}
 
+        {/* Message Actions */}
         {shouldShowActions && (
           <div className="flex items-center gap-1">
             <Button
               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"
@@ -268,7 +422,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")}
                   title="Helpful"
@@ -279,7 +435,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")}
                   title="Not helpful"
@@ -291,11 +449,19 @@ 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">
-              <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>
@@ -325,7 +491,11 @@ export function Message({
               <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>
@@ -339,7 +509,9 @@ export function Message({
             <img
               src={
                 message.sender.avatar ||
-                `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(message.sender.email || message.sender.name)}`
+                `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"