Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { Button } from "./ui/button";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+
 import pdfIcon from "../assets/file-icons/pdf.png";
 import pptIcon from "../assets/file-icons/ppt.png";
 import otherIcon from "../assets/file-icons/other_format.png";
@@ -33,17 +34,19 @@ import { apiFeedback } from "../lib/api";
 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
 
+  // ✅ NEW: for feedback submission
   currentUserId?: string;
   docType?: string;
   learningMode?: string;
 }
 
+// 反馈标签选项
 const FEEDBACK_TAGS = {
   "not-helpful": [
     "Code was incorrect",
@@ -61,6 +64,7 @@ const FEEDBACK_TAGS = {
   ],
 };
 
+// ---- Markdown list normalization ----
 function normalizeMarkdownLists(input: string) {
   if (!input) return input;
 
@@ -77,18 +81,23 @@ export function Message({
   onNextQuestion,
   chatMode = "ask",
 
+  // ✅ NEW
   currentUserId,
   docType = "Syllabus",
   learningMode = "general",
 }: MessageProps) {
-  const [feedback, setFeedback] = useState<"helpful" | "not-helpful" | null>(null);
+  const [feedback, setFeedback] = useState<"helpful" | "not-helpful" | null>(
+    null
+  );
   const [copied, setCopied] = useState(false);
 
-  // ✅ References UI state (always available for assistant)
+  // ✅ References UI state
   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);
@@ -98,6 +107,11 @@ export function Message({
     isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
   const shouldShowActions = isUser ? true : !isWelcomeMessage;
 
+  // ✅ show reference pill for assistant messages (even if 0)
+  const showReferencesPill = !isUser; // assistant only
+  const refs = Array.isArray(message.references) ? message.references : [];
+  const hasRefs = refs.length > 0;
+
   const handleCopy = async () => {
     await navigator.clipboard.writeText(message.content);
     setCopied(true);
@@ -132,6 +146,7 @@ export function Message({
     );
   };
 
+  // ✅ REAL submit to backend -> LangSmith dataset
   const handleFeedbackSubmit = async () => {
     if (!currentUserId || !currentUserId.trim()) {
       toast.error("Missing user_id; cannot submit feedback.");
@@ -142,6 +157,7 @@ export function Message({
       return;
     }
 
+    // UI uses "not-helpful" (dash), backend expects "not_helpful" (underscore)
     const rating = feedbackType === "helpful" ? "helpful" : "not_helpful";
 
     try {
@@ -150,7 +166,7 @@ export function Message({
         rating,
         assistant_message_id: message.id,
         assistant_text: message.content,
-        user_text: "",
+        user_text: "", // optional
         comment: feedbackText || "",
         tags: selectedTags,
         refs: message.references ?? [],
@@ -186,7 +202,11 @@ export function Message({
 
   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 (
@@ -194,8 +214,12 @@ export function Message({
         remarkPlugins={[remarkGfm]}
         className={markdownClass}
         components={{
-          p: ({ children }) => <p className="my-2 whitespace-pre-wrap break-words">{children}</p>,
-          ul: ({ children }) => <ul className="my-3 pl-6 space-y-2">{children}</ul>,
+          p: ({ children }) => (
+            <p className="my-2 whitespace-pre-wrap break-words">{children}</p>
+          ),
+          ul: ({ children }) => (
+            <ul className="my-3 pl-6 space-y-2">{children}</ul>
+          ),
           ol: ({ children }) => <ol className="my-3 space-y-4">{children}</ol>,
           li: ({ children, node }) => {
             const parent = (node as any)?.parent?.tagName;
@@ -213,7 +237,9 @@ export function Message({
             }
             return <li>{children}</li>;
           },
-          strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+          strong: ({ children }) => (
+            <strong className="font-semibold">{children}</strong>
+          ),
           em: ({ children }) => <em className="italic">{children}</em>,
         }}
       >
@@ -222,17 +248,12 @@ export function Message({
     );
   };
 
-  const refsArr = (message.references || []).filter(Boolean);
-  const refsCount = refsArr.length;
-
   const attachments = (message as any).attachments as
     | Array<{ name: string; kind: string; size: number; fileType?: string }>
     | undefined;
 
   const hasAttachments = !!(attachments && attachments.length);
 
-  const showReferenceWidget = !isUser; // ✅ assistant always shows the ref widget
-
   return (
     <div
       className={`flex gap-2 ${
@@ -243,7 +264,11 @@ export function Message({
       {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={
@@ -259,7 +284,11 @@ export function Message({
         </div>
       ) : !isUser ? (
         <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+          <img
+            src={clareAvatar}
+            alt="Clare"
+            className="w-full h-full object-cover"
+          />
         </div>
       ) : null}
 
@@ -284,17 +313,20 @@ export function Message({
         {/* Bubble */}
         <div
           className={`
-            relative
             rounded-2xl px-4 py-3
-            ${!isUser ? "pb-10" : ""}
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
-          {/* Attachments */}
+          {/* ✅ Attachments shown “with” the message (neutral card style) */}
           {hasAttachments && (
             <div className="mb-3 flex flex-wrap gap-2">
               {attachments!.map((a, idx) => {
-                const icon = a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
+                const icon =
+                  a.kind === "pdf"
+                    ? pdfIcon
+                    : a.kind === "ppt"
+                    ? pptIcon
+                    : otherIcon;
 
                 const label =
                   a.kind === "pdf"
@@ -328,8 +360,12 @@ export function Message({
                       draggable={false}
                     />
                     <div className="min-w-0 leading-tight">
-                      <div className="text-sm font-medium truncate max-w-[320px]">{a.name}</div>
-                      <div className="text-[11px] text-muted-foreground mt-0.5">{label}</div>
+                      <div className="text-sm font-medium truncate max-w-[320px]">
+                        {a.name}
+                      </div>
+                      <div className="text-[11px] text-muted-foreground mt-0.5">
+                        {label}
+                      </div>
                     </div>
                   </div>
                 );
@@ -338,74 +374,76 @@ export function Message({
           )}
 
           {renderBubbleContent()}
+        </div>
 
-          {/* ✅ Bottom-left reference widget (always for assistant) */}
-          {showReferenceWidget && (
-            <div className="absolute left-3 bottom-2">
-              <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
-                <CollapsibleTrigger asChild>
-                  <button
-                    type="button"
-                    className="
-                      inline-flex items-center gap-1
-                      rounded-md border border-border
-                      bg-background/80 dark:bg-background/30
-                      px-2 py-1
-                      text-xs text-foreground
-                      shadow-sm
-                      hover:bg-background
-                      transition
-                    "
-                    title="References"
-                  >
-                    {referencesOpen ? (
-                      <ChevronUp className="h-3 w-3" />
-                    ) : (
-                      <ChevronDown className="h-3 w-3" />
-                    )}
-                    <span className="font-medium">References</span>
-                    <span className="opacity-70">({refsCount})</span>
-                  </button>
-                </CollapsibleTrigger>
-
-                <CollapsibleContent className="mt-2">
-                  {refsCount > 0 ? (
-                    <div className="space-y-1">
-                      {refsArr.map((ref, index) => (
-                        <div
-                          key={index}
-                          className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs"
-                        >
-                          {ref}
-                        </div>
-                      ))}
-                    </div>
+        {/* ✅ References block now sits BETWEEN bubble and actions (NOT inside bubble) */}
+        {showReferencesPill && (
+          <div className={isUser ? "hidden" : ""}>
+            <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="
+                    inline-flex items-center gap-1
+                    rounded-md border border-border
+                    bg-background/80 dark:bg-background/30
+                    px-2 py-1
+                    text-xs text-foreground
+                    shadow-sm
+                    hover:bg-background
+                    transition
+                  "
+                  title="References"
+                >
+                  {referencesOpen ? (
+                    <ChevronUp className="h-3 w-3" />
                   ) : (
-                    <div className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs opacity-80">
-                      No references returned.
-                    </div>
+                    <ChevronDown className="h-3 w-3" />
                   )}
-                </CollapsibleContent>
-              </Collapsible>
-            </div>
-          )}
-        </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>
+                  <span className="font-medium">References</span>
+                  <span className="opacity-70">({refs.length})</span>
+                </button>
+              </CollapsibleTrigger>
+
+              <CollapsibleContent className="mt-2 space-y-1">
+                {hasRefs ? (
+                  refs.map((ref, index) => (
+                    <div
+                      key={index}
+                      className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs"
+                    >
+                      {ref}
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs opacity-80">
+                    No references returned.
+                  </div>
+                )}
+              </CollapsibleContent>
+            </Collapsible>
           </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>
+          )}
+
         {/* Message Actions */}
         {shouldShowActions && (
           <div className="flex items-center gap-1">
@@ -413,12 +451,18 @@ 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 && (
@@ -458,8 +502,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>