diff --git a/src/components/providers/OpenAISection/OpenAISection.tsx b/src/components/providers/OpenAISection/OpenAISection.tsx index 7eeb4b4..3b5d9fa 100644 --- a/src/components/providers/OpenAISection/OpenAISection.tsx +++ b/src/components/providers/OpenAISection/OpenAISection.tsx @@ -360,45 +360,50 @@ export function OpenAISection({ className={styles.modelMultiSelectWrapper} ref={isFloating ? floatingDropdownRef : topDropdownRef} > - ) : ( <> {Array.from(selectedModels).map((name) => ( {name} - { e.stopPropagation(); toggleModelSelection(name); }} - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - e.stopPropagation(); - toggleModelSelection(name); - } - }} > × - + ))} + )} - - + {isActiveToolbar && isDropdownOpen && (
diff --git a/src/pages/AiProvidersPage.module.scss b/src/pages/AiProvidersPage.module.scss index 46ed02a..4cc20dc 100644 --- a/src/pages/AiProvidersPage.module.scss +++ b/src/pages/AiProvidersPage.module.scss @@ -210,7 +210,6 @@ border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-secondary); - cursor: pointer; transition: all 0.15s ease; min-height: 32px; @@ -220,6 +219,24 @@ } } +.modelSelectButton { + display: flex; + align-items: center; + gap: 4px; + flex: 1 1 auto; + min-width: 0; + padding: 0; + border: 0; + background: transparent; + color: inherit; + cursor: pointer; + + &:disabled { + cursor: not-allowed; + opacity: 0.6; + } +} + .modelSelectPlaceholder { font-size: 13px; color: var(--text-tertiary); @@ -267,6 +284,40 @@ &:hover { background: var(--bg-tertiary); } + + &:disabled { + cursor: not-allowed; + opacity: 0.6; + } +} + +.modelSelectArrowButton { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + padding: 0; + border: 0; + border-radius: 4px; + background: transparent; + color: var(--text-tertiary); + cursor: pointer; + flex-shrink: 0; + + &:hover { + background: var(--bg-tertiary); + color: var(--text-primary); + } + + &:disabled { + cursor: not-allowed; + opacity: 0.6; + } + + .modelSelectArrow { + margin-left: 0; + } } .modelSelectArrow {