diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx index b4d9bd25e7..ec49a5b155 100644 --- a/client/src/components/Conversations/Conversations.tsx +++ b/client/src/components/Conversations/Conversations.tsx @@ -2,13 +2,21 @@ import { useMemo, memo, type FC, useCallback, useEffect, useRef } from 'react'; import throttle from 'lodash/throttle'; import { ChevronDown } from 'lucide-react'; import { useRecoilValue } from 'recoil'; -import { Spinner, useMediaQuery } from '@librechat/client'; +import { useQueryClient } from '@tanstack/react-query'; +import { QueryKeys } from 'librechat-data-provider'; +import { Spinner, TooltipAnchor, NewChatIcon, useMediaQuery } from '@librechat/client'; import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized'; import type { TConversation } from 'librechat-data-provider'; -import { useLocalize, TranslationKeys, useFavorites, useShowMarketplace } from '~/hooks'; +import { + useLocalize, + TranslationKeys, + useFavorites, + useShowMarketplace, + useNewConvo, +} from '~/hooks'; import FavoritesList from '~/components/Nav/Favorites/FavoritesList'; import { useActiveJobs } from '~/data-provider'; -import { groupConversationsByDate, cn } from '~/utils'; +import { groupConversationsByDate, clearMessagesCache, cn } from '~/utils'; import Convo from './Convo'; import store from '~/store'; @@ -77,20 +85,53 @@ interface ChatsHeaderProps { onToggle: () => void; } +const headerIconButtonClassName = + 'flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-text-secondary outline-none transition-colors hover:bg-surface-active-alt hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white'; + /** Collapsible header for the Chats section */ const ChatsHeader: FC = memo(({ isExpanded, onToggle }) => { const localize = useLocalize(); + const queryClient = useQueryClient(); + const { newConversation } = useNewConvo(); + const conversation = useRecoilValue(store.conversationByIndex(0)); + + const handleNewChat = useCallback(() => { + clearMessagesCache(queryClient, conversation?.conversationId); + queryClient.invalidateQueries([QueryKeys.messages]); + newConversation(); + }, [conversation?.conversationId, newConversation, queryClient]); + return ( - + + + + } /> - + ); }); diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx index a911e3f27f..db07a9ade1 100644 --- a/client/src/components/Conversations/ProjectsSection.tsx +++ b/client/src/components/Conversations/ProjectsSection.tsx @@ -11,7 +11,6 @@ import { FolderPlus, LayoutGrid, Pencil, - Plus, Trash2, } from 'lucide-react'; import { QueryKeys } from 'librechat-data-provider'; @@ -27,6 +26,7 @@ import { OGDialogContent, TooltipAnchor, DropdownPopup, + NewChatIcon, useToastContext, } from '@librechat/client'; import type { MenuItemProps } from '~/common'; @@ -308,7 +308,7 @@ function ProjectItem({ return (
  • -
    +
    -
    +
    -