Bart/9router
1
0
Fork 0
mirror of https://github.com/decolua/9router.git synced 2026-05-08 12:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix bug select model

Browse Source
This commit is contained in:
decolua
2026-01-21 11:45:19 +07:00
parent 7058b062e7
commit a01526642c
5 changed files with 124 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/(dashboard)/dashboard/cli-tools/CLIToolsPageClient.js
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { Card, CardSkeleton } from "@/shared/components";
import { CLI_TOOLS } from "@/shared/constants/cliTools";
import { PROVIDER_MODELS, getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
@@ -107,15 +107,21 @@ export default function CLIToolsPageClient({ machineId }) {
return models;
};
const handleModelMappingChange = (toolId, modelAlias, targetModel) => {
setModelMappings(prev => ({
...prev,
[toolId]: {
...prev[toolId],
[modelAlias]: targetModel,
},
}));
};
const handleModelMappingChange = useCallback((toolId, modelAlias, targetModel) => {
setModelMappings(prev => {
// Prevent unnecessary updates if value hasn't changed
if (prev[toolId]?.[modelAlias] === targetModel) {
return prev;
}
return {
...prev,
[toolId]: {
...prev[toolId],
[modelAlias]: targetModel,
},
};
});
}, []);
const getBaseUrl = () => {
if (cloudEnabled && CLOUD_URL) {

72
src/app/(dashboard)/dashboard/cli-tools/components/ClaudeToolCard.js
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
import Image from "next/image";
@@ -29,6 +29,8 @@ export default function ClaudeToolCard({
const [selectedApiKey, setSelectedApiKey] = useState("");
const [modelAliases, setModelAliases] = useState({});
const [showManualConfigModal, setShowManualConfigModal] = useState(false);
const [customBaseUrl, setCustomBaseUrl] = useState("");
const hasInitializedModels = useRef(false);
const getConfigStatus = () => {
if (!claudeStatus?.installed) return null;
@@ -66,12 +68,17 @@ export default function ClaudeToolCard({
};
useEffect(() => {
if (claudeStatus?.installed) {
if (claudeStatus?.installed && !hasInitializedModels.current) {
hasInitializedModels.current = true;
const env = claudeStatus.settings?.env || {};
tool.defaultModels.forEach((model) => {
if (model.envKey) {
const value = env[model.envKey] || model.defaultValue || "";
if (value) onModelMappingChange(model.alias, value);
// Only sync initial values from file once
if (value) {
onModelMappingChange(model.alias, value);
}
}
});
// Only set selectedApiKey if it exists in apiKeys list
@@ -95,11 +102,13 @@ export default function ClaudeToolCard({
}
};
const getEffectiveBaseUrl = () => customBaseUrl || baseUrl;
const handleApplySettings = async () => {
setApplying(true);
setMessage(null);
try {
const env = { ANTHROPIC_BASE_URL: baseUrl };
const env = { ANTHROPIC_BASE_URL: getEffectiveBaseUrl() };
// Get key from dropdown, fallback to first key or sk_9router for localhost
const keyToUse = selectedApiKey?.trim()
@@ -167,7 +176,7 @@ export default function ClaudeToolCard({
const keyToUse = (selectedApiKey && selectedApiKey.trim())
? selectedApiKey
: (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
const env = { ANTHROPIC_BASE_URL: baseUrl, ANTHROPIC_AUTH_TOKEN: keyToUse };
const env = { ANTHROPIC_BASE_URL: getEffectiveBaseUrl(), ANTHROPIC_AUTH_TOKEN: keyToUse };
tool.defaultModels.forEach((model) => {
const targetModel = modelMappings[model.alias];
if (targetModel && model.envKey) env[model.envKey] = targetModel;
@@ -240,26 +249,41 @@ export default function ClaudeToolCard({
{!checkingClaude && claudeStatus?.installed && (
<>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-green-500 text-[16px]">check_circle</span>
<span className="text-xs text-text-muted shrink-0">URL:</span>
<code className="text-xs font-mono text-text-main truncate">{baseUrl}</code>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted shrink-0">Key:</span>
{apiKeys.length > 0 ? (
<select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (
<span className="text-xs text-text-muted">
{cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router"}
</span>
)}
</div>
<div className="flex flex-col gap-2">
{/* Base URL */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Base URL</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input
type="text"
value={customBaseUrl || baseUrl}
onChange={(e) => setCustomBaseUrl(e.target.value)}
placeholder="https://..."
className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
/>
{customBaseUrl && customBaseUrl !== baseUrl && (
<button onClick={() => setCustomBaseUrl("")} className="p-1 text-text-muted hover:text-primary rounded transition-colors" title="Reset to default">
<span className="material-symbols-outlined text-[14px]">restart_alt</span>
</button>
)}
</div>
{/* API Key */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
{apiKeys.length > 0 ? (
<select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (
<span className="flex-1 text-xs text-text-muted px-2 py-1.5">
{cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
</span>
)}
</div>
{/* Model Mappings */}
{tool.defaultModels.map((model) => (
<div key={model.alias} className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">{model.name}</span>

78
src/app/(dashboard)/dashboard/cli-tools/components/CodexToolCard.js
View File

@@ -16,6 +16,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
const [modalOpen, setModalOpen] = useState(false);
const [modelAliases, setModelAliases] = useState({});
const [showManualConfigModal, setShowManualConfigModal] = useState(false);
const [customBaseUrl, setCustomBaseUrl] = useState("");
useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) {
@@ -40,7 +41,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
}
};
// Parse model from config content
// Parse model from config content (don't sync URL - always use baseUrl from props)
useEffect(() => {
if (codexStatus?.config) {
const modelMatch = codexStatus.config.match(/^model\s*=\s*"([^"]+)"/m);
@@ -57,6 +58,14 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
const configStatus = getConfigStatus();
const getEffectiveBaseUrl = () => {
const url = customBaseUrl || `${baseUrl}/v1`;
// Ensure URL ends with /v1
return url.endsWith("/v1") ? url : `${url}/v1`;
};
const getDisplayUrl = () => customBaseUrl || `${baseUrl}/v1`;
const checkCodexStatus = async () => {
setCheckingCodex(true);
try {
@@ -82,7 +91,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
const res = await fetch("/api/cli-tools/codex-settings", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ baseUrl, apiKey: keyToUse, model: selectedModel }),
body: JSON.stringify({ baseUrl: getEffectiveBaseUrl(), apiKey: keyToUse, model: selectedModel }),
});
const data = await res.json();
if (res.ok) {
@@ -134,7 +143,7 @@ model_provider = "9router"
[model_providers.9router]
name = "9Router"
base_url = "${baseUrl}/v1"
base_url = "${getEffectiveBaseUrl()}"
wire_api = "responses"
`;
@@ -219,31 +228,48 @@ wire_api = "responses"
{!checkingCodex && codexStatus?.installed && (
<>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-green-500 text-[16px]">check_circle</span>
<span className="text-xs text-text-muted shrink-0">URL:</span>
<code className="text-xs font-mono text-text-main truncate">{baseUrl}/v1</code>
</div>
<div className="flex flex-col gap-2">
{/* Base URL */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Base URL</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input
type="text"
value={getDisplayUrl()}
onChange={(e) => setCustomBaseUrl(e.target.value)}
placeholder="https://.../v1"
className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
/>
{customBaseUrl && customBaseUrl !== `${baseUrl}/v1` && (
<button onClick={() => setCustomBaseUrl("")} className="p-1 text-text-muted hover:text-primary rounded transition-colors" title="Reset to default">
<span className="material-symbols-outlined text-[14px]">restart_alt</span>
</button>
)}
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted shrink-0">Key:</span>
{apiKeys.length > 0 ? (
<select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (
<span className="text-xs text-text-muted">
{cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router"}
</span>
)}
</div>
{/* API Key */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
{apiKeys.length > 0 ? (
<select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (
<span className="flex-1 text-xs text-text-muted px-2 py-1.5">
{cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
</span>
)}
</div>
<div className="flex items-center gap-2">
<span className="w-16 shrink-0 text-sm font-semibold text-text-main text-right">Model</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="provider/model-id" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" />
<button onClick={() => setModalOpen(true)} disabled={!activeProviders?.length} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select Model</button>
{selectedModel && <button onClick={() => setSelectedModel("")} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
{/* Model */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Model</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="provider/model-id" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" />
<button onClick={() => setModalOpen(true)} disabled={!activeProviders?.length} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select Model</button>
{selectedModel && <button onClick={() => setSelectedModel("")} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
</div>
</div>
{message && (

8
src/app/(dashboard)/dashboard/cli-tools/components/DefaultToolCard.js
View File

@@ -19,8 +19,14 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
? selectedApiKey
: (!cloudEnabled ? "sk_9router" : "your-api-key");
// Add /v1 suffix only if not already present (DRY - avoid duplicate)
const normalizedBaseUrl = baseUrl || "http://localhost:3000";
const baseUrlWithV1 = normalizedBaseUrl.endsWith("/v1")
? normalizedBaseUrl
: `${normalizedBaseUrl}/v1`;
return text
.replace(/\{\{baseUrl\}\}/g, baseUrl || "http://localhost:3000")
.replace(/\{\{baseUrl\}\}/g, baseUrlWithV1)
.replace(/\{\{apiKey\}\}/g, keyToUse)
.replace(/\{\{model\}\}/g, modelValue || "provider/model-id");
};

2
src/shared/constants/cliTools.js
View File

@@ -45,7 +45,7 @@ export const CLI_TOOLS = {
guideSteps: [
{ step: 1, title: "Open Settings", desc: "Go to Settings → Models" },
{ step: 2, title: "Enable OpenAI API", desc: "Enable \"OpenAI API key\" option" },
{ step: 3, title: "Base URL", value: "{{baseUrl}}/v1", copyable: true },
{ step: 3, title: "Base URL", value: "{{baseUrl}}", copyable: true },
{ step: 4, title: "API Key", type: "apiKeySelector" },
{ step: 5, title: "Add Custom Model", desc: "Click \"View All Model\" → \"Add Custom Model\"" },
{ step: 6, title: "Select Model", type: "modelSelector" },