feat: :construction: Router and new history page

2 files changed, 67 insertions, 2 deletions

diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index d69da57e..247789d6 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -16,11 +16,12 @@ import {
   BookOpenIcon,
   ChatBubbleOvalLeftEllipsisIcon,
   TrashIcon,
+  PlusCircleIcon,
+  FolderIcon,
 } from "@heroicons/react/24/outline";
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
 import HeaderButtonWithText from "../components/HeaderButtonWithText";
-import ReactSwitch from "react-switch";
 import { usePostHog } from "posthog-js/react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
@@ -589,7 +590,16 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Clear"
         >
-          <TrashIcon width="1.4em" height="1.4em" />
+          <PlusCircleIcon width="1.4em" height="1.4em" />
+        </HeaderButtonWithText>
+        <HeaderButtonWithText
+          onClick={() => {
+            // Go to /history page
+            document.location.href = "/history";
+          }}
+          text="History"
+        >
+          <FolderIcon width="1.4em" height="1.4em" />
         </HeaderButtonWithText>
         <a
           href="https://continue.dev/docs/how-to-use-continue"
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
new file mode 100644
index 00000000..6539f0f5
--- /dev/null
+++ b/extension/react-app/src/pages/history.tsx
@@ -0,0 +1,55 @@
+import React, { useContext, useEffect, useState } from "react";
+import { SessionInfo } from "../../../schema/SessionInfo";
+import { GUIClientContext } from "../App";
+import fetch from "node-fetch";
+import { useSelector } from "react-redux";
+import { RootStore } from "../redux/store";
+
+function History() {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const client = useContext(GUIClientContext);
+  const apiUrl = useSelector((state: RootStore) => state.config.apiUrl);
+
+  useEffect(() => {
+    const fetchSessions = async () => {
+      console.log("fetching sessions");
+      if (!apiUrl) {
+        return;
+      }
+      const response = await fetch(`${apiUrl}/sessions/list`);
+      const json = await response.json();
+      console.log(json);
+      setSessions(json);
+    };
+    fetchSessions();
+  }, [client]);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <table style={{ width: "100%" }}>
+        <tbody>
+          {sessions.map((session, index) => (
+            <tr key={index}>
+              <td>
+                <div
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    // client?.loadSession(session.id);
+                    // document.location.href = "/gui";
+                  }}
+                >
+                  <div>{session.title}</div>
+                  <div style={{ color: "lightgray" }}>
+                    {session.date_created}
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default History;