@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/workspace-file-editor/WorkspaceFileEditorView.scss

@@ -0,0 +1,283 @@
+.workspace-file-editor {
+  --workspace-file-editor-breadcrumb-bg: var(--sub-bg-color);
+  gap: 0;
+
+  .dock-panel__title {
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: none;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+  }
+}
+
+.workspace-file-editor__state {
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--sub-text-color);
+  font-size: 12px;
+}
+
+.workspace-file-editor__breadcrumb {
+  min-width: 0;
+  height: 22px;
+  margin: 0;
+  padding: 0 0 0 4px;
+  display: flex;
+  align-items: center;
+  color: var(--sub-text-color);
+  font-family:
+    ui-monospace, sfmono-regular, 'SF Mono', menlo, consolas, monospace;
+  font-size: 12px;
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.workspace-file-editor__breadcrumb-part {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+
+  .is-current {
+    min-width: 0;
+    color: var(--text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.workspace-file-editor__breadcrumb-separator {
+  flex: 0 0 auto;
+  padding: 0 4px;
+  color: var(--sub-text-color);
+  opacity: .68;
+}
+
+.workspace-file-editor__editor {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+
+  .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;
+  }
+}
+
+.workspace-file-editor__image-preview {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  overflow: auto;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 6px;
+    object-fit: contain;
+  }
+}
+
+.workspace-file-editor__tabs {
+  min-width: 0;
+  width: 100%;
+  height: 28px;
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.workspace-file-editor__tab {
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 180px;
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: 6px;
+  color: var(--sub-text-color);
+  overflow: hidden;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover {
+    background-color: var(--nav-hover-bg);
+    color: var(--text-color);
+  }
+
+  &:hover,
+  &:focus-within {
+    .workspace-file-editor__tab-icon {
+      opacity: 0;
+      transform: scale(.82);
+    }
+
+    .workspace-file-editor__tab-close {
+      opacity: .74;
+      pointer-events: auto;
+      transform: scale(1);
+    }
+  }
+
+  &.is-active {
+    background-color: var(--sub-bg-color);
+    color: var(--text-color);
+  }
+}
+
+.workspace-file-editor__tab-main,
+.workspace-file-editor__tab-close {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.workspace-file-editor__tab-main {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 7px 0 3px;
+}
+
+.workspace-file-editor__tab-leading {
+  position: relative;
+  flex: 0 0 20px;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.workspace-file-editor__tab-icon {
+  flex: 0 0 auto;
+  font-size: 14px;
+  line-height: 1;
+  transition: opacity .14s ease, transform .14s ease;
+
+  &.is-docs,
+  &.is-markdown {
+    color: #0f766e;
+  }
+
+  &.is-typescript,
+  &.is-source {
+    color: #2563eb;
+  }
+
+  &.is-javascript {
+    color: #ca8a04;
+  }
+}
+
+.workspace-file-editor__tab-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-file-editor__tab-close {
+  position: absolute;
+  inset: 2px 0;
+  width: 20px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  font-size: 13px;
+  line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(.82);
+  transition:
+    background-color .14s ease,
+    opacity .14s ease,
+    transform .14s ease;
+
+  .material-symbols-rounded {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--nav-hover-bg) 72%, transparent);
+    opacity: 1;
+  }
+}
+
+.workspace-file-editor__menu-icon.material-symbols-rounded {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.workspace-file-editor-context-dropdown.ant-dropdown {
+  .ant-dropdown-menu {
+    min-width: 180px;
+    padding: 4px !important;
+  }
+
+  .ant-dropdown-menu-item {
+    min-height: 30px !important;
+    height: 30px;
+    display: flex !important;
+    align-items: center !important;
+    padding: 0 10px !important;
+    border-radius: 6px !important;
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
+
+  .ant-dropdown-menu-item-icon {
+    width: 18px;
+    min-width: 18px;
+    display: inline-flex !important;
+    align-items: center !important;
+    align-self: center !important;
+    justify-content: center !important;
+    margin-inline-end: 8px !important;
+    line-height: 0 !important;
+  }
+
+  .ant-dropdown-menu-title-content {
+    display: inline-flex !important;
+    align-items: center !important;
+    min-height: 18px;
+    padding-inline-start: 2px;
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
+}

package/src/components/chat/workspace-file-editor/WorkspaceFileEditorView.tsx

@@ -0,0 +1,165 @@
+import './WorkspaceFileEditorView.scss'
+
+import Editor from '@monaco-editor/react'
+import { App, Empty, Spin } from 'antd'
+import type { editor as MonacoEditorNamespace } from 'monaco-editor'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getApiErrorMessage, getSessionWorkspaceResourceUrl, getWorkspaceResourceUrl } from '#~/api'
+import {
+  CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT,
+  CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY,
+  CHAT_BOTTOM_DOCK_MAX_HEIGHT,
+  CHAT_BOTTOM_DOCK_MIN_HEIGHT
+} from '#~/components/chat/bottom-dock-constants'
+import { DockPanel } from '#~/components/dock-panel/DockPanel'
+import { monacoApi } from '#~/components/monaco/monaco-runtime'
+import { useMonacoTheme } from '#~/components/monaco/use-monaco-theme'
+
+import { WorkspaceFileBreadcrumb } from './WorkspaceFileBreadcrumb'
+import { WorkspaceFileTabs } from './WorkspaceFileTabs'
+import { useWorkspaceFileEditorState } from './use-workspace-file-editor-state'
+import { getWorkspaceFileEditorLanguage, isWorkspaceImagePreviewPath } from './workspace-file-editor-language'
+
+export function WorkspaceFileEditorView({
+  isOpen,
+  onClose,
+  onCloseAllPaths,
+  onCloseOtherPaths,
+  onClosePath,
+  onClosePathsToRight,
+  onSelectPath,
+  openPaths,
+  path,
+  sessionId
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCloseAllPaths: () => void
+  onCloseOtherPaths: (path: string) => void
+  onClosePath: (path: string) => void
+  onClosePathsToRight: (path: string) => void
+  onSelectPath: (path: string) => void
+  openPaths: string[]
+  path: string
+  sessionId?: string
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const themeName = useMonacoTheme()
+  const editorRef = useRef<MonacoEditorNamespace.IStandaloneCodeEditor | null>(null)
+  const saveHandlerRef = useRef<() => void>(() => undefined)
+  const [imageLoadFailed, setImageLoadFailed] = useState(false)
+  const language = useMemo(() => getWorkspaceFileEditorLanguage(path), [path])
+  const isImagePreview = useMemo(() => isWorkspaceImagePreviewPath(path), [path])
+  const imageUrl = useMemo(() => {
+    return sessionId != null && sessionId !== ''
+      ? getSessionWorkspaceResourceUrl(sessionId, path)
+      : getWorkspaceResourceUrl(path)
+  }, [path, sessionId])
+  const handleSaveError = useCallback((err: unknown) => {
+    void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+  }, [message, t])
+  const { data, draft, error, isLoading, saveNow, setDraft } = useWorkspaceFileEditorState({
+    enabled: !isImagePreview,
+    path,
+    sessionId,
+    onSaveError: handleSaveError
+  })
+
+  useEffect(() => {
+    setImageLoadFailed(false)
+  }, [imageUrl])
+
+  useEffect(() => {
+    saveHandlerRef.current = () => {
+      saveNow()
+    }
+  }, [saveNow])
+
+  const handleMount = (
+    editor: MonacoEditorNamespace.IStandaloneCodeEditor
+  ) => {
+    editorRef.current = editor
+    editor.addCommand(monacoApi.KeyMod.CtrlCmd | monacoApi.KeyCode.KeyS, () => {
+      saveHandlerRef.current()
+    })
+    editor.focus()
+  }
+
+  return (
+    <DockPanel
+      className='workspace-file-editor'
+      allowFullscreen
+      defaultHeight={CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT}
+      fullscreenEnterLabel={t('common.enterFullscreen')}
+      fullscreenExitLabel={t('common.exitFullscreen')}
+      isOpen={isOpen}
+      maxHeight={CHAT_BOTTOM_DOCK_MAX_HEIGHT}
+      minHeight={CHAT_BOTTOM_DOCK_MIN_HEIGHT}
+      title={
+        <WorkspaceFileTabs
+          activePath={path}
+          paths={openPaths.length > 0 ? openPaths : [path]}
+          onCloseAllPaths={onCloseAllPaths}
+          onCloseOtherPaths={onCloseOtherPaths}
+          onClosePath={onClosePath}
+          onClosePathsToRight={onClosePathsToRight}
+          onSelectPath={onSelectPath}
+        />
+      }
+      closeLabel={t('common.close')}
+      resizeLabel={t('chat.workspaceFileEditorResizePanel')}
+      storageKey={CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY}
+      onClose={onClose}
+    >
+      {isImagePreview && (
+        <>
+          <WorkspaceFileBreadcrumb path={path} />
+          {imageLoadFailed
+            ? (
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('chat.workspaceImagePreviewLoadFailed')} />
+            )
+            : (
+              <div className='workspace-file-editor__image-preview' data-dock-panel-no-resize='true'>
+                <img src={imageUrl} alt={path} onError={() => setImageLoadFailed(true)} />
+              </div>
+            )}
+        </>
+      )}
+      {!isImagePreview && isLoading && (
+        <div className='workspace-file-editor__state'>
+          <Spin size='small' />
+          <span>{t('chat.workspaceFileEditorLoading')}</span>
+        </div>
+      )}
+      {!isImagePreview && !isLoading && error != null && (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('chat.workspaceFileEditorLoadFailed')} />
+      )}
+      {!isImagePreview && !isLoading && error == null && data != null && (
+        <>
+          <WorkspaceFileBreadcrumb path={data.path} />
+          <div className='workspace-file-editor__editor' data-dock-panel-no-resize='true'>
+            <Editor
+              path={`workspace:///${data.path}`}
+              value={draft}
+              language={language}
+              theme={themeName}
+              loading={null}
+              onChange={value => setDraft(value ?? '')}
+              onMount={handleMount}
+              options={{
+                automaticLayout: true,
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                fontSize: 12,
+                lineHeight: 18,
+                tabSize: 2
+              }}
+            />
+          </div>
+        </>
+      )}
+    </DockPanel>
+  )
+}

package/src/components/chat/workspace-file-editor/WorkspaceFileTabs.tsx

@@ -0,0 +1,135 @@
+import { App, Dropdown } from 'antd'
+import type { MenuProps } from 'antd'
+import { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { copyTextWithFeedback } from '#~/utils/copy'
+
+import { getWorkspaceFileIconMeta } from '../workspace-drawer/workspace-drawer-icons'
+
+const getFileName = (path: string) => path.split('/').filter(Boolean).at(-1) ?? path
+const renderMenuIcon = (icon: string) =>
+  <span className='material-symbols-rounded workspace-file-editor__menu-icon'>{icon}</span>
+
+export function WorkspaceFileTabs({
+  activePath,
+  onCloseAllPaths,
+  onCloseOtherPaths,
+  onClosePath,
+  onClosePathsToRight,
+  onSelectPath,
+  paths
+}: {
+  activePath: string
+  onCloseAllPaths: () => void
+  onCloseOtherPaths: (path: string) => void
+  onClosePath: (path: string) => void
+  onClosePathsToRight: (path: string) => void
+  onSelectPath: (path: string) => void
+  paths: string[]
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const activeTabRef = useRef<HTMLSpanElement | null>(null)
+  const getMenuItems = useMemo(() => (path: string, index: number): MenuProps['items'] => [
+    {
+      key: 'copy-path',
+      label: t('chat.workspaceFileCopyPath'),
+      icon: renderMenuIcon('content_copy'),
+      onClick: () => {
+        void copyTextWithFeedback({
+          failureMessage: t('common.copyFailed'),
+          messageApi: message,
+          successMessage: t('chat.workspaceFilePathCopied'),
+          text: path
+        })
+      }
+    },
+    { type: 'divider' as const },
+    {
+      key: 'close',
+      label: t('common.close'),
+      icon: renderMenuIcon('close'),
+      onClick: () => onClosePath(path)
+    },
+    {
+      key: 'close-others',
+      label: t('chat.workspaceFileCloseOthers'),
+      icon: renderMenuIcon('tab_close_right'),
+      disabled: paths.length <= 1,
+      onClick: () => onCloseOtherPaths(path)
+    },
+    {
+      key: 'close-right',
+      label: t('chat.workspaceFileCloseRight'),
+      icon: renderMenuIcon('low_priority'),
+      disabled: index >= paths.length - 1,
+      onClick: () => onClosePathsToRight(path)
+    },
+    {
+      key: 'close-all',
+      label: t('chat.workspaceFileCloseAll'),
+      icon: renderMenuIcon('cancel_presentation'),
+      onClick: onCloseAllPaths
+    }
+  ], [
+    message,
+    onCloseAllPaths,
+    onCloseOtherPaths,
+    onClosePath,
+    onClosePathsToRight,
+    paths.length,
+    t
+  ])
+
+  useEffect(() => {
+    activeTabRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest'
+    })
+  }, [activePath])
+
+  return (
+    <div className='workspace-file-editor__tabs' data-dock-panel-no-resize='true'>
+      {paths.map((path, index) => {
+        const fileName = getFileName(path)
+        const icon = getWorkspaceFileIconMeta(fileName)
+        return (
+          <Dropdown
+            key={path}
+            menu={{ items: getMenuItems(path, index) }}
+            overlayClassName='workspace-file-editor-context-dropdown'
+            trigger={['contextMenu']}
+          >
+            <span
+              ref={activePath === path ? activeTabRef : undefined}
+              className={`workspace-file-editor__tab ${activePath === path ? 'is-active' : ''}`}
+              title={path}
+            >
+              <span className='workspace-file-editor__tab-leading'>
+                <span className={`material-symbols-rounded workspace-file-editor__tab-icon is-${icon.tone}`}>
+                  {icon.icon}
+                </span>
+                <button
+                  type='button'
+                  className='workspace-file-editor__tab-close'
+                  aria-label={`${t('common.close')} ${fileName}`}
+                  title={`${t('common.close')} ${fileName}`}
+                  onClick={() => {
+                    onClosePath(path)
+                  }}
+                >
+                  <span className='material-symbols-rounded'>close</span>
+                </button>
+              </span>
+              <button type='button' className='workspace-file-editor__tab-main' onClick={() => onSelectPath(path)}>
+                <span className='workspace-file-editor__tab-name'>{fileName}</span>
+              </button>
+            </span>
+          </Dropdown>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/chat/workspace-file-editor/use-workspace-file-editor-state.ts

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useSWR from 'swr'
+
+import { readSessionWorkspaceFile, readWorkspaceFile, updateSessionWorkspaceFile, updateWorkspaceFile } from '#~/api'
+
+const AUTOSAVE_DELAY_MS = 600
+
+export function useWorkspaceFileEditorState({
+  enabled = true,
+  onSaveError,
+  path,
+  sessionId
+}: {
+  enabled?: boolean
+  onSaveError: (err: unknown) => void
+  path: string
+  sessionId?: string
+}) {
+  const loadedPathRef = useRef<string | null>(null)
+  const failedContentRef = useRef<string | null>(null)
+  const [draft, setDraft] = useState('')
+  const [savedContent, setSavedContent] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const hasSession = sessionId != null && sessionId !== ''
+  const swrKey = enabled
+    ? hasSession
+      ? ['workspace-file-editor', sessionId, path]
+      : ['workspace-file-editor', 'workspace', path]
+    : null
+  const { data, error, isLoading, mutate } = useSWR(
+    swrKey,
+    () =>
+      sessionId != null && sessionId !== ''
+        ? readSessionWorkspaceFile(sessionId, path)
+        : readWorkspaceFile(path),
+    { revalidateOnFocus: false }
+  )
+  const isDirty = draft !== savedContent
+
+  useEffect(() => {
+    if (data == null) {
+      loadedPathRef.current = null
+      setDraft('')
+      setSavedContent('')
+      return
+    }
+
+    if (loadedPathRef.current === data.path) {
+      return
+    }
+
+    loadedPathRef.current = data.path
+    failedContentRef.current = null
+    setDraft(data.content)
+    setSavedContent(data.content)
+  }, [data])
+
+  const saveContent = useCallback(async (content: string) => {
+    if (!enabled) {
+      return
+    }
+    setIsSaving(true)
+    try {
+      const result = sessionId != null && sessionId !== ''
+        ? await updateSessionWorkspaceFile(sessionId, path, content)
+        : await updateWorkspaceFile(path, content)
+      failedContentRef.current = null
+      setSavedContent(result.content)
+      await mutate(result, false)
+    } catch (err) {
+      failedContentRef.current = content
+      onSaveError(err)
+    } finally {
+      setIsSaving(false)
+    }
+  }, [enabled, mutate, onSaveError, path, sessionId])
+
+  useEffect(() => {
+    if (
+      !isDirty ||
+      isSaving ||
+      isLoading ||
+      error != null ||
+      data == null ||
+      failedContentRef.current === draft
+    ) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      void saveContent(draft)
+    }, AUTOSAVE_DELAY_MS)
+
+    return () => window.clearTimeout(timer)
+  }, [data, draft, error, isDirty, isLoading, isSaving, saveContent])
+
+  const saveNow = useCallback(() => {
+    if (!enabled || !isDirty || isSaving) {
+      return
+    }
+    void saveContent(draft)
+  }, [draft, enabled, isDirty, isSaving, saveContent])
+
+  return {
+    data,
+    draft,
+    error,
+    isLoading,
+    isSaving,
+    saveNow,
+    setDraft
+  }
+}