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

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

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

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

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

@@ -1,113 +0,0 @@
-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
-  }
-}