nezumi/9router
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/9router.git synced 2026-09-23 04:09:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix compatible provider API key setup (#925)

Browse Source
This commit is contained in:
Arden Hermawan
2026-05-07 16:17:03 +07:00
committed by GitHub
parent f77f90a828
commit 050e56f20b
3 changed files with 240 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/dashboard/providers/[id]/AddApiKeyModal.js
+18 -6
View File
@@ -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,
};
src/app/(dashboard)/dashboard/providers/[id]/page.js
+52 -15
View File
@@ -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}