add mistral large (#784)

* Mistral

* mistral-logo.png

src/bots/MistralBot.js

@@ -0,0 +1,142 @@
+import Bot from "@/bots/Bot";
+import store from "@/store";
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+
+export default class MistralBot extends Bot {
+  static _brandId = "mistral"; // Brand id of the bot, should be unique. Used in i18n.
+  static _className = "MistralBot"; // Class name of the bot
+  static _logoFilename = "mistral-logo.png"; // Place it in public/bots/
+  static _loginUrl = "https://chat.mistral.ai/login";
+
+  constructor() {
+    super();
+  }
+
+  async _checkAvailability() {
+    let available = false;
+    try {
+      const response = await axios.get("https://chat.mistral.ai/chat");
+      if (typeof response?.data === "string") {
+        available = true;
+      }
+    } catch (error) {
+      console.error("Error MistralBot _checkAvailability", error);
+    }
+    return available;
+  }
+
+  async createChatContext() {
+    return { chatId: undefined };
+  }
+
+  /**
+   * Send a prompt to the bot and call onResponse(response, callbackParam)
+   * when the response is ready.
+   * @param {string} prompt
+   * @param {function} onUpdateResponse params: callbackParam, Object {content, done}
+   * @param {object} callbackParam - Just pass it to onUpdateResponse() as is
+   */
+  async _sendPrompt(prompt, onUpdateResponse, callbackParam) {
+    const context = await this.getChatContext();
+    if (!context.chatId) {
+      // first message
+      try {
+        const result = await axios.post(
+          "https://chat.mistral.ai/api/trpc/message.newChat?batch=1",
+          {
+            0: {
+              json: {
+                chatId: null,
+                content: prompt,
+                rag: false,
+              },
+              meta: {
+                values: {
+                  chatId: ["undefined"],
+                },
+              },
+            },
+          },
+        );
+        if (result?.data[0].result?.data?.json?.chatId) {
+          context.chatId = result?.data[0].result?.data?.json?.chatId;
+          this.setChatContext({
+            chatId: context.chatId,
+          });
+        } else {
+          throw Error("chatId empty newChat");
+        }
+      } catch (error) {
+        console.error("Error MistralBot _sendPrompt message.newChat", error);
+      }
+    }
+
+    try {
+      await axios.post(
+        "https://chat.mistral.ai/api/chat",
+        {
+          chatId: context.chatId,
+          model: store.state.mistral.model,
+          messageInput: context.chatId ? prompt : undefined,
+          messageId: context.chatId ? uuidv4() : undefined,
+          mode: context.chatId ? "append" : "retry",
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onDownloadProgress: (progressEvent) => {
+            this.onResponseDownloadProgress(
+              progressEvent,
+              onUpdateResponse,
+              callbackParam,
+            );
+          },
+        },
+      );
+    } catch (error) {
+      console.error("Error MistralBot _sendPrompt", error);
+    } finally {
+      onUpdateResponse(callbackParam, {
+        done: true,
+      });
+    }
+  }
+
+  onResponseDownloadProgress(progressEvent, onUpdateResponse, callbackParam) {
+    try {
+      let text = "";
+      const responses = progressEvent?.event?.currentTarget?.response
+        ?.split("\n") // split with new line
+        ?.filter((n) => n); //  filter empty string in array
+      for (const response of responses) {
+        const chunks = this.separateChunks(response);
+        if (chunks.number == 0) {
+          text += chunks.content
+            .slice(1, chunks.content.length - 1)
+            .replaceAll("\\n", "\n");
+          onUpdateResponse(callbackParam, {
+            content: text,
+            done: false,
+          });
+        }
+      }
+      onUpdateResponse(callbackParam, {
+        done: true,
+      });
+    } catch (error) {
+      console.error("Error MistralBot onChatDownloadProgress", error);
+    }
+  }
+
+  separateChunks(line) {
+    const regex = /^(\d+):(.*)/;
+    const match = line.match(regex);
+    if (match) {
+      return { number: match[1], content: match[2] };
+    } else {
+      return { number: undefined, content: line };
+    }
+  }
+}

src/bots/index.js

@@ -12,6 +12,7 @@ import BardBot from "@/bots/google/BardBot";
 import OpenAIAPI35Bot from "@/bots/openai/OpenAIAPI35Bot";
 import OpenAIAPI4Bot from "@/bots/openai/OpenAIAPI4Bot";
 import OpenAIAPI4128KBot from "@/bots/openai/OpenAIAPI4128KBot";
+import MistralBot from "./MistralBot";
 import MOSSBot from "@/bots/MOSSBot";
 import WenxinQianfanBot from "@/bots/baidu/WenxinQianfanBot";
 import VicunaBot from "@/bots/lmsys/VicunaBot";
@@ -129,6 +130,7 @@ const all = [
   Llama270bPoeBot.getInstance(),
   Llama270bBot.getInstance(),
   Llama2HC70bBot.getInstance(),
+  MistralBot.getInstance(),
   MOSSBot.getInstance(),
   HuggingChatBot.getInstance(),
   GooglePalm2PoeBot.getInstance(),
@@ -197,6 +199,7 @@ export const botTags = {
     bots.getBotByClassName("Llama2HC70bBot"),
     bots.getBotByClassName("CodeLlamaBot"),
     bots.getBotByClassName("CodeLlamaHCBot"),
+    bots.getBotByClassName("MistralBot"),
     bots.getBotByClassName("MOSSBot"),
     bots.getBotByClassName("Qihoo360AIBrainBot"),
     bots.getBotByClassName("QianWenBot"),

src/components/BotSettings/MistralBotSettings.vue

@@ -0,0 +1,37 @@
+<template>
+  <login-setting :bot="bot"></login-setting>
+  <CommonBotSettings
+    :settings="settings"
+    :brand-id="brandId"
+    mutation-type="setMistral"
+  ></CommonBotSettings>
+</template>
+
+<script>
+import Bot from "@/bots/MistralBot";
+import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
+import { Type } from "./settings.const";
+import LoginSetting from "@/components/BotSettings/LoginSetting.vue";
+
+const settings = [
+  {
+    type: Type.Combobox,
+    name: "model",
+    title: "Model",
+    items: ["mistral-large"],
+  },
+];
+export default {
+  components: {
+    LoginSetting,
+    CommonBotSettings,
+  },
+  data() {
+    return {
+      bot: Bot.getInstance(),
+      settings: settings,
+      brandId: Bot._brandId,
+    };
+  },
+};
+</script>

src/components/SettingsModal.vue

@@ -106,6 +106,7 @@ import AzureOpenAIAPIBotSettings from "./BotSettings/AzureOpenAIAPIBotSettings.v
 import BingChatBotSettings from "@/components/BotSettings/BingChatBotSettings.vue";
 import SparkBotSettings from "./BotSettings/SparkBotSettings.vue";
 import BardBotSettings from "@/components/BotSettings/BardBotSettings.vue";
+import MistralBotSettings from "@/components/BotSettings/MistralBotSettings.vue";
 import MOSSBotSettings from "@/components/BotSettings/MOSSBotSettings.vue";
 import WenxinQianfanBotSettings from "@/components/BotSettings/WenxinQianfanBotSettings.vue";
 import GradioAppBotSettings from "@/components/BotSettings/GradioAppBotSettings.vue";
@@ -151,6 +152,7 @@ const botSettings = [
   { brand: "huggingChat", component: HuggingChatBotSettings },
   { brand: "kimi", component: KimiBotSettings },
   { brand: "lmsys", component: LMSYSBotSettings },
+  { brand: "mistral", component: MistralBotSettings },
   { brand: "moss", component: MOSSBotSettings },
   { brand: "openaiApi", component: OpenAIAPIBotSettings },
   { brand: "geminiApi", component: GeminiAPIBotSettings },

src/i18n/locales/en.json

@@ -207,6 +207,9 @@
     "claude-3-sonnet-20240229": "claude-3-sonnet-20240229",
     "claude-3-opus-20240229": "claude-3-opus-20240229"
   },
+  "mistral": {
+    "name": "Mistral"
+  },
   "moss": {
     "name": "MOSS"
   },

src/store/index.js

@@ -62,6 +62,9 @@ export default createStore({
       url: "",
       fnIndex: 0,
     },
+    mistral: {
+      model: "mistral-large",
+    },
     moss: {
       token: "",
     },
@@ -239,6 +242,9 @@ export default createStore({
     setPhind(state, values) {
       state.phind = { ...state.phind, ...values };
     },
+    setMistral(state, values) {
+      state.mistral = { ...state.mistral, ...values };
+    },
     setLatestPromptIndex(state, promptIndex) {
       Chats.table.update(state.currentChatIndex, {
         latestPromptIndex: promptIndex,