fix: open agent model picker above chat attachment controls

2026-10-20 11:45:12 +09:00
parent a8dd23675a
commit 065de83ffd
3 changed files with 153 additions and 30 deletions
@@ -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>