Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -24,7 +24,7 @@ import type { Message as MessageType } from "../App";
 import { toast } from "sonner";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
-// ✅ NEW: call backend feedback api
+// ✅ NEW: real API call
 import { apiFeedback } from "../lib/api";
 
 interface MessageProps {
@@ -36,10 +36,10 @@ interface MessageProps {
   onNextQuestion?: () => void; // For quiz mode
   chatMode?: "ask" | "review" | "quiz"; // Current chat mode
 
-  // ✅ NEW: required for submitting feedback to backend
-  currentUserId?: string; // corresponds to backend user_id
-  learningMode?: string;
+  // ✅ NEW: for feedback submission
+  currentUserId?: string;
   docType?: string;
+  learningMode?: string;
 }
 
 // 反馈标签选项
@@ -61,42 +61,16 @@ const FEEDBACK_TAGS = {
 };
 
 // ---- 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({
   message,
   showSenderInfo = false,
@@ -104,9 +78,11 @@ export function Message({
   showNextButton = false,
   onNextQuestion,
   chatMode = "ask",
+
+  // ✅ NEW
   currentUserId,
-  learningMode,
-  docType,
+  docType = "Syllabus",
+  learningMode = "general",
 }: MessageProps) {
   const [feedback, setFeedback] = useState<"helpful" | "not-helpful" | null>(
     null
@@ -121,9 +97,6 @@ export function Message({
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [nextButtonClicked, setNextButtonClicked] = useState(false);
 
-  // ✅ NEW: prevent double submit
-  const [submittingFeedback, setSubmittingFeedback] = useState(false);
-
   const isUser = message.role === "user";
   const isWelcomeMessage =
     isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
@@ -163,51 +136,41 @@ export function Message({
     );
   };
 
-  // ✅ UPDATED: actually send to backend
+  // ✅ REAL submit to backend -> LangSmith dataset
   const handleFeedbackSubmit = async () => {
-    if (!feedbackType) return;
-
     if (!currentUserId || !currentUserId.trim()) {
       toast.error("Missing user_id; cannot submit feedback.");
       return;
     }
+    if (!feedbackType) {
+      toast.error("Please select Helpful / Not helpful.");
+      return;
+    }
 
+    // UI uses "not-helpful" (dash), backend expects "not_helpful" (underscore)
     const rating = feedbackType === "helpful" ? "helpful" : "not_helpful";
 
-    // run_id is stored on assistant message (you need to attach it in ChatArea when receiving /api/chat)
-    const run_id = (message as any)?.run_id ?? null;
-
-    // refs: your message.references appears to be string[] currently
-    const refs = (message.references as any) ?? [];
-
     try {
-      setSubmittingFeedback(true);
-
       await apiFeedback({
         user_id: currentUserId,
         rating,
-        run_id,
-
         assistant_message_id: message.id,
-        assistant_text: message.content || "",
-        user_text: "",
-
-        comment: (feedbackText || "").trim(),
+        assistant_text: message.content,
+        user_text: "", // optional; you can wire last user msg later if you want
+        comment: feedbackText || "",
         tags: selectedTags,
-        refs,
-
-        learning_mode: learningMode,
+        refs: message.references ?? [],
+        learning_mode: chatMode === "ask" ? learningMode : chatMode,
         doc_type: docType,
         timestamp_ms: Date.now(),
       });
 
-      toast.success("Feedback submitted. Thank you!");
+      toast.success("Thanks — feedback submitted.");
       handleFeedbackClose();
     } catch (e: any) {
-      toast.error(e?.message ?? "Feedback submit failed");
-      // keep dialog open so user can retry
-    } finally {
-      setSubmittingFeedback(false);
+      // eslint-disable-next-line no-console
+      console.error("feedback submit failed:", e);
+      toast.error(e?.message || "Failed to submit feedback.");
     }
   };
 
@@ -218,14 +181,11 @@ export function Message({
   const markdownClass = useMemo(() => {
     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("");
   }, []);
@@ -247,39 +207,25 @@ export function Message({
           p: ({ children }) => (
             <p className="my-2 whitespace-pre-wrap break-words">{children}</p>
           ),
-
-          /* ---------- Unordered list (· bullet) ---------- */
           ul: ({ children }) => <ul className="my-3 pl-6 space-y-2">{children}</ul>,
-
-          /* ---------- Ordered list (1. 2. 3.) ---------- */
           ol: ({ children }) => <ol className="my-3 space-y-4">{children}</ol>,
-
           li: ({ children, node }) => {
             const parent = (node as any)?.parent?.tagName;
-
-            // —— ordered list: number aligned left, text indented
             if (parent === "ol") {
               return (
                 <li className="list-none">
                   <div className="flex items-start">
-                    {/* number column */}
                     <span className="w-6 text-right pr-2 flex-shrink-0 font-medium">
                       {(node as any)?.index + 1}.
                     </span>
-
-                    {/* content column */}
                     <div className="min-w-0">{children}</div>
                   </div>
                 </li>
               );
             }
-
-            /* fallback (unordered handled elsewhere) */
             return <li>{children}</li>;
           },
-
           strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
-
           em: ({ children }) => <em className="italic">{children}</em>,
         }}
       >
@@ -347,19 +293,23 @@ export function Message({
         </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>
-        )}
+        {!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 && (
@@ -367,7 +317,8 @@ export function Message({
             <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"}
+                {message.references.length}{" "}
+                {message.references.length === 1 ? "reference" : "references"}
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent className="space-y-1 mt-1">
@@ -387,7 +338,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 ${
-                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"
@@ -432,8 +385,15 @@ export function Message({
         {!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>
@@ -460,15 +420,15 @@ export function Message({
             />
 
             <div className="flex justify-end gap-2">
-              <Button variant="outline" size="sm" onClick={handleFeedbackClose} disabled={submittingFeedback}>
+              <Button variant="outline" size="sm" onClick={handleFeedbackClose}>
                 Cancel
               </Button>
               <Button
                 size="sm"
                 onClick={handleFeedbackSubmit}
-                disabled={submittingFeedback || (selectedTags.length === 0 && !feedbackText.trim())}
+                disabled={selectedTags.length === 0 && !feedbackText.trim()}
               >
-                {submittingFeedback ? "Submitting..." : "Submit"}
+                Submit
               </Button>
             </div>
           </div>