🔖 feat: Enhance Bookmarks UX, add RBAC, toggle via librechat.yaml (#3747)

* chore: update package version to 0.7.416

* chore: Update Role.js imports order

* refactor: move updateTagsInConvo to tags route, add RBAC for tags

* refactor: add updateTagsInConvoOptions

* fix: loading state for bookmark form

* refactor: update primaryText class in TitleButton component

* refactor: remove duplicate bookmarks and theming

* refactor: update EditIcon component to use React.forwardRef

* refactor: add _id field to tConversationTagSchema

* refactor: remove promises

* refactor: move mutation logic from BookmarkForm -> BookmarkEditDialog

* refactor: update button class in BookmarkForm component

* fix: conversation mutations and add better logging to useConversationTagMutation

* refactor: update logger message in BookmarkEditDialog component

* refactor: improve UI consistency in BookmarkNav and NewChat components

* refactor: update logger message in BookmarkEditDialog component

* refactor: Add tags prop to BookmarkForm component

* refactor: Update BookmarkForm to avoid tag mutation if the tag already exists; also close dialog on submission programmatically

* refactor: general role helper function to support updating access permissions for different permission types

* refactor: Update getLatestText function to handle undefined values in message.content

* refactor: Update useHasAccess hook to handle null role values for authenticated users

* feat: toggle bookmarks access

* refactor: Update PromptsCommand to handle access permissions for prompts

* feat: updateConversationSelector

* refactor: rename `vars` to `tagToDelete` for clarity

* fix: prevent recreation of deleted tags in BookmarkMenu on Item Click

* ci: mock updateBookmarksAccess function

* ci: mock updateBookmarksAccess function

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

@@ -43,14 +43,16 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
             )}
             data-testid="bookmark-menu"
           >
-            <div className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 text-text-primary">
-              {tags.length > 0 ? (
-                <BookmarkFilledIcon className="h-5 w-5" />
-              ) : (
-                <BookmarkIcon className="h-5 w-5" />
-              )}
+            <div className="h-7 w-7 flex-shrink-0">
+              <div className="relative flex h-full items-center justify-center rounded-full border border-border-medium bg-surface-primary-alt text-text-primary">
+                {tags.length > 0 ? (
+                  <BookmarkFilledIcon className="h-4 w-4" />
+                ) : (
+                  <BookmarkIcon className="h-4 w-4" />
+                )}
+              </div>
             </div>
-            <div className="grow overflow-hidden whitespace-nowrap text-left text-sm text-text-primary">
+            <div className="grow overflow-hidden whitespace-nowrap text-left text-sm font-medium text-text-primary">
               {tags.length > 0 ? tags.join(', ') : localize('com_ui_bookmarks')}
             </div>
           </MenuButton>

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

@@ -9,7 +9,7 @@ const BookmarkNavItems: FC<{
   conversation: TConversation;
   tags: string[];
   setTags: (tags: string[]) => void;
-}> = ({ conversation, tags, setTags }) => {
+}> = ({ conversation, tags = [], setTags }) => {
   const [currentConversation, setCurrentConversation] = useState<TConversation>();
   const { bookmarks } = useBookmarkContext();
   const localize = useLocalize();
@@ -24,19 +24,22 @@ const BookmarkNavItems: FC<{
     if (tags.some((selectedTag) => selectedTag === tag)) {
       return tags.filter((selectedTag) => selectedTag !== tag);
     } else {
-      return [...(tags || []), tag];
+      return [...tags, tag];
     }
   };
 
-  const handleSubmit = (tag: string) => {
+  const handleSubmit = (tag?: string) => {
+    if (tag === undefined) {
+      return;
+    }
     const updatedSelected = getUpdatedSelected(tag);
     setTags(updatedSelected);
-    return Promise.resolve();
+    return;
   };
 
   const clear = () => {
     setTags([]);
-    return Promise.resolve();
+    return;
   };
 
   if (bookmarks.length === 0) {

client/src/components/Nav/Nav.tsx

@@ -1,15 +1,17 @@
 import { useCallback, useEffect, useState, useMemo, memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { ConversationListResponse } from 'librechat-data-provider';
 import {
+  useLocalize,
+  useHasAccess,
   useMediaQuery,
   useAuthContext,
   useConversation,
   useLocalStorage,
   useNavScrolling,
   useConversations,
-  useLocalize,
 } from '~/hooks';
 import { useConversationsInfiniteQuery } from '~/data-provider';
 import { TooltipProvider, Tooltip } from '~/components/ui';
@@ -41,6 +43,11 @@ const Nav = ({
   const [newUser, setNewUser] = useLocalStorage('newUser', true);
   const [isToggleHovering, setIsToggleHovering] = useState(false);
 
+  const hasAccessToBookmarks = useHasAccess({
+    permissionType: PermissionTypes.BOOKMARKS,
+    permission: Permissions.USE,
+  });
+
   const handleMouseEnter = useCallback(() => {
     setIsHovering(true);
   }, []);
@@ -128,7 +135,7 @@ const Nav = ({
         <div
           data-testid="nav"
           className={
-            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-850 md:max-w-[260px]'
+            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-surface-primary-alt md:max-w-[260px]'
           }
           style={{
             width: navVisible ? navWidth : '0px',
@@ -168,7 +175,9 @@ const Nav = ({
                           {isSearchEnabled === true && (
                             <SearchBar clearSearch={clearSearch} isSmallScreen={isSmallScreen} />
                           )}
-                          <BookmarkNav tags={tags} setTags={setTags} />
+                          {hasAccessToBookmarks === true && (
+                            <BookmarkNav tags={tags} setTags={setTags} />
+                          )}
                         </div>
                       ) : (
                         <NewChat
@@ -181,7 +190,9 @@ const Nav = ({
                                   isSmallScreen={isSmallScreen}
                                 />
                               )}
-                              <BookmarkNav tags={tags} setTags={setTags} />
+                              {hasAccessToBookmarks === true && (
+                                <BookmarkNav tags={tags} setTags={setTags} />
+                              )}
                             </>
                           }
                         />

client/src/components/Nav/NewChat.tsx

@@ -114,7 +114,7 @@ export default function NewChat({
               </div>
             </a>
           </div>
-          {subHeaders ? subHeaders : null}
+          {subHeaders != null ? subHeaders : null}
         </div>
       </Tooltip>
     </TooltipProvider>