feat: #3224 auto switch to first avaliable model

app/components/chat.tsx

@@ -431,11 +431,27 @@ export function ChatActions(props: {
 
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
-  const models = useAllModels()
+  const allModels = useAllModels();
-    .filter((m) => m.available)
+  const models = useMemo(
-    .map((m) => m.name);
+    () => allModels.filter((m) => m.available).map((m) => m.name),
+    [allModels],
+  );
   const [showModelSelector, setShowModelSelector] = useState(false);
 
+  useEffect(() => {
+    // if current model is not available
+    // switch to first available model
+    const isUnavaliableModel = !models.includes(currentModel);
+    if (isUnavaliableModel && models.length > 0) {
+      const nextModel = models[0] as ModelType;
+      chatStore.updateCurrentSession(
+        (session) => (session.mask.modelConfig.model = nextModel),
+      );
+      showToast(nextModel);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentModel, models]);
+
   return (
     <div className={styles["chat-input-actions"]}>
       {couldStop && (

app/utils/hooks.ts

@@ -8,7 +8,7 @@ export function useAllModels() {
   const models = useMemo(() => {
     return collectModels(
       configStore.models,
-      [accessStore.customModels, configStore.customModels].join(","),
+      [configStore.customModels, accessStore.customModels].join(","),
     );
   }, [accessStore.customModels, configStore.customModels, configStore.models]);