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

package/src/components/message/MessageBubble.css

@@ -1,193 +0,0 @@
-/**
- * MessageBubble 组件样式
- * 与 Vue 版本 MessageBubble.vue 保持一致
- */
-
-.message-bubble {
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 用户消息 */
-.message-bubble.user {
-  width: 100%;
-}
-
-.user-content {
-  width: 100%;
-  background: var(--chat-muted, #2d2d2d);
-  color: var(--chat-text, #ccc);
-  padding: 12px;
-  border-radius: 12px;
-  border: 1px solid var(--chat-border, #444);
-}
-
-.user-text {
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.user-images {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-  flex-wrap: wrap;
-}
-
-.user-image {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: transform 0.15s;
-}
-
-.user-image:hover {
-  transform: scale(1.05);
-}
-
-/* 助手消息 */
-.message-bubble.assistant {
-  position: relative;
-}
-
-.assistant-content {
-  max-width: 100%;
-}
-
-/* 加载提示 - 等待状态时 */
-.loading-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 10px 16px;
-  background: var(--chat-muted, #2a2a2a);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-/* 当上方有内容时，添加间距 */
-.loading-indicator.has-content-above {
-  margin-top: 8px;
-}
-
-.loading-text {
-  font-size: 13px;
-  color: var(--chat-text-muted, #888);
-  position: relative;
-  z-index: 1;
-}
-
-.loading-shimmer {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.08) 50%,
-    transparent 100%
-  );
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-/* 操作按钮 */
-.message-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 8px;
-}
-
-.message-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.model-name {
-  font-size: 11px;
-  color: var(--chat-text-muted, #888);
-  background: var(--chat-muted, #2a2a2a);
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid var(--chat-border, #333);
-}
-
-.mode-badge {
-  font-size: 10px;
-  color: var(--chat-text-muted, #888);
-  background: var(--chat-muted, #2a2a2a);
-  padding: 2px 6px;
-  border-radius: 10px;
-  border: 1px solid var(--chat-border, #333);
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.action-btn:hover {
-  background: var(--chat-muted, #3c3c3c);
-  color: var(--chat-text, #ccc);
-}
-
-.action-btn.copied {
-  color: #22c55e;
-}
-
-/* 消息时间 */
-.message-time {
-  font-size: 12px;
-  color: var(--chat-text-muted, #666);
-}
-
-.user-time {
-  text-align: right;
-  margin-top: 8px;
-}
-
-.assistant-time {
-  margin-right: 8px;
-}

package/src/components/message/MessageBubble.tsx

@@ -1,240 +0,0 @@
-/**
- * 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
-  /** 取消工具调用（通常会中止当前请求/流式输出） */
-  onCancelToolCall?: (toolCallId: string) => void
-  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,
-  onCancelToolCall,
-  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 as TextPart).text) || 
-      p.type === 'thinking' ||
-      p.type === 'search' ||
-      p.type === 'tool_call'
-    )
-  }, [parts])
-
-  // loading 状态：决定显示什么类型的指示器
-  // text: 文字提示（等待状态时）
-  // none: 不显示（有正在进行的活动）
-  const loadingState = useMemo<{ type: 'text' | 'none'; text?: string }>(() => {
-    if (!loading) {
-      return { type: 'none' }
-    }
-    
-    // 分模式显示：ask 模式直接生成回答，agent 模式规划下一步
-    const waitingText = mode === 'ask' ? '正在生成回答...' : '正在规划下一步...'
-    
-    // 没有任何 parts 时，显示等待
-    if (parts.length === 0) {
-      return { type: 'text', text: waitingText }
-    }
-    
-    // 检查是否有正在进行的活动（如果有，不需要显示等待提示）
-    const hasActiveActivity = parts.some(part => {
-      // 思考正在进行
-      if (part.type === 'thinking' && (part as ThinkingPart).status === 'running') {
-        return true
-      }
-      // 搜索正在进行
-      if (part.type === 'search' && (part as SearchPart).status === 'running') {
-        return true
-      }
-      // 工具调用正在进行（running 或 pending）
-      if (part.type === 'tool_call') {
-        const status = (part as ToolCallPart).status
-        if (status === 'running' || status === 'pending') {
-          return true
-        }
-      }
-      return false
-    })
-    
-    // 有正在进行的活动 → 不显示等待提示（活动本身有状态显示）
-    if (hasActiveActivity) {
-      return { type: 'none' }
-    }
-    
-    // 检查最后一个 part 是否是正在流式输出的文本
-    const lastPart = parts[parts.length - 1]
-    if (lastPart.type === 'text') {
-      // 文本正在流式输出 → 不显示等待提示
-      return { type: 'none' }
-    }
-    
-    // 没有任何正在进行的活动，但 loading=true → 显示等待提示
-    // 这包括：工具执行完成后、思考完成后、搜索完成后等"空窗期"
-    return { type: 'text', text: waitingText }
-  }, [loading, parts, mode])
-
-  return (
-    <div className={`message-bubble ${role}`}>
-      {/* 用户消息 */}
-      {isUser ? (
-        onSend && inputContext ? (
-          <ChatInput
-            variant="message"
-            value={userText}
-            images={images}
-            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}
-              onCancelToolCall={onCancelToolCall}
-              autoRunConfig={autoRunConfig}
-              onSaveConfig={onSaveConfig}
-            />
-            
-            {/* 加载指示器：等待状态时显示 */}
-            {loadingState.type === 'text' && (
-              <div className={`loading-indicator${parts.length > 0 ? ' has-content-above' : ''}`}>
-                <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

@@ -1,12 +0,0 @@
-.parts-renderer {
-  display: flex;
-  flex-direction: column;
-}
-
-.part-item {
-  margin-top: 8px;
-}
-
-.part-item:first-child {
-  margin-top: 0;
-}

package/src/components/message/PartsRenderer.tsx

@@ -1,168 +0,0 @@
-import { useContext, useMemo, type FC, type ComponentType } from 'react'
-import type { 
-  ContentPart, 
-  StepsExpandedType, 
-  TextPart as TextPartType, 
-  ThinkingPart as ThinkingPartType, 
-  SearchPart as SearchPartType, 
-  ToolCallPart as ToolCallPartType, 
-  ImagePart as ImagePartType, 
-  ErrorPart as ErrorPartType,
-} from '../../types'
-import type { ChatAdapter } from '../../adapter'
-import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
-import { PartRenderersContext } from '../../context/RenderersContext'
-import { 
-  TextPart, 
-  ThinkingPart, 
-  SearchPart, 
-  ImagePart,
-  ErrorPart,
-} from './parts'
-import { ToolCallPart } from './parts/ToolCallPart'
-import './PartsRenderer.css'
-
-/** Part 渲染器映射类型 */
-type PartRenderers = Record<string, ComponentType<Record<string, unknown>>>
-
-interface PartsRendererProps {
-  parts: ContentPart[]
-  expandedType?: StepsExpandedType
-  /** 自定义 Part 渲染器（props 传入优先级高于 context） */
-  partRenderers?: PartRenderers
-  // 工具调用相关
-  adapter?: ChatAdapter
-  onCancelToolCall?: (toolCallId: string) => void
-  autoRunConfig?: AutoRunConfig
-  onSaveConfig?: (config: AutoRunConfig) => Promise<void>
-}
-
-// ==================== 类型守卫函数 ====================
-
-function isText(part: ContentPart): part is TextPartType {
-  return part.type === 'text'
-}
-
-function isThinking(part: ContentPart): part is ThinkingPartType {
-  return part.type === 'thinking'
-}
-
-function isSearch(part: ContentPart): part is SearchPartType {
-  return part.type === 'search'
-}
-
-function isToolCall(part: ContentPart): part is ToolCallPartType {
-  return part.type === 'tool_call'
-}
-
-function isImage(part: ContentPart): part is ImagePartType {
-  return part.type === 'image'
-}
-
-function isError(part: ContentPart): part is ErrorPartType {
-  return part.type === 'error'
-}
-
-export const PartsRenderer: FC<PartsRendererProps> = ({ 
-  parts,
-  expandedType = 'auto',
-  partRenderers: propRenderers,
-  adapter,
-  onCancelToolCall,
-  autoRunConfig,
-  onSaveConfig,
-}) => {
-  // 从 context 获取渲染器，props 优先
-  const contextRenderers = useContext(PartRenderersContext)
-  const partRenderers = propRenderers ?? contextRenderers
-
-  /** 可见的 parts */
-  const visibleParts = useMemo(() => parts, [parts])
-
-  const renderPart = (part: ContentPart) => {
-    // 先检查是否有自定义渲染器
-    const CustomRenderer = partRenderers[part.type]
-    if (CustomRenderer) {
-      return <CustomRenderer {...part} />
-    }
-
-    // 内置类型渲染（使用类型守卫）
-    if (isText(part)) {
-      return <TextPart text={part.text} />
-    }
-    
-    if (isThinking(part)) {
-      return (
-        <ThinkingPart 
-          text={part.text}
-          status={part.status}
-          duration={part.duration}
-          expandedType={expandedType}
-        />
-      )
-    }
-    
-    if (isSearch(part)) {
-      return (
-        <SearchPart 
-          query={part.query}
-          results={part.results}
-          status={part.status}
-          expandedType={expandedType}
-        />
-      )
-    }
-    
-    if (isToolCall(part)) {
-      return (
-        <ToolCallPart 
-          id={part.id}
-          name={part.name}
-          args={part.args}
-          output={part.output}
-          status={part.status}
-          expandedType={expandedType}
-          adapter={adapter}
-          onCancelToolCall={onCancelToolCall}
-          autoRunConfig={autoRunConfig}
-          onSaveConfig={onSaveConfig}
-        />
-      )
-    }
-    
-    if (isImage(part)) {
-      return <ImagePart url={part.url} />
-    }
-    
-    if (isError(part)) {
-      return (
-        <ErrorPart 
-          message={part.message}
-          category={part.category}
-          retryable={part.retryable}
-        />
-      )
-    }
-    
-    // 未知类型，显示 JSON
-    return (
-      <div className="unknown-part">
-        <pre>{JSON.stringify(part, null, 2)}</pre>
-      </div>
-    )
-  }
-
-  return (
-    <div className="parts-renderer">
-      {visibleParts.map((part, index) => (
-        <div 
-          key={index} 
-          className="part-item"
-          style={{ marginTop: index > 0 ? '8px' : '0' }}
-        >
-          {renderPart(part)}
-        </div>
-      ))}
-    </div>
-  )
-}