Update web/src/components/CourseInfoHeader.tsx

web/src/components/CourseInfoHeader.tsx

@@ -1,198 +1,92 @@
-import React, { useMemo, useState } from "react";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Separator } from "./ui/separator";
-import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
+import React, { useMemo } from "react";
 
-import type { SavedChat, Workspace, CourseInfo } from "../App";
+type Person = { name: string; email?: string };
 
-type Props = {
-  savedChats: SavedChat[];
-  onLoadChat: (chat: SavedChat) => void;
-  onDeleteSavedChat: (id: string) => void;
-  onRenameSavedChat: (id: string, newTitle: string) => void;
-
-  currentWorkspaceId: string;
-  workspaces: Workspace[];
-  availableCourses: CourseInfo[];
+export type CourseInfo = {
+  id: string;
+  name: string;
+  instructor?: Person;
+  teachingAssistant?: Person;
 };
 
-function formatSub(ts: any) {
-  if (!ts) return "";
-  try {
-    const d = typeof ts === "string" || typeof ts === "number" ? new Date(ts) : ts;
-    return d.toLocaleString();
-  } catch {
-    return "";
-  }
-}
-
-function gmailComposeLink(email: string) {
-  return `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(email)}`;
+function gmailCompose(email: string, subject: string, body?: string) {
+  const s = encodeURIComponent(subject);
+  const b = body ? `&body=${encodeURIComponent(body)}` : "";
+  return `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(email)}&su=${s}${b}`;
 }
 
-export function LeftSidebar({
-  savedChats,
-  onLoadChat,
-  onDeleteSavedChat,
-  onRenameSavedChat,
-  currentWorkspaceId,
-  workspaces,
-}: Props) {
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [draftTitle, setDraftTitle] = useState("");
-
-  /** ===== 当前 workspace 对应的 course info ===== */
-  const currentWorkspace = workspaces.find(w => w.id === currentWorkspaceId);
-  const courseInfo = currentWorkspace?.courseInfo;
-
-  const sortedChats = useMemo(() => {
-    return [...savedChats].sort(
-      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+export function CourseInfoHeader({
+  course,
+  className,
+}: {
+  course: CourseInfo;
+  className?: string;
+}) {
+  const instructorLink = useMemo(() => {
+    const p = course.instructor;
+    if (!p?.email) return "";
+    return gmailCompose(
+      p.email,
+      `[Clare] Question about ${course.name}`,
+      `Hi ${p.name},\n\nI have a question about ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
     );
-  }, [savedChats]);
-
-  const startRename = (chat: SavedChat) => {
-    setEditingId(chat.id);
-    setDraftTitle(chat.title || "");
-  };
-
-  const cancelRename = () => {
-    setEditingId(null);
-    setDraftTitle("");
-  };
-
-  const commitRename = (id: string) => {
-    const next = draftTitle.trim();
-    if (!next) return;
-    onRenameSavedChat(id, next);
-    cancelRename();
-  };
+  }, [course]);
+
+  const taLink = useMemo(() => {
+    const p = course.teachingAssistant;
+    if (!p?.email) return "";
+    return gmailCompose(
+      p.email,
+      `[Clare] Help request for ${course.name}`,
+      `Hi ${p.name},\n\nI need help with ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
+    );
+  }, [course]);
 
-  const instructorName = courseInfo?.instructor?.name ?? "N/A";
-  const instructorEmail = courseInfo?.instructor?.email?.trim() || "";
-  const taName = courseInfo?.teachingAssistant?.name ?? "N/A";
-  const taEmail = courseInfo?.teachingAssistant?.email?.trim() || "";
+  const instructorName = course.instructor?.name ?? "N/A";
+  const taName = course.teachingAssistant?.name ?? "N/A";
 
   return (
-    <div className="h-full w-full flex flex-col min-h-0">
-      {/* ================= Course Info（不滚动） ================= */}
-      {courseInfo && (
-        <div className="px-4 pt-4 pb-3 flex-shrink-0 space-y-2">
-          <div className="font-semibold text-base">{courseInfo.name}</div>
-
-          <div className="text-sm text-muted-foreground">
-            Instructor:&nbsp;
-            {instructorEmail ? (
-              <a
-                href={gmailComposeLink(instructorEmail)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                {instructorName}
-              </a>
-            ) : (
-              <span className="text-muted-foreground/60">{instructorName}</span>
-            )}
-          </div>
-
-          <div className="text-sm text-muted-foreground">
-            TA:&nbsp;
-            {taEmail ? (
-              <a
-                href={gmailComposeLink(taEmail)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                {taName}
-              </a>
-            ) : (
-              <span className="text-muted-foreground/60">{taName}</span>
-            )}
-          </div>
+    <div className={className ?? "px-4 pt-4 pb-3"}>
+      <div className="space-y-1">
+        <div className="text-base font-semibold text-foreground truncate">
+          {course.name}
         </div>
-      )}
-
-      {/* 🔴 关键分割线：Info / Saved Chat（指定 #ECECF1） */}
-      <Separator className="flex-shrink-0 bg-[#ECECF1]" />
-
-      {/* ================= Saved Chat Header（不滚动） ================= */}
-      <div className="px-4 pt-4 pb-2 flex items-center gap-2 flex-shrink-0">
-        <Bookmark className="h-4 w-4" />
-        <h3 className="font-semibold">Saved Chat</h3>
-      </div>
 
-      <Separator className="flex-shrink-0" />
-
-      {/* ================= Saved Chat List（唯一滚动区） ================= */}
-      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3">
-        {sortedChats.length === 0 ? (
-          <div className="text-sm text-muted-foreground text-center py-10">
-            No saved chats yet
-            <br />
-            <span className="text-xs">Save conversations to view them here</span>
-          </div>
-        ) : (
-          sortedChats.map(chat => {
-            const isEditing = editingId === chat.id;
-            const sub = formatSub(chat.timestamp);
-
-            return (
-              <div key={chat.id} className="rounded-xl border bg-card px-4 py-3">
-                <div className="flex items-start justify-between gap-3">
-                  {/* 左侧 */}
-                  <div className="flex-1 min-w-0">
-                    {isEditing ? (
-                      <div className="space-y-2">
-                        <Input
-                          value={draftTitle}
-                          onChange={e => setDraftTitle(e.target.value)}
-                          autoFocus
-                          onKeyDown={e => {
-                            if (e.key === "Enter") commitRename(chat.id);
-                            if (e.key === "Escape") cancelRename();
-                          }}
-                        />
-                        <div className="flex gap-2">
-                          <Button size="sm" onClick={() => commitRename(chat.id)}>
-                            <Check className="h-4 w-4" />
-                          </Button>
-                          <Button size="sm" variant="outline" onClick={cancelRename}>
-                            <XIcon className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <button className="text-left w-full" onClick={() => onLoadChat(chat)}>
-                        <div className="font-medium truncate">{chat.title || "Untitled chat"}</div>
-                        {sub && <div className="text-xs text-muted-foreground mt-1">{sub}</div>}
-                      </button>
-                    )}
-                  </div>
+        <div className="text-sm text-muted-foreground">
+          Instructor:{" "}
+          {instructorLink ? (
+            <a
+              href={instructorLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+              title={`Message ${instructorName} in Gmail`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {instructorName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{instructorName}</span>
+          )}
+        </div>
 
-                  {/* 右侧按钮 */}
-                  {!isEditing && (
-                    <div className="flex gap-2 flex-shrink-0">
-                      <Button variant="ghost" size="icon" onClick={() => startRename(chat)}>
-                        <Edit2 className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => onDeleteSavedChat(chat.id)}
-                        className="hover:text-destructive"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          })
-        )}
+        <div className="text-sm text-muted-foreground">
+          TA:{" "}
+          {taLink ? (
+            <a
+              href={taLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+              title={`Message ${taName} in Gmail`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {taName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{taName}</span>
+          )}
+        </div>
       </div>
     </div>
   );