improve model picker

src/app/[orgId]/settings/ai-providers/[niceId]/models/page.tsx

@@ -11,6 +11,7 @@ import {
     SettingsSectionTitle
 } from "@app/components/Settings";
 import {
+    persistPendingModelBudgets,
     type AiProviderModelListItem,
     type ModelListType
 } from "@app/components/AiProviderModelListEditor";
@@ -21,7 +22,9 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { aiProviderQueries } from "@app/lib/queries";
+import type { CreateOrEditAiModelResponse } from "@server/routers/aiProvider/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useState } from "react";
 
@@ -113,8 +116,7 @@ export default function AiProviderModelsPage() {
                 return;
             }
 
-            const toCreate: { modelKey: string; listType: ModelListType }[] =
-                [];
+            const toCreate: AiProviderModelListItem[] = [];
             const toUpdate: {
                 modelId: number;
                 modelKey: string;
@@ -159,7 +161,7 @@ export default function AiProviderModelsPage() {
                     continue;
                 }
 
-                toCreate.push({ modelKey, listType });
+                toCreate.push(item);
             }
 
             const toDelete = existing
@@ -167,13 +169,21 @@ export default function AiProviderModelsPage() {
                 .map((model) => model.modelId);
 
             await Promise.all([
-                ...toCreate.map(({ modelKey, listType }) =>
-                    api.put(`/ai-provider/${provider.providerId}/model`, {
-                        modelKey,
-                        name: modelKey,
-                        listType
-                    })
-                ),
+                ...toCreate.map(async (item) => {
+                    const res = await api.put<
+                        AxiosResponse<CreateOrEditAiModelResponse>
+                    >(`/ai-provider/${provider.providerId}/model`, {
+                        modelKey: item.modelKey,
+                        name: item.modelKey,
+                        listType: item.listType
+                    });
+                    await persistPendingModelBudgets({
+                        api,
+                        orgId: provider.orgId,
+                        modelId: res.data.data.model.modelId,
+                        pendingBudgets: item.pendingBudgets
+                    });
+                }),
                 ...toUpdate.map(({ modelId, modelKey, listType }) =>
                     api.post(`/ai-model/${modelId}`, {
                         modelKey,

src/app/[orgId]/settings/ai-providers/create/page.tsx

@@ -22,8 +22,8 @@ import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { AiProviderAuthTypeSelect } from "@app/components/AiProviderAuthTypeSelect";
 import { AiProviderCapabilitiesSelect } from "@app/components/AiProviderCapabilitiesSelect";
 import {
-    type AiProviderModelListItem,
-    type ModelListType
+    persistPendingModelBudgets,
+    type AiProviderModelListItem
 } from "@app/components/AiProviderModelListEditor";
 import { AiProviderModelsLists } from "@app/components/AiProviderModelsLists";
 import {
@@ -59,7 +59,10 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { authTypeRequiresApiKey } from "@app/lib/aiProviderDefaults";
 import { aiProviderQueries } from "@app/lib/queries";
-import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
+import type {
+    CreateOrEditAiModelResponse,
+    CreateOrEditAiProviderResponse
+} from "@server/routers/aiProvider/types";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
@@ -157,14 +160,22 @@ export default function CreateAiProviderPage() {
 
     async function createModels(
         providerId: number,
-        items: { modelKey: string; listType: ModelListType }[]
+        items: AiProviderModelListItem[]
     ) {
         for (const item of items) {
-            await api.put(`/ai-provider/${providerId}/model`, {
+            const res = await api.put<
+                AxiosResponse<CreateOrEditAiModelResponse>
+            >(`/ai-provider/${providerId}/model`, {
                 modelKey: item.modelKey,
                 name: item.modelKey,
                 listType: item.listType
             });
+            await persistPendingModelBudgets({
+                api,
+                orgId,
+                modelId: res.data.data.model.modelId,
+                pendingBudgets: item.pendingBudgets
+            });
         }
     }
 
@@ -210,8 +221,8 @@ export default function CreateAiProviderPage() {
 
         const modelItems = [...allowItems, ...blockItems]
             .map((item) => ({
-                modelKey: item.modelKey.trim(),
-                listType: item.listType
+                ...item,
+                modelKey: item.modelKey.trim()
             }))
             .filter((item) => item.modelKey);