Docs: Add developing_bot.md

CONTRIBUTION.md

@@ -238,3 +238,228 @@ export default KnowNothingBot;
 6. **Submit a Pull Request**: Once you have tested your bot and ensured it works correctly, submit a pull request following the steps mentioned in the "How to Submit Pull Requests" section.
 
 Thank you for your contributions! We appreciate your efforts and look forward to your involvement in our community.
+
+### Advanced Topics on Bot Development
+
+#### UI order configuration
+
+In the `src/bots/index.js` file, you can find the `all` array like
+
+```javascript
+// Add to the main bot list
+const all = [
+  ChatGPT35Bot.getInstance(),
+  ChatGPT4Bot.getInstance(),
+  OpenAIAPI35Bot.getInstance(),
+  OpenAIAPI4Bot.getInstance(),
+  BingChatCreativeBot.getInstance(),
+  BingChatBalancedBot.getInstance(),
+  BingChatPreciseBot.getInstance(),
+  WenxinQianfanBot.getInstance(),
+  SparkBot.getInstance(),
+  MOSSBot.getInstance(),
+  BardBot.getInstance(),
+  ...existing_bots...
+];
+```
+
+You can change the order of the bots in this array to control their display order in the UI.
+For example, if you want to move the `BardBot` between `MOSSBot` and `WenxinQianfanBot`, you can modify the array like this:
+
+```javascript
+const all = [
+  ChatGPT35Bot.getInstance(),
+  ChatGPT4Bot.getInstance(),
+  OpenAIAPI35Bot.getInstance(),
+  OpenAIAPI4Bot.getInstance(),
+  BingChatCreativeBot.getInstance(),
+  BingChatBalancedBot.getInstance(),
+  BingChatPreciseBot.getInstance(),
+  MOSSBot.getInstance(),
+  BardBot.getInstance(), // Moved BardBot here
+  WenxinQianfanBot.getInstance(),
+  SparkBot.getInstance(),
+  ...existing_bots...
+];
+```
+
+#### Setting component implementation
+
+To fulfill other core functions, you need login functionality, API key configuration, etc. If your bot does not require login, or you don't mind putting the key directly in the code (strongly not recommended), you can skip this section.
+
+##### Create a settings component
+
+In the `src/components/BotSettings/` directory, create a new file named `KnowNothingBotSettings.vue`. 
+
+You can use existing settings components as templates: 
+
+1. If you only need login functionality, just copy `BardBotSettings.vue` and change import Bot from `@/bots/BardBot;` to import Bot from `@/bots/KnowNothingBot;`. 
+   - (Note: Some websites have implemented security measures to prevent ChatALL and similar clients from accessing them. If you encounter such situations, you will need to do a lot of hack work.)
+2. If you only need to configure the API key, copy `WenxinQianfanBotSettings.vue` and modify it, but this will require more work.
+3. Complex setups with multiple configuration options require additional implementation steps.
+
+##### Add settings field
+
+ChatALL's settings UI is built using [Vuetify 3](https://vuetifyjs.com/). 
+Refer to the [Vuetify 3 official documentation](https://vuetifyjs.com/en/introduction/why-vuetify/) to see and test the rich components it supports. 
+
+By reviewing the existing implementation, you can adapt the code to suit your bot’s settings.
+
+ChatALL's settings are stored in local storage using the [`vuex-persist`](https://github.com/championswimmer/vuex-persist). It's very handy, though the documentation is not readable enough. 
+Here is a brief introduction on how to use it: 
+
+First, in `src/store/index.js`, add the following code: 
+
+```javascript
+export default createStore({
+  state: {
+    ...
+    knowNothing: {
+      setting1: "",
+      setting2: "",
+    },
+    ...
+  },
+  mutations: {
+    ...
+    setKnowNothing(state, { setting1, setting2 }) {
+      state.knowNothing = { setting1, setting2 };
+    },
+    ...
+  },
+  ...
+});
+```
+
+`setting1`, `setting2`, and sub-objects can be added, deleted, or modified as you like. Just make sure the top-level object is `knowNothing`, even if it only has one configuration. 
+
+Then, in `KnowNothingBotSettings.vue`, add the following code: 
+
+```javascript
+export default {
+  ...
+  methods: {
+    ...mapMutations(["setKnowNothing"]),
+    setSetting1(value){
+      this.setKnowNothing({
+        ...this.knowNothing,
+        setting1: value
+      })
+    },
+    setSetting2(value){
+      this.setKnowNothing({
+        ...this.knowNothing,
+        setting2: value
+      })
+    },
+  },
+  computed: {
+    ...mapState(["knowNothing"])
+  }
+}
+```
+
+Finally, bind the `v-model` of the Vuetify component to the corresponding `knowNothing.xxx`, and point the action to the corresponding `setXxx()` function. For example: 
+
+```html
+<v-text-field
+  v-model="knowNothing.setting1"
+  @update:model-value="setSetting1"
+></v-text-field>
+```
+
+Done! Run the program and open DevTools to check if the values are correctly stored in the "Application" tab. 
+
+In `KnowNothingBot.js`, using the parameters you set is straightforward:
+
+```javascript
+...
+import store from "@/store";
+...
+store.state.knowNothing.setting1
+store.state.knowNothing.setting2
+const { setting1, setting2 } = store.state.knowNothing;
+...
+```
+
+#### Detailed _sendPrompt() patterns
+
+This is the core function, which sends and receives messages. 
+
+Reference existing bots depending on your interface type:
+
+1. For standard HTTP APIs: see `BardBot.js`
+2. For SSE-based APIs: see `ChatGPTBot.js`
+3. For WebSocket APIs: see `BingChatBot.js` 
+
+How you send and parse messages depends on the specific chatbot. Once you receive a response or hit an error, do the following: 
+
+1. If the response only contains new incremental text, and you need to assemble all the text yourself, then call `onUpdateResponse(callbackParam, { content: text, done: false });`. 
+2. After receiving all the text, call `onUpdateResponse(callbackParam, { content: text, done: true });` to update all the data. If the text has already been `onUpdateResponse` before, you can just call `onUpdateResponse(callbackParam, { done: true });`. 
+3. When ending normally, call `resolve()`. 
+4. If an error occurs, call `reject(error)`. The `error` can be an exception or an error message string. ChatALL will automatically handle it and display it to the user. 
+
+#### checkAvailability() implementation
+
+ChatALL calls the `checkAvailability()` function to check if the bot is available when it starts for the first time, refreshes the page (Command+R or Ctrl+R), and completes the settings. 
+
+In general, it performs these checks:
+
+1. Is the login valid?
+2. Is the API key configured properly?
+3. Are all the other necessary conditions met?
+
+If everything is good, `checkAvailability()` should return `true`.
+Else, it should return `false`.
+
+#### Custom bot icons
+
+Place the icon file in `public/bots/knownothing-logo.png`, and modify `KnowNothingBot.js`:
+
+```javascript
+static _logoFilename = "knownothing-logo.png";
+```
+
+#### Multi-language support in JS/HTML
+
+Language files are located in `src/i18n/locales/`, named with language codes and in .json format. 
+You need to add at least the following for your bot: 
+
+`en.json`
+```json
+{
+    ...
+    "knowNothing": {
+        "name": "Know Nothing"
+    },
+    ...
+}
+```
+
+`zh.json`
+```json
+{
+    ...
+    "knowNothing": {
+        "name": "啥都不懂"
+    },
+    ...
+}
+```
+
+Plus any other strings your bot needs.
+
+In JavaScript, you can use the following code to call the multi-language support:
+
+```javascript
+import i18n from "@/i18n";
+...
+i18n.global.t("knowNothing.name")
+...
+```
+
+In HTML, you can use the following code:
+
+```html
+{{ $t("knowNothing.name") }}
+```

README.md

@@ -155,7 +155,7 @@ If the problem persists, please [submit an issue](https://github.com/ai-shifu/Ch
 
 ### Contribute a Bot
 
-[The guide](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) may help you.
+[The guide](CONTRIBUTION.md#add-a-new-ai-bot) may help you.
 
 ### Run
 

README_DE-DE.md

@@ -155,7 +155,7 @@ Wenn das Problem weiterhin besteht, [reichen Sie ein Issue ein](https://github.c
 
 ### Einen Bot beisteuern
 
-[Die Anleitung](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) hilft dir dabei.
+[Die Anleitung](CONTRIBUTION.md#add-a-new-ai-bot) hilft dir dabei.
 
 ### Ausführen
 

README_ES-ES.md

@@ -155,7 +155,7 @@ Si el problema persiste, [envíe un problema](https://github.com/ai-shifu/ChatAL
 
 ### Contribuir con un bot
 
-[La guía](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) puede ayudarle.
+[La guía](CONTRIBUTION.md#add-a-new-ai-bot) puede ayudarle.
 
 ### Correr
 

README_FR-FR.md

@@ -155,7 +155,7 @@ Si le problème persiste, veuillez [soumettre un problème](https://github.com/a
 
 ### Contribuer à un bot
 
-[Le guide](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) may help you.
+[Le guide](CONTRIBUTION.md#add-a-new-ai-bot) may help you.
 
 ### Lancement
 

README_IT-IT.md

@@ -155,7 +155,7 @@ Se il problema persiste, per favore [segnala il problema](https://github.com/ai-
 
 ### Contribuisci con un Bot
 
-[Guida](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) potrebbe esserti utile.
+[Guida](CONTRIBUTION.md#add-a-new-ai-bot) potrebbe esserti utile.
 
 ### Esegui
 

README_JA-JP.md

@@ -155,7 +155,7 @@ ChatALLを初期化するには、以下のディレクトリを削除します
 
 ### AIの提供
 
-[ガイド](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA)を参考にしてください。
+[ガイド](CONTRIBUTION.md#add-a-new-ai-bot)を参考にしてください。
 
 ### 実行
 

README_KO-KR.md

@@ -155,7 +155,7 @@ ChatALL을 사용하는 동안 문제가 발생하면 다음 방법을 사용하
 
 ### 봇 기부
 
-[가이드](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA)가 도움이 될 수 있습니다.
+[가이드](CONTRIBUTION.md#add-a-new-ai-bot)가 도움이 될 수 있습니다.
 
 ### 실행
 

README_RU-RU.md

@@ -155,7 +155,7 @@ brew install --cask chatall
 
 ### Сделать бота
 
-[Этот гайд](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) может помочь вам.
+[Этот гайд](CONTRIBUTION.md#add-a-new-ai-bot) может помочь вам.
 
 ### Запуск
 

README_VI-VN.md

@@ -155,7 +155,7 @@ Nếu vấn đề vẫn tiếp tục, vui lòng [gửi issue](https://github.com
 
 ### Đóng góp Bot
 
-[Hướng dẫn](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA) này sẽ giúp bạn.
+[Hướng dẫn](CONTRIBUTION.md#add-a-new-ai-bot) này sẽ giúp bạn.
 
 ### Chạy thử
 

README_ZH-CN.md

@@ -155,7 +155,7 @@ brew install --cask chatall
 
 ### 贡献新的 AI 机器人
 
-[这份文档](https://github.com/ai-shifu/ChatALL/wiki/%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-AI-%E5%AF%B9%E8%AF%9D%E6%9C%BA%E5%99%A8%E4%BA%BA)能提供一些帮助。
+[这份文档](CONTRIBUTION.md#add-a-new-ai-bot)能提供一些帮助。
 
 ### Run