Fix compatible provider API key setup (#925)

2026-05-08 12:01:28 +00:00 · 2026-05-07 16:17:03 +07:00
parent f77f90a828
commit 050e56f20b
3 changed files with 240 additions and 21 deletions
--- a/src/app/(dashboard)/dashboard/providers/[id]/AddApiKeyModal.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/AddApiKeyModal.js
@@ -4,7 +4,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Badge, Input, Modal, Select } from "@/shared/components";

-export default function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthropic, authType, authHint, website, proxyPools, onSave, onClose }) {
+export default function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthropic, authType, authHint, website, proxyPools, error, onSave, onClose }) {
  const NONE_PROXY_POOL_VALUE = "__none__";
  const isOllamaLocal = provider === "ollama-local";
  const isCookie = authType === "cookie";
@@ -19,6 +19,7 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
  const [formData, setFormData] = useState({
    name: "",
    apiKey: "",
+    defaultModel: "",
    priority: 1,
    proxyPoolId: NONE_PROXY_POOL_VALUE,
    ollamaHostUrl: "",
@@ -76,6 +77,7 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
      // Non-ollama providers require a name
      if (!formData.name) return;
    }
+    if (isCompatible && !formData.defaultModel.trim()) return;

    setSaving(true);
    try {
@@ -100,6 +102,7 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
      await onSave({
        name: formData.name || (isOllamaLocal ? "Ollama Local" : ""),
        apiKey: formData.apiKey,
+        defaultModel: isCompatible ? formData.defaultModel.trim() : undefined,
        priority: formData.priority,
        proxyPoolId: formData.proxyPoolId === NONE_PROXY_POOL_VALUE ? null : formData.proxyPoolId,
        testStatus: isValid ? "active" : "unknown",
@@ -167,6 +170,14 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
            )}
          </p>
        )}
+        {isCompatible && (
+          <Input
+            label="Default Model"
+            value={formData.defaultModel}
+            onChange={(e) => setFormData({ ...formData, defaultModel: e.target.value })}
+            placeholder={isAnthropic ? "claude-3-5-sonnet-latest" : "gpt-4o-mini"}
+          />
+        )}
        {isOllamaLocal && (
          <p className="text-xs text-text-muted">
            Leave blank to use <code>http://localhost:11434</code>. For remote Ollama, enter the full host URL (e.g. <code>http://192.168.1.10:11434</code>).
@@ -177,12 +188,12 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
            {validationResult === "success" ? "Valid" : "Invalid"}
          </Badge>
        )}
+        {error && (
+          <p className="text-xs text-red-500 break-words">{error}</p>
+        )}
        {isCompatible && (
          <p className="text-xs text-text-muted">
-            {isAnthropic 
-              ? `Validation checks ${providerName || "Anthropic Compatible"} by verifying the API key.`
-              : `Validation checks ${providerName || "OpenAI Compatible"} via /models on your base URL.`
-            }
+            Enter the model ID exactly as your compatible endpoint expects it. This model will be saved as the connection default.
          </p>
        )}
        {isCloudflareAi && (
@@ -260,7 +271,7 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
        </p>

        <div className="flex gap-2">
-          <Button onClick={handleSubmit} fullWidth disabled={saving || (!isOllamaLocal && (!formData.name || !formData.apiKey)) || (isAzure && (!azureData.azureEndpoint || !azureData.deployment || !azureData.organization)) || (isCloudflareAi && !cloudflareData.accountId)}>
+          <Button onClick={handleSubmit} fullWidth disabled={saving || (!isOllamaLocal && (!formData.name || !formData.apiKey)) || (isCompatible && !formData.defaultModel.trim()) || (isAzure && (!azureData.azureEndpoint || !azureData.deployment || !azureData.organization)) || (isCloudflareAi && !cloudflareData.accountId)}>
            {saving ? "Saving..." : "Save"}
          </Button>
          <Button onClick={onClose} variant="ghost" fullWidth>
@@ -285,6 +296,7 @@ AddApiKeyModal.propTypes = {
    id: PropTypes.string,
    name: PropTypes.string,
  })),
+  error: PropTypes.string,
  onSave: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
 };
--- a/src/app/(dashboard)/dashboard/providers/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/page.js
@@ -28,6 +28,7 @@ export default function ProviderDetailPage() {
  const [showOAuthModal, setShowOAuthModal] = useState(false);
  const [showIFlowCookieModal, setShowIFlowCookieModal] = useState(false);
  const [showAddApiKeyModal, setShowAddApiKeyModal] = useState(false);
+  const [addConnectionError, setAddConnectionError] = useState("");
  const [showEditModal, setShowEditModal] = useState(false);
  const [showEditNodeModal, setShowEditNodeModal] = useState(false);
  const [showBulkProxyModal, setShowBulkProxyModal] = useState(false);
@@ -359,18 +360,31 @@ export default function ProviderDetailPage() {
  };

  const handleSaveApiKey = async (formData) => {
+    setAddConnectionError("");
    try {
      const res = await fetch("/api/providers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ provider: providerId, ...formData }),
      });
+
+      let data = null;
+      try {
+        data = await res.json();
+      } catch {
+        data = null;
+      }
+
      if (res.ok) {
        await fetchConnections();
        setShowAddApiKeyModal(false);
+        return;
      }
+
+      setAddConnectionError(data?.error || "Failed to save connection");
    } catch (error) {
      console.log("Error saving connection:", error);
+      setAddConnectionError("Failed to save connection");
    }
  };

@@ -918,11 +932,14 @@ export default function ProviderDetailPage() {
              <Button
                size="sm"
                icon="add"
-                onClick={() => setShowAddApiKeyModal(true)}
+                onClick={() => {
+                  setAddConnectionError("");
+                  setShowAddApiKeyModal(true);
+                }}
                disabled={connections.length > 0}
                className="w-full sm:w-auto"
              >
-                Add
+                Add API Key
              </Button>
              <Button
                size="sm"
@@ -1027,18 +1044,27 @@ export default function ProviderDetailPage() {
                </div>
                <p className="text-sm text-text-muted">No connections yet</p>
              </div>
-              {!isCompatible && (
-                <div className="flex gap-2">
-                  {providerId === "iflow" && (
-                    <Button size="sm" icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
-                      Cookie
-                    </Button>
-                  )}
-                  <Button size="sm" icon="add" onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}>
-                    {providerId === "iflow" ? "OAuth" : "Add Connection"}
+              <div className="flex gap-2">
+                {!isCompatible && providerId === "iflow" && (
+                  <Button size="sm" icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
+                    Cookie
                  </Button>
-                </div>
-              )}
+                )}
+                <Button
+                  size="sm"
+                  icon="add"
+                  onClick={() => {
+                    if (isOAuth) {
+                      setShowOAuthModal(true);
+                      return;
+                    }
+                    setAddConnectionError("");
+                    setShowAddApiKeyModal(true);
+                  }}
+                >
+                  {isCompatible ? "Add API Key" : (providerId === "iflow" ? "OAuth" : "Add Connection")}
+                </Button>
+              </div>
            </div>
          ) : (
            <>
@@ -1060,7 +1086,14 @@ export default function ProviderDetailPage() {
                  <Button
                    size="sm"
                    icon="add"
-                    onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}
+                    onClick={() => {
+                      if (isOAuth) {
+                        setShowOAuthModal(true);
+                        return;
+                      }
+                      setAddConnectionError("");
+                      setShowAddApiKeyModal(true);
+                    }}
                    className="w-full sm:w-auto"
                  >
                    Add
@@ -1155,8 +1188,12 @@ export default function ProviderDetailPage() {
        authHint={providerInfo?.authHint}
        website={providerInfo?.website}
        proxyPools={proxyPools}
+        error={addConnectionError}
        onSave={handleSaveApiKey}
-        onClose={() => setShowAddApiKeyModal(false)}
+        onClose={() => {
+          setAddConnectionError("");
+          setShowAddApiKeyModal(false);
+        }}
      />
      <EditConnectionModal
        isOpen={showEditModal}
--- a/tests/unit/compatible-provider-connections.test.js
+++ b/tests/unit/compatible-provider-connections.test.js
@@ -0,0 +1,170 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+
+const originalDataDir = process.env.DATA_DIR;
+
+async function setupTestContext(nodeData) {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "9router-compatible-provider-"));
+  process.env.DATA_DIR = tempDir;
+  vi.resetModules();
+  vi.doMock("next/server", () => ({
+    NextResponse: {
+      json(body, init = {}) {
+        return new Response(JSON.stringify(body), {
+          status: init.status || 200,
+          headers: { "Content-Type": "application/json" },
+        });
+      },
+    },
+  }));
+
+  const { POST } = await import("@/app/api/providers/route.js");
+  const {
+    createProviderNode,
+    getProviderConnections,
+  } = await import("@/models/index.js");
+
+  const node = await createProviderNode(nodeData);
+
+  return {
+    node,
+    POST,
+    getProviderConnections,
+    cleanup() {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    },
+  };
+}
+
+function makeRequest(provider) {
+  return new Request("https://9router.local/api/providers", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      provider,
+      apiKey: "test-key",
+      name: "Test Connection",
+      defaultModel: "test-model",
+    }),
+  });
+}
+
+function expectCompatibleConnection(connection, node, { apiType } = {}) {
+  expect(connection.provider).toBe(node.id);
+  expect(connection.authType).toBe("apikey");
+  expect(connection.defaultModel).toBe("test-model");
+  expect(connection.providerSpecificData).toMatchObject({
+    prefix: node.prefix,
+    baseUrl: node.baseUrl,
+    nodeName: node.name,
+  });
+
+  if (apiType !== undefined) {
+    expect(connection.providerSpecificData.apiType).toBe(apiType);
+  }
+}
+
+describe("compatible provider connections API", () => {
+  let cleanup = () => {};
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.doUnmock("next/server");
+    vi.resetModules();
+    vi.clearAllMocks();
+    cleanup();
+    cleanup = () => {};
+    if (originalDataDir === undefined) delete process.env.DATA_DIR;
+    else process.env.DATA_DIR = originalDataDir;
+  });
+
+  it("creates one API-key connection for an OpenAI-compatible node", async () => {
+    const ctx = await setupTestContext({
+      id: "openai-compatible-test",
+      type: "openai-compatible",
+      name: "OpenAI Compatible Test Node",
+      prefix: "oct",
+      apiType: "chat",
+      baseUrl: "https://openai-compatible.test/v1",
+    });
+    cleanup = ctx.cleanup;
+
+    const response = await ctx.POST(makeRequest(ctx.node.id));
+    const body = await response.json();
+    const connection = body.connection;
+    const storedConnections = await ctx.getProviderConnections({ provider: ctx.node.id });
+
+    expect(response.status).toBe(201);
+    expect(storedConnections).toHaveLength(1);
+    expectCompatibleConnection(connection, ctx.node, { apiType: "chat" });
+    expect(storedConnections[0]).toMatchObject({
+      provider: ctx.node.id,
+      authType: "apikey",
+      defaultModel: "test-model",
+      providerSpecificData: {
+        prefix: ctx.node.prefix,
+        apiType: "chat",
+        baseUrl: ctx.node.baseUrl,
+        nodeName: ctx.node.name,
+      },
+    });
+  });
+
+  it("creates one API-key connection for an Anthropic-compatible node", async () => {
+    const ctx = await setupTestContext({
+      id: "anthropic-compatible-test",
+      type: "anthropic-compatible",
+      name: "Anthropic Compatible Test Node",
+      prefix: "act",
+      baseUrl: "https://anthropic-compatible.test/v1",
+    });
+    cleanup = ctx.cleanup;
+
+    const response = await ctx.POST(makeRequest(ctx.node.id));
+    const body = await response.json();
+    const connection = body.connection;
+    const storedConnections = await ctx.getProviderConnections({ provider: ctx.node.id });
+
+    expect(response.status).toBe(201);
+    expect(storedConnections).toHaveLength(1);
+    expectCompatibleConnection(connection, ctx.node);
+    expect(storedConnections[0]).toMatchObject({
+      provider: ctx.node.id,
+      authType: "apikey",
+      defaultModel: "test-model",
+      providerSpecificData: {
+        prefix: ctx.node.prefix,
+        baseUrl: ctx.node.baseUrl,
+        nodeName: ctx.node.name,
+      },
+    });
+  });
+
+  it("returns 400 for a duplicate connection on the same compatible node", async () => {
+    const ctx = await setupTestContext({
+      id: "openai-compatible-duplicate-test",
+      type: "openai-compatible",
+      name: "Duplicate Guard Node",
+      prefix: "dup",
+      apiType: "chat",
+      baseUrl: "https://duplicate-guard.test/v1",
+    });
+    cleanup = ctx.cleanup;
+
+    const firstResponse = await ctx.POST(makeRequest(ctx.node.id));
+    const secondResponse = await ctx.POST(makeRequest(ctx.node.id));
+    const secondBody = await secondResponse.json();
+    const storedConnections = await ctx.getProviderConnections({ provider: ctx.node.id });
+
+    expect(firstResponse.status).toBe(201);
+    expect(secondResponse.status).toBe(400);
+    expect(secondBody.error).toContain("Only one connection is allowed");
+    expect(storedConnections).toHaveLength(1);
+    expectCompatibleConnection(storedConnections[0], ctx.node, { apiType: "chat" });
+  });
+});