fix: REST API & OpenAI setting component and fetch model list API

anpigon · May 25, 2024 · d40e854 · d40e854
1 parent b20fcf9
commit d40e854
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 48 deletions.
diff --git a/src/apis/fetch-model-list.ts b/src/apis/fetch-model-list.ts
@@ -51,16 +51,16 @@ export async function requestOpenAIModels({baseUrl, apiKey}: ProviderSettings) {
 	const models = await openai.models.list();
 	return models.data
 		.map((model: {id: string}) => model.id)
-		.filter((model: string) => model.startsWith('gpt-') && !model.endsWith('-preview') && !excludeModels.includes(model)).sort();
+		.filter((model: string) => model.startsWith('gpt-') && !model.endsWith('-preview') && !excludeModels.includes(model))
+		.sort();
 }
 
 export async function fetchRestApiModels({baseUrl, apiKey}: ProviderSettings) {
 	// URL Validation
 	try {
 		new URL(baseUrl);
 	} catch (error) {
-		console.error('Invalid REST API URL:', baseUrl);
-		return [];
+		throw new Error('Invalid REST API URL: ' + baseUrl);
 	}
 
 	const jsonData = await requestJson(`${baseUrl}/models`, {

diff --git a/src/constants.ts b/src/constants.ts
@@ -111,7 +111,7 @@ export const DEFAULT_SETTINGS: MAXSettings = {
 		[LLM_PROVIDERS.REST_API]: {
 			enable: false,
 			apiKey: '',
-			baseUrl: '',
+			baseUrl: 'http://localhost:8000/v1',
 			allowStream: false,
 			models: [],
 		},

diff --git a/src/features/setting/components/open-ai-setting.tsx b/src/features/setting/components/open-ai-setting.tsx
@@ -2,34 +2,30 @@ import {requestOpenAIModels} from '@/apis/fetch-model-list';
 import {Toggle} from '@/components/form/toggle';
 import {Icon} from '@/components/icons/icon';
 import {SettingItem} from '@/components/settings/setting-item';
-import {usePlugin} from '@/hooks/useApp';
+import {usePlugin, useSettings} from '@/hooks/useApp';
 import Logger from '@/utils/logging';
 import clsx from 'clsx';
 import {useEffect, useState} from 'react';
 import {Trans, useTranslation} from 'react-i18next';
 import {twMerge} from 'tailwind-merge';
 
 export const OpenAiSetting = () => {
-	const plugin = usePlugin()!;
-	const settings = plugin.settings!;
-	const providerSettings = settings.providers.OPEN_AI;
 	const {t} = useTranslation('settings');
 
+	const plugin = usePlugin();
+	const settings = useSettings();
+	const providerSettings = settings.providers.OPEN_AI;
+
+	const [error, setError] = useState('');
 	const [isLoading, setIsLoading] = useState(false);
 	const [isConnected, setIsConnected] = useState(false);
-	const [error, setError] = useState('');
 	const [enable, setEnable] = useState(providerSettings?.enable ?? false);
+	const [baseUrl, setBaseUrl] = useState(providerSettings?.baseUrl ?? '');
+	const [apiKey, setApiKey] = useState(providerSettings?.apiKey ?? '');
 	const [allowStream, setAllowStream] = useState(providerSettings?.allowStream);
 
-	const handleChangeAllowStream: React.ChangeEventHandler<HTMLInputElement> = event => {
-		const value = event.target.checked;
-		setAllowStream(value);
-		providerSettings.allowStream = value;
-		plugin!.saveSettings();
-	};
-
 	const loadModels = async () => {
-		if (!providerSettings.baseUrl) {
+		if (!baseUrl) {
 			setError('Please enter a valid URL');
 			setIsConnected(false);
 			return;
@@ -39,7 +35,12 @@ export const OpenAiSetting = () => {
 		setIsLoading(true);
 
 		try {
-			const models = await requestOpenAIModels(providerSettings);
+			const models = await requestOpenAIModels({
+				...providerSettings,
+				baseUrl,
+				apiKey,
+				allowStream,
+			});
 			Logger.info(models);
 			setIsConnected(true);
 			providerSettings.models = models;
@@ -55,7 +56,7 @@ export const OpenAiSetting = () => {
 	};
 
 	useEffect(() => {
-		if (enable && providerSettings.baseUrl && providerSettings.apiKey) loadModels();
+		if (enable && baseUrl && apiKey) loadModels();
 	}, [enable]);
 
 	return (
@@ -78,9 +79,10 @@ export const OpenAiSetting = () => {
 						type="password"
 						spellCheck={false}
 						placeholder="sk-aOO-...Cvll"
-						defaultValue={providerSettings?.apiKey}
+						defaultValue={apiKey}
 						onChange={event => {
 							const value = event.target.value?.trim();
+							setApiKey(value);
 							providerSettings.apiKey = value;
 							plugin.saveSettings();
 						}}
@@ -118,11 +120,17 @@ export const OpenAiSetting = () => {
 					</button>
 				</SettingItem>
 
-				<SettingItem
-					name={t('Allow Stream')}
-					description={t('Allow the model to stream responses.', {name: 'OpenAI'})}
-				>
-					<Toggle name="allowStream" checked={allowStream} onChange={handleChangeAllowStream} />
+				<SettingItem name={t('Allow Stream')} description={t('Allow the model to stream responses.', {name: 'OpenAI'})}>
+					<Toggle
+						name="allowStream"
+						checked={allowStream}
+						onChange={event => {
+							const value = event.target.checked;
+							setAllowStream(value);
+							providerSettings.allowStream = value;
+							plugin!.saveSettings();
+						}}
+					/>
 				</SettingItem>
 			</div>
 		</>

diff --git a/src/features/setting/components/rest-api-setting.tsx b/src/features/setting/components/rest-api-setting.tsx
@@ -3,34 +3,30 @@ import {Toggle} from '@/components/form/toggle';
 import {Icon} from '@/components/icons/icon';
 import {SettingItem} from '@/components/settings/setting-item';
 import {DEFAULT_SETTINGS} from '@/constants';
-import {usePlugin} from '@/hooks/useApp';
+import {usePlugin, useSettings} from '@/hooks/useApp';
 import Logger from '@/utils/logging';
 import clsx from 'clsx';
 import {useEffect, useState} from 'react';
 import {Trans, useTranslation} from 'react-i18next';
 import {twMerge} from 'tailwind-merge';
 
 export const RestApiSetting = () => {
-	const plugin = usePlugin()!;
-	const settings = plugin.settings!;
-	const providerSettings = settings.providers.REST_API;
 	const {t} = useTranslation('settings');
 
+	const plugin = usePlugin();
+	const settings = useSettings();
+	const providerSettings = settings.providers.REST_API;
+
+	const [error, setError] = useState('');
 	const [isLoading, setIsLoading] = useState(false);
 	const [isConnected, setIsConnected] = useState(false);
-	const [error, setError] = useState('');
 	const [enable, setEnable] = useState(providerSettings?.enable ?? false);
+	const [baseUrl, setBaseUrl] = useState(providerSettings?.baseUrl ?? '');
+	const [apiKey, setApiKey] = useState(providerSettings?.apiKey ?? '');
 	const [allowStream, setAllowStream] = useState(providerSettings?.allowStream);
 
-	const handleChangeAllowStream: React.ChangeEventHandler<HTMLInputElement> = event => {
-		const value = event.target.checked;
-		setAllowStream(value);
-		providerSettings.allowStream = value;
-		plugin!.saveSettings();
-	};
-
 	const loadModels = async () => {
-		if (!providerSettings.baseUrl) {
+		if (!baseUrl) {
 			setError('Please enter a valid URL');
 			setIsConnected(false);
 			return;
@@ -40,7 +36,13 @@ export const RestApiSetting = () => {
 		setIsLoading(true);
 
 		try {
-			const models = await fetchRestApiModels(providerSettings);
+			const models = await fetchRestApiModels({
+				...providerSettings,
+				baseUrl,
+				apiKey,
+				allowStream,
+			});
+			Logger.info(models);
 			setIsConnected(true);
 			providerSettings.models = models;
 			plugin.saveSettings();
@@ -55,7 +57,7 @@ export const RestApiSetting = () => {
 	};
 
 	useEffect(() => {
-		if (enable && providerSettings.baseUrl) loadModels();
+		if (enable && baseUrl) loadModels();
 	}, [enable]);
 
 	return (
@@ -77,10 +79,11 @@ export const RestApiSetting = () => {
 					<input
 						type="text"
 						spellCheck={false}
-						defaultValue={providerSettings?.baseUrl}
-						placeholder={DEFAULT_SETTINGS.providers.LM_STUDIO.baseUrl}
+						defaultValue={baseUrl}
+						placeholder={DEFAULT_SETTINGS.providers.REST_API.baseUrl}
 						onChange={event => {
 							const value = event.target.value?.trim();
+							setBaseUrl(value);
 							providerSettings.baseUrl = value;
 							plugin.saveSettings();
 						}}
@@ -92,9 +95,10 @@ export const RestApiSetting = () => {
 						type="password"
 						spellCheck={false}
 						placeholder="insert-api-key-here"
-						defaultValue={providerSettings?.apiKey}
+						defaultValue={apiKey}
 						onChange={event => {
 							const value = event.target.value?.trim();
+							setApiKey(value);
 							providerSettings.apiKey = value;
 							plugin.saveSettings();
 						}}
@@ -132,11 +136,17 @@ export const RestApiSetting = () => {
 					</button>
 				</SettingItem>
 
-				<SettingItem
-					name={t('Allow Stream')}
-					description={t('Allow the model to stream responses.', {name: 'REST API'})}
-				>
-					<Toggle name="allowStream" checked={allowStream} onChange={handleChangeAllowStream} />
+				<SettingItem name={t('Allow Stream')} description={t('Allow the model to stream responses.', {name: 'REST API'})}>
+					<Toggle
+						name="allowStream"
+						checked={allowStream}
+						onChange={event => {
+							const value = event.target.checked;
+							setAllowStream(value);
+							providerSettings.allowStream = value;
+							plugin.saveSettings();
+						}}
+					/>
 				</SettingItem>
 			</div>
 		</>