From 7ae0d28ef0cf8e630395a4bee343b89bb78d429e Mon Sep 17 00:00:00 2001 From: Timothy Carambat Date: Fri, 18 Aug 2023 14:36:58 -0700 Subject: [PATCH] improve UX and useability for Settings and prefernces for mobile and desktop (#200) * improve UX and useability for Settings and prefernces for mobile and desktop * linting --- frontend/src/App.jsx | 2 - .../src/components/AdminSidebar/index.jsx | 8 +- .../Modals/Settings/Appearance/index.jsx} | 55 ++---- .../Modals/Settings/VectorDbs/index.jsx | 2 +- .../src/components/Modals/Settings/index.jsx | 112 +---------- .../Sidebar/SettingsOverlay/index.jsx | 181 ++++++++++++++++++ frontend/src/components/Sidebar/index.jsx | 66 +++---- frontend/src/pages/Admin/Appearance/index.jsx | 2 +- frontend/src/utils/paths.js | 3 - 9 files changed, 239 insertions(+), 192 deletions(-) rename frontend/src/{pages/System/Appearance.jsx => components/Modals/Settings/Appearance/index.jsx} (81%) create mode 100644 frontend/src/components/Sidebar/SettingsOverlay/index.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 30168aaf..f5d53426 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -12,7 +12,6 @@ const AdminWorkspaces = lazy(() => import("./pages/Admin/Workspaces")); const AdminChats = lazy(() => import("./pages/Admin/Chats")); const AdminSystem = lazy(() => import("./pages/Admin/System")); const AdminAppearance = lazy(() => import("./pages/Admin/Appearance")); -const Appearance = lazy(() => import("./pages/System/Appearance")); export default function App() { return ( @@ -20,7 +19,6 @@ export default function App() { } /> - } /> } diff --git a/frontend/src/components/AdminSidebar/index.jsx b/frontend/src/components/AdminSidebar/index.jsx index 61402d66..b185d4f9 100644 --- a/frontend/src/components/AdminSidebar/index.jsx +++ b/frontend/src/components/AdminSidebar/index.jsx @@ -182,12 +182,12 @@ export function SidebarMobileHeader() { />
{/* Header Information */} -
-
+
+
Logo
-
+
{ - window.location = paths.home(); - }; - return ( -
-
-
-
-
- - Back -
-

- Appearance Settings -

-

- Customize the appearance settings of your platform. -

-
+
+
+
+

+ Customize the appearance settings of AnythingLLM instance. +

+
+ +

@@ -153,7 +134,7 @@ export default function Appearance() { Change the logo that appears in the sidebar.

-
+
Uploaded Logo
-
+
{messages.map((message, index) => (
{message.user && ( diff --git a/frontend/src/components/Modals/Settings/VectorDbs/index.jsx b/frontend/src/components/Modals/Settings/VectorDbs/index.jsx index ec25e0a7..9bf86af7 100644 --- a/frontend/src/components/Modals/Settings/VectorDbs/index.jsx +++ b/frontend/src/components/Modals/Settings/VectorDbs/index.jsx @@ -61,7 +61,7 @@ export default function VectorDBSelection({

Vector database providers

-
+
false; -export default function SystemSettingsModal({ hideModal = noop }) { +export default function SystemSettingsModal({ tab = null, hideModal = noop }) { const { user } = useUser(); const [loading, setLoading] = useState(true); - const [selectedTab, setSelectedTab] = useState("llm"); const [settings, setSettings] = useState(null); - const Component = TABS[selectedTab || "llm"]; + const Component = TABS[tab || "llm"]; useEffect(() => { async function fetchKeys() { @@ -64,12 +56,6 @@ export default function SystemSettingsModal({ hideModal = noop }) {
-
{loading ? (
@@ -84,92 +70,6 @@ export default function SystemSettingsModal({ hideModal = noop }) { ); } -function SettingTabs({ selectedTab, changeTab, settings, user }) { - if (!settings) { - return ( -
-
-
- ); - } - - return ( -
    - } - onClick={changeTab} - /> - } - onClick={changeTab} - /> - } - onClick={changeTab} - /> - {!settings?.MultiUserMode && ( - <> - } - onClick={changeTab} - /> - } - onClick={changeTab} - /> - } - onClick={() => window.open(paths.appearance())} - /> - - )} -
- ); -} - -function SettingTab({ - active = false, - displayName, - tabName, - icon = "", - onClick, -}) { - const classes = active - ? "text-blue-600 border-blue-600 active dark:text-blue-400 dark:border-blue-400 bg-blue-500 bg-opacity-5" - : "border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"; - return ( -
  • - -
    • - ); -} - export function useSystemSettingsModal() { const [showing, setShowing] = useState(false); const showModal = () => { diff --git a/frontend/src/components/Sidebar/SettingsOverlay/index.jsx b/frontend/src/components/Sidebar/SettingsOverlay/index.jsx new file mode 100644 index 00000000..794968f3 --- /dev/null +++ b/frontend/src/components/Sidebar/SettingsOverlay/index.jsx @@ -0,0 +1,181 @@ +import React, { useEffect, useState } from "react"; +import { + X, + Archive, + Lock, + Users, + Database, + MessageSquare, + Eye, +} from "react-feather"; +import SystemSettingsModal, { + useSystemSettingsModal, +} from "../../Modals/Settings"; +import useLogo from "../../../hooks/useLogo"; +import System from "../../../models/system"; + +const OVERLAY_ID = "anything-llm-system-overlay"; +const OVERLAY_CLASSES = { + enabled: ["z-10", "opacity-1"], + disabled: ["-z-10", "opacity-0"], +}; + +export default function SettingsOverlay() { + const { logo } = useLogo(); + const [tab, setTab] = useState(null); + const [settings, setSettings] = useState(null); + const [loading, setLoading] = useState(true); + const { showing, hideModal, showModal } = useSystemSettingsModal(); + const selectTab = (tab = null) => { + setTab(tab); + showModal(true); + }; + const handleModalClose = () => { + hideModal(); + setTab(null); + }; + + useEffect(() => { + async function fetchKeys() { + const _settings = await System.keys(); + setSettings(_settings); + setLoading(false); + } + fetchKeys(); + }, []); + + return ( +
    +
    +
    + Logo +
    +
    + +
    +
    + +
    +
    +

    + Select a setting to configure +

    + {loading ? ( +
    +
    +
    +
    +
    +
    +
    +
    + ) : ( +
    + {!settings?.MultiUserMode && ( +
    + )} +
    +
    + {showing && !!tab && ( + + )} +
    + ); +} + +const Option = ({ btnText, icon, isActive, onClick }) => { + return ( +
    + +
    + ); +}; + +function showOverlay() { + document + .getElementById(OVERLAY_ID) + .classList.remove(...OVERLAY_CLASSES.disabled); + document.getElementById(OVERLAY_ID).classList.add(...OVERLAY_CLASSES.enabled); +} + +function hideOverlay() { + document + .getElementById(OVERLAY_ID) + .classList.remove(...OVERLAY_CLASSES.enabled); + document + .getElementById(OVERLAY_ID) + .classList.add(...OVERLAY_CLASSES.disabled); +} + +export function useSystemSettingsOverlay() { + return { showOverlay, hideOverlay }; +} diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx index 9b3068dd..c273f987 100644 --- a/frontend/src/components/Sidebar/index.jsx +++ b/frontend/src/components/Sidebar/index.jsx @@ -2,8 +2,6 @@ import React, { useEffect, useRef, useState } from "react"; import { AtSign, BookOpen, - Briefcase, - Cpu, GitHub, LogOut, Menu, @@ -11,12 +9,10 @@ import { Plus, Shield, Tool, + X, } from "react-feather"; import IndexCount from "./IndexCount"; import LLMStatus from "./LLMStatus"; -import SystemSettingsModal, { - useSystemSettingsModal, -} from "../Modals/Settings"; import NewWorkspaceModal, { useNewWorkspaceModal, } from "../Modals/NewWorkspace"; @@ -27,15 +23,12 @@ import useUser from "../../hooks/useUser"; import { userFromStorage } from "../../utils/request"; import { AUTH_TOKEN, AUTH_USER } from "../../utils/constants"; import useLogo from "../../hooks/useLogo"; +import SettingsOverlay, { useSystemSettingsOverlay } from "./SettingsOverlay"; export default function Sidebar() { const { logo } = useLogo(); const sidebarRef = useRef(null); - const { - showing: showingSystemSettingsModal, - showModal: showSystemSettingsModal, - hideModal: hideSystemSettingsModal, - } = useSystemSettingsModal(); + const { showOverlay } = useSystemSettingsOverlay(); const { showing: showingNewWsModal, showModal: showNewWsModal, @@ -47,8 +40,9 @@ export default function Sidebar() {
    +
    {/* Header Information */}
    @@ -62,12 +56,7 @@ export default function Sidebar() {
    - +
    @@ -142,9 +131,6 @@ export default function Sidebar() {
    - {showingSystemSettingsModal && ( - - )} {showingNewWsModal && } ); @@ -155,11 +141,7 @@ export function SidebarMobileHeader() { const sidebarRef = useRef(null); const [showSidebar, setShowSidebar] = useState(false); const [showBgOverlay, setShowBgOverlay] = useState(false); - const { - showing: showingSystemSettingsModal, - showModal: showSystemSettingsModal, - hideModal: hideSystemSettingsModal, - } = useSystemSettingsModal(); + const { showOverlay } = useSystemSettingsOverlay(); const { showing: showingNewWsModal, showModal: showNewWsModal, @@ -167,6 +149,8 @@ export function SidebarMobileHeader() { } = useNewWorkspaceModal(); useEffect(() => { + // Darkens the rest of the screen + // when sidebar is open. function handleBg() { if (showSidebar) { setTimeout(() => { @@ -213,12 +197,13 @@ export function SidebarMobileHeader() { />
    +
    {/* Header Information */} -
    -
    +
    +
    Logo
    -
    +
    - +
    @@ -311,9 +291,6 @@ export function SidebarMobileHeader() {
    - {showingSystemSettingsModal && ( - - )} {showingNewWsModal && }
    @@ -355,6 +332,19 @@ function LogoutButton() { ); } +function SettingsButton({ onClick }) { + const { user } = useUser(); + if (!!user) return null; + return ( + + ); +} + function ManagedHosting() { if (window.location.origin.includes(".useanything.com")) return null; return ( diff --git a/frontend/src/pages/Admin/Appearance/index.jsx b/frontend/src/pages/Admin/Appearance/index.jsx index 89e16165..e9631963 100644 --- a/frontend/src/pages/Admin/Appearance/index.jsx +++ b/frontend/src/pages/Admin/Appearance/index.jsx @@ -142,7 +142,7 @@ export default function Appearance() { Change the logo that appears in the sidebar.

    -
    +
    Uploaded Logo { return "https://mintplexlabs.typeform.com/to/i0KE3aEW"; }, - appearance: () => { - return "/system/appearance"; - }, workspace: { chat: (slug) => { return `/workspace/${slug}`;