improve aiModel

Author: ddecrulle

web/src/core/adapters/ai/mock.ts

@@ -7,6 +7,10 @@ export function createAi(params: { webUiUrl: string }): Ai {
         webUiUrl,
         apiBase: `${webUiUrl}/api`,
         getToken: async () => ({ status: "success" as const, token: "mock-ai-token" }),
-        listModels: async () => ["llama3.2", "mistral-7b", "codestral"]
+        listModels: async () => [
+            { id: "llama3.2", name: "Llama 3.2" },
+            { id: "mistral-7b", name: "Mistral 7B" },
+            { id: "codestral", name: "Codestral" }
+        ]
     };
 }

web/src/core/adapters/ai/openWebUi.ts

@@ -1,5 +1,6 @@
 import type { Ai, GetTokenResult } from "core/ports/Ai";
 import { oidcTokenExchange, OidcTokenExchangeError } from "core/tools/oidcTokenExchange";
+import { z } from "zod";
 
 export function createAi(params: {
     webUiUrl: string;
@@ -37,9 +38,11 @@ export function createAi(params: {
                 throw new Error(`Failed to list models (${response.status})`);
             }
 
-            const data = await response.json();
+            const { data } = z
+                .object({ data: z.array(z.object({ id: z.string(), name: z.string() })) })
+                .parse(await response.json());
 
-            return (data.data as { id: string }[]).map(m => m.id);
+            return data.map(({ id, name }) => ({ id, name }));
         }
     };
 }

web/src/core/ports/Ai.ts

@@ -2,7 +2,7 @@ export type Ai = {
     webUiUrl: string;
     apiBase: string;
     getToken: () => Promise<GetTokenResult>;
-    listModels: (token: string) => Promise<string[]>;
+    listModels: (token: string) => Promise<{ id: string; name: string }[]>;
 };
 
 export type GetTokenResult =

web/src/core/usecases/ai/state.ts

@@ -3,12 +3,14 @@ import { id } from "tsafe/id";
 
 export const name = "ai";
 
+export type AiModel = { id: string; name: string };
+
 export type CustomAiProvider = {
     id: string;
     label: string;
     apiBase: string;
     apiKey: string;
-    availableModels: string[];
+    availableModels: AiModel[];
     selectedModel: string | undefined;
     modelsFetchStatus: "fetching" | "success" | "error";
 };
@@ -26,7 +28,7 @@ export declare namespace State {
         webUiUrl: string;
         apiBase: string;
         token: string | undefined;
-        availableModels: string[];
+        availableModels: AiModel[];
         selectedModel: string | undefined;
         customProviders: CustomAiProvider[];
     };
@@ -59,7 +61,7 @@ export const { reducer, actions } = createUsecaseActions({
                     webUiUrl: string;
                     apiBase: string;
                     token: string;
-                    availableModels: string[];
+                    availableModels: AiModel[];
                     selectedModel: string | undefined;
                     customProviders: CustomAiProvider[];
                 };
@@ -80,7 +82,7 @@ export const { reducer, actions } = createUsecaseActions({
                 apiBase,
                 token,
                 availableModels,
-                selectedModel: selectedModel ?? availableModels[0],
+                selectedModel: selectedModel ?? availableModels[0]?.id,
                 customProviders
             });
         },
@@ -107,15 +109,15 @@ export const { reducer, actions } = createUsecaseActions({
         },
         customProviderModelsLoaded: (
             state,
-            { payload }: { payload: { id: string; models: string[] } }
+            { payload }: { payload: { id: string; models: AiModel[] } }
         ) => {
             if (!state.isEnabled) return;
             const provider = state.customProviders.find(p => p.id === payload.id);
             if (provider === undefined) return;
             provider.availableModels = payload.models;
             provider.modelsFetchStatus = "success";
             if (provider.selectedModel === undefined && payload.models.length > 0) {
-                provider.selectedModel = payload.models[0];
+                provider.selectedModel = payload.models[0].id;
             }
         },
         customProviderModelsFetchFailed: (

web/src/core/usecases/ai/thunks.ts

@@ -1,6 +1,7 @@
 import type { Thunks } from "core/bootstrap";
 import { actions } from "./state";
-import type { CustomAiProvider } from "./state";
+import type { AiModel, CustomAiProvider } from "./state";
+import { z } from "zod";
 import { getLocalStorage } from "core/tools/safeLocalStorage";
 import * as deploymentRegionManagement from "core/usecases/deploymentRegionManagement";
 import { assert } from "tsafe";
@@ -38,15 +39,17 @@ function writePersistedProviders(
     localStorage.setItem(CUSTOM_PROVIDERS_STORAGE_KEY, JSON.stringify(providers));
 }
 
-async function fetchModels(apiBase: string, apiKey: string): Promise<string[]> {
+async function fetchModels(apiBase: string, apiKey: string): Promise<AiModel[]> {
     const response = await fetch(`${apiBase}/models`, {
         headers: { Authorization: `Bearer ${apiKey}` }
     });
     if (!response.ok) {
         throw new Error(`Failed to fetch models (${response.status})`);
     }
-    const data = await response.json();
-    return (data.data as { id: string }[]).map(m => m.id);
+    const { data } = z
+        .object({ data: z.array(z.object({ id: z.string(), name: z.string() })) })
+        .parse(await response.json());
+    return data.map(({ id, name }) => ({ id, name }));
 }
 
 export const thunks = {
@@ -144,7 +147,7 @@ export const thunks = {
         },
     testCustomProvider:
         (params: { apiBase: string; apiKey: string }) =>
-        async (..._args): Promise<string[]> => {
+        async (..._args): Promise<AiModel[]> => {
             const { apiBase, apiKey } = params;
             return fetchModels(apiBase, apiKey);
         },

web/src/ui/pages/account/AccountAiTab.tsx

@@ -180,9 +180,9 @@ const AccountAiGatewayTab = memo((props: Props) => {
                         onChange={onModelChange}
                         size="small"
                     >
-                        {availableModels.map(model => (
-                            <MenuItem key={model} value={model}>
-                                {model}
+                        {availableModels.map(({ id, name }) => (
+                            <MenuItem key={id} value={id}>
+                                {name}
                             </MenuItem>
                         ))}
                     </Select>
@@ -343,9 +343,9 @@ const CustomProviderCard = memo((props: CustomProviderCardProps) => {
                                 onChange={onModelChange}
                                 size="small"
                             >
-                                {provider.availableModels.map(model => (
-                                    <MenuItem key={model} value={model}>
-                                        {model}
+                                {provider.availableModels.map(({ id, name }) => (
+                                    <MenuItem key={id} value={id}>
+                                        {name}
                                     </MenuItem>
                                 ))}
                             </Select>