@vibe-forge/client 0.9.0 → 0.10.1

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

@@ -0,0 +1,209 @@
+/* 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'
+
+export const useSenderMonacoEditor = ({
+  editorRef,
+  modelPath,
+  value,
+  disabled,
+  sendShortcut,
+  onSendShortcut,
+  onInputChange,
+  onCursorChange,
+  onKeyDown,
+  onPaste,
+  sessionInfo,
+  resolveCompletionMatch,
+  resolveTokenDecorations
+}: {
+  editorRef: MutableRefObject<SenderEditorHandle | null>
+  modelPath: string
+  value: 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>
+  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 onSendShortcutRef = useRef(onSendShortcut)
+  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
+  onSendShortcutRef.current = onSendShortcut
+  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 handleDomPaste: EventListener = (event) => {
+        if (!(event instanceof ClipboardEvent)) {
+          return
+        }
+        void onPasteRef.current(event)
+      }
+      const nativeEditContext = domNode.querySelector('.native-edit-context')
+      const handleNativeKeyDown: EventListener = (event) => {
+        if (!(event instanceof KeyboardEvent)) {
+          return
+        }
+        if (isShortcutMatch(event, sendShortcutRef.current, navigator.platform.includes('Mac'))) {
+          event.preventDefault()
+          event.stopPropagation()
+          onSendShortcutRef.current()
+        }
+      }
+
+      domNode.addEventListener('paste', handleDomPaste)
+      nativeEditContext?.addEventListener('keydown', handleNativeKeyDown, true)
+      disposables.push({
+        dispose: () => {
+          domNode.removeEventListener('paste', handleDomPaste)
+          nativeEditContext?.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

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+const getThemeName = () => (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs')
+
+export const useSenderMonacoTheme = () => {
+  const [themeName, setThemeName] = useState(getThemeName)
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setThemeName(getThemeName())
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return themeName
+}

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

@@ -0,0 +1,54 @@
+.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);
+  }
+  &.thinking {
+    color: #fff;
+    border-color: #dc2626;
+    background: linear-gradient(180deg, #ef4444, #dc2626);
+  }
+  &.disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+    border-color: var(--border-color);
+    opacity: .72;
+  }
+}

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

@@ -0,0 +1,80 @@
+import '../sender-toolbar/SenderSelectShared.scss'
+import './SenderSubmitAction.scss'
+
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
+
+export function SenderSubmitAction({
+  isInlineEdit,
+  submitLoading,
+  submitLabel,
+  hasComposerContent,
+  hasSendText,
+  modelUnavailable,
+  isThinking,
+  resolvedSendShortcut,
+  isMac,
+  onCancel,
+  onSend,
+  onInterrupt
+}: {
+  isInlineEdit: boolean
+  submitLoading: boolean
+  submitLabel?: string
+  hasComposerContent: boolean
+  hasSendText: boolean
+  modelUnavailable: boolean
+  isThinking: boolean
+  resolvedSendShortcut: string
+  isMac: boolean
+  onCancel?: () => void
+  onSend: () => void
+  onInterrupt: () => void
+}) {
+  const { t } = useTranslation()
+
+  if (isInlineEdit) {
+    return (
+      <>
+        {onCancel != null && (
+          <Button autoInsertSpace={false} size='small' disabled={submitLoading} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+        )}
+        <Button
+          autoInsertSpace={false}
+          type='primary'
+          size='small'
+          loading={submitLoading}
+          disabled={!hasComposerContent}
+          onClick={onSend}
+        >
+          {submitLabel ?? t('chat.send')}
+        </Button>
+      </>
+    )
+  }
+
+  return (
+    <ShortcutTooltip
+      shortcut={resolvedSendShortcut}
+      isMac={isMac}
+      title={t('chat.sendShortcutTooltip')}
+      targetClassName='sender-control-tooltip-target'
+      enabled={!isThinking}
+    >
+      <div
+        className={`chat-send-btn ${hasSendText && !modelUnavailable ? 'active' : ''} ${isThinking ? 'thinking' : ''} ${
+          modelUnavailable ? 'disabled' : ''
+        }`.trim()}
+        onClick={modelUnavailable ? undefined : (isThinking ? onInterrupt : onSend)}
+      >
+        <span className='material-symbols-rounded'>
+          {isThinking ? 'stop_circle' : 'send'}
+        </span>
+      </div>
+    </ShortcutTooltip>
+  )
+}

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectBase.scss

@@ -0,0 +1,71 @@
+.model-select,
+.effort-select {
+  .ant-select-selection-search-input {
+    height: 100% !important;
+  }
+
+  .ant-select-arrow {
+    position: static !important;
+    inset: auto !important;
+    width: 28px;
+    min-width: 28px;
+    flex: 0 0 28px;
+    height: 100%;
+    margin-top: 0;
+    transform: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 12px;
+    color: var(--placeholder-color, #9ca3af);
+    line-height: 1;
+  }
+
+  &.ant-select-single .ant-select-selector {
+    padding-left: 8px !important;
+    padding-right: 0 !important;
+    padding-inline-start: 8px !important;
+    padding-inline-end: 0 !important;
+  }
+
+  &.ant-select-single .ant-select-selector .ant-select-selection-item,
+  &.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+    display: inline-flex !important;
+    align-items: center;
+    height: 100% !important;
+    min-width: 0;
+    line-height: 1 !important;
+    padding-right: 0 !important;
+    padding-inline-end: 0 !important;
+  }
+
+  &.ant-select-open,
+  &:hover,
+  &.ant-select-focused {
+    background: var(--sender-control-hover-bg);
+    color: var(--sender-control-hover-color);
+  }
+
+  &.ant-select-open .ant-select-selector,
+  &:hover .ant-select-selector,
+  &.ant-select-focused .ant-select-selector {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
+  &.ant-select-disabled .ant-select-selector {
+    background-color: transparent !important;
+    color: var(--sub-text-color, #9ca3af);
+    opacity: .56;
+  }
+}

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectShared.scss

@@ -0,0 +1,118 @@
+.sender-control-tooltip-target,
+.adapter-select-tooltip-target {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sender-select-shell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover {
+    .model-select,
+    .effort-select {
+      background: var(--sender-control-hover-bg);
+      color: var(--sender-control-hover-color);
+    }
+
+    .model-select .ant-select-selection-item,
+    .model-select .ant-select-selection-placeholder,
+    .model-select .sender-select-arrow,
+    .effort-select .ant-select-selection-item,
+    .effort-select .ant-select-selection-placeholder,
+    .effort-select .effort-option__text,
+    .effort-select .effort-option__icon,
+    .effort-select .sender-select-arrow {
+      color: var(--sender-control-hover-color) !important;
+      -webkit-text-fill-color: var(--sender-control-hover-color) !important;
+    }
+  }
+
+  &.sender-select-shell--adapter:not(.is-disabled):hover {
+    .adapter-select {
+      background: var(--sender-control-hover-bg);
+      color: var(--sender-control-hover-color);
+    }
+
+    .adapter-select .adapter-option__icon {
+      opacity: 1;
+    }
+  }
+}
+
+.sender-select-body-trigger {
+  position: absolute;
+  inset: 0 28px 0 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sender-control-radius);
+  background: transparent;
+  cursor: pointer;
+}
+
+.sender-select-arrow {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--placeholder-color, #9ca3af);
+  border-radius: 999px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.model-select,
+.effort-select,
+.adapter-select {
+  height: var(--sender-control-height);
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  flex-shrink: 0;
+  border-radius: var(--sender-control-radius);
+  color: var(--placeholder-color, #9ca3af);
+  font-size: 12px;
+  font-weight: 400;
+  transition: background-color .18s ease, color .18s ease;
+
+  .ant-select-selector {
+    height: var(--sender-control-height) !important;
+    min-height: var(--sender-control-height) !important;
+    border-radius: var(--sender-control-radius) !important;
+    border: none !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    padding: 0 0 0 8px !important;
+    display: flex;
+    align-items: center;
+    transition: background-color .18s ease, color .18s ease;
+  }
+
+  .ant-select-selection-wrap,
+  .ant-select-selection-search {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}
+
+.adapter-select-tooltip-target {
+  border-radius: var(--sender-control-radius);
+  height: var(--sender-control-height);
+}
+
+.adapter-select-tooltip-target--locked {
+  cursor: help;
+}

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.scss

@@ -0,0 +1,99 @@
+.file-input-hidden {
+  display: none;
+}
+
+.chat-input-toolbar {
+  --sender-control-height: 28px;
+  --sender-control-radius: 8px;
+  --sender-popup-radius: var(--sender-control-radius);
+  --sender-control-hover-bg: var(--sub-sub-bg-color, #e1e1e1);
+  --sender-control-active-bg: var(--sub-sub-bg-color, #e1e1e1);
+  --sender-control-hover-color: var(--sub-sub-text-color, #303030);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin: 4px -6px -6px;
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .toolbar-right--inline-edit {
+    gap: 8px;
+
+    .ant-btn {
+      border-radius: 8px;
+    }
+  }
+
+  .toolbar-left > .ant-select,
+  .toolbar-right > .ant-select {
+    align-self: center;
+  }
+}
+
+.toolbar-btn {
+  min-height: var(--sender-control-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0;
+  border-radius: var(--sender-control-radius);
+  cursor: pointer;
+  color: var(--sub-text-color, #9ca3af);
+  transition: all .2s ease;
+
+  &:hover {
+    color: var(--sender-control-hover-color);
+    background-color: var(--sender-control-hover-bg);
+  }
+
+  .material-symbols-rounded {
+    font-size: 18px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.toolbar-btn__text {
+  color: currentColor;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.toolbar-btn__icon-shell {
+  width: var(--sender-control-height);
+  height: var(--sender-control-height);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  transition: all .2s ease;
+}
+
+@media (max-width: 960px) {
+  .chat-input-toolbar {
+    .toolbar-btn__text {
+      display: none;
+    }
+  }
+}