frontend/llm: hide account/llm settings only if all LLM services are disabled, including user defined LLMs

Author: haraldschilly

src/packages/frontend/account/other-settings.tsx

@@ -20,16 +20,16 @@ import {
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
 import LLMSelector from "@cocalc/frontend/frame-editors/llm/llm-selector";
-import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
-import track from "@cocalc/frontend/user-tracking";
-import { webapp_client } from "@cocalc/frontend/webapp-client";
-import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import {
   VBAR_EXPLANATION,
   VBAR_KEY,
   VBAR_OPTIONS,
   getValidVBAROption,
-} from "../project/page/vbar";
+} from "@cocalc/frontend/project/page/vbar";
+import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
+import track from "@cocalc/frontend/user-tracking";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import { dark_mode_mins, get_dark_mode_config } from "./dark-mode";
 import Tours from "./tours";
 import { useLanguageModelSetting } from "./useLanguageModelSetting";
@@ -44,6 +44,7 @@ interface Props {
 export function OtherSettings(props: Readonly<Props>): JSX.Element {
   const isCoCalcCom = useTypedRedux("customize", "is_cocalc_com");
   const user_defined_llm = useTypedRedux("customize", "user_defined_llm");
+
   const [model, setModel] = useLanguageModelSetting();
 
   function on_change(name: string, value: any): void {
@@ -398,24 +399,33 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
     return <UserDefinedLLMComponent on_change={on_change} />;
   }
 
+  function render_llm_settings() {
+    // we hide this panel, if all servers and user defined LLms are disabled
+    const customize = redux.getStore("customize");
+    const enabledLLMs = customize.getEnabledLLMs();
+    const anyLLMenabled = Object.values(enabledLLMs).some((v) => v);
+    if (!anyLLMenabled) return;
+    return (
+      <Panel
+        header={
+          <>
+            <AIAvatar size={22} /> AI Settings
+          </>
+        }
+      >
+        {render_disable_all_llm()}
+        {render_language_model()}
+        {render_custom_llm()}
+      </Panel>
+    );
+  }
+
   if (props.other_settings == null) {
     return <Loading />;
   }
   return (
     <>
-      {redux.getStore("customize").get("openai_enabled") ? (
-        <Panel
-          header={
-            <>
-              <AIAvatar size={22} /> AI Settings
-            </>
-          }
-        >
-          {render_disable_all_llm()}
-          {render_language_model()}
-          {render_custom_llm()}
-        </Panel>
-      ) : undefined}
+      {render_llm_settings()}
 
       <Panel
         header={

src/packages/frontend/customize.tsx

@@ -165,7 +165,7 @@ export interface CustomizeState {
   custom_openai?: TypedMap<{ [key: string]: TypedMap<CustomLLMPublic> }>;
   selectable_llms: List<string>;
   default_llm?: string;
-  user_defined_llm?: boolean;
+  user_defined_llm: boolean;
 }
 
 export class CustomizeStore extends Store<CustomizeState> {
@@ -193,7 +193,7 @@ export class CustomizeStore extends Store<CustomizeState> {
       custom_openai: this.get("custom_openai_enabled"),
       mistralai: this.get("mistral_enabled"),
       anthropic: this.get("anthropic_enabled"),
-      user: !this.get("is_cocalc_com"),
+      user: this.get("user_defined_llm"),
     };
   }
 }

src/packages/frontend/project/context.tsx

@@ -108,6 +108,7 @@ export function useProjectContextProvider(
   const haveCustomOpenAI = useTypedRedux("customize", "custom_openai_enabled");
   const haveMistral = useTypedRedux("customize", "mistral_enabled");
   const haveAnthropic = useTypedRedux("customize", "anthropic_enabled");
+  const userDefinedLLM = useTypedRedux("customize", "user_defined_llm");
 
   const enabledLLMs = useMemo(() => {
     const projectsStore = redux.getStore("projects");
@@ -119,6 +120,7 @@ export function useProjectContextProvider(
     haveCustomOpenAI,
     haveMistral,
     haveAnthropic,
+    userDefinedLLM,
   ]);
 
   return {