mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 18: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,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';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue