lite: add easy way to configure AI api keys

Author: williamstein

src/packages/frontend/account/lite-ai-settings.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+import { Alert, Button, Col, Input, Row, Space } from "antd";
+import { getLogger } from "@cocalc/frontend/logger";
+import { query } from "@cocalc/frontend/frame-editors/generic/client";
+import { Gap, Loading } from "@cocalc/frontend/components";
+
+const log = getLogger("account:lite-ai-settings");
+
+type ProviderKey = {
+  keyField: string;
+  enableField: string;
+  label: string;
+  placeholder?: string;
+};
+
+const PROVIDERS: ProviderKey[] = [
+  {
+    keyField: "openai_api_key",
+    enableField: "openai_enabled",
+    label: "OpenAI API Key",
+    placeholder: "sk-...",
+  },
+  {
+    keyField: "google_vertexai_key",
+    enableField: "google_vertexai_enabled",
+    label: "Google Gemini API Key",
+    placeholder: "Google AI Studio key",
+  },
+  {
+    keyField: "mistral_api_key",
+    enableField: "mistral_enabled",
+    label: "Mistral API Key",
+  },
+  {
+    keyField: "anthropic_api_key",
+    enableField: "anthropic_enabled",
+    label: "Anthropic API Key",
+  },
+];
+
+type State = "load" | "ready" | "save" | "error";
+
+export default function LiteAISettings() {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [state, setState] = useState<State>("load");
+  const [error, setError] = useState<string>("");
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function load(): Promise<void> {
+    setState("load");
+    try {
+      const result = await query({
+        query: {
+          site_settings: [{ name: null, value: null }],
+        },
+      });
+      const next: Record<string, string> = {};
+      for (const row of result.query.site_settings ?? []) {
+        next[row.name] = row.value;
+      }
+      setValues(next);
+      setError("");
+      setState("ready");
+    } catch (err) {
+      log.info("failed to load llm settings", err);
+      setError(`${err}`);
+      setState("error");
+    }
+  }
+
+  function onChange(key: string, val: string) {
+    setValues((cur) => ({ ...cur, [key]: val }));
+  }
+
+  async function save(): Promise<void> {
+    setState("save");
+    try {
+      for (const { keyField, enableField } of PROVIDERS) {
+        const val = values[keyField] ?? "";
+        await query({
+          query: { server_settings: { name: keyField, value: val } },
+        });
+        await query({
+          query: {
+            site_settings: {
+              name: enableField,
+              value: val ? "yes" : "no",
+            },
+          },
+        });
+      }
+      setState("ready");
+    } catch (err) {
+      log.info("failed to save llm settings", err);
+      setError(`${err}`);
+      setState("error");
+    }
+  }
+
+  return (
+    <div>
+      <h3>AI Provider Keys</h3>
+      <p style={{ marginBottom: 12 }}>
+        Enter API keys for the providers you want to use. When a key is saved,
+        the corresponding AI UI is enabled automatically.
+      </p>
+      {error && (
+        <Alert type="error" message="Error" description={error} closable />
+      )}
+      <Space direction="vertical" style={{ width: "100%" }} size="middle">
+        {PROVIDERS.map(({ keyField, label, placeholder }) => (
+          <Row key={keyField} gutter={8} align="middle">
+            <Col span={8}>{label}</Col>
+            <Col span={16}>
+              <Input.Password
+                allowClear
+                value={values[keyField] ?? ""}
+                placeholder={placeholder}
+                onChange={(e) => onChange(keyField, e.target.value)}
+              />
+            </Col>
+          </Row>
+        ))}
+      </Space>
+      <Gap />
+      <Button type="primary" onClick={save} disabled={state === "save"}>
+        {state === "save" ? <Loading text="Saving" /> : "Save"}
+      </Button>
+    </div>
+  );
+}

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

@@ -42,6 +42,7 @@ import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import Tours from "./tours";
 import { useLanguageModelSetting } from "./useLanguageModelSetting";
 import { UserDefinedLLMComponent } from "./user-defined-llm";
+import LiteAISettings from "./lite-ai-settings";
 import { lite } from "@cocalc/frontend/lite";
 
 // Icon constants for account preferences sections
@@ -293,8 +294,8 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       >
         <FormattedMessage
           id="account.other-settings.llm.disable_all"
-          defaultMessage={`<strong>Disable all AI integrations</strong>,
-            e.g., code generation or explanation buttons in Jupyter, @chatgpt mentions, etc.`}
+          defaultMessage={`<strong>Disable all AI integrations</strong>:
+            code generation, explanation buttons in Jupyter, @chatgpt mentions, etc.`}
         />
       </Switch>
     );
@@ -324,14 +325,15 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         <FormattedMessage
           id="account.other-settings.llm.reply_language"
           defaultMessage={`<strong>Always reply in English:</strong>
-          If set, the replies are always in English. Otherwise, it replies in your language ({lang}).`}
+          If set, the replies are always in English; otherwise, replies in your language ({lang}).`}
           values={{ lang: intl.formatMessage(LOCALIZATIONS[locale].trans) }}
         />
       </Switch>
     );
   }
 
   function render_custom_llm(): Rendered {
+    if (lite) return;
     // on cocalc.com, do not even show that they're disabled
     if (isCoCalcCom && !user_defined_llm) return;
     return (
@@ -347,7 +349,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     const customize = redux.getStore("customize");
     const enabledLLMs = customize.getEnabledLLMs();
     const anyLLMenabled = Object.values(enabledLLMs).some((v) => v);
-    if (!anyLLMenabled) return <></>;
+    if (!anyLLMenabled && !lite) return <></>;
     return (
       <Panel
         header={
@@ -360,10 +362,11 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
           </>
         }
       >
-        {render_disable_all_llm()}
-        {render_language_model()}
-        {render_llm_reply_language()}
-        {render_custom_llm()}
+        {anyLLMenabled && render_disable_all_llm()}
+        {anyLLMenabled && render_llm_reply_language()}
+        {anyLLMenabled && render_language_model()}
+        {!lite && render_custom_llm()}
+        {lite && <LiteAISettings />}
       </Panel>
     );
   }

src/packages/frontend/editors/markdown-input/mentionable-users.tsx

@@ -41,7 +41,6 @@ import {
 import { cmp, timestamp_cmp, trunc_middle } from "@cocalc/util/misc";
 import { CustomLLMPublic } from "@cocalc/util/types/llm";
 import { Item as CompleteItem } from "./complete";
-import { lite } from "@cocalc/frontend/lite";
 
 // we make the show_llm_main_menu field required, to avoid forgetting to set it ;-)
 type Item = CompleteItem & Required<Pick<CompleteItem, "show_llm_main_menu">>;

src/packages/frontend/logger.ts

@@ -0,0 +1 @@
+export { getLogger } from "@cocalc/conat/client";