Update web/src/components/RightPanel.tsx

web/src/components/RightPanel.tsx

@@ -6,7 +6,7 @@ import { Card } from './ui/card';
 import { Separator } from './ui/separator';
 import { Textarea } from './ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { LogIn, LogOut, FileText, MessageSquare } from 'lucide-react';
+import { LogIn, LogOut, FileText, MessageSquare, Download, ClipboardList, Sparkles } from 'lucide-react';
 import type { User } from '../App';
 import { toast } from 'sonner';
 import {
@@ -20,7 +20,7 @@ import {
 
 interface RightPanelProps {
   user: User | null;
-  onLogin: (name: string, emailOrId: string) => Promise<void>;
+  onLogin: (name: string, email: string) => void;
   onLogout: () => void;
   isLoggedIn: boolean;
   onClose?: () => void;
@@ -29,6 +29,11 @@ interface RightPanelProps {
   setExportResult: (result: string) => void;
   resultType: 'export' | 'quiz' | 'summary' | null;
   setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
+
+  // ✅ 新增：右侧面板里的三个 action 按钮
+  onExport: () => void;
+  onQuiz: () => void;
+  onSummary: () => void;
 }
 
 export function RightPanel({
@@ -41,30 +46,27 @@ export function RightPanel({
   setExportResult,
   resultType,
   setResultType,
+  onExport,
+  onQuiz,
+  onSummary,
 }: RightPanelProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
-  const [emailOrId, setEmailOrId] = useState('');
-  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [email, setEmail] = useState('');
 
   const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
   const [feedbackText, setFeedbackText] = useState('');
   const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
 
-  const handleLoginClick = async () => {
-    if (!name.trim() || !emailOrId.trim()) {
+  const handleLoginClick = () => {
+    if (!name.trim() || !email.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-    try {
-      setIsLoggingIn(true);
-      await onLogin(name.trim(), emailOrId.trim());
-      setShowLoginForm(false);
-      setName('');
-      setEmailOrId('');
-    } finally {
-      setIsLoggingIn(false);
-    }
+    onLogin(name.trim(), email.trim());
+    setShowLoginForm(false);
+    setName('');
+    setEmail('');
   };
 
   const handleLogoutClick = () => {
@@ -77,7 +79,6 @@ export function RightPanel({
       toast.error('Please provide feedback text');
       return;
     }
-    // 这里是“产品总体反馈”，不是 message-level feedback
     console.log('Feedback submitted:', feedbackText, feedbackCategory);
     setFeedbackDialogOpen(false);
     setFeedbackText('');
@@ -86,6 +87,7 @@ export function RightPanel({
 
   return (
     <div className="flex-1 overflow-auto p-4 space-y-4">
+      {/* ===== Login Card ===== */}
       <Card className="p-4">
         {!isLoggedIn ? (
           <div className="space-y-4">
@@ -113,19 +115,19 @@ export function RightPanel({
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="emailOrId">Email / Student ID</Label>
+                  <Label htmlFor="email">Email / Student ID</Label>
                   <Input
-                    id="emailOrId"
-                    value={emailOrId}
-                    onChange={(e) => setEmailOrId(e.target.value)}
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
                     placeholder="Enter your email or ID"
                   />
                 </div>
                 <div className="flex gap-2">
-                  <Button onClick={handleLoginClick} className="flex-1" disabled={isLoggingIn}>
-                    {isLoggingIn ? 'Logging in...' : 'Enter'}
+                  <Button onClick={handleLoginClick} className="flex-1">
+                    Enter
                   </Button>
-                  <Button variant="outline" onClick={() => setShowLoginForm(false)} disabled={isLoggingIn}>
+                  <Button variant="outline" onClick={() => setShowLoginForm(false)}>
                     Cancel
                   </Button>
                 </div>
@@ -153,8 +155,55 @@ export function RightPanel({
         )}
       </Card>
 
+      {/* ✅ 这里加三按钮：在 login 下面、Results 上面 */}
+      <Card className="p-4 space-y-2">
+        <h3 className="text-sm font-medium">Actions</h3>
+
+        <div className="grid grid-cols-3 gap-2">
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={onExport}
+            disabled={!isLoggedIn}
+            title="Export Conversation"
+          >
+            <Download className="h-4 w-4" />
+            <span className="hidden xl:inline">Export</span>
+          </Button>
+
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={onQuiz}
+            disabled={!isLoggedIn}
+            title="Micro-Quiz"
+          >
+            <ClipboardList className="h-4 w-4" />
+            <span className="hidden xl:inline">Quiz</span>
+          </Button>
+
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={onSummary}
+            disabled={!isLoggedIn}
+            title="Summarization"
+          >
+            <Sparkles className="h-4 w-4" />
+            <span className="hidden xl:inline">Summary</span>
+          </Button>
+        </div>
+
+        {!isLoggedIn && (
+          <p className="text-xs text-muted-foreground mt-1">
+            Log in to enable export / quiz / summary.
+          </p>
+        )}
+      </Card>
+
       <Separator />
 
+      {/* ===== Results ===== */}
       <div className="space-y-3">
         <h3>
           {resultType === 'export' && 'Exported Conversation'}
@@ -191,6 +240,7 @@ export function RightPanel({
 
       <Separator />
 
+      {/* ===== Feedback ===== */}
       <div className="space-y-3">
         <h3>Feedback</h3>
         <Button
@@ -207,7 +257,9 @@ export function RightPanel({
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Provide Feedback</DialogTitle>
-            <DialogDescription>Help us improve Clare by sharing your thoughts and suggestions.</DialogDescription>
+            <DialogDescription>
+              Help us improve Clare by sharing your thoughts and suggestions.
+            </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3">
@@ -248,4 +300,3 @@ export function RightPanel({
     </div>
   );
 }
-