simple model config

2025-02-17 13:06:22 +08:00
parent bf29a42baa
commit 025dc85c59
34 changed files with 12098 additions and 708 deletions
--- a/src/settings/CustomSettings.tsx
+++ b/src/settings/CustomSettings.tsx
@@ -3,7 +3,8 @@ import React from "react";
 import InfioPlugin from "../main";
 import { InfioSettings } from "../types/settings";

-import ModelsSettings from "./ModelsSettings";
+// import ModelsSettings from "./ModelsSettings";
+import ProviderSettings from "./ProviderSettings";

 type CustomSettingsProps = {
 	plugin: InfioPlugin;
@@ -14,16 +15,18 @@ const CustomSettings: React.FC<CustomSettingsProps> = ({ plugin }) => {

 	const handleSettingsUpdate = async (newSettings: InfioSettings) => {
 		await plugin.setSettings(newSettings);
+		// Force refresh the settings page to update dropdowns
+		plugin.settingTab.display();
 	};

 	return (
 		<div>
-			<h1 style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+			<h1 className="infio-llm-setting-title">
 				<div>
 					Infio Settings <small>v{settings.version}</small>
 				</div>
 			</h1>
-			<ModelsSettings settings={settings} setSettings={handleSettingsUpdate} />
+			<ProviderSettings settings={settings} setSettings={handleSettingsUpdate} />
 		</div>
 	);
 };
--- a/src/settings/FormComponents.tsx
+++ b/src/settings/FormComponents.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";

 export type DropdownComponentProps = {
 	name: string;
@@ -21,7 +21,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
 		<select
 			value={value}
 			onChange={(e) => onChange(e.target.value)}
-			className="infio-llm-setting-item-control"
+			className="infio-llm-setting-item-control, infio-llm-setting-model-id"
 		>
 			{options.map((option) => (
 				<option key={option} value={option}>
@@ -33,7 +33,7 @@ export const DropdownComponent: React.FC<DropdownComponentProps> = ({
 );

 export type TextComponentProps = {
-	name: string;
+	name?: string;
 	description?: string;
 	placeholder: string;
 	value: string;
@@ -48,23 +48,49 @@ export const TextComponent: React.FC<TextComponentProps> = ({
 	value,
 	type = "text",
 	onChange,
-}) => (
-	<div className="infio-llm-setting-item">
-		<div className="infio-llm-setting-item-name">{name}</div>
-		{description && <div className="infio-llm-setting-item-description">{description}</div>}
-		<input
-			type={type}
-			className="infio-llm-setting-item-control"
-			placeholder={placeholder}
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-		/>
-	</div>
-);
+}) => {
+	const [localValue, setLocalValue] = useState(value);
+
+	// Update local value when prop value changes (e.g., provider change)
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setLocalValue(e.target.value);
+	};
+
+	const handleBlur = () => {
+		if (localValue !== value) {
+			onChange(localValue);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Enter') {
+			e.currentTarget.blur();
+		}
+	};
+
+	return (
+		<div className="infio-llm-setting-item">
+			<div className="infio-llm-setting-item-name">{name}</div>
+			{description && <div className="infio-llm-setting-item-description">{description}</div>}
+			<input
+				type={type}
+				className="infio-llm-setting-item-control"
+				placeholder={placeholder}
+				value={localValue}
+				onChange={handleChange}
+				onBlur={handleBlur}
+				onKeyDown={handleKeyDown}
+			/>
+		</div>
+	);
+};

 export type ToggleComponentProps = {
-	name?: string;
-	description?: string;
+	name: string;
 	value: boolean;
 	onChange: (value: boolean) => void;
 	disabled?: boolean;
@@ -72,14 +98,11 @@ export type ToggleComponentProps = {

 export const ToggleComponent: React.FC<ToggleComponentProps> = ({
 	name,
-	description,
 	value,
 	onChange,
 	disabled = false,
 }) => (
 	<div className="infio-llm-setting-item">
-		{name && <div className="infio-llm-setting-item-name">{name}</div>}
-		{description && <div className="infio-llm-setting-item-description">{description}</div>}
 		<label className={`switch ${disabled ? "disabled" : ""}`}>
 			<input
 				type="checkbox"
@@ -87,7 +110,7 @@ export const ToggleComponent: React.FC<ToggleComponentProps> = ({
 				onChange={(e) => onChange(e.target.checked)}
 				disabled={disabled}
 			/>
-			<span className="slider round"></span>
+			<span className="infio-llm-setting-checkbox-name">{name}</span>
 		</label>
 	</div>
 );
--- a/src/settings/ProviderModelsPicker.tsx
+++ b/src/settings/ProviderModelsPicker.tsx
@@ -0,0 +1,314 @@
+import * as Popover from "@radix-ui/react-popover";
+import Fuse, { FuseResult } from "fuse.js";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import { ApiProvider } from "../types/llm/model";
+// import { PROVIDERS } from '../constants';
+import { GetAllProviders, GetEmbeddingProviderModelIds, GetEmbeddingProviders, GetProviderModelIds } from "../utils/api";
+
+type TextSegment = {
+	text: string;
+	isHighlighted: boolean;
+};
+
+type SearchableItem = {
+	id: string;
+	html: string | TextSegment[];
+};
+
+type HighlightedItem = {
+	id: string;
+	html: TextSegment[];
+};
+
+// Type guard for Record<string, unknown>
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null;
+}
+
+// https://gist.github.com/evenfrost/1ba123656ded32fb7a0cd4651efd4db0
+export const highlight = (fuseSearchResult: FuseResult<SearchableItem>[]): HighlightedItem[] => {
+	const set = (obj: Record<string, unknown>, path: string, value: TextSegment[]): void => {
+		const pathValue = path.split(".")
+		let i: number
+		let current = obj
+
+		for (i = 0; i < pathValue.length - 1; i++) {
+			const nextValue = current[pathValue[i]]
+			if (isRecord(nextValue)) {
+				current = nextValue
+			} else {
+				throw new Error(`Invalid path: ${path}`)
+			}
+		}
+
+		current[pathValue[i]] = value
+	}
+
+	// Function to merge overlapping regions
+	const mergeRegions = (regions: [number, number][]): [number, number][] => {
+		if (regions.length === 0) return regions
+
+		// Sort regions by start index
+		regions.sort((a, b) => a[0] - b[0])
+
+		const merged: [number, number][] = [regions[0]]
+
+		for (let i = 1; i < regions.length; i++) {
+			const last = merged[merged.length - 1]
+			const current = regions[i]
+
+			if (current[0] <= last[1] + 1) {
+				// Overlapping or adjacent regions
+				last[1] = Math.max(last[1], current[1])
+			} else {
+				merged.push(current)
+			}
+		}
+
+		return merged
+	}
+
+	const generateHighlightedSegments = (inputText: string, regions: [number, number][] = []): TextSegment[] => {
+		if (regions.length === 0) {
+			return [{ text: inputText, isHighlighted: false }];
+		}
+
+		// Sort and merge overlapping regions
+		const mergedRegions = mergeRegions(regions);
+		const segments: TextSegment[] = [];
+		let nextUnhighlightedRegionStartingIndex = 0;
+
+		mergedRegions.forEach((region) => {
+			const start = region[0];
+			const end = region[1];
+			const lastRegionNextIndex = end + 1;
+
+			// Add unhighlighted segment before the highlight
+			if (nextUnhighlightedRegionStartingIndex < start) {
+				segments.push({
+					text: inputText.substring(nextUnhighlightedRegionStartingIndex, start),
+					isHighlighted: false,
+				});
+			}
+
+			// Add highlighted segment
+			segments.push({
+				text: inputText.substring(start, lastRegionNextIndex),
+				isHighlighted: true,
+			});
+
+			nextUnhighlightedRegionStartingIndex = lastRegionNextIndex;
+		});
+
+		// Add remaining unhighlighted text
+		if (nextUnhighlightedRegionStartingIndex < inputText.length) {
+			segments.push({
+				text: inputText.substring(nextUnhighlightedRegionStartingIndex),
+				isHighlighted: false,
+			});
+		}
+
+		return segments;
+	}
+
+	return fuseSearchResult
+		.filter(({ matches }) => matches && matches.length)
+		.map(({ item, matches }): HighlightedItem => {
+			const highlightedItem: HighlightedItem = {
+				id: item.id,
+				html: typeof item.html === 'string' ? [{ text: item.html, isHighlighted: false }] : [...item.html]
+			}
+
+			matches?.forEach((match) => {
+				if (match.key && typeof match.value === "string" && match.indices) {
+					const mergedIndices = mergeRegions([...match.indices])
+					set(highlightedItem, match.key, generateHighlightedSegments(match.value, mergedIndices))
+				}
+			})
+
+			return highlightedItem
+		})
+}
+
+const HighlightedText: React.FC<{ segments: TextSegment[] }> = ({ segments }) => {
+	return (
+		<>
+			{segments.map((segment, index) => (
+				segment.isHighlighted ? (
+					<span key={index} className="infio-llm-setting-model-item-highlight">{segment.text}</span>
+				) : (
+					<span key={index}>{segment.text}</span>
+				)
+			))}
+		</>
+	);
+};
+
+export type ComboBoxComponentProps = {
+	name: string;
+	provider: ApiProvider;
+	modelId: string;
+	isEmbedding?: boolean,
+	updateModel: (provider: ApiProvider, modelId: string) => void;
+};
+
+export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
+	name,
+	provider,
+	modelId,
+	isEmbedding = false,
+	updateModel,
+}) => {
+	// 提供商选择状态
+	const [modelProvider, setModelProvider] = useState(provider);
+
+	// 搜索输入状态
+	const [searchTerm, setSearchTerm] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const providers = isEmbedding ? GetEmbeddingProviders() : GetAllProviders()
+
+	const modelIds = useMemo(() => {
+		return isEmbedding ? GetEmbeddingProviderModelIds(modelProvider) : GetProviderModelIds(modelProvider)
+	}, [modelProvider])
+
+	const searchableItems = useMemo(() => {
+		return modelIds.map((id) => ({
+			id,
+			html: id,
+		}))
+	}, [modelIds])
+
+	// 初始化 fuse，用于模糊搜索，简单配置 threshold 可按需调整
+	const fuse = useMemo(() => {
+		return new Fuse(searchableItems, {
+			keys: ["html"],
+			threshold: 0.6,
+			shouldSort: true,
+			isCaseSensitive: false,
+			ignoreLocation: false,
+			includeMatches: true,
+			minMatchCharLength: 1,
+		})
+	}, [searchableItems])
+
+	// 根据 searchTerm 得到过滤后的数据列表
+	const filteredOptions = useMemo(() => {
+		const results: HighlightedItem[] = searchTerm
+			? highlight(fuse.search(searchTerm))
+			: searchableItems.map(item => ({
+				...item,
+				html: [{ text: item.html, isHighlighted: false }]
+			}))
+		return results
+	}, [searchableItems, searchTerm, fuse])
+
+	const listRef = useRef<HTMLDivElement>(null);
+	const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+	// 当选中项发生变化时，滚动到可视区域内
+	useEffect(() => {
+		if (itemRefs.current[selectedIndex]) {
+			itemRefs.current[selectedIndex]?.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		}
+	}, [selectedIndex]);
+
+	return (
+		<div className="infio-llm-setting-item">
+			<div className="infio-llm-setting-item-name">{name}</div>
+			<Popover.Root modal={false} open={isOpen} onOpenChange={setIsOpen}>
+				<Popover.Trigger asChild>
+					<div className="infio-llm-setting-item-control">
+						<span className="infio-llm-setting-model-id">{modelId}</span>
+					</div>
+				</Popover.Trigger>
+				<Popover.Content
+					side="bottom"
+					align="start"
+					sideOffset={4}
+					className="infio-llm-setting-combobox-dropdown"
+				>
+					<div ref={listRef}>
+						<div className="infio-llm-setting-search-container">
+							<select
+								className="infio-llm-setting-provider-switch"
+								value={modelProvider}
+								onChange={(e) => setModelProvider(e.target.value)}
+							>
+								{providers.map((provider) => (
+									<option
+										key={provider}
+										value={provider}
+										className={`infio-llm-setting-provider-option ${provider === modelProvider ? 'is-active' : ''}`}
+									>
+										{provider}
+									</option>
+								))}
+							</select>
+							<input
+								type="text"
+								className="infio-llm-setting-item-search"
+								placeholder="search model..."
+								value={searchTerm}
+								onChange={(e) => {
+									setSearchTerm(e.target.value);
+									setSelectedIndex(0);
+								}}
+								onKeyDown={(e) => {
+									switch (e.key) {
+										case "ArrowDown":
+											e.preventDefault();
+											setSelectedIndex((prev) =>
+												Math.min(prev + 1, filteredOptions.length - 1)
+											);
+											break;
+										case "ArrowUp":
+											e.preventDefault();
+											setSelectedIndex((prev) => Math.max(prev - 1, 0));
+											break;
+										case "Enter": {
+											e.preventDefault();
+											const selectedOption = filteredOptions[selectedIndex];
+											if (selectedOption) {
+												updateModel(modelProvider, selectedOption.id);
+												setSearchTerm("");
+												setIsOpen(false);
+											}
+											break;
+										}
+										case "Escape":
+											e.preventDefault();
+											setIsOpen(false);
+											setSearchTerm("");
+											break;
+									}
+								}}
+							/>
+						</div>
+						{filteredOptions.map((option, index) => (
+							<Popover.Close key={option.id} asChild>
+								<div
+									ref={(el) => (itemRefs.current[index] = el)}
+									onMouseEnter={() => setSelectedIndex(index)}
+									onClick={() => {
+										updateModel(modelProvider, option.id);
+										setSearchTerm("");
+										setIsOpen(false);
+									}}
+									className={`infio-llm-setting-combobox-option ${index === selectedIndex ? 'is-selected' : ''}`}
+								>
+									<HighlightedText segments={option.html} />
+								</div>
+							</Popover.Close>
+						))}
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		</div>
+	);
+};
--- a/src/settings/ProviderSettings.tsx
+++ b/src/settings/ProviderSettings.tsx
@@ -0,0 +1,186 @@
+import React, { useMemo, useState } from 'react';
+
+// import { PROVIDERS } from '../constants';
+import { ApiProvider } from '../types/llm/model';
+import { InfioSettings } from '../types/settings';
+import { GetAllProviders } from '../utils/api';
+// import { siliconFlowDefaultModelId } from '../utils/api';
+
+import { DropdownComponent, TextComponent, ToggleComponent } from './FormComponents';
+import { ComboBoxComponent } from './ProviderModelsPicker';
+
+type ProviderSettingKey =
+	| 'infioProvider'
+	| 'openrouterProvider'
+	| 'openaiProvider'
+	| 'siliconflowProvider'
+	| 'alibabaQwenProvider'
+	| 'anthropicProvider'
+	| 'deepseekProvider'
+	| 'googleProvider'
+	| 'groqProvider'
+	| 'ollamaProvider'
+	| 'openaicompatibleProvider';
+
+interface ProviderSettingsProps {
+	settings: InfioSettings;
+	setSettings: (settings: InfioSettings) => Promise<void>;
+}
+
+const keyMap: Record<ApiProvider, ProviderSettingKey> = {
+	'Infio': 'infioProvider',
+	'OpenRouter': 'openrouterProvider',
+	'OpenAI': 'openaiProvider',
+	'SiliconFlow': 'siliconflowProvider',
+	'AlibabaQwen': 'alibabaQwenProvider',
+	'Anthropic': 'anthropicProvider',
+	'Deepseek': 'deepseekProvider',
+	'Google': 'googleProvider',
+	'Groq': 'groqProvider',
+	'Ollama': 'ollamaProvider',
+	'OpenAICompatible': 'openaicompatibleProvider'
+};
+
+const getProviderSettingKey = (provider: ApiProvider): ProviderSettingKey => {
+	return keyMap[provider];
+};
+
+const PROVIDERS = GetAllProviders();
+
+const ProviderSettings: React.FC<ProviderSettingsProps> = ({ settings, setSettings }) => {
+	const [currProvider, setCurrProvider] = useState(settings.defaultProvider);
+
+	const providerSetting = useMemo(() => {
+		const providerKey = getProviderSettingKey(currProvider);
+		return settings[providerKey] || {};
+	}, [currProvider, settings]);
+
+	const updateProvider = (provider: ApiProvider) => {
+		setCurrProvider(provider);
+		setSettings({
+			...settings,
+			defaultProvider: provider
+		});
+	};
+
+	const updateProviderApiKey = (value: string) => {
+		const providerKey = getProviderSettingKey(currProvider);
+		const providerSettings = settings[providerKey];
+
+		setSettings({
+			...settings,
+			[providerKey]: {
+				...providerSettings,
+				apiKey: value
+			}
+		});
+	};
+
+	const updateProviderUseCustomUrl = (value: boolean) => {
+		const providerKey = getProviderSettingKey(currProvider);
+		const providerSettings = settings[providerKey];
+
+		setSettings({
+			...settings,
+			[providerKey]: {
+				...providerSettings,
+				useCustomUrl: value
+			}
+		});
+	};
+
+	const updateProviderBaseUrl = (value: string) => {
+		const providerKey = getProviderSettingKey(currProvider);
+		const providerSettings = settings[providerKey];
+
+		setSettings({
+			...settings,
+			[providerKey]: {
+				...providerSettings,
+				baseUrl: value
+			}
+		});
+	};
+
+	const updateChatModelId = (provider: ApiProvider, modelId: string) => {
+		setSettings({
+			...settings,
+			chatModelProvider: provider,
+			chatModelId: modelId
+		});
+	};
+
+	const updateApplyModelId = (provider: ApiProvider, modelId: string) => {
+		setSettings({
+			...settings,
+			applyModelProvider: provider,
+			applyModelId: modelId
+		});
+	};
+
+	const updateEmbeddingModelId = (provider: ApiProvider, modelId: string) => {
+		setSettings({
+			...settings,
+			embeddingModelProvider: provider,
+			embeddingModelId: modelId
+		});
+	};
+
+	return (
+		<div className="infio-provider">
+			<DropdownComponent
+				name="API Provider:"
+				value={currProvider}
+				options={PROVIDERS}
+				onChange={updateProvider}
+			/>
+			<div className="iinfio-llm-setting-divider"></div>
+			<TextComponent
+				name={currProvider + " API Key:"}
+				placeholder="Enter your API key"
+				value={providerSetting.apiKey || ''}
+				onChange={updateProviderApiKey}
+				type="password"
+			/>
+			<div className="iinfio-llm-setting-divider"></div>
+			<ToggleComponent
+				name="Use custom base URL"
+				value={providerSetting.useCustomUrl || false}
+				onChange={updateProviderUseCustomUrl}
+			/>
+			{providerSetting.useCustomUrl && (
+				<TextComponent
+					placeholder="Enter your custom API endpoint URL"
+					value={providerSetting.baseUrl || ''}
+					onChange={updateProviderBaseUrl}
+				/>
+			)}
+
+			<div className="iinfio-llm-setting-divider"></div>
+			<div className="iinfio-llm-setting-divider"></div>
+			<ComboBoxComponent
+				name="Chat Model:"
+				provider={settings.chatModelProvider || currProvider}
+				modelId={settings.chatModelId}
+				updateModel={updateChatModelId}
+			/>
+			<div className="iinfio-llm-setting-divider"></div>
+			<ComboBoxComponent
+				name="Apply Model:"
+				provider={settings.applyModelProvider || currProvider}
+				modelId={settings.applyModelId}
+				updateModel={updateApplyModelId}
+			/>
+			<div className="iinfio-llm-setting-divider"></div>
+			<ComboBoxComponent
+				name="Embedding Model:"
+				provider={settings.embeddingModelProvider || ApiProvider.Google}
+				modelId={settings.embeddingModelId}
+				isEmbedding={true}
+				updateModel={updateEmbeddingModelId}
+			/>
+		</div>
+	);
+};
+
+export default ProviderSettings;
--- a/src/settings/SettingTab.tsx
+++ b/src/settings/SettingTab.tsx
@@ -31,8 +31,6 @@ export class InfioSettingTab extends PluginSettingTab {
 		const { containerEl } = this
 		containerEl.empty()
 		this.renderModelsSection(containerEl)
-		this.renderAPIKeysSection(containerEl)
-		this.renderDefaultModelSection(containerEl)
 		this.renderRAGSection(containerEl)
 		this.renderAutoCompleteSection(containerEl)
 	}
@@ -108,7 +106,7 @@ export class InfioSettingTab extends PluginSettingTab {
 			)

 		new Setting(containerEl)
-			.setName('Gemini API key')
+			.setName('Google API key')
 			.setClass("infio-chat-setting-item-container-append")
 			.addText((text) =>
 				text
@@ -725,6 +723,8 @@ export class InfioSettingTab extends PluginSettingTab {
 				<AutoCompleteSettings
 					onSettingsChanged={async (settings) => {
 						this.plugin.setSettings(settings);
+						// Force refresh the settings page to update dropdowns
+						this.plugin.settingTab.display();
 					}}
 					settings={this.plugin.settings}
 				/>