@huyooo/ai-chat-frontend-react 0.1.6 → 0.1.8

package/src/components/input/AtFilePicker.tsx

@@ -0,0 +1,519 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Icon } from '@iconify/react'
+import type { ChatAdapter } from '../../adapter'
+import { getFileIcon, basename, dirname } from '../../utils/fileIcon'
+import {
+  AtFilesView,
+  AtDocsView,
+  AtTerminalsView,
+  AtChatsView,
+  AtBranchView,
+  AtBrowserView,
+} from './at-views'
+import type { AtFilesViewHandle, AtPlaceholderViewHandle } from './at-views'
+import './AtFilePicker.css'
+
+export interface AtFilePickerProps {
+  visible: boolean
+  adapter: ChatAdapter
+  initialDir?: string
+  /** 锚点元素（用于定位下拉面板） */
+  anchorEl?: HTMLElement | null
+  onClose: () => void
+  onSelect: (path: string) => void
+}
+
+// ============ 常量 ============
+const RECENT_KEY = 'ai-chat.at.recentPaths'
+const MAX_RECENT = 6
+const DROPDOWN_WIDTH = 332
+const DROPDOWN_MIN_HEIGHT = 200 // 最小高度
+const DROPDOWN_MAX_HEIGHT = 600 // 最大高度（大屏幕时充分利用）
+
+// 分类定义
+type CategoryId = 'files' | 'docs' | 'terminals' | 'chats' | 'branch' | 'browser'
+
+interface Category {
+  id: CategoryId
+  label: string
+  icon: string
+  placeholder: string
+}
+
+const categories: Category[] = [
+  { id: 'files', label: '文件和文件夹', icon: 'lucide:folder-open', placeholder: '搜索文件和文件夹...' },
+  { id: 'docs', label: '文档', icon: 'lucide:book-open', placeholder: '搜索文档...' },
+  { id: 'terminals', label: '终端', icon: 'lucide:terminal', placeholder: '搜索终端...' },
+  { id: 'chats', label: '历史对话', icon: 'lucide:message-square', placeholder: '搜索历史对话...' },
+  { id: 'branch', label: '分支差异', icon: 'lucide:git-branch', placeholder: '搜索分支差异...' },
+  { id: 'browser', label: '网页', icon: 'lucide:globe', placeholder: '搜索网页...' },
+]
+
+type ViewType = 'categories' | CategoryId
+
+// 视图组件的 ref 句柄类型
+type ViewHandle = AtFilesViewHandle | AtPlaceholderViewHandle
+
+export function AtFilePicker({
+  visible,
+  adapter,
+  initialDir,
+  anchorEl,
+  onClose,
+  onSelect,
+}: AtFilePickerProps) {
+  const searchRef = useRef<HTMLInputElement>(null)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<ViewHandle>(null)
+  const [query, setQuery] = useState('')
+  const [currentView, setCurrentView] = useState<ViewType>('categories')
+  const [activeKey, setActiveKey] = useState('')
+  const [recentList, setRecentList] = useState<string[]>([])
+  const [viewActiveIndex, setViewActiveIndex] = useState(-1)
+  const [viewItemCount, setViewItemCount] = useState(0)
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({})
+  const [isScrolling, setIsScrolling] = useState(false)
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // ============ 下拉面板定位 ============
+  const updateDropdownPosition = useCallback(() => {
+    if (!anchorEl) {
+      setDropdownStyle({})
+      return
+    }
+
+    const rect = anchorEl.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+    const viewportWidth = window.innerWidth
+
+    // 计算上方和下方的可用空间（预留 16px 边距）
+    const spaceAbove = rect.top - 16
+    const spaceBelow = viewportHeight - rect.bottom - 16
+
+    // 决定向上还是向下展开
+    const openUp = spaceAbove > spaceBelow
+
+    // 计算可用高度
+    const availableHeight = openUp ? spaceAbove : spaceBelow
+    
+    // 计算最大高度：
+    // 1. 优先使用可用空间（确保不超出窗口）
+    // 2. 如果可用空间很大，限制在全局最大高度（大屏幕时充分利用但不浪费）
+    // 3. 同时不能超过视口高度的 80%
+    const viewportMaxHeight = viewportHeight * 0.8
+    const maxHeight = Math.min(
+      availableHeight, // 使用可用空间（确保不超出窗口）
+      DROPDOWN_MAX_HEIGHT, // 但不超过全局最大高度（大屏幕时限制在 600px）
+      viewportMaxHeight // 也不能超过视口的 80%
+    )
+
+    // 计算水平位置，确保不超出右边界
+    let left = rect.right - DROPDOWN_WIDTH
+    if (left < 8) left = 8
+    if (left + DROPDOWN_WIDTH > viewportWidth - 8) {
+      left = viewportWidth - DROPDOWN_WIDTH - 8
+    }
+
+    if (openUp) {
+      setDropdownStyle({
+        position: 'fixed',
+        left: `${left}px`,
+        bottom: `${viewportHeight - rect.top + 6}px`,
+        top: 'auto',
+        maxHeight: `${maxHeight}px`,
+      })
+    } else {
+      setDropdownStyle({
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${rect.bottom + 6}px`,
+        bottom: 'auto',
+        maxHeight: `${maxHeight}px`,
+      })
+    }
+  }, [anchorEl])
+
+  // ============ 工具函数 ============
+  const loadRecent = useCallback(() => {
+    try {
+      const raw = localStorage.getItem(RECENT_KEY)
+      if (!raw) {
+        setRecentList([])
+        return
+      }
+      const list = JSON.parse(raw) as unknown
+      if (Array.isArray(list)) {
+        setRecentList(list.filter((x) => typeof x === 'string').slice(0, MAX_RECENT))
+      } else {
+        setRecentList([])
+      }
+    } catch {
+      setRecentList([])
+    }
+  }, [])
+
+  const pushRecent = useCallback((path: string) => {
+    setRecentList(prev => {
+      const next = [path, ...prev.filter((p) => p !== path)].slice(0, MAX_RECENT)
+      try {
+        localStorage.setItem(RECENT_KEY, JSON.stringify(next))
+      } catch {
+        // ignore
+      }
+      return next
+    })
+  }, [])
+
+  const getSearchPlaceholder = useCallback((): string => {
+    if (currentView === 'categories') return '添加文件、文件夹、文档...'
+    const cat = categories.find((c) => c.id === currentView)
+    return cat?.placeholder || 'Search...'
+  }, [currentView])
+
+  // ============ 过滤 ============
+  const filteredRecent = useMemo(() => {
+    if (currentView !== 'categories') return []
+    const q = query.trim().toLowerCase()
+    if (!q) return recentList
+    return recentList.filter((p) => p.toLowerCase().includes(q))
+  }, [currentView, query, recentList])
+
+  // ============ 视图切换 ============
+  const goBackToCategories = useCallback(() => {
+    setCurrentView('categories')
+    setQuery('')
+    setActiveKey('')
+    setViewActiveIndex(-1)
+    requestAnimationFrame(() => searchRef.current?.focus())
+  }, [])
+
+  const handleCategoryClick = useCallback((cat: Category) => {
+    setCurrentView(cat.id)
+    setQuery('')
+    setActiveKey('')
+    setViewActiveIndex(-1)
+    requestAnimationFrame(() => searchRef.current?.focus())
+  }, [])
+
+  // ============ 选择与关闭 ============
+  const handleEsc = useCallback(() => {
+    if (currentView !== 'categories') {
+      goBackToCategories()
+    } else {
+      onClose()
+    }
+  }, [currentView, goBackToCategories, onClose])
+
+  const selectPath = useCallback((path: string) => {
+    pushRecent(path)
+    onSelect(path)
+  }, [pushRecent, onSelect])
+
+  // ============ 滚动处理 ============
+  // 处理滚动事件
+  const handleScroll = useCallback(() => {
+    // 标记正在滚动
+    setIsScrolling(true)
+    
+    // 清除之前的定时器
+    if (scrollTimerRef.current) {
+      clearTimeout(scrollTimerRef.current)
+    }
+    
+    // 滚动停止后 150ms 才允许鼠标事件（确保滚动完全停止）
+    scrollTimerRef.current = setTimeout(() => {
+      setIsScrolling(false)
+      scrollTimerRef.current = null
+    }, 150)
+  }, [])
+
+  // ============ 键盘导航 ============
+  // 包装的 setActiveKey，检查滚动状态
+  const handleSetActiveKey = useCallback((key: string) => {
+    // 如果正在滚动，完全忽略鼠标悬停事件
+    // 因为滚动时鼠标位置不变，但元素在移动，会不断触发 mouseenter
+    if (isScrolling) return
+    setActiveKey(key)
+  }, [isScrolling])
+
+  // 包装的 setViewActiveIndex，检查滚动状态
+  const handleSetViewActiveIndex = useCallback((index: number) => {
+    // 如果正在滚动，完全忽略鼠标悬停事件
+    // 因为滚动时鼠标位置不变，但元素在移动，会不断触发 mouseenter
+    if (isScrolling) return
+    setViewActiveIndex(index)
+  }, [isScrolling])
+
+  // 滚动到选中的元素
+  const scrollToActive = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (!bodyRef.current) return
+
+      let activeElement: HTMLElement | null = null
+
+      if (currentView === 'categories') {
+        // 分类视图：找到对应 activeKey 的按钮
+        if (activeKey.startsWith('recent:')) {
+          const idx = Number(activeKey.split(':')[1] || -1)
+          // 在最近文件列表中查找
+          const recentSection = bodyRef.current.querySelector('.at-picker-recent')
+          if (recentSection) {
+            const buttons = recentSection.querySelectorAll('.at-picker-item')
+            if (idx >= 0 && idx < buttons.length) {
+              activeElement = buttons[idx] as HTMLElement
+            }
+          }
+        } else if (activeKey.startsWith('cat:')) {
+          const idx = Number(activeKey.split(':')[1] || -1)
+          // 在分类列表中查找
+          const categorySection = bodyRef.current.querySelector('.at-picker-section:not(.at-picker-recent)')
+          if (categorySection) {
+            const buttons = categorySection.querySelectorAll('.at-picker-item')
+            if (idx >= 0 && idx < buttons.length) {
+              activeElement = buttons[idx] as HTMLElement
+            }
+          }
+        }
+      } else {
+        // 子视图：找到对应 activeIndex 的元素
+        const activeItems = bodyRef.current.querySelectorAll('.at-view-item.active')
+        if (activeItems.length > 0) {
+          activeElement = activeItems[0] as HTMLElement
+        }
+      }
+
+      // 滚动到视窗内
+      if (activeElement) {
+        // 使用 requestAnimationFrame 确保 DOM 已更新
+        requestAnimationFrame(() => {
+          activeElement?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+          })
+          // 滚动事件会通过 handleScroll 自动处理 isScrolling 状态
+        })
+      }
+    })
+  }, [currentView, activeKey, filteredRecent.length])
+
+  const move = useCallback((delta: number) => {
+    if (currentView === 'categories') {
+      const recentCount = filteredRecent.length
+      const catCount = categories.length
+      const total = recentCount + catCount
+      if (total === 0) return
+
+      let pos = -1
+      if (activeKey.startsWith('recent:')) {
+        pos = Number(activeKey.split(':')[1] || -1)
+      } else if (activeKey.startsWith('cat:')) {
+        pos = recentCount + Number(activeKey.split(':')[1] || -1)
+      }
+
+      const next = pos < 0 ? 0 : (pos + delta + total) % total
+      // 直接更新 activeKey，确保状态立即更新
+      if (next < recentCount) {
+        setActiveKey(`recent:${next}`)
+      } else {
+        setActiveKey(`cat:${next - recentCount}`)
+      }
+      // 立即滚动，滚动事件会自动处理 isScrolling 状态
+      scrollToActive()
+    } else {
+      const total = viewItemCount
+      if (total === 0) return
+
+      const current = viewActiveIndex
+      const next = current < 0 ? 0 : (current + delta + total) % total
+      // 直接更新 viewActiveIndex，确保状态立即更新
+      setViewActiveIndex(next)
+      // 立即滚动，滚动事件会自动处理 isScrolling 状态
+      scrollToActive()
+    }
+  }, [currentView, filteredRecent.length, activeKey, viewItemCount, viewActiveIndex, scrollToActive])
+
+  const confirmActive = useCallback(() => {
+    if (currentView === 'categories') {
+      if (activeKey.startsWith('recent:')) {
+        const idx = Number(activeKey.split(':')[1])
+        const p = filteredRecent[idx]
+        if (p) selectPath(p)
+      } else if (activeKey.startsWith('cat:')) {
+        const idx = Number(activeKey.split(':')[1])
+        const cat = categories[idx]
+        if (cat) handleCategoryClick(cat)
+      }
+    } else {
+      viewRef.current?.confirmActive()
+    }
+  }, [currentView, activeKey, filteredRecent, selectPath, handleCategoryClick])
+
+  // ============ 键盘事件处理 ============
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      move(1)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      move(-1)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      confirmActive()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      handleEsc()
+    }
+  }, [move, confirmActive, handleEsc])
+
+  // ============ 生命周期 ============
+  useEffect(() => {
+    if (!visible) return
+    loadRecent()
+    setQuery('')
+    setActiveKey('')
+    setCurrentView('categories')
+    setViewActiveIndex(-1)
+    updateDropdownPosition()
+    requestAnimationFrame(() => searchRef.current?.focus())
+  }, [visible, loadRecent, updateDropdownPosition])
+
+  // 窗口大小变化时更新位置
+  useEffect(() => {
+    if (!visible) return
+    const handleResize = () => updateDropdownPosition()
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('scroll', handleResize, true)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('scroll', handleResize, true)
+      // 清理滚动定时器
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current)
+        scrollTimerRef.current = null
+      }
+    }
+  }, [visible, updateDropdownPosition])
+
+  // anchorEl 变化时更新位置
+  useEffect(() => {
+    if (visible) {
+      updateDropdownPosition()
+    }
+  }, [visible, anchorEl, updateDropdownPosition])
+
+  if (!visible) return null
+
+  // 渲染子视图组件
+  const renderViewComponent = () => {
+    const commonProps = {
+      query,
+      activeIndex: viewActiveIndex,
+      onSelect: selectPath,
+      onSetActive: handleSetViewActiveIndex,
+      onUpdateCount: setViewItemCount,
+    }
+
+    switch (currentView) {
+      case 'files':
+        return <AtFilesView ref={viewRef} adapter={adapter} initialDir={initialDir} {...commonProps} />
+      case 'docs':
+        return <AtDocsView ref={viewRef} {...commonProps} />
+      case 'terminals':
+        return <AtTerminalsView ref={viewRef} {...commonProps} />
+      case 'chats':
+        return <AtChatsView ref={viewRef} {...commonProps} />
+      case 'branch':
+        return <AtBranchView ref={viewRef} {...commonProps} />
+      case 'browser':
+        return <AtBrowserView ref={viewRef} {...commonProps} />
+      default:
+        return null
+    }
+  }
+
+  return createPortal(
+    <div className="at-picker-dropdown" style={dropdownStyle} onClick={(e) => e.stopPropagation()}>
+      {/* 头部：搜索框 */}
+      <div className="at-picker-header">
+        {currentView !== 'categories' ? (
+          <button className="at-picker-back" onClick={goBackToCategories}>
+            <Icon icon="lucide:arrow-left" width={14} />
+          </button>
+        ) : (
+          <Icon icon="lucide:search" width={14} className="at-picker-search-icon" />
+        )}
+        <input
+          ref={searchRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="at-picker-search"
+          type="text"
+          placeholder={getSearchPlaceholder()}
+          spellCheck={false}
+          autoCorrect="off"
+          autoComplete="off"
+          autoCapitalize="off"
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+
+      <div 
+        ref={bodyRef} 
+        className={`at-picker-body chat-scrollbar${isScrolling ? ' is-scrolling' : ''}`}
+        onScroll={handleScroll}
+      >
+        {/* 分类视图 */}
+        {currentView === 'categories' ? (
+          <>
+            {/* 最近文件 */}
+            {filteredRecent.length > 0 && (
+              <div className="at-picker-section at-picker-recent">
+                <div className="at-picker-list">
+                  {filteredRecent.map((p, i) => (
+                    <button
+                      key={p}
+                      className={`at-picker-item${activeKey === `recent:${i}` ? ' active' : ''}`}
+                      onMouseEnter={() => handleSetActiveKey(`recent:${i}`)}
+                      onClick={() => selectPath(p)}
+                    >
+                      <Icon icon={getFileIcon(p)} width={14} className="at-picker-item-icon" />
+                      <span className="at-picker-item-name">{basename(p)}</span>
+                      <span className="at-picker-item-path">{dirname(p)}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* 分类列表 */}
+            <div className="at-picker-section">
+              <div className="at-picker-list">
+                {categories.map((cat, i) => (
+                  <button
+                    key={cat.id}
+                    className={`at-picker-item at-picker-category${activeKey === `cat:${i}` ? ' active' : ''}`}
+                    onMouseEnter={() => handleSetActiveKey(`cat:${i}`)}
+                    onClick={() => handleCategoryClick(cat)}
+                  >
+                    <Icon icon={cat.icon} width={14} className="at-picker-item-icon" />
+                    <span className="at-picker-item-name">{cat.label}</span>
+                    <Icon icon="lucide:chevron-right" width={12} className="at-picker-chevron" />
+                  </button>
+                ))}
+              </div>
+            </div>
+          </>
+        ) : (
+          renderViewComponent()
+        )}
+      </div>
+
+      <div className="at-picker-footer">
+        <span className="at-picker-hint">↑↓ 导航 · Enter 选择 · Esc {currentView === 'categories' ? '关闭' : '返回'}</span>
+      </div>
+    </div>,
+    document.body
+  )
+}