mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-05 09:11:51 +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,6 +1,6 @@
|
|||
import { useOutletContext } from 'react-router-dom';
|
||||
import type { ContextType } from '~/common';
|
||||
import { EndpointsMenu, PresetsMenu, NewChat } from './Menus';
|
||||
import { EndpointsMenu, PresetsMenu, HeaderNewChat } from './Menus';
|
||||
import HeaderOptions from './Input/HeaderOptions';
|
||||
|
||||
export default function Header() {
|
||||
|
|
@ -8,7 +8,7 @@ export default function Header() {
|
|||
return (
|
||||
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white ">
|
||||
<div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
|
||||
{!navVisible && <NewChat />}
|
||||
{!navVisible && <HeaderNewChat />}
|
||||
<EndpointsMenu />
|
||||
<HeaderOptions />
|
||||
<PresetsMenu />
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import { getEndpointField } from '~/utils';
|
|||
import { useLocalize } from '~/hooks';
|
||||
|
||||
export default function Landing({ Header }: { Header?: ReactNode }) {
|
||||
const { data: endpointsConfig } = useGetEndpointsQuery();
|
||||
const { conversation } = useChatContext();
|
||||
const { data: endpointsConfig } = useGetEndpointsQuery();
|
||||
|
||||
const localize = useLocalize();
|
||||
let { endpoint } = conversation ?? {};
|
||||
if (
|
||||
|
|
|
|||
23
client/src/components/Chat/Menus/HeaderNewChat.tsx
Normal file
23
client/src/components/Chat/Menus/HeaderNewChat.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { NewChatIcon } from '~/components/svg';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import { useMediaQuery } from '~/hooks';
|
||||
|
||||
export default function HeaderNewChat() {
|
||||
const { newConversation } = useChatContext();
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
if (isSmallScreen) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
data-testid="wide-header-new-chat-button"
|
||||
type="button"
|
||||
className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
|
||||
onClick={() => newConversation()}
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
<NewChatIcon />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { useChatContext } from '~/Providers';
|
||||
import { useMediaQuery } from '~/hooks';
|
||||
|
||||
export default function NewChat() {
|
||||
const { newConversation } = useChatContext();
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
if (isSmallScreen) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
data-testid="wide-header-new-chat-button"
|
||||
type="button"
|
||||
className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
|
||||
onClick={() => newConversation()}
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-black dark:text-white"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
export { default as EndpointsMenu } from './EndpointsMenu';
|
||||
export { default as PresetsMenu } from './PresetsMenu';
|
||||
export { default as NewChat } from './NewChat';
|
||||
export { default as HeaderNewChat } from './HeaderNewChat';
|
||||
|
|
|
|||
22
client/src/components/Chat/SearchView.tsx
Normal file
22
client/src/components/Chat/SearchView.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { memo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import MessagesView from './Messages/MessagesView';
|
||||
import store from '~/store';
|
||||
|
||||
import Header from './Header';
|
||||
|
||||
function SearchView() {
|
||||
const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">
|
||||
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
|
||||
<div className="flex h-full flex-col" role="presentation" tabIndex={0}>
|
||||
<MessagesView messagesTree={searchResultMessagesTree} Header={<Header />} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(SearchView);
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState, useRef } from 'react';
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { useUpdateConversationMutation } from 'librechat-data-provider/react-query';
|
||||
import { useUpdateConversationMutation } from '~/data-provider';
|
||||
import { useConversations, useConversation } from '~/hooks';
|
||||
import { MinimalIcon } from '~/components/Endpoints';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import Convo from './Convo';
|
||||
import Conversation from './Conversation';
|
||||
import { useMemo } from 'react';
|
||||
import { parseISO, isToday } from 'date-fns';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { TConversation } from 'librechat-data-provider';
|
||||
import { groupConversationsByDate } from '~/utils';
|
||||
import Conversation from './Conversation';
|
||||
import Convo from './Convo';
|
||||
|
||||
export default function Conversations({
|
||||
conversations,
|
||||
|
|
@ -15,22 +18,50 @@ export default function Conversations({
|
|||
const location = useLocation();
|
||||
const { pathname } = location;
|
||||
const ConvoItem = pathname.includes('chat') ? Conversation : Convo;
|
||||
const groupedConversations = useMemo(
|
||||
() => groupConversationsByDate(conversations),
|
||||
[conversations],
|
||||
);
|
||||
const firstTodayConvoId = conversations.find((convo) =>
|
||||
isToday(parseISO(convo.updatedAt)),
|
||||
)?.conversationId;
|
||||
|
||||
return (
|
||||
<>
|
||||
{conversations &&
|
||||
conversations.length > 0 &&
|
||||
conversations.map((convo: TConversation, i) => {
|
||||
return (
|
||||
<ConvoItem
|
||||
key={convo.conversationId}
|
||||
conversation={convo}
|
||||
retainView={moveToTop}
|
||||
toggleNav={toggleNav}
|
||||
i={i}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
<div className="text-token-text-primary flex flex-col gap-2 pb-2 text-sm">
|
||||
<div>
|
||||
<span>
|
||||
{groupedConversations.map(([groupName, convos]) => (
|
||||
<div key={groupName}>
|
||||
<div
|
||||
style={{
|
||||
color: '#aaa',
|
||||
fontSize: '0.7rem',
|
||||
marginTop: '20px',
|
||||
marginBottom: '5px',
|
||||
paddingLeft: '10px',
|
||||
}}
|
||||
>
|
||||
{groupName}
|
||||
</div>
|
||||
{convos.map((convo, i) => (
|
||||
<ConvoItem
|
||||
key={`${groupName}-${convo.conversationId}-${i}`}
|
||||
isLatestConvo={convo.conversationId === firstTodayConvoId}
|
||||
conversation={convo}
|
||||
retainView={moveToTop}
|
||||
toggleNav={toggleNav}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
style={{
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useState, useRef } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import {
|
||||
useGetEndpointsQuery,
|
||||
useUpdateConversationMutation,
|
||||
} from 'librechat-data-provider/react-query';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
|
||||
import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
|
||||
import { useConversations, useNavigateToConvo } from '~/hooks';
|
||||
import { useUpdateConversationMutation } from '~/data-provider';
|
||||
import { MinimalIcon } from '~/components/Endpoints';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import { useToastContext } from '~/Providers';
|
||||
|
|
@ -18,7 +16,7 @@ import store from '~/store';
|
|||
|
||||
type KeyEvent = KeyboardEvent<HTMLInputElement>;
|
||||
|
||||
export default function Conversation({ conversation, retainView, toggleNav, i }) {
|
||||
export default function Conversation({ conversation, retainView, toggleNav, isLatestConvo }) {
|
||||
const { conversationId: currentConvoId } = useParams();
|
||||
const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
|
||||
const activeConvos = useRecoilValue(store.allConversationsSelector);
|
||||
|
|
@ -32,7 +30,13 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
|
|||
const [titleInput, setTitleInput] = useState(title);
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
|
||||
const clickHandler = async () => {
|
||||
const clickHandler = async (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (event.button === 0 && event.ctrlKey) {
|
||||
toggleNav();
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
if (currentConvoId === conversationId) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -109,22 +113,28 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
|
|||
|
||||
const aProps = {
|
||||
className:
|
||||
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-900 py-3 px-3 pr-14 hover:bg-gray-900',
|
||||
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-800 py-2 px-2',
|
||||
};
|
||||
|
||||
const activeConvo =
|
||||
currentConvoId === conversationId ||
|
||||
(i === 0 && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
|
||||
(isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
|
||||
|
||||
if (!activeConvo) {
|
||||
aProps.className =
|
||||
'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-900 hover:pr-4';
|
||||
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-900';
|
||||
}
|
||||
|
||||
return (
|
||||
<a data-testid="convo-item" onClick={() => clickHandler()} {...aProps} title={title}>
|
||||
<a
|
||||
href={`/c/${conversationId}`}
|
||||
data-testid="convo-item"
|
||||
onClick={clickHandler}
|
||||
{...aProps}
|
||||
title={title}
|
||||
>
|
||||
{icon}
|
||||
<div className="relative line-clamp-1 max-h-5 flex-1 text-ellipsis break-all">
|
||||
<div className="relative line-clamp-1 max-h-5 flex-1 grow overflow-hidden">
|
||||
{renaming === true ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
|
|
@ -139,6 +149,11 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
|
|||
title
|
||||
)}
|
||||
</div>
|
||||
{activeConvo ? (
|
||||
<div className="absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l from-gray-800 from-60% to-transparent"></div>
|
||||
) : (
|
||||
<div className="from--gray-900 absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
|
||||
)}
|
||||
{activeConvo ? (
|
||||
<div className="visible absolute right-1 z-10 flex text-gray-400">
|
||||
<RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} />
|
||||
|
|
@ -150,7 +165,7 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
|
|||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-black group-hover:from-gray-900" />
|
||||
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-black from-0% to-transparent group-hover:from-gray-900" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { useDeleteConversationMutation } from 'librechat-data-provider/react-query';
|
||||
import { useLocalize, useConversations, useConversation } from '~/hooks';
|
||||
import { useDeleteConversationMutation } from '~/data-provider';
|
||||
import { Dialog, DialogTrigger, Label } from '~/components/ui';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { TrashIcon, CrossIcon } from '~/components/svg';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { useDeleteConversationMutation } from 'librechat-data-provider/react-query';
|
||||
import { useLocalize, useConversations, useNewConvo } from '~/hooks';
|
||||
import { useDeleteConversationMutation } from '~/data-provider';
|
||||
import { Dialog, DialogTrigger, Label } from '~/components/ui';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { TrashIcon, CrossIcon } from '~/components/svg';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
26
client/src/components/svg/GoogleIconChat.tsx
Normal file
26
client/src/components/svg/GoogleIconChat.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { cn } from '~/utils/';
|
||||
|
||||
export default function Google({
|
||||
size = 25,
|
||||
className = '',
|
||||
}: {
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const unit = '41';
|
||||
const height = size;
|
||||
const width = size;
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 512 512"
|
||||
strokeWidth="1.5"
|
||||
className={cn(className, '')}
|
||||
>
|
||||
<path d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
20
client/src/components/svg/NewChatIcon.tsx
Normal file
20
client/src/components/svg/NewChatIcon.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { cn } from '~/utils';
|
||||
export default function NewChatIcon({ className = '' }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn('text-black dark:text-white', className)}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { cn } from '~/utils/';
|
|||
export default function Spinner({ className = 'm-auto' }) {
|
||||
return (
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
stroke="#ffffff"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -42,4 +42,6 @@ export { default as GoogleMinimalIcon } from './GoogleMinimalIcon';
|
|||
export { default as AnthropicMinimalIcon } from './AnthropicMinimalIcon';
|
||||
export { default as SendMessageIcon } from './SendMessageIcon';
|
||||
export { default as UserIcon } from './UserIcon';
|
||||
export { default as NewChatIcon } from './NewChatIcon';
|
||||
export { default as ExperimentIcon } from './ExperimentIcon';
|
||||
export { default as GoogleIconChat } from './GoogleIconChat';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue