Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -7,8 +7,7 @@ import {
   ChevronDown,
   ChevronUp,
   Check,
-  Bot,
-  X
+  X,
 } from 'lucide-react';
 import { Badge } from './ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
@@ -17,22 +16,50 @@ import type { Message as MessageType } from '../App';
 import { toast } from 'sonner';
 import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
 
+// ✅ Markdown rendering (NEW)
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// ✅ NEW: call backend feedback API
+import {
+  apiFeedback,
+  type User as ApiUser,
+  type LearningMode as ApiLearningMode,
+  type FileType as ApiFileType,
+  type FeedbackRating,
+} from '../lib/api';
+
 interface MessageProps {
-  key?: React.Key;
   message: MessageType;
   showSenderInfo?: boolean; // For group chat mode
+
+  // ✅ NEW (recommended) — for logging feedback correctly
+  user?: ApiUser | null;
+
+  // context (optional but useful for metadata)
+  learningMode?: ApiLearningMode;
+  docType?: ApiFileType | string;
+
+  // optional: supply refs (if your message.references is not the same as backend refs)
+  refs?: string[];
+
+  /**
+   * Optional: provide the user question that led to this assistant message.
+   * Best practice: parent passes a function that finds previous user message.
+   */
+  getContextUserText?: () => string;
 }
 
 // 反馈标签选项
-const FEEDBACK_TAGS = {
-  'not-helpful': [
+const FEEDBACK_TAGS: Record<FeedbackRating, string[]> = {
+  not_helpful: [
     'Code was incorrect',
     "Shouldn't have used Memory",
     "Don't like the personality",
     "Don't like the style",
     'Not factually correct',
   ],
-  'helpful': [
+  helpful: [
     'Accurate and helpful',
     'Clear explanation',
     'Good examples',
@@ -41,14 +68,28 @@ const FEEDBACK_TAGS = {
   ],
 };
 
-export function Message({ message, showSenderInfo = false }: MessageProps) {
-  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
+export function Message({
+  message,
+  showSenderInfo = false,
+
+  // NEW
+  user = null,
+  learningMode,
+  docType,
+  refs,
+  getContextUserText,
+}: MessageProps) {
+  const [feedback, setFeedback] = useState<FeedbackRating | 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);
+
+  // ✅ unify to backend enum
+  const [feedbackType, setFeedbackType] = useState<FeedbackRating | null>(null);
+
   const [feedbackText, setFeedbackText] = useState('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
 
   const isUser = message.role === 'user';
 
@@ -59,20 +100,21 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
+  const handleFeedbackClick = (type: FeedbackRating) => {
     if (feedback === type) {
-      // 如果点击的是已选中的反馈，则关闭反馈区域
+      // clicked same state -> collapse + reset detail
       setFeedback(null);
       setShowFeedbackArea(false);
       setFeedbackType(null);
       setFeedbackText('');
       setSelectedTags([]);
-    } else {
-      // 打开反馈区域
-      setFeedback(type);
-      setFeedbackType(type);
-      setShowFeedbackArea(true);
+      return;
     }
+
+    // open feedback area
+    setFeedback(type);
+    setFeedbackType(type);
+    setShowFeedbackArea(true);
   };
 
   const handleFeedbackClose = () => {
@@ -80,46 +122,76 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
     setFeedbackType(null);
     setFeedbackText('');
     setSelectedTags([]);
-    // 注意：不重置 feedback，保持点赞/点踩的状态
+    // do NOT reset feedback (keeps thumbs state)
   };
 
   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('感谢您的反馈！');
-    handleFeedbackClose();
-    // 保持反馈状态（点赞/点踩）
+  const handleFeedbackSubmit = async () => {
+    if (!feedbackType) return;
+
+    // If not logged in / no user, we cannot attribute feedback to a student_id
+    if (!user?.email) {
+      toast.error('Please login to submit feedback.');
+      return;
+    }
+
+    const assistantText = (message.content || '').trim();
+    const userText = (getContextUserText ? getContextUserText() : '').trim();
+
+    // refs: prefer explicit refs prop; fallback to message.references
+    const refsToSend =
+      refs && refs.length > 0 ? refs : (message.references ?? []);
+
+    setSubmitting(true);
+    try {
+      await apiFeedback({
+        user,
+        rating: feedbackType,
+        assistantMessageId: message.id, // recommended
+        assistantText,
+        userText,
+        tags: selectedTags,
+        comment: feedbackText,
+        refs: refsToSend,
+        learningMode,
+        docType,
+        timestampMs: Date.now(),
+      });
+
+      toast.success('Thanks — feedback recorded.');
+      handleFeedbackClose();
+      // keep thumbs state
+    } catch (e: any) {
+      console.error('[feedback] submit failed:', e);
+      toast.error(e?.message ? `Feedback failed: ${e.message}` : 'Feedback failed.');
+    } finally {
+      setSubmitting(false);
+    }
   };
 
   return (
     <div className={`flex gap-3 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'}`}>
       {/* Avatar */}
       {showSenderInfo && message.sender ? (
-        <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
-          message.sender.isAI
-            ? 'overflow-hidden bg-white'
-            : 'bg-muted'
-        }`}>
+        <div
+          className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+            message.sender.isAI ? 'overflow-hidden bg-white' : 'bg-muted'
+          }`}
+        >
           {message.sender.isAI ? (
             <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
           ) : (
             <span className="text-sm">
-              {message.sender.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+              {message.sender.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')
+                .toUpperCase()}
             </span>
           )}
         </div>
@@ -135,7 +207,9 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
           <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>
+              <Badge variant="secondary" className="text-xs h-4 px-1">
+                AI
+              </Badge>
             )}
           </div>
         )}
@@ -143,13 +217,31 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
         <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'}
           `}
         >
-          <p className="whitespace-pre-wrap">{message.content}</p>
+          {/* ✅ KEY FIX: assistant uses Markdown renderer */}
+          {isUser ? (
+            <p className="whitespace-pre-wrap">{message.content}</p>
+          ) : (
+            <div className="prose prose-sm max-w-none dark:prose-invert">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  // keep line breaks looking natural in chat bubbles
+                  p: ({ children }) => <p className="whitespace-pre-wrap">{children}</p>,
+                  // code blocks + inline code styling
+                  code: ({ className, children }) => (
+                    <code className={className ? className : 'px-1 py-0.5 rounded bg-black/5 dark:bg-white/10'}>
+                      {children}
+                    </code>
+                  ),
+                }}
+              >
+                {message.content}
+              </ReactMarkdown>
+            </div>
+          )}
         </div>
 
         {/* References */}
@@ -157,11 +249,7 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
           <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" />
-                )}
+                {referencesOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
                 {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
               </Button>
             </CollapsibleTrigger>
@@ -177,12 +265,7 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
 
         {/* Message Actions */}
         <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-7 gap-1"
-            onClick={handleCopy}
-          >
+          <Button variant="ghost" size="sm" className="h-7 gap-1" onClick={handleCopy}>
             {copied ? (
               <>
                 <Check className="h-3 w-3" />
@@ -201,17 +284,22 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
               <Button
                 variant="ghost"
                 size="sm"
-                className={`h-7 gap-1 ${feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20' : ''}`}
+                className={`h-7 gap-1 ${
+                  feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20' : ''
+                }`}
                 onClick={() => handleFeedbackClick('helpful')}
               >
                 <ThumbsUp className="h-3 w-3" />
                 <span className="text-xs">Helpful</span>
               </Button>
+
               <Button
                 variant="ghost"
                 size="sm"
-                className={`h-7 gap-1 ${feedback === 'not-helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20' : ''}`}
-                onClick={() => handleFeedbackClick('not-helpful')}
+                className={`h-7 gap-1 ${
+                  feedback === 'not_helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20' : ''
+                }`}
+                onClick={() => handleFeedbackClick('not_helpful')}
               >
                 <ThumbsDown className="h-3 w-3" />
                 <span className="text-xs">Not helpful</span>
@@ -220,24 +308,17 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
           )}
         </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>
 
-            {/* 标签按钮 */}
+            {/* Tags */}
             <div className="flex flex-wrap gap-2 mb-4">
               {FEEDBACK_TAGS[feedbackType].map((tag) => (
                 <Button
@@ -252,7 +333,7 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
               ))}
             </div>
 
-            {/* 文本输入框 */}
+            {/* Comment box */}
             <Textarea
               className="min-h-[60px] mb-4 bg-white dark:bg-gray-900"
               value={feedbackText}
@@ -260,21 +341,17 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
               placeholder="Additional feedback (optional)..."
             />
 
-            {/* 提交按钮 */}
+            {/* Submit */}
             <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleFeedbackClose}
-              >
+              <Button variant="outline" size="sm" onClick={handleFeedbackClose} disabled={submitting}>
                 Cancel
               </Button>
               <Button
                 size="sm"
                 onClick={handleFeedbackSubmit}
-                disabled={selectedTags.length === 0 && !feedbackText.trim()}
+                disabled={submitting || (selectedTags.length === 0 && !feedbackText.trim())}
               >
-                Submit
+                {submitting ? 'Submitting…' : 'Submit'}
               </Button>
             </div>
           </div>
@@ -288,4 +365,4 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
       )}
     </div>
   );
-}
+}