Support tags in bots menu (#475)

* Feat: bots tag filter system

* multiple select

* The tags have set relationships with one another.

* feat: redefine tags

* style: improve coding style

* feat: improve tags css

* style: improve readability

* style: add tailing newline

* feat: improve tags css

* move buttons to bottom

* change button style

* style

---------

Co-authored-by: Sunner Sun <[email protected]>

Author: qcgm1978

src/bots/index.js

@@ -29,7 +29,7 @@ import SkyWorkBot from "./SkyWorkBot";
 import ChatGPT4MobileBot from "./openai/ChatGPT4MobileBot";
 import OpenAIAPI3516KBot from "./openai/OpenAIAPI3516KBot";
 import AzureOpenAIAPIBot from "./microsoft/AzureOpenAIAPIBot";
-import WinxinQianfanTurboBot from "./baidu/WenxinQianfanTurboBot";
+import WenxinQianfanTurboBot from "./baidu/WenxinQianfanTurboBot";
 import YouChatBot from "./YouChatBot";
 import PiBot from "./PiBot";
 import Qihoo360AIBrainBot from "./Qihoo360AIBrainBot";
@@ -74,7 +74,7 @@ const all = [
   SparkBot.getInstance(),
   VicunaBot.getInstance(),
   WenxinQianfanBot.getInstance(),
-  WinxinQianfanTurboBot.getInstance(),
+  WenxinQianfanTurboBot.getInstance(),
   YouChatBot.getInstance(),
 ];
 
@@ -99,4 +99,67 @@ const bots = {
   },
 };
 
+export const botTags = {
+  free: [
+    bots.getBotByClassName("BardBot"),
+    bots.getBotByClassName("BingChatBalancedBot"),
+    bots.getBotByClassName("BingChatCreativeBot"),
+    bots.getBotByClassName("BingChatPreciseBot"),
+    bots.getBotByClassName("ChatGLMBot"),
+    bots.getBotByClassName("ChatGPT35Bot"),
+    bots.getBotByClassName("ChatGPT35PoeBot"),
+    bots.getBotByClassName("ClaudeBot"),
+    bots.getBotByClassName("ClaudeInstantPoeBot"),
+    bots.getBotByClassName("HuggingChatBot"),
+    bots.getBotByClassName("Llama2HC70bBot"),
+    bots.getBotByClassName("MOSSBot"),
+    bots.getBotByClassName("OpenAssistantBot"),
+    bots.getBotByClassName("Qihoo360AIBrainBot"),
+    bots.getBotByClassName("QianWenBot"),
+    bots.getBotByClassName("SkyWorkBot"),
+    bots.getBotByClassName("SparkBot"),
+    bots.getBotByClassName("YouChatBot"),
+    bots.getBotByClassName("GradioAppBot"),
+    bots.getBotByClassName("AlpacaBot"),
+    bots.getBotByClassName("VicunaBot"),
+    bots.getBotByClassName("CharacterAIBot"),
+    bots.getBotByClassName("ClaudeAIBot"),
+    bots.getBotByClassName("PiBot"),
+    bots.getBotByClassName("SageBot"),
+  ],
+  paid: [
+    bots.getBotByClassName("ChatGPT4Bot"),
+    bots.getBotByClassName("ChatGPT4MobileBot"),
+    bots.getBotByClassName("ChatGPT4PoeBot"),
+    bots.getBotByClassName("ChatGPTBrowsingBot"),
+    bots.getBotByClassName("ClaudeInstant100kPoeBot"),
+    bots.getBotByClassName("ClaudePlusPoeBot"),
+  ],
+  openSource: [
+    bots.getBotByClassName("AlpacaBot"),
+    bots.getBotByClassName("ChatGLMBot"),
+    bots.getBotByClassName("HuggingChatBot"),
+    bots.getBotByClassName("Llama2HC70bBot"),
+    bots.getBotByClassName("MOSSBot"),
+    bots.getBotByClassName("OpenAssistantBot"),
+    bots.getBotByClassName("VicunaBot"),
+  ],
+  api: [
+    bots.getBotByClassName("AzureOpenAIAPIBot"),
+    bots.getBotByClassName("OpenAIAPI35Bot"),
+    bots.getBotByClassName("OpenAIAPI3516KBot"),
+    bots.getBotByClassName("OpenAIAPI4Bot"),
+    bots.getBotByClassName("WenxinQianfanBot"),
+    bots.getBotByClassName("WenxinQianfanTurboBot"),
+  ],
+  madeInChina: [
+    bots.getBotByClassName("Qihoo360AIBrainBot"),
+    bots.getBotByClassName("QianWenBot"),
+    bots.getBotByClassName("SkyWorkBot"),
+    bots.getBotByClassName("SparkBot"),
+    bots.getBotByClassName("WenxinQianfanBot"),
+    bots.getBotByClassName("WenxinQianfanTurboBot"),
+    bots.getBotByClassName("MOSSBot"),
+  ],
+};
 export default bots;

src/components/Footer/BotsMenu.vue

@@ -19,16 +19,6 @@
       </template>
 
       <v-card>
-        <v-list>
-          <v-list-item>
-            <v-list-item-title class="font-weight-black">
-              {{ $t("footer.chooseFavorite") }}
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-
-        <v-divider></v-divider>
-
         <v-list
           class="bots-list"
           density="compact"
@@ -37,7 +27,7 @@
           nav
         >
           <v-list-item
-            v-for="(bot, index) in bots.all"
+            v-for="(bot, index) in shownBots"
             :key="index"
             :value="bot.getClassname()"
             color="primary"
@@ -57,6 +47,32 @@
             </v-list-item-title>
           </v-list-item>
         </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-item>
+            <v-list-item-title class="font-weight-black">
+              {{ $t("footer.chooseFavorite") }}
+            </v-list-item-title>
+            <template v-slot:append>
+              <v-btn-toggle
+                v-model="selectedTags"
+                divided
+                color="primary"
+                group
+                multiple
+                variant="outlined"
+                rounded="xl"
+                @update:model-value="filterBots($event)"
+              >
+                <v-btn v-for="(tag, index) in tags" :key="index" :value="tag">
+                  {{ $t(`footer.${tag}`) }}
+                </v-btn>
+              </v-btn-toggle>
+            </template>
+          </v-list-item>
+        </v-list>
       </v-card>
     </v-menu>
   </div>
@@ -66,16 +82,21 @@
 import { computed, ref } from "vue";
 
 import bots from "@/bots";
+import { botTags } from "@/bots";
 import BotLogo from "./BotLogo.vue";
 import store from "@/store";
 
-const props = defineProps(["favBots"]);
-
 let menu = ref(false);
+
+const props = defineProps(["favBots"]);
 const favorited = computed(() => {
   return props.favBots.map((bot) => bot.classname);
 });
 
+const tags = Object.keys(botTags);
+const selectedTags = ref([]);
+const shownBots = ref(bots.all);
+
 const toggleFavorite = (bot) => {
   const classname = bot.getClassname();
   if (favorited.value.includes(classname)) {
@@ -89,6 +110,18 @@ function toggleMenu() {
   menu.value = !menu.value;
 }
 
+function filterBots(selectedTags) {
+  let filteredIn = bots.all;
+
+  if (selectedTags.length) {
+    const tagBots = selectedTags.map((tag) => botTags[tag]);
+    filteredIn = filteredIn.filter((bot) => {
+      return tagBots.every((tagBot) => tagBot.includes(bot));
+    });
+  }
+  shownBots.value = filteredIn;
+}
+
 defineExpose({
   toggleMenu,
 });
@@ -98,4 +131,9 @@ defineExpose({
 .bots-list {
   column-count: 3;
 }
+
+/* Keep the orignal case of tab names */
+.v-btn {
+  text-transform: none !important;
+}
 </style>

src/i18n/locales/en.json

@@ -27,7 +27,12 @@
   "footer": {
     "chooseFavorite": "Choose your favorite AI bots",
     "sendPrompt": "Send to:",
-    "promptPlaceholder": "Type a message. (Shift+Enter to add a new line)"
+    "promptPlaceholder": "Type a message. (Shift+Enter to add a new line)",
+    "madeInChina": "Made in China",
+    "openSource": "Open Source",
+    "free": "Free",
+    "paid": "Paid",
+    "api": "API"
   },
   "error": {
     "error": "Error",

src/i18n/locales/zh.json

@@ -27,7 +27,12 @@
   "footer": {
     "chooseFavorite": "选择你喜欢的 AI",
     "sendPrompt": "发送到:",
-    "promptPlaceholder": "输入消息。（Shift+Enter 换行）"
+    "promptPlaceholder": "输入消息。（Shift+Enter 换行）",
+    "madeInChina": "中国制造",
+    "openSource": "开源",
+    "free": "免费",
+    "paid": "付费",
+    "api": "API"
   },
   "error": {
     "error": "错误",