mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 03:10:15 +01:00
🗨️ feat: Prompts (#3131)
* 🗨️ feat: Prompts (#7) * WIP: MERGE prompts/frontend (#1) * added schema for prompt and promptgroup, added model methods for prompts, added routes for prompts * * updated promptGroup Schema * updated model methods for prompts (get, add, delete) * slight fixes in prompt routes * * Created Files Management components * Created Vector Stores components * Added file management route in the routes folder * Completed UI for Files list, Compeleted UI for vector stores list, Completed UI for upload file modal, Completed UI for preview file, Completed UI for preview vector store * Fixed style and UI fixes for file dashboard, file list and vector stores list * added responsiveness classes for vector store page * fixed responsiveness of file page, dashboard page, and main page * fixed styling and responsiveness issues on dashboard page, file list page and vector store page * added queries and mutations for prompts and promptGroups, added relevant endpoints in data-provider, added relevant components prompts, added and updated relevant APIs * added types on mutation queries data service, updated prompt attributes * feature: Prompts and prompt groups management, added relevant APIs, added types for data service/queries/mutations, added relevant mutation and queries * chore: typing clarifications * added drop down on prompts mgmt dashboard * Fixes: fixed version switching issue on tags update or labels update, added cross button on create prompt group, fixed list updation on prompt group renaiming, added CSV upload button * Feature: Added oneliner and category attributes in prompt group, added schema for categories, added schema methods and route for categories * chore: typing and lint issues * chore: more type and linter fixes * chore: linting * chore: prompt controller and backend typing example; MOVE TO CONTROLLER DIRECTORY * chore: more type fixes * style: prompt name changes * chore: more type changes, and stateful prompt name change without flickering * fix: Return result of savePrompt in patchPrompt API endpoint * fix: navigation prompt queries; refactor: name 'prompt-groups' to just 'groups' * refactor: fetch prompt groups rewrite * refactor(prompts): query/mutation statefulness * refactor: remove `isActive` field * refactor: remove labels, consolidate logic * style: width, layout shift * refactor: improve hover toggle behavior and styling * refactor: add useParams hook to PromptListItem for dynamic rendering and add timeout ref for blur timeout * chore: hide upload button * refactor: import Button component from correct location in PromptSidePanel * style: prompt editor styling * style: fix more layout shifts * style: container scroll * refactor: Rename CreatePrompt component to CreatePromptForm * refactor: use react-hook-form * refactor: Add Prompts components and routes to Dashboard * style: skeletons for loading * fix: optimize makePromptProduction * refactor: consolidate variables * feat: create prompt form validation * refactor: Consolidate variables and update mutation hooks * style: minor touchups * chore: Update lucide-react npm dependency to version 0.394.0 and npm audit fix * refactor: add a new icon for the Prompts heading. * style: Update PromptsView heading to use h1 instead of h2 and other minor margin issues * chore: wording * refactor: Update PromptsView heading to use h1 instead of h2, consolidate variables, and add new icons * refactor: Prompts Button for Mobile * feature: added category field in prompt group, added relevant API and static data on BE to support FE UI for category in prompt group * chore: template for prompt cards --------- Co-authored-by: Fawadpot <contactfawada@gmail.com> * WIP: Prompts/frontend Continued (#2) * chore: loading style, remove unused component * feat: Add CategorySelector component for prompt group category selection * feat: add categories to create prompt * feat: prompt versions styling * feat: optimistic updates for prompt production state * refactor: optimize form state and show if prompt field is dirty with cross icon, also other styling changes * chore: remove unused code and localizations * fix: light mode styling * WIP: SidePanel Prompts * refactor: move to groups directory * refactor: rename GroupsSidePanel to GroupSidePanel and update imports * style: ListCard * refactor: isProduction changes * refactor: infinite query with productionPrompt * refactor: optimize snippets and prompts, and styling * refactor: Update getSnippet function to accept a length parameter * chore: localizations * feat: prompts navigation to chat and vice versa * fix: create prompt * feat: remember last selected category for creating prompts * fix(promptGroups): fix pagination and add usePromptGroupsNav hook * Prompts/frontend 3 (#3) * fix: stateful issues with prompt groups * style: improved layout * refactor: improve variable naming in Eng.ts * refactor: theme selector styling improvements * added prompt cards on chat new page, with dark mode, added API to fetch random prompts, added types for useQuery Slightly improved usePromptGroupNav logic to fetch updated result for pageSize, updated prompt cards view with darkmode and responsiveness fixed page size option buttons styling to match the theme added dark mode on create prompt page and prompt edit/preview page fixed page size option buttons styling to match the theme added dark mode on create prompt page and prompt edit/preview page * WIP: Prompts/frontend (#4) * fix: optimize and fix paginated query * fix: remove unique constraint on names * refactor: button links and styling * style: menu border light mode * feat: Add Auto-Send Switch component for prompts groups * refactor(ChatView): use form context for submission text * chore: clear convo state on navigation to dashboard routes * chore: save prompt edit name on tab, remove console log * feat: basic prompt submission * refactor: move Auto-Send Switch * style(ListCard): border styling * feat: Add function to detect variables in text * feat: Add OriginalDialog component to UI library * chore(ui): Update SelectDropDown options list class to use text-xs size * refactor: submitMessage hook now includes submitPrompt, make compatible to document query selector * WIP: Variable Dialog * feat: variable submission working for both auto-send and non-autosend * feat: dashboard breadcrumbs and prompts/chat navigation * refactor: dashboard breadcrumb and dashboard link to chat navigation * refactor: Update VariableDialog and VariableForm styles * Prompts: Admin features (#5) * fix: link issue * fix: usePromptGroupsNav add missing dep. * style: dashbreadcrumb and sidepanel text color * temp fix: remove refetch on pageNumber change * fix: handle multiple variable replacement * WIP: create project schema and add project groups to fetch * feat: Add functionality to add prompt group IDs to a project * feat: Add caching for startup config in config route * chore: remove prompt landing * style: Update Skeleton component with additional background styling * chore: styling and types * WIP: SharePrompt first draft * feat(SharePrompt): form validation * feat: shared global indicators * refactor: prompt details * refactor: change NoPromptGroup directory * feat: preview prompt * feat: remove/add global prompts, add rbac-related enums * refactor: manage prompts location * WIP: first draft admin settings for prompts * feat: SystemRoles enum * refactor: update PromptDetails component styling * style: ellipsis custom class for showing more preview text * WIP: initial role schema and initialization * style: improved margins for single unordered lists * fix: use custom chat form context to prevent re-renders from FormProvider * feat: Role mutations for Prompt Permissions * feat: fetch user role * feat: update AdminSettings form default values from user role values * refactor: rename PromptPermissions to Permissions for general definitions * feat: initial role checks * feat: Add optional `bodyProps` parameter to generateCheckAccess middleware * refactor: UI access checks * Prompts: delete (#6) * Fixed delete prompt version API, fixed types and logic for prompt version deletion, updated prompt delete mutation logic * chore: Update return type of deletePrompt function in Prompt.js --------- Co-authored-by: Fawadpot <contactfawada@gmail.com> * chore: Update package-lock.json version to 0.7.4-rc1 and fast-xml-parser to 4.4.0 * feat: toast for saving admin settings, add timer no-access navigation * feat: always make prod * feat: Add localization to category labels in CategorySelector component * feat: Update category label localization in CategorySelector component * fix: Enable making prompt production in Prompt API --------- Co-authored-by: Fawadpot <contactfawada@gmail.com> * feat: Add helper fn for dark mode detection in ThemeProvider * style: surface-primary definition * fix(useHasAccess): utilize user.role and not just USER role * fix: empty category and role fetch * refactort: increase max height to options list and use label if no localization is found * fix: update CategorySelector to handle empty category value and improve localization * refactor: move prompts to own store/reactquery modules, add in filter WIP * refactor: Rename AutoSendSwitch to AutoSendPrompt * style: theming commit * style: fix slight coloring issue for convos in dark mode * style: better composition for prompts side panel * style: remove gray-750 and make it gray-850 * chore: adjust theming * feat: filter all prompt groups and properly remove prompts from projects * refactor: optimize delete prompt groups further * chore: localization * feat: Add uniqueProperty filtering to normalizeData function * WIP: filter prompts * chore: Update FilterPrompts component to include User icon in FilterItem * feat(FilterPrompts): set categories * feat: more system filters and show selected category icon * style: always make prod, flips switch to avoid mis-clicks * style: ui/ux loading/no prompts * chore: style FilterPrompts ChatView * fix: handle missing role edge case * style: special variables * feat: special variables * refactor: improve replaceSpecialVars function in prompts.ts * feat: simple/advanced editor modes * chore: bump versions * feat: localizations and hide production button on simple mode * fix: error connecting layout shift * fix: prompts CRUD for admins * fix: secure single group fetch * style: sidepanel styling * style(PromptName): bring edit button closer to name * style: mobile prompts header * style: mobile prompts header continued * style: align send prompts switch right * feat: description * Update special variables description in Eng.ts * feat: update/create/preview oneliner * fix: allow empty oneliner update * style: loading improvement and always make selected prompt Production if simple mode * fix: production index set and remove unused props * fix(ci): mock initializeRoles * fix: address #3128 * fix: address #3128 * feat: add deletion confirmation dialog * fix: mobile UI issues * style: prompt library UI update * style: focus, logcal tab order * style: Refactor SelectDropDown component to improve code readability and maintainability * chore: bump data-provider * chore: fix labels * refactor: confirm delete prompt version --------- Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Danny Avila
GitHub
parent
302b28fc9b
commit
0cd3c83328
216 changed files with 8741 additions and 797 deletions
162
client/src/components/Prompts/AdminSettings.tsx
Normal file
162
client/src/components/Prompts/AdminSettings.tsx
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import { useMemo, useEffect } 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 { useToastContext } from '~/Providers';
|
||||
|
||||
type FormValues = Record<Permissions, boolean>;
|
||||
|
||||
type LabelControllerProps = {
|
||||
label: string;
|
||||
promptPerm: Permissions;
|
||||
control: Control<FormValues, unknown, FormValues>;
|
||||
setValue: UseFormSetValue<FormValues>;
|
||||
getValues: UseFormGetValues<FormValues>;
|
||||
};
|
||||
|
||||
const defaultValues = roleDefaults[SystemRoles.USER];
|
||||
|
||||
const LabelController: React.FC<LabelControllerProps> = ({
|
||||
control,
|
||||
promptPerm,
|
||||
label,
|
||||
getValues,
|
||||
setValue,
|
||||
}) => (
|
||||
<div className="mb-4 flex items-center justify-between gap-2">
|
||||
<label
|
||||
className="cursor-pointer select-none"
|
||||
htmlFor={promptPerm}
|
||||
onClick={() =>
|
||||
setValue(promptPerm, !getValues(promptPerm), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<Controller
|
||||
name={promptPerm}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field?.value?.toString()}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AdminSettings = () => {
|
||||
const localize = useLocalize();
|
||||
const { user, roles } = useAuthContext();
|
||||
const { showToast } = useToastContext();
|
||||
const { mutate, isLoading } = useUpdatePromptPermissionsMutation({
|
||||
onSuccess: () => {
|
||||
showToast({ status: 'success', message: localize('com_endpoint_preset_saved') });
|
||||
},
|
||||
onError: () => {
|
||||
showToast({ status: 'error', message: localize('com_ui_error_save_admin_settings') });
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues: useMemo(() => {
|
||||
if (roles?.[SystemRoles.USER]) {
|
||||
return roles[SystemRoles.USER][PermissionTypes.PROMPTS];
|
||||
}
|
||||
|
||||
return defaultValues[PermissionTypes.PROMPTS];
|
||||
}, [roles]),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (roles?.[SystemRoles.USER]?.[PermissionTypes.PROMPTS]) {
|
||||
reset(roles[SystemRoles.USER][PermissionTypes.PROMPTS]);
|
||||
}
|
||||
}, [roles, reset]);
|
||||
|
||||
if (user?.role !== SystemRoles.ADMIN) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labelControllerData = [
|
||||
{
|
||||
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'),
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
mutate({ roleName: SystemRoles.USER, updates: data });
|
||||
};
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="h-10 w-fit gap-1 border transition-all dark:bg-transparent"
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" />
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminSettings;
|
||||
39
client/src/components/Prompts/AdvancedSwitch.tsx
Normal file
39
client/src/components/Prompts/AdvancedSwitch.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { useRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { Tabs, TabsList, TabsTrigger } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import store from '~/store';
|
||||
const { PromptsEditorMode, promptsEditorMode, alwaysMakeProd } = store;
|
||||
|
||||
const AdvancedSwitch = () => {
|
||||
const localize = useLocalize();
|
||||
const [mode, setMode] = useRecoilState(promptsEditorMode);
|
||||
const setAlwaysMakeProd = useSetRecoilState(alwaysMakeProd);
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
defaultValue={mode}
|
||||
className="w-auto rounded-lg"
|
||||
onValueChange={(value) => {
|
||||
value === PromptsEditorMode.SIMPLE && setAlwaysMakeProd(true);
|
||||
setMode(value);
|
||||
}}
|
||||
>
|
||||
<TabsList className="grid w-auto grid-cols-2 bg-surface-tertiary">
|
||||
<TabsTrigger
|
||||
value={PromptsEditorMode.SIMPLE}
|
||||
className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
|
||||
>
|
||||
{localize('com_ui_simple')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value={PromptsEditorMode.ADVANCED}
|
||||
className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
|
||||
>
|
||||
{localize('com_ui_advanced')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedSwitch;
|
||||
26
client/src/components/Prompts/BackToChat.tsx
Normal file
26
client/src/components/Prompts/BackToChat.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { buttonVariants } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function BackToChat({ className }: { className?: string }) {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
|
||||
event.preventDefault();
|
||||
navigate('/c/new');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<a
|
||||
className={cn(buttonVariants({ variant: 'outline' }), className)}
|
||||
href="/"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
<ArrowLeft className="icon-xs mr-2" />
|
||||
{localize('com_ui_back_to_chat')}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
60
client/src/components/Prompts/DeleteVersion.tsx
Normal file
60
client/src/components/Prompts/DeleteVersion.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Button, Dialog, DialogTrigger, Label } from '~/components/ui';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { TrashIcon } from '~/components/svg';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const DeleteVersion = ({
|
||||
name,
|
||||
disabled,
|
||||
selectHandler,
|
||||
}: {
|
||||
name: string;
|
||||
disabled?: boolean;
|
||||
selectHandler: () => void;
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
size={'sm'}
|
||||
className="h-10 w-10 border border-transparent bg-red-600 text-red-500 transition-all hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-800"
|
||||
disabled={disabled}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="icon-lg cursor-pointer text-white dark:text-white" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_prompt')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<>
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label
|
||||
htmlFor="dialog-delete-confirm-prompt"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{localize('com_ui_delete_confirm_prompt_version_var', name)}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
selection={{
|
||||
selectHandler,
|
||||
selectClasses:
|
||||
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteVersion;
|
||||
63
client/src/components/Prompts/Description.tsx
Normal file
63
client/src/components/Prompts/Description.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { Info } from 'lucide-react';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const MAX_LENGTH = 56;
|
||||
|
||||
const Description = ({
|
||||
initialValue,
|
||||
onValueChange,
|
||||
disabled,
|
||||
tabIndex,
|
||||
}: {
|
||||
initialValue?: string;
|
||||
onValueChange?: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
tabIndex?: number;
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const [description, setDescription] = useState(initialValue || '');
|
||||
const [charCount, setCharCount] = useState(initialValue?.length || 0);
|
||||
|
||||
useEffect(() => {
|
||||
setDescription(initialValue || '');
|
||||
setCharCount(initialValue?.length || 0);
|
||||
}, [initialValue]);
|
||||
|
||||
useEffect(() => {
|
||||
setCharCount(description.length);
|
||||
}, [description]);
|
||||
|
||||
const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
if (e.target.value.length <= MAX_LENGTH) {
|
||||
setDescription(e.target.value);
|
||||
onValueChange?.(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
if (disabled && !description) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-border-medium">
|
||||
<h3 className="flex h-10 items-center gap-2 pl-4 text-sm text-text-secondary">
|
||||
<Info className="icon-sm" />
|
||||
<input
|
||||
type="text"
|
||||
tabIndex={tabIndex}
|
||||
disabled={disabled}
|
||||
placeholder={localize('com_ui_description_placeholder')}
|
||||
value={description}
|
||||
onChange={handleInputChange}
|
||||
className="w-full rounded-lg border-none bg-transparent p-1 text-text-primary placeholder:text-text-tertiary placeholder:underline placeholder:underline-offset-2 focus:bg-surface-tertiary focus:outline-none focus:ring-0 md:w-96"
|
||||
/>
|
||||
{!disabled && (
|
||||
<span className="mr-1 w-10 text-xs text-text-tertiary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Description;
|
||||
9
client/src/components/Prompts/EmptyPromptPreview.tsx
Normal file
9
client/src/components/Prompts/EmptyPromptPreview.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function EmptyPromptPreview() {
|
||||
return (
|
||||
<div className="h-full w-full content-center text-center font-bold dark:text-gray-200">
|
||||
Select or Create a Prompt
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
client/src/components/Prompts/Groups/AlwaysMakeProd.tsx
Normal file
35
client/src/components/Prompts/Groups/AlwaysMakeProd.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { useRecoilState } from 'recoil';
|
||||
import { Switch } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function AlwaysMakeProd({
|
||||
onCheckedChange,
|
||||
className = '',
|
||||
}: {
|
||||
onCheckedChange?: (value: boolean) => void;
|
||||
className?: string;
|
||||
}) {
|
||||
const [alwaysMakeProd, setAlwaysMakeProd] = useRecoilState<boolean>(store.alwaysMakeProd);
|
||||
const localize = useLocalize();
|
||||
|
||||
const handleCheckedChange = (value: boolean) => {
|
||||
setAlwaysMakeProd(value);
|
||||
if (onCheckedChange) {
|
||||
onCheckedChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('flex select-none items-center justify-end gap-2 text-xs', className)}>
|
||||
<Switch
|
||||
id="alwaysMakeProd"
|
||||
checked={alwaysMakeProd}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
data-testid="alwaysMakeProd"
|
||||
/>
|
||||
<div>{localize('com_nav_always_make_prod')} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
client/src/components/Prompts/Groups/AutoSendPrompt.tsx
Normal file
40
client/src/components/Prompts/Groups/AutoSendPrompt.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { useRecoilState } from 'recoil';
|
||||
import { Switch } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function AutoSendPrompt({
|
||||
onCheckedChange,
|
||||
className = '',
|
||||
}: {
|
||||
onCheckedChange?: (value: boolean) => void;
|
||||
className?: string;
|
||||
}) {
|
||||
const [autoSendPrompts, setAutoSendPrompts] = useRecoilState<boolean>(store.autoSendPrompts);
|
||||
const localize = useLocalize();
|
||||
|
||||
const handleCheckedChange = (value: boolean) => {
|
||||
setAutoSendPrompts(value);
|
||||
if (onCheckedChange) {
|
||||
onCheckedChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex select-none items-center justify-end gap-2 text-right text-sm',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div> {localize('com_nav_auto_send_prompts')} </div>
|
||||
<Switch
|
||||
id="autoSendPrompts"
|
||||
checked={autoSendPrompts}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
data-testid="autoSendPrompts"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
client/src/components/Prompts/Groups/CategoryIcon.tsx
Normal file
52
client/src/components/Prompts/Groups/CategoryIcon.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Dices,
|
||||
BoxIcon,
|
||||
PenLineIcon,
|
||||
LightbulbIcon,
|
||||
LineChartIcon,
|
||||
ShoppingBagIcon,
|
||||
PlaneTakeoffIcon,
|
||||
GraduationCapIcon,
|
||||
TerminalSquareIcon,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const categoryIconMap: Record<string, React.ElementType> = {
|
||||
misc: BoxIcon,
|
||||
roleplay: Dices,
|
||||
write: PenLineIcon,
|
||||
idea: LightbulbIcon,
|
||||
shop: ShoppingBagIcon,
|
||||
finance: LineChartIcon,
|
||||
code: TerminalSquareIcon,
|
||||
travel: PlaneTakeoffIcon,
|
||||
teach_or_explain: GraduationCapIcon,
|
||||
};
|
||||
|
||||
const categoryColorMap: Record<string, string> = {
|
||||
code: 'text-red-500',
|
||||
misc: 'text-blue-300',
|
||||
shop: 'text-purple-400',
|
||||
idea: 'text-yellow-300',
|
||||
write: 'text-purple-400',
|
||||
travel: 'text-yellow-300',
|
||||
finance: 'text-orange-400',
|
||||
roleplay: 'text-orange-400',
|
||||
teach_or_explain: 'text-blue-300',
|
||||
};
|
||||
|
||||
export default function CategoryIcon({
|
||||
category,
|
||||
className = '',
|
||||
}: {
|
||||
category: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const IconComponent = categoryIconMap[category];
|
||||
const colorClass = categoryColorMap[category] + ' ' + className;
|
||||
if (!IconComponent) {
|
||||
return null;
|
||||
}
|
||||
return <IconComponent className={cn(colorClass, className)} />;
|
||||
}
|
||||
60
client/src/components/Prompts/Groups/CategorySelector.tsx
Normal file
60
client/src/components/Prompts/Groups/CategorySelector.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { useFormContext, Controller } from 'react-hook-form';
|
||||
import { LocalStorageKeys } from 'librechat-data-provider';
|
||||
import { useLocalize, useCategories } from '~/hooks';
|
||||
import { SelectDropDown } from '~/components/ui';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const CategorySelector = ({
|
||||
currentCategory,
|
||||
onValueChange,
|
||||
className = '',
|
||||
tabIndex,
|
||||
}: {
|
||||
currentCategory?: string;
|
||||
onValueChange?: (value: string) => void;
|
||||
className?: string;
|
||||
tabIndex?: number;
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const { control, watch, setValue } = useFormContext();
|
||||
const { categories, emptyCategory } = useCategories();
|
||||
|
||||
const watchedCategory = watch('category');
|
||||
const categoryOption = useMemo(
|
||||
() =>
|
||||
categories.find((category) => category.value === (watchedCategory ?? currentCategory)) ??
|
||||
emptyCategory,
|
||||
[watchedCategory, categories, currentCategory, emptyCategory],
|
||||
);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name="category"
|
||||
control={control}
|
||||
render={() => (
|
||||
<SelectDropDown
|
||||
title="Category"
|
||||
tabIndex={tabIndex}
|
||||
value={categoryOption || ''}
|
||||
setValue={(value) => {
|
||||
setValue('category', value, { shouldDirty: false });
|
||||
localStorage.setItem(LocalStorageKeys.LAST_PROMPT_CATEGORY, value);
|
||||
onValueChange?.(value);
|
||||
}}
|
||||
availableValues={categories}
|
||||
showAbove={false}
|
||||
showLabel={false}
|
||||
emptyTitle={true}
|
||||
showOptionIcon={true}
|
||||
searchPlaceholder={localize('com_ui_search_var', localize('com_ui_categories'))}
|
||||
className={cn('h-10 w-56 cursor-pointer', className)}
|
||||
currentValueClass="text-md gap-2"
|
||||
optionsListClass="text-sm max-h-72"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategorySelector;
|
||||
114
client/src/components/Prompts/Groups/ChatGroupItem.tsx
Normal file
114
client/src/components/Prompts/Groups/ChatGroupItem.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { Menu as MenuIcon, Edit as EditIcon, EarthIcon, TextSearch } from 'lucide-react';
|
||||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from '~/components/ui';
|
||||
import { useLocalize, useSubmitMessage, useCustomLink, useAuthContext } from '~/hooks';
|
||||
import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
|
||||
import PreviewPrompt from '~/components/Prompts/PreviewPrompt';
|
||||
import ListCard from '~/components/Prompts/Groups/ListCard';
|
||||
import { detectVariables } from '~/utils';
|
||||
|
||||
export default function ChatGroupItem({
|
||||
group,
|
||||
instanceProjectId,
|
||||
}: {
|
||||
group: TPromptGroup;
|
||||
instanceProjectId?: string;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const { submitPrompt } = useSubmitMessage();
|
||||
const [isPreviewDialogOpen, setPreviewDialogOpen] = useState(false);
|
||||
const [isVariableDialogOpen, setVariableDialogOpen] = useState(false);
|
||||
const onEditClick = useCustomLink<HTMLDivElement>(`/d/prompts/${group._id}`);
|
||||
const groupIsGlobal = useMemo(
|
||||
() => instanceProjectId && group?.projectIds?.includes(instanceProjectId),
|
||||
[group, instanceProjectId],
|
||||
);
|
||||
const isOwner = useMemo(() => user?.id === group?.author, [user, group]);
|
||||
|
||||
const onCardClick = () => {
|
||||
const text = group.productionPrompt?.prompt ?? '';
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
const hasVariables = detectVariables(text);
|
||||
if (hasVariables) {
|
||||
return setVariableDialogOpen(true);
|
||||
}
|
||||
|
||||
submitPrompt(text);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListCard
|
||||
name={group.name}
|
||||
category={group.category ?? ''}
|
||||
onClick={onCardClick}
|
||||
snippet={group.oneliner ? group.oneliner : group?.productionPrompt?.prompt ?? ''}
|
||||
>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
{groupIsGlobal && <EarthIcon className="icon-md text-green-400" />}
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="z-50 h-7 w-7 p-0 transition-all duration-300 ease-in-out hover:border-white dark:bg-gray-800 dark:hover:border-gray-400 dark:focus:border-gray-500"
|
||||
>
|
||||
<MenuIcon className="icon-md dark:text-gray-300" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="z-50 mt-2 w-36 rounded-lg"
|
||||
collisionPadding={2}
|
||||
align="end"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewDialogOpen(true);
|
||||
}}
|
||||
className="w-full cursor-pointer rounded-lg disabled:cursor-not-allowed dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700"
|
||||
>
|
||||
<TextSearch className="mr-2 h-4 w-4" />
|
||||
<span>{localize('com_ui_preview')}</span>
|
||||
</DropdownMenuItem>
|
||||
{isOwner && (
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
disabled={!isOwner}
|
||||
className="cursor-pointer rounded-lg disabled:cursor-not-allowed dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEditClick(e);
|
||||
}}
|
||||
>
|
||||
<EditIcon className="mr-2 h-4 w-4" />
|
||||
<span>{localize('com_ui_edit')}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</ListCard>
|
||||
<PreviewPrompt group={group} open={isPreviewDialogOpen} onOpenChange={setPreviewDialogOpen} />
|
||||
<VariableDialog
|
||||
open={isVariableDialogOpen}
|
||||
onClose={() => setVariableDialogOpen(false)}
|
||||
group={group}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
178
client/src/components/Prompts/Groups/CreatePromptForm.tsx
Normal file
178
client/src/components/Prompts/Groups/CreatePromptForm.tsx
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
import { useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useForm, Controller, FormProvider } from 'react-hook-form';
|
||||
import { LocalStorageKeys, PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import CategorySelector from '~/components/Prompts/Groups/CategorySelector';
|
||||
import PromptVariables from '~/components/Prompts/PromptVariables';
|
||||
import { Button, TextareaAutosize, Input } from '~/components/ui';
|
||||
import Description from '~/components/Prompts/Description';
|
||||
import { useCreatePrompt } from '~/data-provider';
|
||||
import { useLocalize, useHasAccess } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
type CreateFormValues = {
|
||||
name: string;
|
||||
prompt: string;
|
||||
type: 'text' | 'chat';
|
||||
category: string;
|
||||
oneliner?: string;
|
||||
};
|
||||
|
||||
const defaultPrompt: CreateFormValues = {
|
||||
name: '',
|
||||
prompt: '',
|
||||
type: 'text',
|
||||
category: '',
|
||||
oneliner: undefined,
|
||||
};
|
||||
|
||||
const CreatePromptForm = ({
|
||||
defaultValues = defaultPrompt,
|
||||
}: {
|
||||
defaultValues?: CreateFormValues;
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const navigate = useNavigate();
|
||||
const hasAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.PROMPTS,
|
||||
permission: Permissions.CREATE,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutId: ReturnType<typeof setTimeout>;
|
||||
if (!hasAccess) {
|
||||
timeoutId = setTimeout(() => {
|
||||
navigate('/c/new');
|
||||
}, 1000);
|
||||
}
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [hasAccess, navigate]);
|
||||
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
...defaultValues,
|
||||
category: localStorage.getItem(LocalStorageKeys.LAST_PROMPT_CATEGORY) ?? '',
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
watch,
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isDirty, isSubmitting, errors, isValid },
|
||||
} = methods;
|
||||
|
||||
const createPromptMutation = useCreatePrompt({
|
||||
onSuccess: (response) => {
|
||||
navigate(`/d/prompts/${response.prompt.groupId}`, { replace: true });
|
||||
},
|
||||
});
|
||||
|
||||
const promptText = watch('prompt');
|
||||
|
||||
const onSubmit = (data: CreateFormValues) => {
|
||||
const { name, category, oneliner, ...rest } = data;
|
||||
const groupData = { name, category } as Pick<
|
||||
CreateFormValues,
|
||||
'name' | 'category' | 'oneliner'
|
||||
>;
|
||||
if ((oneliner?.length || 0) > 0) {
|
||||
groupData.oneliner = oneliner;
|
||||
}
|
||||
createPromptMutation.mutate({
|
||||
prompt: rest,
|
||||
group: groupData,
|
||||
});
|
||||
};
|
||||
|
||||
if (!hasAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="w-full px-4 py-2">
|
||||
<div className="mb-1 flex flex-col items-center justify-between font-bold sm:text-xl md:mb-0 md:text-2xl">
|
||||
<div className="flex w-full flex-col items-center justify-between sm:flex-row">
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{ required: localize('com_ui_is_required', localize('com_ui_prompt_name')) }}
|
||||
render={({ field }) => (
|
||||
<div className="mb-1 flex items-center md:mb-0">
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
className="mr-2 w-full border border-gray-300 p-2 text-2xl dark:border-gray-600"
|
||||
placeholder={`${localize('com_ui_prompt_name')}*`}
|
||||
tabIndex={1}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'mt-1 w-56 text-sm text-red-500',
|
||||
errors.name ? 'visible h-auto' : 'invisible h-0',
|
||||
)}
|
||||
>
|
||||
{errors.name ? errors.name.message : ' '}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<CategorySelector tabIndex={4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:mt-[1.075rem]">
|
||||
<div>
|
||||
<h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 pr-1 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
|
||||
{localize('com_ui_text_prompt')}*
|
||||
</h2>
|
||||
<div className="mb-4 min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 dark:border-gray-600">
|
||||
<Controller
|
||||
name="prompt"
|
||||
control={control}
|
||||
rules={{ required: localize('com_ui_is_required', localize('com_ui_text_prompt')) }}
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<TextareaAutosize
|
||||
{...field}
|
||||
className="w-full rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-transparent dark:text-gray-200"
|
||||
minRows={6}
|
||||
tabIndex={2}
|
||||
/>
|
||||
<div
|
||||
className={`mt-1 text-sm text-red-500 ${
|
||||
errors.prompt ? 'visible h-auto' : 'invisible h-0'
|
||||
}`}
|
||||
>
|
||||
{errors.prompt ? errors.prompt.message : ' '}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PromptVariables promptText={promptText} />
|
||||
<Description
|
||||
onValueChange={(value) => methods.setValue('oneliner', value)}
|
||||
tabIndex={3}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
tabIndex={5}
|
||||
type="submit"
|
||||
variant="default"
|
||||
disabled={!isDirty || isSubmitting || !isValid}
|
||||
>
|
||||
{localize('com_ui_create_var', localize('com_ui_prompt'))}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatePromptForm;
|
||||
217
client/src/components/Prompts/Groups/DashGroupItem.tsx
Normal file
217
client/src/components/Prompts/Groups/DashGroupItem.tsx
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
import { useState, useRef, useMemo } from 'react';
|
||||
import { MenuIcon, EarthIcon } from 'lucide-react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { SystemRoles, type TPromptGroup } from 'librechat-data-provider';
|
||||
import { useDeletePromptGroup, useUpdatePromptGroup } from '~/data-provider';
|
||||
import {
|
||||
Input,
|
||||
Label,
|
||||
Button,
|
||||
Dialog,
|
||||
DropdownMenu,
|
||||
DialogTrigger,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from '~/components/ui';
|
||||
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { RenameButton } from '~/components/Conversations';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
import { NewTrashIcon } from '~/components/svg';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
export default function DashGroupItem({
|
||||
group,
|
||||
instanceProjectId,
|
||||
}: {
|
||||
group: TPromptGroup;
|
||||
instanceProjectId?: string;
|
||||
}) {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
|
||||
const { user } = useAuthContext();
|
||||
const blurTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
const [nameEditFlag, setNameEditFlag] = useState(false);
|
||||
const [nameInputField, setNameInputField] = useState(group.name);
|
||||
const isOwner = useMemo(() => user?.id === group?.author, [user, group]);
|
||||
const groupIsGlobal = useMemo(
|
||||
() => instanceProjectId && group?.projectIds?.includes(instanceProjectId),
|
||||
[group, instanceProjectId],
|
||||
);
|
||||
|
||||
const updateGroup = useUpdatePromptGroup({
|
||||
onMutate: () => {
|
||||
clearTimeout(blurTimeoutRef.current);
|
||||
setNameEditFlag(false);
|
||||
},
|
||||
});
|
||||
const deletePromptGroupMutation = useDeletePromptGroup({
|
||||
onSuccess: (response, variables) => {
|
||||
if (variables.id === group._id) {
|
||||
navigate('/d/prompts');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const cancelRename = () => {
|
||||
setNameEditFlag(false);
|
||||
};
|
||||
|
||||
const saveRename = () => {
|
||||
updateGroup.mutate({ payload: { name: nameInputField }, id: group?._id || '' });
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
blurTimeoutRef.current = setTimeout(() => {
|
||||
cancelRename();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-100 mx-2 my-3 flex cursor-pointer flex-row rounded-md border-0 bg-white p-4 transition-all duration-300 ease-in-out hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600',
|
||||
params.promptId === group._id && 'bg-gray-100/50 dark:bg-gray-600 ',
|
||||
)}
|
||||
onClick={() => {
|
||||
if (nameEditFlag) {
|
||||
return;
|
||||
}
|
||||
navigate(`/d/prompts/${group._id}`, { replace: true });
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-row items-center justify-start truncate">
|
||||
{/* <Checkbox /> */}
|
||||
<div className="relative flex w-full cursor-pointer flex-col gap-1 text-start align-top">
|
||||
{nameEditFlag ? (
|
||||
<>
|
||||
<div className="flex w-full gap-2">
|
||||
<Input
|
||||
defaultValue={nameInputField}
|
||||
className="w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setNameInputField(e.target.value);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
cancelRename();
|
||||
} else if (e.key === 'Enter') {
|
||||
saveRename();
|
||||
}
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
<Button
|
||||
variant="subtle"
|
||||
className="w-min bg-green-500 text-white hover:bg-green-600 dark:bg-green-400 dark:hover:bg-green-500"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
saveRename();
|
||||
}}
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="break-word line-clamp-3 text-balance text-sm text-gray-600 dark:text-gray-400">
|
||||
{localize('com_ui_renaming_var', group.name)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="flex flex-row gap-2">
|
||||
<CategoryIcon category={group.category ?? ''} className="icon-md" />
|
||||
<h3 className="break-word text-balance text-sm font-semibold text-gray-800 dark:text-gray-200">
|
||||
{group.name}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-1">
|
||||
{groupIsGlobal && <EarthIcon className="icon-md text-green-400" />}
|
||||
{(isOwner || user?.role === SystemRoles.ADMIN) && (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7 w-7 p-0 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:border-gray-400 dark:focus:border-gray-500"
|
||||
>
|
||||
<MenuIcon className="icon-md dark:text-gray-300" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="mt-2 w-36 rounded-lg" collisionPadding={2}>
|
||||
<DropdownMenuGroup>
|
||||
<RenameButton
|
||||
renaming={false}
|
||||
renameHandler={(e) => {
|
||||
e.stopPropagation();
|
||||
setNameEditFlag(true);
|
||||
}}
|
||||
appendLabel={true}
|
||||
className={cn('m-0 w-full p-2')}
|
||||
/>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'h-7 w-7 p-0 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:border-gray-400 dark:focus:border-gray-500',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<NewTrashIcon className="icon-md text-gray-600 dark:text-gray-300" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_prompt')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<>
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{localize('com_ui_delete_confirm')}{' '}
|
||||
<strong>{group.name}</strong>
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: () => {
|
||||
deletePromptGroupMutation.mutate({ id: group?._id || '' });
|
||||
},
|
||||
selectClasses:
|
||||
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</Dialog>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ellipsis text-balance text-sm text-gray-600 dark:text-gray-400">
|
||||
{group.oneliner ? group.oneliner : group?.productionPrompt?.prompt ?? ''}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
153
client/src/components/Prompts/Groups/FilterPrompts.tsx
Normal file
153
client/src/components/Prompts/Groups/FilterPrompts.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { ListFilter, User, Share2, Dot } from 'lucide-react';
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { SystemCategories } from 'librechat-data-provider';
|
||||
import type { OptionWithIcon } from '~/common';
|
||||
import { usePromptGroupsNav, useLocalize, useCategories } from '~/hooks';
|
||||
import {
|
||||
Input,
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuSeparator,
|
||||
} from '~/components/ui';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export function FilterItem({
|
||||
label,
|
||||
icon,
|
||||
onClick,
|
||||
isActive,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
isActive?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={onClick}
|
||||
className="relative cursor-pointer gap-2 text-text-secondary hover:bg-surface-tertiary focus:bg-surface-tertiary dark:focus:bg-surface-tertiary"
|
||||
>
|
||||
{icon}
|
||||
<span>{label}</span>
|
||||
{isActive && (
|
||||
<span className="absolute bottom-0 right-0 top-0 flex items-center">
|
||||
<Dot />
|
||||
</span>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilterMenu({
|
||||
onSelect,
|
||||
}: {
|
||||
onSelect: (category: string, icon?: React.ReactNode | null) => void;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { categories } = useCategories('h-4 w-4');
|
||||
const memoizedCategories = useMemo(() => {
|
||||
const noCategory = {
|
||||
label: localize('com_ui_no_category'),
|
||||
value: SystemCategories.NO_CATEGORY,
|
||||
};
|
||||
if (!categories) {
|
||||
return [noCategory];
|
||||
}
|
||||
|
||||
return [noCategory, ...categories];
|
||||
}, [categories, localize]);
|
||||
|
||||
const categoryFilter = useRecoilValue(store.promptsCategory);
|
||||
return (
|
||||
<DropdownMenuContent className="max-h-xl min-w-48 overflow-y-auto">
|
||||
<DropdownMenuGroup>
|
||||
<FilterItem
|
||||
label={localize('com_ui_all_proper')}
|
||||
icon={<ListFilter className="h-4 w-4 text-text-primary" />}
|
||||
onClick={() => onSelect(SystemCategories.ALL, <ListFilter className="icon-sm" />)}
|
||||
isActive={categoryFilter === ''}
|
||||
/>
|
||||
<FilterItem
|
||||
label={localize('com_ui_my_prompts')}
|
||||
icon={<User className="h-4 w-4 text-text-primary" />}
|
||||
onClick={() => onSelect(SystemCategories.MY_PROMPTS, <User className="h-4 w-4" />)}
|
||||
isActive={categoryFilter === SystemCategories.MY_PROMPTS}
|
||||
/>
|
||||
<FilterItem
|
||||
label={localize('com_ui_shared_prompts')}
|
||||
icon={<Share2 className="h-4 w-4 text-text-primary" />}
|
||||
onClick={() => onSelect(SystemCategories.SHARED_PROMPTS, <Share2 className="h-4 w-4" />)}
|
||||
isActive={categoryFilter === SystemCategories.SHARED_PROMPTS}
|
||||
/>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
{memoizedCategories
|
||||
.filter((category) => category.value)
|
||||
.map((category, i) => (
|
||||
<FilterItem
|
||||
key={`${category.value}-${i}`}
|
||||
label={category.label}
|
||||
icon={(category as OptionWithIcon).icon}
|
||||
onClick={() => onSelect(category.value, (category as OptionWithIcon).icon)}
|
||||
isActive={category.value === categoryFilter}
|
||||
/>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FilterPrompts({
|
||||
setName,
|
||||
className = '',
|
||||
}: Pick<ReturnType<typeof usePromptGroupsNav>, 'setName'> & {
|
||||
className?: string;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const setCategory = useSetRecoilState(store.promptsCategory);
|
||||
const [selectedIcon, setSelectedIcon] = useState(<ListFilter className="icon-sm" />);
|
||||
|
||||
const onSelect = useCallback(
|
||||
(category: string, icon?: React.ReactNode | null) => {
|
||||
if (category === SystemCategories.ALL) {
|
||||
setSelectedIcon(<ListFilter className="icon-sm" />);
|
||||
return setCategory('');
|
||||
}
|
||||
setCategory(category);
|
||||
if (icon && React.isValidElement(icon)) {
|
||||
setSelectedIcon(icon);
|
||||
}
|
||||
},
|
||||
[setCategory],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cn('flex gap-2', className)}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-10 w-10 flex-shrink-0">
|
||||
{selectedIcon}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<FilterMenu onSelect={onSelect} />
|
||||
</DropdownMenu>
|
||||
<Input
|
||||
placeholder={localize('com_ui_filter_prompts_name')}
|
||||
value={displayName}
|
||||
onChange={(e) => {
|
||||
setDisplayName(e.target.value);
|
||||
setName(e.target.value);
|
||||
}}
|
||||
className="max-w-xs border-border-light focus:bg-surface-tertiary"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
client/src/components/Prompts/Groups/GroupSidePanel.tsx
Normal file
55
client/src/components/Prompts/Groups/GroupSidePanel.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import PanelNavigation from '~/components/Prompts/Groups/PanelNavigation';
|
||||
import { useMediaQuery, usePromptGroupsNav } from '~/hooks';
|
||||
import List from '~/components/Prompts/Groups/List';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function GroupSidePanel({
|
||||
children,
|
||||
isDetailView,
|
||||
className = '',
|
||||
/* usePromptGroupsNav */
|
||||
nextPage,
|
||||
prevPage,
|
||||
isFetching,
|
||||
hasNextPage,
|
||||
groupsQuery,
|
||||
promptGroups,
|
||||
hasPreviousPage,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
isDetailView?: boolean;
|
||||
className?: string;
|
||||
} & ReturnType<typeof usePromptGroupsNav>) {
|
||||
const location = useLocation();
|
||||
const isSmallerScreen = useMediaQuery('(max-width: 1024px)');
|
||||
const isChatRoute = useMemo(() => location.pathname.startsWith('/c/'), [location.pathname]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mr-2 flex w-full min-w-72 flex-col gap-2 overflow-y-auto md:w-full lg:w-1/4 xl:w-1/4',
|
||||
isDetailView && isSmallerScreen ? 'hidden' : '',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<List
|
||||
groups={promptGroups}
|
||||
isChatRoute={isChatRoute}
|
||||
isLoading={!!groupsQuery?.isLoading}
|
||||
/>
|
||||
</div>
|
||||
<PanelNavigation
|
||||
nextPage={nextPage}
|
||||
prevPage={prevPage}
|
||||
isFetching={isFetching}
|
||||
hasNextPage={hasNextPage}
|
||||
isChatRoute={isChatRoute}
|
||||
hasPreviousPage={hasPreviousPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
client/src/components/Prompts/Groups/List.tsx
Normal file
77
client/src/components/Prompts/Groups/List.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
import type { TPromptGroup, TStartupConfig } from 'librechat-data-provider';
|
||||
import DashGroupItem from '~/components/Prompts/Groups/DashGroupItem';
|
||||
import ChatGroupItem from '~/components/Prompts/Groups/ChatGroupItem';
|
||||
import { useLocalize, useHasAccess } from '~/hooks';
|
||||
import { Button, Skeleton } from '~/components/ui';
|
||||
|
||||
export default function List({
|
||||
groups = [],
|
||||
isChatRoute,
|
||||
isLoading,
|
||||
}: {
|
||||
groups?: TPromptGroup[];
|
||||
isChatRoute?: boolean;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const { data: startupConfig = {} as Partial<TStartupConfig> } = useGetStartupConfig();
|
||||
const { instanceProjectId } = startupConfig;
|
||||
const hasCreateAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.PROMPTS,
|
||||
permission: Permissions.CREATE,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{hasCreateAccess && (
|
||||
<div className="flex w-full justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mx-2 w-full px-3"
|
||||
onClick={() => navigate('/d/prompts/new')}
|
||||
>
|
||||
+ {localize('com_ui_create_var', localize('com_ui_prompt'))}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<div className="overflow-y-auto">
|
||||
{isLoading && isChatRoute && (
|
||||
<Skeleton className="my-2 flex h-[84px] w-full rounded-2xl border-0 px-3 pb-4 pt-3" />
|
||||
)}
|
||||
{isLoading && !isChatRoute && (
|
||||
<Skeleton className="w-100 mx-2 my-3 flex h-[72px] rounded-md border-0 p-4" />
|
||||
)}
|
||||
{!isLoading && groups.length === 0 && isChatRoute && (
|
||||
<div className="my-2 flex h-[84px] w-full items-center justify-center rounded-2xl border border-border-light bg-transparent px-3 pb-4 pt-3 text-text-primary">
|
||||
{localize('com_ui_nothing_found')}
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && groups.length === 0 && !isChatRoute && (
|
||||
<div className="w-100 mx-2 my-3 flex h-[72px] items-center justify-center rounded-md border border-border-light bg-transparent p-4 text-text-primary">
|
||||
{localize('com_ui_nothing_found')}
|
||||
</div>
|
||||
)}
|
||||
{groups?.map((group) => {
|
||||
if (isChatRoute) {
|
||||
return (
|
||||
<ChatGroupItem
|
||||
key={group._id}
|
||||
group={group}
|
||||
instanceProjectId={instanceProjectId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<DashGroupItem key={group._id} group={group} instanceProjectId={instanceProjectId} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
client/src/components/Prompts/Groups/ListCard.tsx
Normal file
36
client/src/components/Prompts/Groups/ListCard.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
|
||||
|
||||
export default function ListCard({
|
||||
category,
|
||||
name,
|
||||
snippet,
|
||||
onClick,
|
||||
children,
|
||||
}: {
|
||||
category: string;
|
||||
name: string;
|
||||
snippet: string;
|
||||
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-2xl border px-3 pb-4 pt-3 text-start align-top
|
||||
text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-all duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||
>
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="flex flex-row gap-2">
|
||||
<CategoryIcon category={category} className="icon-md" />
|
||||
<h3 className="break-word select-none text-balance text-sm font-semibold text-gray-800 dark:text-gray-200">
|
||||
{name}
|
||||
</h3>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
<div className="ellipsis select-none text-balance text-sm text-gray-600 dark:text-gray-400">
|
||||
{snippet}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
client/src/components/Prompts/Groups/NoPromptGroup.tsx
Normal file
27
client/src/components/Prompts/Groups/NoPromptGroup.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
export default function NoPromptGroup() {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<div className="relative min-h-full w-full px-4">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center font-bold dark:text-gray-200">
|
||||
<h1 className="text-lg font-bold dark:text-gray-200 md:text-2xl">
|
||||
{localize('com_ui_prompt_preview_not_shared')}
|
||||
</h1>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={() => {
|
||||
navigate('/d/prompts');
|
||||
}}
|
||||
>
|
||||
{localize('com_ui_back_to_var', localize('com_ui_prompts'))}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
client/src/components/Prompts/Groups/PanelNavigation.tsx
Normal file
38
client/src/components/Prompts/Groups/PanelNavigation.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { memo } from 'react';
|
||||
import { Button, ThemeSelector } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
function PanelNavigation({
|
||||
prevPage,
|
||||
nextPage,
|
||||
hasPreviousPage,
|
||||
hasNextPage,
|
||||
isFetching,
|
||||
isChatRoute,
|
||||
}: {
|
||||
prevPage: () => void;
|
||||
nextPage: () => void;
|
||||
hasNextPage: boolean;
|
||||
hasPreviousPage: boolean;
|
||||
isFetching: boolean;
|
||||
isChatRoute: boolean;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<div className="my-1 flex justify-between px-4">
|
||||
<div className="mb-2 flex gap-2">
|
||||
{!isChatRoute && <ThemeSelector returnThemeOnly={true} />}
|
||||
</div>
|
||||
<div className="mb-2 flex gap-2">
|
||||
<Button variant="outline" onClick={() => prevPage()} disabled={!hasPreviousPage}>
|
||||
{localize('com_ui_prev')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => nextPage()} disabled={!hasNextPage || isFetching}>
|
||||
{localize('com_ui_next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(PanelNavigation);
|
||||
38
client/src/components/Prompts/Groups/VariableDialog.tsx
Normal file
38
client/src/components/Prompts/Groups/VariableDialog.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import { OGDialog, OGDialogTitle, OGDialogContent } from '~/components/ui';
|
||||
import { detectVariables } from '~/utils';
|
||||
import VariableForm from './VariableForm';
|
||||
|
||||
interface VariableDialogProps extends Omit<DialogPrimitive.DialogProps, 'onOpenChange'> {
|
||||
onClose: () => void;
|
||||
group: TPromptGroup;
|
||||
}
|
||||
|
||||
const VariableDialog: React.FC<VariableDialogProps> = ({ open, onClose, group }) => {
|
||||
const handleOpenChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const hasVariables = useMemo(
|
||||
() => detectVariables(group.productionPrompt?.prompt ?? ''),
|
||||
[group.productionPrompt?.prompt],
|
||||
);
|
||||
if (!hasVariables) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<OGDialog open={open} onOpenChange={handleOpenChange}>
|
||||
<OGDialogContent className="max-w-3xl bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
|
||||
<OGDialogTitle>{group.name}</OGDialogTitle>
|
||||
<VariableForm group={group} onClose={onClose} />
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default VariableDialog;
|
||||
128
client/src/components/Prompts/Groups/VariableForm.tsx
Normal file
128
client/src/components/Prompts/Groups/VariableForm.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
|
||||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import { extractVariableInfo, wrapVariable, replaceSpecialVars } from '~/utils';
|
||||
import { useAuthContext, useLocalize, useSubmitMessage } from '~/hooks';
|
||||
import { Input } from '~/components/ui';
|
||||
|
||||
type FormValues = {
|
||||
fields: { variable: string; value: string }[];
|
||||
};
|
||||
|
||||
export default function VariableForm({
|
||||
group,
|
||||
onClose,
|
||||
}: {
|
||||
group: TPromptGroup;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
|
||||
const mainText = useMemo(() => {
|
||||
const initialText = group.productionPrompt?.prompt ?? '';
|
||||
return replaceSpecialVars({ text: initialText, user });
|
||||
}, [group.productionPrompt?.prompt, user]);
|
||||
|
||||
const { allVariables, uniqueVariables, variableIndexMap } = useMemo(
|
||||
() => extractVariableInfo(mainText),
|
||||
[mainText],
|
||||
);
|
||||
|
||||
const { submitPrompt } = useSubmitMessage();
|
||||
const { control, handleSubmit } = useForm<FormValues>({
|
||||
defaultValues: {
|
||||
fields: uniqueVariables.map((variable) => ({ variable: wrapVariable(variable), value: '' })),
|
||||
},
|
||||
});
|
||||
|
||||
const { fields } = useFieldArray({
|
||||
control,
|
||||
name: 'fields',
|
||||
});
|
||||
|
||||
const fieldValues = useWatch({
|
||||
control,
|
||||
name: 'fields',
|
||||
});
|
||||
|
||||
if (!uniqueVariables.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const generateHighlightedText = () => {
|
||||
let tempText = mainText;
|
||||
const parts: JSX.Element[] = [];
|
||||
|
||||
allVariables.forEach((variable, index) => {
|
||||
const placeholder = `{{${variable}}}`;
|
||||
const partsBeforePlaceholder = tempText.split(placeholder);
|
||||
const fieldIndex = variableIndexMap.get(variable) as string | number;
|
||||
const fieldValue = fieldValues[fieldIndex].value as string;
|
||||
parts.push(
|
||||
<span key={`before-${index}`}>{partsBeforePlaceholder[0]}</span>,
|
||||
<span
|
||||
key={`highlight-${index}`}
|
||||
className="rounded bg-yellow-100 p-1 font-medium dark:text-gray-800"
|
||||
>
|
||||
{fieldValue !== '' ? fieldValue : placeholder}
|
||||
</span>,
|
||||
);
|
||||
|
||||
tempText = partsBeforePlaceholder.slice(1).join(placeholder);
|
||||
});
|
||||
|
||||
parts.push(<span key="last-part">{tempText}</span>);
|
||||
|
||||
return parts;
|
||||
};
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
let text = mainText;
|
||||
data.fields.forEach(({ variable, value }) => {
|
||||
if (value) {
|
||||
const regex = new RegExp(variable, 'g');
|
||||
text = text.replace(regex, value);
|
||||
}
|
||||
});
|
||||
|
||||
submitPrompt(text);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-1">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="mb-6 max-h-screen overflow-auto rounded-md bg-gray-100 p-4 dark:bg-gray-700/50 dark:text-gray-300 md:max-h-80">
|
||||
<p className="text-md whitespace-pre-wrap">{generateHighlightedText()}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex flex-col">
|
||||
<Controller
|
||||
name={`fields.${index}.value`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={`fields.${index}.value`}
|
||||
className="input text-grey-darker rounded border px-3 py-2 focus:bg-white dark:border-gray-500 dark:focus:bg-gray-700"
|
||||
placeholder={uniqueVariables[index]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
|
||||
>
|
||||
{localize('com_ui_submit')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
client/src/components/Prompts/ManagePrompts.tsx
Normal file
27
client/src/components/Prompts/ManagePrompts.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { useLocalize, useCustomLink } from '~/hooks';
|
||||
import { buttonVariants } from '~/components/ui';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function ManagePrompts({ className }: { className?: string }) {
|
||||
const localize = useLocalize();
|
||||
const setPromptsName = useSetRecoilState(store.promptsName);
|
||||
const setPromptsCategory = useSetRecoilState(store.promptsCategory);
|
||||
const clickCallback = useCallback(() => {
|
||||
setPromptsName('');
|
||||
setPromptsCategory('');
|
||||
}, [setPromptsName, setPromptsCategory]);
|
||||
|
||||
const clickHandler = useCustomLink('/d/prompts', clickCallback);
|
||||
return (
|
||||
<a
|
||||
className={cn(buttonVariants({ variant: 'outline' }), className)}
|
||||
href="/d/prompts"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{localize('com_ui_manage')}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
69
client/src/components/Prompts/PreviewLabels.tsx
Normal file
69
client/src/components/Prompts/PreviewLabels.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import { useState } from 'react';
|
||||
import { Cross1Icon } from '@radix-ui/react-icons';
|
||||
import type { TPrompt } from 'librechat-data-provider';
|
||||
import { useUpdatePromptLabels } from '~/data-provider';
|
||||
import { Input } from '~/components/ui';
|
||||
|
||||
const PromptForm = ({ selectedPrompt }: { selectedPrompt?: TPrompt }) => {
|
||||
const [labelInput, setLabelInput] = useState<string>('');
|
||||
const [labels, setLabels] = useState<string[]>([]);
|
||||
const updatePromptLabelsMutation = useUpdatePromptLabels();
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLabelInput(e.target.value);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter' && labelInput.trim()) {
|
||||
const newLabels = [...labels, labelInput.trim()];
|
||||
setLabels(newLabels);
|
||||
setLabelInput('');
|
||||
updatePromptLabelsMutation.mutate({
|
||||
id: selectedPrompt?._id || '',
|
||||
payload: { labels: newLabels },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
className="mb-4"
|
||||
placeholder="+ Add Labels"
|
||||
// defaultValue={selectedPrompt?.labels.join(', ')}
|
||||
value={labelInput}
|
||||
onChange={handleInputChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<h3 className="rounded-t-lg border border-gray-300 px-4 text-base font-semibold">Labels</h3>
|
||||
<div className="mb-4 flex w-full flex-row flex-wrap rounded-b-lg border border-gray-300 p-4">
|
||||
{labels.length ? (
|
||||
labels.map((label, index) => (
|
||||
<label
|
||||
className="mb-1 mr-1 flex items-center gap-x-2 rounded-full border px-2"
|
||||
key={index}
|
||||
>
|
||||
{label}
|
||||
<Cross1Icon
|
||||
onClick={() => {
|
||||
const newLabels = labels.filter((l) => l !== label);
|
||||
setLabels(newLabels);
|
||||
updatePromptLabelsMutation.mutate({
|
||||
id: selectedPrompt?._id || '',
|
||||
payload: { labels: newLabels },
|
||||
});
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
<label className="rounded-full border px-2">No Labels</label>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptForm;
|
||||
25
client/src/components/Prompts/PreviewPrompt.tsx
Normal file
25
client/src/components/Prompts/PreviewPrompt.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import { OGDialogContent, OGDialog } from '~/components/ui';
|
||||
import PromptDetails from './PromptDetails';
|
||||
|
||||
const PreviewPrompt = ({
|
||||
group,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
group: TPromptGroup;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) => {
|
||||
return (
|
||||
<OGDialog open={open} onOpenChange={onOpenChange}>
|
||||
<OGDialogContent className="max-w-3xl bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
|
||||
<div className="p-2">
|
||||
<PromptDetails group={group} />
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviewPrompt;
|
||||
47
client/src/components/Prompts/PromptDetails.tsx
Normal file
47
client/src/components/Prompts/PromptDetails.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import type { TPromptGroup } from 'librechat-data-provider';
|
||||
import CategoryIcon from './Groups/CategoryIcon';
|
||||
import PromptVariables from './PromptVariables';
|
||||
import Description from './Description';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const PromptDetails = ({ group }: { group: TPromptGroup }) => {
|
||||
const localize = useLocalize();
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const promptText = group.productionPrompt?.prompt ?? '';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-between px-4 dark:text-gray-200 sm:flex-row">
|
||||
<div className="mb-1 flex flex-row items-center font-bold sm:text-xl md:mb-0 md:text-2xl">
|
||||
<div className="mb-1 flex items-center md:mb-0">
|
||||
<div className="rounded p-2">
|
||||
{(group.category?.length ?? 0) > 0 ? (
|
||||
<CategoryIcon category={group.category ?? ''} />
|
||||
) : null}
|
||||
</div>
|
||||
<span className="mr-2 border border-transparent p-2">{group.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col md:flex-row">
|
||||
<div className="flex-1 overflow-y-auto border-gray-300 p-0 dark:border-gray-600 md:max-h-[calc(100vh-150px)] md:p-4">
|
||||
<div>
|
||||
<h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
|
||||
{localize('com_ui_text_prompt')}
|
||||
</h2>
|
||||
<div className="group relative mb-4 min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 dark:border-gray-600">
|
||||
<span className="block break-words px-2 py-1 dark:text-gray-200">{promptText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<PromptVariables promptText={promptText} />
|
||||
<Description initialValue={group.oneliner} disabled={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptDetails;
|
||||
82
client/src/components/Prompts/PromptEditor.tsx
Normal file
82
client/src/components/Prompts/PromptEditor.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { useMemo, memo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { EditIcon } from 'lucide-react';
|
||||
import { Controller, useFormContext, useFormState } from 'react-hook-form';
|
||||
import AlwaysMakeProd from '~/components/Prompts/Groups/AlwaysMakeProd';
|
||||
import { SaveIcon, CrossIcon } from '~/components/svg';
|
||||
import { TextareaAutosize } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
const { PromptsEditorMode, promptsEditorMode } = store;
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
isEditing: boolean;
|
||||
setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
|
||||
const localize = useLocalize();
|
||||
const { control } = useFormContext();
|
||||
const editorMode = useRecoilValue(promptsEditorMode);
|
||||
const { dirtyFields } = useFormState({ control: control });
|
||||
|
||||
const EditorIcon = useMemo(() => {
|
||||
if (isEditing && !dirtyFields.prompt) {
|
||||
return CrossIcon;
|
||||
}
|
||||
return isEditing ? SaveIcon : EditIcon;
|
||||
}, [isEditing, dirtyFields.prompt]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
|
||||
{localize('com_ui_text_prompt')}
|
||||
<div className="flex flex-row gap-6">
|
||||
{editorMode === PromptsEditorMode.ADVANCED && (
|
||||
<AlwaysMakeProd className="hidden sm:flex" />
|
||||
)}
|
||||
<button type="button" onClick={() => setIsEditing((prev) => !prev)} className="mr-2">
|
||||
<EditorIcon
|
||||
className={cn(
|
||||
'icon-lg',
|
||||
isEditing ? 'p-[0.05rem]' : 'text-gray-400 hover:text-gray-600',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</h2>
|
||||
<div
|
||||
className={cn(
|
||||
'group relative mb-4 min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 hover:opacity-90 dark:border-gray-600',
|
||||
{ 'cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-100/10': !isEditing },
|
||||
)}
|
||||
onClick={() => !isEditing && setIsEditing(true)}
|
||||
>
|
||||
{!isEditing && (
|
||||
<EditIcon className="icon-xl absolute inset-0 m-auto hidden opacity-25 group-hover:block dark:text-gray-200" />
|
||||
)}
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) =>
|
||||
isEditing ? (
|
||||
<TextareaAutosize
|
||||
{...field}
|
||||
className="w-full rounded border border-gray-300 bg-transparent px-2 py-1 focus:outline-none dark:border-gray-600 dark:text-gray-200"
|
||||
minRows={3}
|
||||
onBlur={() => setIsEditing(false)}
|
||||
/>
|
||||
) : (
|
||||
<span className="block break-words px-2 py-1 dark:text-gray-200">{field.value}</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(PromptEditor);
|
||||
319
client/src/components/Prompts/PromptForm.tsx
Normal file
319
client/src/components/Prompts/PromptForm.tsx
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
import { Rocket } from 'lucide-react';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useForm, FormProvider } from 'react-hook-form';
|
||||
import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
|
||||
import { useNavigate, useParams, useOutletContext } from 'react-router-dom';
|
||||
import { PermissionTypes, Permissions, SystemRoles } from 'librechat-data-provider';
|
||||
import type { TCreatePrompt } from 'librechat-data-provider';
|
||||
import {
|
||||
useGetPrompts,
|
||||
useCreatePrompt,
|
||||
useDeletePrompt,
|
||||
useGetPromptGroup,
|
||||
useUpdatePromptGroup,
|
||||
useMakePromptProduction,
|
||||
} from '~/data-provider';
|
||||
import { useAuthContext, usePromptGroupsNav, useHasAccess } from '~/hooks';
|
||||
import CategorySelector from './Groups/CategorySelector';
|
||||
import AlwaysMakeProd from './Groups/AlwaysMakeProd';
|
||||
import NoPromptGroup from './Groups/NoPromptGroup';
|
||||
import { Button, Skeleton } from '~/components/ui';
|
||||
import PromptVariables from './PromptVariables';
|
||||
import PromptVersions from './PromptVersions';
|
||||
import DeleteConfirm from './DeleteVersion';
|
||||
import PromptDetails from './PromptDetails';
|
||||
import { findPromptGroup } from '~/utils';
|
||||
import PromptEditor from './PromptEditor';
|
||||
import SkeletonForm from './SkeletonForm';
|
||||
import Description from './Description';
|
||||
import SharePrompt from './SharePrompt';
|
||||
import PromptName from './PromptName';
|
||||
import store from '~/store';
|
||||
|
||||
const { PromptsEditorMode, promptsEditorMode } = store;
|
||||
|
||||
const PromptForm = () => {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuthContext();
|
||||
const editorMode = useRecoilValue(promptsEditorMode);
|
||||
const alwaysMakeProd = useRecoilValue(store.alwaysMakeProd);
|
||||
const { data: group, isLoading: isLoadingGroup } = useGetPromptGroup(params.promptId || '');
|
||||
const { data: prompts = [], isLoading: isLoadingPrompts } = useGetPrompts(
|
||||
{ groupId: params.promptId ?? '' },
|
||||
{ enabled: !!params.promptId },
|
||||
);
|
||||
|
||||
const prevIsEditingRef = useRef(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [initialLoad, setInitialLoad] = useState(true);
|
||||
const [selectionIndex, setSelectionIndex] = useState<number>(0);
|
||||
const isOwner = useMemo(() => user?.id === group?.author, [user, group]);
|
||||
const selectedPrompt = useMemo(() => prompts[selectionIndex], [prompts, selectionIndex]);
|
||||
|
||||
const hasShareAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.PROMPTS,
|
||||
permission: Permissions.SHARED_GLOBAL,
|
||||
});
|
||||
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
prompt: '',
|
||||
promptName: group?.name || '',
|
||||
category: group?.category || '',
|
||||
},
|
||||
});
|
||||
|
||||
const { handleSubmit, setValue, reset, watch } = methods;
|
||||
const promptText = watch('prompt');
|
||||
|
||||
const createPromptMutation = useCreatePrompt({
|
||||
onMutate: (variables) => {
|
||||
reset(
|
||||
{
|
||||
prompt: variables.prompt.prompt,
|
||||
category: variables.group?.category || '',
|
||||
},
|
||||
{ keepDirtyValues: true },
|
||||
);
|
||||
},
|
||||
onSuccess(data) {
|
||||
if (alwaysMakeProd && data.prompt._id && data.prompt.groupId) {
|
||||
makeProductionMutation.mutate(
|
||||
{
|
||||
id: data.prompt._id,
|
||||
groupId: data.prompt.groupId,
|
||||
productionPrompt: { prompt: data.prompt.prompt },
|
||||
},
|
||||
{
|
||||
onSuccess: () => setSelectionIndex(0),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
reset({
|
||||
prompt: data.prompt.prompt,
|
||||
promptName: data.group?.name || '',
|
||||
category: data.group?.category || '',
|
||||
});
|
||||
|
||||
setSelectionIndex(0);
|
||||
},
|
||||
});
|
||||
const updateGroupMutation = useUpdatePromptGroup();
|
||||
const makeProductionMutation = useMakePromptProduction();
|
||||
const deletePromptMutation = useDeletePrompt({
|
||||
onSuccess: (response) => {
|
||||
if (response.promptGroup) {
|
||||
navigate('/d/prompts');
|
||||
} else {
|
||||
setSelectionIndex(0);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const onSave = useCallback(
|
||||
(value: string) => {
|
||||
if (!value) {
|
||||
// TODO: show toast, cannot be empty.
|
||||
return;
|
||||
}
|
||||
const tempPrompt: TCreatePrompt = {
|
||||
prompt: {
|
||||
type: selectedPrompt?.type ?? 'text',
|
||||
groupId: selectedPrompt?.groupId ?? '',
|
||||
prompt: value,
|
||||
},
|
||||
};
|
||||
|
||||
if (value === selectedPrompt?.prompt) {
|
||||
return;
|
||||
}
|
||||
|
||||
createPromptMutation.mutate(tempPrompt);
|
||||
},
|
||||
[selectedPrompt, createPromptMutation],
|
||||
);
|
||||
|
||||
const handleLoadingComplete = useCallback(() => {
|
||||
if (isLoadingGroup || isLoadingPrompts) {
|
||||
return;
|
||||
}
|
||||
setInitialLoad(false);
|
||||
}, [isLoadingGroup, isLoadingPrompts]);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevIsEditingRef.current && !isEditing) {
|
||||
handleSubmit((data) => onSave(data.prompt))();
|
||||
}
|
||||
prevIsEditingRef.current = isEditing;
|
||||
}, [isEditing, onSave, handleSubmit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorMode === PromptsEditorMode.SIMPLE) {
|
||||
const productionIndex = prompts.findIndex((prompt) => prompt._id === group?.productionId);
|
||||
setSelectionIndex(productionIndex !== -1 ? productionIndex : 0);
|
||||
}
|
||||
|
||||
handleLoadingComplete();
|
||||
}, [params.promptId, editorMode, group?.productionId, prompts, handleLoadingComplete]);
|
||||
|
||||
useEffect(() => {
|
||||
setValue('prompt', selectedPrompt?.prompt || '', { shouldDirty: false });
|
||||
setValue('category', group?.category || '', { shouldDirty: false });
|
||||
}, [selectedPrompt, group?.category, setValue]);
|
||||
|
||||
const debouncedUpdateOneliner = useCallback(
|
||||
debounce((oneliner: string) => {
|
||||
if (!group) {
|
||||
return console.warn('Group not found');
|
||||
}
|
||||
|
||||
updateGroupMutation.mutate({ id: group._id || '', payload: { oneliner } });
|
||||
}, 950),
|
||||
[updateGroupMutation, group],
|
||||
);
|
||||
|
||||
const { groupsQuery } = useOutletContext<ReturnType<typeof usePromptGroupsNav>>();
|
||||
|
||||
if (initialLoad) {
|
||||
return <SkeletonForm />;
|
||||
}
|
||||
|
||||
if (!isOwner && groupsQuery.data && user?.role !== SystemRoles.ADMIN) {
|
||||
const fetchedPrompt = findPromptGroup(
|
||||
groupsQuery.data,
|
||||
(group) => group._id === params.promptId,
|
||||
);
|
||||
if (!fetchedPrompt) {
|
||||
return <NoPromptGroup />;
|
||||
}
|
||||
|
||||
return <PromptDetails group={fetchedPrompt} />;
|
||||
}
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit((data) => onSave(data.prompt))}>
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-between px-4 dark:text-gray-200 sm:flex-row">
|
||||
{isLoadingGroup ? (
|
||||
<Skeleton className="mb-1 flex h-10 w-32 flex-row items-center font-bold sm:text-xl md:mb-0 md:h-12 md:text-2xl" />
|
||||
) : (
|
||||
<PromptName
|
||||
name={group?.name}
|
||||
onSave={(value) => {
|
||||
if (!group) {
|
||||
return console.warn('Group not found');
|
||||
}
|
||||
updateGroupMutation.mutate({ id: group._id || '', payload: { name: value } });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="flex h-10 flex-row gap-x-2">
|
||||
<CategorySelector
|
||||
className="w-48 md:w-56"
|
||||
currentCategory={group?.category}
|
||||
onValueChange={(value) =>
|
||||
updateGroupMutation.mutate({
|
||||
id: group?._id || '',
|
||||
payload: { name: group?.name || '', category: value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
{hasShareAccess && <SharePrompt group={group} disabled={isLoadingGroup} />}
|
||||
{editorMode === PromptsEditorMode.ADVANCED && (
|
||||
<Button
|
||||
size={'sm'}
|
||||
className="h-10 border border-transparent bg-green-500 transition-all hover:bg-green-600 dark:bg-green-500 dark:hover:bg-green-600"
|
||||
variant={'default'}
|
||||
onClick={() => {
|
||||
const { _id: promptVersionId = '', prompt } = selectedPrompt;
|
||||
makeProductionMutation.mutate(
|
||||
{
|
||||
id: promptVersionId || '',
|
||||
groupId: group?._id || '',
|
||||
productionPrompt: { prompt },
|
||||
},
|
||||
{
|
||||
onSuccess: (_data, variables) => {
|
||||
const productionIndex = prompts.findIndex(
|
||||
(prompt) => variables.id === prompt._id,
|
||||
);
|
||||
setSelectionIndex(productionIndex);
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
disabled={
|
||||
isLoadingGroup ||
|
||||
selectedPrompt?._id === group?.productionId ||
|
||||
makeProductionMutation.isLoading
|
||||
}
|
||||
>
|
||||
<Rocket className="cursor-pointer text-white" />
|
||||
</Button>
|
||||
)}
|
||||
<DeleteConfirm
|
||||
name={group.name}
|
||||
disabled={isLoadingGroup}
|
||||
selectHandler={() => {
|
||||
deletePromptMutation.mutate({
|
||||
_id: selectedPrompt?._id || '',
|
||||
groupId: group?._id || '',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{editorMode === PromptsEditorMode.ADVANCED && (
|
||||
<div className="mt-4 flex items-center justify-center text-text-primary sm:hidden">
|
||||
<AlwaysMakeProd />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex h-full w-full flex-col md:flex-row">
|
||||
{/* Left Section */}
|
||||
<div className="flex-1 overflow-y-auto border-r border-gray-300 p-4 dark:border-gray-600 md:max-h-[calc(100vh-150px)]">
|
||||
{isLoadingPrompts ? (
|
||||
<Skeleton className="h-96" />
|
||||
) : (
|
||||
<>
|
||||
<PromptEditor name="prompt" isEditing={isEditing} setIsEditing={setIsEditing} />
|
||||
<PromptVariables promptText={promptText} />
|
||||
<Description
|
||||
initialValue={group?.oneliner ?? ''}
|
||||
onValueChange={debouncedUpdateOneliner}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* Right Section */}
|
||||
{editorMode === PromptsEditorMode.ADVANCED && (
|
||||
<div className="flex-1 overflow-y-auto p-4 md:max-h-[calc(100vh-150px)] md:w-1/4 md:max-w-[35%] lg:max-w-[30%] xl:max-w-[25%]">
|
||||
{isLoadingPrompts ? (
|
||||
<Skeleton className="h-96 w-full" />
|
||||
) : (
|
||||
!!prompts.length && (
|
||||
<PromptVersions
|
||||
group={group}
|
||||
prompts={prompts}
|
||||
selectionIndex={selectionIndex}
|
||||
setSelectionIndex={setSelectionIndex}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptForm;
|
||||
101
client/src/components/Prompts/PromptName.tsx
Normal file
101
client/src/components/Prompts/PromptName.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { EditIcon, SaveIcon } from '~/components/svg';
|
||||
|
||||
type Props = {
|
||||
name?: string;
|
||||
onSave: (newName: string) => void;
|
||||
};
|
||||
|
||||
const PromptName: React.FC<Props> = ({ name, onSave }) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const blurTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [newName, setNewName] = useState(name);
|
||||
|
||||
const handleEditClick = () => {
|
||||
setIsEditing(true);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setNewName(e.target.value);
|
||||
};
|
||||
|
||||
const saveName = () => {
|
||||
const savedName = newName?.trim();
|
||||
onSave(savedName || '');
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleSaveClick: React.MouseEventHandler<HTMLButtonElement> = () => {
|
||||
saveName();
|
||||
clearTimeout(blurTimeoutRef.current);
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
blurTimeoutRef.current = setTimeout(() => {
|
||||
if (document.activeElement !== inputRef.current) {
|
||||
setIsEditing(false);
|
||||
setNewName(name);
|
||||
}
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
setIsEditing(false);
|
||||
setNewName(name);
|
||||
}
|
||||
if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
saveName();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
useEffect(() => {
|
||||
setNewName(name);
|
||||
}, [name]);
|
||||
|
||||
return (
|
||||
<div className="mb-1 flex flex-row items-center font-bold sm:text-xl md:mb-0 md:text-2xl">
|
||||
{isEditing ? (
|
||||
<div className="mb-1 flex items-center md:mb-0">
|
||||
<input
|
||||
type="text"
|
||||
value={newName ?? ''}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
ref={inputRef}
|
||||
className="mr-2 w-56 rounded-md border bg-transparent p-2 focus:outline-none dark:border-gray-600 md:w-auto"
|
||||
autoFocus={true}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveClick}
|
||||
className="rounded p-2 hover:bg-gray-300/50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<SaveIcon className="icon-md" size="1.2em" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-1 flex items-center md:mb-0">
|
||||
<span className="border border-transparent p-2">{newName}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEditClick}
|
||||
className="rounded p-2 hover:bg-gray-300/50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<EditIcon className="icon-md" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptName;
|
||||
59
client/src/components/Prompts/PromptVariables.tsx
Normal file
59
client/src/components/Prompts/PromptVariables.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { useMemo } from 'react';
|
||||
import { Variable } from 'lucide-react';
|
||||
import { extractUniqueVariables, cn } from '~/utils';
|
||||
import { Separator } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const specialVariables = {
|
||||
current_date: true,
|
||||
current_user: true,
|
||||
};
|
||||
|
||||
const specialVariableClasses =
|
||||
'bg-yellow-500/25 text-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
|
||||
|
||||
const PromptVariables = ({ promptText }: { promptText: string }) => {
|
||||
const localize = useLocalize();
|
||||
|
||||
const variables = useMemo(() => {
|
||||
return extractUniqueVariables(promptText || '');
|
||||
}, [promptText]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className="flex items-center gap-2 rounded-t-lg border border-border-medium py-2 pl-4 text-base font-semibold text-text-secondary">
|
||||
<Variable className="icon-sm" />
|
||||
{localize('com_ui_variables')}
|
||||
</h3>
|
||||
<div className="mb-4 flex w-full flex-row flex-wrap rounded-b-lg border border-border-medium p-4 md:min-h-16">
|
||||
{variables.length ? (
|
||||
<div className="flex h-7 items-center">
|
||||
{variables.map((variable, index) => (
|
||||
<label
|
||||
className={cn(
|
||||
'mr-1 rounded-full border border-border-medium px-2 text-text-secondary',
|
||||
specialVariables[variable.toLowerCase()] ? specialVariableClasses : '',
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
{specialVariables[variable.toLowerCase()] ? variable.toLowerCase() : variable}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-7 items-center">
|
||||
<span className="text-xs text-text-tertiary md:text-sm">
|
||||
{localize('com_ui_variables_info')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Separator className="my-3 bg-border-medium" />
|
||||
<span className="text-xs text-text-tertiary md:text-sm">
|
||||
{localize('com_ui_special_variables')}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptVariables;
|
||||
89
client/src/components/Prompts/PromptVersions.tsx
Normal file
89
client/src/components/Prompts/PromptVersions.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import React from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { Layers3 } from 'lucide-react';
|
||||
import type { TPrompt, TPromptGroup } from 'librechat-data-provider';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { Tag } from '~/components/ui';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const PromptVersions = ({
|
||||
prompts,
|
||||
group,
|
||||
selectionIndex,
|
||||
setSelectionIndex,
|
||||
}: {
|
||||
prompts: TPrompt[];
|
||||
group?: TPromptGroup;
|
||||
selectionIndex: React.SetStateAction<number>;
|
||||
setSelectionIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<>
|
||||
<h2 className="mb-4 flex gap-2 text-base font-semibold dark:text-gray-200">
|
||||
<Layers3 className="icon-lg text-green-500" />
|
||||
{localize('com_ui_versions')}
|
||||
</h2>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{prompts.map((prompt: TPrompt, index: number) => {
|
||||
const tags: string[] = [];
|
||||
if (index === 0) {
|
||||
tags.push('latest');
|
||||
}
|
||||
|
||||
if (prompt._id === group?.productionId) {
|
||||
tags.push('production');
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
key={index}
|
||||
className={cn(
|
||||
'relative cursor-pointer rounded-lg border p-4 dark:border-gray-600 dark:bg-transparent',
|
||||
index === selectionIndex ? 'bg-gray-100 dark:bg-gray-700' : 'bg-white',
|
||||
)}
|
||||
onClick={() => setSelectionIndex(index)}
|
||||
>
|
||||
<p className="font-bold dark:text-gray-200">
|
||||
{localize('com_ui_version_var', `${prompts.length - index}`)}
|
||||
</p>
|
||||
<p className="absolute right-4 top-5 whitespace-nowrap text-xs text-gray-600 dark:text-gray-400">
|
||||
{format(new Date(prompt.createdAt), 'yyyy-MM-dd HH:mm')}
|
||||
</p>
|
||||
{tags.length > 0 && (
|
||||
<span className="flex flex-wrap gap-1 text-sm">
|
||||
{tags.map((tag, i) => {
|
||||
return (
|
||||
<Tag
|
||||
key={`${tag}-${i}`}
|
||||
label={tag}
|
||||
className={cn(
|
||||
'w-fit border border-transparent bg-blue-100 text-blue-500 dark:border-blue-500 dark:bg-transparent dark:text-blue-500',
|
||||
tag === 'production' &&
|
||||
'bg-green-100 text-green-500 dark:border-green-500 dark:bg-transparent dark:text-green-500',
|
||||
)}
|
||||
labelClassName="flex m-0 justify-center gap-1"
|
||||
LabelNode={
|
||||
tag === 'production' ? (
|
||||
<div className="flex items-center ">
|
||||
<span className="slow-pulse h-[0.4rem] w-[0.4rem] rounded-full bg-green-400" />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{group?.authorName && (
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">by {group.authorName}</p>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptVersions;
|
||||
20
client/src/components/Prompts/PromptsAccordion.tsx
Normal file
20
client/src/components/Prompts/PromptsAccordion.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import PromptSidePanel from '~/components/Prompts/Groups/GroupSidePanel';
|
||||
import AutoSendPrompt from '~/components/Prompts/Groups/AutoSendPrompt';
|
||||
import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
|
||||
import ManagePrompts from '~/components/Prompts/ManagePrompts';
|
||||
import { usePromptGroupsNav } from '~/hooks';
|
||||
|
||||
export default function PromptsAccordion() {
|
||||
const groupsNav = usePromptGroupsNav();
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<PromptSidePanel className="lg:w-full xl:w-full" {...groupsNav}>
|
||||
<div className="flex w-full flex-row items-center justify-between px-2 pt-2">
|
||||
<ManagePrompts className="select-none" />
|
||||
<AutoSendPrompt className="text-xs dark:text-white" />
|
||||
</div>
|
||||
<FilterPrompts setName={groupsNav.setName} className="items-center justify-center px-2" />
|
||||
</PromptSidePanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
client/src/components/Prompts/PromptsView.tsx
Normal file
58
client/src/components/Prompts/PromptsView.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { useMemo, useEffect } from 'react';
|
||||
import { Outlet, useParams, useNavigate } from 'react-router-dom';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import AutoSendPrompt from '~/components/Prompts/Groups/AutoSendPrompt';
|
||||
import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
|
||||
import DashBreadcrumb from '~/routes/Layouts/DashBreadcrumb';
|
||||
import { usePromptGroupsNav, useHasAccess } from '~/hooks';
|
||||
import GroupSidePanel from './Groups/GroupSidePanel';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function PromptsView() {
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const groupsNav = usePromptGroupsNav();
|
||||
const isDetailView = useMemo(() => !!(params.promptId || params['*'] === 'new'), [params]);
|
||||
const hasAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.PROMPTS,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutId: ReturnType<typeof setTimeout>;
|
||||
if (!hasAccess) {
|
||||
timeoutId = setTimeout(() => {
|
||||
navigate('/c/new');
|
||||
}, 1000);
|
||||
}
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [hasAccess, navigate]);
|
||||
|
||||
if (!hasAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col bg-[#f9f9f9] p-0 dark:bg-transparent lg:p-2">
|
||||
<DashBreadcrumb />
|
||||
<div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
|
||||
<GroupSidePanel isDetailView={isDetailView} {...groupsNav}>
|
||||
<div className="mx-2 mt-1 flex flex-row items-center justify-between">
|
||||
<FilterPrompts setName={groupsNav.setName} />
|
||||
<AutoSendPrompt className="text-xs dark:text-white" />
|
||||
</div>
|
||||
</GroupSidePanel>
|
||||
<div
|
||||
className={cn(
|
||||
'w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
|
||||
isDetailView ? 'block' : 'hidden md:block',
|
||||
)}
|
||||
>
|
||||
<Outlet context={groupsNav} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
151
client/src/components/Prompts/SharePrompt.tsx
Normal file
151
client/src/components/Prompts/SharePrompt.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Share2Icon } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions } from 'librechat-data-provider';
|
||||
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
import type {
|
||||
TPromptGroup,
|
||||
TStartupConfig,
|
||||
TUpdatePromptGroupPayload,
|
||||
} from 'librechat-data-provider';
|
||||
import {
|
||||
OGDialog,
|
||||
OGDialogTitle,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
OGDialogClose,
|
||||
} from '~/components/ui';
|
||||
import { useUpdatePromptGroup } from '~/data-provider';
|
||||
import { Button, Switch } from '~/components/ui';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
type FormValues = {
|
||||
[Permissions.SHARED_GLOBAL]: boolean;
|
||||
};
|
||||
|
||||
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?.includes(instanceProjectId),
|
||||
[group, instanceProjectId],
|
||||
);
|
||||
|
||||
const {
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
[Permissions.SHARED_GLOBAL]: groupIsGlobal,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setValue(Permissions.SHARED_GLOBAL, groupIsGlobal);
|
||||
}, [groupIsGlobal, setValue]);
|
||||
|
||||
if (!group || !instanceProjectId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
if (!group._id || !instanceProjectId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {} as TUpdatePromptGroupPayload;
|
||||
|
||||
if (data[Permissions.SHARED_GLOBAL]) {
|
||||
payload.projectIds = [startupConfig.instanceProjectId];
|
||||
} else {
|
||||
payload.removeProjectIds = [startupConfig.instanceProjectId];
|
||||
}
|
||||
|
||||
updateGroup.mutate({
|
||||
id: group._id,
|
||||
payload,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant={'default'}
|
||||
size={'sm'}
|
||||
className="h-10 w-10 border border-transparent bg-blue-500/90 transition-all hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-800"
|
||||
disabled={disabled}
|
||||
>
|
||||
<Share2Icon className="cursor-pointer text-white " />
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
|
||||
<OGDialogTitle>{localize('com_ui_share_var', `"${group.name}"`)}</OGDialogTitle>
|
||||
<form className="p-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-4 flex items-center justify-between gap-2 py-4">
|
||||
<label
|
||||
className="cursor-pointer select-none"
|
||||
htmlFor={Permissions.SHARED_GLOBAL}
|
||||
onClick={() =>
|
||||
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
{localize('com_ui_share_to_all_users')}
|
||||
{groupIsGlobal && (
|
||||
<span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span>
|
||||
)}
|
||||
</label>
|
||||
<Controller
|
||||
name={Permissions.SHARED_GLOBAL}
|
||||
control={control}
|
||||
disabled={isFetching || updateGroup.isLoading || !instanceProjectId}
|
||||
rules={{
|
||||
validate: (value) => {
|
||||
const isValid = !(value && groupIsGlobal);
|
||||
if (!isValid) {
|
||||
showToast({
|
||||
message: localize('com_ui_prompt_already_shared_to_all'),
|
||||
status: 'warning',
|
||||
});
|
||||
}
|
||||
return isValid;
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field?.value?.toString()}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<OGDialogClose asChild>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isFetching}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</OGDialogClose>
|
||||
</div>
|
||||
</form>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SharePrompt;
|
||||
17
client/src/components/Prompts/SkeletonForm.tsx
Normal file
17
client/src/components/Prompts/SkeletonForm.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Skeleton } from '~/components/ui';
|
||||
|
||||
export default function SkeletonForm() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-between px-4 dark:text-gray-200 sm:flex-row">
|
||||
<Skeleton className="mb-1 flex h-10 w-32 flex-row items-center font-bold sm:text-xl md:mb-0 md:h-12 md:text-2xl" />
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col md:flex-row">
|
||||
{/* Left Section */}
|
||||
<div className="flex-1 overflow-y-auto border-r border-border-medium-alt p-4 md:max-h-[calc(100vh-150px)]">
|
||||
<Skeleton className="h-96" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
client/src/components/Prompts/index.ts
Normal file
10
client/src/components/Prompts/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export { default as PromptName } from './PromptName';
|
||||
export { default as PromptsView } from './PromptsView';
|
||||
export { default as PromptEditor } from './PromptEditor';
|
||||
export { default as PromptForm } from './PromptForm';
|
||||
export { default as PreviewLabels } from './PreviewLabels';
|
||||
export { default as PromptGroupsList } from './Groups/List';
|
||||
export { default as DashGroupItem } from './Groups/DashGroupItem';
|
||||
export { default as EmptyPromptPreview } from './EmptyPromptPreview';
|
||||
export { default as PromptSidePanel } from './Groups/GroupSidePanel';
|
||||
export { default as CreatePromptForm } from './Groups/CreatePromptForm';
|
||||
Loading…
Add table
Add a link
Reference in a new issue