Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -33,19 +33,17 @@ import { apiFeedback } from "../lib/api";
 interface MessageProps {
   key?: React.Key;
   message: MessageType;
-  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
+  showSenderInfo?: boolean;
+  isFirstGreeting?: boolean;
+  showNextButton?: boolean;
+  onNextQuestion?: () => void;
+  chatMode?: "ask" | "review" | "quiz";
 
-  // ✅ NEW: for feedback submission
   currentUserId?: string;
   docType?: string;
   learningMode?: string;
 }
 
-// 反馈标签选项
 const FEEDBACK_TAGS = {
   "not-helpful": [
     "Code was incorrect",
@@ -63,7 +61,6 @@ const FEEDBACK_TAGS = {
   ],
 };
 
-// ---- Markdown list normalization ----
 function normalizeMarkdownLists(input: string) {
   if (!input) return input;
 
@@ -79,10 +76,8 @@ export function Message({
   showNextButton = false,
   onNextQuestion,
   chatMode = "ask",
-
-  // ✅ NEW
   currentUserId,
-  docType = "Syllabus",
+  docType = "All",
   learningMode = "general",
 }: MessageProps) {
   const [feedback, setFeedback] = useState<"helpful" | "not-helpful" | null>(
@@ -90,7 +85,6 @@ export function Message({
   );
   const [copied, setCopied] = useState(false);
 
-  // ✅ References UI state
   const [referencesOpen, setReferencesOpen] = useState(false);
 
   const [showFeedbackArea, setShowFeedbackArea] = useState(false);
@@ -106,6 +100,9 @@ export function Message({
     isFirstGreeting || message.id === "review-1" || message.id === "quiz-1";
   const shouldShowActions = isUser ? true : !isWelcomeMessage;
 
+  const refsList = (message.references ?? []) as string[];
+  const refsCount = refsList.length;
+
   const handleCopy = async () => {
     await navigator.clipboard.writeText(message.content);
     setCopied(true);
@@ -140,7 +137,6 @@ export function Message({
     );
   };
 
-  // ✅ REAL submit to backend -> LangSmith dataset
   const handleFeedbackSubmit = async () => {
     if (!currentUserId || !currentUserId.trim()) {
       toast.error("Missing user_id; cannot submit feedback.");
@@ -151,7 +147,6 @@ export function Message({
       return;
     }
 
-    // UI uses "not-helpful" (dash), backend expects "not_helpful" (underscore)
     const rating = feedbackType === "helpful" ? "helpful" : "not_helpful";
 
     try {
@@ -160,7 +155,7 @@ export function Message({
         rating,
         assistant_message_id: message.id,
         assistant_text: message.content,
-        user_text: "", // optional
+        user_text: "",
         comment: feedbackText || "",
         tags: selectedTags,
         refs: message.references ?? [],
@@ -242,18 +237,12 @@ export function Message({
     );
   };
 
-  const refsArray = Array.isArray(message.references) ? message.references : [];
-  const refsCount = refsArray.length;
-
   const attachments = (message as any).attachments as
     | Array<{ name: string; kind: string; size: number; fileType?: string }>
     | undefined;
 
   const hasAttachments = !!(attachments && attachments.length);
 
-  // ✅ show references row for any assistant message (even 0), but not for user.
-  const shouldShowReferencesRow = !isUser;
-
   return (
     <div
       className={`flex gap-2 ${
@@ -284,11 +273,7 @@ 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}
 
@@ -298,7 +283,6 @@ export function Message({
         }`}
         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>
@@ -313,20 +297,17 @@ export function Message({
         {/* Bubble */}
         <div
           className={`
+            relative
             rounded-2xl px-4 py-3
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
-          {/* ✅ Attachments shown “with” the message (neutral card style) */}
+          {/* Attachments */}
           {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;
+                  a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
 
                 const label =
                   a.kind === "pdf"
@@ -376,9 +357,9 @@ export function Message({
           {renderBubbleContent()}
         </div>
 
-        {/* ✅ References row: BETWEEN bubble and actions */}
-        {shouldShowReferencesRow && (
-          <div className="mt-1">
+        {/* ✅ References OUTSIDE bubble, BETWEEN bubble and actions */}
+        {!isUser && (
+          <div className="mt-0.5">
             <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
               <CollapsibleTrigger asChild>
                 <button
@@ -393,7 +374,7 @@ export function Message({
                     hover:bg-background
                     transition
                   "
-                  title="References"
+                  title={refsCount > 0 ? "References" : "No references returned."}
                 >
                   {referencesOpen ? (
                     <ChevronUp className="h-3 w-3" />
@@ -411,7 +392,7 @@ export function Message({
                     No references returned.
                   </div>
                 ) : (
-                  refsArray.map((ref, index) => (
+                  refsList.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"
@@ -458,11 +439,7 @@ export function Message({
               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 && (