Merge pull request #7604 from sagemathinc/fix-llm-openai-config

frontend/llm: refactor and fix OpenAI vs Custom OpenAI

Author: williamstein

src/packages/frontend/components/language-model-icon.tsx

@@ -1,20 +1,20 @@
-import { CSS } from "@cocalc/frontend/app-framework";
+import { CSS, useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
   LanguageModel,
-  isCustomOpenAI,
+  fromCustomOpenAIModel,
+  fromOllamaModel,
   isGoogleModel,
   isLanguageModel,
-  isOllamaLLM,
   model2vendor,
 } from "@cocalc/util/db-schema/llm-utils";
 import { unreachable } from "@cocalc/util/misc";
 import AIAvatar from "./ai-avatar";
+import AnthropicAvatar from "./anthropic-avatar";
 import GoogleGeminiLogo from "./google-gemini-avatar";
 import GooglePalmLogo from "./google-palm-avatar";
 import MistralAvatar from "./mistral-avatar";
 import OllamaAvatar from "./ollama-avatar";
 import OpenAIAvatar from "./openai-avatar";
-import AnthropicAvatar from "./anthropic-avatar";
 
 export function LanguageModelVendorAvatar(
   props: Readonly<{
@@ -25,6 +25,9 @@ export function LanguageModelVendorAvatar(
 ) {
   const { model, size = 20 } = props;
 
+  const ollama = useTypedRedux("customize", "ollama");
+  const custom_openai = useTypedRedux("customize", "custom_openai");
+
   const style: CSS = {
     marginRight: "5px",
     ...props.style,
@@ -38,13 +41,35 @@ export function LanguageModelVendorAvatar(
     return fallback();
   }
 
+  function renderImgIcon(icon: string) {
+    return (
+      <img
+        width={size}
+        height={size}
+        src={icon}
+        style={{ display: "inline-block", ...style }}
+      />
+    );
+  }
+
   if (isLanguageModel(model)) {
     const vendorName = model2vendor(model).name;
     switch (vendorName) {
       case "openai":
-      case "custom_openai":
         return <OpenAIAvatar size={size} style={style} />;
 
+      case "custom_openai": {
+        const icon = custom_openai?.getIn([
+          fromCustomOpenAIModel(model),
+          "icon",
+        ]);
+        if (typeof icon === "string") {
+          return renderImgIcon(icon);
+        } else {
+          return <OpenAIAvatar size={size} style={style} />;
+        }
+      }
+
       case "google": {
         if (model === "chat-bison-001") {
           // Palm2, no longer supported, just for backwards compatibility
@@ -59,8 +84,14 @@ export function LanguageModelVendorAvatar(
       case "mistralai":
         return <MistralAvatar size={size} style={style} />;
 
-      case "ollama":
-        return <OllamaAvatar size={size} style={style} />;
+      case "ollama": {
+        const icon = ollama?.getIn([fromOllamaModel(model), "icon"]);
+        if (typeof icon === "string") {
+          return renderImgIcon(icon);
+        } else {
+          return <OllamaAvatar size={size} style={style} />;
+        }
+      }
 
       case "anthropic":
         return <AnthropicAvatar size={size} style={style} />;
@@ -71,13 +102,5 @@ export function LanguageModelVendorAvatar(
     }
   }
 
-  if (isOllamaLLM(model)) {
-    return <OllamaAvatar size={size} style={style} />;
-  }
-
-  if (isCustomOpenAI(model)) {
-    return <OpenAIAvatar size={size} style={style} />;
-  }
-
   return fallback();
 }

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

@@ -13,7 +13,6 @@ import { redux, useMemo, useTypedRedux } from "@cocalc/frontend/app-framework";
 import AnthropicAvatar from "@cocalc/frontend/components/anthropic-avatar";
 import GoogleGeminiLogo from "@cocalc/frontend/components/google-gemini-avatar";
 import MistralAvatar from "@cocalc/frontend/components/mistral-avatar";
-import OllamaAvatar from "@cocalc/frontend/components/ollama-avatar";
 import OpenAIAvatar from "@cocalc/frontend/components/openai-avatar";
 import { LLMModelPrice } from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { useProjectContext } from "@cocalc/frontend/project/context";
@@ -37,6 +36,7 @@ import {
 } from "@cocalc/util/db-schema/llm-utils";
 import { cmp, timestamp_cmp, trunc_middle } from "@cocalc/util/misc";
 import { CustomLLMPublic } from "@cocalc/util/types/llm";
+import { LanguageModelVendorAvatar } from "../../components/language-model-icon";
 import { Item as CompleteItem } from "./complete";
 
 // we make the show_llm_main_menu field required, to avoid forgetting to set it ;-)
@@ -259,8 +259,8 @@ function mentionableUsers({
           value,
           label: (
             <span>
-              <OllamaAvatar size={size} /> {conf.display}{" "}
-              <LLMModelPrice model={m} floatRight />
+              <LanguageModelVendorAvatar model={value} size={size} />{" "}
+              {conf.display} <LLMModelPrice model={m} floatRight />
             </span>
           ),
           search: search_term,
@@ -283,8 +283,8 @@ function mentionableUsers({
           value,
           label: (
             <span>
-              <OpenAIAvatar size={size} /> {conf.display}{" "}
-              <LLMModelPrice model={m} floatRight />
+              <LanguageModelVendorAvatar model={value} size={size} />{" "}
+              {conf.display} <LLMModelPrice model={m} floatRight />
             </span>
           ),
           search: search_term,

src/packages/frontend/frame-editors/llm/components.tsx

@@ -0,0 +1,16 @@
+import { redux } from "@cocalc/frontend/app-framework";
+import { Text } from "@cocalc/frontend/components";
+
+export function getCustomLLMGroup() {
+  const customize = redux.getStore("customize");
+  const site_name = customize.get("site_name");
+  const organization_name = customize.get("organization_name") ?? "";
+  return {
+    title: `Managed by ${organization_name || site_name}`,
+    label: (
+      <>
+        <Text strong>{site_name} language models</Text>
+      </>
+    ),
+  };
+}

src/packages/frontend/frame-editors/llm/llm-query-dropdown.tsx

@@ -7,8 +7,8 @@ import { LanguageModelVendorAvatar } from "@cocalc/frontend/components/language-
 import { modelToName } from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { useAvailableLLMs } from "@cocalc/frontend/frame-editors/llm/use-llm-menu-options";
 import { useProjectContext } from "@cocalc/frontend/project/context";
-import { LLM_PROVIDER } from "@cocalc/util/db-schema/llm-utils";
 import { LLMTools } from "@cocalc/jupyter/types";
+import { LLM_PROVIDER } from "@cocalc/util/db-schema/llm-utils";
 
 interface Props {
   llmTools?: Pick<LLMTools, "model" | "setModel">;
@@ -26,7 +26,7 @@ export function LLMQueryDropdownButton({
   disabled = false,
 }: Props) {
   const { project_id } = useProjectContext();
-  const models = useAvailableLLMs(project_id);
+  const modelsByService = useAvailableLLMs(project_id);
 
   function renderOkText() {
     if (llmTools == null) return <></>;
@@ -40,14 +40,17 @@ export function LLMQueryDropdownButton({
   function getItems(): MenuProps["items"] {
     const ret: MenuProps["items"] = [];
     let first = true;
-    for (const [service, entry] of Object.entries(models)) {
+    for (const [service, entry] of Object.entries(modelsByService)) {
       const { models } = entry;
       if (models.length === 0) continue;
 
       if (!first) ret.push({ type: "divider" });
       first = false;
 
-      const { name, short } = LLM_PROVIDER[service];
+      const { name, short } =
+        service === "custom"
+          ? { name: entry.name, short: entry.desc }
+          : LLM_PROVIDER[service];
       ret.push({
         type: "group",
         label: (
@@ -57,6 +60,7 @@ export function LLMQueryDropdownButton({
           </>
         ),
       });
+
       for (const model of models) {
         const { name, title, desc, price } = model;
         ret.push({