Support claude API keys (#774)

* Added claude api bot models extending langchain

* Added @langchain/anthropic dependency

* Added datastore config for claude api

* Added claude api bots in all&api sections

* Added vue component for claude api model settings

* Enabled in settings panel for claude api bots

* Added config for name display of bots

* Refactored index.js added claude api logos , simplified display name

Close #745

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@kangc/v-md-editor": "^2.3.16",
+    "@langchain/anthropic": "^0.1.9",
     "@langchain/google-genai": "^0.0.7",
     "@langchain/openai": "^0.0.12",
     "@mdi/font": "^7.4.47",

src/bots/anthropic/ClaudeAPI20Bot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPI20Bot extends ClaudeAPIBot {
+  static _className = "ClaudeAPI20Bot";
+  static _logoFilename = "claudeapi-20-logo.png";
+  static _model = "claude-2.0";
+  constructor() {
+    super();
+  }
+}

src/bots/anthropic/ClaudeAPI21Bot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPI21Bot extends ClaudeAPIBot {
+  static _className = "ClaudeAPI21Bot";
+  static _logoFilename = "claudeapi-21-logo.png";
+  static _model = "claude-2.1";
+  constructor() {
+    super();
+  }
+}

src/bots/anthropic/ClaudeAPIBot.js

@@ -0,0 +1,43 @@
+import store from "@/store";
+import LangChainBot from "../LangChainBot";
+import { ChatAnthropic } from "@langchain/anthropic";
+
+export default class ClaudeAPIBot extends LangChainBot {
+  static _brandId = "claudeApi";
+  static _className = "ClaudeAPIBot";
+
+  constructor() {
+    super();
+  }
+
+  async _checkAvailability() {
+    let available = false;
+
+    if (store.state.claudeApi.apiKey) {
+      this.setupModel();
+      available = true;
+    }
+    return available;
+  }
+
+  _setupModel() {
+    const chatModel = new ChatAnthropic({
+      anthropicApiKey: store.state.claudeApi.apiKey,
+      anthropicApiUrl: store.state.claudeApi.alterUrl
+        ? store.state.claudeApi.alterUrl
+        : "",
+      maxTokens: store.state.claudeApi.maxTokens,
+      temperature: store.state.claudeApi.temperature,
+      modelName: this.constructor._model ? this.constructor._model : "",
+      streaming: true,
+    });
+
+    return chatModel;
+  }
+
+  getPastRounds() {
+    return store.state.claudeApi.pastRounds
+      ? store.state.claudeApiApi.pastRounds
+      : 1;
+  }
+}

src/bots/anthropic/ClaudeAPIHaikuBot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPIHaikuBot extends ClaudeAPIBot {
+  static _className = "ClaudeAPIHaikuBot";
+  static _logoFilename = "claudeapi-haiku-logo.png";
+  static _model = "claude-3-haiku-20240307";
+  constructor() {
+    super();
+  }
+}

src/bots/anthropic/ClaudeAPIInstant12Bot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPIInstant12Bot extends ClaudeAPIBot {
+  static _className = "ClaudeAPIInstant12Bot";
+  static _logoFilename = "claudeapi-instant-12-logo.png";
+  static _model = "claude-instant-1.2";
+  constructor() {
+    super();
+  }
+}

src/bots/anthropic/ClaudeAPIOpusBot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPIOpusBot extends ClaudeAPIBot {
+  static _className = "ClaudeAPIOpusBot";
+  static _logoFilename = "claudeapi-opus-logo.png";
+  static _model = "claude-3-opus-20240229";
+  constructor() {
+    super();
+  }
+}

src/bots/anthropic/ClaudeAPISonnetBot.js

@@ -0,0 +1,10 @@
+import ClaudeAPIBot from "./ClaudeAPIBot";
+
+export default class ClaudeAPISonnetBot extends ClaudeAPIBot {
+  static _className = "ClaudeAPISonnetBot";
+  static _logoFilename = "claudeapi-sonnet-logo.png";
+  static _model = "claude-3-sonnet-20240229";
+  constructor() {
+    super();
+  }
+}

src/bots/index.js

@@ -66,6 +66,12 @@ import Claude3SonnetBot from "./lmsys/Claude3SonnetBot";
 import Claude3OpusBot from "./lmsys/Claude3OpusBot";
 import ChatGLM4Bot from "./zhipu/ChatGLM4Bot";
 import KimiBot from "./moonshot/KimiBot";
+import ClaudeAPIOpusBot from "./anthropic/ClaudeAPIOpusBot";
+import ClaudeAPI20Bot from "./anthropic/ClaudeAPI20Bot";
+import ClaudeAPI21Bot from "./anthropic/ClaudeAPI21Bot";
+import ClaudeAPISonnetBot from "./anthropic/ClaudeAPISonnetBot";
+import ClaudeAPIHaikuBot from "./anthropic/ClaudeAPIHaikuBot";
+import ClaudeAPIInstant12Bot from "./anthropic/ClaudeAPIInstant12Bot";
 
 const all = [
   Qihoo360AIBrainBot.getInstance(),
@@ -86,6 +92,12 @@ const all = [
   ClaudePlusPoeBot.getInstance(),
   Claude3OpusBot.getInstance(),
   Claude3SonnetBot.getInstance(),
+  ClaudeAPIOpusBot.getInstance(),
+  ClaudeAPISonnetBot.getInstance(),
+  ClaudeAPIHaikuBot.getInstance(),
+  ClaudeAPI20Bot.getInstance(),
+  ClaudeAPI21Bot.getInstance(),
+  ClaudeAPIInstant12Bot.getInstance(),
   CodeLlama34bPoeBot.getInstance(),
   CodeLlamaHCBot.getInstance(),
   CodeLlamaBot.getInstance(),
@@ -263,6 +275,12 @@ export const botTags = {
     bots.getBotByClassName("WenxinQianfanBot"),
     bots.getBotByClassName("WenxinQianfanTurboBot"),
     bots.getBotByClassName("WenxinQianfan4Bot"),
+    bots.getBotByClassName("ClaudeAPI20Bot"),
+    bots.getBotByClassName("ClaudeAPI21Bot"),
+    bots.getBotByClassName("ClaudeAPIHaikuBot"),
+    bots.getBotByClassName("ClaudeAPIInstant12Bot"),
+    bots.getBotByClassName("ClaudeAPIOpusBot"),
+    bots.getBotByClassName("ClaudeAPISonnetBot"),
   ],
   madeInChina: [
     bots.getBotByClassName("Qihoo360AIBrainBot"),

src/components/BotSettings/ClaudeAPIBotSettings.vue

@@ -0,0 +1,63 @@
+<template>
+  <CommonBotSettings
+    :settings="settings"
+    :brand-id="brandId"
+    mutation-type="setClaudeApi"
+    :watcher="watcher"
+  ></CommonBotSettings>
+</template>
+
+<script>
+import _bots from "@/bots";
+import Bot from "@/bots/anthropic/ClaudeAPIBot";
+import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
+import { Type } from "./settings.const";
+
+const settings = [
+  {
+    type: Type.Text,
+    name: "apiKey",
+    title: "claudeApi.apiKey",
+    description: "settings.secretPrompt",
+    placeholder: "sk-...",
+  },
+  {
+    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.Text,
+    name: "alterUrl",
+    title: "openaiApi.alterUrl",
+    description: "openaiApi.alterUrlPrompt",
+    placeholder: "https://your.proxy.com/v1",
+  },
+];
+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

@@ -126,6 +126,7 @@ import ChatGLMBotSettings from "./BotSettings/ChatGLMBotSettings.vue";
 import KimiBotSettings from "./BotSettings/KimiBotSettings.vue";
 
 import { resolveTheme, applyTheme, Mode } from "../theme";
+import ClaudeAPIBotSettings from "./BotSettings/ClaudeAPIBotSettings.vue";
 
 const { ipcRenderer } = window.require("electron");
 const { t: $t, locale } = useI18n();
@@ -163,6 +164,7 @@ const botSettings = [
   { brand: "spark", component: SparkBotSettings },
   { brand: "wenxinQianfan", component: WenxinQianfanBotSettings },
   { brand: "youChat", component: YouChatBotSettings },
+  { brand: "claudeApi", component: ClaudeAPIBotSettings },
 ];
 
 const proxy = ProxySettings;

src/i18n/locales/en.json

@@ -120,6 +120,15 @@
     "gemini-pro": "Gemini",
     "gemini-ultra": "Gemini Advanced"
   },
+  "claudeApi":{
+    "name": "Claude API",
+    "claude-3-opus-20240229" : "claude-3-opus",
+    "claude-3-sonnet-20240229": "claude-3-sonnet",
+    "claude-3-haiku-20240307": "claude-3-haiku",
+    "claude-21":"claude-2.1",
+    "claude-20":"claude-2.0",
+    "claude-instant-12":"claude-instant"
+  },
   "bingChat": {
     "name": "Copilot",
     "solveCaptcha": "You need to <a { attributes }>solve CAPTCHA</a> to continue.",