1
import { useTypedRedux } from "@cocalc/frontend/app-framework";
2
import { modelToName } from "@cocalc/frontend/frame-editors/llm/llm-selector";
3
import {
4
  LanguageModel,
5
  fromCustomOpenAIModel,
6
  fromOllamaModel,
7
  isCustomOpenAI,
8
  isLanguageModel,
9
  isOllamaLLM,
10
} from "@cocalc/util/db-schema/llm-utils";
11
import { LanguageModelVendorAvatar } from "./language-model-icon";
12

13
export function LLMModelName(
14
  props: Readonly<{ model: LanguageModel; size?: number }>,
15
) {
16
  const { model, size } = props;
17

18
  const ollama = useTypedRedux("customize", "ollama");
19
  const custom_openai = useTypedRedux("customize", "custom_openai");
20

21
  function renderTitle() {
22
    if (isOllamaLLM(model)) {
23
      const om = ollama?.get(fromOllamaModel(model));
24
      if (om) {
25
        return om.get("display") ?? `Ollama ${model}`;
26
      }
27
    }
28

29
    if (isCustomOpenAI(model)) {
30
      const coi = custom_openai?.get(fromCustomOpenAIModel(model));
31
      if (coi) {
32
        return coi.get("display") ?? `OpenAI (custom) ${model}`;
33
      }
34
    }
35

36
    if (isLanguageModel(model)) {
37
      return modelToName(model);
38
    }
39

40
    return model;
41
  }
42

43
  return (
44
    <>
45
      <LanguageModelVendorAvatar
46
        model={model}
47
        size={size}
48
        style={{ marginRight: 0 }}
49
      />{" "}
50
      {renderTitle()}
51
    </>
52
  );
53
}
54

55