chore: remove ModelProviderContext

ui/admin/app/components/model-providers/ModelProviderForm.tsx

@@ -1,16 +1,17 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
+import { mutate } from "swr";
 import { z } from "zod";
 
 import { ModelProviderConfig } from "~/lib/model/modelProviders";
+import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
 import { TypographyH4 } from "~/components/Typography";
 import {
     NameDescriptionForm,
     ParamFormValues,
 } from "~/components/composed/NameDescriptionForm";
 import { ControlledInput } from "~/components/form/controlledInputs";
-import { useModelProviders } from "~/components/model-providers/ModelProviderContext";
 import { Button } from "~/components/ui/button";
 import { Form } from "~/components/ui/form";
 import { Separator } from "~/components/ui/separator";
@@ -75,7 +76,13 @@ export function ModelProviderForm({
     parameters: ModelProviderConfig;
     requiredParameters: string[];
 }) {
-    const { configureModelProvider } = useModelProviders();
+    const configureModelProvider = useAsync(
+        ModelProviderApiService.configureModelProviderById,
+        {
+            onSuccess: () =>
+                mutate(ModelProviderApiService.getModelProviders.key()),
+        }
+    );
 
     const form = useForm<ModelProviderFormValues>({
         resolver: zodResolver(formSchema),
@@ -111,7 +118,10 @@ export function ModelProviderForm({
                 }
             );
 
-            await configureModelProvider(modelProviderId, allConfigParams);
+            await configureModelProvider.execute(
+                modelProviderId,
+                allConfigParams
+            );
             onSuccess(allConfigParams);
         }
     );

ui/admin/app/components/model-providers/ModelProviderLists.tsx

@@ -1,11 +1,17 @@
 import { BoxesIcon, CircleCheckIcon, CircleSlashIcon } from "lucide-react";
+import useSWR from "swr";
+
+import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
 import { ModelProviderConfigure } from "~/components/model-providers/ModelProviderConfigure";
-import { useModelProviders } from "~/components/model-providers/ModelProviderContext";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
 
 export function ModelProviderList() {
-    const { modelProviders } = useModelProviders();
+    const { data: modelProviders } = useSWR(
+        ModelProviderApiService.getModelProviders.key(),
+        () => ModelProviderApiService.getModelProviders(),
+        { fallbackData: [] }
+    );
 
     return (
         <div className="space-y-4">

ui/admin/app/routes/_auth.tsx

@@ -7,14 +7,14 @@ import { UserService } from "~/lib/service/api/userService";
 import { useAuth } from "~/components/auth/AuthContext";
 import { Error, RouteError, Unauthorized } from "~/components/errors";
 import { HeaderNav } from "~/components/header/HeaderNav";
-import { ModelProviderProvider } from "~/components/model-providers/ModelProviderContext";
 import { Sidebar } from "~/components/sidebar";
 import { SignIn } from "~/components/signin/SignIn";
 
 export async function clientLoader() {
     const me = await preload(UserService.getMe.key(), () =>
         UserService.getMe()
     );
+
     return { me };
 }
 
@@ -25,9 +25,7 @@ export default function AuthLayout() {
             <div className="flex flex-col flex-grow overflow-hidden">
                 <HeaderNav />
                 <main className="flex-grow overflow-auto">
-                    <ModelProviderProvider>
-                        <Outlet />
-                    </ModelProviderProvider>
+                    <Outlet />
                 </main>
             </div>
         </div>