Update web/src/components/CourseInfoHeader.tsx

web/src/components/CourseInfoHeader.tsx

@@ -1,73 +1,198 @@
-import React, { useMemo } from "react";
+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";
 
-type Person = { name: string; email: string };
+import type { SavedChat, Workspace, CourseInfo } from "../App";
 
-export type CourseInfo = {
-  id: string;
-  name: string;
-  instructor: Person;
-  teachingAssistant: Person;
+type Props = {
+  savedChats: SavedChat[];
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
+  onRenameSavedChat: (id: string, newTitle: string) => void;
+
+  currentWorkspaceId: string;
+  workspaces: Workspace[];
+  availableCourses: CourseInfo[];
 };
 
-function buildMailto(email: string, subject: string, body?: string) {
-  const s = encodeURIComponent(subject);
-  const b = body ? `&body=${encodeURIComponent(body)}` : "";
-  return `mailto:${encodeURIComponent(email)}?subject=${s}${b}`;
+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 "";
+  }
 }
 
-export function CourseInfoHeader({
-  course,
-  className,
-}: {
-  course: CourseInfo;
-  className?: string;
-}) {
-  const instructorMailto = useMemo(() => {
-    return buildMailto(
-      course.instructor.email,
-      `[Clare] Question about ${course.name}`,
-      `Hi ${course.instructor.name},\n\nI have a question about ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
-    );
-  }, [course]);
+function gmailComposeLink(email: string) {
+  return `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(email)}`;
+}
+
+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 taMailto = useMemo(() => {
-    return buildMailto(
-      course.teachingAssistant.email,
-      `[Clare] Help request for ${course.name}`,
-      `Hi ${course.teachingAssistant.name},\n\nI need help with ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
+  const sortedChats = useMemo(() => {
+    return [...savedChats].sort(
+      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
     );
-  }, [course]);
+  }, [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();
+  };
+
+  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() || "";
 
   return (
-    <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>
+    <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:{" "}
-          <a
-            href={instructorMailto}
-            className="text-primary hover:underline"
-            title={`Email ${course.instructor.name}`}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {course.instructor.name}
-          </a>
-        </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:{" "}
-          <a
-            href={taMailto}
-            className="text-primary hover:underline"
-            title={`Email ${course.teachingAssistant.name}`}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {course.teachingAssistant.name}
-          </a>
+          <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>
+      )}
+
+      {/* 🔴 关键分割线：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>
+
+                  {/* 右侧按钮 */}
+                  {!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>
     </div>
   );