mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-30 07:08:50 +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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,36 @@
|
|||
import { useLocalize, useConversation, useNewConvo, useOriginNavigate } from '~/hooks';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
|
||||
import {
|
||||
useLocalize,
|
||||
useConversation,
|
||||
useNewConvo,
|
||||
useOriginNavigate,
|
||||
useLocalStorage,
|
||||
} from '~/hooks';
|
||||
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
|
||||
import { NewChatIcon } from '~/components/svg';
|
||||
import { getEndpointField } from '~/utils';
|
||||
|
||||
export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
|
||||
const { newConversation } = useConversation();
|
||||
export default function NewChat({
|
||||
toggleNav,
|
||||
subHeaders,
|
||||
}: {
|
||||
toggleNav: () => void;
|
||||
subHeaders?: React.ReactNode;
|
||||
}) {
|
||||
const { newConversation: newConvo } = useNewConvo();
|
||||
const { newConversation } = useConversation();
|
||||
const navigate = useOriginNavigate();
|
||||
const localize = useLocalize();
|
||||
|
||||
const { data: endpointsConfig } = useGetEndpointsQuery();
|
||||
const [convo] = useLocalStorage('lastConversationSetup', { endpoint: EModelEndpoint.openAI });
|
||||
const { endpoint } = convo;
|
||||
const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
|
||||
const iconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
|
||||
const iconKey = endpointType ? 'unknown' : endpoint ?? 'unknown';
|
||||
const Icon = icons[iconKey];
|
||||
|
||||
const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (event.button === 0 && !event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
|
|
@ -17,28 +42,40 @@ export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
href="/"
|
||||
data-testid="nav-new-chat-button"
|
||||
onClick={clickHandler}
|
||||
className="flex h-11 flex-shrink-0 flex-grow cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
{localize('com_ui_new_chat')}
|
||||
</a>
|
||||
<div className="sticky left-0 right-0 top-0 z-20 bg-black pt-3.5">
|
||||
<div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
|
||||
<a
|
||||
href="/"
|
||||
data-testid="nav-new-chat-button"
|
||||
onClick={clickHandler}
|
||||
className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-900"
|
||||
>
|
||||
<div className="h-7 w-7 flex-shrink-0">
|
||||
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
|
||||
{endpoint &&
|
||||
Icon &&
|
||||
Icon({
|
||||
size: 41,
|
||||
context: 'nav',
|
||||
className: 'h-2/3 w-2/3',
|
||||
endpoint: endpoint,
|
||||
iconURL: iconURL,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
|
||||
{localize('com_ui_new_chat')}
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<span className="flex items-center" data-state="closed">
|
||||
<button type="button" className="text-token-text-primary">
|
||||
<NewChatIcon className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{subHeaders ? subHeaders : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Search, X } from 'lucide-react';
|
|||
import { useSetRecoilState } from 'recoil';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
type SearchBarProps = {
|
||||
|
|
@ -43,7 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
|
|||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative flex w-full cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-black px-2 px-3 py-2 text-white transition-colors duration-200 hover:bg-gray-900 focus:bg-gray-900"
|
||||
>
|
||||
{<Search className="absolute left-3 h-4 w-4" />}
|
||||
<input
|
||||
|
|
@ -58,9 +59,10 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
|
|||
onKeyUp={handleKeyUp}
|
||||
/>
|
||||
<X
|
||||
className={`absolute right-3 h-5 w-5 cursor-pointer ${
|
||||
showClearIcon ? 'opacity-100' : 'opacity-0'
|
||||
} transition-opacity duration-1000`}
|
||||
className={cn(
|
||||
'absolute right-[7px] h-5 w-5 cursor-pointer transition-opacity duration-1000',
|
||||
showClearIcon ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
onClick={clearText}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue