This commit is contained in:
Saoud Rizwan
2024-10-04 03:46:31 -04:00
parent c79afa52cc
commit 916dceafab

View File

@@ -133,59 +133,61 @@ const OpenRouterModelPicker: React.FC = () => {
} }
`} `}
</style> </style>
<DropdownWrapper ref={dropdownRef}> <div>
<label htmlFor="model-search"> <label htmlFor="model-search">
<span style={{ fontWeight: 500 }}>Model</span> <span style={{ fontWeight: 500 }}>Model</span>
</label> </label>
<VSCodeTextField <DropdownWrapper ref={dropdownRef}>
id="model-search" <VSCodeTextField
placeholder="Search and select a model..." id="model-search"
value={searchTerm} placeholder="Search and select a model..."
onInput={(e) => { value={searchTerm}
handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase()) onInput={(e) => {
setIsDropdownVisible(true) handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
}} setIsDropdownVisible(true)
onFocus={() => setIsDropdownVisible(true)} }}
onKeyDown={handleKeyDown} onFocus={() => setIsDropdownVisible(true)}
style={{ width: "100%" }}> onKeyDown={handleKeyDown}
{searchTerm && ( style={{ width: "100%" }}>
<div {searchTerm && (
className="input-icon-button codicon codicon-close" <div
aria-label="Clear search" className="input-icon-button codicon codicon-close"
onClick={() => { aria-label="Clear search"
handleModelChange("")
setIsDropdownVisible(true)
}}
slot="end"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
/>
)}
</VSCodeTextField>
{isDropdownVisible && (
<DropdownList>
{modelSearchResults.map((item, index) => (
<DropdownItem
key={item.id}
ref={(el) => (itemRefs.current[index] = el)}
isSelected={index === selectedIndex}
onMouseEnter={() => setSelectedIndex(index)}
onClick={() => { onClick={() => {
handleModelChange(item.id) handleModelChange("")
setIsDropdownVisible(false) setIsDropdownVisible(true)
}} }}
dangerouslySetInnerHTML={{ slot="end"
__html: item.html, style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
}} }}
/> />
))} )}
</DropdownList> </VSCodeTextField>
)} {isDropdownVisible && (
</DropdownWrapper> <DropdownList>
{modelSearchResults.map((item, index) => (
<DropdownItem
key={item.id}
ref={(el) => (itemRefs.current[index] = el)}
isSelected={index === selectedIndex}
onMouseEnter={() => setSelectedIndex(index)}
onClick={() => {
handleModelChange(item.id)
setIsDropdownVisible(false)
}}
dangerouslySetInnerHTML={{
__html: item.html,
}}
/>
))}
</DropdownList>
)}
</DropdownWrapper>
</div>
{hasInfo ? ( {hasInfo ? (
<ModelInfoView <ModelInfoView
@@ -310,7 +312,7 @@ export const ModelDescriptionMarkdown = memo(
}, [reactContent, setIsExpanded]) }, [reactContent, setIsExpanded])
return ( return (
<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 5 }}> <StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 0 }}>
<div <div
ref={textContainerRef} ref={textContainerRef}
style={{ style={{