🔖 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
2025-12-17 00:40:14 +01:00 · 2024-08-22 17:09:05 -04:00 · 2024-08-22 17:09:05 -04:00 · f86e9dd04c
commit f86e9dd04c
parent 366e4c5adb
39 changed files with 530 additions and 298 deletions
--- a/api/models/Role.js
+++ b/api/models/Role.js
@ -1,10 +1,11 @@
 const {
-  SystemRoles,
  CacheKeys,
+  SystemRoles,
  roleDefaults,
  PermissionTypes,
-  Permissions,
+  removeNullishValues,
  promptPermissionsSchema,
+  bookmarkPermissionsSchema,
 } = require('librechat-data-provider');
 const getLogStores = require('~/cache/getLogStores');
 const Role = require('~/models/schema/roleSchema');
@ -69,37 +70,52 @@ const updateRoleByName = async function (roleName, updates) {
  }
 };

+const permissionSchemas = {
+  [PermissionTypes.PROMPTS]: promptPermissionsSchema,
+  [PermissionTypes.BOOKMARKS]: bookmarkPermissionsSchema,
+};
+
 /**
- * Updates the Prompt access for a specific role.
- * @param {SystemRoles} roleName - The role to update the prompt access for.
- * @param {boolean | undefined} [value] - The new value for the prompt access.
+ * Updates access permissions for a specific role and permission type.
+ * @param {SystemRoles} roleName - The role to update.
+ * @param {PermissionTypes} permissionType - The type of permission to update.
+ * @param {Object.<Permissions, boolean>} permissions - Permissions to update and their values.
 */
-async function updatePromptsAccess(roleName, value) {
-  if (typeof value === 'undefined') {
+async function updateAccessPermissions(roleName, permissionType, _permissions) {
+  const permissions = removeNullishValues(_permissions);
+  if (Object.keys(permissions).length === 0) {
    return;
  }

  try {
-    const parsedUpdates = promptPermissionsSchema.partial().parse({ [Permissions.USE]: value });
    const role = await getRoleByName(roleName);
-    if (!role) {
+    if (!role || !permissionSchemas[permissionType]) {
      return;
    }

-    const mergedUpdates = {
-      [PermissionTypes.PROMPTS]: {
-        ...role[PermissionTypes.PROMPTS],
-        ...parsedUpdates,
+    await updateRoleByName(roleName, {
+      [permissionType]: {
+        ...role[permissionType],
+        ...permissionSchemas[permissionType].partial().parse(permissions),
      },
-    };
+    });

-    await updateRoleByName(roleName, mergedUpdates);
-    logger.info(`Updated '${roleName}' role prompts 'USE' permission to: ${value}`);
+    Object.entries(permissions).forEach(([permission, value]) =>
+      logger.info(
+        `Updated '${roleName}' role ${permissionType} '${permission}' permission to: ${value}`,
+      ),
+    );
  } catch (error) {
-    logger.error('Failed to update USER role prompts USE permission:', error);
+    logger.error(`Failed to update ${roleName} role ${permissionType} permissions:`, error);
  }
 }

+const updatePromptsAccess = (roleName, permissions) =>
+  updateAccessPermissions(roleName, PermissionTypes.PROMPTS, permissions);
+
+const updateBookmarksAccess = (roleName, permissions) =>
+  updateAccessPermissions(roleName, PermissionTypes.BOOKMARKS, permissions);
+
 /**
 * Initialize default roles in the system.
 * Creates the default roles (ADMIN, USER) if they don't exist in the database.
@ -123,4 +139,5 @@ module.exports = {
  initializeRoles,
  updateRoleByName,
  updatePromptsAccess,
+  updateBookmarksAccess,
 };
--- a/api/models/schema/roleSchema.js
+++ b/api/models/schema/roleSchema.js
@ -8,6 +8,12 @@ const roleSchema = new mongoose.Schema({
    unique: true,
    index: true,
  },
+  [PermissionTypes.BOOKMARKS]: {
+    [Permissions.USE]: {
+      type: Boolean,
+      default: true,
+    },
+  },
  [PermissionTypes.PROMPTS]: {
    [Permissions.SHARED_GLOBAL]: {
      type: Boolean,
--- a/api/server/routes/convos.js
+++ b/api/server/routes/convos.js
@ -8,7 +8,6 @@ const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
 const { forkConversation } = require('~/server/utils/import/fork');
 const { importConversations } = require('~/server/utils/import');
 const { createImportLimiters } = require('~/server/middleware');
-const { updateTagsForConversation } = require('~/models/ConversationTag');
 const getLogStores = require('~/cache/getLogStores');
 const { sleep } = require('~/server/utils');
 const { logger } = require('~/config');
@ -174,18 +173,4 @@ router.post('/fork', async (req, res) => {
  }
 });

-router.put('/tags/:conversationId', async (req, res) => {
-  try {
-    const conversationTags = await updateTagsForConversation(
-      req.user.id,
-      req.params.conversationId,
-      req.body.tags,
-    );
-    res.status(200).json(conversationTags);
-  } catch (error) {
-    logger.error('Error updating conversation tags', error);
-    res.status(500).send('Error updating conversation tags');
-  }
-});
-
 module.exports = router;
--- a/api/server/routes/tags.js
+++ b/api/server/routes/tags.js
@ -1,13 +1,21 @@
 const express = require('express');
+const { PermissionTypes, Permissions } = require('librechat-data-provider');
 const {
  getConversationTags,
  updateConversationTag,
  createConversationTag,
  deleteConversationTag,
+  updateTagsForConversation,
 } = require('~/models/ConversationTag');
-const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
+const { requireJwtAuth, generateCheckAccess } = require('~/server/middleware');
+const { logger } = require('~/config');
+
 const router = express.Router();
+
+const checkBookmarkAccess = generateCheckAccess(PermissionTypes.BOOKMARKS, [Permissions.USE]);
+
 router.use(requireJwtAuth);
+router.use(checkBookmarkAccess);

 /**
 * GET /
@ -24,7 +32,7 @@ router.get('/', async (req, res) => {
      res.status(404).end();
    }
  } catch (error) {
-    console.error('Error getting conversation tags:', error);
+    logger.error('Error getting conversation tags:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
 });
@ -40,7 +48,7 @@ router.post('/', async (req, res) => {
    const tag = await createConversationTag(req.user.id, req.body);
    res.status(200).json(tag);
  } catch (error) {
-    console.error('Error creating conversation tag:', error);
+    logger.error('Error creating conversation tag:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
 });
@ -60,7 +68,7 @@ router.put('/:tag', async (req, res) => {
      res.status(404).json({ error: 'Tag not found' });
    }
  } catch (error) {
-    console.error('Error updating conversation tag:', error);
+    logger.error('Error updating conversation tag:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
 });
@ -80,9 +88,29 @@ router.delete('/:tag', async (req, res) => {
      res.status(404).json({ error: 'Tag not found' });
    }
  } catch (error) {
-    console.error('Error deleting conversation tag:', error);
+    logger.error('Error deleting conversation tag:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
 });

+/**
+ * PUT /convo/:conversationId
+ * Updates the tags for a conversation.
+ * @param {Object} req - Express request object
+ * @param {Object} res - Express response object
+ */
+router.put('/convo/:conversationId', async (req, res) => {
+  try {
+    const conversationTags = await updateTagsForConversation(
+      req.user.id,
+      req.params.conversationId,
+      req.body.tags,
+    );
+    res.status(200).json(conversationTags);
+  } catch (error) {
+    logger.error('Error updating conversation tags', error);
+    res.status(500).send('Error updating conversation tags');
+  }
+});
+
 module.exports = router;
--- a/api/server/services/AppService.spec.js
+++ b/api/server/services/AppService.spec.js
@ -24,6 +24,7 @@ jest.mock('./Files/Firebase/initialize', () => ({
 jest.mock('~/models/Role', () => ({
  initializeRoles: jest.fn(),
  updatePromptsAccess: jest.fn(),
+  updateBookmarksAccess: jest.fn(),
 }));
 jest.mock('./ToolService', () => ({
  loadAndFormatTools: jest.fn().mockReturnValue({
--- a/api/server/services/start/interface.js
+++ b/api/server/services/start/interface.js
@ -1,5 +1,5 @@
-const { SystemRoles, removeNullishValues } = require('librechat-data-provider');
-const { updatePromptsAccess } = require('~/models/Role');
+const { SystemRoles, Permissions, removeNullishValues } = require('librechat-data-provider');
+const { updatePromptsAccess, updateBookmarksAccess } = require('~/models/Role');
 const { logger } = require('~/config');

 /**
@ -24,10 +24,12 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
    sidePanel: interfaceConfig?.sidePanel ?? defaults.sidePanel,
    privacyPolicy: interfaceConfig?.privacyPolicy ?? defaults.privacyPolicy,
    termsOfService: interfaceConfig?.termsOfService ?? defaults.termsOfService,
+    bookmarks: interfaceConfig?.bookmarks ?? defaults.bookmarks,
    prompts: interfaceConfig?.prompts ?? defaults.prompts,
  });

-  await updatePromptsAccess(roleName, loadedInterface.prompts);
+  await updatePromptsAccess(roleName, { [Permissions.USE]: loadedInterface.prompts });
+  await updateBookmarksAccess(roleName, { [Permissions.USE]: loadedInterface.bookmarks });

  let i = 0;
  const logSettings = () => {
--- a/api/server/services/start/interface.spec.js
+++ b/api/server/services/start/interface.spec.js
@ -1,9 +1,10 @@
-const { SystemRoles } = require('librechat-data-provider');
+const { SystemRoles, Permissions } = require('librechat-data-provider');
 const { updatePromptsAccess } = require('~/models/Role');
 const { loadDefaultInterface } = require('./interface');

 jest.mock('~/models/Role', () => ({
  updatePromptsAccess: jest.fn(),
+  updateBookmarksAccess: jest.fn(),
 }));

 describe('loadDefaultInterface', () => {
@ -13,7 +14,7 @@ describe('loadDefaultInterface', () => {

    await loadDefaultInterface(config, configDefaults);

-    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, true);
+    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, { [Permissions.USE]: true });
  });

  it('should call updatePromptsAccess with false when prompts is false', async () => {
@ -22,7 +23,9 @@ describe('loadDefaultInterface', () => {

    await loadDefaultInterface(config, configDefaults);

-    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, false);
+    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, {
+      [Permissions.USE]: false,
+    });
  });

  it('should call updatePromptsAccess with undefined when prompts is not specified in config', async () => {
@ -31,7 +34,9 @@ describe('loadDefaultInterface', () => {

    await loadDefaultInterface(config, configDefaults);

-    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, undefined);
+    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, {
+      [Permissions.USE]: undefined,
+    });
  });

  it('should call updatePromptsAccess with undefined when prompts is explicitly undefined', async () => {
@ -40,6 +45,8 @@ describe('loadDefaultInterface', () => {

    await loadDefaultInterface(config, configDefaults);

-    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, undefined);
+    expect(updatePromptsAccess).toHaveBeenCalledWith(SystemRoles.USER, {
+      [Permissions.USE]: undefined,
+    });
  });
 });
--- a/client/src/components/Bookmarks/BookmarkEditDialog.tsx
+++ b/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}
+            disabled={mutation.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')}
+            {mutation.isLoading ? <Spinner /> : localize('com_ui_save')}
          </button>
-          </OGDialogClose>
        }
      />
    </OGDialog>
--- a/client/src/components/Bookmarks/BookmarkForm.tsx
+++ b/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;
    }
-
-    setIsLoading(true);
-    mutation.mutate(data, {
-      onSuccess: () => {
+    if (data.tag != null && (tags ?? []).includes(data.tag)) {
      showToast({
-          message: bookmark
-            ? localize('com_ui_bookmarks_update_success')
-            : localize('com_ui_bookmarks_create_success'),
+        message: localize('com_ui_bookmarks_create_exists'),
+        status: 'warning',
      });
-        setIsLoading(false);
-        onOpenChange(false);
-        if (setTags && data.addToConversation) {
-          const newTags = [...(tags || []), data.tag].filter(
-            (tag) => tag !== undefined,
-          ) as string[];
-          setTags(newTags);
-          onSuccess(newTags);
+      return;
    }
-      },
-      onError: () => {
+    const allTags =
+      queryClient.getQueryData<TConversationTag[]>([QueryKeys.conversationTags]) ?? [];
+    if (allTags.some((tag) => tag.tag === data.tag)) {
      showToast({
-          message: bookmark
-            ? localize('com_ui_bookmarks_update_error')
-            : localize('com_ui_bookmarks_create_error'),
-          severity: NotificationSeverity.ERROR,
-        });
-        setIsLoading(false);
-      },
+        message: localize('com_ui_bookmarks_create_exists'),
+        status: 'warning',
      });
+      return;
+    }
+
+    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,
                })
              }
--- a/client/src/components/Bookmarks/BookmarkItem.tsx
+++ b/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) {
--- a/client/src/components/Bookmarks/BookmarkItems.tsx
+++ b/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}
--- a/client/src/components/Bookmarks/EditBookmarkButton.tsx
+++ b/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"
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { getConfigDefaults } from 'librechat-data-provider';
+import { getConfigDefaults, PermissionTypes, Permissions } from 'librechat-data-provider';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { ContextType } from '~/common';
 import { EndpointsMenu, ModelSpecsMenu, PresetsMenu, HeaderNewChat } from './Menus';
 import ExportAndShareMenu from './ExportAndShareMenu';
+import { useMediaQuery, useHasAccess } from '~/hooks';
 import HeaderOptions from './Input/HeaderOptions';
 import BookmarkMenu from './Menus/BookmarkMenu';
 import AddMultiConvo from './AddMultiConvo';
-import { useMediaQuery } from '~/hooks';

 const defaultInterface = getConfigDefaults().interface;

@ -21,6 +21,11 @@ export default function Header() {
    [startupConfig],
  );

+  const hasAccessToBookmarks = useHasAccess({
+    permissionType: PermissionTypes.BOOKMARKS,
+    permission: Permissions.USE,
+  });
+
  const isSmallScreen = useMediaQuery('(max-width: 768px)');

  return (
@ -28,11 +33,11 @@ export default function Header() {
      <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
        <div className="flex items-center gap-2">
          {!navVisible && <HeaderNewChat />}
-          {interfaceConfig.endpointsMenu && <EndpointsMenu />}
+          {interfaceConfig.endpointsMenu === true && <EndpointsMenu />}
          {modelSpecs.length > 0 && <ModelSpecsMenu modelSpecs={modelSpecs} />}
          {<HeaderOptions interfaceConfig={interfaceConfig} />}
-          {interfaceConfig.presets && <PresetsMenu />}
-          <BookmarkMenu />
+          {interfaceConfig.presets === true && <PresetsMenu />}
+          {hasAccessToBookmarks === true && <BookmarkMenu />}
          <AddMultiConvo />
          {isSmallScreen && (
            <ExportAndShareMenu
--- a/client/src/components/Chat/Input/PromptsCommand.tsx
+++ b/client/src/components/Chat/Input/PromptsCommand.tsx
@ -1,12 +1,13 @@
-import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { useState, useRef, useEffect, useMemo, memo, useCallback } from 'react';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { TPromptGroup } from 'librechat-data-provider';
 import type { PromptOption } from '~/common';
 import { removeCharIfLast, mapPromptGroups, detectVariables } from '~/utils';
 import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
 import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
+import { useLocalize, useCombobox, useHasAccess } from '~/hooks';
 import { useGetAllPromptGroups } from '~/data-provider';
-import { useLocalize, useCombobox } from '~/hooks';
 import { Spinner } from '~/components/svg';
 import MentionItem from './MentionItem';
 import store from '~/store';
@ -51,8 +52,13 @@ function PromptsCommand({
  submitPrompt: (textPrompt: string) => void;
 }) {
  const localize = useLocalize();
+  const hasAccess = useHasAccess({
+    permissionType: PermissionTypes.PROMPTS,
+    permission: Permissions.USE,
+  });

  const { data, isLoading } = useGetAllPromptGroups(undefined, {
+    enabled: hasAccess,
    select: (data) => {
      const mappedArray = data.map((group) => ({
        id: group._id,
@ -144,6 +150,10 @@ function PromptsCommand({
    currentActiveItem?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
  }, [activeIndex]);

+  if (!hasAccess) {
+    return null;
+  }
+
  return (
    <PopoverContainer
      index={index}
--- a/client/src/components/Chat/Menus/BookmarkMenu.tsx
+++ b/client/src/components/Chat/Menus/BookmarkMenu.tsx
@ -1,8 +1,10 @@
 import { useState, type FC, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
-import { Constants } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { Constants, QueryKeys } from 'librechat-data-provider';
 import { Menu, MenuButton, MenuItems } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
+import type { TConversationTag } from 'librechat-data-provider';
 import { useConversationTagsQuery, useTagConversationMutation } from '~/data-provider';
 import { BookmarkMenuItems } from './Bookmarks/BookmarkMenuItems';
 import { BookmarkContext } from '~/Providers/BookmarkContext';
@ -11,19 +13,32 @@ import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
 import { useBookmarkSuccess } from '~/hooks';
 import { Spinner } from '~/components';
-import { cn } from '~/utils';
+import { cn, logger } from '~/utils';
 import store from '~/store';

 const BookmarkMenu: FC = () => {
+  const queryClient = useQueryClient();
  const { showToast } = useToastContext();

  const conversation = useRecoilValue(store.conversationByIndex(0)) || undefined;
  const conversationId = conversation?.conversationId ?? '';
-  const onSuccess = useBookmarkSuccess(conversationId);
-  const [tags, setTags] = useState<string[]>(conversation?.tags || []);
-  const [open, setOpen] = useState(false);
+  const updateConvoTags = useBookmarkSuccess(conversationId);

-  const { mutateAsync, isLoading } = useTagConversationMutation(conversationId);
+  const [open, setOpen] = useState(false);
+  const [tags, setTags] = useState<string[]>(conversation?.tags || []);
+
+  const mutation = useTagConversationMutation(conversationId, {
+    onSuccess: (newTags: string[]) => {
+      setTags(newTags);
+      updateConvoTags(newTags);
+    },
+    onError: () => {
+      showToast({
+        message: 'Error adding bookmark',
+        severity: NotificationSeverity.ERROR,
+      });
+    },
+  });

  const { data } = useConversationTagsQuery();

@ -35,7 +50,7 @@ const BookmarkMenu: FC = () => {
  );

  const handleSubmit = useCallback(
-    async (tag?: string): Promise<void> => {
+    (tag?: string) => {
      if (tag === undefined || tag === '' || !conversationId) {
        showToast({
          message: 'Invalid tag or conversationId',
@ -44,34 +59,29 @@ const BookmarkMenu: FC = () => {
        return;
      }

-      const newTags = tags.includes(tag) ? tags.filter((t) => t !== tag) : [...tags, tag];
-      await mutateAsync(
-        {
+      logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags before setting', tags);
+      const allTags =
+        queryClient.getQueryData<TConversationTag[]>([QueryKeys.conversationTags]) ?? [];
+      const existingTags = allTags.map((t) => t.tag);
+      const filteredTags = tags.filter((t) => existingTags.includes(t));
+      logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags after filtering', filteredTags);
+      const newTags = filteredTags.includes(tag)
+        ? filteredTags.filter((t) => t !== tag)
+        : [...filteredTags, tag];
+      logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags after', newTags);
+      mutation.mutate({
        tags: newTags,
-        },
-        {
-          onSuccess: (newTags: string[]) => {
-            setTags(newTags);
-            onSuccess(newTags);
-          },
-          onError: () => {
-            showToast({
-              message: 'Error adding bookmark',
-              severity: NotificationSeverity.ERROR,
      });
    },
-        },
-      );
-    },
-    [tags, conversationId, mutateAsync, setTags, onSuccess, showToast],
+    [tags, conversationId, mutation, queryClient, showToast],
  );

  if (!isActiveConvo) {
-    return <></>;
+    return null;
  }

  const renderButtonContent = () => {
-    if (isLoading) {
+    if (mutation.isLoading) {
      return <Spinner aria-label="Spinner" />;
    }
    if (tags.length > 0) {
@ -80,10 +90,7 @@ const BookmarkMenu: FC = () => {
    return <BookmarkIcon className="icon-sm" aria-label="Bookmark" />;
  };

-  const handleToggleOpen = () => {
-    setOpen(!open);
-    return Promise.resolve();
-  };
+  const handleToggleOpen = () => setOpen(!open);

  return (
    <>
@ -116,6 +123,7 @@ const BookmarkMenu: FC = () => {
        )}
      </Menu>
      <BookmarkEditDialog
+        context="BookmarkMenu - BookmarkEditDialog"
        conversation={conversation}
        tags={tags}
        setTags={setTags}
--- a/client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx
+++ b/client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx
@ -6,8 +6,8 @@ import { useLocalize } from '~/hooks';

 export const BookmarkMenuItems: FC<{
  tags: string[];
-  handleToggleOpen?: () => Promise<void>;
-  handleSubmit: (tag?: string) => Promise<void>;
+  handleToggleOpen?: () => void;
+  handleSubmit: (tag?: string) => void;
 }> = ({
  tags,
  handleSubmit,
--- a/client/src/components/Chat/Menus/UI/TitleButton.tsx
+++ b/client/src/components/Chat/Menus/UI/TitleButton.tsx
@ -16,7 +16,7 @@ export default function TitleButton({ primaryText = '', secondaryText = '' }) {
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div>
-          <span className="text-token-text-secondary"> {primaryText} </span>
+          <span className="text-text-primary"> {primaryText} </span>
          {!!secondaryText && <span className="text-token-text-secondary">{secondaryText}</span>}
        </div>
        <ChevronDown className="text-token-text-secondary size-4" />
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/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">
+            <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-5 w-5" />
+                  <BookmarkFilledIcon className="h-4 w-4" />
                ) : (
-                <BookmarkIcon className="h-5 w-5" />
+                  <BookmarkIcon className="h-4 w-4" />
                )}
              </div>
-            <div className="grow overflow-hidden whitespace-nowrap text-left text-sm text-text-primary">
+            </div>
+            <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>
--- a/client/src/components/Nav/Bookmarks/BookmarkNavItems.tsx
+++ b/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) {
--- a/client/src/components/Nav/Nav.tsx
+++ b/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} />
                          )}
+                          {hasAccessToBookmarks === true && (
                            <BookmarkNav tags={tags} setTags={setTags} />
+                          )}
                        </div>
                      ) : (
                        <NewChat
@ -181,7 +190,9 @@ const Nav = ({
                                  isSmallScreen={isSmallScreen}
                                />
                              )}
+                              {hasAccessToBookmarks === true && (
                                <BookmarkNav tags={tags} setTags={setTags} />
+                              )}
                            </>
                          }
                        />
--- a/client/src/components/Nav/NewChat.tsx
+++ b/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>
--- a/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
@ -17,7 +17,7 @@ const BookmarkPanel = () => {
      <BookmarkContext.Provider value={{ bookmarks: data || [] }}>
        <BookmarkTable />
        <div className="flex justify-between gap-2">
-          <BookmarkEditDialog open={open} setOpen={setOpen} />
+          <BookmarkEditDialog context="BookmarkPanel" open={open} setOpen={setOpen} />
          <Button variant="outline" className="w-full text-sm" onClick={() => setOpen(!open)}>
            <BookmarkPlusIcon className="mr-1 size-4" />
            <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
--- a/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
@ -5,6 +5,15 @@ import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext
 import BookmarkTableRow from './BookmarkTableRow';
 import { useLocalize } from '~/hooks';

+const removeDuplicates = (bookmarks: TConversationTag[]) => {
+  const seen = new Set();
+  return bookmarks.filter((bookmark) => {
+    const duplicate = seen.has(bookmark._id);
+    seen.add(bookmark._id);
+    return !duplicate;
+  });
+};
+
 const BookmarkTable = () => {
  const localize = useLocalize();
  const [rows, setRows] = useState<ConversationTagsResponse>([]);
@ -12,13 +21,10 @@ const BookmarkTable = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const pageSize = 10;

-  const { bookmarks } = useBookmarkContext();
+  const { bookmarks = [] } = useBookmarkContext();
  useEffect(() => {
-    setRows(
-      bookmarks
-        .map((item) => ({ id: item.tag, ...item }))
-        .sort((a, b) => a.position - b.position) || [],
-    );
+    const _bookmarks = removeDuplicates(bookmarks).sort((a, b) => a.position - b.position);
+    setRows(_bookmarks);
  }, [bookmarks]);

  const moveRow = useCallback((dragIndex: number, hoverIndex: number) => {
@ -32,17 +38,16 @@ const BookmarkTable = () => {

  const renderRow = useCallback(
    (row: TConversationTag) => {
-      return <BookmarkTableRow key={row.tag} moveRow={moveRow} row={row} position={row.position} />;
+      return <BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />;
    },
    [moveRow],
  );

-  const filteredRows = rows.filter((row) =>
-    row.tag.toLowerCase().includes(searchQuery.toLowerCase()),
+  const filteredRows = rows.filter(
+    (row) => row.tag && row.tag.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
-
  return (
    <BookmarkContext.Provider value={{ bookmarks }}>
      <div className="flex items-center gap-4 py-4">
@ -53,14 +58,14 @@ const BookmarkTable = () => {
          className="w-full border-border-light placeholder:text-text-secondary"
        />
      </div>
-      <div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
+      <div className="overflow-y-auto rounded-md border border-border-light">
        <Table className="table-fixed border-separate border-spacing-0">
          <TableHeader>
            <TableRow>
-              <TableCell className="w-full px-3 py-3.5 pl-6 dark:bg-gray-700">
+              <TableCell className="w-full bg-header-primary px-3 py-3.5 pl-6">
                <div>{localize('com_ui_bookmarks_title')}</div>
              </TableCell>
-              <TableCell className="w-full px-3 py-3.5 dark:bg-gray-700 sm:pl-6">
+              <TableCell className="w-full bg-header-primary px-3 py-3.5 sm:pl-6">
                <div>{localize('com_ui_bookmarks_count')}</div>
              </TableCell>
            </TableRow>
@ -69,7 +74,7 @@ const BookmarkTable = () => {
        </Table>
      </div>
      <div className="flex items-center justify-between py-4">
-        <div className="pl-1 text-gray-400">
+        <div className="pl-1 text-text-secondary">
          {localize('com_ui_showing')} {pageIndex * pageSize + 1} -{' '}
          {Math.min((pageIndex + 1) * pageSize, filteredRows.length)} {localize('com_ui_of')}{' '}
          {filteredRows.length}
--- a/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx
@ -24,7 +24,7 @@ const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, posit
  const [isHovered, setIsHovered] = useState(false);
  const ref = useRef<HTMLTableRowElement>(null);

-  const mutation = useConversationTagMutation(row.tag);
+  const mutation = useConversationTagMutation({ context: 'BookmarkTableRow', tag: row.tag });
  const localize = useLocalize();
  const { showToast } = useToastContext();

@ -73,7 +73,7 @@ const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, posit
  return (
    <TableRow
      ref={ref}
-      className="cursor-move hover:bg-surface-secondary"
+      className="cursor-move hover:bg-surface-tertiary"
      style={{ opacity: isDragging ? 0.5 : 1 }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
--- a/client/src/components/svg/EditIcon.tsx
+++ b/client/src/components/svg/EditIcon.tsx
@ -1,8 +1,18 @@
+import React from 'react';
 import { cn } from '~/utils';

-export default function EditIcon({ className = 'icon-md', size = '1.2em' }) {
+const EditIcon = React.forwardRef<SVGSVGElement>(
+  (
+    props: {
+      className?: string;
+      size?: string;
+    },
+    ref,
+  ) => {
+    const { className = 'icon-md', size = '1.2em' } = props;
    return (
      <svg
+        ref={ref}
        fill="none"
        strokeWidth="2"
        xmlns="http://www.w3.org/2000/svg"
@ -21,4 +31,7 @@ export default function EditIcon({ className = 'icon-md', size = '1.2em' }) {
        ></path>
      </svg>
    );
-}
+  },
+);
+
+export default EditIcon;
--- a/client/src/data-provider/mutations.ts
+++ b/client/src/data-provider/mutations.ts
@ -21,6 +21,7 @@ import {
  useSharedLinksInfiniteQuery,
 } from './queries';
 import {
+  logger,
  /* Shared Links */
  addSharedLink,
  deleteSharedLink,
@ -96,6 +97,7 @@ export const useUpdateConversationMutation = (
 */
 export const useTagConversationMutation = (
  conversationId: string,
+  options?: t.updateTagsInConvoOptions,
 ): UseMutationResult<t.TTagConversationResponse, unknown, t.TTagConversationRequest, unknown> => {
  const query = useConversationTagsQuery();
  const { updateTagsInConversation } = useUpdateTagsInConvo();
@ -103,13 +105,17 @@ export const useTagConversationMutation = (
    (payload: t.TTagConversationRequest) =>
      dataService.addTagToConversation(conversationId, payload),
    {
-      onSuccess: (updatedTags) => {
+      onSuccess: (updatedTags, ...rest) => {
        // Because the logic for calculating the bookmark count is complex,
        // the client does not perform the calculation,
        // but instead refetch the data from the API.
        query.refetch();
        updateTagsInConversation(conversationId, updatedTags);
+
+        options?.onSuccess?.(updatedTags, ...rest);
      },
+      onError: options?.onError,
+      onMutate: options?.onMutate,
    },
  );
 };
@ -296,31 +302,29 @@ export const useDeleteSharedLinkMutation = (
      });
      const current = queryClient.getQueryData<t.ConversationData>([QueryKeys.sharedLinks]);
      refetch({
-        refetchPage: (page, index) => index === (current?.pages.length || 1) - 1,
+        refetchPage: (page, index) => index === (current?.pages.length ?? 1) - 1,
      });
      onSuccess?.(_data, vars, context);
    },
-    ...(_options || {}),
+    ..._options,
  });
 };

 // Add a tag or update tag information (tag, description, position, etc.)
-export const useConversationTagMutation = (
-  tag?: string,
-  options?: t.UpdateConversationTagOptions,
-): UseMutationResult<t.TConversationTagResponse, unknown, t.TConversationTagRequest, unknown> => {
+export const useConversationTagMutation = ({
+  context,
+  tag,
+  options,
+}: {
+  context: string;
+  tag?: string;
+  options?: t.UpdateConversationTagOptions;
+}): UseMutationResult<t.TConversationTagResponse, unknown, t.TConversationTagRequest, unknown> => {
  const queryClient = useQueryClient();
-  const { ..._options } = options || {};
-  const { updateTagsInConversation, replaceTagsInAllConversations } = useUpdateTagsInConvo();
-  return useMutation(
-    (payload: t.TConversationTagRequest) =>
-      tag
-        ? dataService.updateConversationTag(tag, payload)
-        : dataService.createConversationTag(payload),
-    {
-      onSuccess: (_data, vars) => {
-        queryClient.setQueryData<t.TConversationTag[]>([QueryKeys.conversationTags], (data) => {
-          if (!data) {
+  const { onSuccess, ..._options } = options || {};
+  const onMutationSuccess: typeof onSuccess = (_data, vars) => {
+    queryClient.setQueryData<t.TConversationTag[]>([QueryKeys.conversationTags], (queryData) => {
+      if (!queryData) {
        return [
          {
            count: 1,
@ -331,12 +335,35 @@ export const useConversationTagMutation = (
          },
        ] as t.TConversationTag[];
      }
-          if (!tag) {
-            return [...data, _data].sort((a, b) => a.position - b.position);
+      if (tag === undefined || !tag.length) {
+        // Check if the tag already exists
+        const existingTagIndex = queryData.findIndex((item) => item.tag === _data.tag);
+        if (existingTagIndex !== -1) {
+          logger.log(
+            'tag_mutation',
+            `"Created" tag exists, updating from ${context}`,
+            queryData,
+            _data,
+          );
+          // If the tag exists, update it
+          const updatedData = [...queryData];
+          updatedData[existingTagIndex] = { ...updatedData[existingTagIndex], ..._data };
+          return updatedData.sort((a, b) => a.position - b.position);
+        } else {
+          // If the tag doesn't exist, add it
+          logger.log(
+            'tag_mutation',
+            `"Created" tag is new, adding from ${context}`,
+            queryData,
+            _data,
+          );
+          return [...queryData, _data].sort((a, b) => a.position - b.position);
        }
-          return updateConversationTag(data, vars, _data, tag);
+      }
+      logger.log('tag_mutation', `Updating tag from ${context}`, queryData, _data);
+      return updateConversationTag(queryData, vars, _data, tag);
    });
-        if (vars.addToConversation && vars.conversationId && _data.tag) {
+    if (vars.addToConversation === true && vars.conversationId != null && _data.tag) {
      const currentConvo = queryClient.getQueryData<t.TConversation>([
        QueryKeys.conversation,
        vars.conversationId,
@ -344,14 +371,30 @@ export const useConversationTagMutation = (
      if (!currentConvo) {
        return;
      }
+      logger.log(
+        'tag_mutation',
+        `\`updateTagsInConversation\` Update from ${context}`,
+        currentConvo,
+      );
      updateTagsInConversation(vars.conversationId, [...(currentConvo.tags || []), _data.tag]);
    }
    // Change the tag title to the new title
-        if (tag) {
+    if (tag != null) {
      replaceTagsInAllConversations(tag, _data.tag);
    }
+  };
+  const { updateTagsInConversation, replaceTagsInAllConversations } = useUpdateTagsInConvo();
+  return useMutation(
+    (payload: t.TConversationTagRequest) =>
+      tag != null
+        ? dataService.updateConversationTag(tag, payload)
+        : dataService.createConversationTag(payload),
+    {
+      onSuccess: (...args) => {
+        onMutationSuccess(...args);
+        onSuccess?.(...args);
      },
-      ...(_options || {}),
+      ..._options,
    },
  );
 };
@ -407,20 +450,22 @@ export const useDeleteConversationTagMutation = (
 ): UseMutationResult<t.TConversationTagResponse, unknown, string, void> => {
  const queryClient = useQueryClient();
  const deleteTagInAllConversations = useDeleteTagInConversations();
+
  const { onSuccess, ..._options } = options || {};
+
  return useMutation((tag: string) => dataService.deleteConversationTag(tag), {
-    onSuccess: (_data, vars, context) => {
+    onSuccess: (_data, tagToDelete, context) => {
      queryClient.setQueryData<t.TConversationTag[]>([QueryKeys.conversationTags], (data) => {
        if (!data) {
          return data;
        }
-        return data.filter((t) => t.tag !== vars);
+        return data.filter((t) => t.tag !== tagToDelete);
      });

-      deleteTagInAllConversations(vars);
-      onSuccess?.(_data, vars, context);
+      deleteTagInAllConversations(tagToDelete);
+      onSuccess?.(_data, tagToDelete, context);
    },
-    ...(_options || {}),
+    ..._options,
  });
 };

@ -817,7 +862,8 @@ export const useUpdateAssistantMutation = (
    ({ assistant_id, data }: { assistant_id: string; data: t.AssistantUpdateParams }) => {
      const { endpoint } = data;
      const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
-      const version = endpointsConfig?.[endpoint].version ?? defaultAssistantsVersion[endpoint];
+      const endpointConfig = endpointsConfig?.[endpoint];
+      const version = endpointConfig?.version ?? defaultAssistantsVersion[endpoint];
      return dataService.updateAssistant({
        data,
        version,
--- a/client/src/hooks/Conversations/useBookmarkSuccess.ts
+++ b/client/src/hooks/Conversations/useBookmarkSuccess.ts
@ -3,7 +3,7 @@ import useUpdateTagsInConvo from './useUpdateTagsInConvo';
 import store from '~/store';

 const useBookmarkSuccess = (conversationId: string) => {
-  const setConversation = useSetRecoilState(store.conversationByIndex(0));
+  const updateConversation = useSetRecoilState(store.updateConversationSelector(conversationId));
  const { updateTagsInConversation } = useUpdateTagsInConvo();

  return (newTags: string[]) => {
@ -11,16 +11,7 @@ const useBookmarkSuccess = (conversationId: string) => {
      return;
    }
    updateTagsInConversation(conversationId, newTags);
-    setConversation((prev) => {
-      if (prev) {
-        return {
-          ...prev,
-          tags: newTags,
-        };
-      }
-      console.error('Conversation not found for bookmark/tags update');
-      return prev;
-    });
+    updateConversation({ tags: newTags });
  };
 };

--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@ -38,6 +38,10 @@ export default function useSideNavLinks({
    permissionType: PermissionTypes.PROMPTS,
    permission: Permissions.USE,
  });
+  const hasAccessToBookmarks = useHasAccess({
+    permissionType: PermissionTypes.BOOKMARKS,
+    permission: Permissions.USE,
+  });

  const Links = useMemo(() => {
    const links: NavLink[] = [];
@ -75,6 +79,7 @@ export default function useSideNavLinks({
      Component: FilesPanel,
    });

+    if (hasAccessToBookmarks) {
      links.push({
        title: 'com_sidepanel_conversation_tags',
        label: '',
@ -82,6 +87,7 @@ export default function useSideNavLinks({
        id: 'bookmarks',
        Component: BookmarkPanel,
      });
+    }

    links.push({
      title: 'com_sidepanel_hide_panel',
--- a/client/src/hooks/Roles/useHasAccess.ts
+++ b/client/src/hooks/Roles/useHasAccess.ts
@ -15,7 +15,7 @@ const useHasAccess = ({
    ({ user, permissionType, permission }) => {
      if (isAuthenticated && user?.role === SystemRoles.ADMIN) {
        return true;
-      } else if (isAuthenticated && user?.role && roles && roles[user.role]) {
+      } else if (isAuthenticated && user?.role != null && roles && roles[user.role]) {
        return roles[user.role]?.[permissionType]?.[permission] === true;
      }
      return false;
--- a/client/src/localization/languages/Eng.ts
+++ b/client/src/localization/languages/Eng.ts
@ -311,6 +311,7 @@ export default {
  com_ui_bookmarks_create_success: 'Bookmark created successfully',
  com_ui_bookmarks_update_success: 'Bookmark updated successfully',
  com_ui_bookmarks_delete_success: 'Bookmark deleted successfully',
+  com_ui_bookmarks_create_exists: 'This bookmark already exists',
  com_ui_bookmarks_create_error: 'There was an error creating the bookmark',
  com_ui_bookmarks_update_error: 'There was an error updating the bookmark',
  com_ui_bookmarks_delete_error: 'There was an error deleting the bookmark',
--- a/client/src/store/families.ts
+++ b/client/src/store/families.ts
@ -2,6 +2,7 @@ import {
  atom,
  selector,
  atomFamily,
+  DefaultValue,
  selectorFamily,
  useRecoilState,
  useRecoilValue,
@ -325,6 +326,31 @@ function useClearLatestMessages(context?: string) {
  return clearAllLatestMessages;
 }

+const updateConversationSelector = selectorFamily({
+  key: 'updateConversationSelector',
+  get: () => () => null as Partial<TConversation> | null,
+  set:
+    (conversationId: string) =>
+      ({ set, get }, newPartialConversation) => {
+        if (newPartialConversation instanceof DefaultValue) {
+          return;
+        }
+
+        const keys = get(conversationKeysAtom);
+        keys.forEach((key) => {
+          set(conversationByIndex(key), (prevConversation) => {
+            if (prevConversation && prevConversation.conversationId === conversationId) {
+              return {
+                ...prevConversation,
+                ...newPartialConversation,
+              };
+            }
+            return prevConversation;
+          });
+        });
+      },
+});
+
 export default {
  conversationByIndex,
  filesByIndex,
@ -354,4 +380,5 @@ export default {
  useClearSubmissionState,
  useClearLatestMessages,
  showPromptsPopoverFamily,
+  updateConversationSelector,
 };
--- a/client/src/utils/messages.ts
+++ b/client/src/utils/messages.ts
@ -2,7 +2,7 @@ import { ContentTypes, Constants } from 'librechat-data-provider';
 import type { TMessage } from 'librechat-data-provider';

 export const getLengthAndLastTenChars = (str?: string): string => {
-  if (!str) {
+  if (typeof str !== 'string' || str.length === 0) {
    return '0';
  }

@ -18,12 +18,15 @@ export const getLatestText = (message?: TMessage | null, includeIndex?: boolean)
  if (message.text) {
    return message.text;
  }
-  if (message.content?.length) {
+  if (message.content && message.content.length > 0) {
    for (let i = message.content.length - 1; i >= 0; i--) {
      const part = message.content[i];
-      if (part.type === ContentTypes.TEXT && part[ContentTypes.TEXT].value.length > 0) {
+      if (
+        part.type === ContentTypes.TEXT &&
+        ((part[ContentTypes.TEXT].value as string | undefined)?.length ?? 0) > 0
+      ) {
        const text = part[ContentTypes.TEXT].value;
-        if (includeIndex) {
+        if (includeIndex === true) {
          return `${text}-${i}`;
        } else {
          return text;
@ -39,9 +42,11 @@ export const getTextKey = (message?: TMessage | null, convoId?: string | null) =
    return '';
  }
  const text = getLatestText(message, true);
-  return `${message.messageId ?? ''}${Constants.COMMON_DIVIDER}${getLengthAndLastTenChars(text)}${
+  return `${(message.messageId as string | null) ?? ''}${
    Constants.COMMON_DIVIDER
-  }${message.conversationId ?? convoId}`;
+  }${getLengthAndLastTenChars(text)}${Constants.COMMON_DIVIDER}${
+    message.conversationId ?? convoId
+  }`;
 };

 export const scrollToEnd = (callback?: () => void) => {
--- a/package-lock.json
+++ b/package-lock.json
@ -31493,7 +31493,7 @@
    },
    "packages/data-provider": {
      "name": "librechat-data-provider",
-      "version": "0.7.415",
+      "version": "0.7.416",
      "license": "ISC",
      "dependencies": {
        "@types/js-yaml": "^4.0.9",
--- a/packages/data-provider/package.json
+++ b/packages/data-provider/package.json
@ -1,6 +1,6 @@
 {
  "name": "librechat-data-provider",
-  "version": "0.7.415",
+  "version": "0.7.416",
  "description": "data services for librechat apps",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
--- a/packages/data-provider/src/api-endpoints.ts
+++ b/packages/data-provider/src/api-endpoints.ts
@ -201,4 +201,4 @@ export const conversationTagsList = (pageNumber: string, sort?: string, order?:
  }`;

 export const addTagToConversation = (conversationId: string) =>
-  `${conversationsRoot}/tags/${conversationId}`;
+  `${conversationTags()}/convo/${conversationId}`;
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@ -413,6 +413,7 @@ export const configSchema = z.object({
      modelSelect: z.boolean().optional(),
      parameters: z.boolean().optional(),
      sidePanel: z.boolean().optional(),
+      bookmarks: z.boolean().optional(),
      presets: z.boolean().optional(),
      prompts: z.boolean().optional(),
    })
--- a/packages/data-provider/src/roles.ts
+++ b/packages/data-provider/src/roles.ts
@ -22,6 +22,10 @@ export enum PermissionTypes {
   * Type for Prompt Permissions
   */
  PROMPTS = 'PROMPTS',
+  /**
+   * Type for Bookmarks Permissions
+   */
+  BOOKMARKS = 'BOOKMARKS',
 }

 /**
@ -41,13 +45,19 @@ export const promptPermissionsSchema = z.object({
  [Permissions.SHARE]: z.boolean().default(false),
 });

+export const bookmarkPermissionsSchema = z.object({
+  [Permissions.USE]: z.boolean().default(true),
+});
+
 export const roleSchema = z.object({
  name: z.string(),
  [PermissionTypes.PROMPTS]: promptPermissionsSchema,
+  [PermissionTypes.BOOKMARKS]: bookmarkPermissionsSchema,
 });

 export type TRole = z.infer<typeof roleSchema>;
 export type TPromptPermissions = z.infer<typeof promptPermissionsSchema>;
+export type TBookmarkPermissions = z.infer<typeof bookmarkPermissionsSchema>;

 const defaultRolesSchema = z.object({
  [SystemRoles.ADMIN]: roleSchema.extend({
@ -58,10 +68,14 @@ const defaultRolesSchema = z.object({
      [Permissions.CREATE]: z.boolean().default(true),
      [Permissions.SHARE]: z.boolean().default(true),
    }),
+    [PermissionTypes.BOOKMARKS]: bookmarkPermissionsSchema.extend({
+      [Permissions.USE]: z.boolean().default(true),
+    }),
  }),
  [SystemRoles.USER]: roleSchema.extend({
    name: z.literal(SystemRoles.USER),
    [PermissionTypes.PROMPTS]: promptPermissionsSchema,
+    [PermissionTypes.BOOKMARKS]: bookmarkPermissionsSchema,
  }),
 });

@ -69,9 +83,11 @@ export const roleDefaults = defaultRolesSchema.parse({
  [SystemRoles.ADMIN]: {
    name: SystemRoles.ADMIN,
    [PermissionTypes.PROMPTS]: {},
+    [PermissionTypes.BOOKMARKS]: {},
  },
  [SystemRoles.USER]: {
    name: SystemRoles.USER,
    [PermissionTypes.PROMPTS]: {},
+    [PermissionTypes.BOOKMARKS]: {},
  },
 });
--- a/packages/data-provider/src/schemas.ts
+++ b/packages/data-provider/src/schemas.ts
@ -481,6 +481,7 @@ export const tSharedLinkSchema = z.object({
 export type TSharedLink = z.infer<typeof tSharedLinkSchema>;

 export const tConversationTagSchema = z.object({
+  _id: z.string(),
  user: z.string(),
  tag: z.string(),
  description: z.string().optional(),
--- a/packages/data-provider/src/types/mutations.ts
+++ b/packages/data-provider/src/types/mutations.ts
@ -105,6 +105,12 @@ export type CreateSharedLinkOptions = MutationOptions<
  types.TSharedLink,
  Partial<types.TSharedLink>
 >;
+
+export type updateTagsInConvoOptions = MutationOptions<
+  types.TTagConversationResponse,
+  types.TTagConversationRequest
+>;
+
 export type UpdateSharedLinkOptions = MutationOptions<
  types.TSharedLink,
  Partial<types.TSharedLink>