@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/sender/@components/sender-interaction-panel/SenderInteractionPanel.tsx

@@ -1,12 +1,18 @@
+/* eslint-disable max-lines */
 import './SenderInteractionPanel.scss'
 
-import { Button } from 'antd'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react'
+
+import { Button, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 
 import type { AskUserQuestionParams } from '@vibe-forge/core'
 import type { PermissionInteractionContext } from '@vibe-forge/types'
 
+import { ChatComposerCard } from '#~/components/chat/ChatComposerCard'
+import { getLoopedIndex } from '#~/hooks/use-roving-focus-list'
+
 const primaryOptionValues = new Set(['allow_once', 'allow_session', 'deny_once'])
 
 const getOptionMeta = (value?: string) => {
@@ -28,118 +34,351 @@ const getOptionMeta = (value?: string) => {
   }
 }
 
+const renderInfoButton = (title: string) => (
+  <Tooltip title={title} placement='top' destroyOnHidden>
+    <span
+      className='material-symbols-rounded interaction-panel__info-trigger'
+      aria-label={title}
+      role='img'
+      onMouseDown={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+      }}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+      }}
+    >
+      info
+    </span>
+  </Tooltip>
+)
+
+const getInteractionOptionKey = (
+  option: { label: string; value?: string },
+  idx: number
+) => option.value ?? `${idx}:${option.label}`
+
 export function SenderInteractionPanel({
   interactionRequest,
+  activeOptionIndex,
   permissionContext,
   deniedTools,
   reasons: _reasons,
+  onActiveOptionIndexChange,
+  onMoveActiveOption,
   onInteractionResponse
 }: {
   interactionRequest: { id: string; payload: AskUserQuestionParams }
+  activeOptionIndex: number
   permissionContext?: PermissionInteractionContext
   deniedTools: string[]
   reasons: string[]
+  onActiveOptionIndexChange: (index: number) => void
+  onMoveActiveOption: (delta: number) => void
   onInteractionResponse?: (id: string, data: string | string[]) => void
 }) {
   const { t } = useTranslation()
-  const [showAllOptions, setShowAllOptions] = useState(false)
+  const [showAllPermissionOptions, setShowAllPermissionOptions] = useState(false)
+  const isPermissionInteraction = permissionContext != null
+  const options = interactionRequest.payload.options ?? []
+  const optionsContainerRef = useRef<HTMLDivElement | null>(null)
+  const normalizedActiveOptionIndex = options.length === 0
+    ? -1
+    : Math.min(Math.max(activeOptionIndex, 0), options.length - 1)
+
+  const optionItems = useMemo(() =>
+    options.map((option, index) => ({
+      option,
+      index,
+      meta: getOptionMeta(option.value)
+    })), [options])
+  const primaryPermissionOptionItems = useMemo(
+    () => optionItems.filter(({ option }) => primaryOptionValues.has(option.value ?? '')),
+    [optionItems]
+  )
+  const secondaryPermissionOptionItems = useMemo(
+    () => optionItems.filter(({ option }) => !primaryOptionValues.has(option.value ?? '')),
+    [optionItems]
+  )
+  const activePermissionOptionIsSecondary = isPermissionInteraction &&
+    secondaryPermissionOptionItems.some(({ index }) => index === normalizedActiveOptionIndex)
+  const visibleOptionItems = isPermissionInteraction
+    ? ((showAllPermissionOptions || activePermissionOptionIsSecondary) ? optionItems : primaryPermissionOptionItems)
+    : optionItems
 
   const toolNames = [
     permissionContext?.subjectLabel?.trim() ?? '',
     ...deniedTools.map(tool => tool.trim())
   ].filter((value, index, values) => value !== '' && values.indexOf(value) === index)
   const toolSummary = toolNames.join('、')
-  const title = toolSummary === ''
-    ? interactionRequest.payload.question
-    : t('chat.permissionRequestTitleWithTool', { tool: toolSummary })
-  const primaryOptions =
-    interactionRequest.payload.options?.filter(option => primaryOptionValues.has(option.value ?? '')) ?? []
-  const secondaryOptions =
-    interactionRequest.payload.options?.filter(option => !primaryOptionValues.has(option.value ?? '')) ?? []
+  const title = isPermissionInteraction && toolSummary !== ''
+    ? t('chat.permissionRequestTitleWithTool', { tool: toolSummary })
+    : interactionRequest.payload.question
+
+  const focusOptionAtIndex = (index: number, attempt = 0) => {
+    const option = optionsContainerRef.current?.querySelector<HTMLButtonElement>(
+      `.interaction-panel__option[data-option-index="${index}"]`
+    )
+
+    if (option != null) {
+      option.focus()
+      return
+    }
+
+    if (attempt >= 5) {
+      return
+    }
+
+    window.setTimeout(() => {
+      focusOptionAtIndex(index, attempt + 1)
+    }, 40)
+  }
 
   useEffect(() => {
-    setShowAllOptions(false)
+    setShowAllPermissionOptions(false)
   }, [interactionRequest.id])
 
+  useEffect(() => {
+    if (activePermissionOptionIsSecondary) {
+      setShowAllPermissionOptions(true)
+    }
+  }, [activePermissionOptionIsSecondary])
+
+  useEffect(() => {
+    if (!isPermissionInteraction || options.length === 0) {
+      return
+    }
+    let cancelled = false
+    const targetIndex = normalizedActiveOptionIndex >= 0 ? normalizedActiveOptionIndex : 0
+
+    const focusWhenReady = (attempt = 0) => {
+      if (cancelled) {
+        return
+      }
+
+      const option = optionsContainerRef.current?.querySelector<HTMLButtonElement>(
+        `.interaction-panel__option[data-option-index="${targetIndex}"]`
+      )
+
+      if (option != null) {
+        option.focus()
+        return
+      }
+
+      if (attempt >= 5) {
+        return
+      }
+
+      window.setTimeout(() => {
+        focusWhenReady(attempt + 1)
+      }, 40)
+    }
+
+    focusWhenReady()
+
+    return () => {
+      cancelled = true
+    }
+  }, [
+    interactionRequest.id,
+    isPermissionInteraction,
+    normalizedActiveOptionIndex,
+    options.length,
+    showAllPermissionOptions
+  ])
+
+  const handleSubmitOption = (option: { label: string; value?: string }) => {
+    onInteractionResponse?.(interactionRequest.id, option.value ?? option.label)
+  }
+
+  const moveOptionFocus = (delta: number, focus = isPermissionInteraction) => {
+    if (options.length === 0) {
+      return
+    }
+
+    const sourceIndex = normalizedActiveOptionIndex >= 0 ? normalizedActiveOptionIndex : 0
+    const nextIndex = getLoopedIndex(sourceIndex, delta, options.length)
+    onMoveActiveOption(delta)
+    if (focus) {
+      focusOptionAtIndex(nextIndex)
+    }
+  }
+
+  const handleNavButtonKeyDown = (
+    event: ReactKeyboardEvent<HTMLElement>,
+    delta: number
+  ) => {
+    if ((event.key === 'ArrowUp' && delta < 0) || (event.key === 'ArrowDown' && delta > 0)) {
+      event.preventDefault()
+      moveOptionFocus(delta)
+    }
+  }
+
+  const handleOptionKeyDown = (
+    event: ReactKeyboardEvent<HTMLElement>,
+    optionIndex: number
+  ) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      onActiveOptionIndexChange(getLoopedIndex(optionIndex, 1, options.length))
+      focusOptionAtIndex(getLoopedIndex(optionIndex, 1, options.length))
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      onActiveOptionIndexChange(getLoopedIndex(optionIndex, -1, options.length))
+      focusOptionAtIndex(getLoopedIndex(optionIndex, -1, options.length))
+    }
+  }
+
+  const handleTogglePermissionOptions = () => {
+    setShowAllPermissionOptions((current) => {
+      const next = !current
+
+      if (!next && activePermissionOptionIsSecondary) {
+        const fallbackIndex = primaryPermissionOptionItems.at(-1)?.index ?? 0
+        onActiveOptionIndexChange(fallbackIndex)
+      }
+
+      return next
+    })
+  }
+
+  const showOptionControls = options.length > 1
+
   return (
-    <div className='interaction-panel'>
-      <div className='interaction-panel__header'>
-        <div className='interaction-question'>
-          {title}
+    <ChatComposerCard
+      className={[
+        'interaction-panel',
+        isPermissionInteraction ? 'interaction-panel--permission' : 'interaction-panel--question'
+      ].filter(Boolean).join(' ')}
+      summaryClassName='interaction-panel__summary'
+      bodyClassName='interaction-panel__body'
+      narrow
+      summary={
+        <div className='interaction-panel__header'>
+          <div className='interaction-panel__title-wrap'>
+            {!isPermissionInteraction && (
+              <span className='material-symbols-rounded interaction-panel__title-icon'>
+                help
+              </span>
+            )}
+            <div className='interaction-question'>{title}</div>
+          </div>
+          {showOptionControls && (
+            <div className='interaction-panel__nav' aria-label={t('chat.interactionOptionNavigation')}>
+              <Tooltip title={t('chat.interactionOptionPrevious')} placement='top' destroyOnHidden>
+                <button
+                  type='button'
+                  className='interaction-panel__nav-button'
+                  aria-label={t('chat.interactionOptionPrevious')}
+                  onMouseDown={(event) => {
+                    event.preventDefault()
+                  }}
+                  onKeyDown={(event) => handleNavButtonKeyDown(event, -1)}
+                  onClick={() => moveOptionFocus(-1)}
+                >
+                  <span className='material-symbols-rounded'>keyboard_arrow_up</span>
+                </button>
+              </Tooltip>
+              <Tooltip title={t('chat.interactionOptionNext')} placement='top' destroyOnHidden>
+                <button
+                  type='button'
+                  className='interaction-panel__nav-button'
+                  aria-label={t('chat.interactionOptionNext')}
+                  onMouseDown={(event) => {
+                    event.preventDefault()
+                  }}
+                  onKeyDown={(event) => handleNavButtonKeyDown(event, 1)}
+                  onClick={() => moveOptionFocus(1)}
+                >
+                  <span className='material-symbols-rounded'>keyboard_arrow_down</span>
+                </button>
+              </Tooltip>
+            </div>
+          )}
         </div>
-      </div>
-      <div className='interaction-panel__options'>
-        {primaryOptions.map((option: { label: string; value?: string; description?: string }) => {
-          const meta = getOptionMeta(option.value)
+      }
+    >
+      <div ref={optionsContainerRef} className='interaction-panel__options'>
+        {visibleOptionItems.map(({ option, index, meta }) => {
+          const optionKey = getInteractionOptionKey(option, index)
+          const isActive = index === normalizedActiveOptionIndex
+
+          if (isPermissionInteraction) {
+            return (
+              <Button
+                key={optionKey}
+                block
+                data-option-index={index}
+                tabIndex={isActive ? 0 : -1}
+                className={[
+                  'interaction-panel__option',
+                  `interaction-panel__option--${meta.tone}`,
+                  isActive ? 'is-active' : ''
+                ].filter(Boolean).join(' ')}
+                onFocus={() => onActiveOptionIndexChange(index)}
+                onKeyDown={(event) => handleOptionKeyDown(event, index)}
+                onClick={() => handleSubmitOption(option)}
+              >
+                <span className='interaction-panel__option-icon material-symbols-rounded'>{meta.icon}</span>
+                <span className='interaction-panel__option-copy'>
+                  <span className='interaction-panel__option-text'>
+                    <span className='interaction-panel__option-label'>{option.label}</span>
+                    {option.description && (
+                      <span className='interaction-panel__option-description'>
+                        {option.description}
+                      </span>
+                    )}
+                  </span>
+                </span>
+              </Button>
+            )
+          }
 
           return (
             <Button
-              key={option.value ?? option.label}
-              className={[
-                'interaction-panel__option',
-                `interaction-panel__option--${meta.tone}`
-              ].join(' ')}
-              onClick={() => onInteractionResponse?.(interactionRequest.id, option.value ?? option.label)}
+              key={optionKey}
+              block
+              data-option-index={index}
+              tabIndex={isActive ? 0 : -1}
+              className={`interaction-panel__option interaction-panel__option--question ${isActive ? 'is-active' : ''}`
+                .trim()}
+              onFocus={() => onActiveOptionIndexChange(index)}
+              onKeyDown={(event) => handleOptionKeyDown(event, index)}
+              onClick={() => handleSubmitOption(option)}
             >
-              <span className='interaction-panel__option-icon material-symbols-rounded'>{meta.icon}</span>
-              <div className='interaction-panel__option-copy'>
-                <div className='interaction-panel__option-text'>
-                  <div className='interaction-panel__option-label'>{option.label}</div>
-                  {option.description && (
-                    <div className='interaction-panel__option-description'>
-                      {option.description}
-                    </div>
-                  )}
-                </div>
-              </div>
+              <span className='interaction-panel__option-main'>
+                <span className='interaction-panel__option-index' aria-hidden='true'>
+                  {index + 1}.
+                </span>
+                <span className='interaction-panel__option-label'>{option.label}</span>
+                {option.description && (
+                  <span className='interaction-panel__option-side'>
+                    {renderInfoButton(option.description)}
+                  </span>
+                )}
+              </span>
             </Button>
           )
         })}
-        {showAllOptions && secondaryOptions.length > 0 && (
-          <div className='interaction-panel__secondary'>
-            {secondaryOptions.map((option: { label: string; value?: string; description?: string }) => {
-              const meta = getOptionMeta(option.value)
-
-              return (
-                <Button
-                  key={option.value ?? option.label}
-                  className={[
-                    'interaction-panel__option',
-                    `interaction-panel__option--${meta.tone}`
-                  ].join(' ')}
-                  onClick={() => onInteractionResponse?.(interactionRequest.id, option.value ?? option.label)}
-                >
-                  <span className='interaction-panel__option-icon material-symbols-rounded'>{meta.icon}</span>
-                  <div className='interaction-panel__option-copy'>
-                    <div className='interaction-panel__option-text'>
-                      <div className='interaction-panel__option-label'>{option.label}</div>
-                      {option.description && (
-                        <div className='interaction-panel__option-description'>
-                          {option.description}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </Button>
-              )
-            })}
-          </div>
-        )}
-        {secondaryOptions.length > 0 && (
+        {isPermissionInteraction && secondaryPermissionOptionItems.length > 0 && (
           <Button
             type='text'
             className='interaction-panel__toggle'
-            onClick={() => setShowAllOptions(current => !current)}
+            onClick={handleTogglePermissionOptions}
           >
             <span className='interaction-panel__toggle-label'>
-              {showAllOptions ? t('chat.permissionCollapseOptions') : t('chat.permissionExpandOptions')}
+              {showAllPermissionOptions ? t('chat.permissionCollapseOptions') : t('chat.permissionExpandOptions')}
             </span>
             <span className='interaction-panel__toggle-icon material-symbols-rounded'>
-              {showAllOptions ? 'expand_less' : 'expand_more'}
+              {showAllPermissionOptions ? 'expand_less' : 'expand_more'}
             </span>
           </Button>
         )}
       </div>
-    </div>
+    </ChatComposerCard>
   )
 }

package/src/components/chat/sender/@components/sender-monaco-editor/SenderMonacoEditor.tsx

@@ -18,7 +18,10 @@ export function SenderMonacoEditor({
   placeholder,
   disabled,
   sendShortcut,
+  sendShortcutDisabled,
   onSendShortcut,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   onInputChange,
   onCursorChange,
   onKeyDown,
@@ -32,7 +35,10 @@ export function SenderMonacoEditor({
   placeholder: string
   disabled: boolean
   sendShortcut: string
+  sendShortcutDisabled?: boolean
   onSendShortcut: () => void
+  secondarySendShortcut?: string
+  onSecondarySendShortcut?: () => void
   onInputChange: (value: string, cursorOffset: number | null) => void
   onCursorChange: (cursorOffset: number | null) => void
   onKeyDown: (event: KeyboardEvent) => void
@@ -56,7 +62,10 @@ export function SenderMonacoEditor({
     value,
     disabled,
     sendShortcut,
+    sendShortcutDisabled,
     onSendShortcut,
+    secondarySendShortcut,
+    onSecondarySendShortcut,
     onInputChange,
     onCursorChange,
     onKeyDown,
@@ -79,17 +88,25 @@ export function SenderMonacoEditor({
           options={{
             ariaLabel: placeholder,
             automaticLayout: true,
+            bracketPairColorization: { enabled: false },
             domReadOnly: disabled,
             folding: false,
             fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
             fontSize: FONT_SIZE,
             glyphMargin: false,
+            guides: {
+              bracketPairs: false,
+              highlightActiveBracketPair: false,
+              indentation: false
+            },
             hideCursorInOverviewRuler: true,
             lineDecorationsWidth: 0,
             lineHeight: LINE_HEIGHT,
             lineNumbers: 'off',
             lineNumbersMinChars: 0,
+            matchBrackets: 'never',
             minimap: { enabled: false },
+            occurrencesHighlight: 'off',
             overviewRulerBorder: false,
             overviewRulerLanes: 0,
             padding: { top: 0, bottom: 0 },
@@ -99,6 +116,7 @@ export function SenderMonacoEditor({
             renderLineHighlight: 'none',
             roundedSelection: true,
             scrollBeyondLastLine: false,
+            selectionHighlight: false,
             scrollbar: {
               alwaysConsumeMouseWheel: false,
               horizontal: 'hidden',

package/src/components/chat/sender/@components/sender-monaco-editor/use-sender-monaco-editor.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-
 import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
 import type { SenderCompletionMatch, SenderTokenDecoration } from '#~/components/chat/sender/@utils/sender-completion'
 import { isShortcutMatch } from '#~/utils/shortcutUtils'
@@ -17,13 +16,21 @@ import {
 import { useSenderEditorHandle } from './use-sender-editor-handle'
 import { useSenderMonacoTheme } from './use-sender-monaco-theme'
 
+const hasPastedImageFile = (clipboardData?: DataTransfer | null) => {
+  return Array.from(clipboardData?.items ?? [])
+    .some(item => item.kind === 'file' && item.type.startsWith('image/'))
+}
+
 export const useSenderMonacoEditor = ({
   editorRef,
   modelPath,
   value,
   disabled,
   sendShortcut,
+  sendShortcutDisabled,
   onSendShortcut,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   onInputChange,
   onCursorChange,
   onKeyDown,
@@ -37,7 +44,10 @@ export const useSenderMonacoEditor = ({
   value: string
   disabled: boolean
   sendShortcut: string
+  sendShortcutDisabled?: boolean
   onSendShortcut: () => void
+  secondarySendShortcut?: string
+  onSecondarySendShortcut?: () => void
   onInputChange: (value: string, cursorOffset: number | null) => void
   onCursorChange: (cursorOffset: number | null) => void
   onKeyDown: (event: KeyboardEvent) => void
@@ -56,7 +66,10 @@ export const useSenderMonacoEditor = ({
   const decorationsRef = useRef<MonacoEditorNamespace.IEditorDecorationsCollection | null>(null)
   const disabledRef = useRef(disabled)
   const sendShortcutRef = useRef(sendShortcut)
+  const sendShortcutDisabledRef = useRef(Boolean(sendShortcutDisabled))
   const onSendShortcutRef = useRef(onSendShortcut)
+  const secondarySendShortcutRef = useRef(secondarySendShortcut)
+  const onSecondarySendShortcutRef = useRef(onSecondarySendShortcut)
   const onInputChangeRef = useRef(onInputChange)
   const onCursorChangeRef = useRef(onCursorChange)
   const onKeyDownRef = useRef(onKeyDown)
@@ -67,7 +80,10 @@ export const useSenderMonacoEditor = ({
 
   disabledRef.current = disabled
   sendShortcutRef.current = sendShortcut
+  sendShortcutDisabledRef.current = Boolean(sendShortcutDisabled)
   onSendShortcutRef.current = onSendShortcut
+  secondarySendShortcutRef.current = secondarySendShortcut
+  onSecondarySendShortcutRef.current = onSecondarySendShortcut
   onInputChangeRef.current = onInputChange
   onCursorChangeRef.current = onCursorChange
   onKeyDownRef.current = onKeyDown
@@ -141,30 +157,91 @@ export const useSenderMonacoEditor = ({
     const domNode = editor.getDomNode()
 
     if (domNode != null) {
-      const handleDomPaste: EventListener = (event) => {
-        if (!(event instanceof ClipboardEvent)) {
+      const inputTargets = Array.from(
+        domNode.querySelectorAll<HTMLElement>('.native-edit-context, textarea.inputarea')
+      )
+      const shouldHandleImagePaste = (event: ClipboardEvent, requireFocus: boolean) => {
+        if (!hasPastedImageFile(event.clipboardData)) {
+          return false
+        }
+
+        if (!requireFocus) {
+          return true
+        }
+
+        const activeElement = document.activeElement
+
+        return editor.hasTextFocus() ||
+          (activeElement != null && domNode.contains(activeElement)) ||
+          (event.target instanceof Node && domNode.contains(event.target))
+      }
+      const handleImagePaste = (
+        event: ClipboardEvent,
+        { requireFocus, stopImmediately }: { requireFocus: boolean; stopImmediately: boolean }
+      ) => {
+        if (!shouldHandleImagePaste(event, requireFocus)) {
           return
         }
+
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (stopImmediately) {
+          event.stopImmediatePropagation()
+        }
+
         void onPasteRef.current(event)
       }
-      const nativeEditContext = domNode.querySelector('.native-edit-context')
+      const handleDocumentPaste = (event: ClipboardEvent) => {
+        if (!shouldHandleImagePaste(event, true)) {
+          return
+        }
+
+        handleImagePaste(event, { requireFocus: true, stopImmediately: true })
+      }
+      const handleNativePaste: EventListener = (event) => {
+        if (!(event instanceof ClipboardEvent)) {
+          return
+        }
+
+        handleImagePaste(event, { requireFocus: false, stopImmediately: true })
+      }
       const handleNativeKeyDown: EventListener = (event) => {
         if (!(event instanceof KeyboardEvent)) {
           return
         }
-        if (isShortcutMatch(event, sendShortcutRef.current, navigator.platform.includes('Mac'))) {
+        if (
+          secondarySendShortcutRef.current != null &&
+          onSecondarySendShortcutRef.current != null &&
+          isShortcutMatch(event, secondarySendShortcutRef.current, navigator.platform.includes('Mac'))
+        ) {
+          event.preventDefault()
+          event.stopPropagation()
+          onSecondarySendShortcutRef.current()
+          return
+        }
+        if (
+          !sendShortcutDisabledRef.current &&
+          isShortcutMatch(event, sendShortcutRef.current, navigator.platform.includes('Mac'))
+        ) {
           event.preventDefault()
           event.stopPropagation()
           onSendShortcutRef.current()
         }
       }
 
-      domNode.addEventListener('paste', handleDomPaste)
-      nativeEditContext?.addEventListener('keydown', handleNativeKeyDown, true)
+      document.addEventListener('paste', handleDocumentPaste, true)
+      for (const inputTarget of inputTargets) {
+        inputTarget.addEventListener('paste', handleNativePaste, true)
+        inputTarget.addEventListener('keydown', handleNativeKeyDown, true)
+      }
       disposables.push({
         dispose: () => {
-          domNode.removeEventListener('paste', handleDomPaste)
-          nativeEditContext?.removeEventListener('keydown', handleNativeKeyDown, true)
+          document.removeEventListener('paste', handleDocumentPaste, true)
+          for (const inputTarget of inputTargets) {
+            inputTarget.removeEventListener('paste', handleNativePaste, true)
+            inputTarget.removeEventListener('keydown', handleNativeKeyDown, true)
+          }
         }
       })
     }