@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

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

@@ -1,384 +0,0 @@
-/* eslint-disable max-lines */
-import './SenderInteractionPanel.scss'
-
-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) => {
-  switch (value) {
-    case 'allow_once':
-      return { icon: 'task_alt', tone: 'allow' as const }
-    case 'allow_session':
-      return { icon: 'history_toggle_off', tone: 'allow' as const }
-    case 'allow_project':
-      return { icon: 'folder_managed', tone: 'allow' as const }
-    case 'deny_once':
-      return { icon: 'cancel', tone: 'deny' as const }
-    case 'deny_session':
-      return { icon: 'block', tone: 'deny' as const }
-    case 'deny_project':
-      return { icon: 'folder_off', tone: 'deny' as const }
-    default:
-      return { icon: 'help', tone: 'neutral' as const }
-  }
-}
-
-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 [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 = 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(() => {
-    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 (
-    <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 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={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-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>
-          )
-        })}
-        {isPermissionInteraction && secondaryPermissionOptionItems.length > 0 && (
-          <Button
-            type='text'
-            className='interaction-panel__toggle'
-            onClick={handleTogglePermissionOptions}
-          >
-            <span className='interaction-panel__toggle-label'>
-              {showAllPermissionOptions ? t('chat.permissionCollapseOptions') : t('chat.permissionExpandOptions')}
-            </span>
-            <span className='interaction-panel__toggle-icon material-symbols-rounded'>
-              {showAllPermissionOptions ? 'expand_less' : 'expand_more'}
-            </span>
-          </Button>
-        )}
-      </div>
-    </ChatComposerCard>
-  )
-}

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

@@ -1,47 +0,0 @@
-.chat-input-monaco {
-  width: 100%;
-
-  &__editor {
-    width: 100%;
-  }
-
-  &__token--agent {
-    color: var(--primary-text-color);
-    font-weight: 600;
-  }
-
-  &__token--tool {
-    color: var(--success-color);
-    font-weight: 600;
-  }
-
-  &__token--command {
-    color: var(--warning-color);
-    font-weight: 600;
-  }
-
-  .monaco-editor,
-  .monaco-editor-background,
-  .monaco-editor .margin,
-  .monaco-editor .inputarea.ime-input {
-    background: transparent !important;
-  }
-
-  .monaco-editor .scroll-decoration,
-  .monaco-editor .minimap-shadow-visible {
-    box-shadow: none !important;
-  }
-
-  .monaco-editor .suggest-widget {
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow:
-      0 12px 30px rgba(15, 23, 42, .12),
-      0 3px 10px rgba(15, 23, 42, .08);
-  }
-
-  .monaco-editor .suggest-widget .codicon.codicon-symbol-interface::before {
-    content: '\eb08';
-  }
-}

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

@@ -1,139 +0,0 @@
-import './SenderMonacoEditor.scss'
-
-import Editor from '@monaco-editor/react'
-import { useId } from 'react'
-import type { MutableRefObject } from 'react'
-
-import type { SessionInfo } from '@vibe-forge/types'
-
-import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
-import type { SenderCompletionMatch, SenderTokenDecoration } from '#~/components/chat/sender/@utils/sender-completion'
-import { FONT_SIZE, LINE_HEIGHT } from './monaco-runtime'
-import { useSenderMonacoEditor } from './use-sender-monaco-editor'
-
-export function SenderMonacoEditor({
-  editorRef,
-  sessionInfo,
-  value,
-  placeholder,
-  disabled,
-  sendShortcut,
-  sendShortcutDisabled,
-  onSendShortcut,
-  secondarySendShortcut,
-  onSecondarySendShortcut,
-  onInputChange,
-  onCursorChange,
-  onKeyDown,
-  onPaste,
-  resolveCompletionMatch,
-  resolveTokenDecorations
-}: {
-  editorRef: MutableRefObject<SenderEditorHandle | null>
-  sessionInfo?: SessionInfo | null
-  value: string
-  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
-  onPaste: (event: ClipboardEvent) => void | Promise<void>
-  resolveCompletionMatch: (
-    value: string,
-    cursorOffset: number | null,
-    sessionInfo?: SessionInfo | null
-  ) => SenderCompletionMatch | null
-  resolveTokenDecorations: (value: string) => SenderTokenDecoration[]
-}) {
-  const editorId = useId()
-  const modelPath = `inmemory://vf-chat-sender/${editorId}.md`
-  const {
-    themeName,
-    editorHeight,
-    handleEditorMount
-  } = useSenderMonacoEditor({
-    editorRef,
-    modelPath,
-    value,
-    disabled,
-    sendShortcut,
-    sendShortcutDisabled,
-    onSendShortcut,
-    secondarySendShortcut,
-    onSecondarySendShortcut,
-    onInputChange,
-    onCursorChange,
-    onKeyDown,
-    onPaste,
-    sessionInfo,
-    resolveCompletionMatch,
-    resolveTokenDecorations
-  })
-
-  return (
-    <div className='chat-input-monaco'>
-      <div className='chat-input-monaco__editor' style={{ height: `${editorHeight}px` }}>
-        <Editor
-          path={modelPath}
-          language='markdown'
-          theme={themeName}
-          value={value}
-          loading={null}
-          onMount={handleEditorMount}
-          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 },
-            placeholder,
-            readOnly: disabled,
-            renderFinalNewline: 'off',
-            renderLineHighlight: 'none',
-            roundedSelection: true,
-            scrollBeyondLastLine: false,
-            selectionHighlight: false,
-            scrollbar: {
-              alwaysConsumeMouseWheel: false,
-              horizontal: 'hidden',
-              useShadows: false,
-              vertical: 'hidden'
-            },
-            suggest: {
-              preview: true,
-              selectionMode: 'whenQuickSuggestion'
-            },
-            suggestOnTriggerCharacters: true,
-            wordWrap: 'on',
-            wordWrapColumn: 80,
-            wrappingIndent: 'same'
-          }}
-        />
-      </div>
-    </div>
-  )
-}

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

@@ -1,83 +0,0 @@
-import type { IRange, editor as MonacoEditorNamespace, languages } from 'monaco-editor'
-
-import type { SessionInfo } from '@vibe-forge/types'
-
-import type { SenderEditorSelection } from '#~/components/chat/sender/@types/sender-editor'
-import type { SenderCompletionMatch } from '#~/components/chat/sender/@utils/sender-completion'
-import { monacoApi } from '#~/components/monaco/monaco-runtime'
-
-export const FONT_SIZE = 13
-export const LINE_HEIGHT = 20
-export const MIN_EDITOR_HEIGHT = LINE_HEIGHT
-export const MAX_EDITOR_HEIGHT = LINE_HEIGHT * 10
-
-export const clampEditorHeight = (height: number) =>
-  Math.min(MAX_EDITOR_HEIGHT, Math.max(MIN_EDITOR_HEIGHT, Math.ceil(height)))
-
-export const toMonacoRange = (
-  model: MonacoEditorNamespace.ITextModel,
-  start: number,
-  end: number
-) => {
-  const rangeStart = model.getPositionAt(start)
-  const rangeEnd = model.getPositionAt(end)
-
-  return new monacoApi.Range(rangeStart.lineNumber, rangeStart.column, rangeEnd.lineNumber, rangeEnd.column)
-}
-
-export const getSelectionOffsets = (
-  editor: MonacoEditorNamespace.IStandaloneCodeEditor
-): SenderEditorSelection | null => {
-  const model = editor.getModel()
-  const selection = editor.getSelection()
-
-  if (model == null || selection == null) {
-    return null
-  }
-
-  return {
-    start: model.getOffsetAt(selection.getStartPosition()),
-    end: model.getOffsetAt(selection.getEndPosition())
-  }
-}
-
-export const registerSenderCompletionProvider = ({
-  monaco,
-  resolveCompletionMatch,
-  sessionInfo
-}: {
-  monaco: typeof monacoApi
-  resolveCompletionMatch: (
-    value: string,
-    cursorOffset: number | null,
-    sessionInfo?: SessionInfo | null
-  ) => SenderCompletionMatch | null
-  sessionInfo?: SessionInfo | null
-}) =>
-  monaco.languages.registerCompletionItemProvider('markdown', {
-    triggerCharacters: ['/', '@', '#'],
-    provideCompletionItems: (model, position) => {
-      const cursorOffset = model.getOffsetAt(position)
-      const match = resolveCompletionMatch(model.getValue(), cursorOffset, sessionInfo)
-
-      if (match == null || match.items.length === 0) {
-        return { suggestions: [] }
-      }
-
-      const replaceRange = toMonacoRange(model, match.replaceStart, match.cursorOffset)
-      const suggestions: languages.CompletionItem[] = match.items.map((item) => ({
-        label: item.label,
-        kind: item.kind === 'command'
-          ? monaco.languages.CompletionItemKind.Function
-          : item.kind === 'agent'
-          ? monaco.languages.CompletionItemKind.Interface
-          : monaco.languages.CompletionItemKind.Keyword,
-        insertText: `${item.value} `,
-        range: replaceRange as IRange,
-        filterText: `${match.trigger}${item.value}`,
-        sortText: `0-${item.value.toLowerCase()}`
-      }))
-
-      return { suggestions }
-    }
-  })

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

@@ -1,48 +0,0 @@
-import type { editor as MonacoEditorNamespace } from 'monaco-editor'
-import type { MutableRefObject } from 'react'
-import { useEffect } from 'react'
-
-import type { SenderEditorHandle, SenderEditorSelection } from '#~/components/chat/sender/@types/sender-editor'
-
-import { getSelectionOffsets, toMonacoRange } from './monaco-runtime'
-
-export const useSenderEditorHandle = ({
-  editorRef,
-  standaloneEditorRef,
-  value,
-  disabledRef
-}: {
-  editorRef: MutableRefObject<SenderEditorHandle | null>
-  standaloneEditorRef: MutableRefObject<MonacoEditorNamespace.IStandaloneCodeEditor | null>
-  value: string
-  disabledRef: MutableRefObject<boolean>
-}) => {
-  useEffect(() => {
-    editorRef.current = {
-      focus: () => {
-        standaloneEditorRef.current?.focus()
-      },
-      setSelection: (selection: SenderEditorSelection) => {
-        const editor = standaloneEditorRef.current
-        const model = editor?.getModel()
-
-        if (editor == null || model == null) {
-          return
-        }
-
-        editor.setSelection(toMonacoRange(model, selection.start, selection.end))
-      },
-      getSelection: () => {
-        const editor = standaloneEditorRef.current
-
-        return editor == null ? null : getSelectionOffsets(editor)
-      },
-      getValue: () => standaloneEditorRef.current?.getValue() ?? value,
-      isDisabled: () => disabledRef.current
-    }
-
-    return () => {
-      editorRef.current = null
-    }
-  }, [disabledRef, editorRef, standaloneEditorRef, value])
-}