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

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>
+  )
+}

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

@@ -0,0 +1,167 @@
+import { Tooltip } from 'antd'
+import type { TFunction } from 'i18next'
+import type { CSSProperties, MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ProjectFileTreeRowContextMenu } from './ProjectFileTreeRowContextMenu'
+import { getProjectLinkIndicatorIconMeta } from './project-file-tree-icons'
+import type { ProjectFileTreeIconMeta } from './project-file-tree-icons'
+import type { ProjectFileTreeNode } from './project-file-tree-types'
+
+const getTreeRowStyle = (depth: number): CSSProperties => ({
+  '--project-tree-depth': depth
+} as CSSProperties)
+
+const getTreeNodeTitle = (node: ProjectFileTreeNode, t: TFunction) => {
+  const linkKind = node.linkKind ?? (node.isSymlink === true ? 'symlink' : undefined)
+  if (linkKind == null) {
+    return node.path
+  }
+
+  const target = node.linkTarget == null ? t('chat.workspaceTreeTargetMissing') : node.linkTarget
+  const state = node.linkType === 'missing'
+    ? t('chat.workspaceTreeTargetMissingState')
+    : node.isExternal === true
+    ? t('chat.workspaceTreeExternalLinkState')
+    : ''
+  return t('chat.workspaceTreeNodeLinkTitle', { path: node.path, target, state })
+}
+
+const getLinkIndicatorTitle = (node: ProjectFileTreeNode, t: TFunction) => {
+  const target = node.linkTarget == null || node.linkTarget === ''
+    ? t('chat.workspaceTreeTargetMissing')
+    : node.linkTarget
+  if (node.linkType === 'missing') {
+    return t('chat.workspaceTreeLinkTargetMissing', { target })
+  }
+  if (node.isExternal === true) {
+    return target
+  }
+  return t('chat.workspaceTreeLinkTarget', { target })
+}
+
+const renderTreeIcon = (icon: ProjectFileTreeIconMeta) => (
+  <span className={`project-file-tree__icon-wrap is-${icon.tone}`}>
+    <span className={`material-symbols-rounded project-file-tree__icon is-${icon.tone}`}>
+      {icon.icon}
+    </span>
+    {icon.badgeIcon != null && (
+      <span className={`material-symbols-rounded project-file-tree__icon-badge is-${icon.tone}`}>
+        {icon.badgeIcon}
+      </span>
+    )}
+  </span>
+)
+
+const renderLinkIndicator = (node: ProjectFileTreeNode, linkKind: 'gitdir' | 'symlink', t: TFunction) => {
+  const icon = getProjectLinkIndicatorIconMeta(linkKind, node.linkType, node.isExternal)
+  return (
+    <Tooltip destroyOnHidden placement='left' title={getLinkIndicatorTitle(node, t)}>
+      <span className={`material-symbols-rounded project-file-tree__link-indicator is-${icon.tone}`}>
+        {icon.icon}
+      </span>
+    </Tooltip>
+  )
+}
+
+export function ProjectFileTreeRow({
+  canOpenFile,
+  canReference,
+  canToggleDirectory,
+  depth,
+  hasSelectedAfter,
+  hasSelectedBefore,
+  icon,
+  isDirectory,
+  isExpanded,
+  isLinkedNode,
+  isSelected,
+  linkKind,
+  node,
+  referenceNodes,
+  showContextMenu,
+  onContextSelect,
+  onOpenFile,
+  onReferenceNodes,
+  onSelectNode,
+  onToggleDirectory
+}: {
+  canOpenFile: boolean
+  canReference: boolean
+  canToggleDirectory: boolean
+  depth: number
+  hasSelectedAfter: boolean
+  hasSelectedBefore: boolean
+  icon: ProjectFileTreeIconMeta
+  isDirectory: boolean
+  isExpanded: boolean
+  isLinkedNode: boolean
+  isSelected: boolean
+  linkKind?: 'gitdir' | 'symlink'
+  node: ProjectFileTreeNode
+  referenceNodes: ProjectFileTreeNode[]
+  showContextMenu: boolean
+  onContextSelect: (node: ProjectFileTreeNode) => void
+  onOpenFile?: (path: string) => void
+  onReferenceNodes?: (nodes: ProjectFileTreeNode[]) => void
+  onSelectNode: (node: ProjectFileTreeNode, event: MouseEvent<HTMLButtonElement>) => boolean
+  onToggleDirectory: (node: ProjectFileTreeNode) => void
+}) {
+  const { t } = useTranslation()
+  const isActionEnabled = isDirectory ? canToggleDirectory : canOpenFile || canReference
+  const rowTypeClass = isDirectory ? 'is-directory' : 'is-file'
+  const row = (
+    <button
+      type='button'
+      className={`project-file-tree__row ${rowTypeClass} ${isExpanded ? 'is-expanded' : ''} ${
+        isLinkedNode ? 'is-symlink' : ''
+      } ${isSelected ? 'is-selected' : ''} ${hasSelectedBefore ? 'has-selected-before' : ''} ${
+        hasSelectedAfter ? 'has-selected-after' : ''
+      } ${isActionEnabled ? '' : 'is-disabled'}`}
+      aria-disabled={!isActionEnabled}
+      aria-label={getTreeNodeTitle(node, t)}
+      data-workspace-tree-path={node.path}
+      style={getTreeRowStyle(depth)}
+      tabIndex={isActionEnabled ? undefined : -1}
+      title={isLinkedNode ? undefined : node.path}
+      onContextMenu={() => onContextSelect(node)}
+      onClick={(event) => {
+        const handledBySelection = onSelectNode(node, event)
+        if (handledBySelection) {
+          return
+        }
+
+        if (isDirectory && canToggleDirectory) {
+          onToggleDirectory(node)
+        } else if (!isDirectory && canOpenFile) {
+          onOpenFile?.(node.path)
+        }
+      }}
+    >
+      {renderTreeIcon(icon)}
+      <span className='project-file-tree__name'>{node.name}</span>
+      {linkKind != null && renderLinkIndicator(node, linkKind, t)}
+    </button>
+  )
+
+  if (!showContextMenu) {
+    return row
+  }
+
+  return (
+    <ProjectFileTreeRowContextMenu
+      canOpenFile={canOpenFile}
+      canReference={canReference}
+      canToggleDirectory={canToggleDirectory}
+      isDirectory={isDirectory}
+      isExpanded={isExpanded}
+      node={node}
+      referenceNodes={referenceNodes}
+      onOpenFile={onOpenFile}
+      onReferenceNodes={onReferenceNodes}
+      onToggleDirectory={onToggleDirectory}
+    >
+      {row}
+    </ProjectFileTreeRowContextMenu>
+  )
+}

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

@@ -0,0 +1,106 @@
+import { App, Dropdown } from 'antd'
+import type { MenuProps } from 'antd'
+import type { ReactElement } from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { copyTextWithFeedback } from '#~/utils/copy'
+
+import type { ProjectFileTreeNode } from './project-file-tree-types'
+
+const renderMenuIcon = (icon: string) =>
+  <span className='material-symbols-rounded project-file-tree__menu-icon'>{icon}</span>
+
+export function ProjectFileTreeRowContextMenu({
+  canOpenFile,
+  canReference,
+  canToggleDirectory,
+  children,
+  isDirectory,
+  isExpanded,
+  node,
+  referenceNodes,
+  onOpenFile,
+  onReferenceNodes,
+  onToggleDirectory
+}: {
+  canOpenFile: boolean
+  canReference: boolean
+  canToggleDirectory: boolean
+  children: ReactElement
+  isDirectory: boolean
+  isExpanded: boolean
+  node: ProjectFileTreeNode
+  referenceNodes: ProjectFileTreeNode[]
+  onOpenFile?: (path: string) => void
+  onReferenceNodes?: (nodes: ProjectFileTreeNode[]) => void
+  onToggleDirectory: (node: ProjectFileTreeNode) => void
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const menuItems = useMemo<MenuProps['items']>(() => [
+    ...(isDirectory
+      ? [
+        {
+          key: 'toggle',
+          label: t(isExpanded ? 'chat.workspaceDrawerCollapseAll' : 'chat.workspaceDrawerExpandAll'),
+          icon: renderMenuIcon(isExpanded ? 'folder_open' : 'folder'),
+          disabled: !canToggleDirectory,
+          onClick: () => onToggleDirectory(node)
+        }
+      ]
+      : [
+        {
+          key: 'open',
+          label: t('chat.workspaceFileOpen'),
+          icon: renderMenuIcon('open_in_new'),
+          disabled: !canOpenFile,
+          onClick: () => onOpenFile?.(node.path)
+        }
+      ]),
+    {
+      key: 'reference',
+      label: t('chat.workspaceTreeReferenceToInput'),
+      icon: renderMenuIcon('alternate_email'),
+      disabled: !canReference || onReferenceNodes == null,
+      onClick: () => onReferenceNodes?.(referenceNodes.length > 0 ? referenceNodes : [node])
+    },
+    { type: 'divider' as const },
+    {
+      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: node.path
+        })
+      }
+    }
+  ], [
+    canOpenFile,
+    canReference,
+    canToggleDirectory,
+    isDirectory,
+    isExpanded,
+    message,
+    node,
+    onOpenFile,
+    onReferenceNodes,
+    onToggleDirectory,
+    referenceNodes,
+    t
+  ])
+
+  return (
+    <Dropdown
+      menu={{ items: menuItems }}
+      overlayClassName='project-file-tree-context-dropdown'
+      trigger={['contextMenu']}
+    >
+      {children}
+    </Dropdown>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { Spin } from 'antd'
+import type { CSSProperties, MouseEvent } from 'react'
+
+import { ProjectFileTreeRow } from './ProjectFileTreeRow'
+import {
+  canExpandProjectFileTreeDirectory,
+  canOpenProjectFileTreeFile,
+  canSelectProjectFileTreeNode,
+  getProjectFileTreeLinkKind
+} from './project-file-tree-helpers'
+import { getProjectFileIconMeta, getProjectFolderIconMeta, getProjectLinkedIconMeta } from './project-file-tree-icons'
+import type {
+  ProjectFileTreeNode,
+  ProjectFileTreeSelectableTypes,
+  ProjectFileTreeSelectionAdjacency
+} from './project-file-tree-types'
+
+const getTreeRowStyle = (depth: number): CSSProperties => ({
+  '--project-tree-depth': depth
+} as CSSProperties)
+
+export function ProjectFileTreeRows({
+  depth,
+  expandedPaths,
+  loadingPaths,
+  nodes,
+  onContextSelect,
+  onOpenFile,
+  onReferenceNodes,
+  onSelectNode,
+  onToggleDirectory,
+  referenceNodes,
+  selectableTypes,
+  selectedAdjacencyByPath,
+  selectedPathSet,
+  showContextMenu
+}: {
+  depth: number
+  expandedPaths: Set<string>
+  loadingPaths: Set<string>
+  nodes: ProjectFileTreeNode[]
+  onContextSelect: (node: ProjectFileTreeNode) => void
+  onOpenFile?: (path: string) => void
+  onReferenceNodes?: (nodes: ProjectFileTreeNode[]) => void
+  onSelectNode: (node: ProjectFileTreeNode, event: MouseEvent<HTMLButtonElement>) => boolean
+  onToggleDirectory: (node: ProjectFileTreeNode) => void
+  referenceNodes: ProjectFileTreeNode[]
+  selectableTypes: ProjectFileTreeSelectableTypes
+  selectedAdjacencyByPath: Map<string, ProjectFileTreeSelectionAdjacency>
+  selectedPathSet: Set<string>
+  showContextMenu: boolean
+}) {
+  return (
+    <>
+      {nodes.map((node) => {
+        const isDirectory = node.type === 'directory'
+        const isExpanded = expandedPaths.has(node.path)
+        const isLoading = loadingPaths.has(node.path)
+        const linkKind = getProjectFileTreeLinkKind(node)
+        const isLinkedNode = linkKind != null
+        const icon = isLinkedNode
+          ? getProjectLinkedIconMeta(node.name, node.linkType, isExpanded, linkKind)
+          : isDirectory
+          ? getProjectFolderIconMeta(node.name, isExpanded)
+          : getProjectFileIconMeta(node.name)
+        const canToggleDirectory = canExpandProjectFileTreeDirectory(node)
+        const canOpenFile = canOpenProjectFileTreeFile(node)
+        const canReference = canSelectProjectFileTreeNode(node, selectableTypes)
+        const currentReferenceNodes = selectedPathSet.has(node.path) && referenceNodes.length > 0
+          ? referenceNodes
+          : [node]
+        const selectedAdjacency = selectedAdjacencyByPath.get(node.path)
+
+        return (
+          <div key={node.path} className='project-file-tree__item'>
+            <ProjectFileTreeRow
+              canOpenFile={canOpenFile}
+              canReference={canReference}
+              canToggleDirectory={canToggleDirectory}
+              depth={depth}
+              icon={icon}
+              hasSelectedAfter={selectedAdjacency?.hasSelectedAfter === true}
+              hasSelectedBefore={selectedAdjacency?.hasSelectedBefore === true}
+              isDirectory={isDirectory}
+              isExpanded={isExpanded}
+              isLinkedNode={isLinkedNode}
+              isSelected={selectedPathSet.has(node.path)}
+              linkKind={linkKind}
+              node={node}
+              referenceNodes={currentReferenceNodes}
+              showContextMenu={showContextMenu}
+              onContextSelect={onContextSelect}
+              onOpenFile={onOpenFile}
+              onReferenceNodes={onReferenceNodes}
+              onSelectNode={onSelectNode}
+              onToggleDirectory={onToggleDirectory}
+            />
+            {canToggleDirectory && (
+              <div
+                className={`project-file-tree__children ${isExpanded ? 'is-expanded' : 'is-collapsed'}`}
+                aria-hidden={!isExpanded}
+              >
+                <div className='project-file-tree__children-inner'>
+                  {isLoading
+                    ? (
+                      <div
+                        className='project-file-tree__row project-file-tree__row--loading'
+                        style={getTreeRowStyle(depth + 1)}
+                      >
+                        <Spin size='small' />
+                      </div>
+                    )
+                    : node.children != null && node.children.length > 0 && (
+                      <ProjectFileTreeRows
+                        depth={depth + 1}
+                        expandedPaths={expandedPaths}
+                        loadingPaths={loadingPaths}
+                        nodes={node.children}
+                        referenceNodes={referenceNodes}
+                        selectableTypes={selectableTypes}
+                        selectedAdjacencyByPath={selectedAdjacencyByPath}
+                        selectedPathSet={selectedPathSet}
+                        showContextMenu={showContextMenu}
+                        onContextSelect={onContextSelect}
+                        onOpenFile={onOpenFile}
+                        onReferenceNodes={onReferenceNodes}
+                        onSelectNode={onSelectNode}
+                        onToggleDirectory={onToggleDirectory}
+                      />
+                    )}
+                </div>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}

package/src/components/workspace/project-file-tree/project-file-tree-helpers.ts

@@ -0,0 +1,101 @@
+import type { WorkspaceTreeEntry } from '#~/api'
+
+import type { ProjectFileTreeNode, ProjectFileTreeSelectableTypes } from './project-file-tree-types'
+
+export const replaceProjectFileTreeNodeChildren = (
+  nodes: ProjectFileTreeNode[],
+  targetPath: string,
+  children: ProjectFileTreeNode[]
+): ProjectFileTreeNode[] =>
+  nodes.map((node) => {
+    if (node.path === targetPath) {
+      return { ...node, children }
+    }
+    if (node.children == null) {
+      return node
+    }
+    return {
+      ...node,
+      children: replaceProjectFileTreeNodeChildren(node.children, targetPath, children)
+    }
+  })
+
+export const toProjectFileTreeNodes = (entries: WorkspaceTreeEntry[]): ProjectFileTreeNode[] =>
+  entries.map(entry => ({ ...entry }))
+
+export const getProjectFileTreeLinkKind = (node: ProjectFileTreeNode) =>
+  node.linkKind ?? (node.isSymlink === true ? 'symlink' : undefined)
+
+export const canExpandProjectFileTreeDirectory = (node: ProjectFileTreeNode) => {
+  const linkKind = getProjectFileTreeLinkKind(node)
+  return node.type === 'directory' &&
+    (linkKind == null || (linkKind === 'symlink' && node.linkType === 'directory' && node.isExternal !== true))
+}
+
+const canAutoExpandDirectoryNode = (node: ProjectFileTreeNode) =>
+  canExpandProjectFileTreeDirectory(node) && getProjectFileTreeLinkKind(node) == null
+
+export const canOpenProjectFileTreeFile = (node: ProjectFileTreeNode) => {
+  const linkKind = getProjectFileTreeLinkKind(node)
+  return node.type === 'file' &&
+    (linkKind == null || (linkKind === 'symlink' && node.linkType === 'file' && node.isExternal !== true))
+}
+
+export const canSelectProjectFileTreeNode = (
+  node: ProjectFileTreeNode,
+  selectableTypes: ProjectFileTreeSelectableTypes
+) => selectableTypes === 'all' || node.type === 'file'
+
+export const loadProjectFileTreeDirectoryRecursive = async (
+  node: ProjectFileTreeNode,
+  loadWorkspaceTree: (path?: string) => Promise<{ entries: WorkspaceTreeEntry[] }>
+): Promise<ProjectFileTreeNode> => {
+  if (!canAutoExpandDirectoryNode(node)) {
+    return node
+  }
+
+  const children = node.children ?? toProjectFileTreeNodes((await loadWorkspaceTree(node.path)).entries)
+  return {
+    ...node,
+    children: await Promise.all(children.map(child => loadProjectFileTreeDirectoryRecursive(child, loadWorkspaceTree)))
+  }
+}
+
+export const collectProjectFileTreeDirectoryPaths = (nodes: ProjectFileTreeNode[]): string[] => {
+  const paths: string[] = []
+  for (const node of nodes) {
+    if (!canAutoExpandDirectoryNode(node)) {
+      continue
+    }
+    paths.push(node.path)
+    if (node.children != null) {
+      paths.push(...collectProjectFileTreeDirectoryPaths(node.children))
+    }
+  }
+  return paths
+}
+
+export const getProjectFileTreeAncestorDirectoryPaths = (filePath?: string | null): string[] => {
+  if (filePath == null || filePath.trim() === '') {
+    return []
+  }
+
+  const parts = filePath.split('/').filter(part => part.length > 0)
+  return parts.slice(0, -1).map((_, index) => parts.slice(0, index + 1).join('/'))
+}
+
+export const flattenVisibleProjectFileTreeNodes = (
+  nodes: ProjectFileTreeNode[],
+  expandedPaths: Set<string>
+): ProjectFileTreeNode[] => {
+  const visibleNodes: ProjectFileTreeNode[] = []
+
+  for (const node of nodes) {
+    visibleNodes.push(node)
+    if (expandedPaths.has(node.path) && node.children != null) {
+      visibleNodes.push(...flattenVisibleProjectFileTreeNodes(node.children, expandedPaths))
+    }
+  }
+
+  return visibleNodes
+}