談蓝色
10 months ago
22 changed files with 336 additions and 120 deletions
-
5frontend/src/App.jsx
-
101frontend/src/components/DefaultChat/index.jsx
-
2frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
-
14frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
-
20frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
-
6frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
-
14frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
-
6frontend/src/components/Modals/ManageWorkspace/Documents/index.jsx
-
4frontend/src/components/Modals/ManageWorkspace/index.jsx
-
2frontend/src/components/Modals/NewWorkspace.jsx
-
4frontend/src/components/Modals/Password/MultiUserAuth.jsx
-
9frontend/src/components/SettingsSidebar/index.jsx
-
8frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
-
4frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
-
16frontend/src/components/UserMenu/UserButton/index.jsx
-
8frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
-
4frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
-
11frontend/src/index.css
-
1frontend/src/locales/zh/common.js
-
197frontend/src/pages/Admin/Section/index.jsx
-
13frontend/src/pages/Admin/Users/index.jsx
-
3frontend/src/utils/paths.js
@ -0,0 +1,197 @@ |
|||||
|
import { useEffect, useState } from "react"; |
||||
|
import Sidebar from "@/components/SettingsSidebar"; |
||||
|
import { isMobile } from "react-device-detect"; |
||||
|
import * as Skeleton from "react-loading-skeleton"; |
||||
|
import "react-loading-skeleton/dist/skeleton.css"; |
||||
|
import { UserPlus } from "@phosphor-icons/react"; |
||||
|
import Admin from "@/models/admin"; |
||||
|
import UserRow from "../Users/UserRow"; |
||||
|
import useUser from "@/hooks/useUser"; |
||||
|
import NewUserModal from "../Users/NewUserModal"; |
||||
|
import { useModal } from "@/hooks/useModal"; |
||||
|
import ModalWrapper from "@/components/ModalWrapper"; |
||||
|
import CTAButton from "@/components/lib/CTAButton"; |
||||
|
|
||||
|
export default function AdminUsers() { |
||||
|
const { isOpen, openModal, closeModal } = useModal(); |
||||
|
|
||||
|
return ( |
||||
|
<div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex"> |
||||
|
<Sidebar /> |
||||
|
<div |
||||
|
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} |
||||
|
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0" |
||||
|
> |
||||
|
<div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16"> |
||||
|
<div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2"> |
||||
|
<div className="items-center flex gap-x-4"> |
||||
|
<p className="text-lg leading-6 font-bold text-theme-text-primary"> |
||||
|
部门 |
||||
|
</p> |
||||
|
</div> |
||||
|
<p className="text-xs leading-[18px] font-base text-theme-text-secondary"> |
||||
|
部门树状结构 |
||||
|
</p> |
||||
|
</div> |
||||
|
<div className="w-full justify-end flex"> |
||||
|
<CTAButton |
||||
|
onClick={openModal} |
||||
|
className="mt-3 mr-0 mb-4 md:-mb-6 z-10" |
||||
|
> |
||||
|
<UserPlus className="h-4 w-4" weight="bold" /> Add user |
||||
|
</CTAButton> |
||||
|
</div> |
||||
|
<div className="overflow-x-auto"> |
||||
|
<UsersContainer /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ModalWrapper isOpen={isOpen}> |
||||
|
<NewUserModal closeModal={closeModal} /> |
||||
|
</ModalWrapper> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function UsersContainer() { |
||||
|
const { user: currUser } = useUser(); |
||||
|
const [loading, setLoading] = useState(true); |
||||
|
const [users, setUsers] = useState([]); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
async function fetchUsers() { |
||||
|
const _users = await Admin.users(); |
||||
|
setUsers(_users); |
||||
|
setLoading(false); |
||||
|
} |
||||
|
fetchUsers(); |
||||
|
}, []); |
||||
|
|
||||
|
if (loading) { |
||||
|
return ( |
||||
|
<Skeleton.default |
||||
|
height="80vh" |
||||
|
width="100%" |
||||
|
highlightColor="var(--theme-bg-primary)" |
||||
|
baseColor="var(--theme-bg-secondary)" |
||||
|
count={1} |
||||
|
className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-8" |
||||
|
containerClassName="flex w-full" |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0"> |
||||
|
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b"> |
||||
|
<tr> |
||||
|
<th scope="col" className="px-6 py-3 rounded-tl-lg"> |
||||
|
Username |
||||
|
</th> |
||||
|
<th scope="col" className="px-6 py-3"> |
||||
|
Role |
||||
|
</th> |
||||
|
<th scope="col" className="px-6 py-3"> |
||||
|
Date Added |
||||
|
</th> |
||||
|
<th scope="col" className="px-6 py-3 rounded-tr-lg"> |
||||
|
{" "} |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{users.map((user) => ( |
||||
|
<UserRow key={user.id} currUser={currUser} user={user} /> |
||||
|
))} |
||||
|
</tbody> |
||||
|
</table> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const ROLE_HINT = { |
||||
|
default: [ |
||||
|
"Can only send chats with workspaces they are added to by admin or managers.", |
||||
|
"Cannot modify any settings at all.", |
||||
|
], |
||||
|
manager: [ |
||||
|
"Can view, create, and delete any workspaces and modify workspace-specific settings.", |
||||
|
"Can create, update and invite new users to the instance.", |
||||
|
"Cannot modify LLM, vectorDB, embedding, or other connections.", |
||||
|
], |
||||
|
admin: [ |
||||
|
"Highest user level privilege.", |
||||
|
"Can see and do everything across the system.", |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
export function RoleHintDisplay({ role }) { |
||||
|
return ( |
||||
|
<div className="flex flex-col gap-y-1 py-1 pb-4"> |
||||
|
<p className="text-sm font-medium text-theme-text-primary">Permissions</p> |
||||
|
<ul className="flex flex-col gap-y-1 list-disc px-4"> |
||||
|
{ROLE_HINT[role ?? "default"].map((hints, i) => { |
||||
|
return ( |
||||
|
<li key={i} className="text-xs text-theme-text-secondary"> |
||||
|
{hints} |
||||
|
</li> |
||||
|
); |
||||
|
})} |
||||
|
</ul> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export function MessageLimitInput({ enabled, limit, updateState, role }) { |
||||
|
if (role === "admin") return null; |
||||
|
return ( |
||||
|
<div className="mt-4 mb-8"> |
||||
|
<div className="flex flex-col gap-y-1"> |
||||
|
<div className="flex items-center gap-x-2"> |
||||
|
<h2 className="text-base leading-6 font-bold text-white"> |
||||
|
Limit messages per day |
||||
|
</h2> |
||||
|
<label className="relative inline-flex cursor-pointer items-center"> |
||||
|
<input |
||||
|
type="checkbox" |
||||
|
checked={enabled} |
||||
|
onChange={(e) => { |
||||
|
updateState((prev) => ({ |
||||
|
...prev, |
||||
|
enabled: e.target.checked, |
||||
|
})); |
||||
|
}} |
||||
|
className="peer sr-only" |
||||
|
/> |
||||
|
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div> |
||||
|
</label> |
||||
|
</div> |
||||
|
<p className="text-xs leading-[18px] font-base text-white/60"> |
||||
|
Restrict this user to a number of successful queries or chats within a |
||||
|
24 hour window. |
||||
|
</p> |
||||
|
</div> |
||||
|
{enabled && ( |
||||
|
<div className="mt-4"> |
||||
|
<label className="text-white text-sm font-semibold block mb-4"> |
||||
|
Message limit per day |
||||
|
</label> |
||||
|
<div className="relative mt-2"> |
||||
|
<input |
||||
|
type="number" |
||||
|
onScroll={(e) => e.target.blur()} |
||||
|
onChange={(e) => { |
||||
|
updateState({ |
||||
|
enabled: true, |
||||
|
limit: Number(e?.target?.value || 0), |
||||
|
}); |
||||
|
}} |
||||
|
value={limit} |
||||
|
min={1} |
||||
|
className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue