mirror of
https://github.com/Nezumi-2711/9router-config-generate.git
synced 2026-09-22 13:38:32 +00:00
fix: remove default value
This commit is contained in:
+145
-141
@@ -1,161 +1,165 @@
|
|||||||
import { useState, useMemo, useEffect, useCallback } from 'react'
|
import { useState, useMemo, useCallback } from 'react';
|
||||||
import type { ToolId, ConnectionConfig, Model } from './types'
|
import type { ToolId, ConnectionConfig, Model } from './types';
|
||||||
import { mockModels } from './data/mockModels'
|
import { mockModels } from './data/mockModels';
|
||||||
import { tools, toolList } from './data/tools'
|
import { tools, toolList } from './data/tools';
|
||||||
import { Header } from './components/Header'
|
import { Header } from './components/Header';
|
||||||
import { ConnectionForm } from './components/ConnectionForm'
|
import { ConnectionForm } from './components/ConnectionForm';
|
||||||
import { ModelList } from './components/ModelList'
|
import { ModelList } from './components/ModelList';
|
||||||
import { ToolSelector } from './components/ToolSelector'
|
import { ToolSelector } from './components/ToolSelector';
|
||||||
import { ConfigPreview } from './components/ConfigPreview'
|
import { ConfigPreview } from './components/ConfigPreview';
|
||||||
import { fetchRemoteModels } from './services/modelService'
|
import { fetchRemoteModels } from './services/modelService';
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const [connection, setConnection] = useState<ConnectionConfig>({
|
const [connection, setConnection] = useState<ConnectionConfig>({
|
||||||
baseUrl: 'https://9router.nezumi.pw/v1',
|
baseUrl: '',
|
||||||
apiKey: 'sk-caa6204550dbdba8-h1x4oy-4f464660',
|
apiKey: '',
|
||||||
})
|
});
|
||||||
|
|
||||||
const [models, setModels] = useState<Model[]>(mockModels)
|
const [models, setModels] = useState<Model[]>(mockModels);
|
||||||
const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
|
const [selectedModelIds, setSelectedModelIds] = useState<string[]>([]);
|
||||||
const [selectedToolId, setSelectedToolId] = useState<ToolId>('copilot')
|
const [selectedToolId, setSelectedToolId] = useState<ToolId>('copilot');
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [isLoadingModels, setIsLoadingModels] = useState(false)
|
const [isLoadingModels, setIsLoadingModels] = useState(false);
|
||||||
const [fetchError, setFetchError] = useState<string | null>(null)
|
const [fetchError, setFetchError] = useState<string | null>(null);
|
||||||
const [isLive, setIsLive] = useState(false)
|
const [isLive, setIsLive] = useState(false);
|
||||||
|
|
||||||
const handleFetchModels = useCallback(
|
const handleFetchModels = useCallback(
|
||||||
async (overrideConfig?: ConnectionConfig) => {
|
async (overrideConfig?: ConnectionConfig) => {
|
||||||
const cfg = overrideConfig || connection
|
const cfg = overrideConfig || connection;
|
||||||
if (!cfg.baseUrl) return
|
if (!cfg.baseUrl || !cfg.baseUrl.trim()) {
|
||||||
|
setFetchError('Please enter a valid Base URL');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setIsLoadingModels(true)
|
setIsLoadingModels(true);
|
||||||
setFetchError(null)
|
setFetchError(null);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const fetched = await fetchRemoteModels(cfg)
|
const fetched = await fetchRemoteModels(cfg);
|
||||||
if (fetched.length > 0) {
|
if (fetched.length > 0) {
|
||||||
setModels(fetched)
|
setModels(fetched);
|
||||||
setIsLive(true)
|
setIsLive(true);
|
||||||
// Default select the first 2-3 models if nothing selected or preserve existing matching IDs
|
// Default select the first 2-3 models if nothing selected or preserve existing matching IDs
|
||||||
setSelectedModelIds((prev) => {
|
setSelectedModelIds((prev) => {
|
||||||
const validPrev = prev.filter((id) => fetched.some((m) => m.id === id))
|
const validPrev = prev.filter((id) =>
|
||||||
if (validPrev.length > 0) return validPrev
|
fetched.some((m) => m.id === id),
|
||||||
return fetched.slice(0, Math.min(3, fetched.length)).map((m) => m.id)
|
);
|
||||||
})
|
if (validPrev.length > 0) return validPrev;
|
||||||
}
|
return fetched
|
||||||
} catch (err: unknown) {
|
.slice(0, Math.min(3, fetched.length))
|
||||||
const message = err instanceof Error ? err.message : 'Unknown error'
|
.map((m) => m.id);
|
||||||
setFetchError(message)
|
});
|
||||||
} finally {
|
}
|
||||||
setIsLoadingModels(false)
|
} catch (err: unknown) {
|
||||||
}
|
const message = err instanceof Error ? err.message : 'Unknown error';
|
||||||
},
|
setFetchError(message);
|
||||||
[connection]
|
} finally {
|
||||||
)
|
setIsLoadingModels(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[connection],
|
||||||
|
);
|
||||||
|
|
||||||
// Auto-fetch initial models on mount if valid baseUrl exists
|
const handleToggleModel = (id: string) => {
|
||||||
useEffect(() => {
|
setSelectedModelIds((prev) =>
|
||||||
handleFetchModels()
|
prev.includes(id) ? prev.filter((mId) => mId !== id) : [...prev, id],
|
||||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const handleToggleModel = (id: string) => {
|
const handleSelectAll = () => {
|
||||||
setSelectedModelIds((prev) =>
|
const q = searchQuery.toLowerCase().trim();
|
||||||
prev.includes(id) ? prev.filter((mId) => mId !== id) : [...prev, id]
|
const visibleIds = models
|
||||||
)
|
.filter(
|
||||||
}
|
(m) =>
|
||||||
|
!q ||
|
||||||
|
m.id.toLowerCase().includes(q) ||
|
||||||
|
m.name.toLowerCase().includes(q) ||
|
||||||
|
(m.provider && m.provider.toLowerCase().includes(q)) ||
|
||||||
|
(m.description && m.description.toLowerCase().includes(q)),
|
||||||
|
)
|
||||||
|
.map((m) => m.id);
|
||||||
|
|
||||||
const handleSelectAll = () => {
|
setSelectedModelIds((prev) =>
|
||||||
const q = searchQuery.toLowerCase().trim()
|
Array.from(new Set([...prev, ...visibleIds])),
|
||||||
const visibleIds = models
|
);
|
||||||
.filter(
|
};
|
||||||
(m) =>
|
|
||||||
!q ||
|
|
||||||
m.id.toLowerCase().includes(q) ||
|
|
||||||
m.name.toLowerCase().includes(q) ||
|
|
||||||
(m.provider && m.provider.toLowerCase().includes(q)) ||
|
|
||||||
(m.description && m.description.toLowerCase().includes(q))
|
|
||||||
)
|
|
||||||
.map((m) => m.id)
|
|
||||||
|
|
||||||
setSelectedModelIds((prev) => Array.from(new Set([...prev, ...visibleIds])))
|
const handleDeselectAll = () => {
|
||||||
}
|
const q = searchQuery.toLowerCase().trim();
|
||||||
|
const visibleIds = new Set(
|
||||||
|
models
|
||||||
|
.filter(
|
||||||
|
(m) =>
|
||||||
|
!q ||
|
||||||
|
m.id.toLowerCase().includes(q) ||
|
||||||
|
m.name.toLowerCase().includes(q) ||
|
||||||
|
(m.provider && m.provider.toLowerCase().includes(q)) ||
|
||||||
|
(m.description && m.description.toLowerCase().includes(q)),
|
||||||
|
)
|
||||||
|
.map((m) => m.id),
|
||||||
|
);
|
||||||
|
|
||||||
const handleDeselectAll = () => {
|
setSelectedModelIds((prev) => prev.filter((id) => !visibleIds.has(id)));
|
||||||
const q = searchQuery.toLowerCase().trim()
|
};
|
||||||
const visibleIds = new Set(
|
|
||||||
models
|
|
||||||
.filter(
|
|
||||||
(m) =>
|
|
||||||
!q ||
|
|
||||||
m.id.toLowerCase().includes(q) ||
|
|
||||||
m.name.toLowerCase().includes(q) ||
|
|
||||||
(m.provider && m.provider.toLowerCase().includes(q)) ||
|
|
||||||
(m.description && m.description.toLowerCase().includes(q))
|
|
||||||
)
|
|
||||||
.map((m) => m.id)
|
|
||||||
)
|
|
||||||
|
|
||||||
setSelectedModelIds((prev) => prev.filter((id) => !visibleIds.has(id)))
|
const selectedModels = useMemo(() => {
|
||||||
}
|
return models.filter((m) => selectedModelIds.includes(m.id));
|
||||||
|
}, [models, selectedModelIds]);
|
||||||
|
|
||||||
const selectedModels = useMemo(() => {
|
const activeTool = tools[selectedToolId] || tools.copilot;
|
||||||
return models.filter((m) => selectedModelIds.includes(m.id))
|
|
||||||
}, [models, selectedModelIds])
|
|
||||||
|
|
||||||
const activeTool = tools[selectedToolId] || tools.copilot
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-(--app-bg) text-(--app-fg)">
|
||||||
|
<Header />
|
||||||
|
|
||||||
return (
|
<main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
||||||
<div className="min-h-screen flex flex-col bg-[var(--app-bg)] text-[var(--app-fg)]">
|
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,540px)] gap-6 items-start">
|
||||||
<Header />
|
{/* Left Controls Pane */}
|
||||||
|
<div className="flex flex-col gap-6 min-w-0">
|
||||||
|
<ConnectionForm
|
||||||
|
connection={connection}
|
||||||
|
onChange={(newConn) => {
|
||||||
|
setConnection(newConn);
|
||||||
|
setFetchError(null);
|
||||||
|
}}
|
||||||
|
onFetchModels={() => handleFetchModels()}
|
||||||
|
isLoading={isLoadingModels}
|
||||||
|
error={fetchError}
|
||||||
|
modelsCount={models.length}
|
||||||
|
isLive={isLive}
|
||||||
|
/>
|
||||||
|
|
||||||
<main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
<ModelList
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,540px)] gap-6 items-start">
|
models={models}
|
||||||
{/* Left Controls Pane */}
|
selectedIds={selectedModelIds}
|
||||||
<div className="flex flex-col gap-6 min-w-0">
|
searchQuery={searchQuery}
|
||||||
<ConnectionForm
|
onSearchChange={setSearchQuery}
|
||||||
connection={connection}
|
onToggleModel={handleToggleModel}
|
||||||
onChange={(newConn) => {
|
onSelectAll={handleSelectAll}
|
||||||
setConnection(newConn)
|
onDeselectAll={handleDeselectAll}
|
||||||
setFetchError(null)
|
isLoading={isLoadingModels}
|
||||||
}}
|
isLive={isLive}
|
||||||
onFetchModels={() => handleFetchModels()}
|
/>
|
||||||
isLoading={isLoadingModels}
|
|
||||||
error={fetchError}
|
|
||||||
modelsCount={models.length}
|
|
||||||
isLive={isLive}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ModelList
|
<ToolSelector
|
||||||
models={models}
|
tools={toolList}
|
||||||
selectedIds={selectedModelIds}
|
selectedTool={selectedToolId}
|
||||||
searchQuery={searchQuery}
|
onSelectTool={setSelectedToolId}
|
||||||
onSearchChange={setSearchQuery}
|
/>
|
||||||
onToggleModel={handleToggleModel}
|
</div>
|
||||||
onSelectAll={handleSelectAll}
|
|
||||||
onDeselectAll={handleDeselectAll}
|
|
||||||
isLoading={isLoadingModels}
|
|
||||||
isLive={isLive}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ToolSelector
|
{/* Right Sticky Preview Pane */}
|
||||||
tools={toolList}
|
<div>
|
||||||
selectedTool={selectedToolId}
|
<ConfigPreview
|
||||||
onSelectTool={setSelectedToolId}
|
tool={activeTool}
|
||||||
/>
|
connection={connection}
|
||||||
</div>
|
selectedModels={selectedModels}
|
||||||
|
/>
|
||||||
{/* Right Sticky Preview Pane */}
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<ConfigPreview
|
</main>
|
||||||
tool={activeTool}
|
</div>
|
||||||
connection={connection}
|
);
|
||||||
selectedModels={selectedModels}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|||||||
Reference in New Issue
Block a user