kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 04:30:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

[CHORE] Hide security tab on Settings Sidebar/Refactor SettingsSidebar component (#683)

Browse Source 
* hide security setting in settings sidebar when in multiusermode

* refactor sidebar to handle mobile view inside SettingsSidebar component

* forgot eventlogs on sidebar
move footer on settingSidebar to component

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2024-02-07 08:17:48 -08:00 committed by GitHub
parent aca5940650
commit f402ef4c3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 291 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

653
frontend/src/components/SettingsSidebar/index.jsx
View File

@ -25,11 +25,104 @@ import {
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import { USER_BACKGROUND_COLOR } from "@/utils/constants";
import { isMobile } from "react-device-detect";
export default function SettingsSidebar() { export default function SettingsSidebar() {
const { logo } = useLogo(); const { logo } = useLogo();
const sidebarRef = useRef(null);
const { user } = useUser(); const { user } = useUser();
const sidebarRef = useRef(null);
const [showSidebar, setShowSidebar] = useState(false);
const [showBgOverlay, setShowBgOverlay] = useState(false);
useEffect(() => {
function handleBg() {
if (showSidebar) {
setTimeout(() => {
setShowBgOverlay(true);
}, 300);
} else {
setShowBgOverlay(false);
}
}
handleBg();
}, [showSidebar]);
if (isMobile) {
return (
<>
<div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16">
<button
onClick={() => setShowSidebar(true)}
className="rounded-md p-2 flex items-center justify-center text-slate-200"
>
<List className="h-6 w-6" />
</button>
<div className="flex items-center justify-center flex-grow">
<img
src={logo}
alt="Logo"
className="block mx-auto h-6 w-auto"
style={{ maxHeight: "40px", objectFit: "contain" }}
/>
</div>
<div className="w-12"></div>
</div>
<div
style={{
transform: showSidebar ? `translateX(0vw)` : `translateX(-100vw)`,
}}
className={`z-99 fixed top-0 left-0 transition-all duration-500 w-[100vw] h-[100vh]`}
>
<div
className={`${
showBgOverlay
? "transition-all opacity-1"
: "transition-none opacity-0"
} duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
onClick={() => setShowSidebar(false)}
/>
<div
ref={sidebarRef}
className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
>
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
{/* Header Information */}
<div className="flex w-full items-center justify-between gap-x-4">
<div className="flex shrink-1 w-fit items-center justify-start">
<img
src={logo}
alt="Logo"
className="rounded w-full max-h-[40px]"
style={{ objectFit: "contain" }}
/>
</div>
<div className="flex gap-x-2 items-center text-slate-500 shrink-0">
<a
href={paths.home()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<House className="h-4 w-4" />
</a>
</div>
</div>
{/* Primary Body */}
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
<div className="h-auto md:sidebar-items md:dark:sidebar-items">
<div className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll">
<SidebarOptions user={user} />
</div>
</div>
<div>
<Footer />
</div>
</div>
</div>
</div>
</div>
</>
);
}
return ( return (
<> <>
@ -62,162 +155,15 @@ export default function SettingsSidebar() {
Settings Settings
</div> </div>
{/* Primary Body */} {/* Primary Body */}
<div className="h-[100%] flex flex-col w-full justify-between pt-4 overflow-y-hidden"> <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden">
<div className="h-auto sidebar-items"> <div className="h-auto sidebar-items">
<div className="flex flex-col gap-y-2 h-[100%] pb-8 overflow-y-scroll no-scroll"> {/* Options */}
<Option <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
href={paths.settings.system()} <SidebarOptions user={user} />
btnText="System Preferences"
icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.invites()}
btnText="Invitation"
icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.users()}
btnText="Users"
icon={<Users className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.workspaces()}
btnText="Workspaces"
icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.chats()}
btnText="Workspace Chat"
icon={<ChatCenteredText className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.appearance()}
btnText="Appearance"
icon={<Eye className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.apiKeys()}
btnText="API Keys"
icon={<Key className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.llmPreference()}
btnText="LLM Preference"
icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.embeddingPreference()}
btnText="Embedding Preference"
icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.vectorDatabase()}
btnText="Vector Database"
icon={<Database className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.dataConnectors.list()}
btnText="Data Connectors"
icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.embedSetup()}
childLinks={[paths.settings.embedChats()]}
btnText="Embedded Chat"
icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
subOptions={
<>
<Option
href={paths.settings.embedChats()}
btnText="Embedded Chat History"
icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</>
}
/>
<Option
href={paths.settings.security()}
btnText="Security"
icon={<Lock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.logs()}
btnText="Events Logs"
icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</div> </div>
</div> </div>
<div> <div>
{/* Footer */} <Footer />
<div className="flex justify-center mt-2">
<div className="flex space-x-4">
<a
href={paths.github()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<GithubLogo weight="fill" className="h-5 w-5 " />
</a>
<a
href={paths.docs()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<BookOpen weight="fill" className="h-5 w-5 " />
</a>
<a
href={paths.discord()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<DiscordLogo
weight="fill"
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/>
</a>
{/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
<DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
</button> */}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -226,254 +172,38 @@ export default function SettingsSidebar() {
); );
} }
export function SidebarMobileHeader() { const Footer = () => {
const { logo } = useLogo();
const { user } = useUser();
const sidebarRef = useRef(null);
const [showSidebar, setShowSidebar] = useState(false);
const [showBgOverlay, setShowBgOverlay] = useState(false);
useEffect(() => {
function handleBg() {
if (showSidebar) {
setTimeout(() => {
setShowBgOverlay(true);
}, 300);
} else {
setShowBgOverlay(false);
}
}
handleBg();
}, [showSidebar]);
return ( return (
<> <div className="flex justify-center mt-2">
<div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16"> <div className="flex space-x-4">
<button <a
onClick={() => setShowSidebar(true)} href={paths.github()}
className="rounded-md p-2 flex items-center justify-center text-slate-200" className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
> >
<List className="h-6 w-6" /> <GithubLogo weight="fill" className="h-5 w-5 " />
</button> </a>
<div className="flex items-center justify-center flex-grow"> <a
<img href={paths.docs()}
src={logo} className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
alt="Logo" >
className="block mx-auto h-6 w-auto" <BookOpen weight="fill" className="h-5 w-5 " />
style={{ maxHeight: "40px", objectFit: "contain" }} </a>
<a
href={paths.discord()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<DiscordLogo
weight="fill"
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/> />
</div> </a>
<div className="w-12"></div> {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
<DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
</button> */}
</div> </div>
<div </div>
style={{
transform: showSidebar ? `translateX(0vw)` : `translateX(-100vw)`,
}}
className={`z-99 fixed top-0 left-0 transition-all duration-500 w-[100vw] h-[100vh]`}
>
<div
className={`${
showBgOverlay
? "transition-all opacity-1"
: "transition-none opacity-0"
} duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
onClick={() => setShowSidebar(false)}
/>
<div
ref={sidebarRef}
className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
>
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
{/* Header Information */}
<div className="flex w-full items-center justify-between gap-x-4">
<div className="flex shrink-1 w-fit items-center justify-start">
<img
src={logo}
alt="Logo"
className="rounded w-full max-h-[40px]"
style={{ objectFit: "contain" }}
/>
</div>
<div className="flex gap-x-2 items-center text-slate-500 shrink-0">
<a
href={paths.home()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<House className="h-4 w-4" />
</a>
</div>
</div>
{/* Primary Body */}
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
<div className="h-auto md:sidebar-items md:dark:sidebar-items">
<div
style={{ height: "calc(100vw-3rem)" }}
className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"
>
<Option
href={paths.settings.system()}
btnText="System Preferences"
icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.invites()}
btnText="Invitation"
icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.users()}
btnText="Users"
icon={<Users className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.workspaces()}
btnText="Workspaces"
icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.chats()}
btnText="Workspace Chat"
icon={
<ChatCenteredText className="h-5 w-5 flex-shrink-0" />
}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.appearance()}
btnText="Appearance"
icon={<Eye className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.apiKeys()}
btnText="API Keys"
icon={<Key className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.llmPreference()}
btnText="LLM Preference"
icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.embeddingPreference()}
btnText="Embedding Preference"
icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.vectorDatabase()}
btnText="Vector Database"
icon={<Database className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.dataConnectors.list()}
btnText="Data Connectors"
icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.embedSetup()}
childLinks={[paths.settings.embedChats()]}
btnText="Embedded Chat"
icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
subOptions={
<>
<Option
href={paths.settings.embedChats()}
btnText="Embedded Chat History"
icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</>
}
/>
<Option
href={paths.settings.security()}
btnText="Security"
icon={<Lock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.logs()}
btnText="Events Logs"
icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</div>
</div>
<div>
{/* Footer */}
<div className="flex justify-center mt-2">
<div className="flex space-x-4">
<a
href={paths.github()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<GithubLogo weight="fill" className="h-5 w-5 " />
</a>
<a
href={paths.docs()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<BookOpen weight="fill" className="h-5 w-5 " />
</a>
<a
href={paths.discord()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<DiscordLogo
weight="fill"
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/>
</a>
{/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
<DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
</button> */}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
); );
} };
const Option = ({ const Option = ({
btnText, btnText,
@ -484,7 +214,10 @@ const Option = ({
user = null, user = null,
allowedRole = [], allowedRole = [],
subOptions = null, subOptions = null,
hidden = false,
}) => { }) => {
if (hidden) return null;
const hasActiveChild = childLinks.includes(window.location.pathname); const hasActiveChild = childLinks.includes(window.location.pathname);
const isActive = window.location.pathname === href; const isActive = window.location.pathname === href;
@ -493,6 +226,7 @@ const Option = ({
// Option is dual-mode, but user exists, we need to check permissions // Option is dual-mode, but user exists, we need to check permissions
if (flex && !!user && !allowedRole.includes(user?.role)) return null; if (flex && !!user && !allowedRole.includes(user?.role)) return null;
return ( return (
<> <>
<div className="flex gap-x-2 items-center justify-between text-white"> <div className="flex gap-x-2 items-center justify-between text-white">
@ -526,3 +260,130 @@ const Option = ({
</> </>
); );
}; };
const SidebarOptions = ({ user = null }) => (
<>
<Option
href={paths.settings.system()}
btnText="System Preferences"
icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.invites()}
btnText="Invitation"
icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.users()}
btnText="Users"
icon={<Users className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.workspaces()}
btnText="Workspaces"
icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
user={user}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.chats()}
btnText="Workspace Chat"
icon={<ChatCenteredText className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.appearance()}
btnText="Appearance"
icon={<Eye className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.apiKeys()}
btnText="API Keys"
icon={<Key className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.llmPreference()}
btnText="LLM Preference"
icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.embeddingPreference()}
btnText="Embedding Preference"
icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.vectorDatabase()}
btnText="Vector Database"
icon={<Database className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
<Option
href={paths.settings.dataConnectors.list()}
btnText="Data Connectors"
icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
/>
<Option
href={paths.settings.embedSetup()}
childLinks={[paths.settings.embedChats()]}
btnText="Embedded Chat"
icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
subOptions={
<>
<Option
href={paths.settings.embedChats()}
btnText="Embedded Chat History"
icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</>
}
/>
<Option
href={paths.settings.security()}
btnText="Security"
icon={<Lock className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin", "manager"]}
hidden={user?.role}
/>
<Option
href={paths.settings.logs()}
btnText="Event Logs"
icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
user={user}
flex={true}
allowedRole={["admin"]}
/>
</>
);

5
frontend/src/pages/Admin/Invitations/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -15,12 +15,11 @@ export default function AdminInvites() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/Admin/Logging/index.jsx
View File

@ -1,4 +1,4 @@
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import useQuery from "@/hooks/useQuery"; import useQuery from "@/hooks/useQuery";
import System from "@/models/system"; import System from "@/models/system";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -27,12 +27,11 @@ export default function AdminLogs() {
}; };
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/Admin/System/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import Admin from "@/models/admin"; import Admin from "@/models/admin";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
@ -40,12 +40,11 @@ export default function AdminSystem() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
onChange={() => setHasChanges(true)} onChange={() => setHasChanges(true)}

5
frontend/src/pages/Admin/Users/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -15,12 +15,11 @@ export default function AdminUsers() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/Admin/Workspaces/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -15,12 +15,11 @@ export default function AdminWorkspaces() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -17,12 +17,11 @@ export default function AdminApiKeys() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

6
frontend/src/pages/GeneralSettings/Appearance/index.jsx
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import Admin from "@/models/admin";
import AnythingLLM from "@/media/logo/anything-llm.png"; import AnythingLLM from "@/media/logo/anything-llm.png";
import useLogo from "@/hooks/useLogo"; import useLogo from "@/hooks/useLogo";
import System from "@/models/system"; import System from "@/models/system";
@ -114,12 +113,11 @@ export default function Appearance() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/GeneralSettings/Chats/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -63,12 +63,11 @@ export default function WorkspaceChats() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import { DATA_CONNECTORS } from "@/components/DataConnectorOption"; import { DATA_CONNECTORS } from "@/components/DataConnectorOption";
import System from "@/models/system"; import System from "@/models/system";
@ -64,12 +64,11 @@ export default function GithubConnectorSetup() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex w-full"> <div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10"> <div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">

5
frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import { DATA_CONNECTORS } from "@/components/DataConnectorOption"; import { DATA_CONNECTORS } from "@/components/DataConnectorOption";
import System from "@/models/system"; import System from "@/models/system";
@ -45,12 +45,11 @@ export default function YouTubeTranscriptConnectorSetup() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex w-full"> <div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10"> <div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">

5
frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
View File

@ -1,17 +1,16 @@
import React from "react"; import React from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import DataConnectorOption from "@/components/DataConnectorOption"; import DataConnectorOption from "@/components/DataConnectorOption";
export default function DataConnectors() { export default function DataConnectors() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex w-full"> <div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

5
frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -11,12 +11,11 @@ export default function EmbedChats() {
// TODO [FEAT]: Add export of embed chats // TODO [FEAT]: Add export of embed chats
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton"; import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css"; import "react-loading-skeleton/dist/skeleton.css";
@ -14,12 +14,11 @@ export default function EmbedConfigs() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4"> <div className="items-center flex gap-x-4">

5
frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import System from "@/models/system"; import System from "@/models/system";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
@ -126,7 +126,7 @@ export default function GeneralEmbeddingPreference() {
onConfirm={handleSaveSettings} onConfirm={handleSaveSettings}
/> />
</ModalWrapper> </ModalWrapper>
{!isMobile && <Sidebar />} <Sidebar />
{loading ? ( {loading ? (
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@ -141,7 +141,6 @@ export default function GeneralEmbeddingPreference() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<form <form
id="embedding-form" id="embedding-form"
onSubmit={handleSubmit} onSubmit={handleSubmit}

5
frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import System from "@/models/system"; import System from "@/models/system";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
@ -165,7 +165,7 @@ export default function GeneralLLMPreference() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
{loading ? ( {loading ? (
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@ -180,7 +180,6 @@ export default function GeneralLLMPreference() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<form onSubmit={handleSubmit} className="flex w-full"> <form onSubmit={handleSubmit} className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16"> <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10"> <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

5
frontend/src/pages/GeneralSettings/Security/index.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
import System from "@/models/system"; import System from "@/models/system";
@ -10,12 +10,11 @@ import PreLoader from "@/components/Preloader";
export default function GeneralSecurity() { export default function GeneralSecurity() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
{!isMobile && <Sidebar />} <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<MultiUserMode /> <MultiUserMode />
<PasswordProtection /> <PasswordProtection />
</div> </div>

5
frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar"; import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import System from "@/models/system"; import System from "@/models/system";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
@ -161,7 +161,7 @@ export default function GeneralVectorDatabase() {
onConfirm={handleSaveSettings} onConfirm={handleSaveSettings}
/> />
</ModalWrapper> </ModalWrapper>
{!isMobile && <Sidebar />} <Sidebar />
{loading ? ( {loading ? (
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@ -176,7 +176,6 @@ export default function GeneralVectorDatabase() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent" className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
> >
{isMobile && <SidebarMobileHeader />}
<form <form
id="vectordb-form" id="vectordb-form"
onSubmit={handleSubmit} onSubmit={handleSubmit}