);
}
-
diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index a862217..a53fb45 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -1,8 +1,9 @@
-// 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,
@@ -12,27 +13,88 @@ export default function ChatLayout({
onStop,
onToggleTheme,
onReloadHistory,
- onFreshStart
+ onFreshStart,
+ onCreateSession,
+ onEditSession,
+ onSelectSession,
+ userId
}) {
+ const [showSessionsPanel, setShowSessionsPanel] = useState(false);
+
+ // 1️⃣ helper at the top (inside the component is fine)
+ function getScrollbarWidth() {
+ return window.innerWidth - document.documentElement.clientWidth;
+ }
+
+ // update body class when panel state changes
+ useEffect(() => {
+ document.body.classList.toggle("sessions-open", showSessionsPanel);
+ }, [showSessionsPanel]);
+
+ // 2️⃣ revised toggles
+ const openSessionManager = () => {
+ const scrollBarWidth = getScrollbarWidth();
+ document.body.style.overflow = "hidden";
+ document.body.style.paddingRight = `${scrollBarWidth}px`;
+ setShowSessionsPanel(true);
+ };
+
+ const closeSessionManager = () => {
+ document.body.style.overflow = "";
+ document.body.style.paddingRight = "";
+ setShowSessionsPanel(false);
+ };
+
return (
-
-
-
+ <>
+
+
- {loading && (
-
-
+
+
- )}
-
-
+ {loading && (
+
+
+
+ )}
+
+
+
+
+
+
+
Manage Sessions
+
+
+
+
+
+
+
);
}
+
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..4ce508d
--- /dev/null
+++ b/frontend/src/SessionTable.jsx
@@ -0,0 +1,133 @@
+// src/SessionTable.jsx
+import React, { useEffect, useState } from "react";
+import { getSessionId } from "./useSessionId";
+
+export default function SessionTable({ userId, onSelectSession, onClosePanel }) {
+ const [sessions, setSessions] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [editingSessionId, setEditingSessionId] = useState(null);
+ const [editName, setEditName] = useState("");
+ const activeSessionId = getSessionId();
+
+ 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 (
+
+ );
+}
+
diff --git a/frontend/src/UserMessage.jsx b/frontend/src/UserMessage.jsx
index 9488b52..52a968e 100644
--- a/frontend/src/UserMessage.jsx
+++ b/frontend/src/UserMessage.jsx
@@ -3,18 +3,22 @@ import React from "react";
export default function UserMessage({ content, theme }) {
return (
-
+ // This outer div aligns the *bubble* to the right
+
background
- color: "inherit", // match bubble text color
+ backgroundColor: "transparent",
+ color: "inherit",
}}
>
{content}
diff --git a/frontend/src/themes.js b/frontend/src/themes.js
index 0bd113f..a3e6300 100644
--- a/frontend/src/themes.js
+++ b/frontend/src/themes.js
@@ -1,13 +1,13 @@
// themes.js
export const themes = {
light: {
- userBg: "bg-primary text-white",
+ userBg: "bg-primary bg-opacity-25 text-dark",
assistantBg: "bg-white border text-dark",
bodyBg: "bg-light",
headerBg: "bg-primary text-white",
},
dark: {
- userBg: "bg-dark text-white",
+ userBg: "bg-primary text-white",
assistantBg: "bg-secondary text-white",
bodyBg: "bg-black text-white",
headerBg: "bg-dark text-white",
diff --git a/frontend/src/useChatStream.js b/frontend/src/useChatStream.js
index 02a95ad..0745b93 100644
--- a/frontend/src/useChatStream.js
+++ b/frontend/src/useChatStream.js
@@ -6,18 +6,18 @@ export function useChatStream() {
const [messages, setMessages] = useState([]);
const [loading, setLoading] = useState(false);
const abortRef = useRef(null);
- const sessionId = getSessionId();
+
const userId = getUserId();
const sendMessage = useCallback(
async (input) => {
if (!input.trim()) return;
- // Abort any previous stream
+ const sessionId = getSessionId(); // <-- get latest every time
+
if (abortRef.current) {
abortRef.current.abort();
}
-
const controller = new AbortController();
abortRef.current = controller;
@@ -33,7 +33,7 @@ export function useChatStream() {
"Content-Type": "application/json",
Accept: "text/event-stream",
},
- body: JSON.stringify({ user_id: userId, session_id: sessionId, message: input }),
+ body: JSON.stringify({ user_id: userId, session_id: sessionId, message: input }),
signal: controller.signal,
});
@@ -101,7 +101,7 @@ export function useChatStream() {
abortRef.current = null;
}
},
- [messages]
+ [messages, userId]
);
const stopGenerating = useCallback(() => {
@@ -115,4 +115,3 @@ export function useChatStream() {
return { messages, loading, sendMessage, stopGenerating, setMessages };
}
-
diff --git a/frontend/src/useSessionId.js b/frontend/src/useSessionId.js
index 9ac49f8..7371607 100644
--- a/frontend/src/useSessionId.js
+++ b/frontend/src/useSessionId.js
@@ -1,4 +1,4 @@
-// useIds.js
+// useSessionId.js
export function getUserId() {
let id = localStorage.getItem("userId");
if (!id) {
@@ -9,6 +9,7 @@ export function getUserId() {
}
export function getSessionId() {
+ // Always re‑read localStorage so latest value is returned
let id = localStorage.getItem("sessionId");
if (!id) {
id = crypto.randomUUID();
@@ -17,6 +18,10 @@ export function getSessionId() {
return id;
}
+export function setSessionId(id) {
+ localStorage.setItem("sessionId", id);
+}
+
export function resetSessionId() {
const newId = crypto.randomUUID();
localStorage.setItem("sessionId", newId);