@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/workspace/ContextFilePicker.tsx

@@ -1,62 +1,15 @@
 import './ContextFilePicker.scss'
 
-import { App, Button, Empty, Modal, Spin, Tree } from 'antd'
-import type { DataNode } from 'antd/es/tree'
+import { Button, Modal } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { listSessionWorkspaceTree, listWorkspaceTree } from '#~/api'
+import type { ContextPickerFile } from './context-file-types'
+import { toContextPickerFiles } from './context-file-types'
+import { ProjectFileTree } from './project-file-tree/ProjectFileTree'
+import type { ProjectFileTreeSelection } from './project-file-tree/project-file-tree-types'
 
-export interface ContextPickerFile {
-  path: string
-  name?: string
-}
-
-interface ContextFileTreeNode extends DataNode {
-  key: string
-  path: string
-  title: string
-  children?: ContextFileTreeNode[]
-  isLeaf?: boolean
-  disableCheckbox?: boolean
-}
-
-const replaceNodeChildren = (
-  nodes: ContextFileTreeNode[],
-  targetPath: string,
-  children: ContextFileTreeNode[]
-): ContextFileTreeNode[] => {
-  return nodes.map((node) => {
-    if (node.path === targetPath) {
-      return {
-        ...node,
-        children
-      }
-    }
-    if (node.children == null) {
-      return node
-    }
-    return {
-      ...node,
-      children: replaceNodeChildren(node.children, targetPath, children)
-    }
-  })
-}
-
-const toTreeNodes = (entries: Awaited<ReturnType<typeof listWorkspaceTree>>['entries']): ContextFileTreeNode[] =>
-  entries.map(entry => ({
-    key: entry.path,
-    path: entry.path,
-    title: entry.name,
-    isLeaf: entry.type === 'file',
-    disableCheckbox: entry.type !== 'file'
-  }))
-
-const toPendingFiles = (paths: string[]): ContextPickerFile[] =>
-  paths.map(path => ({
-    path,
-    name: path.split('/').pop() ?? path
-  }))
+export type { ContextPickerFile } from './context-file-types'
 
 export function ContextFilePicker({
   open,
@@ -74,83 +27,48 @@ export function ContextFilePicker({
   onConfirm: (files: ContextPickerFile[]) => void
 }) {
   const { t } = useTranslation()
-  const { message } = App.useApp()
-  const [checkedKeys, setCheckedKeys] = useState<string[]>(selectedPaths)
-  const [treeData, setTreeData] = useState<ContextFileTreeNode[]>([])
-  const [loadingRoot, setLoadingRoot] = useState(false)
-  const loadWorkspaceTree = async (path?: string) => {
-    if (sessionId != null && sessionId !== '') {
-      return await listSessionWorkspaceTree(sessionId, path)
-    }
-    return await listWorkspaceTree(path)
-  }
+  const [checkedPaths, setCheckedPaths] = useState<string[]>(selectedPaths)
+  const [selectedFiles, setSelectedFiles] = useState<ContextPickerFile[]>([])
+  const selectedPathsKey = selectedPaths.join('\0')
 
   useEffect(() => {
     if (!open) {
       return
     }
 
-    setCheckedKeys(selectedPaths)
-    setLoadingRoot(true)
-    void loadWorkspaceTree()
-      .then((result) => {
-        setTreeData(toTreeNodes(result.entries))
-      })
-      .catch(() => {
-        void message.error(t('chat.contextPickerLoadFailed'))
-      })
-      .finally(() => {
-        setLoadingRoot(false)
-      })
-  }, [message, open, selectedPaths, sessionId, t])
+    const nextPaths = selectedPathsKey === '' ? [] : selectedPathsKey.split('\0')
+    setCheckedPaths(nextPaths)
+    setSelectedFiles(toContextPickerFiles(nextPaths, []))
+  }, [open, selectedPathsKey])
 
-  const loadData = async (node: DataNode) => {
-    const path = String(node.key)
-    const result = await loadWorkspaceTree(path)
-    setTreeData(prev => replaceNodeChildren(prev, path, toTreeNodes(result.entries)))
+  const handleSelectionChange = (selection: ProjectFileTreeSelection) => {
+    setCheckedPaths(selection.paths)
+    setSelectedFiles(toContextPickerFiles(selection.paths, selection.nodes))
+  }
+  const handleConfirm = () => {
+    onConfirm(toContextPickerFiles(checkedPaths, selectedFiles))
   }
 
   const body = (
     <div className={`context-file-picker ${variant === 'inline' ? 'context-file-picker--inline' : ''}`.trim()}>
       <div className='context-file-picker__body'>
-        {loadingRoot
-          ? (
-            <div className='context-file-picker__loading'>
-              <Spin size='small' />
-              <span>{t('chat.contextPickerLoading')}</span>
-            </div>
-          )
-          : treeData.length === 0
-          ? (
-            <Empty
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description={t('chat.contextPickerEmpty')}
-            />
-          )
-          : (
-            <Tree
-              blockNode
-              checkable
-              checkStrictly
-              treeData={treeData}
-              checkedKeys={checkedKeys}
-              loadData={loadData}
-              switcherIcon={
-                <span className='material-symbols-rounded context-file-picker__switcher'>chevron_right</span>
-              }
-              onCheck={(keys) => {
-                const nextKeys = Array.isArray(keys) ? keys : keys.checked
-                setCheckedKeys(nextKeys.map(String))
-              }}
-            />
-          )}
+        {open && (
+          <ProjectFileTree
+            selectableTypes='all'
+            selectedPaths={checkedPaths}
+            selectionMode='multiple'
+            sessionId={sessionId}
+            showLoadingState
+            onSelectionChange={handleSelectionChange}
+          />
+        )}
       </div>
       {variant === 'inline' && (
         <div className='context-file-picker__footer'>
           <Button size='small' onClick={onCancel}>
             {t('common.cancel')}
           </Button>
-          <Button type='primary' size='small' onClick={() => onConfirm(toPendingFiles(checkedKeys))}>
+          <Button type='primary' size='small' onClick={handleConfirm}>
             {t('chat.contextPickerConfirm')}
           </Button>
         </div>
@@ -170,7 +88,7 @@ export function ContextFilePicker({
       cancelText={t('common.cancel')}
       width={640}
       onCancel={onCancel}
-      onOk={() => onConfirm(toPendingFiles(checkedKeys))}
+      onOk={handleConfirm}
       className='context-file-picker-modal'
     >
       {body}

package/src/components/workspace/context-file-types.ts

@@ -0,0 +1,36 @@
+import type { WorkspaceTreeEntry } from '#~/api'
+
+export interface ContextPickerFile {
+  path: string
+  name?: string
+  size?: number
+}
+
+export interface ContextReferenceRequest {
+  id: number
+  files: ContextPickerFile[]
+}
+
+type ContextPickerFileEntry = Pick<ContextPickerFile, 'name' | 'path'>
+
+export const getContextFileName = (path: string) => path.split(/[\\/]/).filter(Boolean).at(-1) ?? path
+
+export const toContextPickerFile = (
+  entry: ContextPickerFileEntry | Pick<WorkspaceTreeEntry, 'name' | 'path'>
+): ContextPickerFile => ({
+  path: entry.path,
+  name: entry.name || getContextFileName(entry.path)
+})
+
+export const toContextPickerFiles = (
+  paths: string[],
+  entries: Array<ContextPickerFileEntry | Pick<WorkspaceTreeEntry, 'name' | 'path'>>
+): ContextPickerFile[] => {
+  const entryByPath = new Map(entries.map(entry => [entry.path, entry]))
+  return paths.map((path) => {
+    const entry = entryByPath.get(path)
+    return entry == null
+      ? { path, name: getContextFileName(path) }
+      : toContextPickerFile(entry)
+  })
+}

package/src/components/workspace/project-file-tree/ProjectFileTree.scss

@@ -0,0 +1,298 @@
+.project-file-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.project-file-tree__item {
+  min-width: 0;
+}
+
+.project-file-tree__row {
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px 0 calc(4px + var(--project-tree-depth, 0) * 14px);
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  appearance: none;
+  font-family: inherit;
+  text-align: left;
+  transition: background-color .18s ease, color .18s ease, transform .18s ease;
+
+  &.is-directory,
+  &.is-file {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(
+      --project-tree-row-hover-bg,
+      var(--workspace-drawer-row-hover-bg, rgba(59, 130, 246, .09))
+    );
+  }
+
+  &.is-disabled {
+    color: var(--sub-text-color);
+    cursor: default;
+    opacity: .58;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &.is-selected {
+    background-color: var(
+      --project-tree-row-selected-bg,
+      var(--workspace-drawer-row-selected-bg, rgba(59, 130, 246, .14))
+    );
+
+    &.has-selected-before {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &.has-selected-after {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &.is-directory.is-expanded .project-file-tree__icon-wrap {
+    transform: rotate(-4deg) scale(1.04);
+  }
+}
+
+.project-file-tree__row--loading {
+  justify-content: flex-start;
+  color: var(--sub-text-color);
+}
+
+.project-file-tree__icon,
+.project-file-tree__icon-wrap,
+.project-file-tree__icon-badge,
+.project-file-tree__link-indicator {
+  transition:
+    color .18s ease,
+    transform .18s ease,
+    font-variation-settings .18s ease;
+
+  &.is-folder {
+    color: #d97706;
+  }
+
+  &.is-source,
+  &.is-typescript,
+  &.is-api {
+    color: #2563eb;
+  }
+
+  &.is-javascript {
+    color: #ca8a04;
+  }
+
+  &.is-style,
+  &.is-component {
+    color: #db2777;
+  }
+
+  &.is-docs,
+  &.is-markdown {
+    color: #0f766e;
+  }
+
+  &.is-ai,
+  &.is-config,
+  &.is-json {
+    color: #7c3aed;
+  }
+
+  &.is-package,
+  &.is-app,
+  &.is-route {
+    color: #0891b2;
+  }
+
+  &.is-script,
+  &.is-env,
+  &.is-lock {
+    color: #64748b;
+  }
+
+  &.is-submodule {
+    color: #8b5cf6;
+  }
+
+  &.is-git {
+    color: #f97316;
+  }
+
+  &.is-symlink,
+  &.is-symlink-external,
+  &.is-symlink-broken,
+  &.is-ignore {
+    color: #94a3b8;
+  }
+
+  &.is-symlink-broken {
+    color: #ef4444;
+  }
+
+  &.is-asset,
+  &.is-image {
+    color: #16a34a;
+  }
+
+  &.is-test {
+    color: #ea580c;
+  }
+}
+
+.project-file-tree__icon-wrap {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project-file-tree__icon.material-symbols-rounded {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.project-file-tree__icon-badge.material-symbols-rounded {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.project-file-tree__name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-color);
+  font-size: 13px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-file-tree__link-indicator {
+  width: 18px;
+  height: 18px;
+  margin-left: auto;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--sub-text-color);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.project-file-tree__row:hover .project-file-tree__link-indicator {
+  background-color: var(--sub-bg-color);
+}
+
+.project-file-tree__children {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition:
+    grid-template-rows .22s ease,
+    opacity .18s ease,
+    transform .18s ease,
+    visibility 0s linear .22s;
+}
+
+.project-file-tree__children.is-expanded {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.project-file-tree__children-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.project-file-tree__loading {
+  min-height: 92px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--sub-text-color);
+  font-size: 12px;
+}
+
+.project-file-tree__menu-icon.material-symbols-rounded {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sub-text-color);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.project-file-tree-context-dropdown.ant-dropdown {
+  .ant-dropdown-menu {
+    min-width: 180px;
+    padding: 4px;
+    border-radius: 8px;
+    background-color: var(--bg-color);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
+  }
+
+  .ant-dropdown-menu-item {
+    min-height: 28px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    line-height: 1.2;
+  }
+
+  .ant-dropdown-menu-title-content {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-file-tree__row,
+  .project-file-tree__children,
+  .project-file-tree__icon,
+  .project-file-tree__icon-wrap {
+    transition: none;
+  }
+}

package/src/components/workspace/project-file-tree/ProjectFileTree.tsx

@@ -0,0 +1,138 @@
+import './ProjectFileTree.scss'
+
+import { Empty, Spin } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ProjectFileTreeRows } from './ProjectFileTreeRows'
+import { flattenVisibleProjectFileTreeNodes } from './project-file-tree-helpers'
+import type {
+  ProjectFileTreeCommand,
+  ProjectFileTreeNode,
+  ProjectFileTreeSelectableTypes,
+  ProjectFileTreeSelection,
+  ProjectFileTreeSelectionAdjacency,
+  ProjectFileTreeSelectionMode
+} from './project-file-tree-types'
+import { useProjectFileTreeData } from './use-project-file-tree-data'
+import { useProjectFileTreeSelection } from './use-project-file-tree-selection'
+
+export function ProjectFileTree({
+  activePath,
+  className,
+  command,
+  onOpenFile,
+  onReferenceNodes,
+  onSelectionChange,
+  refreshKey = 0,
+  selectableTypes = 'all',
+  selectedPaths,
+  selectionMode = 'none',
+  sessionId,
+  showContextMenu = false,
+  showLoadingState = false
+}: {
+  activePath?: string | null
+  className?: string
+  command?: ProjectFileTreeCommand | null
+  onOpenFile?: (path: string) => void
+  onReferenceNodes?: (nodes: ProjectFileTreeNode[]) => void
+  onSelectionChange?: (selection: ProjectFileTreeSelection) => void
+  refreshKey?: number
+  selectableTypes?: ProjectFileTreeSelectableTypes
+  selectedPaths?: string[]
+  selectionMode?: ProjectFileTreeSelectionMode
+  sessionId?: string
+  showContextMenu?: boolean
+  showLoadingState?: boolean
+}) {
+  const { t } = useTranslation()
+  const {
+    expandedPaths,
+    handleToggleDirectory,
+    hasLoadedTree,
+    hasTreeError,
+    isRootLoading,
+    loadingPaths,
+    treeContainerRef,
+    treeData
+  } = useProjectFileTreeData({ command, refreshKey, sessionId })
+  const visibleNodes = useMemo(
+    () => flattenVisibleProjectFileTreeNodes(treeData, expandedPaths),
+    [expandedPaths, treeData]
+  )
+  const {
+    handleContextSelect,
+    handleSelectNode,
+    selectedNodes,
+    selectedPathSet
+  } = useProjectFileTreeSelection({
+    activePath,
+    onSelectionChange,
+    selectableTypes,
+    selectedPaths,
+    selectionMode,
+    visibleNodes
+  })
+  const selectedAdjacencyByPath = useMemo(() => {
+    const adjacencyByPath = new Map<string, ProjectFileTreeSelectionAdjacency>()
+    visibleNodes.forEach((node, index) => {
+      if (!selectedPathSet.has(node.path)) {
+        return
+      }
+      adjacencyByPath.set(node.path, {
+        hasSelectedBefore: index > 0 && selectedPathSet.has(visibleNodes[index - 1]?.path ?? ''),
+        hasSelectedAfter: index < visibleNodes.length - 1 && selectedPathSet.has(visibleNodes[index + 1]?.path ?? '')
+      })
+    })
+    return adjacencyByPath
+  }, [selectedPathSet, visibleNodes])
+
+  if (hasTreeError) {
+    return (
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={t('chat.contextPickerLoadFailed')}
+      />
+    )
+  }
+
+  if (!hasLoadedTree && showLoadingState && isRootLoading) {
+    return (
+      <div className='project-file-tree__loading'>
+        <Spin size='small' />
+        <span>{t('chat.contextPickerLoading')}</span>
+      </div>
+    )
+  }
+
+  if (hasLoadedTree && treeData.length === 0) {
+    return (
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={t('chat.contextPickerEmpty')}
+      />
+    )
+  }
+
+  return (
+    <div ref={treeContainerRef} className={`project-file-tree ${className ?? ''}`.trim()}>
+      <ProjectFileTreeRows
+        depth={0}
+        expandedPaths={expandedPaths}
+        loadingPaths={loadingPaths}
+        nodes={treeData}
+        referenceNodes={selectedNodes}
+        selectableTypes={selectableTypes}
+        selectedAdjacencyByPath={selectedAdjacencyByPath}
+        selectedPathSet={selectedPathSet}
+        showContextMenu={showContextMenu}
+        onContextSelect={handleContextSelect}
+        onOpenFile={onOpenFile}
+        onReferenceNodes={onReferenceNodes}
+        onSelectNode={handleSelectNode}
+        onToggleDirectory={handleToggleDirectory}
+      />
+    </div>
+  )
+}