mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 02:40:14 +01:00
🗨️ feat: Granular Prompt Permissions via ACL and Permission Bits
feat: Implement prompt permissions management and access control middleware fix: agent deletion process to remove associated permissions and ACL entries fix: Import Permissions for enhanced access control in GrantAccessDialog feat: use PromptGroup for access control - Added migration script for PromptGroup permissions, categorizing groups into global view access and private groups. - Created unit tests for the migration script to ensure correct categorization and permission granting. - Introduced middleware for checking access permissions on PromptGroups and prompts via their groups. - Updated routes to utilize new access control middleware for PromptGroups. - Enhanced access role definitions to include roles specific to PromptGroups. - Modified ACL entry schema and types to accommodate PromptGroup resource type. - Updated data provider to include new access role identifiers for PromptGroups. feat: add generic access management dialogs and hooks for resource permissions fix: remove duplicate imports in FileContext component fix: remove duplicate mongoose dependency in package.json feat: add access permissions handling for dynamic resource types and add promptGroup roles feat: implement centralized role localization and update access role types refactor: simplify author handling in prompt group routes and enhance ACL checks feat: implement addPromptToGroup functionality and update PromptForm to use it feat: enhance permission handling in ChatGroupItem, DashGroupItem, and PromptForm components chore: rename migration script for prompt group permissions and update package.json scripts chore: update prompt tests
This commit is contained in:
Danny Avila
parent
7e7e75714e
commit
ae732b2ebc
46 changed files with 3505 additions and 408 deletions
|
|
@ -7,8 +7,9 @@ import {
|
|||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from '@librechat/client';
|
||||
import { PERMISSION_BITS } from 'librechat-data-provider';
|
||||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import { useLocalize, useSubmitMessage, useCustomLink, useAuthContext } from '~/hooks';
|
||||
import { useLocalize, useSubmitMessage, useCustomLink, useResourcePermissions } from '~/hooks';
|
||||
import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
|
||||
import PreviewPrompt from '~/components/Prompts/PreviewPrompt';
|
||||
import ListCard from '~/components/Prompts/Groups/ListCard';
|
||||
|
|
@ -22,7 +23,6 @@ function ChatGroupItem({
|
|||
instanceProjectId?: string;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const { submitPrompt } = useSubmitMessage();
|
||||
const [isPreviewDialogOpen, setPreviewDialogOpen] = useState(false);
|
||||
const [isVariableDialogOpen, setVariableDialogOpen] = useState(false);
|
||||
|
|
@ -32,7 +32,10 @@ function ChatGroupItem({
|
|||
() => instanceProjectId != null && group.projectIds?.includes(instanceProjectId),
|
||||
[group, instanceProjectId],
|
||||
);
|
||||
const isOwner = useMemo(() => user?.id === group.author, [user, group]);
|
||||
|
||||
// Check permissions for the promptGroup
|
||||
const { hasPermission } = useResourcePermissions('promptGroup', group._id || '');
|
||||
const canEdit = hasPermission(PERMISSION_BITS.EDIT);
|
||||
|
||||
const onCardClick: React.MouseEventHandler<HTMLButtonElement> = () => {
|
||||
const text = group.productionPrompt?.prompt;
|
||||
|
|
@ -108,10 +111,10 @@ function ChatGroupItem({
|
|||
<TextSearch className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
<span>{localize('com_ui_preview')}</span>
|
||||
</DropdownMenuItem>
|
||||
{isOwner && (
|
||||
{canEdit && (
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
disabled={!isOwner}
|
||||
disabled={!canEdit}
|
||||
className="cursor-pointer rounded-lg text-text-secondary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { memo, useState, useRef, useMemo, useCallback, KeyboardEvent } from 'react';
|
||||
import { EarthIcon, Pen } from 'lucide-react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { SystemRoles, type TPromptGroup } from 'librechat-data-provider';
|
||||
import { PERMISSION_BITS, type TPromptGroup } from 'librechat-data-provider';
|
||||
import {
|
||||
Input,
|
||||
Label,
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
} from '@librechat/client';
|
||||
import { useDeletePromptGroup, useUpdatePromptGroup } from '~/data-provider';
|
||||
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
import { useLocalize, useResourcePermissions } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface DashGroupItemProps {
|
||||
|
|
@ -25,12 +25,14 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
|
|||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
|
||||
const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const [nameInputValue, setNameInputValue] = useState(group.name);
|
||||
|
||||
const isOwner = useMemo(() => user?.id === group.author, [user?.id, group.author]);
|
||||
const { hasPermission } = useResourcePermissions('promptGroup', group._id || '');
|
||||
const canEdit = hasPermission(PERMISSION_BITS.EDIT);
|
||||
const canDelete = hasPermission(PERMISSION_BITS.DELETE);
|
||||
|
||||
const isGlobalGroup = useMemo(
|
||||
() => instanceProjectId && group.projectIds?.includes(instanceProjectId),
|
||||
[group.projectIds, instanceProjectId],
|
||||
|
|
@ -105,78 +107,78 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
|
|||
aria-label={localize('com_ui_global_group')}
|
||||
/>
|
||||
)}
|
||||
{(isOwner || user?.role === SystemRoles.ADMIN) && (
|
||||
<>
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
aria-label={localize('com_ui_rename_prompt') + ' ' + group.name}
|
||||
>
|
||||
<Pen className="icon-sm text-text-primary" aria-hidden="true" />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_rename_prompt')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Input
|
||||
value={nameInputValue}
|
||||
onChange={(e) => setNameInputValue(e.target.value)}
|
||||
className="w-full"
|
||||
aria-label={localize('com_ui_rename_prompt') + ' ' + group.name}
|
||||
/>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
aria-label={localize('com_ui_rename_prompt') + ' ' + group.name}
|
||||
>
|
||||
<Pen className="icon-sm text-text-primary" aria-hidden="true" />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_rename_prompt')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Input
|
||||
value={nameInputValue}
|
||||
onChange={(e) => setNameInputValue(e.target.value)}
|
||||
className="w-full"
|
||||
aria-label={localize('com_ui_rename_prompt') + ' ' + group.name}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: handleSaveRename,
|
||||
selectClasses:
|
||||
'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
|
||||
selectText: localize('com_ui_save'),
|
||||
isLoading,
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
</div>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: handleSaveRename,
|
||||
selectClasses:
|
||||
'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
|
||||
selectText: localize('com_ui_save'),
|
||||
isLoading,
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
)}
|
||||
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={localize('com_ui_delete_prompt') + ' ' + group.name}
|
||||
>
|
||||
<TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_prompt')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
|
||||
{localize('com_ui_delete_confirm')} <strong>{group.name}</strong>
|
||||
</Label>
|
||||
</div>
|
||||
{canDelete && (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={localize('com_ui_delete_prompt') + ' ' + group.name}
|
||||
>
|
||||
<TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_prompt')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
|
||||
{localize('com_ui_delete_confirm')} <strong>{group.name}</strong>
|
||||
</Label>
|
||||
</div>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: triggerDelete,
|
||||
selectClasses:
|
||||
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: triggerDelete,
|
||||
selectClasses:
|
||||
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ import { Menu, Rocket } from 'lucide-react';
|
|||
import { useForm, FormProvider } from 'react-hook-form';
|
||||
import { useParams, useOutletContext } from 'react-router-dom';
|
||||
import { Button, Skeleton, useToastContext } from '@librechat/client';
|
||||
import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import { Permissions, PermissionTypes, PERMISSION_BITS } from 'librechat-data-provider';
|
||||
import type { TCreatePrompt, TPrompt, TPromptGroup } from 'librechat-data-provider';
|
||||
import {
|
||||
useGetPrompts,
|
||||
useCreatePrompt,
|
||||
useGetPromptGroup,
|
||||
useAddPromptToGroup,
|
||||
useUpdatePromptGroup,
|
||||
useMakePromptProduction,
|
||||
} from '~/data-provider';
|
||||
import { useAuthContext, usePromptGroupsNav, useHasAccess, useLocalize } from '~/hooks';
|
||||
import { useResourcePermissions, usePromptGroupsNav, useHasAccess, useLocalize } from '~/hooks';
|
||||
import CategorySelector from './Groups/CategorySelector';
|
||||
import NoPromptGroup from './Groups/NoPromptGroup';
|
||||
import PromptVariables from './PromptVariables';
|
||||
|
|
@ -39,6 +39,7 @@ interface RightPanelProps {
|
|||
selectionIndex: number;
|
||||
selectedPromptId?: string;
|
||||
isLoadingPrompts: boolean;
|
||||
canEdit: boolean;
|
||||
setSelectionIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +50,7 @@ const RightPanel = React.memo(
|
|||
selectedPrompt,
|
||||
selectedPromptId,
|
||||
isLoadingPrompts,
|
||||
canEdit,
|
||||
selectionIndex,
|
||||
setSelectionIndex,
|
||||
}: RightPanelProps) => {
|
||||
|
|
@ -84,16 +86,19 @@ const RightPanel = React.memo(
|
|||
<div className="mb-2 flex flex-col lg:flex-row lg:items-center lg:justify-center lg:gap-x-2 xl:flex-row xl:space-y-0">
|
||||
<CategorySelector
|
||||
currentCategory={groupCategory}
|
||||
onValueChange={(value) =>
|
||||
updateGroupMutation.mutate({
|
||||
id: groupId,
|
||||
payload: { name: groupName, category: value },
|
||||
})
|
||||
onValueChange={
|
||||
canEdit
|
||||
? (value) =>
|
||||
updateGroupMutation.mutate({
|
||||
id: groupId,
|
||||
payload: { name: groupName, category: value },
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<div className="mt-2 flex flex-row items-center justify-center gap-x-2 lg:mt-0">
|
||||
{hasShareAccess && <SharePrompt group={group} disabled={isLoadingGroup} />}
|
||||
{editorMode === PromptsEditorMode.ADVANCED && (
|
||||
{editorMode === PromptsEditorMode.ADVANCED && canEdit && (
|
||||
<Button
|
||||
variant="submit"
|
||||
size="sm"
|
||||
|
|
@ -115,7 +120,8 @@ const RightPanel = React.memo(
|
|||
isLoadingGroup ||
|
||||
!selectedPrompt ||
|
||||
selectedPrompt._id === group?.productionId ||
|
||||
makeProductionMutation.isLoading
|
||||
makeProductionMutation.isLoading ||
|
||||
!canEdit
|
||||
}
|
||||
>
|
||||
<Rocket className="size-5 cursor-pointer text-white" />
|
||||
|
|
@ -154,7 +160,6 @@ RightPanel.displayName = 'RightPanel';
|
|||
const PromptForm = () => {
|
||||
const params = useParams();
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const { showToast } = useToastContext();
|
||||
const alwaysMakeProd = useRecoilValue(store.alwaysMakeProd);
|
||||
const promptId = params.promptId || '';
|
||||
|
|
@ -175,7 +180,14 @@ const PromptForm = () => {
|
|||
{ enabled: !!promptId },
|
||||
);
|
||||
|
||||
const isOwner = useMemo(() => (user && group ? user.id === group.author : false), [user, group]);
|
||||
// Check permissions for the promptGroup
|
||||
const { hasPermission, isLoading: permissionsLoading } = useResourcePermissions(
|
||||
'promptGroup',
|
||||
group?._id || '',
|
||||
);
|
||||
|
||||
const canEdit = hasPermission(PERMISSION_BITS.EDIT);
|
||||
const canView = hasPermission(PERMISSION_BITS.VIEW);
|
||||
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
|
|
@ -206,13 +218,12 @@ const PromptForm = () => {
|
|||
});
|
||||
|
||||
const makeProductionMutation = useMakePromptProduction();
|
||||
|
||||
const createPromptMutation = useCreatePrompt({
|
||||
const addPromptToGroupMutation = useAddPromptToGroup({
|
||||
onMutate: (variables) => {
|
||||
reset(
|
||||
{
|
||||
prompt: variables.prompt.prompt,
|
||||
category: variables.group ? variables.group.category : '',
|
||||
category: group?.category || '',
|
||||
},
|
||||
{ keepDirtyValues: true },
|
||||
);
|
||||
|
|
@ -228,14 +239,17 @@ const PromptForm = () => {
|
|||
|
||||
reset({
|
||||
prompt: data.prompt.prompt,
|
||||
promptName: data.group ? data.group.name : '',
|
||||
category: data.group ? data.group.category : '',
|
||||
promptName: group?.name || '',
|
||||
category: group?.category || '',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSave = useCallback(
|
||||
(value: string) => {
|
||||
if (!canEdit) {
|
||||
return;
|
||||
}
|
||||
if (!value) {
|
||||
// TODO: show toast, cannot be empty.
|
||||
return;
|
||||
|
|
@ -243,10 +257,17 @@ const PromptForm = () => {
|
|||
if (!selectedPrompt) {
|
||||
return;
|
||||
}
|
||||
|
||||
const groupId = selectedPrompt.groupId || group?._id;
|
||||
if (!groupId) {
|
||||
console.error('No groupId available');
|
||||
return;
|
||||
}
|
||||
|
||||
const tempPrompt: TCreatePrompt = {
|
||||
prompt: {
|
||||
type: selectedPrompt.type ?? 'text',
|
||||
groupId: selectedPrompt.groupId ?? '',
|
||||
groupId: groupId,
|
||||
prompt: value,
|
||||
},
|
||||
};
|
||||
|
|
@ -255,9 +276,10 @@ const PromptForm = () => {
|
|||
return;
|
||||
}
|
||||
|
||||
createPromptMutation.mutate(tempPrompt);
|
||||
// We're adding to an existing group, so use the addPromptToGroup mutation
|
||||
addPromptToGroupMutation.mutate({ ...tempPrompt, groupId });
|
||||
},
|
||||
[selectedPrompt, createPromptMutation],
|
||||
[selectedPrompt, group, addPromptToGroupMutation, canEdit],
|
||||
);
|
||||
|
||||
const handleLoadingComplete = useCallback(() => {
|
||||
|
|
@ -268,11 +290,11 @@ const PromptForm = () => {
|
|||
}, [isLoadingGroup, isLoadingPrompts]);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevIsEditingRef.current && !isEditing) {
|
||||
if (prevIsEditingRef.current && !isEditing && canEdit) {
|
||||
handleSubmit((data) => onSave(data.prompt))();
|
||||
}
|
||||
prevIsEditingRef.current = isEditing;
|
||||
}, [isEditing, onSave, handleSubmit]);
|
||||
}, [isEditing, onSave, handleSubmit, canEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
handleLoadingComplete();
|
||||
|
|
@ -334,16 +356,19 @@ const PromptForm = () => {
|
|||
return <SkeletonForm />;
|
||||
}
|
||||
|
||||
if (!isOwner && groupsQuery.data && user?.role !== SystemRoles.ADMIN) {
|
||||
// Show read-only view if user doesn't have edit permission
|
||||
if (!canEdit && !permissionsLoading && groupsQuery.data) {
|
||||
const fetchedPrompt = findPromptGroup(
|
||||
groupsQuery.data,
|
||||
(group) => group._id === params.promptId,
|
||||
);
|
||||
if (!fetchedPrompt) {
|
||||
if (!fetchedPrompt && !canView) {
|
||||
return <NoPromptGroup />;
|
||||
}
|
||||
|
||||
return <PromptDetails group={fetchedPrompt} />;
|
||||
if (fetchedPrompt || group) {
|
||||
return <PromptDetails group={fetchedPrompt || group} />;
|
||||
}
|
||||
}
|
||||
|
||||
if (!group || group._id == null) {
|
||||
|
|
@ -373,10 +398,13 @@ const PromptForm = () => {
|
|||
<PromptName
|
||||
name={groupName}
|
||||
onSave={(value) => {
|
||||
if (!group._id) {
|
||||
if (!canEdit || !group._id) {
|
||||
return;
|
||||
}
|
||||
updateGroupMutation.mutate({ id: group._id, payload: { name: value } });
|
||||
updateGroupMutation.mutate({
|
||||
id: group._id,
|
||||
payload: { name: value },
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1" />
|
||||
|
|
@ -398,6 +426,7 @@ const PromptForm = () => {
|
|||
selectionIndex={selectionIndex}
|
||||
selectedPromptId={selectedPromptId}
|
||||
isLoadingPrompts={isLoadingPrompts}
|
||||
canEdit={canEdit}
|
||||
setSelectionIndex={setSelectionIndex}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -409,15 +438,21 @@ const PromptForm = () => {
|
|||
<Skeleton className="h-96" aria-live="polite" />
|
||||
) : (
|
||||
<div className="mb-2 flex h-full flex-col gap-4">
|
||||
<PromptEditor name="prompt" isEditing={isEditing} setIsEditing={setIsEditing} />
|
||||
<PromptEditor
|
||||
name="prompt"
|
||||
isEditing={isEditing}
|
||||
setIsEditing={(value) => canEdit && setIsEditing(value)}
|
||||
/>
|
||||
<PromptVariables promptText={promptText} />
|
||||
<Description
|
||||
initialValue={group.oneliner ?? ''}
|
||||
onValueChange={handleUpdateOneliner}
|
||||
onValueChange={canEdit ? handleUpdateOneliner : undefined}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
<Command
|
||||
initialValue={group.command ?? ''}
|
||||
onValueChange={handleUpdateCommand}
|
||||
onValueChange={canEdit ? handleUpdateCommand : undefined}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -432,6 +467,7 @@ const PromptForm = () => {
|
|||
selectedPrompt={selectedPrompt}
|
||||
selectedPromptId={selectedPromptId}
|
||||
isLoadingPrompts={isLoadingPrompts}
|
||||
canEdit={canEdit}
|
||||
setSelectionIndex={setSelectionIndex}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -471,6 +507,7 @@ const PromptForm = () => {
|
|||
selectedPrompt={selectedPrompt}
|
||||
selectedPromptId={selectedPromptId}
|
||||
isLoadingPrompts={isLoadingPrompts}
|
||||
canEdit={canEdit}
|
||||
setSelectionIndex={setSelectionIndex}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,90 +1,57 @@
|
|||
import React, { useEffect, useMemo } from 'react';
|
||||
import React from 'react';
|
||||
import { Share2Icon } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
OGDialog,
|
||||
OGDialogTitle,
|
||||
OGDialogClose,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type {
|
||||
TPromptGroup,
|
||||
TStartupConfig,
|
||||
TUpdatePromptGroupPayload,
|
||||
SystemRoles,
|
||||
Permissions,
|
||||
PermissionTypes,
|
||||
PERMISSION_BITS,
|
||||
} from 'librechat-data-provider';
|
||||
import { useUpdatePromptGroup, useGetStartupConfig } from '~/data-provider';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { Button } from '@librechat/client';
|
||||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import { useAuthContext, useHasAccess, useResourcePermissions } from '~/hooks';
|
||||
import { GenericGrantAccessDialog } from '~/components/Sharing';
|
||||
|
||||
type FormValues = {
|
||||
[Permissions.SHARED_GLOBAL]: boolean;
|
||||
};
|
||||
const SharePrompt = React.memo(
|
||||
({ group, disabled }: { group?: TPromptGroup; disabled: boolean }) => {
|
||||
const { user } = useAuthContext();
|
||||
|
||||
const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: boolean }) => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const updateGroup = useUpdatePromptGroup();
|
||||
const { data: startupConfig = {} as TStartupConfig, isFetching } = useGetStartupConfig();
|
||||
const { instanceProjectId } = startupConfig;
|
||||
const groupIsGlobal = useMemo(
|
||||
() => ((group?.projectIds ?? []) as string[]).includes(instanceProjectId as string),
|
||||
[group, instanceProjectId],
|
||||
);
|
||||
|
||||
const {
|
||||
control,
|
||||
setValue,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
[Permissions.SHARED_GLOBAL]: groupIsGlobal,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setValue(Permissions.SHARED_GLOBAL, groupIsGlobal);
|
||||
}, [groupIsGlobal, setValue]);
|
||||
|
||||
if (group == null || !instanceProjectId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
const groupId = group._id ?? '';
|
||||
if (groupId === '' || !instanceProjectId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data[Permissions.SHARED_GLOBAL] === true && groupIsGlobal) {
|
||||
showToast({
|
||||
message: localize('com_ui_prompt_already_shared_to_all'),
|
||||
status: 'info',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {} as TUpdatePromptGroupPayload;
|
||||
if (data[Permissions.SHARED_GLOBAL] === true) {
|
||||
payload.projectIds = [startupConfig.instanceProjectId];
|
||||
} else {
|
||||
payload.removeProjectIds = [startupConfig.instanceProjectId];
|
||||
}
|
||||
|
||||
updateGroup.mutate({
|
||||
id: groupId,
|
||||
payload,
|
||||
// Check if user has permission to share prompts globally
|
||||
const hasAccessToSharePrompts = useHasAccess({
|
||||
permissionType: PermissionTypes.PROMPTS,
|
||||
permission: Permissions.SHARED_GLOBAL,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
// Check user's permissions on this specific promptGroup
|
||||
// The query will be disabled if groupId is empty
|
||||
const groupId = group?._id || '';
|
||||
const { hasPermission, isLoading: permissionsLoading } = useResourcePermissions(
|
||||
'promptGroup',
|
||||
groupId,
|
||||
);
|
||||
|
||||
// Early return if no group
|
||||
if (!group || !groupId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const canShareThisPrompt = hasPermission(PERMISSION_BITS.SHARE);
|
||||
|
||||
const shouldShowShareButton =
|
||||
(group.author === user?.id || user?.role === SystemRoles.ADMIN || canShareThisPrompt) &&
|
||||
hasAccessToSharePrompts &&
|
||||
!permissionsLoading;
|
||||
|
||||
if (!shouldShowShareButton) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<GenericGrantAccessDialog
|
||||
resourceDbId={groupId}
|
||||
resourceName={group.name}
|
||||
resourceType="promptGroup"
|
||||
disabled={disabled}
|
||||
>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
|
|
@ -94,50 +61,11 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
|
|||
>
|
||||
<Share2Icon className="size-5 cursor-pointer text-white" />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="w-11/12 max-w-lg" role="dialog" aria-labelledby="dialog-title">
|
||||
<OGDialogTitle id="dialog-title" className="truncate pr-2" title={group.name}>
|
||||
{localize('com_ui_share_var', { 0: `"${group.name}"` })}
|
||||
</OGDialogTitle>
|
||||
<form className="p-2" onSubmit={handleSubmit(onSubmit)} aria-describedby="form-description">
|
||||
<div id="form-description" className="sr-only">
|
||||
{localize('com_ui_share_form_description')}
|
||||
</div>
|
||||
<div className="mb-4 flex items-center justify-between gap-2 py-4">
|
||||
<div className="flex items-center" id="share-to-all-users">
|
||||
{localize('com_ui_share_to_all_users')}
|
||||
</div>
|
||||
<Controller
|
||||
name={Permissions.SHARED_GLOBAL}
|
||||
control={control}
|
||||
disabled={isFetching === true || updateGroup.isLoading || !instanceProjectId}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-labelledby="share-to-all-users"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<OGDialogClose asChild>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isFetching}
|
||||
variant="submit"
|
||||
aria-label={localize('com_ui_save')}
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</Button>
|
||||
</OGDialogClose>
|
||||
</div>
|
||||
</form>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
</GenericGrantAccessDialog>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
SharePrompt.displayName = 'SharePrompt';
|
||||
|
||||
export default SharePrompt;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue