Allow manager to view roles (workspace)

frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx

@@ -8,6 +8,7 @@ import { X, Gear } from "@phosphor-icons/react";
 import System from "@/models/system";
 import showToast from "@/utils/toast";
 import { useEffect, useState } from "react";
+import { userFromStorage } from "@/utils/request";
 
 const NO_SETTINGS_NEEDED = ["default"];
 export default function WorkspaceLLM({
@@ -20,6 +21,9 @@ export default function WorkspaceLLM({
   const { isOpen, openModal, closeModal } = useModal();
   const { name, value, logo, description } = llm;
   const [currentSettings, setCurrentSettings] = useState(settings);
+  const [isConfigured, setIsConfigured] = useState(false);
+  const user = userFromStorage();
+  const isManager = user?.role === "manager";
 
   useEffect(() => {
     async function getSettings() {
@@ -31,14 +35,35 @@ export default function WorkspaceLLM({
     getSettings();
   }, [isOpen]);
 
+  useEffect(() => {
+    // Check if provider is configured by verifying all required config is set
+    const requiresAdditionalSetup = (llm.requiredConfig || []).some(
+      (key) => !currentSettings[key]
+    );
+    setIsConfigured(!requiresAdditionalSetup);
+  }, [currentSettings, llm]);
+
   function handleProviderSelection() {
+    // If user is a manager, they can only select configured providers
+    if (isManager && !isConfigured && !NO_SETTINGS_NEEDED.includes(value)) {
+      showToast("This provider needs to be configured by an admin.", "error");
+      return;
+    }
+
     // Determine if provider needs additional setup because its minimum required keys are
     // not yet set in settings.
     if (!checked) {
       const requiresAdditionalSetup = (llm.requiredConfig || []).some(
         (key) => !currentSettings[key]
       );
       if (requiresAdditionalSetup) {
+        if (isManager) {
+          showToast(
+            "This provider needs to be configured by an admin.",
+            "error"
+          );
+          return;
+        }
         openModal();
         return;
       }
@@ -74,7 +99,7 @@ export default function WorkspaceLLM({
               <div className="mt-1 text-xs text-white/60">{description}</div>
             </div>
           </div>
-          {checked && !NO_SETTINGS_NEEDED.includes(value) && (
+          {checked && !NO_SETTINGS_NEEDED.includes(value) && !isManager && (
             <button
               onClick={(e) => {
                 e.preventDefault();
@@ -88,14 +113,16 @@ export default function WorkspaceLLM({
           )}
         </div>
       </div>
-      <SetupProvider
-        availableLLMs={availableLLMs}
-        isOpen={isOpen}
-        provider={value}
-        closeModal={closeModal}
-        postSubmit={onClick}
-        settings={currentSettings}
-      />
+      {!isManager && (
+        <SetupProvider
+          availableLLMs={availableLLMs}
+          isOpen={isOpen}
+          provider={value}
+          closeModal={closeModal}
+          postSubmit={onClick}
+          settings={currentSettings}
+        />
+      )}
     </>
   );
 }

frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx

@@ -7,6 +7,7 @@ import ChatModelSelection from "./ChatModelSelection";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import paths from "@/utils/paths";
+import { userFromStorage } from "@/utils/request";
 
 // Some providers do not support model selection via /models.
 // In that case we allow the user to enter the model name manually and hope they
@@ -29,23 +30,37 @@ const LLM_DEFAULT = {
   requiredConfig: [],
 };
 
-const LLMS = [LLM_DEFAULT, ...AVAILABLE_LLM_PROVIDERS].filter(
-  (llm) => !DISABLED_PROVIDERS.includes(llm.value)
-);
-
 export default function WorkspaceLLMSelection({
   settings,
   workspace,
   setHasChanges,
 }) {
+  const [searchQuery, setSearchQuery] = useState("");
   const [filteredLLMs, setFilteredLLMs] = useState([]);
   const [selectedLLM, setSelectedLLM] = useState(
     workspace?.chatProvider ?? "default"
   );
-  const [searchQuery, setSearchQuery] = useState("");
   const [searchMenuOpen, setSearchMenuOpen] = useState(false);
   const searchInputRef = useRef(null);
   const { t } = useTranslation();
+  const user = userFromStorage();
+  const isManager = user?.role === "manager";
+
+  // Filter out disabled providers and for managers, only show configured providers
+  const LLMS = React.useMemo(() => {
+    const allLLMs = [LLM_DEFAULT, ...AVAILABLE_LLM_PROVIDERS].filter(
+      (llm) => !DISABLED_PROVIDERS.includes(llm.value)
+    );
+
+    if (!isManager) return allLLMs;
+
+    // For managers, only show providers that are fully configured
+    return allLLMs.filter((llm) => {
+      if (llm.value === "default") return true;
+      return !(llm.requiredConfig || []).some((key) => !settings?.[key]);
+    });
+  }, [settings, isManager]);
+
   function updateLLMChoice(selection) {
     setSearchQuery("");
     setSelectedLLM(selection);
@@ -68,7 +83,9 @@ export default function WorkspaceLLMSelection({
     );
     setFilteredLLMs(filtered);
   }, [LLMS, searchQuery, selectedLLM]);
-  const selectedLLMObject = LLMS.find((llm) => llm.value === selectedLLM);
+
+  const selectedLLMObject =
+    LLMS.find((llm) => llm.value === selectedLLM) || LLM_DEFAULT;
 
   return (
     <div className="border-b border-white/40 pb-8">

server/endpoints/system.js

@@ -953,14 +953,15 @@ function systemEndpoints(app) {
 
   app.post(
     "/system/custom-models",
-    [validatedRequest, flexUserRoleValid([ROLES.admin])],
+    [validatedRequest, flexUserRoleValid([ROLES.admin, ROLES.manager])],
     async (request, response) => {
       try {
         const { provider, apiKey = null, basePath = null } = reqBody(request);
         const { models, error } = await getCustomModels(
           provider,
           apiKey,
-          basePath
+          basePath,
+          response.locals?.user?.role
         );
         return response.status(200).json({
           models,