Fix: Setting changes in any BotSettings derived from CommonBotSetting…

…s do not take effect on the fly (#686)

* fix: Setting changes in any BotSettings derived from CommonBotSettings do not take effect on the fly

[BUG]
#683

* Fix: Hoist setupModel to LangChainBot

[BUG]
#683

* Refactor setupModel method in GeminiBot, LangChainBot, WenxinQianfanBot, AzureOpenAIAPIBot, and OpenAIAPIBot

---------

Co-authored-by: Sunner Sun <sunner@gmail.com>

src/bots/GeminiBot.js

@@ -16,15 +16,7 @@ export default class GeminiBot extends LangChainBot {
     let available = false;
 
     if (store.state.gemini.apiKey) {
-      const chatModel = new ChatGoogleGenerativeAI({
-        apiKey: store.state.gemini.apiKey,
-        modelName: this.constructor._model ? this.constructor._model : "",
-        temperature: store.state.gemini.temperature,
-        streaming: true,
-        topK: store.state.gemini.topK,
-        topP: store.state.gemini.topP,
-      });
-      this.constructor._chatModel = chatModel;
+      this.setupModel();
       available = true;
     }
     return available;
@@ -33,4 +25,16 @@ export default class GeminiBot extends LangChainBot {
   getPastRounds() {
     return store.state.gemini.pastRounds;
   }
+
+  _setupModel() {
+    const chatModel = new ChatGoogleGenerativeAI({
+      apiKey: store.state.gemini.apiKey,
+      modelName: this.constructor._model ? this.constructor._model : "",
+      temperature: store.state.gemini.temperature,
+      streaming: true,
+      topK: store.state.gemini.topK,
+      topP: store.state.gemini.topP,
+    });
+    return chatModel;
+  }
 }

src/bots/LangChainBot.js

@@ -64,6 +64,16 @@ export default class LangChainBot extends Bot {
     return [];
   }
 
+  setupModel() {
+    this.constructor._chatModel = this._setupModel();
+  }
+
+  _setupModel() {
+    throw new Error(
+      "Abstract property '_setupModel' must be implemented in the subclass.",
+    );
+  }
+
   getPastRounds() {
     throw new Error(
       "Abstract property 'pastRounds' must be implemented in the subclass.",

src/bots/baidu/WenxinQianfanBot.js

@@ -18,18 +18,23 @@ export default class WenxinQianfanBot extends LangChainBot {
     let available = false;
     const { apiKey, secretKey } = store.state.wenxinQianfan;
     if (apiKey && secretKey) {
-      const chatModel = new ChatBaiduWenxin({
-        modelName: this.constructor._model,
-        baiduApiKey: apiKey,
-        baiduSecretKey: secretKey,
-        streaming: true,
-      });
-      this.constructor._chatModel = chatModel;
+      this.setupModel();
       available = true;
     }
     return available;
   }
 
+  _setupModel() {
+    const { apiKey, secretKey } = store.state.wenxinQianfan;
+    const chatModel = new ChatBaiduWenxin({
+      modelName: this.constructor._model,
+      baiduApiKey: apiKey,
+      baiduSecretKey: secretKey,
+      streaming: true,
+    });
+    return chatModel;
+  }
+
   getPastRounds() {
     return store.state.wenxinQianfan.pastRounds;
   }

src/bots/microsoft/AzureOpenAIAPIBot.js

@@ -20,22 +20,26 @@ export default class AzureOpenAIAPIBot extends LangChainBot {
       store.state.azureOpenaiApi.azureOpenAIApiDeploymentName &&
       store.state.azureOpenaiApi.azureOpenAIApiVersion
     ) {
-      const chatModel = new ChatOpenAI({
-        azureOpenAIApiKey: store.state.azureOpenaiApi.azureApiKey,
-        azureOpenAIApiInstanceName:
-          store.state.azureOpenaiApi.azureApiInstanceName,
-        azureOpenAIApiDeploymentName:
-          store.state.azureOpenaiApi.azureOpenAIApiDeploymentName,
-        azureOpenAIApiVersion: store.state.azureOpenaiApi.azureOpenAIApiVersion,
-        temperature: store.state.azureOpenaiApi.temperature,
-        streaming: true,
-      });
-      this.constructor._chatModel = chatModel;
+      this.setupModel();
       available = true;
     }
     return available;
   }
 
+  _setupModel() {
+    const chatModel = new ChatOpenAI({
+      azureOpenAIApiKey: store.state.azureOpenaiApi.azureApiKey,
+      azureOpenAIApiInstanceName:
+        store.state.azureOpenaiApi.azureApiInstanceName,
+      azureOpenAIApiDeploymentName:
+        store.state.azureOpenaiApi.azureOpenAIApiDeploymentName,
+      azureOpenAIApiVersion: store.state.azureOpenaiApi.azureOpenAIApiVersion,
+      temperature: store.state.azureOpenaiApi.temperature,
+      streaming: true,
+    });
+    return chatModel;
+  }
+
   getPastRounds() {
     return store.state.azureOpenaiApi.pastRounds;
   }

src/bots/openai/OpenAIAPIBot.js

@@ -14,23 +14,27 @@ export default class OpenAIAPIBot extends LangChainBot {
     let available = false;
 
     if (store.state.openaiApi.apiKey) {
-      const chatModel = new ChatOpenAI({
-        configuration: {
-          basePath: store.state.openaiApi.alterUrl
-            ? store.state.openaiApi.alterUrl
-            : "",
-        },
-        openAIApiKey: store.state.openaiApi.apiKey,
-        modelName: this.constructor._model ? this.constructor._model : "",
-        temperature: store.state.openaiApi.temperature,
-        streaming: true,
-      });
-      this.constructor._chatModel = chatModel;
+      this.setupModel();
       available = true;
     }
     return available;
   }
 
+  _setupModel() {
+    const chatModel = new ChatOpenAI({
+      configuration: {
+        basePath: store.state.openaiApi.alterUrl
+          ? store.state.openaiApi.alterUrl
+          : "",
+      },
+      openAIApiKey: store.state.openaiApi.apiKey,
+      modelName: this.constructor._model ? this.constructor._model : "",
+      temperature: store.state.openaiApi.temperature,
+      streaming: true,
+    });
+    return chatModel;
+  }
+
   getPastRounds() {
     return store.state.openaiApi.pastRounds;
   }

src/components/BotSettings/AzureOpenAIAPIBotSettings.vue

@@ -3,6 +3,7 @@
     :settings="settings"
     :brand-id="brandId"
     mutation-type="setAzureOpenaiApi"
+    :watcher="watcher"
   ></CommonBotSettings>
 </template>
 
@@ -73,5 +74,10 @@ export default {
       brandId: Bot._brandId,
     };
   },
+  methods: {
+    watcher() {
+      Bot.getInstance().setupModel();
+    },
+  },
 };
 </script>

src/components/BotSettings/CommonBotSettings.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { Type } from "./settings.const";
 const store = useStore();
@@ -101,8 +101,22 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  watcher: {
+    type: Function,
+    default: undefined,
+  },
 });
 
+if (props.watcher) {
+  watch(
+    () => settingState.value,
+    (newValue) => {
+      console.log(`${props.brandId}: ${JSON.stringify(newValue)}`);
+      props.watcher(newValue);
+    },
+  );
+}
+
 onMounted(() => {
   for (const setting of props.settings) {
     if (setting.type !== Type.Slider) {

src/components/BotSettings/GeminiBotSettings.vue

@@ -3,6 +3,7 @@
     :settings="settings"
     :brand-id="brandId"
     mutation-type="setGemini"
+    :watcher="watcher"
   ></CommonBotSettings>
 </template>
 
@@ -71,5 +72,10 @@ export default {
       brandId: Bot._brandId,
     };
   },
+  methods: {
+    watcher() {
+      Bot.getInstance().setupModel();
+    },
+  },
 };
 </script>

src/components/BotSettings/OpenAIAPIBotSettings.vue

@@ -3,10 +3,12 @@
     :settings="settings"
     :brand-id="brandId"
     mutation-type="setOpenaiApi"
+    :watcher="watcher"
   ></CommonBotSettings>
 </template>
 
 <script>
+import _bots from "@/bots";
 import Bot from "@/bots/openai/OpenAIAPIBot";
 import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
 import i18n from "@/i18n";
@@ -60,5 +62,12 @@ export default {
       brandId: Bot._brandId,
     };
   },
+  methods: {
+    watcher() {
+      _bots.all
+        .filter((bot) => bot instanceof Bot)
+        .map((bot) => bot.setupModel());
+    },
+  },
 };
 </script>