fix: fix model market select not take effect issue (#139)

fix: fix model market select not take effect issue (#139) Co-Authored-By: Minghan Zhang <[email protected]>
coaidev · Mar 26, 2024 · 64e9c9d · 64e9c9d
1 parent 98d9ba2
commit 64e9c9d
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 54 deletions.
diff --git a/app/src/components/home/ModelFinder.tsx b/app/src/components/home/ModelFinder.tsx
@@ -57,6 +57,7 @@ function ModelFinder(props: ModelSelectorProps) {
   const list = useSelector(selectModelList);
 
   const supportModels = useSelector(selectSupportModels);
+  const modelList = useSelector(selectModelList);
   const subscriptionData = useSelector(subscriptionDataSelector);
 
   modelEvent.bind((target: string) => {
@@ -79,12 +80,12 @@ function ModelFinder(props: ModelSelectorProps) {
       } as Model);
 
     return raw.map((model) => formatModel(subscriptionData, model, level));
-  }, [supportModels, subscriptionData, level, student]);
+  }, [supportModels, subscriptionData, level, student, modelList]);
 
   const current = useMemo((): SelectItemProps => {
     const raw = models.find((item) => item.name === model);
     return raw || models[0];
-  }, [models, model]);
+  }, [models, model, supportModels, modelList]);
 
   return (
     <SelectGroup

diff --git a/app/src/components/home/assemblies/ChatAction.tsx b/app/src/components/home/assemblies/ChatAction.tsx
@@ -7,10 +7,18 @@ import {
   toggleWeb,
   useConversationActions,
 } from "@/store/chat.ts";
-import { Blocks, Globe, LandPlot, Play, Settings, Wand2 } from "lucide-react";
+import {
+  Blocks,
+  Globe,
+  LandPlot,
+  Play,
+  Search,
+  Settings,
+  Wand2,
+} from "lucide-react";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { openDialog } from "@/store/settings.ts";
 import { cn } from "@/components/ui/lib/utils.ts";
 import {
@@ -26,6 +34,8 @@ import { getModelAvatar } from "@/components/home/ModelMarket.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import Tips from "@/components/Tips.tsx";
 import { Model } from "@/api/types.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { splitList } from "@/utils/base.ts";
 
 type ChatActionProps = {
   className?: string;
@@ -104,12 +114,25 @@ export function MarketAction() {
   const dispatch = useDispatch();
 
   const current = useSelector(selectModel);
-  const models = useSelector(selectSupportModels);
+  const supportModels = useSelector(selectSupportModels);
 
+  const [search, setSearch] = React.useState("");
   const [open, setOpen] = React.useState(false);
 
   const { selected } = useConversationActions();
 
+  const models = useMemo(() => {
+    const content = search.trim();
+    if (content === "") return supportModels;
+
+    const raw = splitList(search.toLowerCase(), [" ", ",", ";", "-"]);
+    return supportModels.filter((model) => {
+      return raw.every((item) => {
+        return model.name.toLowerCase().includes(item);
+      });
+    });
+  }, [supportModels, search]);
+
   const event = (model: Model) => {
     selected(model.id);
     setOpen(false);
@@ -125,50 +148,76 @@ export function MarketAction() {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>{t("market.list")}</DialogTitle>
-          <DialogDescription>
-            <Button
-              size={`default-sm`}
-              className={`mt-2 w-full`}
-              onClick={() => dispatch(openMarket())}
-            >
-              <LandPlot className={`h-4 w-4 mr-2`} />
-              {t("market.go")}
-            </Button>
-            <ScrollArea
-              className={`flex flex-col mt-2.5 border rounded-md max-h-[60vh]`}
-            >
-              {models.map((model, index) => (
-                <div
-                  key={index}
-                  onClick={() => event(model)}
-                  className={cn(
-                    "flex sm:flex-row flex-col items-center px-4 py-4 sm:py-2 border-b last:border-none select-none cursor-pointer transition-all hover:bg-background-container",
-                    model.id === current && "bg-background-container",
-                  )}
+          <DialogDescription asChild>
+            <div>
+              <Button
+                size={`default-sm`}
+                className={`mt-2 w-full`}
+                onClick={() => dispatch(openMarket())}
+              >
+                <LandPlot className={`h-4 w-4 mr-2`} />
+                {t("market.go")}
+              </Button>
+              <div className={`flex flex-row mt-4 mb-2`}>
+                <Input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder={t("market.search")}
+                />
+                <Button
+                  className={`ml-2 shrink-0`}
+                  variant={`outline`}
+                  size={`icon`}
                 >
-                  <img
-                    className={`w-6 h-6 border rounded-md`}
-                    src={getModelAvatar(model.avatar)}
-                    alt={""}
-                  />
-                  <div className={`text-common sm:ml-2 mt-2 sm:mt-0`}>
-                    {model.name}
-                  </div>
-                  <Tips className={`hidden sm:inline-block`}>{model.id}</Tips>
-                  <Button
-                    className={cn(
-                      "ml-auto",
-                      model.id === current && "text-common",
-                    )}
-                    size={`icon-sm`}
-                    variant={`ghost`}
-                    onClick={() => event(model)}
+                  <Search className={`h-4 w-4`} />
+                </Button>
+              </div>
+              <ScrollArea
+                className={`flex flex-col mt-2.5 border rounded-md max-h-[60vh]`}
+              >
+                {models.length > 0 ? (
+                  models.map((model, index) => (
+                    <div
+                      key={index}
+                      onClick={() => event(model)}
+                      className={cn(
+                        "flex sm:flex-row flex-col items-center px-4 py-4 sm:py-2 border-b last:border-none select-none cursor-pointer transition-all hover:bg-background-container",
+                        model.id === current && "bg-background-container",
+                      )}
+                    >
+                      <img
+                        className={`w-6 h-6 border rounded-md`}
+                        src={getModelAvatar(model.avatar)}
+                        alt={""}
+                      />
+                      <div className={`text-common sm:ml-2 mt-2 sm:mt-0`}>
+                        {model.name}
+                      </div>
+                      <Tips className={`hidden sm:inline-block`}>
+                        {model.id}
+                      </Tips>
+                      <Button
+                        className={cn(
+                          "ml-auto",
+                          model.id === current && "text-common",
+                        )}
+                        size={`icon-sm`}
+                        variant={`ghost`}
+                        onClick={() => event(model)}
+                      >
+                        <Play className={`h-3.5 w-3.5`} />
+                      </Button>
+                    </div>
+                  ))
+                ) : (
+                  <div
+                    className={`flex justify-center items-center py-8 select-none`}
                   >
-                    <Play className={`h-3.5 w-3.5`} />
-                  </Button>
-                </div>
-              ))}
-            </ScrollArea>
+                    {t("empty")}
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
           </DialogDescription>
         </DialogHeader>
       </DialogContent>

diff --git a/app/src/store/chat.ts b/app/src/store/chat.ts
@@ -265,7 +265,18 @@ const chatSlice = createSlice({
       if (conversation) conversation.name = name;
     },
     setModel: (state, action) => {
-      setMemory("model", action.payload as string);
+      const model = action.payload as string;
+      if (!model || model === "") return;
+      if (!inModel(state.support_models, model)) return;
+
+      // if model is not in model list, add it
+      if (!state.model_list.includes(model)) {
+        console.log("[model] auto add model to list:", model);
+        state.model_list.push(model);
+        setArrayMemory("model_list", state.model_list);
+      }
+
+      setMemory("model", model as string);
       state.model = action.payload as string;
     },
     setWeb: (state, action) => {
@@ -425,8 +436,6 @@ export function useConversationActions() {
   const current = useSelector(selectCurrent);
   const mask = useSelector(selectMaskItem);
 
-  const supportModels = useSelector(selectSupportModels);
-
   return {
     toggle: async (id: number) => {
       const conversation = conversations[id];
@@ -485,10 +494,7 @@ export function useConversationActions() {
       }
     },
     selected: (model?: string) => {
-      if (!model || model === "") return;
-      if (!supportModels.map((item) => item.id).includes(model)) return;
-
-      dispatch(setModel(model));
+      dispatch(setModel(model ?? ""));
     },
   };
 }