mirror of
https://github.com/decolua/9router.git
synced 2026-05-08 12:01:28 +00:00
d9b8e48725
- Fix hydration mismatches and initialization errors - Add /v1/models endpoint for OpenAI clients - Add Codex response translator (Responses → OpenAI) - Fix circular dependencies and PropTypes - Add Material Symbols font and CSS fixes - Update README with deployment guide Co-merged from PR #18 (14/15 commits, skipped debug)
808 lines
27 KiB
JavaScript
808 lines
27 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, Toggle } from "@/shared/components";
|
|
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, getProviderAlias } from "@/shared/constants/providers";
|
|
import { getModelsByProviderId } from "@/shared/constants/models";
|
|
import { PROVIDER_ENDPOINTS } from "@/shared/constants/config";
|
|
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
|
|
|
|
export default function ProviderDetailPage() {
|
|
const params = useParams();
|
|
const providerId = params.id;
|
|
const [connections, setConnections] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showOAuthModal, setShowOAuthModal] = useState(false);
|
|
const [showAddApiKeyModal, setShowAddApiKeyModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [selectedConnection, setSelectedConnection] = useState(null);
|
|
const [modelAliases, setModelAliases] = useState({});
|
|
const { copied, copy } = useCopyToClipboard();
|
|
|
|
const providerInfo = OAUTH_PROVIDERS[providerId] || APIKEY_PROVIDERS[providerId];
|
|
const isOAuth = !!OAUTH_PROVIDERS[providerId];
|
|
const models = getModelsByProviderId(providerId);
|
|
const providerAlias = getProviderAlias(providerId);
|
|
|
|
// Define callbacks BEFORE the useEffect that uses them
|
|
const fetchAliases = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/models/alias");
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setModelAliases(data.aliases || {});
|
|
}
|
|
} catch (error) {
|
|
console.log("Error fetching aliases:", error);
|
|
}
|
|
}, []);
|
|
|
|
const fetchConnections = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/providers");
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
const filtered = (data.connections || []).filter(c => c.provider === providerId);
|
|
setConnections(filtered);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error fetching connections:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [providerId]);
|
|
|
|
useEffect(() => {
|
|
fetchConnections();
|
|
fetchAliases();
|
|
}, [fetchConnections, fetchAliases]);
|
|
|
|
const handleSetAlias = async (modelId, alias) => {
|
|
const fullModel = `${providerAlias}/${modelId}`;
|
|
try {
|
|
const res = await fetch("/api/models/alias", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ model: fullModel, alias }),
|
|
});
|
|
if (res.ok) {
|
|
await fetchAliases();
|
|
} else {
|
|
const data = await res.json();
|
|
alert(data.error || "Failed to set alias");
|
|
}
|
|
} catch (error) {
|
|
console.log("Error setting alias:", error);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAlias = async (alias) => {
|
|
try {
|
|
const res = await fetch(`/api/models/alias?alias=${encodeURIComponent(alias)}`, {
|
|
method: "DELETE",
|
|
});
|
|
if (res.ok) {
|
|
await fetchAliases();
|
|
}
|
|
} catch (error) {
|
|
console.log("Error deleting alias:", error);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
if (!confirm("Delete this connection?")) return;
|
|
try {
|
|
const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
|
|
if (res.ok) {
|
|
setConnections(connections.filter(c => c.id !== id));
|
|
}
|
|
} catch (error) {
|
|
console.log("Error deleting connection:", error);
|
|
}
|
|
};
|
|
|
|
const handleOAuthSuccess = () => {
|
|
fetchConnections();
|
|
setShowOAuthModal(false);
|
|
};
|
|
|
|
const handleSaveApiKey = async (formData) => {
|
|
try {
|
|
const res = await fetch("/api/providers", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ provider: providerId, ...formData }),
|
|
});
|
|
if (res.ok) {
|
|
await fetchConnections();
|
|
setShowAddApiKeyModal(false);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error saving connection:", error);
|
|
}
|
|
};
|
|
|
|
const handleUpdateConnection = async (formData) => {
|
|
try {
|
|
const res = await fetch(`/api/providers/${selectedConnection.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(formData),
|
|
});
|
|
if (res.ok) {
|
|
await fetchConnections();
|
|
setShowEditModal(false);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error updating connection:", error);
|
|
}
|
|
};
|
|
|
|
const handleUpdateConnectionStatus = async (id, isActive) => {
|
|
try {
|
|
const res = await fetch(`/api/providers/${id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ isActive }),
|
|
});
|
|
if (res.ok) {
|
|
setConnections(prev => prev.map(c => c.id === id ? { ...c, isActive } : c));
|
|
}
|
|
} catch (error) {
|
|
console.log("Error updating connection status:", error);
|
|
}
|
|
};
|
|
|
|
const handleSwapPriority = async (conn1, conn2) => {
|
|
if (!conn1 || !conn2) return;
|
|
try {
|
|
// If they have the same priority, we need to ensure the one moving up
|
|
// gets a lower value than the one moving down.
|
|
// We use a small offset which the backend re-indexing will fix.
|
|
let p1 = conn2.priority;
|
|
let p2 = conn1.priority;
|
|
|
|
if (p1 === p2) {
|
|
// If moving conn1 "up" (index decreases)
|
|
const isConn1MovingUp = connections.indexOf(conn1) > connections.indexOf(conn2);
|
|
if (isConn1MovingUp) {
|
|
p1 = conn2.priority - 0.5;
|
|
} else {
|
|
p1 = conn2.priority + 0.5;
|
|
}
|
|
}
|
|
|
|
await Promise.all([
|
|
fetch(`/api/providers/${conn1.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ priority: p1 }),
|
|
}),
|
|
fetch(`/api/providers/${conn2.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ priority: p2 }),
|
|
}),
|
|
]);
|
|
await fetchConnections();
|
|
} catch (error) {
|
|
console.log("Error swapping priority:", error);
|
|
}
|
|
};
|
|
|
|
if (!providerInfo) {
|
|
return (
|
|
<div className="text-center py-20">
|
|
<p className="text-text-muted">Provider not found</p>
|
|
<Link href="/dashboard/providers" className="text-primary mt-4 inline-block">
|
|
Back to Providers
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<CardSkeleton />
|
|
<CardSkeleton />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
{/* Header */}
|
|
<div>
|
|
<Link
|
|
href="/dashboard/providers"
|
|
className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary transition-colors mb-4"
|
|
>
|
|
<span className="material-symbols-outlined text-lg">arrow_back</span>
|
|
Back to Providers
|
|
</Link>
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className="rounded-lg flex items-center justify-center"
|
|
style={{ backgroundColor: `${providerInfo.color}15` }}
|
|
>
|
|
<Image
|
|
src={`/providers/${providerInfo.id}.png`}
|
|
alt={providerInfo.name}
|
|
width={48}
|
|
height={48}
|
|
className="object-contain rounded-lg"
|
|
onError={(e) => { e.currentTarget.style.display = "none"; }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-semibold tracking-tight">{providerInfo.name}</h1>
|
|
<p className="text-text-muted">
|
|
{connections.length} connection{connections.length !== 1 ? "s" : ""}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connections */}
|
|
<Card>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold">Connections</h2>
|
|
<Button
|
|
size="sm"
|
|
icon="add"
|
|
onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}
|
|
>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
|
|
{connections.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<span className="material-symbols-outlined text-4xl text-text-muted mb-2">
|
|
{isOAuth ? "lock" : "key"}
|
|
</span>
|
|
<p className="text-sm text-text-muted">No connections yet</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{connections
|
|
.sort((a, b) => (a.priority || 0) - (b.priority || 0))
|
|
.map((conn, index) => (
|
|
<ConnectionRow
|
|
key={conn.id}
|
|
connection={conn}
|
|
isOAuth={isOAuth}
|
|
isFirst={index === 0}
|
|
isLast={index === connections.length - 1}
|
|
onMoveUp={() => handleSwapPriority(conn, connections[index - 1])}
|
|
onMoveDown={() => handleSwapPriority(conn, connections[index + 1])}
|
|
onToggleActive={(isActive) => handleUpdateConnectionStatus(conn.id, isActive)}
|
|
onEdit={() => {
|
|
setSelectedConnection(conn);
|
|
setShowEditModal(true);
|
|
}}
|
|
onDelete={() => handleDelete(conn.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Models */}
|
|
<Card>
|
|
<h2 className="text-lg font-semibold mb-4">
|
|
{providerInfo.passthroughModels ? "Model Aliases" : "Available Models"}
|
|
</h2>
|
|
{providerInfo.passthroughModels ? (
|
|
<PassthroughModelsSection
|
|
providerAlias={providerAlias}
|
|
modelAliases={modelAliases}
|
|
copied={copied}
|
|
onCopy={copy}
|
|
onSetAlias={handleSetAlias}
|
|
onDeleteAlias={handleDeleteAlias}
|
|
/>
|
|
) : models.length === 0 ? (
|
|
<p className="text-sm text-text-muted">No models configured</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-3">
|
|
{models.map((model) => {
|
|
const fullModel = `${providerAlias}/${model.id}`;
|
|
// Also check for old format (providerId/model) for backward compatibility
|
|
const oldFormatModel = `${providerId}/${model.id}`;
|
|
const existingAlias = Object.entries(modelAliases).find(
|
|
([, m]) => m === fullModel || m === oldFormatModel
|
|
)?.[0];
|
|
return (
|
|
<ModelRow
|
|
key={model.id}
|
|
model={model}
|
|
fullModel={fullModel}
|
|
alias={existingAlias}
|
|
copied={copied}
|
|
onCopy={copy}
|
|
onSetAlias={(alias) => handleSetAlias(model.id, alias)}
|
|
onDeleteAlias={() => handleDeleteAlias(existingAlias)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
</Card>
|
|
|
|
{/* Modals */}
|
|
<OAuthModal
|
|
isOpen={showOAuthModal}
|
|
provider={providerId}
|
|
providerInfo={providerInfo}
|
|
onSuccess={handleOAuthSuccess}
|
|
onClose={() => setShowOAuthModal(false)}
|
|
/>
|
|
<AddApiKeyModal
|
|
isOpen={showAddApiKeyModal}
|
|
provider={providerId}
|
|
onSave={handleSaveApiKey}
|
|
onClose={() => setShowAddApiKeyModal(false)}
|
|
/>
|
|
<EditConnectionModal
|
|
isOpen={showEditModal}
|
|
connection={selectedConnection}
|
|
onSave={handleUpdateConnection}
|
|
onClose={() => setShowEditModal(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ModelRow({ model, fullModel, alias, copied, onCopy }) {
|
|
return (
|
|
<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border hover:bg-sidebar/50">
|
|
<span className="material-symbols-outlined text-base text-text-muted">smart_toy</span>
|
|
<code className="text-xs text-text-muted font-mono bg-sidebar px-1.5 py-0.5 rounded">{fullModel}</code>
|
|
<button
|
|
onClick={() => onCopy(fullModel, `model-${model.id}`)}
|
|
className="p-0.5 hover:bg-sidebar rounded text-text-muted hover:text-primary"
|
|
title="Copy model"
|
|
>
|
|
<span className="material-symbols-outlined text-sm">
|
|
{copied === `model-${model.id}` ? "check" : "content_copy"}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PassthroughModelsSection({ providerAlias, modelAliases, copied, onCopy, onSetAlias, onDeleteAlias }) {
|
|
const [newModel, setNewModel] = useState("");
|
|
const [adding, setAdding] = useState(false);
|
|
|
|
// Filter aliases for this provider - models are persisted via alias
|
|
const providerAliases = Object.entries(modelAliases).filter(
|
|
([, model]) => model.startsWith(`${providerAlias}/`)
|
|
);
|
|
|
|
const allModels = providerAliases.map(([alias, fullModel]) => ({
|
|
modelId: fullModel.replace(`${providerAlias}/`, ""),
|
|
fullModel,
|
|
alias,
|
|
}));
|
|
|
|
// Generate default alias from modelId (last part after /)
|
|
const generateDefaultAlias = (modelId) => {
|
|
const parts = modelId.split("/");
|
|
return parts[parts.length - 1];
|
|
};
|
|
|
|
const handleAdd = async () => {
|
|
if (!newModel.trim() || adding) return;
|
|
const modelId = newModel.trim();
|
|
const defaultAlias = generateDefaultAlias(modelId);
|
|
|
|
// Check if alias already exists
|
|
if (modelAliases[defaultAlias]) {
|
|
alert(`Alias "${defaultAlias}" already exists. Please use a different model or edit existing alias.`);
|
|
return;
|
|
}
|
|
|
|
setAdding(true);
|
|
try {
|
|
await onSetAlias(modelId, defaultAlias);
|
|
setNewModel("");
|
|
} catch (error) {
|
|
console.log("Error adding model:", error);
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-sm text-text-muted">
|
|
OpenRouter supports any model. Add models and create aliases for quick access.
|
|
</p>
|
|
|
|
{/* Add new model */}
|
|
<div className="flex items-end gap-2">
|
|
<div className="flex-1">
|
|
<label className="text-xs text-text-muted mb-1 block">Model ID (from OpenRouter)</label>
|
|
<input
|
|
type="text"
|
|
value={newModel}
|
|
onChange={(e) => setNewModel(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleAdd()}
|
|
placeholder="anthropic/claude-3-opus"
|
|
className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
<Button size="sm" icon="add" onClick={handleAdd} disabled={!newModel.trim() || adding}>
|
|
{adding ? "Adding..." : "Add"}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Models list */}
|
|
{allModels.length > 0 && (
|
|
<div className="flex flex-col gap-3">
|
|
{allModels.map(({ modelId, fullModel, alias }) => (
|
|
<PassthroughModelRow
|
|
key={fullModel}
|
|
modelId={modelId}
|
|
fullModel={fullModel}
|
|
copied={copied}
|
|
onCopy={onCopy}
|
|
onDeleteAlias={() => onDeleteAlias(alias)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PassthroughModelRow({ modelId, fullModel, copied, onCopy, onDeleteAlias }) {
|
|
return (
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-sidebar/50">
|
|
<span className="material-symbols-outlined text-base text-text-muted">smart_toy</span>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{modelId}</p>
|
|
|
|
<div className="flex items-center gap-1 mt-1">
|
|
<code className="text-xs text-text-muted font-mono bg-sidebar px-1.5 py-0.5 rounded">{fullModel}</code>
|
|
<button
|
|
onClick={() => onCopy(fullModel, `model-${modelId}`)}
|
|
className="p-0.5 hover:bg-sidebar rounded text-text-muted hover:text-primary"
|
|
title="Copy model"
|
|
>
|
|
<span className="material-symbols-outlined text-sm">
|
|
{copied === `model-${modelId}` ? "check" : "content_copy"}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete button */}
|
|
<button
|
|
onClick={onDeleteAlias}
|
|
className="p-1 hover:bg-red-50 rounded text-red-500"
|
|
title="Remove model"
|
|
>
|
|
<span className="material-symbols-outlined text-sm">delete</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CooldownTimer({ until }) {
|
|
const [remaining, setRemaining] = useState("");
|
|
|
|
useEffect(() => {
|
|
const updateRemaining = () => {
|
|
const diff = new Date(until).getTime() - Date.now();
|
|
if (diff <= 0) {
|
|
setRemaining("");
|
|
return;
|
|
}
|
|
const secs = Math.floor(diff / 1000);
|
|
if (secs < 60) {
|
|
setRemaining(`${secs}s`);
|
|
} else if (secs < 3600) {
|
|
setRemaining(`${Math.floor(secs / 60)}m ${secs % 60}s`);
|
|
} else {
|
|
const hrs = Math.floor(secs / 3600);
|
|
const mins = Math.floor((secs % 3600) / 60);
|
|
setRemaining(`${hrs}h ${mins}m`);
|
|
}
|
|
};
|
|
|
|
updateRemaining();
|
|
const interval = setInterval(updateRemaining, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [until]);
|
|
|
|
if (!remaining) return null;
|
|
|
|
return (
|
|
<span className="text-xs text-orange-500 font-mono">
|
|
⏱ {remaining}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function ConnectionRow({ connection, isOAuth, isFirst, isLast, onMoveUp, onMoveDown, onToggleActive, onEdit, onDelete }) {
|
|
const displayName = isOAuth
|
|
? connection.name || connection.email || connection.displayName || "OAuth Account"
|
|
: connection.name;
|
|
|
|
// Use useState + useEffect for impure Date.now() to avoid calling during render
|
|
const [isCooldown, setIsCooldown] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkCooldown = () => {
|
|
const cooldown = connection.rateLimitedUntil &&
|
|
new Date(connection.rateLimitedUntil).getTime() > Date.now();
|
|
setIsCooldown(cooldown);
|
|
};
|
|
|
|
checkCooldown();
|
|
// Update every second while in cooldown
|
|
const interval = connection.rateLimitedUntil ? setInterval(checkCooldown, 1000) : null;
|
|
return () => {
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [connection.rateLimitedUntil]);
|
|
|
|
// Determine effective status (override unavailable if cooldown expired)
|
|
const effectiveStatus = (connection.testStatus === "unavailable" && !isCooldown)
|
|
? "active" // Cooldown expired → treat as active
|
|
: connection.testStatus;
|
|
|
|
const getStatusVariant = () => {
|
|
if (connection.isActive === false) return "default";
|
|
if (effectiveStatus === "active" || effectiveStatus === "success") return "success";
|
|
if (effectiveStatus === "error" || effectiveStatus === "expired" || effectiveStatus === "unavailable") return "error";
|
|
return "default";
|
|
};
|
|
|
|
const hasError = effectiveStatus === "error" || effectiveStatus === "expired" || effectiveStatus === "unavailable";
|
|
|
|
return (
|
|
<div className={`flex items-center justify-between p-3 rounded-lg border border-border hover:bg-sidebar/50 ${connection.isActive === false ? 'opacity-60' : ''}`}>
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
{/* Priority arrows */}
|
|
<div className="flex flex-col">
|
|
<button
|
|
onClick={onMoveUp}
|
|
disabled={isFirst}
|
|
className={`p-0.5 rounded ${isFirst ? "text-text-muted/30 cursor-not-allowed" : "hover:bg-sidebar text-text-muted hover:text-primary"}`}
|
|
>
|
|
<span className="material-symbols-outlined text-sm">keyboard_arrow_up</span>
|
|
</button>
|
|
<button
|
|
onClick={onMoveDown}
|
|
disabled={isLast}
|
|
className={`p-0.5 rounded ${isLast ? "text-text-muted/30 cursor-not-allowed" : "hover:bg-sidebar text-text-muted hover:text-primary"}`}
|
|
>
|
|
<span className="material-symbols-outlined text-sm">keyboard_arrow_down</span>
|
|
</button>
|
|
</div>
|
|
<span className="material-symbols-outlined text-base text-text-muted">
|
|
{isOAuth ? "lock" : "key"}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{displayName}</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant={getStatusVariant()} size="sm" dot>
|
|
{connection.isActive === false ? "disabled" : (effectiveStatus || "Unknown")}
|
|
</Badge>
|
|
{isCooldown && connection.isActive !== false && <CooldownTimer until={connection.rateLimitedUntil} />}
|
|
{connection.lastError && connection.isActive !== false && (
|
|
<span className="text-xs text-red-500 truncate max-w-[300px]" title={connection.lastError}>
|
|
{connection.lastError}
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-text-muted">#{connection.priority}</span>
|
|
{connection.globalPriority && (
|
|
<span className="text-xs text-text-muted">Auto: {connection.globalPriority}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Toggle
|
|
size="sm"
|
|
checked={connection.isActive !== false}
|
|
onChange={onToggleActive}
|
|
title={connection.isActive !== false ? "Disable connection" : "Enable connection"}
|
|
/>
|
|
<div className="flex gap-1 ml-1">
|
|
<button onClick={onEdit} className="p-2 hover:bg-sidebar rounded">
|
|
<span className="material-symbols-outlined text-base">edit</span>
|
|
</button>
|
|
<button onClick={onDelete} className="p-2 hover:bg-red-50 rounded text-red-500">
|
|
<span className="material-symbols-outlined text-base">delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AddApiKeyModal({ isOpen, provider, onSave, onClose }) {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
apiKey: "",
|
|
priority: 1,
|
|
});
|
|
const [validating, setValidating] = useState(false);
|
|
const [validationResult, setValidationResult] = useState(null);
|
|
|
|
const handleValidate = async () => {
|
|
setValidating(true);
|
|
try {
|
|
const res = await fetch("/api/providers/validate", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ provider, apiKey: formData.apiKey }),
|
|
});
|
|
const data = await res.json();
|
|
setValidationResult(data.valid ? "success" : "failed");
|
|
} catch {
|
|
setValidationResult("failed");
|
|
} finally {
|
|
setValidating(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
onSave({
|
|
name: formData.name,
|
|
apiKey: formData.apiKey,
|
|
priority: formData.priority,
|
|
testStatus: validationResult === "success" ? "active" : "unknown",
|
|
});
|
|
};
|
|
|
|
if (!provider) return null;
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} title={`Add ${provider} API Key`} onClose={onClose}>
|
|
<div className="flex flex-col gap-4">
|
|
<Input
|
|
label="Name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="Production Key"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
label="API Key"
|
|
type="password"
|
|
value={formData.apiKey}
|
|
onChange={(e) => setFormData({ ...formData, apiKey: e.target.value })}
|
|
className="flex-1"
|
|
/>
|
|
<div className="pt-6">
|
|
<Button onClick={handleValidate} disabled={!formData.apiKey || validating} variant="secondary">
|
|
{validating ? "Checking..." : "Check"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{validationResult && (
|
|
<Badge variant={validationResult === "success" ? "success" : "error"}>
|
|
{validationResult === "success" ? "Valid" : "Invalid"}
|
|
</Badge>
|
|
)}
|
|
<Input
|
|
label="Priority"
|
|
type="number"
|
|
value={formData.priority}
|
|
onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) || 1 })}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button onClick={handleSubmit} fullWidth disabled={!formData.name || !formData.apiKey}>
|
|
Save
|
|
</Button>
|
|
<Button onClick={onClose} variant="ghost" fullWidth>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
priority: 1,
|
|
});
|
|
const [testing, setTesting] = useState(false);
|
|
const [testResult, setTestResult] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (connection) {
|
|
setFormData({
|
|
name: connection.name || "",
|
|
priority: connection.priority || 1,
|
|
});
|
|
setTestResult(null);
|
|
}
|
|
}, [connection]);
|
|
|
|
const handleTest = async () => {
|
|
if (!connection?.provider) return;
|
|
setTesting(true);
|
|
setTestResult(null);
|
|
try {
|
|
const res = await fetch(`/api/providers/${connection.id}/test`, { method: "POST" });
|
|
const data = await res.json();
|
|
setTestResult(data.valid ? "success" : "failed");
|
|
if (data.valid) {
|
|
onSave({ testStatus: "active", lastError: null, lastErrorAt: null });
|
|
} else {
|
|
onSave({ testStatus: "error", lastError: data.error, lastErrorAt: new Date().toISOString() });
|
|
}
|
|
} catch {
|
|
setTestResult("failed");
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
const updates = { name: formData.name, priority: formData.priority };
|
|
onSave(updates);
|
|
};
|
|
|
|
if (!connection) return null;
|
|
|
|
const isOAuth = connection.authType === "oauth";
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} title="Edit Connection" onClose={onClose}>
|
|
<div className="flex flex-col gap-4">
|
|
<Input
|
|
label="Name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder={isOAuth ? "Account name" : "Production Key"}
|
|
/>
|
|
{isOAuth && connection.email && (
|
|
<div className="bg-sidebar/50 p-3 rounded-lg">
|
|
<p className="text-sm text-text-muted mb-1">Email</p>
|
|
<p className="font-medium">{connection.email}</p>
|
|
</div>
|
|
)}
|
|
<Input
|
|
label="Priority"
|
|
type="number"
|
|
value={formData.priority}
|
|
onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) || 1 })}
|
|
/>
|
|
|
|
{/* Test Connection */}
|
|
<div className="flex items-center gap-3">
|
|
<Button onClick={handleTest} variant="secondary" disabled={testing}>
|
|
{testing ? "Testing..." : "Test Connection"}
|
|
</Button>
|
|
{testResult && (
|
|
<Badge variant={testResult === "success" ? "success" : "error"}>
|
|
{testResult === "success" ? "Valid" : "Failed"}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button onClick={handleSubmit} fullWidth>Save</Button>
|
|
<Button onClick={onClose} variant="ghost" fullWidth>Cancel</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|