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

package/src/components/header/ChatHeader.tsx

@@ -0,0 +1,376 @@
+/**
+ * ChatHeader Component
+ * 与 Vue 版本 ChatHeader.vue 保持一致
+ */
+
+import { useState, useRef, useEffect, useCallback, type FC } from 'react'
+import './ChatHeader.css'
+import { Icon } from '@iconify/react'
+import type { SessionRecord } from '../../types'
+
+interface ChatHeaderProps {
+  /** 当前会话列表 */
+  sessions: SessionRecord[]
+  /** 当前会话 ID */
+  currentSessionId?: string | null
+  /** 是否显示关闭按钮 */
+  showClose?: boolean
+  /** 创建新会话 */
+  onNewSession?: () => void
+  /** 切换会话 */
+  onSwitchSession?: (sessionId: string) => void
+  /** 删除会话 */
+  onDeleteSession?: (sessionId: string) => void
+  /** 隐藏/显示会话（在 tab 栏关闭但不删除） */
+  onHideSession?: (sessionId: string, hidden: boolean) => void
+  /** 关闭面板 */
+  onClose?: () => void
+  /** 清空所有对话 */
+  onClearAll?: () => void
+  /** 关闭其他对话 */
+  onCloseOthers?: () => void
+  /** 导出对话 */
+  onExport?: () => void
+  /** 复制请求 ID */
+  onCopyId?: () => void
+  /** 反馈 */
+  onFeedback?: () => void
+  /** Agent 设置 */
+  onSettings?: () => void
+}
+
+/** 获取日期分组标签 */
+function getDateGroupLabel(date: Date | string): string {
+  const d = new Date(date)
+  const now = new Date()
+
+  // 重置时间部分，只比较日期
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const target = new Date(d.getFullYear(), d.getMonth(), d.getDate())
+  const diff = today.getTime() - target.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+  if (days === 0) return '今天'
+  if (days === 1) return '昨天'
+
+  // 其他显示具体日期
+  const month = d.getMonth() + 1
+  const day = d.getDate()
+  return `${month}月${day}日`
+}
+
+/** 格式化时间（HH:mm） */
+function formatTime(date: Date | string): string {
+  const d = new Date(date)
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+/** 按日期分组会话 */
+interface SessionGroup {
+  label: string
+  sessions: SessionRecord[]
+}
+
+function groupSessionsByDate(sessions: SessionRecord[]): SessionGroup[] {
+  const groups = new Map<string, SessionRecord[]>()
+
+  for (const session of sessions) {
+    const label = getDateGroupLabel(session.updatedAt)
+    const group = groups.get(label)
+    if (group) {
+      group.push(session)
+    } else {
+      groups.set(label, [session])
+    }
+  }
+
+  return Array.from(groups.entries()).map(([label, groupSessions]) => ({
+    label,
+    sessions: groupSessions,
+  }))
+}
+
+/** 获取显示标题 */
+function getDisplayTitle(title: string): string {
+  return title === '新对话' ? 'New Chat' : title
+}
+
+export const ChatHeader: FC<ChatHeaderProps> = ({
+  sessions,
+  currentSessionId,
+  showClose = false,
+  onNewSession,
+  onSwitchSession,
+  onDeleteSession,
+  onHideSession,
+  onClose,
+  onClearAll,
+  onCloseOthers,
+  onExport,
+  onCopyId,
+  onFeedback,
+  onSettings,
+}) => {
+  const [historyOpen, setHistoryOpen] = useState(false)
+  const [moreMenuOpen, setMoreMenuOpen] = useState(false)
+
+  const historyRef = useRef<HTMLDivElement>(null)
+  const moreMenuRef = useRef<HTMLDivElement>(null)
+
+  // 可见的会话（使用 sessions 的 hidden 字段）
+  const visibleSessions = sessions.filter((s) => !s.hidden)
+
+  // 点击外部关闭菜单
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (historyRef.current && !historyRef.current.contains(target)) {
+        setHistoryOpen(false)
+      }
+      if (moreMenuRef.current && !moreMenuRef.current.contains(target)) {
+        setMoreMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside)
+    return () => document.removeEventListener('click', handleClickOutside)
+  }, [])
+
+  // 切换历史面板
+  const toggleHistory = useCallback(() => {
+    setHistoryOpen((prev) => !prev)
+    setMoreMenuOpen(false)
+  }, [])
+
+  // 切换更多菜单
+  const toggleMore = useCallback(() => {
+    setMoreMenuOpen((prev) => !prev)
+    setHistoryOpen(false)
+  }, [])
+
+  // 从历史新建
+  const handleNewFromHistory = useCallback(() => {
+    onNewSession?.()
+    setHistoryOpen(false)
+  }, [onNewSession])
+
+  // 选择历史
+  const handleSelectHistory = useCallback(
+    (sessionId: string) => {
+      const session = sessions.find((s) => s.id === sessionId)
+      // 如果被隐藏了，恢复显示
+      if (session?.hidden) {
+        onHideSession?.(sessionId, false)
+      }
+      onSwitchSession?.(sessionId)
+      setHistoryOpen(false)
+    },
+    [sessions, onSwitchSession, onHideSession]
+  )
+
+  // 隐藏 tab（触发回调由父组件持久化到数据库）
+  const handleHideTab = useCallback(
+    (sessionId: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      onHideSession?.(sessionId, true)
+      if (sessionId === currentSessionId) {
+        const remaining = sessions.filter((s) => s.id !== sessionId && !s.hidden)
+        if (remaining.length > 0) {
+          onSwitchSession?.(remaining[0].id)
+        } else {
+          // 最后一个 tab 被关闭，创建新会话
+          onNewSession?.()
+        }
+      }
+    },
+    [currentSessionId, sessions, onSwitchSession, onNewSession, onHideSession]
+  )
+
+  // 删除会话
+  const handleDeleteSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onDeleteSession?.(sessionId)
+  }
+
+  // 菜单操作
+  const handleMenuAction = (action: string) => {
+    setMoreMenuOpen(false)
+    switch (action) {
+      case 'clear-all':
+        onClearAll?.()
+        break
+      case 'close-others':
+        onCloseOthers?.()
+        break
+      case 'export':
+        onExport?.()
+        break
+      case 'copy-id':
+        onCopyId?.()
+        break
+      case 'feedback':
+        onFeedback?.()
+        break
+      case 'settings':
+        onSettings?.()
+        break
+    }
+  }
+
+  return (
+    <div className="chat-header">
+      {/* 左侧：Tabs 可滚动区域 */}
+      <div className="tabs-container">
+        {visibleSessions.length === 0 ? (
+          <span className="tab-item active">New Chat</span>
+        ) : (
+          visibleSessions.map((session) => {
+            const isActive = session.id === currentSessionId
+            return (
+              <div
+                key={session.id}
+                className={`tab-item${isActive ? ' active' : ''}`}
+                onClick={() => onSwitchSession?.(session.id)}
+                title={session.title}
+              >
+                <span className="tab-title">{getDisplayTitle(session.title)}</span>
+                <button
+                  className="tab-close"
+                  onClick={(e) => handleHideTab(session.id, e)}
+                  title="关闭标签"
+                >
+                  <Icon icon="lucide:x" width={18} />
+                </button>
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {/* 右侧：操作按钮 */}
+      <div className="header-actions">
+        {/* 新建会话 */}
+        <button className="icon-btn" onClick={onNewSession} title="新建对话">
+          <Icon icon="lucide:plus" width={18} />
+        </button>
+
+        {/* 历史记录 */}
+        <div ref={historyRef} className="dropdown-container">
+          <button
+            className={`icon-btn${historyOpen ? ' active' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              toggleHistory()
+            }}
+            title="历史记录"
+          >
+            <Icon icon="lucide:clock" width={18} />
+          </button>
+
+          {/* 历史记录面板 */}
+          {historyOpen && (
+            <div className="dropdown-panel history-panel">
+              <div className="panel-header">
+                <span>历史记录</span>
+                <button className="icon-btn small" title="新建对话" onClick={handleNewFromHistory}>
+                  <Icon icon="lucide:plus" width={18} />
+                </button>
+              </div>
+              <div className="panel-content chat-scrollbar">
+                {sessions.length === 0 ? (
+                  <div className="empty-state">暂无历史对话</div>
+                ) : (
+                  groupSessionsByDate(sessions).map((group) => (
+                    <div key={group.label}>
+                      <div className="history-group-label">{group.label}</div>
+                      {group.sessions.map((session) => {
+                        const isCurrent = session.id === currentSessionId
+                        return (
+                          <div
+                            key={session.id}
+                            className={`history-item${isCurrent ? ' active' : ''}`}
+                            onClick={() => handleSelectHistory(session.id)}
+                          >
+                            <span className="history-title">{session.title}</span>
+                            <span className="history-time">{formatTime(session.updatedAt)}</span>
+                            <button
+                              className="history-action-btn delete"
+                              title="删除"
+                              onClick={(e) => handleDeleteSession(session.id, e)}
+                            >
+                              <Icon icon="lucide:trash-2" width={18} />
+                            </button>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 更多选项 */}
+        <div ref={moreMenuRef} className="dropdown-container">
+          <button
+            className={`icon-btn${moreMenuOpen ? ' active' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              toggleMore()
+            }}
+            title="更多选项"
+          >
+            <Icon icon="lucide:more-horizontal" width={18} />
+          </button>
+
+          {/* 更多选项菜单 */}
+          {moreMenuOpen && (
+            <div className="dropdown-panel more-panel">
+              <button className="menu-item" onClick={() => handleMenuAction('clear-all')}>
+                <Icon icon="lucide:trash-2" width={18} />
+                <span>清空所有对话</span>
+              </button>
+              <button className="menu-item" onClick={() => handleMenuAction('close-others')}>
+                <Icon icon="lucide:x-circle" width={18} />
+                <span>关闭其他对话</span>
+              </button>
+              <div className="menu-divider" />
+              <button className="menu-item" onClick={() => handleMenuAction('export')}>
+                <Icon icon="lucide:download" width={18} />
+                <span>导出对话</span>
+              </button>
+              <button className="menu-item" onClick={() => handleMenuAction('copy-id')}>
+                <Icon icon="lucide:copy" width={18} />
+                <span>复制请求 ID</span>
+              </button>
+              <div className="menu-divider" />
+              <button className="menu-item" onClick={() => handleMenuAction('feedback')}>
+                <Icon icon="lucide:message-square" width={18} />
+                <span>反馈</span>
+              </button>
+              <button className="menu-item" onClick={() => handleMenuAction('settings')}>
+                <Icon icon="lucide:settings" width={18} />
+                <span>Agent 设置</span>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* 关闭按钮 */}
+        {showClose && (
+          <button className="icon-btn" onClick={onClose} title="关闭">
+            <Icon icon="lucide:x" width={18} />
+          </button>
+        )}
+
+        {/* 设置按钮 */}
+        <button className="icon-btn" onClick={onSettings} title="设置">
+          <Icon icon="lucide:settings" width={18} />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/input/AtFilePicker.css

@@ -0,0 +1,147 @@
+.at-picker-dropdown {
+  position: fixed;
+  width: 332px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.at-picker-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.at-picker-back {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #888;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.at-picker-back:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ccc;
+}
+
+.at-picker-search-icon {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.at-picker-search {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #ddd;
+  font-size: 13px;
+}
+
+.at-picker-body {
+  padding: 6px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* 滚动期间禁用鼠标悬停事件 */
+.at-picker-body.is-scrolling .at-picker-item,
+.at-picker-body.is-scrolling .at-view-item {
+  pointer-events: none;
+}
+
+.at-picker-section {
+  margin-bottom: 2px;
+}
+
+.at-picker-recent {
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.at-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.at-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  padding: 7px 10px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  color: #ccc;
+  width: 100%;
+}
+
+.at-picker-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.at-picker-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.at-picker-item-icon {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.at-picker-item-name {
+  font-size: 13px;
+  color: #ddd;
+  flex-shrink: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.at-picker-item-path {
+  font-size: 11px;
+  color: #555;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.at-picker-category .at-picker-item-name {
+  flex: 1;
+  max-width: none;
+}
+
+.at-picker-chevron {
+  color: #555;
+  flex-shrink: 0;
+}
+
+.at-picker-footer {
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  color: #555;
+  font-size: 11px;
+}