fix: remove default value

src/App.tsx

@@ -1,71 +1,73 @@
-import { useState, useMemo, useEffect, useCallback } from 'react'
-import type { ToolId, ConnectionConfig, Model } from './types'
-import { mockModels } from './data/mockModels'
-import { tools, toolList } from './data/tools'
-import { Header } from './components/Header'
-import { ConnectionForm } from './components/ConnectionForm'
-import { ModelList } from './components/ModelList'
-import { ToolSelector } from './components/ToolSelector'
-import { ConfigPreview } from './components/ConfigPreview'
-import { fetchRemoteModels } from './services/modelService'
+import { useState, useMemo, useCallback } from 'react';
+import type { ToolId, ConnectionConfig, Model } from './types';
+import { mockModels } from './data/mockModels';
+import { tools, toolList } from './data/tools';
+import { Header } from './components/Header';
+import { ConnectionForm } from './components/ConnectionForm';
+import { ModelList } from './components/ModelList';
+import { ToolSelector } from './components/ToolSelector';
+import { ConfigPreview } from './components/ConfigPreview';
+import { fetchRemoteModels } from './services/modelService';
 
 export function App() {
 	const [connection, setConnection] = useState<ConnectionConfig>({
-    baseUrl: 'https://9router.nezumi.pw/v1',
-    apiKey: 'sk-caa6204550dbdba8-h1x4oy-4f464660',
-  })
+		baseUrl: '',
+		apiKey: '',
+	});
 
-  const [models, setModels] = useState<Model[]>(mockModels)
-  const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
-  const [selectedToolId, setSelectedToolId] = useState<ToolId>('copilot')
-  const [searchQuery, setSearchQuery] = useState('')
-  const [isLoadingModels, setIsLoadingModels] = useState(false)
-  const [fetchError, setFetchError] = useState<string | null>(null)
-  const [isLive, setIsLive] = useState(false)
+	const [models, setModels] = useState<Model[]>(mockModels);
+	const [selectedModelIds, setSelectedModelIds] = useState<string[]>([]);
+	const [selectedToolId, setSelectedToolId] = useState<ToolId>('copilot');
+	const [searchQuery, setSearchQuery] = useState('');
+	const [isLoadingModels, setIsLoadingModels] = useState(false);
+	const [fetchError, setFetchError] = useState<string | null>(null);
+	const [isLive, setIsLive] = useState(false);
 
 	const handleFetchModels = useCallback(
 		async (overrideConfig?: ConnectionConfig) => {
-      const cfg = overrideConfig || connection
-      if (!cfg.baseUrl) return
+			const cfg = overrideConfig || connection;
+			if (!cfg.baseUrl || !cfg.baseUrl.trim()) {
+				setFetchError('Please enter a valid Base URL');
+				return;
+			}
 
-      setIsLoadingModels(true)
-      setFetchError(null)
+			setIsLoadingModels(true);
+			setFetchError(null);
 
 			try {
-        const fetched = await fetchRemoteModels(cfg)
+				const fetched = await fetchRemoteModels(cfg);
 				if (fetched.length > 0) {
-          setModels(fetched)
-          setIsLive(true)
+					setModels(fetched);
+					setIsLive(true);
 					// Default select the first 2-3 models if nothing selected or preserve existing matching IDs
 					setSelectedModelIds((prev) => {
-            const validPrev = prev.filter((id) => fetched.some((m) => m.id === id))
-            if (validPrev.length > 0) return validPrev
-            return fetched.slice(0, Math.min(3, fetched.length)).map((m) => m.id)
-          })
+						const validPrev = prev.filter((id) =>
+							fetched.some((m) => m.id === id),
+						);
+						if (validPrev.length > 0) return validPrev;
+						return fetched
+							.slice(0, Math.min(3, fetched.length))
+							.map((m) => m.id);
+					});
 				}
 			} catch (err: unknown) {
-        const message = err instanceof Error ? err.message : 'Unknown error'
-        setFetchError(message)
+				const message = err instanceof Error ? err.message : 'Unknown error';
+				setFetchError(message);
 			} finally {
-        setIsLoadingModels(false)
+				setIsLoadingModels(false);
 			}
 		},
-    [connection]
-  )
-
-  // Auto-fetch initial models on mount if valid baseUrl exists
-  useEffect(() => {
-    handleFetchModels()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+		[connection],
+	);
 
 	const handleToggleModel = (id: string) => {
 		setSelectedModelIds((prev) =>
-      prev.includes(id) ? prev.filter((mId) => mId !== id) : [...prev, id]
-    )
-  }
+			prev.includes(id) ? prev.filter((mId) => mId !== id) : [...prev, id],
+		);
+	};
 
 	const handleSelectAll = () => {
-    const q = searchQuery.toLowerCase().trim()
+		const q = searchQuery.toLowerCase().trim();
 		const visibleIds = models
 			.filter(
 				(m) =>
@@ -73,15 +75,17 @@ export function App() {
 					m.id.toLowerCase().includes(q) ||
 					m.name.toLowerCase().includes(q) ||
 					(m.provider && m.provider.toLowerCase().includes(q)) ||
-          (m.description && m.description.toLowerCase().includes(q))
+					(m.description && m.description.toLowerCase().includes(q)),
 			)
-      .map((m) => m.id)
+			.map((m) => m.id);
 
-    setSelectedModelIds((prev) => Array.from(new Set([...prev, ...visibleIds])))
-  }
+		setSelectedModelIds((prev) =>
+			Array.from(new Set([...prev, ...visibleIds])),
+		);
+	};
 
 	const handleDeselectAll = () => {
-    const q = searchQuery.toLowerCase().trim()
+		const q = searchQuery.toLowerCase().trim();
 		const visibleIds = new Set(
 			models
 				.filter(
@@ -90,22 +94,22 @@ export function App() {
 						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)
+						(m.description && m.description.toLowerCase().includes(q)),
 				)
+				.map((m) => m.id),
+		);
 
-    setSelectedModelIds((prev) => prev.filter((id) => !visibleIds.has(id)))
-  }
+		setSelectedModelIds((prev) => prev.filter((id) => !visibleIds.has(id)));
+	};
 
 	const selectedModels = useMemo(() => {
-    return models.filter((m) => selectedModelIds.includes(m.id))
-  }, [models, selectedModelIds])
+		return models.filter((m) => selectedModelIds.includes(m.id));
+	}, [models, selectedModelIds]);
 
-  const activeTool = tools[selectedToolId] || tools.copilot
+	const activeTool = tools[selectedToolId] || tools.copilot;
 
 	return (
-    <div className="min-h-screen flex flex-col bg-[var(--app-bg)] text-[var(--app-fg)]">
+		<div className="min-h-screen flex flex-col bg-(--app-bg) text-(--app-fg)">
 			<Header />
 
 			<main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
@@ -115,8 +119,8 @@ export function App() {
 						<ConnectionForm
 							connection={connection}
 							onChange={(newConn) => {
-                setConnection(newConn)
-                setFetchError(null)
+								setConnection(newConn);
+								setFetchError(null);
 							}}
 							onFetchModels={() => handleFetchModels()}
 							isLoading={isLoadingModels}
@@ -155,7 +159,7 @@ export function App() {
 				</div>
 			</main>
 		</div>
-  )
+	);
 }
 
-export default App
+export default App;