@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/components/common/IndexingSettings.tsx

@@ -1,398 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { Icon } from '@iconify/react'
-import { ConfirmDialog } from './ConfirmDialog'
-import './IndexingSettings.css'
-
-export function IndexingSettings() {
-  // 索引状态
-  const [indexedFiles, setIndexedFiles] = useState(0)
-  const [isIndexing, setIsIndexing] = useState(false)
-  const [currentFile, setCurrentFile] = useState<string | null>(null)
-  const [progressPercentage, setProgressPercentage] = useState(100)
-  const [progressIndexed, setProgressIndexed] = useState(0)
-  const [progressTotal, setProgressTotal] = useState(0)
-  const [currentStage, setCurrentStage] = useState<'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null>(null)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [indexSize, setIndexSize] = useState('0 B')
-  const [lastUpdated, setLastUpdated] = useState<string | null>(null)
-  const cancelIndexingRef = useRef(false)
-
-  /** 格式化文件大小 */
-  const formatSize = useCallback((bytes: number): string => {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
-  }, [])
-
-  /** 格式化日期 */
-  const formatDate = useCallback((date: Date): string => {
-    const now = new Date()
-    const diff = now.getTime() - date.getTime()
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    
-    if (days === 0) {
-      const hours = Math.floor(diff / (1000 * 60 * 60))
-      if (hours === 0) {
-        const minutes = Math.floor(diff / (1000 * 60))
-        return minutes <= 1 ? '刚刚' : `${minutes} 分钟前`
-      }
-      return `${hours} 小时前`
-    }
-    
-    if (days === 1) return '昨天'
-    if (days < 7) return `${days} 天前`
-    if (days < 30) return `${Math.floor(days / 7)} 周前`
-    if (days < 365) return `${Math.floor(days / 30)} 个月前`
-    return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' })
-  }, [])
-
-  /** 获取索引统计信息 */
-  const fetchIndexStats = useCallback(async () => {
-    try {
-      const bridge = (window as any).aiChatBridge
-      if (bridge?.getIndexStats) {
-        const stats = await bridge.getIndexStats()
-        setIndexedFiles(stats.totalDocuments || 0)
-        setIndexSize(formatSize(stats.indexSize || 0))
-        setLastUpdated(stats.lastUpdated ? formatDate(new Date(stats.lastUpdated)) : null)
-      } else {
-        // Bridge 方法未实现，显示默认值
-        setIndexedFiles(0)
-        setIndexSize('0 B')
-        setLastUpdated(null)
-        console.warn('getIndexStats 方法未在 bridge 中实现')
-      }
-    } catch (error) {
-      console.error('获取索引统计失败:', error)
-      // 出错时显示默认值
-      setIndexedFiles(0)
-      setIndexSize('0 B')
-      setLastUpdated(null)
-    }
-  }, [formatSize, formatDate])
-
-
-  // 进度监听器清理函数引用
-  const progressCleanupRef = useRef<(() => void) | null>(null)
-
-  /** 设置进度监听器 */
-  const setupProgressListener = useCallback(() => {
-    // 如果已有监听器，先清理
-    if (progressCleanupRef.current) {
-      progressCleanupRef.current()
-      progressCleanupRef.current = null
-    }
-    
-    const bridge = (window as any).aiChatBridge
-    if (!bridge?.onIndexProgress) {
-      return
-    }
-    
-    // 订阅进度更新（始终监听，即使没有主动触发索引）
-    progressCleanupRef.current = bridge.onIndexProgress((progress: {
-      indexed: number
-      total: number
-      currentFile?: string
-      stage: string
-      error?: string
-    }) => {
-      if (progress.error) {
-        console.error('索引错误:', progress.error)
-        setIsIndexing(false)
-        setCurrentFile(null)
-        return
-      }
-      
-      if (progress.stage === 'cancelled') {
-        setIsIndexing(false)
-        setCurrentStage(null)
-        setCurrentFile(null)
-        cancelIndexingRef.current = true
-        return
-      }
-      
-      // 如果收到进度更新，说明正在索引
-      if (progress.stage !== 'done') {
-        setIsIndexing(true)
-      }
-      
-      // 更新阶段
-      setCurrentStage(progress.stage as 'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null)
-      
-      // 扫描阶段：total 为 0，使用 indexed 表示已扫描的文件数
-      if (progress.stage === 'scanning') {
-        setProgressIndexed(progress.indexed)
-        setProgressTotal(0)
-        setProgressPercentage(0) // 扫描阶段不显示百分比
-      } else {
-        setProgressIndexed(progress.indexed)
-        setProgressTotal(progress.total)
-        setProgressPercentage(progress.total > 0 
-          ? Math.round((progress.indexed / progress.total) * 100) 
-          : 0)
-      }
-      setCurrentFile(progress.currentFile || null)
-      
-      if (progress.stage === 'done') {
-        setIsIndexing(false)
-        setCurrentStage(null)
-        setCurrentFile(null)
-        // 同步完成后刷新统计
-        fetchIndexStats()
-      }
-    })
-  }, [fetchIndexStats])
-
-  /** 检查索引状态并恢复进度显示 */
-  const checkIndexStatus = useCallback(async () => {
-    const bridge = (window as any).aiChatBridge
-    if (!bridge?.getIndexStatus) {
-      return
-    }
-    
-    try {
-      const status = await bridge.getIndexStatus()
-      if (status.isIndexing && status.lastProgress) {
-        // 如果有正在进行的索引任务，恢复进度显示
-        setIsIndexing(true)
-        const progress = status.lastProgress
-        
-        // 恢复进度状态
-        setCurrentStage(progress.stage as 'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null)
-        
-        if (progress.stage === 'scanning') {
-          setProgressIndexed(progress.indexed)
-          setProgressTotal(0)
-          setProgressPercentage(0)
-        } else {
-          setProgressIndexed(progress.indexed)
-          setProgressTotal(progress.total)
-          setProgressPercentage(progress.total > 0 
-            ? Math.round((progress.indexed / progress.total) * 100) 
-            : 0)
-        }
-        
-        setCurrentFile(progress.currentFile || null)
-      }
-    } catch (error) {
-      console.error('检查索引状态失败:', error)
-    }
-  }, [])
-
-  /** 同步索引 */
-  const handleSync = useCallback(async () => {
-    if (isIndexing) return
-    
-    const bridge = (window as any).aiChatBridge
-    if (!bridge?.syncIndex) {
-      console.error('syncIndex 方法未在 bridge 中实现')
-      return
-    }
-    
-    // 确保进度监听器已设置
-    if (!progressCleanupRef.current) {
-      setupProgressListener()
-    }
-    
-    setIsIndexing(true)
-    cancelIndexingRef.current = false
-    setProgressPercentage(0)
-    setProgressIndexed(0)
-    setProgressTotal(0)
-    setCurrentStage(null)
-    setCurrentFile(null)
-    
-    try {
-      await bridge.syncIndex()
-    } catch (error) {
-      if (!cancelIndexingRef.current) {
-        console.error('同步索引失败:', error)
-      }
-      setIsIndexing(false)
-      setCurrentFile(null)
-    }
-  }, [isIndexing, setupProgressListener])
-
-  /** 取消索引 */
-  const handleCancelIndex = useCallback(async () => {
-    cancelIndexingRef.current = true
-    setIsIndexing(false)
-    setCurrentFile(null)
-    
-    const bridge = (window as any).aiChatBridge
-    if (bridge?.cancelIndex) {
-      try {
-        await bridge.cancelIndex()
-      } catch (error) {
-        console.error('取消索引失败:', error)
-      }
-    }
-  }, [])
-
-  /** 删除索引 */
-  const handleDeleteIndex = useCallback(async () => {
-    if (isIndexing) return
-    
-    setShowDeleteConfirm(false)
-    
-    const bridge = (window as any).aiChatBridge
-    if (!bridge?.deleteIndex) {
-      console.error('deleteIndex 方法未在 bridge 中实现')
-      return
-    }
-    
-    try {
-      await bridge.deleteIndex()
-      
-      // 刷新统计
-      await fetchIndexStats()
-    } catch (error) {
-      console.error('删除索引失败:', error)
-    }
-  }, [isIndexing, fetchIndexStats])
-
-  // 组件挂载时获取统计信息、注册监听器、检查索引状态并设置进度监听
-  useEffect(() => {
-    const init = async () => {
-      const bridge = (window as any).aiChatBridge
-      
-      // 注册索引进度监听器
-      if (bridge?.registerIndexListener) {
-        try {
-          await bridge.registerIndexListener()
-        } catch (error) {
-          console.error('注册索引进度监听器失败:', error)
-        }
-      }
-      
-      await fetchIndexStats()
-      setupProgressListener()
-      await checkIndexStatus()
-    }
-    init()
-  }, [fetchIndexStats, setupProgressListener, checkIndexStatus])
-
-  // 组件卸载时清理进度监听器
-  useEffect(() => {
-    return () => {
-      const bridge = (window as any).aiChatBridge
-      
-      // 注销索引进度监听器
-      if (bridge?.unregisterIndexListener) {
-        try {
-          bridge.unregisterIndexListener()
-        } catch (error) {
-          console.error('注销索引进度监听器失败:', error)
-        }
-      }
-      
-      if (progressCleanupRef.current) {
-        progressCleanupRef.current()
-        progressCleanupRef.current = null
-      }
-    }
-  }, [])
-
-  return (
-    <div className="indexing-settings">
-      {/* 代码库索引部分 */}
-      <div className="setting-item indexing-section">
-        <div className="setting-info">
-          <div className="setting-label">代码库索引</div>
-          <p className="setting-description">
-            嵌入代码库以改进上下文理解和知识。所有数据（嵌入向量、元数据和代码）都存储在本地。
-          </p>
-          <div className="indexing-content">
-          {/* 进度条 */}
-          <div className="progress-container">
-            <div className="progress-bar">
-              <div 
-                className="progress-fill" 
-                style={{ width: `${progressPercentage}%` }}
-              ></div>
-            </div>
-            <div className="progress-text">
-              {isIndexing ? (
-                currentStage === 'scanning' ? (
-                  <span>正在扫描文件... (已扫描 {progressIndexed.toLocaleString()} 个文件)</span>
-                ) : (
-                  <span>{progressPercentage}% ({progressIndexed}/{progressTotal})</span>
-                )
-              ) : (
-                <span>{indexedFiles.toLocaleString()} 个文件</span>
-              )}
-            </div>
-          </div>
-
-          {/* 统计信息 */}
-          {!isIndexing && indexedFiles > 0 && (
-            <div className="stats-info">
-              <div className="stat-item">
-                <Icon icon="lucide:database" width={14} />
-                <span>索引大小: {indexSize}</span>
-              </div>
-              {lastUpdated && (
-                <div className="stat-item">
-                  <Icon icon="lucide:clock" width={14} />
-                  <span>最后更新: {lastUpdated}</span>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* 当前文件信息 */}
-          {isIndexing && currentFile && (
-            <div className="current-file">
-              <Icon icon="lucide:file-text" width={14} />
-              <span className="file-path">{currentFile}</span>
-            </div>
-          )}
-
-          {/* 操作按钮 */}
-          <div className="action-buttons">
-            {!isIndexing ? (
-              <button 
-                className="edit-btn"
-                onClick={handleSync}
-              >
-                <Icon icon="lucide:refresh-cw" width={16} />
-                <span>同步</span>
-              </button>
-            ) : (
-              <button 
-                className="edit-btn"
-                onClick={handleCancelIndex}
-              >
-                <Icon icon="lucide:x" width={16} />
-                <span>取消</span>
-              </button>
-            )}
-            <button 
-              className="edit-btn delete-btn"
-              disabled={isIndexing}
-              onClick={() => setShowDeleteConfirm(true)}
-            >
-              <Icon icon="lucide:trash-2" width={16} />
-              <span>删除索引</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-      {/* 删除确认对话框 */}
-      <ConfirmDialog
-        visible={showDeleteConfirm}
-        type="danger"
-        title="删除索引"
-        message={`确定要删除所有索引吗？\n\n这将删除 ${indexedFiles.toLocaleString()} 个文件的索引数据（${indexSize}），此操作无法撤销。`}
-        confirmText="删除"
-        cancelText="取消"
-        onConfirm={handleDeleteIndex}
-        onCancel={() => setShowDeleteConfirm(false)}
-      />
-    </div>
-  )
-}
-