Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 02:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🪶 refactor: Chat Input Focus for Conversation Navigations & ChatForm Optimizations (#7100)

Browse source 
* refactor: improve ChatView layout by keeping ChatForm mounted

* feat: implement focusChat functionality for new conversations and navigations

* refactor: reset artifacts when navigating to prevent any from rendering in a conversation when none exist; edge case, artifacts get created by search route (TODO: use a different artifact renderer for Search markdown)
This commit is contained in:
Danny Avila 2025-04-27 18:28:28 -04:00 • committed by GitHub
parent 6826c0ed43
commit fc30482f65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 68 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

29
client/src/hooks/useNewConvo.ts
View file

@ -1,6 +1,6 @@
import { useCallback, useRef } from 'react';
import { useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
import { useNavigate } from 'react-router-dom';
import {
Constants,
FileSources,
@ -30,12 +30,12 @@ import { useDeleteFilesMutation, useGetEndpointsQuery, useGetStartupConfig } fro
import useAssistantListMap from './Assistants/useAssistantListMap';
import { useResetChatBadges } from './useChatBadges';
import { usePauseGlobalAudio } from './Audio';
import { mainTextareaId } from '~/common';
import { logger } from '~/utils';
import store from '~/store';
const useNewConvo = (index = 0) => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { data: startupConfig } = useGetStartupConfig();
const clearAllConversations = store.useClearConvoState();
const defaultPreset = useRecoilValue(store.defaultPreset);
@ -47,7 +47,6 @@ const useNewConvo = (index = 0) => {
const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
const modelsQuery = useGetModelsQuery();
const timeoutIdRef = useRef<NodeJS.Timeout>();
const assistantsListMap = useAssistantListMap();
const { pauseGlobalAudio } = usePauseGlobalAudio(index);
const saveDrafts = useRecoilValue<boolean>(store.saveDrafts);
@ -159,24 +158,24 @@ const useNewConvo = (index = 0) => {
clearAllLatestMessages();
}
const searchParamsString = searchParams?.toString();
const getParams = () => (searchParamsString ? `?${searchParamsString}` : '');
if (conversation.conversationId === Constants.NEW_CONVO && !modelsData) {
const appTitle = localStorage.getItem(LocalStorageKeys.APP_TITLE) ?? '';
if (appTitle) {
document.title = appTitle;
}
navigate(`/c/${Constants.NEW_CONVO}`);
}
clearTimeout(timeoutIdRef.current);
if (disableFocus === true) {
const path = `/c/${Constants.NEW_CONVO}${getParams()}`;
navigate(path, { state: { focusChat: true } });
return;
}
timeoutIdRef.current = setTimeout(() => {
const textarea = document.getElementById(mainTextareaId);
if (textarea) {
textarea.focus();
}
}, 150);
const path = `/c/${conversation.conversationId}${getParams()}`;
navigate(path, {
replace: true,
state: disableFocus ? {} : { focusChat: true },
});
},
[endpointsConfig, defaultPreset, assistantsListMap, modelsQuery.data],
);