mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 18:30:15 +01:00
74459d6261
* 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>
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
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,
|
|
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();
|
|
newConvo();
|
|
newConversation();
|
|
navigate('new');
|
|
toggleNav();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|