From 47dc1349639d3f0fa4efec6226a19d8f49b7cc2d Mon Sep 17 00:00:00 2001 From: limitx0 <38377176+limitx0@users.noreply.github.com> Date: Wed, 11 Jun 2025 21:57:11 +0800 Subject: [PATCH 1/2] Add detailed content to "Adding a New AI Bot" section in CONTRIBUTION.md --- CONTRIBUTION.md | 225 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 4d4e9283b4..b657db0594 100644 --- a/CONTRIBUTION.md +++ b/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 + +``` + +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") }} +``` From 020305a1d3799a28034171a830fd74337b03b012 Mon Sep 17 00:00:00 2001 From: limitx0 <38377176+limitx0@users.noreply.github.com> Date: Wed, 11 Jun 2025 22:13:12 +0800 Subject: [PATCH 2/2] Add links to "Adding a New AI Bot" section from CONTRIBUTION.md to all README.md files --- README.md | 2 +- README_DE-DE.md | 2 +- README_ES-ES.md | 2 +- README_FR-FR.md | 2 +- README_IT-IT.md | 2 +- README_JA-JP.md | 2 +- README_KO-KR.md | 2 +- README_RU-RU.md | 2 +- README_VI-VN.md | 2 +- README_ZH-CN.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 9fd3f14758..e894d64fab 100644 --- a/README.md +++ b/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 diff --git a/README_DE-DE.md b/README_DE-DE.md index aa9b8301a6..bf86731d81 100644 --- a/README_DE-DE.md +++ b/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 diff --git a/README_ES-ES.md b/README_ES-ES.md index 666dcd94c7..d5800a2340 100644 --- a/README_ES-ES.md +++ b/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 diff --git a/README_FR-FR.md b/README_FR-FR.md index 7721f24503..d8457624d5 100644 --- a/README_FR-FR.md +++ b/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 diff --git a/README_IT-IT.md b/README_IT-IT.md index 067bf3bba1..867a3214e6 100644 --- a/README_IT-IT.md +++ b/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 diff --git a/README_JA-JP.md b/README_JA-JP.md index 74f05f18fb..7fd9e93a45 100644 --- a/README_JA-JP.md +++ b/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)を参考にしてください。 ### 実行 diff --git a/README_KO-KR.md b/README_KO-KR.md index 3c90f8158d..a2f9ccbc72 100644 --- a/README_KO-KR.md +++ b/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)가 도움이 될 수 있습니다. ### 실행 diff --git a/README_RU-RU.md b/README_RU-RU.md index f544d2d7dc..f12a7df927 100644 --- a/README_RU-RU.md +++ b/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) может помочь вам. ### Запуск diff --git a/README_VI-VN.md b/README_VI-VN.md index 5003756d7c..66c724e6f4 100644 --- a/README_VI-VN.md +++ b/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ử diff --git a/README_ZH-CN.md b/README_ZH-CN.md index 981730859d..531d708567 100644 --- a/README_ZH-CN.md +++ b/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