From 77c2eb49f593ace1a4e777055d4bbd753c1df214 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:07:44 +0800
Subject: [PATCH 1/8] Add module chatbot interface

---
 .../[courseId]/modules/[moduleId]/page.tsx    |   6 +-
 components/chatbot/ModuleChatBot.tsx          | 103 ++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 components/chatbot/ModuleChatBot.tsx

diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index c4844b4..f3a9958 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -1,4 +1,5 @@
 import ModuleDetail from "@/components/organisation/courses/ModuleDetail";
+import ModuleChatBot from "@/components/chatbot/ModuleChatBot";
 import { getAuthUser } from "@/lib/auth";
 
 export default async function ModulePage({
@@ -8,11 +9,12 @@ export default async function ModulePage({
 }) {
   const user = await getAuthUser();
   const isAdmin = user?.organisation?.role === "admin";
-  const { moduleId } = await params;
+  const { courseId, moduleId } = await params;
 
   return (
-    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow space-y-8">
       <ModuleDetail moduleId={moduleId} isAdmin={isAdmin} />
+      <ModuleChatBot courseId={courseId} moduleId={moduleId} />
     </div>
   );
 }
diff --git a/components/chatbot/ModuleChatBot.tsx b/components/chatbot/ModuleChatBot.tsx
new file mode 100644
index 0000000..75353d5
--- /dev/null
+++ b/components/chatbot/ModuleChatBot.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+
+interface ModuleChatbotProps {
+  courseId: string;
+  moduleId: string;
+}
+
+export default function ModuleChatbot({
+  courseId,
+  moduleId,
+}: ModuleChatbotProps) {
+  const [question, setQuestion] = useState("");
+  const [chat, setChat] = useState<
+    { type: "user" | "assistant"; content: string }[]
+  >([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sendQuestion = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!question.trim()) return;
+    setError(null);
+    setLoading(true);
+
+    // Add user question to chat
+    setChat((prev) => [...prev, { type: "user", content: question }]);
+
+    try {
+      const res = await fetch("/api/chatbot/ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include", // for cookies/session
+        body: JSON.stringify({ courseId, moduleId, question }),
+      });
+      const data = await res.json();
+
+      if (data?.success && data.answer) {
+        setChat((prev) => [
+          ...prev,
+          { type: "assistant", content: data.answer },
+        ]);
+      } else {
+        setError(data.message || "Something went wrong.");
+      }
+    } catch (err: any) {
+      setError("Failed to get response. Please try again.");
+    }
+    setLoading(false);
+    setQuestion("");
+  };
+
+  return (
+    <div className="bg-gray-50 border rounded-xl p-5 shadow">
+      <h3 className="font-bold text-lg mb-2">Module Assistant</h3>
+      <div className="min-h-[120px] max-h-60 overflow-y-auto flex flex-col gap-3 mb-4">
+        {chat.length === 0 && (
+          <div className="text-gray-400 text-sm">
+            Ask a question about this module!
+          </div>
+        )}
+        {chat.map((msg, i) => (
+          <div
+            key={i}
+            className={msg.type === "user" ? "text-right" : "text-left"}
+          >
+            <span
+              className={`inline-block px-3 py-2 rounded-lg ${
+                msg.type === "user"
+                  ? "bg-blue-100 text-blue-900"
+                  : "bg-green-50 text-green-900"
+              }`}
+            >
+              {msg.content}
+            </span>
+          </div>
+        ))}
+        {loading && (
+          <div className="text-gray-400 text-xs">Assistant is typing…</div>
+        )}
+      </div>
+      {error && <div className="text-red-500 text-xs mb-2">{error}</div>}
+      <form onSubmit={sendQuestion} className="flex gap-2">
+        <input
+          type="text"
+          className="flex-1 border rounded px-3 py-2 focus:outline-none"
+          placeholder="Type your question…"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          disabled={loading}
+        />
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-60"
+          disabled={loading || !question.trim()}
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}

From bfe8f60598dabd0dfa0a6c7cc95f4c46b187123a Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:11:01 +0800
Subject: [PATCH 2/8] Show chat history

---
 components/chatbot/ModuleChatBot.tsx | 29 ++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/components/chatbot/ModuleChatBot.tsx b/components/chatbot/ModuleChatBot.tsx
index 75353d5..751aefb 100644
--- a/components/chatbot/ModuleChatBot.tsx
+++ b/components/chatbot/ModuleChatBot.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface ModuleChatbotProps {
   courseId: string;
   moduleId: string;
 }
 
+type ChatMessage = { type: "user" | "assistant"; content: string };
+
 export default function ModuleChatbot({
   courseId,
   moduleId,
@@ -18,13 +20,36 @@ export default function ModuleChatbot({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    const fetchLogs = async () => {
+      try {
+        const res = await fetch("/api/chatbot/logs", {
+          credentials: "include",
+        });
+        const data = await res.json();
+        if (data.success && Array.isArray(data.logs)) {
+          const logMessages: ChatMessage[] = [];
+          data.logs
+            .reverse()
+            .forEach((log: { question: string; answer: string }) => {
+              logMessages.push({ type: "user", content: log.question });
+              logMessages.push({ type: "assistant", content: log.answer });
+            });
+          setChat(logMessages);
+        }
+      } catch (err) {
+        // Ignore errors in loading logs
+      }
+    };
+    fetchLogs();
+  }, []);
+
   const sendQuestion = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!question.trim()) return;
     setError(null);
     setLoading(true);
 
-    // Add user question to chat
     setChat((prev) => [...prev, { type: "user", content: question }]);
 
     try {

From 8167c8d08a5195daba83aa8621d3ec68810a1d89 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:18:09 +0800
Subject: [PATCH 3/8] Show chat history only for that module

---
 components/chatbot/ModuleChatBot.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/chatbot/ModuleChatBot.tsx b/components/chatbot/ModuleChatBot.tsx
index 751aefb..9b8f4e5 100644
--- a/components/chatbot/ModuleChatBot.tsx
+++ b/components/chatbot/ModuleChatBot.tsx
@@ -24,7 +24,10 @@ export default function ModuleChatbot({
     const fetchLogs = async () => {
       try {
         const res = await fetch("/api/chatbot/logs", {
+          method: "POST",
           credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ courseId, moduleId }),
         });
         const data = await res.json();
         if (data.success && Array.isArray(data.logs)) {

From fbf9b68a9f3f3255459f0d9cf70cb5beb25a240d Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:24:09 +0800
Subject: [PATCH 4/8] update module to show chat only if not quiz

---
 .../[courseId]/modules/[moduleId]/page.tsx    |   5 +-
 .../organisation/courses/ModuleDetail.tsx     | 139 +++++++++---------
 2 files changed, 74 insertions(+), 70 deletions(-)

diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index f3a9958..5c7337c 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -12,9 +12,8 @@ export default async function ModulePage({
   const { courseId, moduleId } = await params;
 
   return (
-    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow space-y-8">
-      <ModuleDetail moduleId={moduleId} isAdmin={isAdmin} />
-      <ModuleChatBot courseId={courseId} moduleId={moduleId} />
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded">
+      <ModuleDetail courseId={courseId} moduleId={moduleId} isAdmin={isAdmin} />
     </div>
   );
 }
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 21b4bd6..09260b2 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import React, { useEffect } from "react";
-import { useParams } from "next/navigation";
 import { useState } from "react";
+import ModuleChatBot from "@/components/chatbot/ModuleChatBot";
 
 export interface QuizOption {
   id: number;
@@ -31,14 +31,14 @@ export interface ModuleDetailData {
 }
 
 interface Props {
+  courseId: string;
   moduleId: string;
   isAdmin: boolean;
 }
 
-export default function ModuleDetail({ moduleId, isAdmin }: Props) {
+export default function ModuleDetail({ courseId, moduleId, isAdmin }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
   const [enrolled, setEnrolled] = React.useState<boolean>(false);
-  const { courseId } = useParams() as { courseId: string };
   const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
   const [moduleStatus, setModuleStatus] = useState<string | null>(null);
   const [courseCompleted, setCourseCompleted] = useState<boolean>(false);
@@ -175,75 +175,80 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   if (data.module_type !== "quiz") {
     const finalUrl = `http://localhost:4000${data.file_url}`;
     return (
-      <div className="space-y-4">
-        <div className="flex gap-4 mb-6">
-          {moduleStatus === "not_started" && !courseCompleted && (
-            <button
-              onClick={async () => {
-                await fetch("/api/courses/mark-module-started", {
-                  method: "POST",
-                  credentials: "include",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({ moduleId: data.id }),
-                });
-                alert("Module started!");
-                setModuleStatus("in_progress");
-              }}
-              className="px-4 py-2 bg-blue-600 text-white rounded"
-            >
-              Start Module
-            </button>
-          )}
+      <div>
+        <div className="space-y-4">
+          <div className="flex gap-4 mb-6">
+            {moduleStatus === "not_started" && !courseCompleted && (
+              <button
+                onClick={async () => {
+                  await fetch("/api/courses/mark-module-started", {
+                    method: "POST",
+                    credentials: "include",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ moduleId: data.id }),
+                  });
+                  alert("Module started!");
+                  setModuleStatus("in_progress");
+                }}
+                className="px-4 py-2 bg-blue-600 text-white rounded"
+              >
+                Start Module
+              </button>
+            )}
+
+            {moduleStatus === "in_progress" && !courseCompleted && (
+              <button
+                onClick={async () => {
+                  await fetch("/api/courses/mark-module-completed", {
+                    method: "POST",
+                    credentials: "include",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ moduleId: data.id }),
+                  });
+                  alert("Module completed!");
+                  setModuleStatus("completed");
+                }}
+                className="px-4 py-2 bg-red-600 text-white rounded"
+              >
+                Mark as Completed
+              </button>
+            )}
 
-          {moduleStatus === "in_progress" && !courseCompleted && (
-            <button
-              onClick={async () => {
-                await fetch("/api/courses/mark-module-completed", {
-                  method: "POST",
-                  credentials: "include",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({ moduleId: data.id }),
-                });
-                alert("Module completed!");
-                setModuleStatus("completed");
-              }}
-              className="px-4 py-2 bg-red-600 text-white rounded"
-            >
-              Mark as Completed
-            </button>
+            {moduleStatus === "completed" && !courseCompleted && (
+              <button
+                onClick={async () => {
+                  await fetch("/api/courses/mark-module-started", {
+                    method: "POST",
+                    credentials: "include",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ moduleId: data.id }),
+                  });
+                  alert("Module restarted!");
+                  setModuleStatus("in_progress");
+                }}
+                className="px-4 py-2 bg-green-600 text-white rounded"
+              >
+                Module has been completed. Reset Module Progress
+              </button>
+            )}
+          </div>
+          <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
+          <p>{data.description}</p>
+
+          {data.module_type === "video" && data.file_url && (
+            <video controls src={finalUrl} className="w-full rounded-lg" />
           )}
 
-          {moduleStatus === "completed" && !courseCompleted && (
-            <button
-              onClick={async () => {
-                await fetch("/api/courses/mark-module-started", {
-                  method: "POST",
-                  credentials: "include",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({ moduleId: data.id }),
-                });
-                alert("Module restarted!");
-                setModuleStatus("in_progress");
-              }}
-              className="px-4 py-2 bg-green-600 text-white rounded"
-            >
-              Module has been completed. Reset Module Progress
-            </button>
+          {["pdf", "slide"].includes(data.module_type) && data.file_url && (
+            <iframe
+              src={finalUrl}
+              className="w-full h-[600px] rounded-lg border"
+            />
           )}
         </div>
-        <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
-        <p>{data.description}</p>
-
-        {data.module_type === "video" && data.file_url && (
-          <video controls src={finalUrl} className="w-full rounded-lg" />
-        )}
-
-        {["pdf", "slide"].includes(data.module_type) && data.file_url && (
-          <iframe
-            src={finalUrl}
-            className="w-full h-[600px] rounded-lg border"
-          />
-        )}
+        <div className="mt-8">
+          <ModuleChatBot courseId={courseId} moduleId={moduleId} />
+        </div>
       </div>
     );
   }

From 8ff0ae753f9a46a65840812b432d4f4ede06682a Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:30:31 +0800
Subject: [PATCH 5/8] Show basic chat history

---
 app/chathistory/page.tsx           | 16 ++++++++
 components/SideNav.tsx             |  1 +
 components/chatbot/ChatHistory.tsx | 59 ++++++++++++++++++++++++++++++
 components/organisation/OrgNav.tsx |  1 +
 4 files changed, 77 insertions(+)
 create mode 100644 app/chathistory/page.tsx
 create mode 100644 components/chatbot/ChatHistory.tsx

diff --git a/app/chathistory/page.tsx b/app/chathistory/page.tsx
new file mode 100644
index 0000000..a4ab8f7
--- /dev/null
+++ b/app/chathistory/page.tsx
@@ -0,0 +1,16 @@
+import { getAuthUser } from "@/lib/auth";
+import ChatHistoryPage from "@/components/chatbot/ChatHistory";
+
+export default async function DashboardPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-4 text-purple-600">Chat History</h1>
+      <ChatHistoryPage />
+    </div>
+  );
+}
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 9ede2c1..dea1ddb 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -28,6 +28,7 @@ const menuSections = [
   {
     heading: "Management",
     items: [
+      { label: "Chat History", href: "/chathistory", icon: ClockIcon },
       { label: "History", href: "/history", icon: ClockIcon },
       { label: "Settings", href: "/settings", icon: CogIcon },
     ],
diff --git a/components/chatbot/ChatHistory.tsx b/components/chatbot/ChatHistory.tsx
new file mode 100644
index 0000000..7364579
--- /dev/null
+++ b/components/chatbot/ChatHistory.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ChatMessage = { type: "user" | "assistant"; content: string };
+
+export default function ChatHistoryPage() {
+  const [chat, setChat] = useState<
+    { type: "user" | "assistant"; content: string }[]
+  >([]);
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      try {
+        const res = await fetch("/api/chatbot/history", {
+          credentials: "include",
+        });
+        const data = await res.json();
+        if (data.success && Array.isArray(data.logs)) {
+          const logMessages: ChatMessage[] = [];
+          data.logs
+            .reverse()
+            .forEach((log: { question: string; answer: string }) => {
+              logMessages.push({ type: "user", content: log.question });
+              logMessages.push({ type: "assistant", content: log.answer });
+            });
+          setChat(logMessages);
+        }
+      } catch (err) {
+        // Ignore errors in loading logs
+      }
+    };
+    fetchLogs();
+  }, []);
+
+  return (
+    <div className="bg-gray-50 border rounded-xl p-5 shadow">
+      <h3 className="font-bold text-lg mb-2">Module Assistant</h3>
+      <div className="min-h-[120px] max-h-60 overflow-y-auto flex flex-col gap-3 mb-4">
+        {chat.map((msg, i) => (
+          <div
+            key={i}
+            className={msg.type === "user" ? "text-right" : "text-left"}
+          >
+            <span
+              className={`inline-block px-3 py-2 rounded-lg ${
+                msg.type === "user"
+                  ? "bg-blue-100 text-blue-900"
+                  : "bg-green-50 text-green-900"
+              }`}
+            >
+              {msg.content}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/OrgNav.tsx b/components/organisation/OrgNav.tsx
index 7ae3ae6..fb8490a 100644
--- a/components/organisation/OrgNav.tsx
+++ b/components/organisation/OrgNav.tsx
@@ -29,6 +29,7 @@ const menuSections = [
     items: [
       { label: "My Organisation", href: "/organisation", icon: UsersIcon },
       { label: "Users", href: "/users", icon: UsersIcon },
+      { label: "Chat History", href: "/chathistory", icon: ClockIcon },
       { label: "History", href: "/history", icon: ClockIcon },
       { label: "Settings", href: "/settings", icon: CogIcon },
     ],

From ea2b8e75ccecba72126d0c9fa21b4873f395691d Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:33:16 +0800
Subject: [PATCH 6/8] Show chat history by course and module

---
 components/chatbot/ChatHistory.tsx | 81 ++++++++++++++++++------------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/components/chatbot/ChatHistory.tsx b/components/chatbot/ChatHistory.tsx
index 7364579..0dafa92 100644
--- a/components/chatbot/ChatHistory.tsx
+++ b/components/chatbot/ChatHistory.tsx
@@ -2,12 +2,27 @@
 
 import { useEffect, useState } from "react";
 
-type ChatMessage = { type: "user" | "assistant"; content: string };
+type ChatLog = {
+  id: number;
+  course_id: number;
+  module_id: number;
+  name: string;
+  title: string;
+  question: string;
+  answer: string;
+  created_at: string;
+};
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString);
+  return date.toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
 
 export default function ChatHistoryPage() {
-  const [chat, setChat] = useState<
-    { type: "user" | "assistant"; content: string }[]
-  >([]);
+  const [logs, setLogs] = useState<ChatLog[]>([]);
 
   useEffect(() => {
     const fetchLogs = async () => {
@@ -17,14 +32,7 @@ export default function ChatHistoryPage() {
         });
         const data = await res.json();
         if (data.success && Array.isArray(data.logs)) {
-          const logMessages: ChatMessage[] = [];
-          data.logs
-            .reverse()
-            .forEach((log: { question: string; answer: string }) => {
-              logMessages.push({ type: "user", content: log.question });
-              logMessages.push({ type: "assistant", content: log.answer });
-            });
-          setChat(logMessages);
+          setLogs(data.logs);
         }
       } catch (err) {
         // Ignore errors in loading logs
@@ -35,25 +43,36 @@ export default function ChatHistoryPage() {
 
   return (
     <div className="bg-gray-50 border rounded-xl p-5 shadow">
-      <h3 className="font-bold text-lg mb-2">Module Assistant</h3>
-      <div className="min-h-[120px] max-h-60 overflow-y-auto flex flex-col gap-3 mb-4">
-        {chat.map((msg, i) => (
-          <div
-            key={i}
-            className={msg.type === "user" ? "text-right" : "text-left"}
-          >
-            <span
-              className={`inline-block px-3 py-2 rounded-lg ${
-                msg.type === "user"
-                  ? "bg-blue-100 text-blue-900"
-                  : "bg-green-50 text-green-900"
-              }`}
-            >
-              {msg.content}
-            </span>
-          </div>
-        ))}
-      </div>
+      <h3 className="font-bold text-lg mb-4">Your Chatbot Q&A History</h3>
+      {logs.length === 0 ? (
+        <div className="text-gray-400 text-sm">No questions asked yet!</div>
+      ) : (
+        <div className="flex flex-col gap-6 max-h-[500px] overflow-y-auto">
+          {logs.map((log) => (
+            <div key={log.id} className="rounded-lg border p-4 bg-white">
+              <div className="flex flex-wrap items-center gap-2 mb-2 text-xs text-gray-600">
+                <span className="font-semibold text-purple-700">
+                  {log.name}
+                </span>
+                <span className="text-gray-400">•</span>
+                <span className="italic">{log.title}</span>
+                <span className="text-gray-400">•</span>
+                <span>{formatDate(log.created_at)}</span>
+              </div>
+              <div className="mb-1 text-right">
+                <span className="inline-block px-3 py-2 rounded-lg bg-blue-100 text-blue-900">
+                  {log.question}
+                </span>
+              </div>
+              <div className="text-left">
+                <span className="inline-block px-3 py-2 rounded-lg bg-green-50 text-green-900">
+                  {log.answer}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

From 997e0972c8ce69b0038278298b37d1c4c72b44da Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 20:35:55 +0800
Subject: [PATCH 7/8] Show chat history by course and module

---
 components/chatbot/ChatHistory.tsx | 129 ++++++++++++++++++++++++-----
 1 file changed, 106 insertions(+), 23 deletions(-)

diff --git a/components/chatbot/ChatHistory.tsx b/components/chatbot/ChatHistory.tsx
index 0dafa92..23c40e5 100644
--- a/components/chatbot/ChatHistory.tsx
+++ b/components/chatbot/ChatHistory.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Link from "next/link";
 
 type ChatLog = {
   id: number;
@@ -21,8 +22,36 @@ function formatDate(dateString: string) {
   });
 }
 
+function groupLogsByModule(logs: ChatLog[]) {
+  const grouped: Record<
+    string,
+    {
+      course_id: number;
+      module_id: number;
+      course: string;
+      module: string;
+      logs: ChatLog[];
+    }
+  > = {};
+  for (const log of logs) {
+    const key = `${log.course_id}:${log.module_id}`;
+    if (!grouped[key]) {
+      grouped[key] = {
+        course_id: log.course_id,
+        module_id: log.module_id,
+        course: log.name,
+        module: log.title,
+        logs: [],
+      };
+    }
+    grouped[key].logs.push(log);
+  }
+  return Object.values(grouped);
+}
+
 export default function ChatHistoryPage() {
   const [logs, setLogs] = useState<ChatLog[]>([]);
+  const [openPanels, setOpenPanels] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     const fetchLogs = async () => {
@@ -33,6 +62,12 @@ export default function ChatHistoryPage() {
         const data = await res.json();
         if (data.success && Array.isArray(data.logs)) {
           setLogs(data.logs);
+          if (data.logs.length > 0) {
+            const mostRecent = data.logs[0];
+            setOpenPanels({
+              [`${mostRecent.course_id}:${mostRecent.module_id}`]: true,
+            });
+          }
         }
       } catch (err) {
         // Ignore errors in loading logs
@@ -41,36 +76,84 @@ export default function ChatHistoryPage() {
     fetchLogs();
   }, []);
 
+  const grouped = groupLogsByModule(logs);
+
   return (
     <div className="bg-gray-50 border rounded-xl p-5 shadow">
       <h3 className="font-bold text-lg mb-4">Your Chatbot Q&A History</h3>
       {logs.length === 0 ? (
         <div className="text-gray-400 text-sm">No questions asked yet!</div>
       ) : (
-        <div className="flex flex-col gap-6 max-h-[500px] overflow-y-auto">
-          {logs.map((log) => (
-            <div key={log.id} className="rounded-lg border p-4 bg-white">
-              <div className="flex flex-wrap items-center gap-2 mb-2 text-xs text-gray-600">
-                <span className="font-semibold text-purple-700">
-                  {log.name}
-                </span>
-                <span className="text-gray-400">•</span>
-                <span className="italic">{log.title}</span>
-                <span className="text-gray-400">•</span>
-                <span>{formatDate(log.created_at)}</span>
-              </div>
-              <div className="mb-1 text-right">
-                <span className="inline-block px-3 py-2 rounded-lg bg-blue-100 text-blue-900">
-                  {log.question}
-                </span>
-              </div>
-              <div className="text-left">
-                <span className="inline-block px-3 py-2 rounded-lg bg-green-50 text-green-900">
-                  {log.answer}
-                </span>
+        <div className="flex flex-col gap-4 max-h-[600px] overflow-y-auto">
+          {grouped.map((mod) => {
+            const panelKey = `${mod.course_id}:${mod.module_id}`;
+            const isOpen = openPanels[panelKey] || false;
+            return (
+              <div key={panelKey} className="border rounded bg-white">
+                {/* Panel header */}
+                <button
+                  className={`w-full text-left flex items-center justify-between px-4 py-3 cursor-pointer select-none ${
+                    isOpen ? "bg-purple-50" : "bg-gray-100"
+                  }`}
+                  onClick={() =>
+                    setOpenPanels((prev) => ({
+                      ...prev,
+                      [panelKey]: !prev[panelKey],
+                    }))
+                  }
+                >
+                  <span className="flex flex-col gap-1">
+                    <span>
+                      <Link
+                        href={`/courses/${mod.course_id}`}
+                        className="font-semibold text-purple-800 hover:underline"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {mod.course}
+                      </Link>
+                      <span className="text-gray-400 px-1">/</span>
+                      <Link
+                        href={`/courses/${mod.course_id}/modules/${mod.module_id}`}
+                        className="italic text-blue-700 hover:underline"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {mod.module}
+                      </Link>
+                    </span>
+                    <span className="text-xs text-gray-500">
+                      {mod.logs.length}{" "}
+                      {mod.logs.length === 1 ? "question" : "questions"}
+                    </span>
+                  </span>
+                  <span className="text-xs text-gray-600">
+                    {isOpen ? "▼" : "▶"}
+                  </span>
+                </button>
+
+                {isOpen && (
+                  <div className="divide-y">
+                    {mod.logs.map((log, i) => (
+                      <div key={log.id} className="p-4 space-y-2">
+                        <div className="flex items-center gap-2 text-xs text-gray-400">
+                          <span>{formatDate(log.created_at)}</span>
+                        </div>
+                        <div className="mb-1 text-right">
+                          <span className="inline-block px-3 py-2 rounded-lg bg-blue-100 text-blue-900">
+                            {log.question}
+                          </span>
+                        </div>
+                        <div className="text-left">
+                          <span className="inline-block px-3 py-2 rounded-lg bg-green-50 text-green-900">
+                            {log.answer}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

From b433b65f715a4282d8ea8c704e1f04f77c00af5c Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 21:27:38 +0800
Subject: [PATCH 8/8] Dont show chatbot if not enrolled

---
 components/chatbot/ModuleChatBot.tsx             | 11 +++++++++--
 components/organisation/courses/ModuleDetail.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/chatbot/ModuleChatBot.tsx b/components/chatbot/ModuleChatBot.tsx
index 9b8f4e5..5904854 100644
--- a/components/chatbot/ModuleChatBot.tsx
+++ b/components/chatbot/ModuleChatBot.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 interface ModuleChatbotProps {
   courseId: string;
   moduleId: string;
+  isEnrolled: boolean;
 }
 
 type ChatMessage = { type: "user" | "assistant"; content: string };
@@ -12,6 +13,7 @@ type ChatMessage = { type: "user" | "assistant"; content: string };
 export default function ModuleChatbot({
   courseId,
   moduleId,
+  isEnrolled,
 }: ModuleChatbotProps) {
   const [question, setQuestion] = useState("");
   const [chat, setChat] = useState<
@@ -20,6 +22,10 @@ export default function ModuleChatbot({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  if (!isEnrolled) {
+    return null;
+  }
+
   useEffect(() => {
     const fetchLogs = async () => {
       try {
@@ -59,7 +65,7 @@ export default function ModuleChatbot({
       const res = await fetch("/api/chatbot/ask", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        credentials: "include", // for cookies/session
+        credentials: "include",
         body: JSON.stringify({ courseId, moduleId, question }),
       });
       const data = await res.json();
@@ -82,10 +88,11 @@ export default function ModuleChatbot({
   return (
     <div className="bg-gray-50 border rounded-xl p-5 shadow">
       <h3 className="font-bold text-lg mb-2">Module Assistant</h3>
+      <div>Note: Bot does not have access to course materials.</div>
       <div className="min-h-[120px] max-h-60 overflow-y-auto flex flex-col gap-3 mb-4">
         {chat.length === 0 && (
           <div className="text-gray-400 text-sm">
-            Ask a question about this module!
+            Ask a question about this course!
           </div>
         )}
         {chat.map((msg, i) => (
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 09260b2..3dd02bc 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -247,7 +247,11 @@ export default function ModuleDetail({ courseId, moduleId, isAdmin }: Props) {
           )}
         </div>
         <div className="mt-8">
-          <ModuleChatBot courseId={courseId} moduleId={moduleId} />
+          <ModuleChatBot
+            courseId={courseId}
+            moduleId={moduleId}
+            isEnrolled={enrolled}
+          />
         </div>
       </div>
     );