From 858b2fcedb93f6d8e7acf438532a6209279d8f80 Mon Sep 17 00:00:00 2001 From: Sean Hatfield Date: Wed, 14 Feb 2024 15:29:49 -0800 Subject: [PATCH] [FEAT] New Workspace Settings Layout (#718) * WIP new settings layout * add suggested messages to general & appearance and clean up/make more user friendly * lazy load workspace settings pages * css fix on X button for document picker where button is barely clickable * remove additional workspace settings page * fix thread selection action when on thread * refactor inputs into sub-components remove unused paths --------- Co-authored-by: timothycarambat --- frontend/src/App.jsx | 8 +- .../Modals/MangeWorkspace/Documents/index.jsx | 2 +- .../Settings/ChatModelPreference/index.jsx | 120 ------ .../Modals/MangeWorkspace/Settings/index.jsx | 387 ------------------ .../Modals/MangeWorkspace/index.jsx | 52 +-- .../ThreadContainer/ThreadItem/index.jsx | 8 +- .../Sidebar/ActiveWorkspaces/index.jsx | 95 +++-- .../useGetProvidersModels.js} | 0 .../WorkspaceSettings/ChatSettings/index.jsx | 76 ++++ .../GeneralAppearance/index.jsx | 74 ++++ .../VectorDatabase/index.jsx | 56 +++ .../src/pages/WorkspaceSettings/index.jsx | 279 +++++-------- frontend/src/utils/paths.js | 12 +- frontend/src/utils/types.js | 19 + 14 files changed, 413 insertions(+), 775 deletions(-) delete mode 100644 frontend/src/components/Modals/MangeWorkspace/Settings/ChatModelPreference/index.jsx delete mode 100644 frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx rename frontend/src/{components/Modals/MangeWorkspace/Settings/ChatModelPreference/useGetProviderModels.js => hooks/useGetProvidersModels.js} (100%) create mode 100644 frontend/src/pages/WorkspaceSettings/ChatSettings/index.jsx create mode 100644 frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx create mode 100644 frontend/src/pages/WorkspaceSettings/VectorDatabase/index.jsx create mode 100644 frontend/src/utils/types.js diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 7a1395f17..7633af2c4 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -57,6 +57,10 @@ export default function App() { } /> } /> + } + /> } @@ -68,10 +72,6 @@ export default function App() { } /> {/* Admin */} - } - /> } diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx index c5a66748c..705e78faa 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx +++ b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx @@ -195,7 +195,7 @@ export default function DocumentSettings({ }; return ( -
+
-
- -

- The specific chat model that will be used for this workspace. If - empty, will use the system LLM preference. -

-
- -
- ); - } - - return ( -
-
- -

- The specific chat model that will be used for this workspace. If - empty, will use the system LLM preference. -

-
- - -
- ); -} diff --git a/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx deleted file mode 100644 index 48a3ff5d7..000000000 --- a/frontend/src/components/Modals/MangeWorkspace/Settings/index.jsx +++ /dev/null @@ -1,387 +0,0 @@ -import React, { useState, useRef, useEffect } from "react"; -import Workspace from "../../../../models/workspace"; -import paths from "../../../../utils/paths"; -import { chatPrompt } from "../../../../utils/chat"; -import System from "../../../../models/system"; -import PreLoader from "../../../Preloader"; -import { useParams } from "react-router-dom"; -import showToast from "../../../../utils/toast"; -import ChatModelPreference from "./ChatModelPreference"; -import { Link } from "react-router-dom"; - -// Ensure that a type is correct before sending the body -// to the backend. -function castToType(key, value) { - const definitions = { - openAiTemp: { - cast: (value) => Number(value), - }, - openAiHistory: { - cast: (value) => Number(value), - }, - similarityThreshold: { - cast: (value) => parseFloat(value), - }, - topN: { - cast: (value) => Number(value), - }, - }; - - if (!definitions.hasOwnProperty(key)) return value; - return definitions[key].cast(value); -} - -function recommendedSettings(provider = null) { - switch (provider) { - case "mistral": - return { temp: 0 }; - default: - return { temp: 0.7 }; - } -} - -export default function WorkspaceSettings({ active, workspace, settings }) { - const { slug } = useParams(); - const formEl = useRef(null); - const [saving, setSaving] = useState(false); - const [hasChanges, setHasChanges] = useState(false); - const [deleting, setDeleting] = useState(false); - const defaults = recommendedSettings(settings?.LLMProvider); - - const handleUpdate = async (e) => { - setSaving(true); - e.preventDefault(); - const data = {}; - const form = new FormData(formEl.current); - for (var [key, value] of form.entries()) data[key] = castToType(key, value); - const { workspace: updatedWorkspace, message } = await Workspace.update( - workspace.slug, - data - ); - if (!!updatedWorkspace) { - showToast("Workspace updated!", "success", { clear: true }); - } else { - showToast(`Error: ${message}`, "error", { clear: true }); - } - setSaving(false); - setHasChanges(false); - }; - - const deleteWorkspace = async () => { - if ( - !window.confirm( - `You are about to delete your entire ${workspace.name} workspace. This will remove all vector embeddings on your vector database.\n\nThe original source files will remain untouched. This action is irreversible.` - ) - ) - return false; - - setDeleting(true); - const success = await Workspace.delete(workspace.slug); - if (!success) { - showToast("Workspace could not be deleted!", "error", { clear: true }); - setDeleting(false); - return; - } - - workspace.slug === slug - ? (window.location = paths.home()) - : window.location.reload(); - }; - - return ( -
-
-
-
- Workspace Settings -
-
-
-

- Vector database identifier -

-

- {" "} -

-

- {workspace?.slug} -

-
- -
-

- Number of vectors -

-

- Total number of vectors in your vector database. -

- -
-
-
-
-
-
-
- -
-
- -

- This will only change the display name of your workspace. -

-
- setHasChanges(true)} - /> -
- -
-
- -

- This setting controls how "random" or dynamic your chat - responses will be. -
- The higher the number (1.0 maximum) the more random and - incoherent. -
- Recommended: {defaults.temp} -

-
- e.target.blur()} - defaultValue={workspace?.openAiTemp ?? defaults.temp} - className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" - placeholder="0.7" - required={true} - autoComplete="off" - onChange={() => setHasChanges(true)} - /> -
- -
-
- -

- The number of previous chats that will be included in the - response's short-term memory. - Recommend 20. - Anything more than 45 is likely to lead to continuous chat - failures depending on message size. -

-
- e.target.blur()} - defaultValue={workspace?.openAiHistory ?? 20} - className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" - placeholder="20" - required={true} - autoComplete="off" - onChange={() => setHasChanges(true)} - /> -
-
-
- -
-
-
- -

- The prompt that will be used on this workspace. Define the - context and instructions for the AI to generate a response. - You should to provide a carefully crafted prompt so the AI - can generate a relevant and accurate response. -

-
-