llm: updates, fixes, refactor, ...

Author: haraldschilly

src/.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+20

src/packages/frontend/account/user-defined-llm.tsx

@@ -41,7 +41,7 @@ import {
   toUserLLMModelName,
 } from "@cocalc/util/db-schema/llm-utils";
 import { trunc, unreachable } from "@cocalc/util/misc";
-import { Panel } from "../antd-bootstrap";
+import { Panel } from "@cocalc/frontend/antd-bootstrap";
 
 // @cspell:ignore mixtral userdefined
 
@@ -265,6 +265,8 @@ export function UserDefinedLLMComponent({ style, on_change }: Props) {
         return "'open-mixtral-8x22b'";
       case "google":
         return "'gemini-2.0-flash'";
+      case "xai":
+        return "'grok-4-1-fast-non-reasoning-8k'";
       default:
         unreachable(service);
         return "'llama3:latest'";

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

@@ -19,6 +19,7 @@ import GooglePalmLogo from "./google-palm-avatar";
 import MistralAvatar from "./mistral-avatar";
 import OllamaAvatar from "./ollama-avatar";
 import OpenAIAvatar from "./openai-avatar";
+import XAIAvatar from "./xai-avatar";
 
 export function LanguageModelVendorAvatar(
   props: Readonly<{
@@ -101,6 +102,9 @@ export function LanguageModelVendorAvatar(
       case "anthropic":
         return <AnthropicAvatar size={size} style={style} />;
 
+      case "xai":
+        return <XAIAvatar size={size} style={style} />;
+
       case "user":
         // should never happen, because it is unpacked below
         return fallback();

src/packages/frontend/components/xai-avatar.tsx

@@ -0,0 +1,56 @@
+import { CSSProperties } from "react";
+
+import { COLORS } from "@cocalc/util/theme";
+
+interface Props {
+  size: number;
+  backgroundColor?: string;
+  iconColor?: string;
+  style?: CSSProperties;
+  innerStyle?: CSSProperties;
+}
+
+export default function XAIAvatar({
+  size,
+  innerStyle,
+  backgroundColor = "transparent",
+  iconColor = COLORS.GRAY_DD,
+  style,
+}: Props) {
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        display: "inline-block",
+        position: "relative",
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          backgroundColor,
+          color: iconColor,
+          height: size,
+          top: "0px",
+          ...innerStyle,
+        }}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 841.89 595.28"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g fill="currentColor">
+            <polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18" />
+            <polygon points="640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05" />
+            <polygon points="201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31" />
+            <polygon points="201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}

src/packages/frontend/customize.tsx

@@ -6,6 +6,8 @@
 // Site Customize -- dynamically customize the look and configuration
 // of CoCalc for the client.
 
+// cSpell:ignore TOSurl PAYGO nonfree tagmanager
+
 import { fromJS, List, Map } from "immutable";
 import { join } from "path";
 import { useIntl } from "react-intl";
@@ -107,6 +109,7 @@ export interface CustomizeState {
   google_vertexai_enabled: boolean;
   mistral_enabled: boolean;
   anthropic_enabled: boolean;
+  xai_enabled: boolean;
   ollama_enabled: boolean;
   custom_openai_enabled: boolean;
   neural_search_enabled: boolean;
@@ -215,6 +218,7 @@ export class CustomizeStore extends Store<CustomizeState> {
       custom_openai: this.get("custom_openai_enabled"),
       mistralai: this.get("mistral_enabled"),
       anthropic: this.get("anthropic_enabled"),
+      xai: this.get("xai_enabled"),
       user: this.get("user_defined_llm"),
     };
   }
@@ -261,7 +265,7 @@ export class CustomizeActions extends Actions<CustomizeState> {
       unlicensed_project_timetravel_limit: undefined,
     });
   };
-  
+
   reload = async () => {
     await loadCustomizeState();
   };

src/packages/frontend/project/context.tsx

@@ -72,6 +72,7 @@ export const emptyProjectContext = {
     mistralai: false,
     anthropic: false,
     custom_openai: false,
+    xai: false,
     user: false,
   },
   flipTabs: [0, () => {}],

src/packages/next/components/openai/vendor-status-check.tsx

@@ -65,6 +65,13 @@ export function LLMServiceStatusCheck({
         </>
       );
 
+    case "xai":
+      return (
+        <>
+          xAI <A href="https://status.x.ai/">status</A>.
+        </>
+      );
+
     case "user":
       return <>{getLLMServiceStatusCheckMD("user")}</>;
 

src/packages/package.json

@@ -23,8 +23,8 @@
       "undici@<5.28.3": "^5.28.4",
       "postcss@<8.4.31": "^8.4.31",
       "retry-request@<7.0.1": "^7.0.2",
-      "@langchain/core": "^0.3.77",
-      "langchain": "^0.3.34",
+      "@langchain/core": "^1.1.6",
+      "langchain": "^1.2.1",
       "katex@<0.16.9": "^0.16.10",
       "nanoid@<3.3.8": "^3.3.8",
       "node-forge@<=1.3.1": "^1.3.2",