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

package/src/components/common/IndexingSettings.tsx

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

package/src/components/common/SettingsPanel.css

@@ -0,0 +1,256 @@
+.settings-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.settings-panel {
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 900px;
+  height: 80vh;
+  max-height: 700px;
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+/* 左侧导航 - shadcn 风格 */
+.settings-sidebar {
+  width: 240px;
+  background: var(--chat-muted, #2a2a2a);
+  border-right: 1px solid var(--chat-border, #333);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+  letter-spacing: 0.2px;
+  line-height: 1;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+  position: relative;
+}
+
+.sidebar-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--chat-text, #ccc);
+}
+
+.sidebar-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+/* 右侧内容 */
+.settings-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.content-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+  letter-spacing: 0.2px;
+  line-height: 1;
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.close-btn:hover {
+  background: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text, #fff);
+}
+
+.content-body {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0 16px;
+}
+
+.setting-section {
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.section-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  margin-bottom: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.setting-item:last-child {
+  border-bottom: none;
+}
+
+.setting-info {
+  flex: 1;
+  margin-right: 24px;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.setting-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.5;
+}
+
+.setting-control {
+  flex-shrink: 0;
+}
+
+.dropdown-wrapper {
+  /* min-width: 280px; */
+}
+
+.dropdown-wrapper .dropdown-selector .selector-text {
+  max-width: none;
+  white-space: nowrap;
+}
+
+/* 开关样式 */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--chat-muted, #3c3c3c);
+  border-radius: 24px;
+  transition: all 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #fff;
+  border-radius: 50%;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: rgb(153, 207, 140);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translate(20px, -50%);
+}
+
+.toggle-switch input:focus + .toggle-slider {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}