Add xAI grok-beta bot via API

Reference:
- https://docs.x.ai/
- https://github.com/langchain-ai/langchainjs/tree/main/libs/langchain-xai/

Logo file source:
- https://commons.wikimedia.org/wiki/File:Grok_logo_without_text.svg

package.json

@@ -35,6 +35,7 @@
     "@langchain/google-genai": "^0.0.21",
     "@langchain/groq": "^0.1.2",
     "@langchain/openai": "^0.2.1",
+    "@langchain/xai": "^0.0.1",
     "@mdi/font": "^7.4.47",
     "@vueuse/rxjs": "^11.1.0",
     "async-lock": "^1.4.1",

src/bots/index.js

@@ -80,6 +80,7 @@ import ClaudeAPI20Bot from "./anthropic/ClaudeAPI20Bot";
 import ClaudeAPI21Bot from "./anthropic/ClaudeAPI21Bot";
 import ClaudeAPISonnetBot from "./anthropic/ClaudeAPISonnetBot";
 import ClaudeAPIHaikuBot from "./anthropic/ClaudeAPIHaikuBot";
+import GrokAPIBot from "./xai/GrokAPIBot";
 
 const all = [
   Qihoo360AIBrainBot.getInstance(),
@@ -162,6 +163,7 @@ const all = [
   Wizardlm70bBot.getInstance(),
   Zephyr7bBot.getInstance(),
   YouChatBot.getInstance(),
+  GrokAPIBot.getInstance(),
 ];
 
 const disabled = [
@@ -303,6 +305,7 @@ export const botTags = {
     bots.getBotByClassName("Llama38bGroqAPIBot"),
     bots.getBotByClassName("Llama370bGroqAPIBot"),
     bots.getBotByClassName("Mixtral8x7bGroqAPIBot"),
+    bots.getBotByClassName("GrokAPIBot"),
   ],
   madeInChina: [
     bots.getBotByClassName("Qihoo360AIBrainBot"),

src/bots/xai/GrokAPIBot.js

@@ -0,0 +1,10 @@
+import xAIAPIBot from "./xAIAPIBot";
+
+export default class GrokAPIBot extends xAIAPIBot {
+  static _className = "GrokAPIBot";
+  static _logoFilename = "grok-logo.svg";
+  static _model = "grok-beta";
+  constructor() {
+    super();
+  }
+}

src/bots/xai/xAIAPIBot.js

@@ -0,0 +1,36 @@
+import LangChainBot from "../LangChainBot";
+import store from "@/store";
+import { ChatXAI } from "@langchain/xai";
+
+export default class xAIAPIBot extends LangChainBot {
+  static _brandId = "xaiApi";
+  static _className = "xAIAPIBot";
+
+  constructor() {
+    super();
+  }
+
+  async _checkAvailability() {
+    let available = false;
+
+    if (store.state.xaiApi.apiKey) {
+      this.setupModel();
+      available = true;
+    }
+    return available;
+  }
+
+  _setupModel() {
+    const chatModel = new ChatXAI({
+      apiKey: store.state.xaiApi.apiKey,
+      model: this.constructor._model ? this.constructor._model : "",
+      streaming: true,
+    });
+
+    return chatModel;
+  }
+
+  getPastRounds() {
+    return store.state.xaiApi.pastRounds ? store.state.xaiApi.pastRounds : 5;
+  }
+}

src/bots/xai/xAIAPIBotSettings.vue

@@ -0,0 +1,65 @@
+<template>
+  <CommonBotSettings
+    :settings="settings"
+    :brand-id="brandId"
+    mutation-type="setXaiApi"
+    :watcher="watcher"
+  ></CommonBotSettings>
+</template>
+
+<script>
+import _bots from "@/bots";
+import Bot from "@/bots/xai/xAIAPIBot";
+import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
+import { Type } from "./settings.const";
+
+const settings = [
+  {
+    type: Type.Text,
+    name: "apiKey",
+    title: "common.apiKey",
+    description: "settings.secretPrompt",
+    placeholder: "xai_...",
+  },
+  {
+    type: Type.Slider,
+    name: "temperature",
+    title: "openaiApi.temperature",
+    description: "openaiApi.temperaturePrompt",
+    min: 0,
+    max: 1,
+    step: 0.1,
+    ticks: {
+      0: "openaiApi.temperature0",
+      1: "openaiApi.temperature2",
+    },
+  },
+  {
+    type: Type.Slider,
+    name: "pastRounds",
+    title: "bot.pastRounds",
+    description: "bot.pastRoundsPrompt",
+    min: 0,
+    max: 10,
+    step: 1,
+  },
+];
+export default {
+  components: {
+    CommonBotSettings,
+  },
+  data() {
+    return {
+      settings: settings,
+      brandId: Bot._brandId,
+    };
+  },
+  methods: {
+    watcher() {
+      _bots.all
+        .filter((bot) => bot instanceof Bot)
+        .map((bot) => bot.setupModel());
+    },
+  },
+};
+</script>

src/components/BotSettings/xAIAPIBotSettings.vue

@@ -0,0 +1,52 @@
+<template>
+  <CommonBotSettings
+    :settings="settings"
+    :brand-id="brandId"
+    mutation-type="setxAIApi"
+    :watcher="watcher"
+  ></CommonBotSettings>
+</template>
+
+<script>
+import _bots from "@/bots";
+import Bot from "@/bots/xai/xAIAPIBot";
+import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
+import { Type } from "./settings.const";
+
+const settings = [
+  {
+    type: Type.Text,
+    name: "apiKey",
+    title: "common.apiKey",
+    description: "settings.secretPrompt",
+    placeholder: "xai-...",
+  },
+  {
+    type: Type.Slider,
+    name: "pastRounds",
+    title: "bot.pastRounds",
+    description: "bot.pastRoundsPrompt",
+    min: 0,
+    max: 10,
+    step: 1,
+  },
+];
+export default {
+  components: {
+    CommonBotSettings,
+  },
+  data() {
+    return {
+      settings: settings,
+      brandId: Bot._brandId,
+    };
+  },
+  methods: {
+    watcher() {
+      _bots.all
+        .filter((bot) => bot instanceof Bot)
+        .map((bot) => bot.setupModel());
+    },
+  },
+};
+</script>

src/components/SettingsModal.vue

@@ -130,6 +130,7 @@ import KimiBotSettings from "./BotSettings/KimiBotSettings.vue";
 import { resolveTheme, applyTheme, Mode } from "../theme";
 import ClaudeAPIBotSettings from "./BotSettings/ClaudeAPIBotSettings.vue";
 import GroqAPIBotSettings from "./BotSettings/GroqAPIBotSettings.vue";
+import xAIAPIBotSettings from "./BotSettings/xAIAPIBotSettings.vue";
 
 const { ipcRenderer } = window.require("electron");
 const { t: $t, locale } = useI18n();
@@ -170,6 +171,7 @@ const botSettings = [
   { brand: "skyWork", component: SkyWorkBotSettings },
   { brand: "spark", component: SparkBotSettings },
   { brand: "wenxinQianfan", component: WenxinQianfanBotSettings },
+  { brand: "xaiApi", component: xAIAPIBotSettings },
   { brand: "youChat", component: YouChatBotSettings },
 ];
 

src/i18n/locales/de.json

@@ -303,6 +303,10 @@
     "gemma-7b-it": "Gemma 7b",
     "gemma2-9b-it": "Gemma2 9b"
   },
+  "xaiApi": {
+    "name": "xAI API",
+    "grok-beta": "Grok Beta"
+  },
   "updates": {
     "updateAvailable": "Update verfügbar!",
     "currentVersion": "Ihre Version",

src/i18n/locales/en.json

@@ -306,6 +306,10 @@
     "gemma-7b-it": "Gemma 7b",
     "gemma2-9b-it": "Gemma2 9b"
   },
+  "xaiApi": {
+    "name": "xAI API",
+    "grok-beta": "Grok Beta"
+  },
   "updates": {
     "updateAvailable": "Update Available!",
     "currentVersion": "Your Version",

src/i18n/locales/es.json

@@ -303,6 +303,10 @@
     "gemma-7b-it": "Gemma 7b",
     "gemma2-9b-it": "Gemma2 9b"
   },
+  "xaiApi": {
+    "name": "xAI API",
+    "grok-beta": "Grok Beta"
+  },
   "updates": {
     "updateAvailable": "¡Hay una actualización disponible!",
     "currentVersion": "Su versión",

src/i18n/locales/fr.json

@@ -303,6 +303,10 @@
     "gemma-7b-it": "Gemma 7b",
     "gemma2-9b-it": "Gemma2 9b"
   },
+  "xaiApi": {
+    "name": "xAI API",
+    "grok-beta": "Grok Beta"
+  },
   "updates": {
     "updateAvailable": "Mise à jour disponible !",
     "currentVersion": "Votre version",

src/i18n/locales/it.json

@@ -305,6 +305,10 @@
     "gemma-7b-it": "Gemma 7b",
     "gemma2-9b-it": "Gemma2 9b"
   },
+  "xaiApi": {
+    "name": "xAI API",
+    "grok-beta": "Grok Beta"
+  },
   "updates": {
     "updateAvailable": "Aggiornamento disponibile!",
     "currentVersion": "La tua versione",