🔖 fix: Agent Marketplace Bookmark and New Chat buttons (#9549)

* don't require conversation for bookmark button

* wrap marketplace component so it can correctly use context hooks

* chore: re-order import statement for MarketplaceProvider

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>

client/src/components/Agents/Marketplace.tsx

@@ -11,7 +11,6 @@ import { useDocumentTitle, useHasAccess, useLocalize, TranslationKeys } from '~/
 import { useGetEndpointsQuery, useGetAgentCategoriesQuery } from '~/data-provider';
 import MarketplaceAdminSettings from './MarketplaceAdminSettings';
 import { SidePanelProvider, useChatContext } from '~/Providers';
-import { MarketplaceProvider } from './MarketplaceContext';
 import { SidePanelGroup } from '~/components/SidePanel';
 import { OpenSidebar } from '~/components/Chat/Menus';
 import CategoryTabs from './CategoryTabs';
@@ -272,7 +271,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   }
   return (
     <div className={`relative flex w-full grow overflow-hidden bg-presentation ${className}`}>
-      <MarketplaceProvider>
       <SidePanelProvider>
         <SidePanelGroup
           defaultLayout={defaultLayout}
@@ -404,8 +402,7 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                             // Fallback for unknown categories
                             return {
                               name:
-                                  displayCategory.charAt(0).toUpperCase() +
+                                displayCategory.charAt(0).toUpperCase() + displayCategory.slice(1),
-                                  displayCategory.slice(1),
                               description: '',
                             };
                           };
@@ -475,9 +472,7 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                                     : categoryData.label,
                                   description: categoryData.description?.startsWith('com_')
                                     ? localize(
-                                          categoryData.description as Parameters<
+                                        categoryData.description as Parameters<typeof localize>[0],
-                                            typeof localize
-                                          >[0],
                                       )
                                     : categoryData.description || '',
                                 };
@@ -532,7 +527,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
           </main>
         </SidePanelGroup>
       </SidePanelProvider>
-      </MarketplaceProvider>
     </div>
   );
 };

client/src/components/Nav/Bookmarks/BookmarkNav.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import type { FC } from 'react';
-import { useRecoilValue } from 'recoil';
 import { TooltipAnchor } from '@librechat/client';
 import { Menu, MenuButton, MenuItems } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
@@ -9,7 +8,6 @@ import { useGetConversationTags } from '~/data-provider';
 import BookmarkNavItems from './BookmarkNavItems';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
-import store from '~/store';
 
 type BookmarkNavProps = {
   tags: string[];
@@ -20,7 +18,6 @@ type BookmarkNavProps = {
 const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: BookmarkNavProps) => {
   const localize = useLocalize();
   const { data } = useGetConversationTags();
-  const conversation = useRecoilValue(store.conversationByIndex(0));
   const label = useMemo(
     () => (tags.length > 0 ? tags.join(', ') : localize('com_ui_bookmarks')),
     [tags, localize],
@@ -56,11 +53,9 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
             anchor="bottom"
             className="absolute left-0 top-full z-[100] mt-1 w-60 translate-y-0 overflow-hidden rounded-lg bg-surface-secondary p-1.5 shadow-lg outline-none"
           >
-            {data && conversation && (
+            {data && (
               <BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}>
                 <BookmarkNavItems
-                  // Currently selected conversation
-                  conversation={conversation}
                   // List of selected tags(string)
                   tags={tags}
                   // When a user selects a tag, this `setTags` function is called to refetch the list of conversations for the selected tag

client/src/components/Nav/Bookmarks/BookmarkNavItems.tsx

@@ -1,25 +1,16 @@
-import { useEffect, useState, type FC } from 'react';
+import { type FC } from 'react';
 import { CrossCircledIcon } from '@radix-ui/react-icons';
-import type { TConversation } from 'librechat-data-provider';
 import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
 import { useLocalize } from '~/hooks';
 
 const BookmarkNavItems: FC<{
-  conversation: TConversation;
   tags: string[];
   setTags: (tags: string[]) => void;
-}> = ({ conversation, tags = [], setTags }) => {
+}> = ({ tags = [], setTags }) => {
-  const [currentConversation, setCurrentConversation] = useState<TConversation>();
   const { bookmarks } = useBookmarkContext();
   const localize = useLocalize();
 
-  useEffect(() => {
-    if (!currentConversation) {
-      setCurrentConversation(conversation);
-    }
-  }, [conversation, currentConversation]);
-
   const getUpdatedSelected = (tag: string) => {
     if (tags.some((selectedTag) => selectedTag === tag)) {
       return tags.filter((selectedTag) => selectedTag !== tag);

client/src/routes/index.tsx

@@ -8,6 +8,7 @@ import {
   TwoFactorScreen,
   RequestPasswordReset,
 } from '~/components/Auth';
+import { MarketplaceProvider } from '~/components/Agents/MarketplaceContext';
 import AgentMarketplace from '~/components/Agents/Marketplace';
 import { OAuthSuccess, OAuthError } from '~/components/OAuth';
 import { AuthContextProvider } from '~/hooks/AuthContext';
@@ -112,11 +113,19 @@ export const router = createBrowserRouter(
             },
             {
               path: 'agents',
-              element: <AgentMarketplace />,
+              element: (
+                <MarketplaceProvider>
+                  <AgentMarketplace />
+                </MarketplaceProvider>
+              ),
             },
             {
               path: 'agents/:category',
-              element: <AgentMarketplace />,
+              element: (
+                <MarketplaceProvider>
+                  <AgentMarketplace />
+                </MarketplaceProvider>
+              ),
             },
           ],
         },