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

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

@@ -1,286 +0,0 @@
-/* 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'
-import type { SessionInfo } from '@vibe-forge/types'
-import type { IDisposable, editor as MonacoEditorNamespace } from 'monaco-editor'
-import type { MutableRefObject } from 'react'
-import { useEffect, useRef, useState } from 'react'
-import {
-  MIN_EDITOR_HEIGHT,
-  clampEditorHeight,
-  getSelectionOffsets,
-  registerSenderCompletionProvider,
-  toMonacoRange
-} from './monaco-runtime'
-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,
-  onPaste,
-  sessionInfo,
-  resolveCompletionMatch,
-  resolveTokenDecorations
-}: {
-  editorRef: MutableRefObject<SenderEditorHandle | null>
-  modelPath: string
-  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
-  onPaste: (event: ClipboardEvent) => void | Promise<void>
-  sessionInfo?: SessionInfo | null
-  resolveCompletionMatch: (
-    value: string,
-    cursorOffset: number | null,
-    sessionInfo?: SessionInfo | null
-  ) => SenderCompletionMatch | null
-  resolveTokenDecorations: (value: string) => SenderTokenDecoration[]
-}) => {
-  const themeName = useSenderMonacoTheme()
-  const [editorHeight, setEditorHeight] = useState(MIN_EDITOR_HEIGHT)
-  const standaloneEditorRef = useRef<MonacoEditorNamespace.IStandaloneCodeEditor | null>(null)
-  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)
-  const onPasteRef = useRef(onPaste)
-  const resolveCompletionMatchRef = useRef(resolveCompletionMatch)
-  const resolveTokenDecorationsRef = useRef(resolveTokenDecorations)
-  const sessionInfoRef = useRef(sessionInfo)
-
-  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
-  onPasteRef.current = onPaste
-  resolveCompletionMatchRef.current = resolveCompletionMatch
-  resolveTokenDecorationsRef.current = resolveTokenDecorations
-  sessionInfoRef.current = sessionInfo
-
-  useSenderEditorHandle({ editorRef, standaloneEditorRef, value, disabledRef })
-
-  useEffect(() => {
-    standaloneEditorRef.current?.updateOptions({
-      readOnly: disabled,
-      domReadOnly: disabled
-    })
-  }, [disabled])
-
-  const applyDecorations = () => {
-    const editor = standaloneEditorRef.current
-    const model = editor?.getModel()
-
-    if (editor == null || model == null) {
-      return
-    }
-
-    const nextDecorations = resolveTokenDecorationsRef.current(model.getValue()).map(({ start, end, className }) => ({
-      range: toMonacoRange(model, start, end),
-      options: { inlineClassName: className }
-    }))
-
-    if (decorationsRef.current == null) {
-      decorationsRef.current = editor.createDecorationsCollection(nextDecorations)
-      return
-    }
-
-    decorationsRef.current.set(nextDecorations)
-  }
-
-  useEffect(() => {
-    applyDecorations()
-  }, [value])
-
-  useEffect(() => {
-    return () => {
-      const editor = standaloneEditorRef.current as
-        | (MonacoEditorNamespace.IStandaloneCodeEditor & {
-          __vfDispose?: () => void
-        })
-        | null
-
-      editor?.__vfDispose?.()
-      decorationsRef.current?.clear()
-      decorationsRef.current = null
-      standaloneEditorRef.current = null
-    }
-  }, [])
-
-  const handleEditorMount = (
-    editor: MonacoEditorNamespace.IStandaloneCodeEditor,
-    monaco: typeof import('monaco-editor')
-  ) => {
-    standaloneEditorRef.current = editor
-    setEditorHeight(clampEditorHeight(editor.getContentHeight()))
-    applyDecorations()
-
-    const disposables: IDisposable[] = [registerSenderCompletionProvider({
-      monaco,
-      resolveCompletionMatch: (nextValue, cursorOffset) =>
-        resolveCompletionMatchRef.current(nextValue, cursorOffset, sessionInfoRef.current)
-    })]
-    const domNode = editor.getDomNode()
-
-    if (domNode != null) {
-      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 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 (
-          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()
-        }
-      }
-
-      document.addEventListener('paste', handleDocumentPaste, true)
-      for (const inputTarget of inputTargets) {
-        inputTarget.addEventListener('paste', handleNativePaste, true)
-        inputTarget.addEventListener('keydown', handleNativeKeyDown, true)
-      }
-      disposables.push({
-        dispose: () => {
-          document.removeEventListener('paste', handleDocumentPaste, true)
-          for (const inputTarget of inputTargets) {
-            inputTarget.removeEventListener('paste', handleNativePaste, true)
-            inputTarget.removeEventListener('keydown', handleNativeKeyDown, true)
-          }
-        }
-      })
-    }
-
-    disposables.push(
-      editor.onDidContentSizeChange(() => {
-        setEditorHeight(clampEditorHeight(editor.getContentHeight()))
-      }),
-      editor.onDidChangeModelContent(() => {
-        const cursorOffset = getSelectionOffsets(editor)?.end ?? null
-        const nextValue = editor.getValue()
-
-        onInputChangeRef.current(nextValue, cursorOffset)
-
-        if (resolveCompletionMatchRef.current(nextValue, cursorOffset, sessionInfoRef.current) != null) {
-          requestAnimationFrame(() => {
-            if (standaloneEditorRef.current === editor) {
-              editor.trigger('vf.sender', 'editor.action.triggerSuggest', {})
-            }
-          })
-        }
-      }),
-      editor.onDidChangeCursorSelection(() => {
-        onCursorChangeRef.current(getSelectionOffsets(editor)?.end ?? null)
-      }),
-      editor.onKeyDown((event) => {
-        onKeyDownRef.current(event.browserEvent)
-      })
-    )
-    ;(editor as MonacoEditorNamespace.IStandaloneCodeEditor & { __vfDispose?: () => void }).__vfDispose = () => {
-      for (const item of disposables) {
-        item.dispose()
-      }
-    }
-  }
-
-  return {
-    themeName,
-    editorHeight,
-    handleEditorMount
-  }
-}

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

@@ -1,73 +0,0 @@
-import * as monacoApi from 'monaco-editor'
-import type { editor as MonacoEditorNamespace } from 'monaco-editor'
-import { useEffect, useState } from 'react'
-
-const SENDER_MONACO_LIGHT_THEME = 'vf-sender-light'
-const SENDER_MONACO_DARK_THEME = 'vf-sender-dark'
-const HEX_COLOR_PATTERN = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i
-
-const readCssColor = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
-  const value = styles.getPropertyValue(name).trim()
-
-  if (HEX_COLOR_PATTERN.test(value)) {
-    return value
-  }
-
-  return fallback
-}
-
-const buildSenderMonacoTheme = (isDark: boolean): MonacoEditorNamespace.IStandaloneThemeData => {
-  const styles = window.getComputedStyle(document.documentElement)
-  const background = readCssColor(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
-  const foreground = readCssColor(styles, '--text-color', isDark ? '#ffffff' : '#000000')
-  const placeholder = readCssColor(styles, '--placeholder-color', isDark ? '#575859' : '#9ca3af')
-  const primaryColor = readCssColor(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
-  const selectionBackground = readCssColor(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
-
-  return {
-    base: isDark ? 'vs-dark' : 'vs',
-    colors: {
-      'editor.background': background,
-      'editor.foreground': foreground,
-      'editor.inactiveSelectionBackground': selectionBackground,
-      'editor.placeholder.foreground': placeholder,
-      'editor.selectionBackground': selectionBackground,
-      'editorCursor.foreground': primaryColor
-    },
-    inherit: false,
-    rules: []
-  }
-}
-
-const defineSenderMonacoTheme = (isDark: boolean) => {
-  const themeName = isDark ? SENDER_MONACO_DARK_THEME : SENDER_MONACO_LIGHT_THEME
-
-  monacoApi.editor.defineTheme(themeName, buildSenderMonacoTheme(isDark))
-
-  return themeName
-}
-
-const getThemeName = () => defineSenderMonacoTheme(document.documentElement.classList.contains('dark'))
-
-export const useSenderMonacoTheme = () => {
-  const [themeName, setThemeName] = useState(getThemeName)
-
-  useEffect(() => {
-    const syncThemeName = () => {
-      setThemeName(getThemeName())
-    }
-    const observer = new MutationObserver(syncThemeName)
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    })
-    syncThemeName()
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  return themeName
-}

package/src/components/chat/sender/@components/sender-submit-action/SenderSubmitAction.scss

@@ -1,163 +0,0 @@
-.chat-send-btn {
-  width: var(--sender-control-height);
-  min-width: var(--sender-control-height);
-  height: var(--sender-control-height);
-  padding: 0;
-  border-radius: var(--sender-control-radius);
-  border: 1px solid var(--border-color);
-  background: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all .2s;
-  align-self: center;
-  flex-shrink: 0;
-
-  .material-symbols-rounded {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    font-size: 17px;
-    transition: transform .2s ease;
-  }
-
-  &:hover {
-    color: var(--primary-color, #6366f1);
-    border-color: color-mix(
-      in srgb,
-      var(--primary-color, #6366f1) 48%,
-      var(--sub-border-color) 52%
-    );
-  }
-
-  &:not(.thinking):hover .material-symbols-rounded {
-    transform: rotate(-45deg);
-  }
-
-  &.active {
-    color: var(--primary-color, #6366f1);
-    border-color: var(--primary-color, #6366f1);
-  }
-  &.stop {
-    color: #fff;
-    border-color: #dc2626;
-    background: linear-gradient(180deg, #ef4444, #dc2626);
-
-    &:hover {
-      color: #fff;
-      border-color: #dc2626;
-      background: linear-gradient(180deg, #ef4444, #dc2626);
-    }
-
-    .material-symbols-rounded {
-      transform: none;
-    }
-  }
-  &.disabled {
-    color: #9ca3af;
-    cursor: not-allowed;
-    border-color: var(--border-color);
-    opacity: .72;
-  }
-
-  &.blocked {
-    cursor: not-allowed;
-
-    &:hover {
-      color: #9ca3af;
-      border-color: var(--border-color);
-      background: color-mix(
-        in srgb,
-        var(--bg-color, #fff) 92%,
-        var(--sub-bg-color, #f3f4f6) 8%
-      );
-    }
-
-    .material-symbols-rounded {
-      transform: none;
-    }
-  }
-}
-
-.chat-confirm-btn.ant-btn {
-  height: var(--sender-control-height);
-  padding: 0 10px;
-  border-radius: var(--sender-control-radius);
-  border-color: var(--border-color);
-  background: var(--bg-color, #fff);
-  box-shadow: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  font-weight: 500;
-
-  .material-symbols-rounded {
-    font-size: 15px;
-    line-height: 1;
-  }
-
-  &:hover,
-  &:focus {
-    border-color: color-mix(
-      in srgb,
-      var(--primary-color, #2563eb) 38%,
-      var(--border-color) 62%
-    );
-    color: var(--text-color, #1f2937);
-    background: color-mix(
-      in srgb,
-      var(--bg-color, #fff) 90%,
-      var(--sub-bg-color, #eff6ff) 10%
-    );
-  }
-}
-
-.sender-send-tooltip {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.sender-send-tooltip__row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sender-send-tooltip__label {
-  min-width: 0;
-  color: inherit;
-  font-size: inherit;
-  line-height: 1.4;
-}
-
-.sender-send-tooltip-popover {
-  pointer-events: none;
-
-  .ant-tooltip-inner {
-    padding: 8px 10px !important;
-  }
-
-  .shortcut-display {
-    background: rgba(255, 255, 255, .12);
-    border-color: rgba(255, 255, 255, .16);
-    color: rgba(255, 255, 255, .92);
-    box-shadow: none;
-    flex: 0 0 auto;
-  }
-}
-
-@media (max-width: 960px) {
-  .chat-send-btn {
-    width: 24px;
-    min-width: 24px;
-    height: 24px;
-
-    .material-symbols-rounded {
-      font-size: 14px;
-    }
-  }
-}