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

♾️ style: Infinite Scroll Nav and Sort Convos by Date/Usage (#1708)

Browse source 
* 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 2024-02-03 20:25:35 -05:00 • committed by GitHub
parent 13b2d6e34a
commit 74459d6261
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 1788 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

89
client/src/components/Nav/NewChat.tsx
View file

@ -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>
);
}