feat: add azure as first class provider

web-app/src/consts/providers.ts

@@ -59,6 +59,40 @@ export const predefinedProviders = [
     ],
     models: [],
   },
+  {
+    active: true,
+    api_key: '',
+    base_url: 'https://YOUR-RESOURCE-NAME.openai.azure.com/openai/v1',
+    explore_models_url: 'https://oai.azure.com/deployments',
+    provider: 'azure',
+    settings: [
+      {
+        key: 'api-key',
+        title: 'API Key',
+        description:
+          'The Azure OpenAI API uses API keys for authentication. Visit your [Azure OpenAI Studio](https://oai.azure.com/) to retrieve the API key from your resource.',
+        controller_type: 'input',
+        controller_props: {
+          placeholder: 'Insert API Key',
+          value: '',
+          type: 'password',
+          input_actions: ['unobscure', 'copy'],
+        },
+      },
+      {
+        key: 'base-url',
+        title: 'Base URL',
+        description:
+          'Your Azure OpenAI resource endpoint. See the [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/latest) for more information.',
+        controller_type: 'input',
+        controller_props: {
+          placeholder: 'https://YOUR-RESOURCE-NAME.openai.azure.com/openai/v1',
+          value: 'https://YOUR-RESOURCE-NAME.openai.azure.com/openai/v1',
+        },
+      },
+    ],
+    models: [],
+  },
   {
     active: true,
     api_key: '',

web-app/src/containers/dialogs/AddModel.tsx

@@ -1,4 +1,4 @@
 import {
   Dialog,
   DialogContent,
   DialogDescription,
@@ -7,76 +7,76 @@
   DialogTrigger,
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { useProviderModels } from '@/hooks/useProviderModels'
 import { ModelCombobox } from '@/containers/ModelCombobox'
 import { IconPlus } from '@tabler/icons-react'
 import { useState } from 'react'
 import { getProviderTitle } from '@/lib/utils'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import { ModelCapabilities } from '@/types/models'
 import { models as providerModels } from 'token.js'
 
 type DialogAddModelProps = {
   provider: ModelProvider
   trigger?: React.ReactNode
 }
 
 export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
   const { t } = useTranslation()
   const { updateProvider } = useModelProvider()
   const [modelId, setModelId] = useState<string>('')
   const [open, setOpen] = useState(false)
   const [isComboboxOpen, setIsComboboxOpen] = useState(false)
 
   // Fetch models from provider API (API key is optional)
   const { models, loading, error, refetch } = useProviderModels(
     provider.base_url ? provider : undefined
   )
 
   // Handle form submission
   const handleSubmit = () => {
     if (!modelId.trim()) {
       return // Don't submit if model ID is empty
     }
 
     // Create the new model
     const newModel = {
       id: modelId,
       model: modelId,
       name: modelId,
       capabilities: [
         ModelCapabilities.COMPLETION,
         (
           providerModels[
             provider.provider as unknown as keyof typeof providerModels
-          ].supportsToolCalls as unknown as string[]
-        ).includes(modelId)
+          ]?.supportsToolCalls as unknown as string[]
+        )?.includes(modelId)
           ? ModelCapabilities.TOOLS
           : undefined,
         (
           providerModels[
             provider.provider as unknown as keyof typeof providerModels
-          ].supportsImages as unknown as string[]
-        ).includes(modelId)
+          ]?.supportsImages as unknown as string[]
+        )?.includes(modelId)
           ? ModelCapabilities.VISION
           : undefined,
       ].filter(Boolean) as string[],
       version: '1.0',
     }
 
     // Update the provider with the new model
     const updatedModels = [...provider.models, newModel]
     updateProvider(provider.provider, {
       ...provider,
       models: updatedModels,
     })
 
     // Reset form and close dialog
     setModelId('')
     setOpen(false)
   }
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>

web-app/src/lib/utils.ts

@@ -28,6 +28,8 @@ export function getProviderLogo(provider: string) {
       return '/images/model-provider/gemini.svg'
     case 'openai':
       return '/images/model-provider/openai.svg'
+    case 'azure':
+      return '/images/model-provider/azure.svg'
     default:
       return undefined
   }
@@ -161,5 +163,5 @@ export function formatDuration(startTime: number, endTime?: number): string {
 }
 
 export function sanitizeModelId(modelId: string): string {
-  return modelId.replace(/[^a-zA-Z0-9/_\-.]/g, '').replace(/\./g, "_")
+  return modelId.replace(/[^a-zA-Z0-9/_\-.]/g, '').replace(/\./g, '_')
 }

web-app/src/services/providers/tauri.ts

@@ -35,15 +35,15 @@ export class TauriProvidersService extends DefaultProvidersService {
                 (
                   providerModels[
                     provider.provider as unknown as keyof typeof providerModels
-                  ].supportsToolCalls as unknown as string[]
-                ).includes(model)
+                  ]?.supportsToolCalls as unknown as string[]
+                )?.includes(model)
                   ? ModelCapabilities.TOOLS
                   : undefined,
                 (
                   providerModels[
                     provider.provider as unknown as keyof typeof providerModels
-                  ].supportsImages as unknown as string[]
-                ).includes(model)
+                  ]?.supportsImages as unknown as string[]
+                )?.includes(model)
                   ? ModelCapabilities.VISION
                   : undefined,
               ].filter(Boolean) as string[]

web-app/src/services/providers/web.ts

@@ -93,8 +93,8 @@ export class WebProvidersService implements ProvidersService {
               (
                 providerModels[
                   provider.provider as unknown as keyof typeof providerModels
-                ].supportsToolCalls as unknown as string[]
-              ).includes(model)
+                ]?.supportsToolCalls as unknown as string[]
+              )?.includes(model)
                 ? ModelCapabilities.TOOLS
                 : undefined,
             ].filter(Boolean) as string[]
@@ -163,7 +163,9 @@ export class WebProvidersService implements ProvidersService {
       // Handle different response formats that providers might use
       if (data.data && Array.isArray(data.data)) {
         // OpenAI format: { data: [{ id: "model-id" }, ...] }
-        return data.data.map((model: { id: string }) => model.id).filter(Boolean)
+        return data.data
+          .map((model: { id: string }) => model.id)
+          .filter(Boolean)
       } else if (Array.isArray(data)) {
         // Direct array format: ["model-id1", "model-id2", ...]
         return data
@@ -189,11 +191,15 @@ export class WebProvidersService implements ProvidersService {
         'Authentication failed',
         'Access forbidden',
         'Models endpoint not found',
-        'Failed to fetch models from'
+        'Failed to fetch models from',
       ]
 
-      if (error instanceof Error &&
-          structuredErrorPrefixes.some(prefix => (error as Error).message.startsWith(prefix))) {
+      if (
+        error instanceof Error &&
+        structuredErrorPrefixes.some((prefix) =>
+          (error as Error).message.startsWith(prefix)
+        )
+      ) {
         throw new Error(error.message)
       }
 
@@ -211,7 +217,10 @@ export class WebProvidersService implements ProvidersService {
     }
   }
 
-  async updateSettings(providerName: string, settings: ProviderSetting[]): Promise<void> {
+  async updateSettings(
+    providerName: string,
+    settings: ProviderSetting[]
+  ): Promise<void> {
     await ExtensionManager.getInstance()
       .getEngine(providerName)
       ?.updateSettings(
@@ -233,4 +242,4 @@ export class WebProvidersService implements ProvidersService {
     // Web implementation uses regular fetch
     return fetch
   }
-}
+}