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

package/src/components/header/ChatHeader.css

@@ -1,285 +0,0 @@
-/**
- * ChatHeader 组件样式
- */
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  height: 48px;
-  padding: 0 12px;
-  background: var(--chat-header-bg, #1e1e1e);
-  border-bottom: 1px solid var(--chat-border, #333);
-  flex-shrink: 0;
-}
-
-.tabs-container {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex: 1;
-  overflow-x: auto;
-  padding-right: 8px;
-}
-
-.tabs-container::-webkit-scrollbar {
-  display: none;
-}
-
-.tab-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--chat-text-muted, #888);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-  max-width: 120px;
-  flex-shrink: 0;
-}
-
-.tab-item:hover {
-  color: var(--chat-text, #ccc);
-}
-
-.tab-item.active {
-  background: var(--chat-muted, #3c3c3c);
-  color: var(--chat-text, #fff);
-}
-
-.tab-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tab-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  padding: 0;
-  padding-left: 8px;
-  background: linear-gradient(to right, transparent, var(--chat-bg, #1e1e1e) 50%);
-  border: none;
-  border-radius: 0 4px 4px 0;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-  opacity: 0;
-}
-
-.tab-item:hover .tab-close {
-  opacity: 1;
-}
-
-.tab-item.active .tab-close {
-  background: linear-gradient(to right, transparent, var(--chat-muted, #3c3c3c) 50%);
-}
-
-.tab-close:hover {
-  color: var(--chat-text, #fff);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.header-actions .icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--chat-text-muted, #888);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.header-actions .icon-btn:hover,
-.header-actions .icon-btn.active {
-  color: var(--chat-text, #fff);
-}
-
-.header-actions .icon-btn.small {
-  width: 20px;
-  height: 20px;
-}
-
-.dropdown-container {
-  position: relative;
-}
-
-.dropdown-panel {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  background: var(--chat-dropdown-bg, #252526);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 100;
-  overflow: hidden;
-}
-
-.history-panel {
-  width: 360px;
-}
-
-.more-panel {
-  width: 200px;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--chat-border, #333);
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #888);
-}
-
-.panel-content {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-/* 日期分组标签 */
-.history-group-label {
-  padding: 8px 12px 4px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #666);
-}
-
-.history-group-label:not(:first-child) {
-  border-top: 1px solid var(--chat-border, #333);
-  margin-top: 4px;
-  padding-top: 12px;
-}
-
-.history-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.history-item:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.history-item.active {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.history-title {
-  flex: 1;
-  font-size: 14px;
-  color: var(--chat-text, #ccc);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.history-time {
-  font-size: 14px;
-  color: var(--chat-text-muted, #666);
-  flex-shrink: 0;
-  margin-right: 10px;
-}
-
-.history-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.history-item:hover .history-actions {
-  opacity: 1;
-}
-
-.history-action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.history-action-btn:hover {
-  color: var(--chat-text, #fff);
-}
-
-.history-action-btn.delete:hover {
-  color: var(--chat-destructive, #ef4444);
-}
-
-.empty-state {
-  padding: 20px;
-  text-align: center;
-  font-size: 14px;
-  color: var(--chat-text-muted, #666);
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--chat-text-muted, #999);
-  cursor: pointer;
-  transition: all 0.15s;
-  text-align: left;
-}
-
-.menu-item:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--chat-text, #ccc);
-}
-
-.menu-divider {
-  height: 1px;
-  background: var(--chat-border, #333);
-  margin: 4px 0;
-}

package/src/components/header/ChatHeader.tsx

@@ -1,376 +0,0 @@
-/**
- * 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>
-  )
-}