@vibe-forge/client 0.9.0 → 0.10.1

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

@@ -0,0 +1,178 @@
+.chat-input-wrapper--permission {
+  .interaction-panel {
+    margin-bottom: 0;
+  }
+}
+
+.interaction-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 6px;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  background-color: var(--input-bg, #f9fafb);
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__secondary {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    overflow: hidden;
+    animation: interaction-panel-secondary-enter .2s ease;
+    transform-origin: top;
+  }
+
+  &__option.ant-btn {
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    border-color: var(--border-color);
+    background: var(--bg-color);
+    box-shadow: none;
+    text-align: left;
+  }
+
+  &__option.ant-btn:hover,
+  &__option.ant-btn:focus {
+    border-color: rgba(59, 130, 246, .3);
+    background: var(--bg-color);
+  }
+
+  &__option--allow.ant-btn {
+    .interaction-panel__option-icon {
+      color: #15803d;
+      background-color: rgba(22, 163, 74, .1);
+    }
+  }
+
+  &__option--deny.ant-btn {
+    .interaction-panel__option-icon {
+      color: #b91c1c;
+      background-color: rgba(220, 38, 38, .08);
+    }
+  }
+
+  &__option--neutral.ant-btn {
+    .interaction-panel__option-icon {
+      color: #6b7280;
+      background-color: rgba(15, 23, 42, .06);
+    }
+  }
+
+  &__option-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 999px;
+    flex: 0 0 auto;
+    align-self: center;
+    font-size: 13px;
+  }
+
+  &__option-copy {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__option-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  &__option-label {
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.35;
+    color: var(--text-color);
+    word-break: break-word;
+  }
+
+  &__option-description {
+    font-size: 10px;
+    line-height: 1.25;
+    color: var(--placeholder-color, #9ca3af);
+    word-break: break-word;
+  }
+
+  &__toggle.ant-btn {
+    height: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    width: fit-content;
+    padding: 0;
+    color: var(--placeholder-color, #9ca3af);
+  }
+
+  &__toggle.ant-btn:hover,
+  &__toggle.ant-btn:focus {
+    color: var(--sub-text-color, #6b7280);
+    background: transparent;
+  }
+
+  &__toggle-label {
+    font-size: 10px;
+    line-height: 1.3;
+  }
+
+  &__toggle-icon {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@keyframes interaction-panel-secondary-enter {
+  from {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    max-height: 240px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.interaction-question {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--text-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .interaction-panel__secondary {
+    animation: none;
+  }
+}
+
+html.dark {
+  .interaction-panel {
+    --input-bg: #1f1f1f;
+  }
+}

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

@@ -0,0 +1,145 @@
+import './SenderInteractionPanel.scss'
+
+import { Button } from 'antd'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { AskUserQuestionParams } from '@vibe-forge/core'
+import type { PermissionInteractionContext } from '@vibe-forge/types'
+
+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 }
+  }
+}
+
+export function SenderInteractionPanel({
+  interactionRequest,
+  permissionContext,
+  deniedTools,
+  reasons: _reasons,
+  onInteractionResponse
+}: {
+  interactionRequest: { id: string; payload: AskUserQuestionParams }
+  permissionContext?: PermissionInteractionContext
+  deniedTools: string[]
+  reasons: string[]
+  onInteractionResponse?: (id: string, data: string | string[]) => void
+}) {
+  const { t } = useTranslation()
+  const [showAllOptions, setShowAllOptions] = useState(false)
+
+  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 ?? '')) ?? []
+
+  useEffect(() => {
+    setShowAllOptions(false)
+  }, [interactionRequest.id])
+
+  return (
+    <div className='interaction-panel'>
+      <div className='interaction-panel__header'>
+        <div className='interaction-question'>
+          {title}
+        </div>
+      </div>
+      <div className='interaction-panel__options'>
+        {primaryOptions.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>
+          )
+        })}
+        {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 && (
+          <Button
+            type='text'
+            className='interaction-panel__toggle'
+            onClick={() => setShowAllOptions(current => !current)}
+          >
+            <span className='interaction-panel__toggle-label'>
+              {showAllOptions ? t('chat.permissionCollapseOptions') : t('chat.permissionExpandOptions')}
+            </span>
+            <span className='interaction-panel__toggle-icon material-symbols-rounded'>
+              {showAllOptions ? 'expand_less' : 'expand_more'}
+            </span>
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,47 @@
+.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

@@ -0,0 +1,121 @@
+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,
+  onSendShortcut,
+  onInputChange,
+  onCursorChange,
+  onKeyDown,
+  onPaste,
+  resolveCompletionMatch,
+  resolveTokenDecorations
+}: {
+  editorRef: MutableRefObject<SenderEditorHandle | null>
+  sessionInfo?: SessionInfo | null
+  value: string
+  placeholder: string
+  disabled: boolean
+  sendShortcut: string
+  onSendShortcut: () => 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,
+    onSendShortcut,
+    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,
+            domReadOnly: disabled,
+            folding: false,
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: FONT_SIZE,
+            glyphMargin: false,
+            hideCursorInOverviewRuler: true,
+            lineDecorationsWidth: 0,
+            lineHeight: LINE_HEIGHT,
+            lineNumbers: 'off',
+            lineNumbersMinChars: 0,
+            minimap: { enabled: false },
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            padding: { top: 0, bottom: 0 },
+            placeholder,
+            readOnly: disabled,
+            renderFinalNewline: 'off',
+            renderLineHighlight: 'none',
+            roundedSelection: true,
+            scrollBeyondLastLine: 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

@@ -0,0 +1,99 @@
+import { loader } from '@monaco-editor/react'
+import type { IRange, editor as MonacoEditorNamespace, languages } from 'monaco-editor'
+import * as monacoApi from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+
+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'
+
+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
+
+const monacoRuntime = globalThis as typeof globalThis & {
+  MonacoEnvironment?: {
+    getWorker: () => Worker
+  }
+}
+
+if (monacoRuntime.MonacoEnvironment == null) {
+  monacoRuntime.MonacoEnvironment = {
+    getWorker: () => new EditorWorker()
+  }
+}
+
+loader.config({ monaco: monacoApi })
+
+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

@@ -0,0 +1,48 @@
+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])
+}