update model select

2026-05-09 16:38:19 +00:00 · 2025-06-12 10:10:40 +08:00
parent 86c442d284
commit 57c3efdac3
8 changed files with 1344 additions and 196 deletions
--- a/src/settings/components/ProviderModelsPicker.tsx
+++ b/src/settings/components/ProviderModelsPicker.tsx
@@ -152,6 +152,7 @@ export type ComboBoxComponentProps = {
 	modelId: string;
 	settings?: InfioSettings | null;
 	isEmbedding?: boolean,
+	description?: string;
 	updateModel: (provider: ApiProvider, modelId: string) => void;
 };

@@ -161,6 +162,7 @@ export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
 	modelId,
 	settings = null,
 	isEmbedding = false,
+	description,
 	updateModel,
 }) => {
 	// provider state
@@ -198,25 +200,37 @@ export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
 	const fuse: Fuse<SearchableItem> = useMemo(() => {
 		return new Fuse<SearchableItem>(searchableItems, {
 			keys: ["html"],
-			threshold: 0.6,
+			threshold: 1,
 			shouldSort: true,
 			isCaseSensitive: false,
 			ignoreLocation: false,
 			includeMatches: true,
-			minMatchCharLength: 1,
+			minMatchCharLength: 4,
 		})
 	}, [searchableItems])

 	// 根据 searchTerm 得到过滤后的数据列表
 	const filteredOptions = useMemo(() => {
-		const results: HighlightedItem[] = searchTerm
+		let results: HighlightedItem[] = searchTerm
 			? highlight(fuse.search(searchTerm))
 			: searchableItems.map(item => ({
 				...item,
 				html: typeof item.html === 'string' ? [{ text: item.html, isHighlighted: false }] : item.html
 			}))
+		
+		// 如果有搜索词，添加自定义选项（如果不存在完全匹配的话）
+		if (searchTerm && searchTerm.trim()) {
+			const exactMatch = searchableItems.some(item => item.id === searchTerm);
+			if (!exactMatch) {
+				results.unshift({
+					id: searchTerm,
+					html: [{ text: `${modelIds.length > 0 ? '自定义: ' : ''}${searchTerm}`, isHighlighted: false }]
+				});
+			}
+		}
+		
 		return results
-	}, [searchableItems, searchTerm, fuse])
+	}, [searchableItems, searchTerm, fuse, modelIds.length])

 	const listRef = useRef<HTMLDivElement>(null);
 	const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
@@ -231,116 +245,379 @@ export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
 		}
 	}, [selectedIndex]);

+	// Handle provider change
+	const handleProviderChange = (newProvider: string) => {
+		// Use proper type checking without type assertion
+		const availableProviders = providers;
+		const isValidProvider = (value: string): value is ApiProvider => {
+			// @ts-ignore
+			return (availableProviders as readonly string[]).includes(value);
+		};
+		
+		if (isValidProvider(newProvider)) {
+			setModelProvider(newProvider);
+		}
+	};
+
 	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">[{modelProvider}]&nbsp;{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 as ApiProvider)}
+			{description && (
+				<div className="infio-llm-setting-item-description">{description}</div>
+			)}
+			<div className="infio-llm-setting-item-content">
+				{/* Provider Selection - Now visible outside */}
+				<div className="infio-llm-setting-provider-container">
+					<label className="infio-llm-setting-provider-label">提供商</label>
+					<select
+						className="dropdown infio-llm-setting-provider-select"
+						value={modelProvider}
+						onChange={(e) => handleProviderChange(e.target.value)}
+					>
+						{providers.map((providerOption) => (
+							<option
+								key={providerOption}
+								value={providerOption}
 							>
-								{providers.map((provider) => (
-									<option
-										key={provider}
-										value={provider}
-										className={`infio-llm-setting-provider-option ${provider === modelProvider ? 'is-active' : ''}`}
-									>
-										{provider}
-									</option>
-								))}
-							</select>
-							{modelIds.length > 0 ? (
-								<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;
-										}
-									}}
-								/>
-							) : (
+								{providerOption}
+							</option>
+						))}
+					</select>
+				</div>
+
+				{/* Model Selection */}
+				<div className="infio-llm-setting-model-container">
+					<label className="infio-llm-setting-model-label">模型</label>
+					<Popover.Root modal={false} open={isOpen} onOpenChange={setIsOpen}>
+						<Popover.Trigger asChild>
+							<button className="infio-llm-setting-model-trigger clickable-icon" type="button">
+								<span className="infio-llm-setting-model-display">
+									{modelId || "选择模型..."}
+								</span>
+								<svg
+									className="infio-llm-setting-model-arrow"
+									width="12"
+									height="12"
+									viewBox="0 0 12 12"
+									fill="none"
+								>
+									<path
+										d="M3 4.5L6 7.5L9 4.5"
+										stroke="currentColor"
+										strokeWidth="1.5"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									/>
+								</svg>
+							</button>
+						</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">
 									<input
 										type="text"
 										className="infio-llm-setting-item-search"
-										placeholder="input custom model name"
+										placeholder={modelIds.length > 0 ? "搜索或输入模型名称..." : "输入自定义模型名称"}
 										value={searchTerm}
 										onChange={(e) => {
 											setSearchTerm(e.target.value);
+											setSelectedIndex(0);
 										}}
 										onKeyDown={(e) => {
-											if (e.key === "Enter") {
-												e.preventDefault();
-												updateModel(modelProvider, searchTerm);
-												setIsOpen(false);
+											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();
+													if (filteredOptions.length > 0) {
+														const selectedOption = filteredOptions[selectedIndex];
+														if (selectedOption) {
+															updateModel(modelProvider, selectedOption.id);
+														}
+													} else if (searchTerm.trim()) {
+														// 如果没有选项但有输入内容，直接使用输入内容
+														updateModel(modelProvider, searchTerm.trim());
+													}
+													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>
+								{filteredOptions.length > 0 ? (
+									<div className="infio-llm-setting-options-list">
+										{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>
+								) : null}
+							</div>
+						</Popover.Content>
+					</Popover.Root>
+				</div>
+			</div>
+			<style>{`
+				.infio-llm-setting-item {
+					margin-bottom: 8px;
+					padding: 12px;
+					background: var(--background-secondary);
+					border-radius: 6px;
+					border: 1px solid var(--background-modifier-border);
+				}
+
+				.infio-llm-setting-item-name {
+					font-size: 14px;
+					font-weight: 500;
+					color: var(--text-normal);
+					margin-bottom: 8px;
+					padding-bottom: 4px;
+					border-bottom: 1px solid var(--background-modifier-border);
+				}
+
+				.infio-llm-setting-item-description {
+					font-size: 12px;
+					color: var(--text-muted);
+					margin-bottom: 8px;
+					line-height: 1.4;
+				}
+
+				.infio-llm-setting-item-content {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+				}
+
+				.infio-llm-setting-provider-container,
+				.infio-llm-setting-model-container {
+					display: flex;
+					align-items: center;
+					gap: 12px;
+				}
+
+				.infio-llm-setting-provider-label,
+				.infio-llm-setting-model-label {
+					font-size: 13px;
+					font-weight: 500;
+					color: var(--text-muted);
+					min-width: 50px;
+					text-align: left;
+				}
+
+				.infio-llm-setting-provider-select {
+					max-width: 200px;
+					min-width: 120px;
+					padding: 6px 8px;
+					border: 1px solid var(--background-modifier-border);
+					border-radius: 4px;
+					background: var(--background-primary);
+					color: var(--text-normal);
+					font-size: 13px;
+					transition: all 0.2s ease;
+					appearance: none;
+					background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+					background-repeat: no-repeat;
+					background-position: right 8px center;
+					background-size: 12px;
+					padding-right: 28px;
+				}
+
+				.infio-llm-setting-provider-select:hover {
+					border-color: var(--interactive-accent);
+				}
+
+				.infio-llm-setting-provider-select:focus {
+					outline: none;
+					border-color: var(--interactive-accent);
+					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
+				}
+
+				.infio-llm-setting-model-trigger {
+					max-width: 300px;
+					min-width: 150px;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 6px 8px;
+					border: 1px solid var(--background-modifier-border);
+					border-radius: 4px;
+					background: var(--background-primary);
+					color: var(--text-normal);
+					font-size: 13px;
+					cursor: pointer;
+					transition: all 0.2s ease;
+					min-height: 32px;
+				}
+
+				.infio-llm-setting-model-trigger:hover {
+					border-color: var(--interactive-accent);
+					background: var(--background-modifier-hover);
+				}
+
+				.infio-llm-setting-model-trigger:focus {
+					outline: none;
+					border-color: var(--interactive-accent);
+					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
+				}
+
+				.infio-llm-setting-model-display {
+					flex: 1;
+					text-align: left;
+					color: var(--text-normal);
+					font-family: var(--font-monospace);
+					font-size: 12px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.infio-llm-setting-model-arrow {
+					color: var(--text-muted);
+					transition: transform 0.2s ease;
+					flex-shrink: 0;
+				}
+
+				.infio-llm-setting-model-trigger[data-state="open"] .infio-llm-setting-model-arrow {
+					transform: rotate(180deg);
+				}
+
+				.infio-llm-setting-combobox-dropdown {
+					background: var(--background-primary);
+					border: 1px solid var(--background-modifier-border);
+					border-radius: 6px;
+					box-shadow: var(--shadow-s);
+					padding: 6px;
+					min-width: 300px;
+					max-width: 500px;
+					z-index: 1000;
+				}
+
+				.infio-llm-setting-search-container {
+					margin-bottom: 6px;
+				}
+
+				.infio-llm-setting-item-search {
+					width: 100%;
+					padding: 6px 8px;
+					border: 1px solid var(--background-modifier-border);
+					border-radius: 4px;
+					background: var(--background-primary);
+					color: var(--text-normal);
+					font-size: 13px;
+					transition: all 0.2s ease;
+				}
+
+				.infio-llm-setting-item-search:focus {
+					outline: none;
+					border-color: var(--interactive-accent);
+					box-shadow: 0 0 0 2px var(--interactive-accent-hover);
+				}
+
+				.infio-llm-setting-options-list {
+					max-height: 200px;
+					overflow-y: auto;
+				}
+
+				.infio-llm-setting-combobox-option {
+					padding: 6px 8px;
+					border-radius: 3px;
+					cursor: pointer;
+					font-family: var(--font-monospace);
+					font-size: 12px;
+					color: var(--text-normal);
+					transition: all 0.15s ease;
+					word-break: break-all;
+				}
+
+				.infio-llm-setting-combobox-option:hover,
+				.infio-llm-setting-combobox-option.is-selected {
+					background: var(--background-modifier-hover);
+					color: var(--text-accent);
+				}
+
+				.infio-llm-setting-model-item-highlight {
+					color: var(--text-accent);
+				}
+
+				.infio-llm-setting-no-results {
+					padding: 12px 8px;
+					text-align: center;
+					color: var(--text-muted);
+					font-size: 13px;
+				}
+
+				/* 滚动条样式 */
+				.infio-llm-setting-options-list::-webkit-scrollbar {
+					width: 4px;
+				}
+
+				.infio-llm-setting-options-list::-webkit-scrollbar-track {
+					background: var(--background-secondary);
+					border-radius: 2px;
+				}
+
+				.infio-llm-setting-options-list::-webkit-scrollbar-thumb {
+					background: var(--background-modifier-border);
+					border-radius: 2px;
+				}
+
+				.infio-llm-setting-options-list::-webkit-scrollbar-thumb:hover {
+					background: var(--text-muted);
+				}
+
+				/* 响应式设计 */
+				@media (max-width: 768px) {
+					.infio-llm-setting-provider-container,
+					.infio-llm-setting-model-container {
+						flex-direction: column;
+						align-items: flex-start;
+						gap: 6px;
+					}
+
+					.infio-llm-setting-provider-label,
+					.infio-llm-setting-model-label {
+						min-width: auto;
+					}
+
+					.infio-llm-setting-provider-select,
+					.infio-llm-setting-model-trigger {
+						width: 100%;
+						max-width: none;
+					}
+				}
+			`}</style>
 		</div>
 	);
 };