Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
LibreChat/docs/fixes/back-button-navigation-fix.md
Danny Avila 6900fa73c6
fix: Add useBackToNewChat Hook for Back Navigation Handling 
- Introduced a new hook `useBackToNewChat` to manage state when navigating back to the `/c/new` route.
- The hook listens for browser back/forward navigation events and resets the conversation state appropriately.
- Integrated the hook into `ChatRoute.tsx` to ensure proper functionality during navigation.
- Added documentation detailing the problem, solution, and implementation of the new hook.
2025-08-27 19:09:00 -04:00

1.7 KiB
Raw Blame History

Back Button Navigation Fix for LibreChat

Problem

When users navigate back to /c/new using the browser's back button from an existing conversation, the conversation state doesn't reset properly. This causes new messages to be appended to the previous conversation instead of creating a new one.

Solution

Created a custom hook useBackToNewChat that listens for browser back/forward navigation events and resets the conversation state when navigating back to /c/new.

Implementation

New Hook: useBackToNewChat

Located at: client/src/hooks/useBackToNewChat.ts

The hook:

  1. Listens to popstate events - Detects when users use browser back/forward buttons
  2. Checks current path - Verifies if the navigation landed on /c/new
  3. Resets conversation state - Clears messages and creates a new conversation if needed

Integration

The hook is used in ChatRoute.tsx:

// Handle back navigation to /c/new
useBackToNewChat(index);

Why This Approach?

  • Direct browser event handling - The popstate event fires specifically for browser navigation (back/forward buttons)
  • No complex state tracking - Avoids finicky effects that depend on conversation state changes
  • Simple and focused - Single responsibility: detect back navigation to new chat and reset state

Benefits

  • Minimal impact on existing code
  • Isolated logic that's easier to test and maintain
  • Directly addresses the root cause (browser back button)
  • Avoids race conditions with conversation state updates

Testing

Test file: client/src/hooks/__tests__/useBackToNewChat.test.ts

Tests cover:

  • Popstate event handling when navigating to /c/new
  • No action when already on /c/new
  • No action when navigating to other routes