Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -4,11 +4,8 @@ import { Input } from "./ui/input";
 import { Separator } from "./ui/separator";
 import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
 
-import type {
-  SavedChat,
-  Workspace,
-  CourseInfo,
-} from "../App";
+import type { SavedChat, Workspace } from "../App";
+import type { CourseDirectoryItem } from "../lib/courseDirectory";
 
 type Props = {
   savedChats: SavedChat[];
@@ -18,7 +15,9 @@ type Props = {
 
   currentWorkspaceId: string;
   workspaces: Workspace[];
-  availableCourses: CourseInfo[];
+
+  // ✅ use courseDirectory items
+  availableCourses: CourseDirectoryItem[];
 };
 
 function formatSub(ts: any) {
@@ -31,6 +30,13 @@ function formatSub(ts: any) {
   }
 }
 
+function gmailComposeLink(email: string, subject?: string, body?: string) {
+  const to = `to=${encodeURIComponent(email)}`;
+  const su = subject ? `&su=${encodeURIComponent(subject)}` : "";
+  const bd = body ? `&body=${encodeURIComponent(body)}` : "";
+  return `https://mail.google.com/mail/?view=cm&fs=1&${to}${su}${bd}`;
+}
+
 export function LeftSidebar({
   savedChats,
   onLoadChat,
@@ -38,17 +44,51 @@ export function LeftSidebar({
   onRenameSavedChat,
   currentWorkspaceId,
   workspaces,
+  availableCourses,
 }: 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 currentWorkspace = workspaces.find((w) => w.id === currentWorkspaceId);
+  const workspaceCourseInfo = (currentWorkspace as any)?.courseInfo as
+    | { id?: string; name?: string }
+    | undefined;
+
+  // ✅ Find full meta from course directory by id (preferred), fallback by name
+  const courseFromDirectory = useMemo(() => {
+    const id = workspaceCourseInfo?.id?.trim();
+    if (id) {
+      const hit = availableCourses.find((c) => c.id === id);
+      if (hit) return hit;
+    }
+
+    const name = workspaceCourseInfo?.name?.trim();
+    if (name) {
+      const hit = availableCourses.find((c) => c.name === name);
+      if (hit) return hit;
+    }
+
+    return undefined;
+  }, [availableCourses, workspaceCourseInfo?.id, workspaceCourseInfo?.name]);
+
+  // ✅ Final course for display (directory wins; fallback to workspace name/id)
+  const courseInfo: CourseDirectoryItem | null = useMemo(() => {
+    if (courseFromDirectory) return courseFromDirectory;
+
+    if (workspaceCourseInfo?.name || workspaceCourseInfo?.id) {
+      return {
+        id: workspaceCourseInfo?.id ?? "unknown",
+        name: workspaceCourseInfo?.name ?? "Untitled course",
+      };
+    }
+
+    return null;
+  }, [courseFromDirectory, workspaceCourseInfo?.id, workspaceCourseInfo?.name]);
 
   const sortedChats = useMemo(() => {
-    return [...savedChats].sort((a, b) =>
-      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    return [...savedChats].sort(
+      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
     );
   }, [savedChats]);
 
@@ -69,40 +109,63 @@ export function LeftSidebar({
     cancelRename();
   };
 
+  // ===== Display fields (safe) =====
+  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="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="font-semibold text-base">{courseInfo.name}</div>
 
           <div className="text-sm text-muted-foreground">
             Instructor:&nbsp;
-            <a
-              href={`mailto:${courseInfo.instructor.email}`}
-              className="text-primary hover:underline"
-            >
-              {courseInfo.instructor.name}
-            </a>
+            {instructorEmail ? (
+              <a
+                href={gmailComposeLink(
+                  instructorEmail,
+                  `[Clare] Question about ${courseInfo.name}`,
+                  `Hi ${instructorName},\n\nI have a question about ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
+                )}
+                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;
-            <a
-              href={`mailto:${courseInfo.teachingAssistant.email}`}
-              className="text-primary hover:underline"
-            >
-              {courseInfo.teachingAssistant.name}
-            </a>
+            {taEmail ? (
+              <a
+                href={gmailComposeLink(
+                  taEmail,
+                  `[Clare] Help request for ${courseInfo.name}`,
+                  `Hi ${taName},\n\nI need help with ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
+                )}
+                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 */}
-      <Separator className="flex-shrink-0" />
+      {/* ✅ 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">
@@ -116,30 +179,27 @@ export function LeftSidebar({
       <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 />
+            No saved chats yet
+            <br />
             <span className="text-xs">Save conversations to view them here</span>
           </div>
         ) : (
-          sortedChats.map(chat => {
+          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 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)}
+                          onChange={(e) => setDraftTitle(e.target.value)}
                           autoFocus
-                          onKeyDown={e => {
+                          onKeyDown={(e) => {
                             if (e.key === "Enter") commitRename(chat.id);
                             if (e.key === "Escape") cancelRename();
                           }}
@@ -154,18 +214,9 @@ export function LeftSidebar({
                         </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 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>
@@ -173,11 +224,7 @@ export function LeftSidebar({
                   {/* 右侧按钮 */}
                   {!isEditing && (
                     <div className="flex gap-2 flex-shrink-0">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => startRename(chat)}
-                      >
+                      <Button variant="ghost" size="icon" onClick={() => startRename(chat)}>
                         <Edit2 className="h-4 w-4" />
                       </Button>
                       <Button