🔖 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/Bookmarks/BookmarkEditDialog.tsx

@@ -1,12 +1,17 @@
-import React, { useRef, useState, Dispatch, SetStateAction } from 'react';
+import React, { useRef, Dispatch, SetStateAction } from 'react';
 import { TConversationTag, TConversation } from 'librechat-data-provider';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { OGDialog, OGDialogClose } from '~/components/ui/';
+import { useConversationTagMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { OGDialog } from '~/components/ui';
+import { Spinner } from '~/components/svg';
 import BookmarkForm from './BookmarkForm';
 import { useLocalize } from '~/hooks';
-import { Spinner } from '../svg';
+import { logger } from '~/utils';
 
 type BookmarkEditDialogProps = {
+  context: string;
   bookmark?: TConversationTag;
   conversation?: TConversation;
   tags?: string[];
@@ -16,6 +21,7 @@ type BookmarkEditDialogProps = {
 };
 
 const BookmarkEditDialog = ({
+  context,
   bookmark,
   conversation,
   tags,
@@ -24,9 +30,40 @@ const BookmarkEditDialog = ({
   setOpen,
 }: BookmarkEditDialogProps) => {
   const localize = useLocalize();
-  const [isLoading, setIsLoading] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
 
+  const { showToast } = useToastContext();
+  const mutation = useConversationTagMutation({
+    context,
+    tag: bookmark?.tag,
+    options: {
+      onSuccess: (_data, vars) => {
+        showToast({
+          message: bookmark
+            ? localize('com_ui_bookmarks_update_success')
+            : localize('com_ui_bookmarks_create_success'),
+        });
+        setOpen(false);
+        logger.log('tag_mutation', 'tags before setting', tags);
+        if (setTags && vars.addToConversation === true) {
+          const newTags = [...(tags || []), vars.tag].filter(
+            (tag) => tag !== undefined,
+          ) as string[];
+          setTags(newTags);
+          logger.log('tag_mutation', 'tags after', newTags);
+        }
+      },
+      onError: () => {
+        showToast({
+          message: bookmark
+            ? localize('com_ui_bookmarks_update_error')
+            : localize('com_ui_bookmarks_create_error'),
+          severity: NotificationSeverity.ERROR,
+        });
+      },
+    },
+  });
+
   const handleSubmitForm = () => {
     if (formRef.current) {
       formRef.current.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
@@ -40,26 +77,23 @@ const BookmarkEditDialog = ({
         showCloseButton={false}
         main={
           <BookmarkForm
+            tags={tags}
+            setOpen={setOpen}
+            mutation={mutation}
             conversation={conversation}
-            onOpenChange={setOpen}
-            setIsLoading={setIsLoading}
             bookmark={bookmark}
             formRef={formRef}
-            setTags={setTags}
-            tags={tags}
           />
         }
         buttons={
-          <OGDialogClose asChild>
-            <button
-              type="submit"
-              disabled={isLoading}
-              onClick={handleSubmitForm}
-              className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
-            >
-              {isLoading ? <Spinner /> : localize('com_ui_save')}
-            </button>
-          </OGDialogClose>
+          <button
+            type="submit"
+            disabled={mutation.isLoading}
+            onClick={handleSubmitForm}
+            className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+          >
+            {mutation.isLoading ? <Spinner /> : localize('com_ui_save')}
+          </button>
         }
       />
     </OGDialog>

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -1,41 +1,39 @@
 import React, { useEffect } from 'react';
+import { QueryKeys } from 'librechat-data-provider';
 import { Controller, useForm } from 'react-hook-form';
+import { useQueryClient } from '@tanstack/react-query';
 import type {
-  TConversationTag,
   TConversation,
+  TConversationTag,
   TConversationTagRequest,
 } from 'librechat-data-provider';
-import { cn, removeFocusOutlines, defaultTextProps } from '~/utils/';
+import { cn, removeFocusOutlines, defaultTextProps, logger } from '~/utils';
+import { Checkbox, Label, TextareaAutosize } from '~/components/ui';
 import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import { useConversationTagMutation } from '~/data-provider';
-import { Checkbox, Label, TextareaAutosize } from '~/components/ui/';
-import { useLocalize, useBookmarkSuccess } from '~/hooks';
-import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
 
 type TBookmarkFormProps = {
+  tags?: string[];
   bookmark?: TConversationTag;
   conversation?: TConversation;
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
   formRef: React.RefObject<HTMLFormElement>;
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
-  tags?: string[];
-  setTags?: (tags: string[]) => void;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  mutation: ReturnType<typeof useConversationTagMutation>;
 };
 const BookmarkForm = ({
-  bookmark,
-  conversation,
-  onOpenChange,
-  formRef,
-  setIsLoading,
   tags,
-  setTags,
+  bookmark,
+  mutation,
+  conversation,
+  setOpen,
+  formRef,
 }: TBookmarkFormProps) => {
   const localize = useLocalize();
+  const queryClient = useQueryClient();
   const { showToast } = useToastContext();
   const { bookmarks } = useBookmarkContext();
-  const mutation = useConversationTagMutation(bookmark?.tag);
-  const onSuccess = useBookmarkSuccess(conversation?.conversationId || '');
 
   const {
     register,
@@ -46,56 +44,47 @@ const BookmarkForm = ({
     formState: { errors },
   } = useForm<TConversationTagRequest>({
     defaultValues: {
-      tag: bookmark?.tag || '',
-      description: bookmark?.description || '',
-      conversationId: conversation?.conversationId || '',
+      tag: bookmark?.tag ?? '',
+      description: bookmark?.description ?? '',
+      conversationId: conversation?.conversationId ?? '',
       addToConversation: conversation ? true : false,
     },
   });
 
   useEffect(() => {
-    if (bookmark) {
-      setValue('tag', bookmark.tag || '');
-      setValue('description', bookmark.description || '');
+    if (bookmark && bookmark.tag) {
+      setValue('tag', bookmark.tag);
+      setValue('description', bookmark.description ?? '');
     }
   }, [bookmark, setValue]);
 
   const onSubmit = (data: TConversationTagRequest) => {
+    logger.log('tag_mutation', 'BookmarkForm - onSubmit: data', data);
     if (mutation.isLoading) {
       return;
     }
     if (data.tag === bookmark?.tag && data.description === bookmark?.description) {
       return;
     }
+    if (data.tag != null && (tags ?? []).includes(data.tag)) {
+      showToast({
+        message: localize('com_ui_bookmarks_create_exists'),
+        status: 'warning',
+      });
+      return;
+    }
+    const allTags =
+      queryClient.getQueryData<TConversationTag[]>([QueryKeys.conversationTags]) ?? [];
+    if (allTags.some((tag) => tag.tag === data.tag)) {
+      showToast({
+        message: localize('com_ui_bookmarks_create_exists'),
+        status: 'warning',
+      });
+      return;
+    }
 
-    setIsLoading(true);
-    mutation.mutate(data, {
-      onSuccess: () => {
-        showToast({
-          message: bookmark
-            ? localize('com_ui_bookmarks_update_success')
-            : localize('com_ui_bookmarks_create_success'),
-        });
-        setIsLoading(false);
-        onOpenChange(false);
-        if (setTags && data.addToConversation) {
-          const newTags = [...(tags || []), data.tag].filter(
-            (tag) => tag !== undefined,
-          ) as string[];
-          setTags(newTags);
-          onSuccess(newTags);
-        }
-      },
-      onError: () => {
-        showToast({
-          message: bookmark
-            ? localize('com_ui_bookmarks_update_error')
-            : localize('com_ui_bookmarks_create_error'),
-          severity: NotificationSeverity.ERROR,
-        });
-        setIsLoading(false);
-      },
-    });
+    mutation.mutate(data);
+    setOpen(false);
   };
 
   return (
@@ -175,10 +164,11 @@ const BookmarkForm = ({
               )}
             />
             <button
+              type="button"
               aria-label={localize('com_ui_bookmarks_add_to_conversation')}
-              className="form-check-label text-token-text-primary w-full cursor-pointer"
+              className="form-check-label w-full cursor-pointer text-text-primary"
               onClick={() =>
-                setValue('addToConversation', !getValues('addToConversation'), {
+                setValue('addToConversation', !(getValues('addToConversation') ?? false), {
                   shouldDirty: true,
                 })
               }

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -9,7 +9,7 @@ type MenuItemProps = {
   tag: string | React.ReactNode;
   selected: boolean;
   count?: number;
-  handleSubmit: (tag?: string) => Promise<void>;
+  handleSubmit: (tag?: string) => void;
   icon?: React.ReactNode;
 };
 
@@ -17,12 +17,12 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
   const [isLoading, setIsLoading] = useState(false);
   const clickHandler = async () => {
     if (tag === 'New Bookmark') {
-      await handleSubmit();
+      handleSubmit();
       return;
     }
 
     setIsLoading(true);
-    await handleSubmit(tag as string);
+    handleSubmit(tag as string);
     setIsLoading(false);
   };
 
@@ -32,7 +32,7 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
   };
 
   const renderIcon = () => {
-    if (icon) {
+    if (icon != null) {
       return icon;
     }
     if (isLoading) {

client/src/components/Bookmarks/BookmarkItems.tsx

@@ -3,7 +3,7 @@ import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import BookmarkItem from './BookmarkItem';
 interface BookmarkItemsProps {
   tags: string[];
-  handleSubmit: (tag?: string) => Promise<void>;
+  handleSubmit: (tag?: string) => void;
   header: React.ReactNode;
 }
 
@@ -14,9 +14,9 @@ const BookmarkItems: FC<BookmarkItemsProps> = ({ tags, handleSubmit, header }) =
     <>
       {header}
       {bookmarks.length > 0 && <div className="my-1.5 h-px" role="none" />}
-      {bookmarks.map((bookmark) => (
+      {bookmarks.map((bookmark, i) => (
         <BookmarkItem
-          key={bookmark.tag}
+          key={`${bookmark._id ?? bookmark.tag}-${i}`}
           tag={bookmark.tag}
           selected={tags.includes(bookmark.tag)}
           handleSubmit={handleSubmit}

client/src/components/Bookmarks/EditBookmarkButton.tsx

@@ -17,7 +17,12 @@ const EditBookmarkButton: FC<{
 
   return (
     <>
-      <BookmarkEditDialog bookmark={bookmark} open={open} setOpen={setOpen} />
+      <BookmarkEditDialog
+        context="EditBookmarkButton"
+        bookmark={bookmark}
+        open={open}
+        setOpen={setOpen}
+      />
       <button
         type="button"
         className="transition-color flex size-7 items-center justify-center rounded-lg duration-200 hover:bg-surface-hover"