Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Button } from './ui/button';
 import {
   Copy,
@@ -14,52 +14,56 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collap
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
 import { Textarea } from './ui/textarea';
 import type { Message as MessageType, LearningMode } from '../App';
-import { toast } from 'sonner@2.0.3';
+import { toast } from 'sonner';
 
 interface MessageProps {
   message: MessageType;
-  showSenderInfo?: boolean; // For group chat mode
+  showSenderInfo?: boolean;
 
-  // ✅ 新增：写入 /api/feedback 需要的信息
+  // ✅ needed for logging feedback
   userId: string;
+  isLoggedIn: boolean;
   learningMode: LearningMode;
-  docType?: string;
-  lastUserText?: string; // 可选：如果你想把本轮 user 的问题也一起上报
-}
+  docType: string;
 
-type UIFeedback = 'helpful' | 'not-helpful';
+  // optional: pass the last user message so feedback can include question
+  lastUserText?: string;
+}
 
-async function postJson<T>(url: string, payload: any): Promise<T> {
-  const res = await fetch(url, {
+async function postJson(path: string, payload: any) {
+  const res = await fetch(path, {
     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}`);
+    const txt = await res.text().catch(() => '');
+    throw new Error(`HTTP ${res.status}: ${txt || res.statusText}`);
   }
-  return (await res.json()) as T;
+  return res.json();
 }
 
 export function Message({
   message,
   showSenderInfo = false,
   userId,
+  isLoggedIn,
   learningMode,
-  docType = '',
+  docType,
   lastUserText = '',
 }: MessageProps) {
-  const [feedback, setFeedback] = useState<UIFeedback | null>(null);
+  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
   const [copied, setCopied] = useState(false);
   const [referencesOpen, setReferencesOpen] = useState(false);
   const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
-  const [feedbackType, setFeedbackType] = useState<UIFeedback | null>(null);
+  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
   const [feedbackText, setFeedbackText] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   const isUser = message.role === 'user';
 
+  const refs = useMemo(() => (message.references || []).filter(Boolean), [message.references]);
+
   const handleCopy = async () => {
     await navigator.clipboard.writeText(message.content);
     setCopied(true);
@@ -67,10 +71,9 @@ export function Message({
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedbackDialogOpen = (type: UIFeedback) => {
-    // ✅ 已经提交过就不再允许重复写入
-    if (feedback) {
-      toast.message('Feedback already recorded for this message.');
+  const handleFeedbackDialogOpen = (type: 'helpful' | 'not-helpful') => {
+    if (!isLoggedIn || !userId) {
+      toast.error('Please log in first');
       return;
     }
     setFeedbackType(type);
@@ -86,27 +89,26 @@ export function Message({
   const handleFeedbackDialogSubmit = async () => {
     if (!feedbackType) return;
 
-    // UI: not-helpful -> API: not_helpful
-    const apiRating = feedbackType === 'helpful' ? 'helpful' : 'not_helpful';
+    if (!isLoggedIn || !userId) {
+      toast.error('Please log in first');
+      return;
+    }
 
     try {
       setSubmitting(true);
 
-      const payload = {
-        user_id: (userId || '').trim(),
-        rating: apiRating,
+      await postJson('/api/feedback', {
+        user_id: userId,
+        rating: feedbackType === 'helpful' ? 'helpful' : 'not_helpful',
         assistant_message_id: message.id,
-        assistant_text: message.content || '',
+        assistant_text: message.content,
         user_text: lastUserText || '',
-        comment: feedbackText.trim() || '',
-        refs: message.references || [],
+        comment: feedbackText.trim(),
+        refs,
         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!');
@@ -123,16 +125,20 @@ export function Message({
     <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
-            ? 'bg-gradient-to-br from-purple-500 to-blue-500'
-            : 'bg-muted'
-        }`}>
+        <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' : 'bg-muted'
+          }`}
+        >
           {message.sender.isAI ? (
             <Bot className="h-4 w-4 text-white" />
           ) : (
             <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>
@@ -147,39 +153,30 @@ export function Message({
         {showSenderInfo && message.sender && (
           <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>
-            )}
+            {message.sender.isAI && <Badge variant="secondary" className="text-xs h-4 px-1">AI</Badge>}
           </div>
         )}
 
         <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>
         </div>
 
         {/* References */}
-        {message.references && message.references.length > 0 && (
+        {refs.length > 0 && (
           <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" />
-                )}
-                {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
+                {referencesOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+                {refs.length} {refs.length === 1 ? 'reference' : 'references'}
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent className="space-y-1 mt-1">
-              {message.references.map((ref, index) => (
+              {refs.map((ref, index) => (
                 <Badge key={index} variant="outline" className="text-xs">
                   {ref}
                 </Badge>
@@ -190,12 +187,7 @@ export function Message({
 
         {/* 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" />
@@ -216,20 +208,20 @@ export function Message({
                 size="sm"
                 className={`h-7 gap-1 ${feedback === 'helpful' ? 'text-green-600' : ''}`}
                 onClick={() => handleFeedbackDialogOpen('helpful')}
-                disabled={!!feedback}
+                disabled={!isLoggedIn}
               >
                 <ThumbsUp className="h-3 w-3" />
-                <span className="text-xs">{feedback === 'helpful' ? 'Helpful (sent)' : 'Helpful'}</span>
+                <span className="text-xs">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}
+                disabled={!isLoggedIn}
               >
                 <ThumbsDown className="h-3 w-3" />
-                <span className="text-xs">{feedback === 'not-helpful' ? 'Not helpful (sent)' : 'Not helpful'}</span>
+                <span className="text-xs">Not helpful</span>
               </Button>
             </>
           )}
@@ -253,27 +245,20 @@ export function Message({
                 : 'Tell us why you found this message not helpful.'}
             </DialogDescription>
           </DialogHeader>
+
           <Textarea
             className="h-20"
             value={feedbackText}
             onChange={(e) => setFeedbackText(e.target.value)}
             placeholder="Type your feedback here..."
           />
+
           <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={handleFeedbackDialogClose}
-              disabled={submitting}
-            >
+            <Button type="button" variant="outline" onClick={handleFeedbackDialogClose} disabled={submitting}>
               Cancel
             </Button>
-            <Button
-              type="button"
-              onClick={handleFeedbackDialogSubmit}
-              disabled={submitting}
-            >
-              Submit
+            <Button type="button" onClick={handleFeedbackDialogSubmit} disabled={submitting}>
+              {submitting ? 'Submitting...' : 'Submit'}
             </Button>
           </DialogFooter>
         </DialogContent>