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

package/src/components/chat/messages/MessageBubble.tsx

@@ -1,130 +0,0 @@
-/**
- * MessageBubble Component
- * 与 Vue 版本 MessageBubble.vue 保持一致
- */
-
-import { type FC, type ReactNode } from 'react'
-import { Copy, Check, RefreshCw } from 'lucide-react'
-import { ExecutionSteps } from './ExecutionSteps'
-import { ChatInput } from '../../ChatInput'
-import type { SearchResult, ToolCall } from '../../../types'
-
-interface MessageBubbleProps {
-  role: 'user' | 'assistant'
-  content: string
-  images?: string[]
-  thinking?: string
-  thinkingComplete?: boolean
-  thinkingDuration?: number
-  searchResults?: SearchResult[]
-  searching?: boolean
-  toolCalls?: ToolCall[]
-  copied?: boolean
-  loading?: boolean
-  onCopy?: () => void
-  onRegenerate?: () => void
-  /** 编辑用户消息后重新发送 */
-  onSend?: (text: string) => void
-  /** 自定义 Markdown 渲染器 */
-  renderMarkdown?: (content: string) => ReactNode
-}
-
-/** 默认 Markdown 渲染（简单处理） */
-function defaultRenderMarkdown(content: string): ReactNode {
-  // 简单的 Markdown 处理：代码块
-  const parts = content.split(/(```[\s\S]*?```)/g)
-  
-  return parts.map((part, i) => {
-    if (part.startsWith('```') && part.endsWith('```')) {
-      const code = part.slice(3, -3)
-      const firstLine = code.indexOf('\n')
-      const lang = firstLine > 0 ? code.slice(0, firstLine).trim() : ''
-      const codeContent = firstLine > 0 ? code.slice(firstLine + 1) : code
-      return (
-        <pre key={i}>
-          <code>{codeContent}</code>
-        </pre>
-      )
-    }
-    // 处理行内代码
-    const inlineParts = part.split(/(`[^`]+`)/g)
-    return (
-      <span key={i}>
-        {inlineParts.map((p, j) => {
-          if (p.startsWith('`') && p.endsWith('`')) {
-            return <code key={j}>{p.slice(1, -1)}</code>
-          }
-          return p
-        })}
-      </span>
-    )
-  })
-}
-
-export const MessageBubble: FC<MessageBubbleProps> = ({
-  role,
-  content,
-  images,
-  thinking,
-  thinkingComplete = true,
-  thinkingDuration,
-  searchResults,
-  searching,
-  toolCalls,
-  copied,
-  loading,
-  onCopy,
-  onRegenerate,
-  onSend,
-  renderMarkdown = defaultRenderMarkdown,
-}) => {
-  const isUser = role === 'user'
-
-  return (
-    <div className="message-bubble">
-      {/* 用户消息 - 复用 ChatInput 组件 */}
-      {isUser ? (
-        <ChatInput
-          variant="message"
-          value={content}
-          selectedImages={images}
-          onSend={onSend}
-        />
-      ) : (
-        /* AI 消息 */
-        <div className="assistant-message">
-          {/* 执行步骤列表 */}
-          <ExecutionSteps
-            loading={loading}
-            hasContent={!!content}
-            thinking={thinking}
-            thinkingComplete={thinkingComplete}
-            thinkingDuration={thinkingDuration}
-            searching={searching}
-            searchResults={searchResults}
-            toolCalls={toolCalls}
-          />
-
-          {/* 消息内容 */}
-          {content && (
-            <div className="message-content">
-              {renderMarkdown(content)}
-            </div>
-          )}
-
-          {/* 操作按钮 */}
-          {content && !loading && (
-            <div className="message-actions">
-              <button className={`action-btn${copied ? ' copied' : ''}`} onClick={onCopy} title="复制">
-                {copied ? <Check size={14} /> : <Copy size={14} />}
-              </button>
-              <button className="action-btn" onClick={onRegenerate} title="重新生成">
-                <RefreshCw size={14} />
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,301 +0,0 @@
-/**
- * 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

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