feat: :construction: successfully loading past sessions

8 files changed, 60 insertions, 14 deletions

diff --git a/extension/react-app/src/hooks/AbstractContinueGUIClientProtocol.ts b/extension/react-app/src/hooks/AbstractContinueGUIClientProtocol.ts
index 168fb156..139c9d05 100644
--- a/extension/react-app/src/hooks/AbstractContinueGUIClientProtocol.ts
+++ b/extension/react-app/src/hooks/AbstractContinueGUIClientProtocol.ts
@@ -31,6 +31,8 @@ abstract class AbstractContinueGUIClientProtocol {
 
   abstract selectContextItem(id: string, query: string): void;
 
+  abstract loadSession(session_id: string): void;
+
   abstract onReconnectAtSession(session_id: string): void;
 }
 
diff --git a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
index 830954c5..6cfbf66a 100644
--- a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
+++ b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
@@ -14,9 +14,11 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol {
     useVscodeMessagePassing: boolean
   ) {
     if (this.messenger) {
-      // this.messenger.close(); TODO
+      console.log("Closing session: ", this.serverUrlWithSessionId);
+      this.messenger.close();
     }
     this.serverUrlWithSessionId = serverUrlWithSessionId;
+    this.useVscodeMessagePassing = useVscodeMessagePassing;
     this.messenger = useVscodeMessagePassing
       ? new VscodeMessenger(serverUrlWithSessionId)
       : new WebsocketMessenger(serverUrlWithSessionId);
@@ -45,12 +47,13 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol {
     this.connectMessenger(serverUrlWithSessionId, useVscodeMessagePassing);
   }
 
+  loadSession(session_id: string): void {
+    this.messenger?.send("load_session", { session_id });
+  }
+
   onReconnectAtSession(session_id: string): void {
     this.connectMessenger(
-      this.serverUrlWithSessionId.replace(
-        /\/session\/[a-zA-Z0-9-]+/,
-        `/session/${session_id}`
-      ),
+      `${this.serverUrlWithSessionId.split("?")[0]}?session_id=${session_id}`,
       this.useVscodeMessagePassing
     );
   }
diff --git a/extension/react-app/src/hooks/messenger.ts b/extension/react-app/src/hooks/messenger.ts
index ecf646c7..0bfbe00c 100644
--- a/extension/react-app/src/hooks/messenger.ts
+++ b/extension/react-app/src/hooks/messenger.ts
@@ -15,6 +15,8 @@ export abstract class Messenger {
   abstract sendAndReceive(messageType: string, data: any): Promise<any>;
 
   abstract onError(callback: (error: any) => void): void;
+
+  abstract close(): void;
 }
 
 export class WebsocketMessenger extends Messenger {
@@ -105,4 +107,8 @@ export class WebsocketMessenger extends Messenger {
   onError(callback: (error: any) => void): void {
     this.websocket.addEventListener("error", callback);
   }
+
+  close(): void {
+    this.websocket.close();
+  }
 }
diff --git a/extension/react-app/src/hooks/vscodeMessenger.ts b/extension/react-app/src/hooks/vscodeMessenger.ts
index 13f5092b..cf626721 100644
--- a/extension/react-app/src/hooks/vscodeMessenger.ts
+++ b/extension/react-app/src/hooks/vscodeMessenger.ts
@@ -76,4 +76,8 @@ export class VscodeMessenger extends Messenger {
       }
     });
   }
+
+  close(): void {
+    postVscMessage("websocketForwardingClose", { url: this.serverUrl });
+  }
 }
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index 052fe5be..0142836f 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -4,6 +4,23 @@ import { GUIClientContext } from "../App";
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import { useNavigate } from "react-router-dom";
+import { secondaryDark, vscBackground } from "../components";
+import styled from "styled-components";
+
+const Tr = styled.tr`
+  &:hover {
+    background-color: ${secondaryDark};
+  }
+`;
+
+const TdDiv = styled.div`
+  cursor: pointer;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid ${secondaryDark};
+`;
 
 function History() {
   const navigate = useNavigate();
@@ -30,24 +47,23 @@ function History() {
 
   return (
     <div className="w-full">
-      <h1 className="text-2xl font-bold">History</h1>
+      <h1 className="text-2xl font-bold m-4">History</h1>
       <table className="w-full">
         <tbody>
           {sessions.map((session, index) => (
-            <tr key={index}>
+            <Tr key={index}>
               <td>
-                <div
-                  className="cursor-pointer"
+                <TdDiv
                   onClick={() => {
-                    // client?.loadSession(session.id);
+                    client?.loadSession(session.session_id);
                     navigate("/");
                   }}
                 >
                   <div className="text-lg">{session.title}</div>
                   <div className="text-gray-400">{session.date_created}</div>
-                </div>
+                </TdDiv>
               </td>
-            </tr>
+            </Tr>
           ))}
         </tbody>
       </table>
diff --git a/extension/react-app/src/redux/slices/configSlice.ts b/extension/react-app/src/redux/slices/configSlice.ts
index 57c4f860..59c76066 100644
--- a/extension/react-app/src/redux/slices/configSlice.ts
+++ b/extension/react-app/src/redux/slices/configSlice.ts
@@ -50,7 +50,7 @@ export const configSlice = createSlice({
     ) => ({
       ...state,
       dataSwitchOn: action.payload,
-    })
+    }),
   },
 });
 
@@ -60,6 +60,6 @@ export const {
   setWorkspacePath,
   setSessionId,
   setVscMediaUrl,
-  setDataSwitchOn
+  setDataSwitchOn,
 } = configSlice.actions;
 export default configSlice.reducer;
diff --git a/extension/src/debugPanel.ts b/extension/src/debugPanel.ts
index b687c3e4..d133080b 100644
--- a/extension/src/debugPanel.ts
+++ b/extension/src/debugPanel.ts
@@ -221,6 +221,15 @@ export function setupDebugPanel(
         }
         break;
       }
+      case "websocketForwardingClose": {
+        let url = data.url;
+        let connection = websocketConnections[url];
+        if (typeof connection !== "undefined") {
+          connection.close();
+          websocketConnections[url] = undefined;
+        }
+        break;
+      }
       case "websocketForwardingMessage": {
         let url = data.url;
         let connection = websocketConnections[url];
diff --git a/extension/src/util/messenger.ts b/extension/src/util/messenger.ts
index bcc88fe1..152d4a1f 100644
--- a/extension/src/util/messenger.ts
+++ b/extension/src/util/messenger.ts
@@ -18,6 +18,8 @@ export abstract class Messenger {
   abstract onError(callback: () => void): void;
 
   abstract sendAndReceive(messageType: string, data: any): Promise<any>;
+
+  abstract close(): void;
 }
 
 export class WebsocketMessenger extends Messenger {
@@ -160,4 +162,8 @@ export class WebsocketMessenger extends Messenger {
   onError(callback: () => void): void {
     this.websocket.addEventListener("error", callback);
   }
+
+  close(): void {
+    this.websocket.close();
+  }
 }