[Feature] Server-side multi-provider/model support (#583)

* [Feature] Server side multi-pvorider/model support

* copilot suggesition implemented

* feat: improve model selector UI and auto-select default server model

- Replace emoji headers with Lucide icons (Monitor, User)
- Fix transition-all to explicit properties per web guidelines
- Use CSS padding instead of hardcoded space indentation
- Add ModelSelectorSectionHeader component for section headers
- Replace Star icon with "default" text label
- Style Configure button with muted text color
- Auto-select default server model when page loads
- Support AI_MODELS_CONFIG env var for cloud deployments
- Support custom apiKeyEnv/baseUrlEnv per provider config

* docs: update server-side multi-model configuration documentation

- Add AI_MODELS_CONFIG env var option for cloud deployments
- Document apiKeyEnv and baseUrlEnv fields for custom env var names
- Document default field for auto-selecting default model
- Remove deprecated version field from examples
- Add field reference table for clarity

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

app/api/chat/route.ts

@@ -34,6 +34,7 @@ import {
     setTraceOutput,
     wrapWithObserve,
 } from "@/lib/langfuse"
+import { findServerModelById } from "@/lib/server-model-config"
 import { getSystemPrompt } from "@/lib/system-prompts"
 import { getUserIdFromRequest } from "@/lib/user-id"
 
@@ -168,6 +169,7 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Read client AI provider overrides from headers
     const provider = req.headers.get("x-ai-provider")
     let baseUrl = req.headers.get("x-ai-base-url")
+    const selectedModelId = req.headers.get("x-selected-model-id")
 
     // For EdgeOne provider, construct full URL from request origin
     // because createOpenAI needs absolute URL, not relative path
@@ -179,8 +181,30 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Get cookie header for EdgeOne authentication (eo_token, eo_time)
     const cookieHeader = req.headers.get("cookie")
 
+    // Check if this is a server model with custom env var names
+    let serverModelConfig: {
+        apiKeyEnv?: string
+        baseUrlEnv?: string
+        provider?: string
+    } = {}
+    if (selectedModelId?.startsWith("server:")) {
+        const serverModel = await findServerModelById(selectedModelId)
+        console.log(
+            `[Server Model Lookup] ID: ${selectedModelId}, Found: ${!!serverModel}, Provider: ${serverModel?.provider}`,
+        )
+        if (serverModel) {
+            serverModelConfig = {
+                apiKeyEnv: serverModel.apiKeyEnv,
+                baseUrlEnv: serverModel.baseUrlEnv,
+                // Use actual provider from config (client header may have incorrect value due to ID format change)
+                provider: serverModel.provider,
+            }
+        }
+    }
+
     const clientOverrides = {
-        provider,
+        // Server model provider takes precedence over client header
+        provider: serverModelConfig.provider || provider,
         baseUrl,
         apiKey: req.headers.get("x-ai-api-key"),
         modelId: req.headers.get("x-ai-model"),
@@ -189,6 +213,8 @@ async function handleChatRequest(req: Request): Promise<Response> {
         awsSecretAccessKey: req.headers.get("x-aws-secret-access-key"),
         awsRegion: req.headers.get("x-aws-region"),
         awsSessionToken: req.headers.get("x-aws-session-token"),
+        // Server model custom env var names
+        ...serverModelConfig,
         // Vertex AI credentials (Express Mode)
         vertexApiKey: req.headers.get("x-vertex-api-key"),
         // Pass cookies for EdgeOne Pages authentication
@@ -201,6 +227,10 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Read minimal style preference from header
     const minimalStyle = req.headers.get("x-minimal-style") === "true"
 
+    console.log(
+        `[Client Overrides] provider: ${clientOverrides.provider}, modelId: ${clientOverrides.modelId}`,
+    )
+
     // Get AI model with optional client overrides
     const { model, providerOptions, headers, modelId } =
         getAIModel(clientOverrides)

app/api/server-models/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server"
+import { loadFlattenedServerModels } from "@/lib/server-model-config"
+
+// Use dynamic rendering to read AI_MODEL/AI_PROVIDER env vars at runtime
+// This ensures Docker users can set these values when starting containers
+export const dynamic = "force-dynamic"
+
+export async function GET() {
+    const models = await loadFlattenedServerModels()
+    return NextResponse.json({
+        models,
+        hasConfig: models.length > 0,
+    })
+}