🛡️ feat: Add Role Dropdown to Prompt/Agents Admin Settings (#4922)

* style: update AdminSettings dialog content styles for improved accessibility/theming

* style: update icon colors in ExportAndShareMenu for improved theming

* feat: enhance DropdownPopup component with additional props for customization

* feat: add role selection dropdown to AdminSettings for enhanced user permissions management

* feat: add role selection dropdown to AdminSettings for Prompt permission management

* style: add gap to button in AdminSettings for improved layout

* feat: add warning message for Admin role access in Permissions settings

Author: danny-avila

client/src/components/Chat/ExportAndShareMenu.tsx

@@ -50,12 +50,12 @@ export default function ExportAndShareMenu({
     {
       label: localize('com_endpoint_export'),
       onClick: exportHandler,
-      icon: <Upload className="icon-md mr-2 dark:text-gray-300" />,
+      icon: <Upload className="icon-md mr-2 text-text-secondary" />,
     },
     {
       label: localize('com_ui_share'),
       onClick: shareHandler,
-      icon: <Share2 className="icon-md mr-2 dark:text-gray-300" />,
+      icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
       show: isSharedButtonEnabled,
     },
   ];
@@ -72,7 +72,7 @@ export default function ExportAndShareMenu({
             aria-label="Export options"
             className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
           >
-            <Upload className="icon-md dark:text-gray-300" aria-hidden="true" focusable="false" />
+            <Upload className="icon-md text-text-secondary" aria-hidden="true" focusable="false" />
           </Ariakit.MenuButton>
         }
         items={dropdownItems}

client/src/components/Prompts/AdminSettings.tsx

@@ -1,12 +1,13 @@
-import { useMemo, useEffect } from 'react';
+import * as Ariakit from '@ariakit/react';
+import { useMemo, useEffect, useState } from 'react';
 import { ShieldEllipsis } from 'lucide-react';
 import { useForm, Controller } from 'react-hook-form';
 import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
 import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 import { OGDialog, OGDialogTitle, OGDialogContent, OGDialogTrigger } from '~/components/ui';
 import { useUpdatePromptPermissionsMutation } from '~/data-provider';
 import { useLocalize, useAuthContext } from '~/hooks';
-import { Button, Switch } from '~/components/ui';
+import { Button, Switch, DropdownPopup } from '~/components/ui';
 import { useToastContext } from '~/Providers';
 
 type FormValues = Record<Permissions, boolean>;
@@ -19,8 +20,6 @@ type LabelControllerProps = {
   getValues: UseFormGetValues<FormValues>;
 };
 
-const defaultValues = roleDefaults[SystemRoles.USER];
-
 const LabelController: React.FC<LabelControllerProps> = ({
   control,
   promptPerm,
@@ -32,7 +31,6 @@ const LabelController: React.FC<LabelControllerProps> = ({
     <button
       className="cursor-pointer select-none"
       type="button"
-      // htmlFor={promptPerm}
       onClick={() =>
         setValue(promptPerm, !getValues(promptPerm), {
           shouldDirty: true,
@@ -70,6 +68,16 @@ const AdminSettings = () => {
     },
   });
 
+  const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
+
+  const defaultValues = useMemo(() => {
+    if (roles?.[selectedRole]) {
+      return roles[selectedRole][PermissionTypes.PROMPTS];
+    }
+    return roleDefaults[selectedRole][PermissionTypes.PROMPTS];
+  }, [roles, selectedRole]);
+
   const {
     reset,
     control,
@@ -79,20 +87,16 @@ const AdminSettings = () => {
     formState: { isSubmitting },
   } = useForm<FormValues>({
     mode: 'onChange',
-    defaultValues: useMemo(() => {
-      if (roles?.[SystemRoles.USER]) {
-        return roles[SystemRoles.USER][PermissionTypes.PROMPTS];
-      }
-
-      return defaultValues[PermissionTypes.PROMPTS];
-    }, [roles]),
+    defaultValues,
   });
 
   useEffect(() => {
-    if (roles?.[SystemRoles.USER]?.[PermissionTypes.PROMPTS]) {
-      reset(roles[SystemRoles.USER][PermissionTypes.PROMPTS]);
+    if (roles?.[selectedRole]?.[PermissionTypes.PROMPTS]) {
+      reset(roles[selectedRole][PermissionTypes.PROMPTS]);
+    } else {
+      reset(roleDefaults[selectedRole][PermissionTypes.PROMPTS]);
     }
-  }, [roles, reset]);
+  }, [roles, selectedRole, reset]);
 
   if (user?.role !== SystemRoles.ADMIN) {
     return null;
@@ -103,20 +107,35 @@ const AdminSettings = () => {
       promptPerm: Permissions.SHARED_GLOBAL,
       label: localize('com_ui_prompts_allow_share_global'),
     },
-    {
-      promptPerm: Permissions.USE,
-      label: localize('com_ui_prompts_allow_use'),
-    },
     {
       promptPerm: Permissions.CREATE,
       label: localize('com_ui_prompts_allow_create'),
     },
+    {
+      promptPerm: Permissions.USE,
+      label: localize('com_ui_prompts_allow_use'),
+    },
   ];
 
   const onSubmit = (data: FormValues) => {
-    mutate({ roleName: SystemRoles.USER, updates: data });
+    mutate({ roleName: selectedRole, updates: data });
   };
 
+  const roleDropdownItems = [
+    {
+      label: SystemRoles.USER,
+      onClick: () => {
+        setSelectedRole(SystemRoles.USER);
+      },
+    },
+    {
+      label: SystemRoles.ADMIN,
+      onClick: () => {
+        setSelectedRole(SystemRoles.ADMIN);
+      },
+    },
+  ];
+
   return (
     <OGDialog>
       <OGDialogTrigger asChild>
@@ -129,33 +148,70 @@ const AdminSettings = () => {
           <span className="hidden sm:flex">{localize('com_ui_admin')}</span>
         </Button>
       </OGDialogTrigger>
-      <OGDialogContent className="bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
-        <OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
-          'com_ui_prompts',
-        )}`}</OGDialogTitle>
-        <form className="p-2" onSubmit={handleSubmit(onSubmit)}>
-          <div className="py-5">
-            {labelControllerData.map(({ promptPerm, label }) => (
-              <LabelController
-                key={promptPerm}
-                control={control}
-                promptPerm={promptPerm}
-                label={label}
-                getValues={getValues}
-                setValue={setValue}
-              />
-            ))}
-          </div>
-          <div className="flex justify-end">
-            <button
-              type="submit"
-              disabled={isSubmitting || isLoading}
-              className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
-            >
-              {localize('com_ui_save')}
-            </button>
+      <OGDialogContent className="w-1/4 border-border-light bg-surface-primary text-text-primary">
+        <OGDialogTitle>
+          {`${localize('com_ui_admin_settings')} - ${localize('com_ui_prompts')}`}
+        </OGDialogTitle>
+        <div className="p-2">
+          {/* Role selection dropdown */}
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{localize('com_ui_role_select')}:</span>
+            <DropdownPopup
+              menuId="prompt-role-dropdown"
+              isOpen={isRoleMenuOpen}
+              setIsOpen={setIsRoleMenuOpen}
+              trigger={
+                <Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
+                  {selectedRole}
+                </Ariakit.MenuButton>
+              }
+              items={roleDropdownItems}
+              className="border border-border-light bg-surface-primary"
+              itemClassName="hover:bg-surface-tertiary items-center justify-center"
+              sameWidth={true}
+            />
           </div>
-        </form>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="py-5">
+              {labelControllerData.map(({ promptPerm, label }) => (
+                <div key={promptPerm}>
+                  <LabelController
+                    control={control}
+                    promptPerm={promptPerm}
+                    label={label}
+                    getValues={getValues}
+                    setValue={setValue}
+                  />
+                  {selectedRole === SystemRoles.ADMIN && promptPerm === Permissions.USE && (
+                    <>
+                      <div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
+                        <span>{localize('com_ui_admin_access_warning')}</span>
+                        {'\n'}
+                        <a
+                          href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
+                          target="_blank"
+                          rel="noreferrer"
+                          className="text-blue-500 underline"
+                        >
+                          {localize('com_ui_more_info')}
+                        </a>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                disabled={isSubmitting || isLoading}
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+              >
+                {localize('com_ui_save')}
+              </button>
+            </div>
+          </form>
+        </div>
       </OGDialogContent>
     </OGDialog>
   );