only used desired model providers

app/utils/hooks.ts

@@ -1,16 +1,34 @@
 import { useMemo } from "react";
 import { useAccessStore, useAppConfig } from "../store";
 import { collectModelsWithDefaultModel } from "./model";
+import { ServiceProvider } from "../constant";
+
+// Define the allowed providers
+const allowedProviders = [
+  ServiceProvider.OpenAI,
+  ServiceProvider.Google,
+  ServiceProvider.Anthropic,
+];
 
 export function useAllModels() {
   const accessStore = useAccessStore();
   const configStore = useAppConfig();
   const models = useMemo(() => {
-    return collectModelsWithDefaultModel(
+    // First, collect all models including custom ones
+    const allModels = collectModelsWithDefaultModel(
       configStore.models,
       [configStore.customModels, accessStore.customModels].join(","),
       accessStore.defaultModel,
     );
+
+    // Then, filter the collected models based on the allowed providers
+    return allModels.filter(
+      (model) =>
+        model.provider &&
+        allowedProviders.includes(
+          model.provider.providerName as ServiceProvider,
+        ),
+    );
   }, [
     accessStore.customModels,
     accessStore.defaultModel,