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

package/src/components/common/ConfirmDialog.css

@@ -0,0 +1,136 @@
+.confirm-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  animation: fadeIn 0.2s ease;
+}
+
+.confirm-dialog {
+  width: 100%;
+  max-width: 400px;
+  margin: 16px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  animation: scaleIn 0.2s ease;
+}
+
+.confirm-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.confirm-dialog-header .icon {
+  flex-shrink: 0;
+}
+
+.confirm-dialog-header .icon.warning {
+  color: #f59e0b;
+}
+
+.confirm-dialog-header .icon.danger {
+  color: #ef4444;
+}
+
+.confirm-dialog-header .icon.info {
+  color: #3b82f6;
+}
+
+.confirm-dialog-header .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+}
+
+.confirm-dialog-content {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+}
+
+.confirm-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--chat-border, #333);
+}
+
+.confirm-dialog-footer .btn {
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.confirm-dialog-footer .btn-cancel {
+  background: transparent;
+  color: var(--chat-text-muted, #999);
+  border: 1px solid var(--chat-border, #444);
+}
+
+.confirm-dialog-footer .btn-cancel:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--chat-text, #fff);
+}
+
+.confirm-dialog-footer .btn-info {
+  background: #3b82f6;
+  color: #fff;
+}
+
+.confirm-dialog-footer .btn-info:hover {
+  background: #2563eb;
+}
+
+.confirm-dialog-footer .btn-warning {
+  background: #f59e0b;
+  color: #000;
+}
+
+.confirm-dialog-footer .btn-warning:hover {
+  background: #d97706;
+}
+
+.confirm-dialog-footer .btn-danger {
+  background: #ef4444;
+  color: #fff;
+}
+
+.confirm-dialog-footer .btn-danger:hover {
+  background: #dc2626;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,91 @@
+/**
+ * ConfirmDialog Component
+ * 自定义确认弹窗组件
+ */
+
+import { type FC, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { Icon } from '@iconify/react'
+import './ConfirmDialog.css'
+
+interface ConfirmDialogProps {
+  /** 是否显示 */
+  visible: boolean
+  /** 标题 */
+  title?: string
+  /** 消息内容 */
+  message: string
+  /** 类型：info | warning | danger */
+  type?: 'info' | 'warning' | 'danger'
+  /** 确认按钮文字 */
+  confirmText?: string
+  /** 取消按钮文字 */
+  cancelText?: string
+  /** 确认回调 */
+  onConfirm?: () => void
+  /** 取消回调 */
+  onCancel?: () => void
+}
+
+export const ConfirmDialog: FC<ConfirmDialogProps> = ({
+  visible,
+  title = '确认',
+  message,
+  type = 'warning',
+  confirmText = '确定',
+  cancelText = '取消',
+  onConfirm,
+  onCancel,
+}) => {
+  // ESC 键关闭
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && visible) {
+        onCancel?.()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [visible, onCancel])
+
+  // 阻止滚动
+  useEffect(() => {
+    if (visible) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [visible])
+
+  if (!visible) return null
+
+  const iconMap = {
+    info: 'lucide:info',
+    warning: 'lucide:alert-triangle',
+    danger: 'lucide:alert-circle',
+  }
+
+  return createPortal(
+    <div className="confirm-dialog-overlay" onClick={onCancel}>
+      <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className="confirm-dialog-header">
+          <Icon icon={iconMap[type]} className={`icon ${type}`} width={18} />
+          <span className="title">{title}</span>
+        </div>
+        <div className="confirm-dialog-content">{message}</div>
+        <div className="confirm-dialog-footer">
+          <button className="btn btn-cancel" onClick={onCancel}>
+            {cancelText}
+          </button>
+          <button className={`btn btn-${type}`} onClick={onConfirm}>
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/components/common/CopyButton.css

@@ -0,0 +1,22 @@
+.copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.copy-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+.copy-btn.copied {
+  color: var(--chat-success, #22c55e);
+}
+

package/src/components/common/CopyButton.tsx

@@ -0,0 +1,46 @@
+import { FC, useState, useCallback } from 'react'
+import { Icon } from '@iconify/react'
+import './CopyButton.css'
+
+interface CopyButtonProps {
+  /** 要复制的文本 */
+  text: string
+  /** 按钮标题 */
+  title?: string
+  /** 图标大小 */
+  size?: number
+  /** 复制成功回调 */
+  onCopy?: (text: string) => void
+}
+
+export const CopyButton: FC<CopyButtonProps> = ({
+  text,
+  title = '复制',
+  size = 14,
+  onCopy,
+}) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      onCopy?.(text)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('复制失败:', err)
+    }
+  }, [text, onCopy])
+
+  return (
+    <button
+      className={`copy-btn ${copied ? 'copied' : ''}`}
+      title={copied ? '已复制' : title}
+      onClick={handleCopy}
+    >
+      <Icon icon={copied ? 'lucide:check' : 'lucide:copy'} width={size} />
+    </button>
+  )
+}
+

package/src/components/common/IndexingSettings.css

@@ -0,0 +1,207 @@
+.indexing-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* 索引部分 - 使用标准的 setting-item 样式 */
+.indexing-section {
+  align-items: flex-start;
+}
+
+
+.indexing-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+/* 进度条 */
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--chat-border, #333);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--chat-accent, #3b82f6);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+}
+
+/* 统计信息 */
+.stats-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+}
+
+/* 当前文件 */
+.current-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  padding: 6px 8px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.file-path {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.action-buttons .edit-btn {
+  margin: 0;
+}
+
+.action-buttons .edit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-buttons .delete-btn {
+  color: #ef4444;
+}
+
+.action-buttons .delete-btn:hover:not(:disabled) {
+  color: #ef4444;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 设置项 - 复用父组件的样式，但需要覆盖一些 */
+.indexing-settings .setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.indexing-settings .setting-item:last-child {
+  border-bottom: none;
+}
+
+.indexing-settings .setting-info {
+  flex: 1;
+  margin-right: 24px;
+  min-width: 0;
+}
+
+.indexing-settings .setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.indexing-settings .setting-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.link-btn {
+  display: inline;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--chat-accent, #3b82f6);
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: inherit;
+}
+
+.link-btn:hover {
+  color: var(--chat-accent-hover, #60a5fa);
+}
+
+.indexing-settings .setting-control {
+  flex-shrink: 0;
+}
+
+.edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--chat-text, #fff);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.edit-btn:hover {
+  background: var(--chat-muted, #2a2a2a);
+  border-color: var(--chat-border, #444);
+}
+