Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-24 19:34:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🖱️ feat: Native Browser Navigation Support for New Chat (#11904)
Some checks are pending
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Waiting to run
Details
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Waiting to run
Details
Docker Dev Images Build / build (Dockerfile, librechat-dev, node) (push) Waiting to run
Details
Docker Dev Images Build / build (Dockerfile.multi, librechat-dev-api, api-build) (push) Waiting to run
Details
Sync Locize Translations & Create Translation PR / Sync Translation Keys with Locize (push) Waiting to run
Details
Sync Locize Translations & Create Translation PR / Create Translation PR on Version Published (push) Blocked by required conditions
Details

Browse source 
* 🔗 refactor: Replace navigate with Link for new chat navigation

* 🧬 fix: Ensure default action is prevented for non-left mouse clicks in NewChat component
This commit is contained in:
Fahleen Arif 2026-02-24 18:21:40 +05:00 • committed by GitHub
parent f3eb197675
commit 3d7e26382e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Nav/NewChat.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { QueryKeys } from 'librechat-data-provider';
import { useQueryClient } from '@tanstack/react-query';
import { TooltipAnchor, NewChatIcon, MobileSidebar, Sidebar, Button } from '@librechat/client';
@ -24,7 +24,6 @@ export default function NewChat({
const queryClient = useQueryClient();
/** Note: this component needs an explicit index passed if using more than one */
const { newConversation: newConvo } = useNewConvo(index);
const navigate = useNavigate();
const localize = useLocalize();
const { conversation } = store.useCreateConversationAtom(index);
@ -36,21 +35,22 @@ export default function NewChat({
}, 250);
}, [toggleNav]);
const clickHandler: React.MouseEventHandler<HTMLButtonElement> = useCallback(
const clickHandler: React.MouseEventHandler<HTMLAnchorElement> = useCallback(
(e) => {
if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
window.open('/c/new', '_blank');
// Let browser handle modified/non-left clicks (new tab, context menu, etc.)
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
return;
}
e.preventDefault();
clearMessagesCache(queryClient, conversation?.conversationId);
queryClient.invalidateQueries([QueryKeys.messages]);
newConvo();
navigate('/c/new', { state: { focusChat: true } });
if (isSmallScreen) {
toggleNav();
}
},
[queryClient, conversation, newConvo, navigate, toggleNav, isSmallScreen],
[queryClient, conversation, newConvo, toggleNav, isSmallScreen],
);
return (
@ -84,14 +84,16 @@ export default function NewChat({
description={localize('com_ui_new_chat')}
render={
<Button
asChild
size="icon"
variant="outline"
data-testid="nav-new-chat-button"
aria-label={localize('com_ui_new_chat')}
className="rounded-full border-none bg-transparent duration-0 hover:bg-surface-active-alt focus-visible:ring-inset focus-visible:ring-black focus-visible:ring-offset-0 dark:focus-visible:ring-white md:rounded-xl"
onClick={clickHandler}
>
<NewChatIcon className="icon-lg text-text-primary" />
<Link to="/c/new" state={{ focusChat: true }} onClick={clickHandler}>
<NewChatIcon className="icon-lg text-text-primary" />
</Link>
</Button>
}
/>