Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -7,7 +7,8 @@ import {
   ChevronDown,
   ChevronUp,
   Check,
-  X,
+  Bot,
+  X
 } from 'lucide-react';
 import { Badge } from './ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
@@ -16,50 +17,22 @@ 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: Record<FeedbackRating, string[]> = {
-  not_helpful: [
+const FEEDBACK_TAGS = {
+  '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',
@@ -68,28 +41,14 @@ const FEEDBACK_TAGS: Record<FeedbackRating, string[]> = {
   ],
 };
 
-export function Message({
-  message,
-  showSenderInfo = false,
-
-  // NEW
-  user = null,
-  learningMode,
-  docType,
-  refs,
-  getContextUserText,
-}: MessageProps) {
-  const [feedback, setFeedback] = useState<FeedbackRating | null>(null);
+export function Message({ message, showSenderInfo = false }: MessageProps) {
+  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
   const [copied, setCopied] = useState(false);
   const [referencesOpen, setReferencesOpen] = useState(false);
   const [showFeedbackArea, setShowFeedbackArea] = useState(false);
-
-  // ✅ unify to backend enum
-  const [feedbackType, setFeedbackType] = useState<FeedbackRating | null>(null);
-
+  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
   const [feedbackText, setFeedbackText] = useState('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [submitting, setSubmitting] = useState(false);
 
   const isUser = message.role === 'user';
 
@@ -100,21 +59,20 @@ export function Message({
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedbackClick = (type: FeedbackRating) => {
+  const handleFeedbackClick = (type: 'helpful' | 'not-helpful') => {
     if (feedback === type) {
-      // clicked same state -> collapse + reset detail
+      // 如果点击的是已选中的反馈，则关闭反馈区域
       setFeedback(null);
       setShowFeedbackArea(false);
       setFeedbackType(null);
       setFeedbackText('');
       setSelectedTags([]);
-      return;
+    } else {
+      // 打开反馈区域
+      setFeedback(type);
+      setFeedbackType(type);
+      setShowFeedbackArea(true);
     }
-
-    // open feedback area
-    setFeedback(type);
-    setFeedbackType(type);
-    setShowFeedbackArea(true);
   };
 
   const handleFeedbackClose = () => {
@@ -122,76 +80,46 @@ export function Message({
     setFeedbackType(null);
     setFeedbackText('');
     setSelectedTags([]);
-    // do NOT reset feedback (keeps thumbs state)
+    // 注意：不重置 feedback，保持点赞/点踩的状态
   };
 
   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 = 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);
-    }
+  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();
+    // 保持反馈状态（点赞/点踩）
   };
 
   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>
@@ -207,9 +135,7 @@ export function Message({
           <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>
         )}
@@ -217,31 +143,13 @@ export function Message({
         <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'
+            }
           `}
         >
-          {/* ✅ 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>
-          )}
+          <p className="whitespace-pre-wrap">{message.content}</p>
         </div>
 
         {/* References */}
@@ -249,7 +157,11 @@ export function Message({
           <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>
@@ -265,7 +177,12 @@ 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" />
@@ -284,22 +201,17 @@ export function Message({
               <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>
@@ -308,17 +220,24 @@ export function Message({
           )}
         </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
@@ -333,7 +252,7 @@ export function Message({
               ))}
             </div>
 
-            {/* Comment box */}
+            {/* 文本输入框 */}
             <Textarea
               className="min-h-[60px] mb-4 bg-white dark:bg-gray-900"
               value={feedbackText}
@@ -341,17 +260,21 @@ export function Message({
               placeholder="Additional feedback (optional)..."
             />
 
-            {/* Submit */}
+            {/* 提交按钮 */}
             <div className="flex justify-end gap-2">
-              <Button variant="outline" size="sm" onClick={handleFeedbackClose} disabled={submitting}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleFeedbackClose}
+              >
                 Cancel
               </Button>
               <Button
                 size="sm"
                 onClick={handleFeedbackSubmit}
-                disabled={submitting || (selectedTags.length === 0 && !feedbackText.trim())}
+                disabled={selectedTags.length === 0 && !feedbackText.trim()}
               >
-                {submitting ? 'Submitting…' : 'Submit'}
+                Submit
               </Button>
             </div>
           </div>
@@ -365,4 +288,4 @@ export function Message({
       )}
     </div>
   );
-}
+}