From 2ce1e11c05fe94558d9e99b88030050ac0e9668d Mon Sep 17 00:00:00 2001
From: duanfuxiang <duanfuxiang@haizhi.com>
Date: Thu, 24 Apr 2025 17:57:31 +0800
Subject: [PATCH] add collected models

---
 .../chat-view/chat-input/ModelSelect.tsx      | 352 +++++++++++++++---
 src/contexts/LLMContext.tsx                   |   7 -
 src/database/json/migrateToJsonDatabase.ts    |   1 +
 src/types/settings.ts                         |   6 +
 4 files changed, 301 insertions(+), 65 deletions(-)

diff --git a/src/components/chat-view/chat-input/ModelSelect.tsx b/src/components/chat-view/chat-input/ModelSelect.tsx
index f006796..c0dc2c3 100644
--- a/src/components/chat-view/chat-input/ModelSelect.tsx
+++ b/src/components/chat-view/chat-input/ModelSelect.tsx
@@ -1,6 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import Fuse, { FuseResult } from 'fuse.js'
-import { ChevronDown, ChevronUp } from 'lucide-react'
+import { ChevronDown, ChevronUp, Star, StarOff } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { useSettings } from '../../../contexts/SettingsContext'
@@ -15,11 +15,15 @@ type TextSegment = {
 type SearchableItem = {
 	id: string;
 	html: string | TextSegment[];
+	provider?: string;
+	isCollected?: boolean;
 };
 
 type HighlightedItem = {
 	id: string;
 	html: TextSegment[];
+	provider?: string;
+	isCollected?: boolean;
 };
 
 // Reuse highlight function from ProviderModelsPicker
@@ -166,11 +170,18 @@ export function ModelSelect() {
 	}, [settings.chatModelProvider, settings.chatModelId])
 
 	const searchableItems = useMemo(() => {
+		// 检查是否在收藏列表中
+		const isInCollected = (id: string) => {
+			return settings.collectedChatModels?.some(item => item.provider === modelProvider && item.modelId === id) || false;
+		};
+
 		return modelIds.map((id) => ({
 			id,
 			html: id,
+			provider: modelProvider,
+			isCollected: isInCollected(id),
 		}))
-	}, [modelIds])
+	}, [modelIds, modelProvider, settings.collectedChatModels])
 
 	const fuse = useMemo(() => {
 		return new Fuse<SearchableItem>(searchableItems, {
@@ -185,15 +196,49 @@ export function ModelSelect() {
 	}, [searchableItems])
 
 	const filteredOptions = useMemo(() => {
+		// 首先获取搜索结果
 		const 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) {
+			return [...results.filter(item => item.isCollected), ...results.filter(item => !item.isCollected)]
+		}
+
 		return results
 	}, [searchableItems, searchTerm, fuse])
 
+	// 添加或删除收藏
+	const toggleCollected = (id: string, e: React.MouseEvent) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		const isCurrentlyCollected = settings.collectedChatModels?.some(
+			item => item.provider === modelProvider && item.modelId === id
+		);
+
+		let newCollectedModels = settings.collectedChatModels || [];
+
+		if (isCurrentlyCollected) {
+			// 移除收藏
+			newCollectedModels = newCollectedModels.filter(
+				item => !(item.provider === modelProvider && item.modelId === id)
+			);
+		} else {
+			// 添加收藏
+			newCollectedModels = [...newCollectedModels, { provider: modelProvider, modelId: id }];
+		}
+
+		setSettings({
+			...settings,
+			collectedChatModels: newCollectedModels,
+		});
+	};
+
 	return (
 		<>
 			<DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
@@ -208,6 +253,65 @@ export function ModelSelect() {
 
 				<DropdownMenu.Portal>
 					<DropdownMenu.Content className="infio-popover infio-llm-setting-combobox-dropdown">
+						{/* 收藏的模型区域 - 所有providers的收藏模型 */}
+						{settings.collectedChatModels?.length > 0 && (
+							<div className="infio-model-section">
+								<div className="infio-model-section-title">
+									<Star size={12} className="infio-star-active" /> collected models
+								</div>
+								<ul className="infio-collected-models-list">
+									{settings.collectedChatModels.map((collectedModel, index) => (
+										<DropdownMenu.Item
+											key={`${collectedModel.provider}-${collectedModel.modelId}`}
+											onSelect={() => {
+												setSettings({
+													...settings,
+													chatModelProvider: collectedModel.provider,
+													chatModelId: collectedModel.modelId,
+												})
+												setChatModelId(collectedModel.modelId)
+												setSearchTerm("")
+												setIsOpen(false)
+											}}
+											className={`infio-llm-setting-combobox-option ${index === selectedIndex ? 'is-selected' : ''}`}
+											onMouseEnter={() => setSelectedIndex(index)}
+											asChild
+										>
+											<li
+												className="infio-llm-setting-model-item infio-collected-model-item"
+												title={`${collectedModel.provider}/${collectedModel.modelId}`}
+											>
+												<div className="infio-model-item-text-wrapper">
+													<span className="infio-provider-badge">{collectedModel.provider}</span>
+													<span>{collectedModel.modelId}</span>
+												</div>
+												<div
+													className="infio-model-item-star"
+													title="remove from collected models"
+												>
+													<Star size={16} className="infio-star-active" onClick={(e) => {
+														e.stopPropagation();
+														e.preventDefault();
+
+														// 从收藏中删除
+														const newCollectedModels = settings.collectedChatModels.filter(
+															item => !(item.provider === collectedModel.provider && item.modelId === collectedModel.modelId)
+														);
+
+														setSettings({
+															...settings,
+															collectedChatModels: newCollectedModels,
+														});
+													}} />
+												</div>
+											</li>
+										</DropdownMenu.Item>
+									))}
+								</ul>
+								<div className="infio-model-separator"></div>
+							</div>
+						)}
+
 						<div className="infio-llm-setting-search-container">
 							<div className="infio-llm-setting-provider-container">
 								<select
@@ -312,39 +416,68 @@ export function ModelSelect() {
 								/>
 							)}
 						</div>
-						<ul>
-							{isLoading ? (
-								<li>Loading...</li>
-							) : (
-								filteredOptions.map((option, index) => (
-									<DropdownMenu.Item
-										key={option.id}
-										onSelect={() => {
-											setSettings({
-												...settings,
-												chatModelProvider: modelProvider,
-												chatModelId: option.id,
-											})
-											setChatModelId(option.id)
-											setSearchTerm("")
-											setIsOpen(false)
-										}}
-										className={`infio-llm-setting-combobox-option ${index === selectedIndex ? 'is-selected' : ''}`}
-										onMouseEnter={() => setSelectedIndex(index)}
-										asChild
-									>
-										<li
-											className="infio-llm-setting-model-item"
-											title={option.id}
-										>
-											<div className="infio-model-item-text-wrapper">
-												<HighlightedText segments={option.html} />
-											</div>
-										</li>
-									</DropdownMenu.Item>
-								))
-							)}
-						</ul>
+						{isLoading ? (
+							<div className="infio-loading">loading...</div>
+						) : (
+							<>
+
+								{/* 所有模型区域 */}
+								<div className="infio-model-section">
+									<ul>
+											{filteredOptions.map((option, index) => {
+											// 计算正确的选中索引，考虑搜索模式和非搜索模式
+											const isSelected = searchTerm
+												? index === selectedIndex
+												: index + settings.collectedChatModels?.length === selectedIndex;
+
+											return (
+												<DropdownMenu.Item
+													key={option.id}
+													onSelect={() => {
+														setSettings({
+															...settings,
+															chatModelProvider: modelProvider,
+															chatModelId: option.id,
+														})
+														setChatModelId(option.id)
+														setSearchTerm("")
+														setIsOpen(false)
+													}}
+													className={`infio-llm-setting-combobox-option ${isSelected ? 'is-selected' : ''}`}
+													onMouseEnter={() => {
+														// 计算正确的鼠标悬停索引
+														const hoverIndex = searchTerm
+															? index
+															: index + settings.collectedChatModels?.length;
+														setSelectedIndex(hoverIndex);
+													}}
+													asChild
+												>
+													<li
+														className={`infio-llm-setting-model-item ${option.isCollected ? 'infio-collected-model-item' : ''}`}
+														title={option.id}
+													>
+														<div className="infio-model-item-text-wrapper">
+															<HighlightedText segments={option.html} />
+														</div>
+														<div
+															className="infio-model-item-star"
+															onClick={(e) => toggleCollected(option.id, e)}
+															title={option.isCollected ? "star" : "unstar"}
+														>
+															{option.isCollected ?
+																<Star size={16} className="infio-star-active" /> :
+																<Star size={16} className="infio-star-inactive" />
+															}
+														</div>
+													</li>
+												</DropdownMenu.Item>
+											);
+										})}
+									</ul>
+								</div>
+							</>
+						)}
 					</DropdownMenu.Content>
 				</DropdownMenu.Portal>
 			</DropdownMenu.Root>
@@ -371,8 +504,47 @@ export function ModelSelect() {
 						white-space: nowrap;
 						overflow: hidden;
 						text-overflow: ellipsis;
-						max-width: 280px;
+						max-width: 250px;
 						display: block;
+						flex: 1;
+					}
+					.infio-llm-setting-model-item {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+						padding: 4px 10px 4px 6px;
+						border-radius: 4px;
+						margin: 2px 4px;
+						transition: all 0.15s ease;
+					}
+					}
+					
+					.infio-collected-model-item {
+						background-color: rgba(147, 112, 219, 0.05);
+					}
+					
+					.infio-model-item-star {
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						opacity: 0.6;
+						transition: opacity 0.2s ease;
+					}
+					
+					.infio-model-item-star:hover {
+						opacity: 1;
+					}
+					
+					.infio-star-active {
+						color: #FFD700;
+						fill: #FFD700;
+						filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.4));
+					}
+					
+					.infio-star-inactive {
+						color: var(--text-muted);
 					}
 					
 					.infio-model-item-text-wrapper span {
@@ -384,9 +556,10 @@ export function ModelSelect() {
 						display: inline;
 						color: #9370DB;
 						font-weight: 700;
-						background-color: rgba(147, 112, 219, 0.1);
-						padding: 0 2px;
-						border-radius: 2px;
+						background-color: rgba(147, 112, 219, 0.15);
+						padding: 1px 3px;
+						border-radius: 3px;
+						margin: 0 1px;
 					}
 					
 					/* Search container */
@@ -394,9 +567,11 @@ export function ModelSelect() {
 						display: flex;
 						flex-direction: row;
 						justify-content: space-between;
-						gap: 5px;
+						gap: 2px;
 						border-bottom: 1px solid var(--background-modifier-border);
-						padding-bottom: 2px;
+						padding: 2px 2px 3px;
+						background-color: var(--background-secondary-alt);
+						border-radius: 2px 2px 0 0;
 					}
 					
 					/* Provider selector container */
@@ -405,32 +580,41 @@ export function ModelSelect() {
 						display: flex;
 						align-items: center;
 						flex: 0 0 auto;
-						width: 26%;
+						width: 30%;
 					}
 					
 					/* Provider selector */
 					.infio-llm-setting-provider-switch {
 						width: 100% !important;
 						margin: 0;
-						padding: 0;
-						padding-right: 5px;
+						padding: 6px 8px;
 						text-align: left;
 						appearance: none;
 						-webkit-appearance: none;
-						background-color: var(--background-modifier-form-field);
+						background-color: var(--background-primary);
 						border: 1px solid var(--background-modifier-border);
+						border-radius: 6px;
 						font-weight: 500;
-						transition: border-color 0.2s ease, box-shadow 0.2s ease;
+						font-size: 0.9em;
+						transition: all 0.2s ease;
 						cursor: pointer;
+						box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' 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-switch:hover {
-						border-color: var(--interactive-accent-hover);
+						border-color: var(--interactive-accent);
+						background-color: var(--background-primary-alt);
 					}
 					
 					.infio-llm-setting-provider-switch:focus {
 						border-color: var(--interactive-accent);
-						box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
+						box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.25);
+						outline: none;
 					}
 					
 					/* Search container */
@@ -439,7 +623,7 @@ export function ModelSelect() {
 						display: flex;
 						align-items: center;
 						flex: 1 1 auto;
-						width: 74%;
+						width: 70%;
 					}
 
 					/* Search input */
@@ -447,21 +631,23 @@ export function ModelSelect() {
 						width: 100% !important;
 						border: 1px solid var(--background-modifier-border);
 						margin: 0;
-						padding: 0;
-						border-radius: 0px !important;
-						background-color: var(--background-modifier-form-field);
-						transition: border-color 0.2s ease, box-shadow 0.2s ease;
-						height: 28px;
-						padding-left: 8px;
+						padding: 6px 12px;
+						border-radius: 6px !important;
+						background-color: var(--background-primary);
+						transition: all 0.2s ease;
+						height: auto;
+						font-size: 0.9em;
+						box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 					}
 					
 					.infio-llm-setting-item-search:hover {
-						border-color: var(--interactive-accent-hover);
+						border-color: var(--interactive-accent);
+						background-color: var(--background-primary-alt);
 					}
 					
 					.infio-llm-setting-item-search:focus {
 						border-color: var(--interactive-accent);
-						box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
+						box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.25);
 						outline: none;
 					}
 					
@@ -469,8 +655,58 @@ export function ModelSelect() {
 					.infio-llm-setting-combobox-dropdown {
 						max-height: 350px;
 						overflow-y: auto;
-						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+						box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
 						border-radius: 8px;
+						border: 1px solid var(--background-modifier-border);
+					}
+					
+					/* 模型区域样式 */
+					.infio-model-section {
+						padding: 0;
+					}
+					
+					.infio-model-section-title {
+						font-size: 12px;
+						color: var(--text-muted);
+						padding: 4px 8px;
+						display: flex;
+						align-items: center;
+						gap: 4px;
+						background-color: var(--background-secondary);
+						margin-top: 2px;
+					}
+					
+					.infio-model-separator {
+						height: 1px;
+						background-color: var(--background-modifier-border);
+						margin: 4px 0;
+					}
+					
+					/* 加载状态 */
+					.infio-loading {
+						padding: 8px;
+						text-align: center;
+						color: var(--text-muted);
+					}
+					
+					/* 收藏列表 */
+					.infio-collected-models-list {
+						margin: 0;
+						padding: 0;
+						border-radius: 4px;
+						overflow: hidden;
+					}
+					
+					/* Provider 标签 */
+					.infio-provider-badge {
+						font-size: 10px;
+						padding: 2px 6px;
+						background-color: var(--background-modifier-hover);
+						border-radius: 4px;
+						margin-right: 6px;
+						color: var(--text-muted);
+						font-weight: 500;
+						box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 					}
 				`}
 			</style>
diff --git a/src/contexts/LLMContext.tsx b/src/contexts/LLMContext.tsx
index b010634..ecdd4c9 100644
--- a/src/contexts/LLMContext.tsx
+++ b/src/contexts/LLMContext.tsx
@@ -50,13 +50,6 @@ export function LLMProvider({ children }: PropsWithChildren) {
 		}
 	}, [settings.chatModelProvider, settings.chatModelId])
 
-	// const applyModel = useMemo((): LLMModel => {
-	// 	return {
-	// 		provider: settings.applyModelProvider,
-	// 		modelId: settings.applyModelId,
-	// 	}
-	// }, [settings])
-
 	useEffect(() => {
 		const manager = new LLMManager(settings)
 		setLLMManager(manager)
diff --git a/src/database/json/migrateToJsonDatabase.ts b/src/database/json/migrateToJsonDatabase.ts
index b4b8853..fde7983 100644
--- a/src/database/json/migrateToJsonDatabase.ts
+++ b/src/database/json/migrateToJsonDatabase.ts
@@ -116,3 +116,4 @@ export async function migrateToJsonDatabase(
 	await markMigrationCompleted(app)
 	onMigrationComplete?.()
 }
+
diff --git a/src/types/settings.ts b/src/types/settings.ts
index a6a9a3b..35da43a 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -220,6 +220,12 @@ export const InfioSettingsSchema = z.object({
 	grokProvider: GrokProviderSchema,
 	openaicompatibleProvider: OpenAICompatibleProviderSchema,
 
+	// Chat Model start list
+	collectedChatModels: z.array(z.object({
+		provider: z.nativeEnum(ApiProvider),
+		modelId: z.string(),
+	})).catch([]),
+
 	// Chat Model 
 	chatModelProvider: z.nativeEnum(ApiProvider).catch(ApiProvider.OpenRouter),
 	chatModelId: z.string().catch(''),