From fcb2e0fdc96cd2cb17fd3cb08f8db222f6eb169e Mon Sep 17 00:00:00 2001
From: awesdroid <awesdroid@users.noreply.github.com>
Date: Tue, 16 Jan 2024 09:52:05 +0800
Subject: [PATCH] Fix: Setting changes in any BotSettings derived from
 CommonBotSettings 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]
https://github.com/sunner/ChatALL/issues/683

* Fix: Hoist setupModel to LangChainBot

[BUG]
https://github.com/sunner/ChatALL/issues/683

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

---------

Co-authored-by: Sunner Sun <sunner@gmail.com>
---
 src/bots/GeminiBot.js                         | 22 +++++++++------
 src/bots/LangChainBot.js                      | 10 +++++++
 src/bots/baidu/WenxinQianfanBot.js            | 19 ++++++++-----
 src/bots/microsoft/AzureOpenAIAPIBot.js       | 26 +++++++++--------
 src/bots/openai/OpenAIAPIBot.js               | 28 +++++++++++--------
 .../BotSettings/AzureOpenAIAPIBotSettings.vue |  6 ++++
 .../BotSettings/CommonBotSettings.vue         | 16 ++++++++++-
 .../BotSettings/GeminiBotSettings.vue         |  6 ++++
 .../BotSettings/OpenAIAPIBotSettings.vue      |  9 ++++++
 9 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/src/bots/GeminiBot.js b/src/bots/GeminiBot.js
index 6bd5caf83e..c7bd540197 100644
--- a/src/bots/GeminiBot.js
+++ b/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;
+  }
 }
diff --git a/src/bots/LangChainBot.js b/src/bots/LangChainBot.js
index ef775e127f..0ecba51be6 100644
--- a/src/bots/LangChainBot.js
+++ b/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.",
diff --git a/src/bots/baidu/WenxinQianfanBot.js b/src/bots/baidu/WenxinQianfanBot.js
index 7872ac6724..f94504d449 100644
--- a/src/bots/baidu/WenxinQianfanBot.js
+++ b/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;
   }
diff --git a/src/bots/microsoft/AzureOpenAIAPIBot.js b/src/bots/microsoft/AzureOpenAIAPIBot.js
index 8240d55683..7cdd66572c 100644
--- a/src/bots/microsoft/AzureOpenAIAPIBot.js
+++ b/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;
   }
diff --git a/src/bots/openai/OpenAIAPIBot.js b/src/bots/openai/OpenAIAPIBot.js
index ce0d8b3c2f..d4166b1677 100644
--- a/src/bots/openai/OpenAIAPIBot.js
+++ b/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;
   }
diff --git a/src/components/BotSettings/AzureOpenAIAPIBotSettings.vue b/src/components/BotSettings/AzureOpenAIAPIBotSettings.vue
index 229b594265..fed5e0aef8 100644
--- a/src/components/BotSettings/AzureOpenAIAPIBotSettings.vue
+++ b/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>
diff --git a/src/components/BotSettings/CommonBotSettings.vue b/src/components/BotSettings/CommonBotSettings.vue
index 65ad067917..2467019db4 100644
--- a/src/components/BotSettings/CommonBotSettings.vue
+++ b/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) {
diff --git a/src/components/BotSettings/GeminiBotSettings.vue b/src/components/BotSettings/GeminiBotSettings.vue
index 5146a89833..68ecb95044 100644
--- a/src/components/BotSettings/GeminiBotSettings.vue
+++ b/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>
diff --git a/src/components/BotSettings/OpenAIAPIBotSettings.vue b/src/components/BotSettings/OpenAIAPIBotSettings.vue
index ce9f7b780a..ccf438ce7c 100644
--- a/src/components/BotSettings/OpenAIAPIBotSettings.vue
+++ b/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>