LibreChat/docs/fixes/back-button-navigation-fix.md

43 lines
1.7 KiB
Markdown
Raw Normal View 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`:
```typescript
// 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