);
}
-
diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index b51f44b..4edc3f3 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -1,9 +1,9 @@
-// src/ChatLayout.jsx
-// ChatLayout.jsx
-import React from "react";
+// App.jsx
+import React, { useState, useEffect } from "react";
import ChatHeader from "./ChatHeader";
import ChatWindow from "./ChatWindow";
import ChatInput from "./ChatInput";
+import SessionTable from "./SessionTable";
export default function ChatLayout({
theme,
@@ -13,29 +13,79 @@ export default function ChatLayout({
onStop,
onToggleTheme,
onReloadHistory,
- onFreshStart
+ onFreshStart,
+ onCreateSession,
+ onSelectSession,
+ userId
}) {
+ const [showSessionsPanel, setShowSessionsPanel] = useState(false);
+
+ useEffect(() => {
+ document.body.classList.toggle("sessions-open", showSessionsPanel);
+ }, [showSessionsPanel]);
+
+ const openSessionManager = () => setShowSessionsPanel(true);
+ const closeSessionManager = () => setShowSessionsPanel(false);
+
return (
-
-
-
-
+ <>
+ {/* SHIFTING CONTENT */}
+
+
+
+
+
+
+
+ {loading && (
+
+
+
+ )}
+
+
- {loading && (
-
-
-
- )}
+ {/* DARK OVERLAY */}
+
-
-
+ {/* FIXED OFFCANVAS */}
+
+
+
Manage Sessions
+
+
+
+ {
+ onSelectSession(sessionId);
+ closeSessionManager();
+ }}
+ />
+
+
+
);
}
+
diff --git a/frontend/src/ChatLayout.jsx.orig b/frontend/src/ChatLayout.jsx.orig
new file mode 100644
index 0000000..2b29f0f
--- /dev/null
+++ b/frontend/src/ChatLayout.jsx.orig
@@ -0,0 +1,79 @@
+// src/ChatLayout.jsx
+import React, { useState } from "react";
+import ChatHeader from "./ChatHeader";
+import ChatWindow from "./ChatWindow";
+import ChatInput from "./ChatInput";
+import SessionTable from "./SessionTable"; // your existing table
+
+export default function ChatLayout({
+ theme,
+ messages,
+ loading,
+ onSend,
+ onStop,
+ onToggleTheme,
+ onReloadHistory,
+ onFreshStart,
+ onCreateSession,
+ onSelectSession, // new: load a chosen session
+ userId // new: so SessionTable can fetch sessions
+}) {
+ const [showSessionsPanel, setShowSessionsPanel] = useState(false);
+
+ const openSessionManager = () => setShowSessionsPanel(true);
+ const closeSessionManager = () => setShowSessionsPanel(false);
+
+ return (
+
+
+
+
+
+
+
+ {loading && (
+
+
+
+ )}
+
+
+
+ {/* Offcanvas Session Manager */}
+
+
+
Manage Sessions
+
+
+
+ {
+ onSelectSession(sessionId); // tell parent to load history
+ closeSessionManager();
+ }}
+ />
+
+
+
+ );
+}
+
+
diff --git a/frontend/src/SessionTable.jsx b/frontend/src/SessionTable.jsx
new file mode 100644
index 0000000..b57b07a
--- /dev/null
+++ b/frontend/src/SessionTable.jsx
@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+
+export default function SessionTable({ userId, onSelectSession }) {
+ const [sessions, setSessions] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [editingSessionId, setEditingSessionId] = useState(null);
+ const [editName, setEditName] = useState("");
+
+ const fetchSessions = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch(`/v1/sessions?user_id=${userId}`);
+ const data = await res.json();
+ setSessions(data);
+ } catch (err) {
+ console.error("Failed to fetch sessions", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (userId) {
+ fetchSessions();
+ }
+ }, [userId]);
+
+ const startEditing = (session) => {
+ setEditingSessionId(session.session_id);
+ setEditName(session.session_name);
+ };
+
+ const saveName = async (sessionId) => {
+ try {
+ await fetch(`/v1/sessions/${sessionId}?user_id=${userId}`, {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ session_name: editName }),
+ });
+ setEditingSessionId(null);
+ fetchSessions();
+ } catch (err) {
+ console.error("Failed to rename session", err);
+ }
+ };
+
+ const deleteSession = async (sessionId) => {
+ if (!window.confirm("Delete this session and its history?")) return;
+ try {
+ await fetch(`/v1/sessions/${sessionId}?user_id=${userId}`, { method: "DELETE" });
+ fetchSessions();
+ } catch (err) {
+ console.error("Failed to delete session", err);
+ }
+ };
+
+ return (
+
+ );
+}
+