Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Button } from './ui/button';
-import { 
-  Copy, 
-  ThumbsUp, 
-  ThumbsDown, 
-  ChevronDown, 
+import {
+  Copy,
+  ThumbsUp,
+  ThumbsDown,
+  ChevronDown,
   ChevronUp,
   Check,
   Bot
@@ -13,23 +13,51 @@ import { Badge } from './ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
 import { Textarea } from './ui/textarea';
-import { Label } from './ui/label';
-import type { Message as MessageType } from '../App';
+import type { Message as MessageType, LearningMode } from '../App';
 import { toast } from 'sonner@2.0.3';
 
 interface MessageProps {
   message: MessageType;
   showSenderInfo?: boolean; // For group chat mode
+
+  // ✅ 新增：写入 /api/feedback 需要的信息
+  userId: string;
+  learningMode: LearningMode;
+  docType?: string;
+  lastUserText?: string; // 可选：如果你想把本轮 user 的问题也一起上报
+}
+
+type UIFeedback = 'helpful' | 'not-helpful';
+
+async function postJson<T>(url: string, payload: any): Promise<T> {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`HTTP ${res.status}: ${text || res.statusText}`);
+  }
+  return (await res.json()) as T;
 }
 
-export function Message({ message, showSenderInfo = false }: MessageProps) {
-  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
+export function Message({
+  message,
+  showSenderInfo = false,
+  userId,
+  learningMode,
+  docType = '',
+  lastUserText = '',
+}: MessageProps) {
+  const [feedback, setFeedback] = useState<UIFeedback | null>(null);
   const [copied, setCopied] = useState(false);
   const [referencesOpen, setReferencesOpen] = useState(false);
   const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
-  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [feedbackType, setFeedbackType] = useState<UIFeedback | null>(null);
   const [feedbackText, setFeedbackText] = useState('');
-  
+  const [submitting, setSubmitting] = useState(false);
+
   const isUser = message.role === 'user';
 
   const handleCopy = async () => {
@@ -39,12 +67,12 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedback = (type: 'helpful' | 'not-helpful') => {
-    setFeedback(type);
-    toast.success(`Thanks for your feedback!`);
-  };
-
-  const handleFeedbackDialogOpen = (type: 'helpful' | 'not-helpful') => {
+  const handleFeedbackDialogOpen = (type: UIFeedback) => {
+    // ✅ 已经提交过就不再允许重复写入
+    if (feedback) {
+      toast.message('Feedback already recorded for this message.');
+      return;
+    }
     setFeedbackType(type);
     setShowFeedbackDialog(true);
   };
@@ -55,12 +83,40 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
     setFeedbackText('');
   };
 
-  const handleFeedbackDialogSubmit = () => {
-    if (feedbackType) {
+  const handleFeedbackDialogSubmit = async () => {
+    if (!feedbackType) return;
+
+    // UI: not-helpful -> API: not_helpful
+    const apiRating = feedbackType === 'helpful' ? 'helpful' : 'not_helpful';
+
+    try {
+      setSubmitting(true);
+
+      const payload = {
+        user_id: (userId || '').trim(),
+        rating: apiRating,
+        assistant_message_id: message.id,
+        assistant_text: message.content || '',
+        user_text: lastUserText || '',
+        comment: feedbackText.trim() || '',
+        refs: message.references || [],
+        learning_mode: learningMode,
+        doc_type: docType,
+        timestamp_ms: Date.now(),
+      };
+
+      const resp = await postJson<{ ok: boolean }>('/api/feedback', payload);
+      if (!resp?.ok) throw new Error('ok=false');
+
       setFeedback(feedbackType);
-      toast.success(`Thanks for your feedback!`);
+      toast.success('Thanks for your feedback!');
+      handleFeedbackDialogClose();
+    } catch (e: any) {
+      console.error(e);
+      toast.error(`Feedback failed: ${e?.message || 'unknown error'}`);
+    } finally {
+      setSubmitting(false);
     }
-    handleFeedbackDialogClose();
   };
 
   return (
@@ -68,8 +124,8 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
       {/* Avatar */}
       {showSenderInfo && message.sender ? (
         <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
-          message.sender.isAI 
-            ? 'bg-gradient-to-br from-purple-500 to-blue-500' 
+          message.sender.isAI
+            ? 'bg-gradient-to-br from-purple-500 to-blue-500'
             : 'bg-muted'
         }`}>
           {message.sender.isAI ? (
@@ -101,7 +157,7 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
           className={`
             rounded-2xl px-4 py-3
             ${isUser && !showSenderInfo
-              ? 'bg-primary text-primary-foreground' 
+              ? 'bg-primary text-primary-foreground'
               : 'bg-muted'
             }
           `}
@@ -160,18 +216,20 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
                 size="sm"
                 className={`h-7 gap-1 ${feedback === 'helpful' ? 'text-green-600' : ''}`}
                 onClick={() => handleFeedbackDialogOpen('helpful')}
+                disabled={!!feedback}
               >
                 <ThumbsUp className="h-3 w-3" />
-                <span className="text-xs">Helpful</span>
+                <span className="text-xs">{feedback === 'helpful' ? 'Helpful (sent)' : 'Helpful'}</span>
               </Button>
               <Button
                 variant="ghost"
                 size="sm"
                 className={`h-7 gap-1 ${feedback === 'not-helpful' ? 'text-red-600' : ''}`}
                 onClick={() => handleFeedbackDialogOpen('not-helpful')}
+                disabled={!!feedback}
               >
                 <ThumbsDown className="h-3 w-3" />
-                <span className="text-xs">Not helpful</span>
+                <span className="text-xs">{feedback === 'not-helpful' ? 'Not helpful (sent)' : 'Not helpful'}</span>
               </Button>
             </>
           )}
@@ -190,7 +248,9 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
           <DialogHeader>
             <DialogTitle>Provide Feedback</DialogTitle>
             <DialogDescription>
-              {feedbackType === 'helpful' ? 'Tell us why you found this message helpful.' : 'Tell us why you found this message not helpful.'}
+              {feedbackType === 'helpful'
+                ? 'Tell us why you found this message helpful.'
+                : 'Tell us why you found this message not helpful.'}
             </DialogDescription>
           </DialogHeader>
           <Textarea
@@ -204,12 +264,14 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
               type="button"
               variant="outline"
               onClick={handleFeedbackDialogClose}
+              disabled={submitting}
             >
               Cancel
             </Button>
             <Button
               type="button"
               onClick={handleFeedbackDialogSubmit}
+              disabled={submitting}
             >
               Submit
             </Button>
@@ -218,4 +280,4 @@ export function Message({ message, showSenderInfo = false }: MessageProps) {
       </Dialog>
     </div>
   );
-}
+}