Fix navigation through sessions and subpages (#11)

- Fix for navigation between open sessions and new sessions.
- If you change to the knowledge page and go back, the previous session is
reopened.

Author: FelixHertweck

src/hooks/useChatMessages.ts

@@ -44,10 +44,7 @@ export default function useChatMessages(): UseChatMessagesResponse {
   useEffect(() => {
     const resetChatMessages = async () => {
       // Reset chat messages when sessionID changes
-      if (
-        activeSessionIdRef.current !== previousSessionId.current &&
-        !activeSessionIsNew
-      ) {
+      if (!activeSessionIsNew) {
         setLoadingResponse(false);
         setError(null);
         setCurrentChatMessages([]);

src/lib/navigateToSession.ts

@@ -0,0 +1,9 @@
+import { NavigateFunction } from "react-router";
+
+export function navigateToSession(
+  sessionId: string | null,
+  navigate: NavigateFunction,
+) {
+  if (sessionId === null) void navigate("/");
+  else void navigate(`/?session=${sessionId}`);
+}

src/locales/de/translation.json

@@ -17,7 +17,6 @@
     "deleteSessionSuccessful": "Die Session wurde erfolgreich gelöscht",
     "errorModelNotAvailable": "Das ausgewählte Modell ist nicht mehr verfügbar",
     "newSession": "Erzeuge neue Session",
-    "newSessionCreate": "Neue Sitzung erstellt",
     "noSessionLabel": "Keine Session Label verfügbar",
     "chat": {
       "newChat": {

src/locales/en/translation.json

@@ -17,7 +17,6 @@
     "deleteSessionSuccessful": "The session was successfully deleted",
     "errorModelNotAvailable": "The selected model is no longer available",
     "newSession": "Create new session",
-    "newSessionCreate": "New session created",
     "noSessionLabel": "No session label available",
     "chat": {
       "newChat": {

src/services/GetSessionsService.tsx

@@ -12,13 +12,18 @@ import { useToast } from "@/hooks/use-toast";
 import { default as useRefState } from "react-usestateref";
 import useCurrentPage from "@/hooks/useCurrentPage";
 import { useNavigate } from "react-router";
+import { navigateToSession } from "@/lib/navigateToSession";
 
 export interface UseGetSessionsApiResponse {
   sessions: Session[];
   activeSessionId: string | null;
   activeSessionIdRef: React.MutableRefObject<string | null>;
   activeSessionIsNew: boolean;
-  setActiveSessionId: (sessionId: string | null, isNew?: boolean) => void;
+  setActiveSessionId: (
+    sessionId: string | null,
+    isNew?: boolean,
+    redirect?: boolean,
+  ) => void;
   appendSessionLocal: (session: Session | null) => void;
   updateSessionLabelLocal: (sessionId: string, newLabel: string) => void;
   deleteSessionLocal: (sessionId: string) => void;
@@ -109,9 +114,17 @@ export default function GetSessionsProvider({
     );
   };
 
-  const setActiveSessionIdFunc = (sessionId: string | null, isNew = false) => {
+  // Set active session id and update URL with the new selected session
+  const setActiveSessionIdFunc = (
+    sessionId: string | null,
+    isNew = false,
+    redirect = true,
+  ) => {
     activeSessionIsNewRef.current = isNew;
     setActiveSessionId(sessionId);
+    if (redirect) {
+      navigateToSession(sessionId, navigate);
+    }
   };
 
   const value = useMemo(

src/views/chatbot/Chatbot.tsx

@@ -38,13 +38,14 @@ export default function Chatbot() {
     handlePromptAndMessages,
   } = useChatMessages();
 
+  // Set active session id from URL at load time
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
     const sessionId = queryParams.get("session");
     setPdfKnowledgeId(null);
     setPdfFileName(null);
     setActiveSessionId(sessionId);
-  }, [location]);
+  }, []);
 
   // collapse sidebar if PDF is opened and screen is resized to a smaller size
   useEffect(() => {

src/views/overlays/Overlay.tsx

@@ -1,37 +1,33 @@
-import { useTranslation } from "react-i18next";
 import Header from "./Header";
 import Sidebar from "./sidebar/Sidebar";
-import { useToast } from "@/hooks/use-toast";
-import { useNavigate } from "react-router";
 import Footer from "./Footer";
 import { useRef } from "react";
 import useElementSize from "@/hooks/useElementSize.ts";
+import { useGetSessions } from "@/services/GetSessionsService";
 
 interface OverlayProps {
   children: React.ReactNode;
 }
 
 export function Overlay({ children }: Readonly<OverlayProps>) {
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const { t } = useTranslation();
   const headerRef = useRef<HTMLDivElement>(null);
   const footerRef = useRef<HTMLDivElement>(null);
   const headerSize = useElementSize(headerRef);
   const footerSize = useElementSize(footerRef);
+  const { setActiveSessionId } = useGetSessions();
 
-  const onClickNewSession = async () => {
-    await navigate("/", { replace: true }); // Remove session id from URL
-    toast({
-      variant: "default",
-      title: t("chatbot.newSessionCreate"),
-    });
+  const onClickNewSession = () => {
+    setActiveSessionId(null);
   };
 
   return (
     <Sidebar>
       <div ref={headerRef} className="sticky top-0 z-40 ">
-        <Header onClickNewSession={() => void onClickNewSession()} />
+        <Header
+          onClickNewSession={() => {
+            onClickNewSession();
+          }}
+        />
       </div>
       <div
         className="mx-4"

src/views/overlays/sidebar/SidebarContent.tsx

@@ -15,7 +15,6 @@ import { SidebarSessionsGroup, SidebarSessionList } from "./SidebarSessionList";
 import { SidebarModelSelector as ChatbotSidebarHeader } from "./SidebarModelSelector";
 import { useToast } from "@/hooks/use-toast";
 import { groupSessionsByDateForNavbar } from "@/lib/groupSessionsByDateForNavbar";
-import { useNavigate } from "react-router";
 import { useUserContext } from "@/services/UserContextService";
 import { useGetSessions } from "@/services/GetSessionsService";
 import LoadingAnimation from "@/components/loading-animation";
@@ -101,11 +100,10 @@ const GetSessions = ({
 }) => {
   const { t } = useTranslation();
   const { user } = useUserContext();
-
-  const navigate = useNavigate();
+  const { setActiveSessionId } = useGetSessions();
 
   const onSelectSession = (sessionId: string) => {
-    void navigate(`/?session=${sessionId}`);
+    setActiveSessionId(sessionId);
   };
 
   return (

src/views/overlays/sidebar/SidebarMainNav.tsx

@@ -6,6 +6,8 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import useCurrentPage from "@/hooks/useCurrentPage";
+import { navigateToSession } from "@/lib/navigateToSession";
+import { useGetSessions } from "@/services/GetSessionsService";
 import { useUserContext } from "@/services/UserContextService";
 import { t } from "i18next";
 import { Bot, HardDriveUpload } from "lucide-react";
@@ -16,14 +18,15 @@ export default function SidebarMainNav() {
   const { open } = useSidebar();
   const navigate = useNavigate();
   const { user } = useUserContext();
+  const { activeSessionId } = useGetSessions();
 
   return (
     <SidebarGroup className="pt-4">
       <SidebarMenu>
         <SidebarMenuItem>
           <SidebarMenuButton
             onClick={() => {
-              void navigate("/");
+              navigateToSession(activeSessionId, navigate);
             }}
             className={activePage === "chatbot" ? "bg-secondary" : ""}
           >