@huyooo/ai-chat-frontend-react 0.1.2

package/src/components/chat/ui/ChatHeader.tsx

@@ -0,0 +1,301 @@
+/**
+ * ChatHeader Component
+ * 与 Vue 版本 ChatHeader.vue 保持一致
+ */
+
+import { useState, useRef, useEffect, useCallback, type FC } from 'react'
+import { Plus, Clock, MoreHorizontal, X, MessageSquare, Pencil, Trash2 } from 'lucide-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
+  /** 关闭面板 */
+  onClose?: () => void
+  /** 清空所有对话 */
+  onClearAll?: () => void
+  /** 关闭其他对话 */
+  onCloseOthers?: () => void
+  /** 导出对话 */
+  onExport?: () => void
+  /** 复制请求 ID */
+  onCopyId?: () => void
+  /** 反馈 */
+  onFeedback?: () => void
+  /** Agent 设置 */
+  onSettings?: () => void
+}
+
+/** 格式化时间 */
+function formatTime(date: Date | string | undefined): string {
+  if (!date) return ''
+  const d = new Date(date)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days === 0) {
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  } else if (days === 1) {
+    return '昨天'
+  } else if (days < 7) {
+    return `${days}天前`
+  } else {
+    return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
+  }
+}
+
+export const ChatHeader: FC<ChatHeaderProps> = ({
+  sessions,
+  currentSessionId,
+  showClose = false,
+  onNewSession,
+  onSwitchSession,
+  onDeleteSession,
+  onClose,
+  onClearAll,
+  onCloseOthers,
+  onExport,
+  onCopyId,
+  onFeedback,
+  onSettings,
+}) => {
+  const [historyOpen, setHistoryOpen] = useState(false)
+  const [moreMenuOpen, setMoreMenuOpen] = useState(false)
+  const [hiddenTabs, setHiddenTabs] = useState<Set<string>>(new Set())
+
+  const historyRef = useRef<HTMLDivElement>(null)
+  const moreMenuRef = useRef<HTMLDivElement>(null)
+
+  // 可见的会话
+  const visibleSessions = sessions.filter((s) => !hiddenTabs.has(s.id))
+
+  // 点击外部关闭菜单
+  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 handleSwitchSession = useCallback(
+    (sessionId: string) => {
+      onSwitchSession?.(sessionId)
+      setHistoryOpen(false)
+    },
+    [onSwitchSession]
+  )
+
+  // 隐藏 tab
+  const handleHideTab = useCallback(
+    (sessionId: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      setHiddenTabs((prev) => new Set([...prev, sessionId]))
+      if (sessionId === currentSessionId) {
+        const remaining = sessions.filter((s) => s.id !== sessionId && !hiddenTabs.has(s.id))
+        if (remaining.length > 0) {
+          onSwitchSession?.(remaining[0].id)
+        }
+      }
+    },
+    [currentSessionId, sessions, hiddenTabs, onSwitchSession]
+  )
+
+  // 删除会话
+  const handleDeleteSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (window.confirm('确定要删除这个对话吗？')) {
+      onDeleteSession?.(sessionId)
+    }
+  }
+
+  // 菜单项点击
+  const handleMenuClick = (callback?: () => void) => {
+    callback?.()
+    setMoreMenuOpen(false)
+  }
+
+  return (
+    <div className="chat-header">
+      {/* 左侧：Tabs */}
+      <div className="chat-tabs">
+        {visibleSessions.length === 0 ? (
+          <span className="chat-tab active">
+            <span className="chat-tab-title">New Chat</span>
+          </span>
+        ) : (
+          visibleSessions.map((session) => {
+            const title = session.title === '新对话' ? 'New Chat' : session.title
+            const isActive = session.id === currentSessionId
+            return (
+              <div
+                key={session.id}
+                className={`chat-tab${isActive ? ' active' : ''}`}
+                onClick={() => handleSwitchSession(session.id)}
+                title={session.title}
+              >
+                <span className="chat-tab-title">{title}</span>
+                <span
+                  className="chat-tab-close"
+                  onClick={(e) => handleHideTab(session.id, e)}
+                  title="关闭标签"
+                >
+                  <X size={12} />
+                </span>
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {/* 右侧：操作按钮 */}
+      <div className="chat-header-actions">
+        {/* 新建会话 */}
+        <button className="header-btn" onClick={onNewSession} title="新建对话">
+          <Plus size={14} />
+        </button>
+
+        {/* 历史记录 */}
+        <div ref={historyRef} style={{ position: 'relative' }}>
+          <button
+            className={`header-btn${historyOpen ? ' active' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              setHistoryOpen(!historyOpen)
+              setMoreMenuOpen(false)
+            }}
+            title="历史记录"
+          >
+            <Clock size={14} />
+          </button>
+
+          {/* 历史记录面板 */}
+          {historyOpen && (
+            <div className="history-panel">
+              {sessions.length === 0 ? (
+                <div className="history-empty">暂无历史对话</div>
+              ) : (
+                sessions.map((session) => {
+                  const isCurrent = session.id === currentSessionId
+                  return (
+                    <div
+                      key={session.id}
+                      className={`history-item${isCurrent ? ' active' : ''}`}
+                    >
+                      <button
+                        className="history-item-content"
+                        onClick={() => handleSwitchSession(session.id)}
+                      >
+                        <MessageSquare size={12} />
+                        <span className="history-item-title">
+                          {session.title === '新对话' ? 'New Chat' : session.title}
+                        </span>
+                        <span className="history-item-time">
+                          {isCurrent ? 'Current' : formatTime(session.updatedAt)}
+                        </span>
+                      </button>
+                      <div className="history-item-actions">
+                        <button className="history-action-btn" title="编辑">
+                          <Pencil size={10} />
+                        </button>
+                        <button
+                          className="history-action-btn delete"
+                          title="删除"
+                          onClick={(e) => handleDeleteSession(session.id, e)}
+                        >
+                          <Trash2 size={10} />
+                        </button>
+                      </div>
+                    </div>
+                  )
+                })
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* 更多选项 */}
+        <div ref={moreMenuRef} style={{ position: 'relative' }}>
+          <button
+            className={`header-btn${moreMenuOpen ? ' active' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              setMoreMenuOpen(!moreMenuOpen)
+              setHistoryOpen(false)
+            }}
+            title="更多选项"
+          >
+            <MoreHorizontal size={14} />
+          </button>
+
+          {/* 更多选项菜单 */}
+          {moreMenuOpen && (
+            <div className="more-menu">
+              {showClose && (
+                <button className="menu-item" onClick={() => handleMenuClick(onClose)}>
+                  <span>关闭对话</span>
+                  <span className="menu-shortcut">⌘ W</span>
+                </button>
+              )}
+              {onClearAll && (
+                <button className="menu-item" onClick={() => handleMenuClick(onClearAll)}>
+                  清空所有对话
+                </button>
+              )}
+              {onCloseOthers && (
+                <button className="menu-item" onClick={() => handleMenuClick(onCloseOthers)}>
+                  关闭其他对话
+                </button>
+              )}
+              
+              {(showClose || onClearAll || onCloseOthers) && <div className="menu-divider" />}
+              
+              {onExport && (
+                <button className="menu-item" onClick={() => handleMenuClick(onExport)}>
+                  导出对话
+                </button>
+              )}
+              {onCopyId && (
+                <button className="menu-item" onClick={() => handleMenuClick(onCopyId)}>
+                  复制请求 ID
+                </button>
+              )}
+              {onFeedback && (
+                <button className="menu-item" onClick={() => handleMenuClick(onFeedback)}>
+                  反馈
+                </button>
+              )}
+              
+              {(onExport || onCopyId || onFeedback) && onSettings && <div className="menu-divider" />}
+              
+              {onSettings && (
+                <button className="menu-item" onClick={() => handleMenuClick(onSettings)}>
+                  Agent 设置
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/ui/WelcomeMessage.tsx

@@ -0,0 +1,107 @@
+/**
+ * WelcomeMessage Component
+ * 与 Vue 版本 WelcomeMessage.vue 保持一致
+ */
+
+import { type FC } from 'react'
+import { Wand2, ImageIcon, Video, Terminal } from 'lucide-react'
+
+interface WelcomeMessageProps {
+  /** 快捷操作回调 */
+  onQuickAction: (text: string) => void
+}
+
+/** 快捷操作配置 */
+const QUICK_ACTIONS = [
+  {
+    id: 'txt2img',
+    Icon: Wand2,
+    label: '文生图',
+    desc: 'AI 绘制创意图像',
+    prompt: '帮我生成一张图片：',
+    gradient: 'purple',
+    iconColor: 'purple',
+    featured: true,
+  },
+  {
+    id: 'img2img',
+    Icon: ImageIcon,
+    label: '图生图',
+    desc: '风格迁移',
+    prompt: '基于这张图片进行风格转换',
+    gradient: 'blue',
+    iconColor: 'blue',
+    featured: false,
+  },
+  {
+    id: 'img2vid',
+    Icon: Video,
+    label: '图生视频',
+    desc: '动态化',
+    prompt: '将这张图片转换成视频',
+    gradient: 'emerald',
+    iconColor: 'emerald',
+    featured: false,
+  },
+  {
+    id: 'cmd',
+    Icon: Terminal,
+    label: '执行命令',
+    desc: '系统管理',
+    prompt: '执行命令：',
+    gradient: 'orange',
+    iconColor: 'orange',
+    featured: true,
+  },
+]
+
+export const WelcomeMessage: FC<WelcomeMessageProps> = ({ onQuickAction }) => {
+  return (
+    <div className="welcome-message">
+      {/* 动态极光背景 */}
+      <div className="welcome-glow purple" />
+      <div className="welcome-glow blue" />
+
+      {/* 标题区域 */}
+      <div className="welcome-title-area">
+        <h1 className="welcome-title">
+          Create
+          <br />
+          <span className="welcome-title-accent">Everything</span>
+        </h1>
+        <p className="welcome-subtitle">释放 AI 的无限创造力</p>
+      </div>
+
+      {/* 快捷操作网格 */}
+      <div className="quick-actions">
+        {QUICK_ACTIONS.map((action) => (
+          <button
+            key={action.id}
+            className={`quick-action-btn${action.featured ? ' featured' : ''}`}
+            onClick={() => onQuickAction(action.prompt)}
+          >
+            {/* 卡片背景渐变 */}
+            <div className={`quick-action-gradient ${action.gradient}`} />
+
+            {/* 图标 */}
+            <action.Icon className={`quick-action-icon ${action.iconColor}`} />
+
+            {/* 文字 */}
+            <div className="quick-action-text">
+              <span className="quick-action-label">{action.label}</span>
+              <span className="quick-action-desc">{action.desc}</span>
+            </div>
+
+            {/* 装饰性光斑 */}
+            <div className="quick-action-glow" />
+          </button>
+        ))}
+      </div>
+
+      {/* 底部装饰 */}
+      <div className="welcome-footer">
+        <div className="welcome-footer-line" />
+      </div>
+    </div>
+  )
+}