mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 11:20:15 +01:00
43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
|
|
# 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
|