fix: open agent model picker above chat attachment controls
This commit is contained in:
@@ -9,7 +9,7 @@ function compile(path, overrides = {}) {
|
||||
const exports = {}
|
||||
const source = fs.readFileSync(require.resolve(path), 'utf8')
|
||||
vm.runInNewContext(ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, jsx: ts.JsxEmit.ReactJSX } }).outputText,
|
||||
{ exports, require: name => overrides[name] ?? require(name) })
|
||||
{ exports, document: { body: {} }, require: name => overrides[name] ?? require(name) })
|
||||
return exports
|
||||
}
|
||||
const models = compile('../src/renderer/src/features/workspace/agentModels.ts')
|
||||
@@ -37,24 +37,60 @@ function elements(root, predicate) {
|
||||
if (!React.isValidElement(root)) return []
|
||||
return [...(predicate(root) ? [root] : []), ...React.Children.toArray(root.props.children).flatMap(child => elements(child, predicate))]
|
||||
}
|
||||
const { AgentModelSelector } = compile('../src/renderer/src/components/AgentModelSelector.tsx', {
|
||||
'../i18n': { t: value => value }, '../features/workspace/agentModels': models,
|
||||
})
|
||||
function selectorHarness(props) {
|
||||
const state = [], refs = []
|
||||
let stateIndex = 0, refIndex = 0
|
||||
const { AgentModelSelector } = compile('../src/renderer/src/components/AgentModelSelector.tsx', {
|
||||
'../i18n': { t: value => value }, '../features/workspace/agentModels': models,
|
||||
'react-dom': { createPortal: child => child },
|
||||
react: { ...React, useId: () => 'model-menu', useEffect() {}, useLayoutEffect() {},
|
||||
useState(initial) { const index = stateIndex++; if (!(index in state)) state[index] = initial; return [state[index], value => { state[index] = typeof value === 'function' ? value(state[index]) : value }] },
|
||||
useRef(initial) { return refs[refIndex++] ?? (refs[refIndex - 1] = { current: initial }) }
|
||||
}
|
||||
})
|
||||
return { render(patch = {}) { stateIndex = 0; refIndex = 0; return AgentModelSelector({ ...props, ...patch }) } }
|
||||
}
|
||||
|
||||
for (const dark of [true, false]) test(`model control lists only allowed providers and follows the theme (${dark})`, () => {
|
||||
let selected
|
||||
const tree = AgentModelSelector({ models: options, provider: 'QWEN', dark, disabled: false, onChange: value => { selected = value } })
|
||||
const select = elements(tree, node => node.type === 'select')[0]
|
||||
assert.equal(select.props.value, 'QWEN')
|
||||
assert.equal(select.props.style.colorScheme, dark ? 'dark' : 'light')
|
||||
assert.deepEqual(elements(select, node => node.type === 'option').map(node => node.props.value), ['OPENAI', 'QWEN'])
|
||||
select.props.onChange({ target: { value: 'OPENAI' } })
|
||||
const h = selectorHarness({ models: options, provider: 'QWEN', dark, disabled: false, onChange: value => { selected = value } })
|
||||
const tree = h.render()
|
||||
const trigger = elements(tree, node => node.type === 'button')[0]
|
||||
assert.equal(trigger.props['aria-haspopup'], 'menu')
|
||||
assert.equal(trigger.props['aria-expanded'], false)
|
||||
assert.equal(trigger.props.title, 'Qwen · qwen3.8-flash')
|
||||
assert.equal(elements(tree, node => node.props.role === 'menu').length, 0)
|
||||
assert.equal(elements(tree, node => node.type === 'select').length, 0)
|
||||
trigger.props.onClick()
|
||||
const menu = elements(h.render(), node => node.props.role === 'menu')[0]
|
||||
assert.match(menu.props.className, dark ? /bg-\[#252526\]/ : /bg-white/)
|
||||
assert.match(menu.props.className, /fixed/)
|
||||
const items = elements(menu, node => node.props.role === 'menuitemradio')
|
||||
assert.deepEqual(items.map(node => node.props.title), ['OpenAI · gpt-6.1-sol', 'Qwen · qwen3.8-flash'])
|
||||
assert.deepEqual(items.map(node => node.props['aria-checked']), [false, true])
|
||||
assert.ok(items.every(node => elements(node, item => item.type === 'span' && item.props.className.includes('truncate')).length === 1))
|
||||
items[0].props.onClick()
|
||||
assert.equal(selected, 'OPENAI')
|
||||
assert.match(select.props.className, /truncate/)
|
||||
assert.ok(elements(AgentModelSelector({ models: options, provider: 'QWEN', dark, disabled: true, onChange() {} }), node => node.type === 'select')[0].props.disabled)
|
||||
const empty = elements(AgentModelSelector({ models: [], provider: null, dark, disabled: false, onChange() {} }), node => node.type === 'select')[0]
|
||||
assert.equal(elements(h.render(), node => node.props.role === 'menu').length, 0)
|
||||
assert.ok(elements(h.render({ disabled: true }), node => node.type === 'button')[0].props.disabled)
|
||||
const empty = elements(h.render({ models: [], provider: null }), node => node.type === 'button')[0]
|
||||
assert.ok(empty.props.disabled)
|
||||
assert.equal(elements(empty, node => node.type === 'option')[0].props.children, '사용 가능한 모델 없음')
|
||||
assert.equal(empty.props.title, '사용 가능한 모델 없음')
|
||||
})
|
||||
|
||||
test('model menu opens from arrow keys and closes when a request blocks the selector', () => {
|
||||
const h = selectorHarness({ models: options, provider: 'QWEN', dark: true, disabled: false, onChange() {} })
|
||||
const trigger = elements(h.render(), node => node.type === 'button')[0]
|
||||
trigger.props.onKeyDown({ key: 'ArrowUp', preventDefault() {} })
|
||||
assert.equal(elements(h.render(), node => node.props.role === 'menu').length, 1)
|
||||
assert.equal(elements(h.render({ disabled: true }), node => node.props.role === 'menu').length, 0)
|
||||
})
|
||||
|
||||
test('input footer places the model action before the attachment and clear controls', () => {
|
||||
const source = fs.readFileSync(require.resolve('../src/renderer/src/components/ChatWidgets.tsx'), 'utf8')
|
||||
const row = source.slice(source.indexOf('{(attachmentsEnabled || onClearConversation || footerAction)'))
|
||||
assert.ok(row.indexOf('{footerAction}') < row.indexOf('title={t(\'파일 첨부\')}'))
|
||||
assert.ok(row.indexOf('{footerAction}') < row.indexOf('title={t(\'대화내역 삭제\')}'))
|
||||
})
|
||||
|
||||
test('A-Copilot has a single managed label', () => {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Bot, ChevronDown } from 'lucide-react'
|
||||
import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Bot, Check } from 'lucide-react'
|
||||
import { t } from '../i18n'
|
||||
import { agentModelLabel, type AgentModelOption } from '../features/workspace/agentModels'
|
||||
|
||||
@@ -10,23 +12,108 @@ export function AgentModelSelector({ models, provider, disabled, dark, onChange
|
||||
onChange: (provider: string) => void
|
||||
}): React.JSX.Element {
|
||||
const selected = models.find(model => model.provider === provider)
|
||||
const blocked = disabled || models.length === 0
|
||||
const [open, setOpen] = useState(false)
|
||||
const [position, setPosition] = useState({ left: 8, bottom: 8, width: 280, maxHeight: 320 })
|
||||
const buttonRef = useRef<HTMLButtonElement>(null)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
const menuId = useId()
|
||||
const visible = open && !blocked
|
||||
const close = (restoreFocus = false): void => {
|
||||
setOpen(false)
|
||||
if (restoreFocus) buttonRef.current?.focus({ preventScroll: true })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (blocked) setOpen(false)
|
||||
}, [blocked])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!visible || !buttonRef.current) return
|
||||
const bounds = buttonRef.current.getBoundingClientRect()
|
||||
const width = Math.min(320, window.innerWidth - 16)
|
||||
setPosition({
|
||||
left: Math.max(8, Math.min(bounds.left, window.innerWidth - width - 8)),
|
||||
bottom: window.innerHeight - bounds.top + 6,
|
||||
width,
|
||||
maxHeight: Math.max(0, Math.min(320, bounds.top - 14))
|
||||
})
|
||||
const items = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
|
||||
const index = Math.max(0, models.findIndex(model => model.provider === provider))
|
||||
items?.[index]?.focus({ preventScroll: true })
|
||||
}, [visible, models, provider])
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) return
|
||||
const outside = (event: Event): void => {
|
||||
const target = event.target as Node
|
||||
if (!menuRef.current?.contains(target) && !buttonRef.current?.contains(target)) setOpen(false)
|
||||
}
|
||||
const dismiss = (): void => setOpen(false)
|
||||
window.addEventListener('pointerdown', outside, true)
|
||||
window.addEventListener('contextmenu', outside)
|
||||
window.addEventListener('scroll', outside, true)
|
||||
window.addEventListener('resize', dismiss)
|
||||
window.addEventListener('blur', dismiss)
|
||||
return () => {
|
||||
window.removeEventListener('pointerdown', outside, true)
|
||||
window.removeEventListener('contextmenu', outside)
|
||||
window.removeEventListener('scroll', outside, true)
|
||||
window.removeEventListener('resize', dismiss)
|
||||
window.removeEventListener('blur', dismiss)
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
return (
|
||||
<div className="relative ml-auto min-w-0 max-w-[280px] flex-1">
|
||||
<Bot size={13} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2" aria-hidden="true" />
|
||||
<select
|
||||
<>
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
aria-label={t('에이전트 모델 선택')}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={visible}
|
||||
aria-controls={visible ? menuId : undefined}
|
||||
title={selected ? agentModelLabel(selected) : t('사용 가능한 모델 없음')}
|
||||
value={provider ?? ''}
|
||||
disabled={disabled || models.length === 0}
|
||||
onChange={event => onChange(event.target.value)}
|
||||
style={{ colorScheme: dark ? 'dark' : 'light' }}
|
||||
className={['h-7 w-full min-w-0 cursor-pointer appearance-none truncate rounded border py-0 pl-7 pr-7 text-[11px] outline-none transition focus-visible:border-[#8b5cf6] disabled:cursor-default disabled:opacity-45',
|
||||
dark ? 'border-white/10 bg-[#282828] text-white/75 hover:bg-[#303030]' : 'border-[#d8dee9] bg-[#f8f9fc] text-[#475569] hover:bg-[#eef0f5]'].join(' ')}
|
||||
disabled={blocked}
|
||||
onClick={() => setOpen(current => !current)}
|
||||
onKeyDown={event => {
|
||||
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { event.preventDefault(); setOpen(true) }
|
||||
else if (event.key === 'Escape') close()
|
||||
}}
|
||||
className={['grid size-7 shrink-0 cursor-pointer place-items-center rounded outline-none transition focus-visible:ring-1 focus-visible:ring-[#8b5cf6] disabled:cursor-default disabled:opacity-35',
|
||||
dark ? 'text-white/60 hover:bg-white/10 hover:text-white/90' : 'text-[#64748b] hover:bg-[#eef1f7] hover:text-[#111520]',
|
||||
visible ? dark ? 'bg-white/10 text-white/90' : 'bg-[#eef1f7] text-[#111520]' : ''].join(' ')}
|
||||
>
|
||||
{!models.length && <option value="">{t('사용 가능한 모델 없음')}</option>}
|
||||
{models.map(model => <option key={model.provider} value={model.provider}>{agentModelLabel(model)}</option>)}
|
||||
</select>
|
||||
<ChevronDown size={12} className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2" aria-hidden="true" />
|
||||
</div>
|
||||
<Bot size={15} aria-hidden="true" />
|
||||
</button>
|
||||
{visible && createPortal(
|
||||
<div ref={menuRef} id={menuId} role="menu" aria-label={t('에이전트 모델 선택')}
|
||||
className={['fixed z-[160] overflow-y-auto overscroll-contain rounded-md border py-1 text-[12px] font-medium shadow-[0_14px_32px_rgba(0,0,0,0.32)]',
|
||||
dark ? 'border-white/10 bg-[#252526] text-white/80' : 'border-[#d8dee9] bg-white text-[#374151]'].join(' ')}
|
||||
style={position}
|
||||
onContextMenu={event => { event.preventDefault(); event.stopPropagation() }}
|
||||
onKeyDown={event => {
|
||||
if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(true); return }
|
||||
if (event.key === 'Tab') { close(true); return }
|
||||
if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return
|
||||
event.preventDefault()
|
||||
const items = Array.from(menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]') ?? [])
|
||||
const current = items.indexOf(document.activeElement as HTMLButtonElement)
|
||||
const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1
|
||||
: (current + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length
|
||||
items[next]?.focus()
|
||||
}}
|
||||
>
|
||||
{models.map(model => <button key={model.provider} type="button" role="menuitemradio" aria-checked={model.provider === provider}
|
||||
title={agentModelLabel(model)} tabIndex={-1}
|
||||
onClick={() => { if (!blocked) { onChange(model.provider); close(true) } }}
|
||||
className={['flex h-8 w-full cursor-pointer items-center gap-2 px-3 text-left outline-none transition',
|
||||
dark ? 'hover:bg-[#37373d] hover:text-white focus:bg-[#37373d] focus:text-white' : 'hover:bg-[#eef1f7] hover:text-[#111520] focus:bg-[#eef1f7] focus:text-[#111520]'].join(' ')}>
|
||||
<Check size={13} className={['shrink-0', model.provider === provider ? '' : 'opacity-0'].join(' ')} aria-hidden="true" />
|
||||
<span className="min-w-0 truncate">{agentModelLabel(model)}</span>
|
||||
</button>)}
|
||||
</div>, document.body
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -460,6 +460,7 @@ export const QaInputBox = memo(function QaInputBox({
|
||||
{attachmentError && <p role="alert" className="break-words pt-2 text-[11px] text-[#ef4444]">{t(attachmentError)}</p>}
|
||||
{(attachmentsEnabled || onClearConversation || footerAction) && (
|
||||
<div className={['flex h-9 min-w-0 items-center gap-1 pt-1', dark ? 'text-white/50' : 'text-[#64748b]'].join(' ')}>
|
||||
{footerAction}
|
||||
{attachmentsEnabled && (
|
||||
<>
|
||||
<input ref={fileInputRef} type="file" multiple accept={[CHAT_ATTACHMENT_ACCEPT, ...(imagesEnabled ? [CHAT_IMAGE_ACCEPT] : [])].join(',')} className="hidden" aria-label={t('파일 첨부')} onChange={(event) => {
|
||||
@@ -473,7 +474,6 @@ export const QaInputBox = memo(function QaInputBox({
|
||||
{onClearConversation && (
|
||||
<button type="button" title={t('대화내역 삭제')} aria-label={t('대화내역 삭제')} disabled={clearDisabled || busy || readingAttachments} onClick={onClearConversation} className="grid size-7 cursor-pointer place-items-center rounded transition hover:bg-white/10 hover:text-[#ef4444] disabled:cursor-default disabled:opacity-35"><Trash2 size={15} /></button>
|
||||
)}
|
||||
{footerAction}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user