File size: 2,036 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 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(
'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
isDetailView ? 'block' : 'hidden md:block',
)}
>
<Outlet context={groupsNav} />
</div>
</div>
</div>
);
}
|