+
+
+ {
+ 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;
+ }
+ }}
+ />
+
+ {filteredOptions.map((option, index) => (
+
+ (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' : ''}`}
+ >
+
+
+
+ ))}
+
+