mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-05 10:08:52 +01:00
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.
This commit is contained in:
parent
15d7a3d221
commit
6900fa73c6
4 changed files with 92 additions and 1 deletions
43
docs/fixes/back-button-navigation-fix.md
Normal file
43
docs/fixes/back-button-navigation-fix.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue