mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
♾️ style: Infinite Scroll Nav and Sort Convos by Date/Usage (#1708)
* Style: Infinite Scroll and Group convos by date * Style: Infinite Scroll and Group convos by date- Redesign NavBar * Style: Infinite Scroll and Group convos by date- Redesign NavBar - Clean code * Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component * Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component * Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component * Including OpenRouter and Mistral icon * refactor(Conversations): cleanup use of utility functions and typing * refactor(Nav/NewChat): use localStorage `lastConversationSetup` to determine the endpoint to use, as well as icons -> JSX components, remove use of `endpointSelected` * refactor: remove use of `isFirstToday` * refactor(Nav): remove use of `endpointSelected`, consolidate scrolling logic to its own hook `useNavScrolling`, remove use of recoil `conversation` * refactor: Add spinner to bottom of list, throttle fetching, move query hooks to client workspace * chore: sort by `updatedAt` field * refactor: optimize conversation infinite query, use optimistic updates, add conversation helpers for managing pagination, remove unnecessary operations * feat: gen_title route for generating the title for the conversation * style(Convo): change hover bg-color * refactor: memoize groupedConversations and return as array of tuples, correctly update convos pre/post message stream, only call genTitle if conversation is new, make `addConversation` dynamically either add/update depending if convo exists in pages already, reorganize type definitions * style: rename Header NewChat Button -> HeaderNewChat, add NewChatIcon, closely match main Nav New Chat button to ChatGPT * style(NewChat): add hover bg color * style: cleanup comments, match ChatGPT nav styling, redesign search bar, make part of new chat sticky header, move Nav under same parent as outlet/mobilenav, remove legacy code, search only if searchQuery is not empty * feat: add tests for conversation helpers and ensure no duplicate conversations are ever grouped * style: hover bg-color * feat: alt-click on convo item to open conversation in new tab * chore: send error message when `gen_title` fails --------- Co-authored-by: Walber Cardoso <walbercardoso@gmail.com>
This commit is contained in:
Danny Avila
GitHub
parent
13b2d6e34a
commit
74459d6261
48 changed files with 1788 additions and 391 deletions
|
|
@ -1,16 +1,18 @@
|
|||
import { useSearchQuery, useGetConversationsQuery } from 'librechat-data-provider/react-query';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import type { TConversation, TSearchResults } from 'librechat-data-provider';
|
||||
import { useCallback, useEffect, useState, useMemo } from 'react';
|
||||
import type { ConversationListResponse } from 'librechat-data-provider';
|
||||
import {
|
||||
useAuthContext,
|
||||
useMediaQuery,
|
||||
useAuthContext,
|
||||
useConversation,
|
||||
useConversations,
|
||||
useLocalStorage,
|
||||
useNavScrolling,
|
||||
useConversations,
|
||||
} from '~/hooks';
|
||||
import { useSearchInfiniteQuery, useConversationsInfiniteQuery } from '~/data-provider';
|
||||
import { TooltipProvider, Tooltip } from '~/components/ui';
|
||||
import { Conversations, Pages } from '../Conversations';
|
||||
import { Conversations } from '~/components/Conversations';
|
||||
import { Spinner } from '~/components/svg';
|
||||
import SearchBar from './SearchBar';
|
||||
import NavToggle from './NavToggle';
|
||||
|
|
@ -20,14 +22,14 @@ import { cn } from '~/utils';
|
|||
import store from '~/store';
|
||||
|
||||
export default function Nav({ navVisible, setNavVisible }) {
|
||||
const [isToggleHovering, setIsToggleHovering] = useState(false);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const [navWidth, setNavWidth] = useState('260px');
|
||||
const { conversationId } = useParams();
|
||||
const { isAuthenticated } = useAuthContext();
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollPositionRef = useRef<number | null>(null);
|
||||
|
||||
const [navWidth, setNavWidth] = useState('260px');
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
const [newUser, setNewUser] = useLocalStorage('newUser', true);
|
||||
const [isToggleHovering, setIsToggleHovering] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSmallScreen) {
|
||||
|
|
@ -37,44 +39,42 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
}
|
||||
}, [isSmallScreen]);
|
||||
|
||||
const [conversations, setConversations] = useState<TConversation[]>([]);
|
||||
// current page
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
// total pages
|
||||
const [pages, setPages] = useState(1);
|
||||
const [showLoading, setShowLoading] = useState(false);
|
||||
|
||||
// data provider
|
||||
const getConversationsQuery = useGetConversationsQuery(pageNumber + '', {
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
|
||||
// search
|
||||
const searchQuery = useRecoilValue(store.searchQuery);
|
||||
const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
|
||||
const isSearching = useRecoilValue(store.isSearching);
|
||||
const { newConversation, searchPlaceholderConversation } = useConversation();
|
||||
|
||||
// current conversation
|
||||
const conversation = useRecoilValue(store.conversation);
|
||||
const { conversationId } = conversation || {};
|
||||
const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
|
||||
const refreshConversationsHint = useRecoilValue(store.refreshConversationsHint);
|
||||
const { refreshConversations } = useConversations();
|
||||
const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
|
||||
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversationsInfiniteQuery(
|
||||
{ pageNumber: pageNumber.toString() },
|
||||
{ enabled: isAuthenticated },
|
||||
);
|
||||
|
||||
const searchQueryFn = useSearchQuery(searchQuery, pageNumber + '', {
|
||||
enabled: !!(!!searchQuery && searchQuery.length > 0 && isSearchEnabled && isSearching),
|
||||
const searchQueryRes = useSearchInfiniteQuery(
|
||||
{ pageNumber: pageNumber.toString(), searchQuery: searchQuery },
|
||||
{ enabled: isAuthenticated && !!searchQuery.length },
|
||||
);
|
||||
|
||||
const { containerRef, moveToTop } = useNavScrolling({
|
||||
setShowLoading,
|
||||
hasNextPage: searchQuery ? searchQueryRes.hasNextPage : hasNextPage,
|
||||
fetchNextPage: searchQuery ? searchQueryRes.fetchNextPage : fetchNextPage,
|
||||
isFetchingNextPage: searchQuery ? searchQueryRes.isFetchingNextPage : isFetchingNextPage,
|
||||
});
|
||||
|
||||
const onSearchSuccess = useCallback((data: TSearchResults, expectedPage?: number) => {
|
||||
const conversations = useMemo(
|
||||
() =>
|
||||
(searchQuery ? searchQueryRes?.data : data)?.pages.flatMap((page) => page.conversations) ||
|
||||
[],
|
||||
[data, searchQuery, searchQueryRes?.data],
|
||||
);
|
||||
|
||||
const onSearchSuccess = useCallback(({ data }: { data: ConversationListResponse }) => {
|
||||
const res = data;
|
||||
setConversations(res.conversations);
|
||||
if (expectedPage) {
|
||||
setPageNumber(expectedPage);
|
||||
}
|
||||
setPages(Number(res.pages));
|
||||
setIsFetching(false);
|
||||
searchPlaceholderConversation();
|
||||
setSearchResultMessages(res.messages);
|
||||
/* disabled due recoil methods not recognized as state setters */
|
||||
|
|
@ -83,12 +83,10 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
|
||||
useEffect(() => {
|
||||
//we use isInitialLoading here instead of isLoading because query is disabled by default
|
||||
if (searchQueryFn.isInitialLoading) {
|
||||
setIsFetching(true);
|
||||
} else if (searchQueryFn.data) {
|
||||
onSearchSuccess(searchQueryFn.data);
|
||||
if (searchQueryRes.data) {
|
||||
onSearchSuccess({ data: searchQueryRes.data.pages[0] });
|
||||
}
|
||||
}, [searchQueryFn.data, searchQueryFn.isInitialLoading, onSearchSuccess]);
|
||||
}, [searchQueryRes.data, searchQueryRes.isInitialLoading, onSearchSuccess]);
|
||||
|
||||
const clearSearch = () => {
|
||||
setPageNumber(1);
|
||||
|
|
@ -98,51 +96,6 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
}
|
||||
};
|
||||
|
||||
const moveToTop = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (container) {
|
||||
scrollPositionRef.current = container.scrollTop;
|
||||
}
|
||||
}, [containerRef, scrollPositionRef]);
|
||||
|
||||
const nextPage = async () => {
|
||||
moveToTop();
|
||||
setPageNumber(pageNumber + 1);
|
||||
};
|
||||
|
||||
const previousPage = async () => {
|
||||
moveToTop();
|
||||
setPageNumber(pageNumber - 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (getConversationsQuery.data) {
|
||||
if (isSearching) {
|
||||
return;
|
||||
}
|
||||
let { conversations, pages } = getConversationsQuery.data;
|
||||
pages = Number(pages);
|
||||
if (pageNumber > pages) {
|
||||
setPageNumber(pages);
|
||||
} else {
|
||||
if (!isSearching) {
|
||||
conversations = conversations.sort(
|
||||
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
||||
);
|
||||
}
|
||||
setConversations(conversations);
|
||||
setPages(pages);
|
||||
}
|
||||
}
|
||||
}, [getConversationsQuery.isSuccess, getConversationsQuery.data, isSearching, pageNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSearching) {
|
||||
getConversationsQuery.refetch();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageNumber, conversationId, refreshConversationsHint]);
|
||||
|
||||
const toggleNavVisible = () => {
|
||||
setNavVisible((prev: boolean) => !prev);
|
||||
if (newUser) {
|
||||
|
|
@ -156,11 +109,6 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
}
|
||||
};
|
||||
|
||||
const containerClasses =
|
||||
getConversationsQuery.isLoading && pageNumber === 1
|
||||
? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
|
||||
: 'flex flex-col gap-2 text-gray-100 text-sm';
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<Tooltip>
|
||||
|
|
@ -178,44 +126,44 @@ export default function Nav({ navVisible, setNavVisible }) {
|
|||
<div className="flex h-full min-h-0 flex-col">
|
||||
<div
|
||||
className={cn(
|
||||
'scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20 transition-opacity',
|
||||
'flex h-full min-h-0 flex-col transition-opacity',
|
||||
isToggleHovering && !isSmallScreen ? 'opacity-50' : 'opacity-100',
|
||||
)}
|
||||
>
|
||||
<nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<div className="mb-1 flex h-11 flex-row">
|
||||
<NewChat toggleNav={itemToggleNav} />
|
||||
</div>
|
||||
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
|
||||
<div
|
||||
className={`flex-1 flex-col overflow-y-auto ${
|
||||
isHovering ? '' : 'scrollbar-transparent'
|
||||
} border-b border-white/20`}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
{(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Conversations
|
||||
conversations={conversations}
|
||||
moveToTop={moveToTop}
|
||||
toggleNav={itemToggleNav}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20',
|
||||
)}
|
||||
>
|
||||
<nav className="flex h-full w-full flex-col px-3 pb-3.5">
|
||||
<div
|
||||
className={cn(
|
||||
'-mr-2 flex-1 flex-col overflow-y-auto pr-2 transition-opacity duration-500',
|
||||
isHovering ? '' : 'scrollbar-transparent',
|
||||
)}
|
||||
<Pages
|
||||
pageNumber={pageNumber}
|
||||
pages={pages}
|
||||
nextPage={nextPage}
|
||||
previousPage={previousPage}
|
||||
setPageNumber={setPageNumber}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<NewChat
|
||||
toggleNav={itemToggleNav}
|
||||
subHeaders={isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
|
||||
/>
|
||||
<Conversations
|
||||
conversations={conversations}
|
||||
moveToTop={moveToTop}
|
||||
toggleNav={itemToggleNav}
|
||||
/>
|
||||
<Spinner
|
||||
className={cn(
|
||||
'm-1 mx-auto mb-4 h-4 w-4',
|
||||
isFetchingNextPage || showLoading ? 'opacity-1' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue