mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-13 05:58:51 +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>
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
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,
|
|
moveToTop,
|
|
toggleNav,
|
|
}: {
|
|
conversations: TConversation[];
|
|
moveToTop: () => void;
|
|
toggleNav: () => void;
|
|
}) {
|
|
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 (
|
|
<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>
|
|
);
|
|
}
|