- {labelControllerData.map(({ promptPerm, label }) => (
-
- ))}
-
-
-
+
+
+ {`${localize('com_ui_admin_settings')} - ${localize('com_ui_prompts')}`}
+
+
+ {/* Role selection dropdown */}
+
+ {localize('com_ui_role_select')}:
+
+ {selectedRole}
+
+ }
+ items={roleDropdownItems}
+ className="border border-border-light bg-surface-primary"
+ itemClassName="hover:bg-surface-tertiary items-center justify-center"
+ sameWidth={true}
+ />
-
+
+
);
diff --git a/client/src/components/SidePanel/Agents/AdminSettings.tsx b/client/src/components/SidePanel/Agents/AdminSettings.tsx
index dcc48212df0..5b0408c6161 100644
--- a/client/src/components/SidePanel/Agents/AdminSettings.tsx
+++ b/client/src/components/SidePanel/Agents/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 { useUpdateAgentPermissionsMutation } from '~/data-provider';
+import { Button, Switch, DropdownPopup } from '~/components/ui';
import { useLocalize, useAuthContext } from '~/hooks';
-import { Button, Switch } from '~/components/ui';
import { useToastContext } from '~/Providers';
type FormValues = Record
;
@@ -19,8 +20,6 @@ type LabelControllerProps = {
getValues: UseFormGetValues;
};
-const defaultValues = roleDefaults[SystemRoles.USER];
-
const LabelController: React.FC = ({
control,
agentPerm,
@@ -69,6 +68,16 @@ const AdminSettings = () => {
},
});
+ const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
+ const [selectedRole, setSelectedRole] = useState(SystemRoles.USER);
+
+ const defaultValues = useMemo(() => {
+ if (roles?.[selectedRole]) {
+ return roles[selectedRole][PermissionTypes.AGENTS];
+ }
+ return roleDefaults[selectedRole][PermissionTypes.AGENTS];
+ }, [roles, selectedRole]);
+
const {
reset,
control,
@@ -78,20 +87,16 @@ const AdminSettings = () => {
formState: { isSubmitting },
} = useForm({
mode: 'onChange',
- defaultValues: useMemo(() => {
- if (roles?.[SystemRoles.USER]) {
- return roles[SystemRoles.USER][PermissionTypes.AGENTS];
- }
-
- return defaultValues[PermissionTypes.AGENTS];
- }, [roles]),
+ defaultValues,
});
useEffect(() => {
- if (roles?.[SystemRoles.USER]?.[PermissionTypes.AGENTS]) {
- reset(roles[SystemRoles.USER][PermissionTypes.AGENTS]);
+ if (roles?.[selectedRole]?.[PermissionTypes.AGENTS]) {
+ reset(roles[selectedRole][PermissionTypes.AGENTS]);
+ } else {
+ reset(roleDefaults[selectedRole][PermissionTypes.AGENTS]);
}
- }, [roles, reset]);
+ }, [roles, selectedRole, reset]);
if (user?.role !== SystemRoles.ADMIN) {
return null;
@@ -102,59 +107,112 @@ const AdminSettings = () => {
agentPerm: Permissions.SHARED_GLOBAL,
label: localize('com_ui_agents_allow_share_global'),
},
- {
- agentPerm: Permissions.USE,
- label: localize('com_ui_agents_allow_use'),
- },
{
agentPerm: Permissions.CREATE,
label: localize('com_ui_agents_allow_create'),
},
+ {
+ agentPerm: Permissions.USE,
+ label: localize('com_ui_agents_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 (
-
+
{`${localize('com_ui_admin_settings')} - ${localize(
'com_ui_agents',
)}`}
-