🔖 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>