mirror of
https://github.com/EthanMarti/infio-copilot.git
synced 2026-05-09 08:30:09 +00:00
[fix review issue]: update setting name
This commit is contained in:
duanfuxiang
324
src/settings/components/ProviderModelsPicker.tsx
Normal file
324
src/settings/components/ProviderModelsPicker.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
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, setModelIds] = useState<string[]>([]);
|
||||
|
||||
// Replace useMemo with useEffect for async fetching
|
||||
useEffect(() => {
|
||||
const fetchModelIds = async () => {
|
||||
const ids = isEmbedding
|
||||
? GetEmbeddingProviderModelIds(modelProvider)
|
||||
: await GetProviderModelIds(modelProvider);
|
||||
setModelIds(ids);
|
||||
};
|
||||
|
||||
fetchModelIds();
|
||||
}, [modelProvider, isEmbedding]);
|
||||
|
||||
const searchableItems = useMemo(() => {
|
||||
return modelIds.map((id) => ({
|
||||
id,
|
||||
html: id,
|
||||
}))
|
||||
}, [modelIds])
|
||||
|
||||
// 初始化 fuse，用于模糊搜索，简单配置 threshold 可按需调整
|
||||
const fuse: Fuse<SearchableItem> = useMemo(() => {
|
||||
return new Fuse<SearchableItem>(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: typeof item.html === 'string' ? [{ text: item.html, isHighlighted: false }] : item.html
|
||||
}))
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user