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

package/src/components/message/MessageBubble.tsx

@@ -0,0 +1,231 @@
+/**
+ * MessageBubble Component
+ * 新架构：使用 ContentPart 数组渲染消息内容
+ */
+
+import { useMemo, type FC } from 'react'
+import './MessageBubble.css'
+import { Icon } from '@iconify/react'
+import { PartsRenderer } from './PartsRenderer'
+import { ChatInput } from '../input/ChatInput'
+import { useChatInputContext } from '../../context/ChatInputContext'
+import type { ContentPart, TextPart, ToolCallPart, SearchPart, ThinkingPart, ModelOption } from '../../types'
+import type { ChatAdapter } from '../../adapter'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+
+interface MessageBubbleProps {
+  role: 'user' | 'assistant'
+  /** 内容 parts 数组 - 新架构核心 */
+  parts: ContentPart[]
+  /** 生成此消息时使用的模型 */
+  model?: string
+  /** 生成此消息时使用的模式 (ask/agent) */
+  mode?: string
+  /** 用户上传的图片 */
+  images?: string[]
+  /** 是否正在加载 */
+  loading?: boolean
+  /** 是否已复制 */
+  copied?: boolean
+  /** 消息时间戳 */
+  timestamp?: Date | string | number
+  onCopy?: () => void
+  onRegenerate?: () => void
+  /** 编辑用户消息后重新发送 */
+  onSend?: (text: string) => void
+  /** 步骤折叠模式 */
+  stepsExpandedType?: 'open' | 'close' | 'auto'
+  /** 工具调用相关 - 通过 props 传递 */
+  adapter?: ChatAdapter
+  autoRunConfig?: AutoRunConfig
+  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
+}
+
+/** 获取模型显示名称 */
+function getModelDisplayName(modelId: string, models?: ModelOption[]): string {
+  // 优先从传入的 models 中查找
+  const found = models?.find((m) => m.modelId === modelId)
+  if (found) return found.displayName
+  // 后备：提取模型名称（前端不应该依赖后端包）
+  return modelId.split('/').pop() || modelId
+}
+
+/** 格式化时间显示 */
+function formatTime(timestamp?: Date | string | number): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+export const MessageBubble: FC<MessageBubbleProps> = ({
+  role,
+  parts,
+  model,
+  mode,
+  images,
+  loading,
+  copied,
+  timestamp,
+  onCopy,
+  onRegenerate,
+  onSend,
+  stepsExpandedType = 'auto',
+  adapter,
+  autoRunConfig,
+  onSaveConfig,
+}) => {
+  const isUser = role === 'user'
+  const formattedTime = formatTime(timestamp)
+  const inputContext = useChatInputContext()
+
+  // 提取用户消息的文本内容
+  const userText = useMemo(() => {
+    return parts
+      .filter((p): p is TextPart => p.type === 'text')
+      .map(p => p.text)
+      .join('')
+  }, [parts])
+
+  // 是否有内容（用于显示操作按钮）
+  const hasContent = useMemo(() => {
+    return parts.some(p => 
+      (p.type === 'text' && p.text) || 
+      p.type === 'tool_result' ||
+      p.type === 'thinking' ||
+      p.type === 'search'
+    )
+  }, [parts])
+
+  // loading 状态：决定显示什么类型的指示器
+  // cursor: 闪烁光标（文本流式输出时）
+  // text: 文字提示（等待状态时）
+  // none: 不显示
+  const loadingState = useMemo<{ type: 'cursor' | 'text' | 'none'; text?: string }>(() => {
+    if (!loading) {
+      return { type: 'none' }
+    }
+    
+    if (parts.length === 0) {
+      return { type: 'text', text: '正在思考...' }
+    }
+    
+    const lastPart = parts[parts.length - 1]
+    
+    // 文本流式输出 → 不需要额外指示，用户能看到文字在增加
+    if (lastPart.type === 'text') {
+      return { type: 'none' }
+    }
+    
+    // 工具调用完成后 → 显示规划提示
+    if (lastPart.type === 'tool_call') {
+      const status = (lastPart as ToolCallPart).status
+      if (status === 'done' || status === 'error' || status === 'skipped') {
+        return { type: 'text', text: '正在规划下一步...' }
+      }
+      // 工具正在执行时，卡片本身有状态，不需要额外指示
+      return { type: 'none' }
+    }
+    
+    // 搜索完成后 → 显示规划提示
+    if (lastPart.type === 'search') {
+      if ((lastPart as SearchPart).status === 'done') {
+        return { type: 'text', text: '正在规划下一步...' }
+      }
+      return { type: 'none' }
+    }
+    
+    // 思考完成后 → 显示规划提示
+    if (lastPart.type === 'thinking') {
+      if ((lastPart as ThinkingPart).status === 'done') {
+        return { type: 'text', text: '正在规划下一步...' }
+      }
+      return { type: 'none' }
+    }
+    
+    return { type: 'none' }
+  }, [loading, parts])
+
+  return (
+    <div className={`message-bubble ${role}`}>
+      {/* 用户消息 */}
+      {isUser ? (
+        onSend && inputContext ? (
+          <ChatInput
+            variant="message"
+            value={userText}
+            mode={inputContext.mode}
+            model={inputContext.model}
+            models={inputContext.models}
+            webSearchEnabled={inputContext.webSearch}
+            thinkingEnabled={inputContext.thinking}
+            isLoading={inputContext.isLoading}
+            onSend={onSend}
+            onModeChange={inputContext.setMode}
+            onModelChange={inputContext.setModel}
+            onWebSearchChange={inputContext.setWebSearch}
+            onThinkingChange={inputContext.setThinking}
+          />
+        ) : (
+          <div className="user-content">
+            <div className="user-text">{userText}</div>
+            {images && images.length > 0 && (
+              <div className="user-images">
+                {images.map((img, i) => (
+                  <img key={i} src={img} className="user-image" alt="" />
+                ))}
+              </div>
+            )}
+            {formattedTime && <div className="message-time user-time">{formattedTime}</div>}
+          </div>
+        )
+      ) : (
+        /* 助手消息 - 使用 PartsRenderer 渲染 */
+        <>
+          <div className="assistant-content">
+            <PartsRenderer 
+              parts={parts} 
+              expandedType={stepsExpandedType}
+              adapter={adapter}
+              autoRunConfig={autoRunConfig}
+              onSaveConfig={onSaveConfig}
+            />
+            
+            {/* 加载指示器：等待状态时显示 */}
+            {loadingState.type === 'text' && (
+              <div className="loading-indicator">
+                <span className="loading-text">{loadingState.text}</span>
+                <span className="loading-shimmer"></span>
+              </div>
+            )}
+          </div>
+
+          {/* 操作按钮 */}
+          {hasContent && loading === false && (
+            <div className="message-actions">
+              {/* 左侧：模型信息 */}
+              <div className="message-meta">
+                {model && <span className="model-name">{getModelDisplayName(model, inputContext?.models)}</span>}
+                {mode && <span className="mode-badge">{mode === 'ask' ? 'Ask' : 'Agent'}</span>}
+              </div>
+              {/* 右侧：时间和按钮 */}
+              <div className="action-buttons">
+                {formattedTime && <span className="message-time assistant-time">{formattedTime}</span>}
+                <button className={`action-btn${copied ? ' copied' : ''}`} onClick={onCopy} title="复制">
+                  <Icon icon={copied ? 'lucide:check' : 'lucide:copy'} width={14} />
+                </button>
+                <button className="action-btn" onClick={onRegenerate} title="重新生成">
+                  <Icon icon="lucide:refresh-cw" width={14} />
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/message/PartsRenderer.css

@@ -0,0 +1,4 @@
+.parts-renderer {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/message/PartsRenderer.tsx

@@ -0,0 +1,114 @@
+import type { FC } from 'react'
+import type { ContentPart, StepsExpandedType } from '../../types'
+import type { ChatAdapter } from '../../adapter'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+import { 
+  TextPart, 
+  ThinkingPart, 
+  SearchPart, 
+  ToolCallPart, 
+  ToolResultPart, 
+  ImagePart,
+  ErrorPart 
+} from './parts'
+import './PartsRenderer.css'
+
+interface PartsRendererProps {
+  parts: ContentPart[]
+  expandedType?: StepsExpandedType
+  // 工具调用相关
+  adapter?: ChatAdapter
+  autoRunConfig?: AutoRunConfig
+  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
+}
+
+export const PartsRenderer: FC<PartsRendererProps> = ({ 
+  parts,
+  expandedType = 'auto',
+  adapter,
+  autoRunConfig,
+  onSaveConfig,
+}) => {
+  return (
+    <div className="parts-renderer">
+      {parts.map((part, index) => {
+        switch (part.type) {
+          case 'text':
+            return <TextPart key={index} text={part.text} />
+          
+          case 'thinking':
+            return (
+              <ThinkingPart 
+                key={index}
+                text={part.text}
+                status={part.status}
+                duration={part.duration}
+                expandedType={expandedType}
+              />
+            )
+          
+          case 'search':
+            return (
+              <SearchPart 
+                key={index}
+                query={part.query}
+                results={part.results}
+                status={part.status}
+                expandedType={expandedType}
+              />
+            )
+          
+          case 'tool_call':
+            return (
+              <ToolCallPart 
+                key={index}
+                id={part.id}
+                name={part.name}
+                args={part.args}
+                status={part.status}
+                result={part.result}
+                expandedType={expandedType}
+                adapter={adapter}
+                autoRunConfig={autoRunConfig}
+                onSaveConfig={onSaveConfig}
+              />
+            )
+          
+          case 'tool_result':
+            return (
+              <ToolResultPart 
+                key={index}
+                id={part.id}
+                name={part.name}
+                args={part.args}
+                result={part.result}
+                status={part.status}
+                expandedType={expandedType}
+              />
+            )
+          
+          case 'image':
+            return (
+              <ImagePart 
+                key={index}
+                url={part.url}
+              />
+            )
+          
+          case 'error':
+            return (
+              <ErrorPart 
+                key={index}
+                message={part.message}
+                category={part.category}
+                retryable={part.retryable}
+              />
+            )
+          
+          default:
+            return null
+        }
+      })}
+    </div>
+  )
+}

package/src/components/message/ToolResultRenderer.tsx

@@ -0,0 +1,21 @@
+/**
+ * 工具结果渲染器
+ * 根据工具名称选择合适的渲染组件
+ */
+
+import { FC, useContext, useMemo, type ComponentType } from 'react'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+import { ToolRenderersContext } from '../../context/RenderersContext'
+import { DefaultToolResult } from './tool-results'
+
+export const ToolResultRenderer: FC<ToolRendererProps> = (props) => {
+  // 从上层获取自定义工具渲染器
+  const customRenderers = useContext(ToolRenderersContext)
+
+  // 解析使用哪个组件
+  const Component = useMemo<ComponentType<ToolRendererProps>>(() => {
+    return customRenderers[props.toolName] || DefaultToolResult
+  }, [customRenderers, props.toolName])
+
+  return <Component {...props} />
+}

package/src/components/message/WelcomeMessage.css

@@ -0,0 +1,221 @@
+.welcome-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 40px 24px;
+  max-width: 640px;
+  margin: 0 auto;
+  min-height: 100%;
+}
+
+/* 标题区域 */
+.welcome-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+}
+
+.welcome-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.welcome-icon {
+  color: var(--chat-text-muted, #888);
+}
+
+.welcome-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+  margin: 0;
+}
+
+.welcome-subtitle {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  margin: 0;
+}
+
+/* 区域标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding-left: 2px;
+}
+
+.section-icon {
+  color: var(--chat-text-muted, #666);
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* 能力标签 */
+.features-section {
+  width: 100%;
+}
+
+.features-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.feature-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #3a3a3a);
+  border-radius: 20px;
+  font-size: 12px;
+  color: var(--chat-text, #ccc);
+  transition: all 0.15s;
+}
+
+.feature-tag:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.feature-icon {
+  color: var(--chat-text-muted, #888);
+}
+
+/* 快捷操作 */
+.tasks-section {
+  width: 100%;
+}
+
+.tasks-grid {
+  display: grid;
+  gap: 10px;
+}
+
+/* 单个任务：居中显示 */
+.tasks-single {
+  grid-template-columns: minmax(200px, 320px);
+  justify-content: center;
+}
+
+/* 两个任务：两列 */
+.tasks-two {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 三个任务：三列 */
+.tasks-three {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 多个任务：两列自动换行 */
+.tasks-multi {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.task-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #3a3a3a);
+  border-radius: 10px;
+  color: var(--chat-text, #ccc);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.task-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(59, 130, 246, 0.5);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.task-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(59, 130, 246, 0.15);
+  border-radius: 8px;
+  color: #60a5fa;
+}
+
+.task-card:hover .task-icon {
+  background: rgba(59, 130, 246, 0.25);
+}
+
+.task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 2px;
+}
+
+.task-desc {
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-arrow {
+  flex-shrink: 0;
+  color: var(--chat-text-muted, #666);
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: all 0.2s;
+}
+
+.task-card:hover .task-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 响应式 */
+@media (max-width: 540px) {
+  .welcome-message {
+    padding: 32px 16px;
+    gap: 24px;
+  }
+
+  .welcome-title {
+    font-size: 24px;
+  }
+
+  .tasks-two,
+  .tasks-three,
+  .tasks-multi {
+    grid-template-columns: 1fr;
+  }
+
+  .task-arrow {
+    display: none;
+  }
+}

package/src/components/message/WelcomeMessage.tsx

@@ -0,0 +1,93 @@
+/**
+ * WelcomeMessage Component
+ * 与 Vue 版本 WelcomeMessage.vue 保持一致
+ */
+
+import { type FC, useMemo } from 'react'
+import './WelcomeMessage.css'
+import { Icon } from '@iconify/react'
+import { type WelcomeConfig, defaultWelcomeConfig } from './welcome-types'
+
+interface WelcomeMessageProps {
+  /** 欢迎页配置（可部分配置，未配置项使用默认值） */
+  config?: Partial<WelcomeConfig>
+  /** 快捷操作回调 */
+  onQuickAction: (text: string) => void
+}
+
+export const WelcomeMessage: FC<WelcomeMessageProps> = ({ config: propsConfig, onQuickAction }) => {
+  // 合并配置
+  const config = useMemo<WelcomeConfig>(() => ({
+    title: propsConfig?.title ?? defaultWelcomeConfig.title,
+    subtitle: propsConfig?.subtitle ?? defaultWelcomeConfig.subtitle,
+    icon: propsConfig?.icon ?? defaultWelcomeConfig.icon,
+    features: propsConfig?.features ?? defaultWelcomeConfig.features,
+    tasks: propsConfig?.tasks ?? defaultWelcomeConfig.tasks,
+  }), [propsConfig])
+
+  // 根据任务数量动态选择网格布局
+  const tasksGridClass = useMemo(() => {
+    const count = config.tasks.length
+    if (count === 1) return 'tasks-grid tasks-single'
+    if (count === 2) return 'tasks-grid tasks-two'
+    if (count === 3) return 'tasks-grid tasks-three'
+    return 'tasks-grid tasks-multi'
+  }, [config.tasks.length])
+
+  return (
+    <div className="welcome-message">
+      {/* 标题区域 */}
+      <div className="welcome-header">
+        <div className="welcome-title-row">
+          <Icon icon={config.icon} width={28} className="welcome-icon" />
+          <h2 className="welcome-title">{config.title}</h2>
+        </div>
+        <p className="welcome-subtitle">{config.subtitle}</p>
+      </div>
+
+      {/* 能力标签 */}
+      {config.features.length > 0 && (
+        <div className="features-section">
+          <div className="section-header">
+            <Icon icon="lucide:zap" width={14} className="section-icon" />
+            <span className="section-title">支持的能力</span>
+          </div>
+          <div className="features-list">
+            {config.features.map((feature) => (
+              <div key={feature.name} className="feature-tag">
+                <Icon icon={feature.icon} width={14} className="feature-icon" />
+                <span>{feature.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 快捷操作 */}
+      {config.tasks.length > 0 && (
+        <div className="tasks-section">
+          <div className="section-header">
+            <Icon icon="lucide:rocket" width={14} className="section-icon" />
+            <span className="section-title">快捷操作</span>
+          </div>
+          <div className={tasksGridClass}>
+            {config.tasks.map((task) => (
+              <button
+                key={task.name}
+                className="task-card"
+                onClick={() => onQuickAction(task.prompt)}
+              >
+                <Icon icon={task.icon} width={18} className="task-icon" />
+                <div className="task-content">
+                  <div className="task-name">{task.name}</div>
+                  <div className="task-desc">{task.desc}</div>
+                </div>
+                <Icon icon="lucide:arrow-right" width={14} className="task-arrow" />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}