UI: query provider for supported models (#4270)

Signed-off-by: Angela Ning <aning@squareup.com>

ui/desktop/src/components/ConfigContext.tsx

@@ -8,6 +8,7 @@ import {
   addExtension as apiAddExtension,
   removeExtension as apiRemoveExtension,
   providers,
+  getProviderModels as apiGetProviderModels,
 } from '../api';
 import type {
   ConfigResponse,
@@ -39,6 +40,7 @@ interface ConfigContextType {
   removeExtension: (name: string) => Promise<void>;
   getProviders: (b: boolean) => Promise<ProviderDetails[]>;
   getExtensions: (b: boolean) => Promise<FixedExtensionEntry[]>;
+  getProviderModels: (providerName: string) => Promise<string[]>;
   disableAllExtensions: () => Promise<void>;
   enableBotExtensions: (extensions: ExtensionConfig[]) => Promise<void>;
 }
@@ -185,6 +187,21 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
     [providersList]
   );
 
+  const getProviderModels = useCallback(async (providerName: string): Promise<string[]> => {
+    try {
+      const response = await apiGetProviderModels({
+        path: { name: providerName },
+        headers: {
+          'X-Secret-Key': await window.electron.getSecretKey(),
+        },
+      });
+      return response.data || [];
+    } catch (error) {
+      console.error(`Failed to fetch models for provider ${providerName}:`, error);
+      return [];
+    }
+  }, []);
+
   useEffect(() => {
     // Load all configuration data and providers on mount
     (async () => {
@@ -242,6 +259,7 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
       toggleExtension,
       getProviders,
       getExtensions,
+      getProviderModels,
       disableAllExtensions,
       enableBotExtensions,
     };
@@ -257,6 +275,7 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
     toggleExtension,
     getProviders,
     getExtensions,
+    getProviderModels,
     reloadConfig,
   ]);