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

package/src/hooks/useImageUpload.ts

@@ -25,6 +25,12 @@ interface UseImageUploadOptions {
   maxImages?: number;
   /** 单张图片最大大小（字节），默认 10MB */
   maxSize?: number;
+  /** 图片最大宽度，默认 4000px（避免超过 API 像素限制） */
+  maxWidth?: number;
+  /** 图片最大高度，默认 4000px（避免超过 API 像素限制） */
+  maxHeight?: number;
+  /** 压缩质量 0-1，默认 0.85 */
+  quality?: number;
 }
 
 /**
@@ -32,7 +38,13 @@ interface UseImageUploadOptions {
  * @param options 配置项
  */
 export function useImageUpload(options: UseImageUploadOptions = {}) {
-  const { maxImages = 5, maxSize = 10 * 1024 * 1024 } = options;
+  const { 
+    maxImages = 5, 
+    maxSize = 10 * 1024 * 1024,
+    maxWidth = 4000,
+    maxHeight = 4000,
+    quality = 0.85
+  } = options;
 
   // 图片列表
   const [images, setImages] = useState<ImageItem[]>([]);
@@ -61,25 +73,75 @@ export function useImageUpload(options: UseImageUploadOptions = {}) {
   const hasImages = images.length > 0;
 
   /**
-   * 读取图片文件为 base64
+   * 压缩图片到指定尺寸
+   * @param file 原始图片文件
+   * @returns 压缩后的 ImageItem
    */
-  const readImageFile = useCallback((file: File): Promise<ImageItem> => {
+  const compressImage = useCallback((file: File): Promise<ImageItem> => {
     return new Promise((resolve, reject) => {
+      // 使用 FileReader 读取文件为 data URL（避免 CSP 对 blob URL 的限制）
       const reader = new FileReader();
+      
       reader.onload = () => {
         const dataUrl = reader.result as string;
-        // dataUrl 格式: data:image/png;base64,xxxxx
-        const base64 = dataUrl.split(',')[1];
-        resolve({
-          dataUrl,
-          base64,
-          mimeType: file.type,
-        });
+        const img = new Image();
+        
+        img.onload = () => {
+          let { width, height } = img;
+          
+          // 计算缩放比例
+          if (width > maxWidth || height > maxHeight) {
+            const ratio = Math.min(maxWidth / width, maxHeight / height);
+            width = Math.round(width * ratio);
+            height = Math.round(height * ratio);
+          }
+          
+          // 创建 canvas 进行压缩
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          
+          const ctx = canvas.getContext('2d');
+          if (!ctx) {
+            reject(new Error('无法创建 canvas context'));
+            return;
+          }
+          
+          ctx.drawImage(img, 0, 0, width, height);
+          
+          // 转换为 dataUrl（JPEG 格式以减小体积）
+          const mimeType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
+          const compressedDataUrl = canvas.toDataURL(mimeType, quality);
+          const base64 = compressedDataUrl.split(',')[1];
+          
+          resolve({
+            dataUrl: compressedDataUrl,
+            base64,
+            mimeType,
+          });
+        };
+        
+        img.onerror = () => {
+          reject(new Error('图片加载失败'));
+        };
+        
+        img.src = dataUrl;
       };
-      reader.onerror = reject;
+      
+      reader.onerror = () => {
+        reject(new Error('读取文件失败'));
+      };
+      
       reader.readAsDataURL(file);
     });
-  }, []);
+  }, [maxWidth, maxHeight, quality]);
+
+  /**
+   * 读取图片文件为 base64（带压缩）
+   */
+  const readImageFile = useCallback((file: File): Promise<ImageItem> => {
+    return compressImage(file);
+  }, [compressImage]);
 
   /**
    * 处理文件列表
@@ -221,6 +283,35 @@ export function useImageUpload(options: UseImageUploadOptions = {}) {
     [processFiles]
   );
 
+  /**
+   * 从 data URL 字符串数组初始化图片（用于历史消息编辑）
+   * @param data data URL 字符串数组
+   */
+  const initImages = useCallback((data: string[]) => {
+    const items: ImageItem[] = [];
+    for (const item of data) {
+      if (item.startsWith('data:')) {
+        // data URL 格式: data:image/png;base64,xxxxx
+        const matches = item.match(/^data:([^;]+);base64,(.+)$/);
+        if (matches) {
+          items.push({
+            dataUrl: item,
+            base64: matches[2],
+            mimeType: matches[1],
+          });
+        }
+      } else {
+        // 普通 URL，只能作为预览显示
+        items.push({
+          dataUrl: item,
+          base64: '',
+          mimeType: 'image/unknown',
+        });
+      }
+    }
+    setImages(items);
+  }, []);
+
   return {
     // 状态
     images,
@@ -249,5 +340,6 @@ export function useImageUpload(options: UseImageUploadOptions = {}) {
     removeImage,
     clearImages,
     addImages,
+    initImages,
   };
 }

package/src/hooks/useVoiceInput.ts

@@ -55,6 +55,9 @@ function resample(audioData: Float32Array, fromSampleRate: number, toSampleRate:
   return result;
 }
 
+// 全局预热标志：确保只预热一次（避免多个组件实例重复预热）
+let asrWarmupDone = false;
+
 async function setupAudioWorkletCapture(opts: {
   audioContext: AudioContext;
   source: MediaStreamAudioSourceNode;
@@ -156,6 +159,20 @@ registerProcessor('pcm-capture', PcmCaptureProcessor);
 export function useVoiceInput(adapter: ChatAdapter | undefined, config: VoiceInputConfig = {}): UseVoiceInputReturn {
   const { sampleRate = 16000, sendInterval = 200, enablePunc = true, enableItn = true } = config;
 
+  // 自动预热 ASR 连接（仅首次调用，延迟执行，避免阻塞初始化）
+  useEffect(() => {
+    if (adapter && !asrWarmupDone && typeof adapter.asrWarmup === 'function') {
+      asrWarmupDone = true;
+      // 延迟 800ms 预热，避免与首屏渲染竞争资源
+      const timer = setTimeout(() => {
+        adapter.asrWarmup?.().catch(() => {
+          // 静默失败，不影响功能
+        });
+      }, 800);
+      return () => clearTimeout(timer);
+    }
+  }, [adapter]);
+
   const [status, setStatus] = useState<VoiceInputStatus>('idle');
   const [currentText, setCurrentText] = useState('');
   const [finalText, setFinalText] = useState('');

package/src/index.ts

@@ -5,7 +5,7 @@
  *
  * 新架构：使用 ContentPart 数组渲染消息内容
  * - 支持流式渲染
- * - 支持自定义工具结果 UI
+ * - 支持自定义 Part 类型渲染（如 weather, stock）
  * - 支持思考、搜索、工具调用等多种内容类型
  */
 
@@ -51,7 +51,6 @@ export type {
   ThinkingPart,
   SearchPart,
   ToolCallPart,
-  ToolResultPart,
   ImagePart,
   ErrorPart,
   // 搜索结果
@@ -75,9 +74,9 @@ export type { UseChatOptions, ToolCompleteEvent, SideEffect } from './hooks/useC
 export { ChatInputProvider, useChatInputContext } from './context/ChatInputContext'
 export type { ChatInputContextValue } from './context/ChatInputContext'
 
-// 渲染器上下文
-export { RenderersProvider, BlockRenderersContext, ToolRenderersContext } from './context/RenderersContext'
-export type { BlockRenderers, ToolRenderers } from './context/RenderersContext'
+// Part 渲染器上下文
+export { PartRenderersProvider, PartRenderersContext } from './context/RenderersContext'
+export type { PartRenderers, PartRendererProps } from './context/RenderersContext'
 
 // ==================== 主组件 ====================
 
@@ -87,12 +86,17 @@ export type { ChatPanelHandle } from './components/ChatPanel'
 // ==================== 消息组件 ====================
 
 export { MessageBubble } from './components/message/MessageBubble'
-
-// 内容渲染组件（保留，兼容旧代码）
-export { ContentRenderer } from './components/message/ContentRenderer'
-export { TextBlock, CodeBlock } from './components/message/blocks'
-export { ToolResultRenderer } from './components/message/ToolResultRenderer'
-export { DefaultToolResult, WeatherCard, SearchResults } from './components/message/tool-results'
+export { PartsRenderer } from './components/message/PartsRenderer'
+
+// Part 渲染组件
+export {
+  TextPart as TextPartComponent,
+  ThinkingPart as ThinkingPartComponent,
+  SearchPart as SearchPartComponent,
+  ToolCallPart as ToolCallPartComponent,
+  ImagePart as ImagePartComponent,
+  ErrorPart as ErrorPartComponent,
+} from './components/message/parts'
 
 // ==================== 其他组件 ====================
 
@@ -119,7 +123,6 @@ export type {
   ContentBlock,
   TextBlock as TextBlockType,
   CodeBlock as CodeBlockType,
-  ToolRendererProps,
   WeatherData,
   SearchResultItem,
 } from '@huyooo/ai-chat-shared'
@@ -137,10 +140,10 @@ export { parseContent, highlightCode, getLanguageDisplayName, renderMarkdown } f
  *    const adapter = createElectronAdapter()
  *    <ChatPanel adapter={adapter} cwd="/path/to/dir" />
  *
- * 3. 自定义工具渲染器：
- *    import CustomWeatherCard from './CustomWeatherCard'
- *    const toolRenderers = { get_weather: CustomWeatherCard }
- *    <ChatPanel adapter={adapter} toolRenderers={toolRenderers} />
+ * 3. 自定义 Part 渲染器（新架构）：
+ *    import WeatherCard from './WeatherCard'
+ *    const partRenderers = { weather: WeatherCard }
+ *    <ChatPanel adapter={adapter} partRenderers={partRenderers} />
  *
  * 4. 使用 useChat hook 自定义 UI：
  *    import { useChat } from '@huyooo/ai-chat-frontend-react'

package/src/styles.css

@@ -3,6 +3,9 @@
  * 仅包含 CSS 变量和 ChatPanel 基础布局
  */
 
+/* 导入 Markdown / Mermaid 等共享渲染样式（与 vue 版本保持一致） */
+@import "@huyooo/ai-chat-shared/styles";
+
 /**
  * 主题协议（跨项目统一）：
  * - 使用 document.documentElement 的 data-theme = light | dark
@@ -25,6 +28,7 @@
   --chat-muted-hover: #e6e5e0;
   --chat-border: #26251e1a;
   --chat-text: #26251eeb;
+  --chat-text-strong: #26251e;
   --chat-text-muted: #26251e99;
   /* 主色：light/dark 保持一致（蓝） */
   --chat-primary: #54a9ff;
@@ -41,6 +45,36 @@
   --chat-fab-bg: #ffffff;
   --chat-fab-bg-hover: var(--chat-input-bg);
   --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+
+  /* 代码高亮 - GitHub Light 风格 */
+  --chat-hljs-keyword: #cf222e;
+  --chat-hljs-built-in: #953800;
+  --chat-hljs-type: #953800;
+  --chat-hljs-function: #8250df;
+  --chat-hljs-string: #0a3069;
+  --chat-hljs-number: #0550ae;
+  --chat-hljs-literal: #0550ae;
+  --chat-hljs-comment: #6e7781;
+  --chat-hljs-variable: #953800;
+  --chat-hljs-attr: #0550ae;
+  --chat-hljs-property: #116329;
+  --chat-hljs-operator: #cf222e;
+  --chat-hljs-punctuation: #24292f;
+  --chat-hljs-params: #24292f;
+  --chat-hljs-regexp: #116329;
+  --chat-hljs-selector: #116329;
+  --chat-hljs-tag: #116329;
+  --chat-hljs-name: #116329;
+  --chat-hljs-deletion: #82071e;
+  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
+  --chat-hljs-addition: #116329;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #6e7781;
+  --chat-hljs-link: #0a3069;
+  --chat-hljs-symbol: #0550ae;
+  --chat-hljs-subst: #24292f;
+  --chat-hljs-section: #0550ae;
+  --chat-hljs-bullet: #953800;
 }
 
 /* 默认跟随系统暗色 */
@@ -56,6 +90,7 @@
     --chat-muted-hover: #3c3c3c;
     --chat-border: #333;
     --chat-text: #ccc;
+    --chat-text-strong: #fff;
     --chat-text-muted: #888;
     /* 主色：light/dark 保持一致（蓝） */
     --chat-primary: #54a9ff;
@@ -71,6 +106,36 @@
     --chat-fab-bg: var(--chat-muted);
     --chat-fab-bg-hover: var(--chat-muted-hover);
     --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+    /* 代码高亮 - GitHub Dark 风格 */
+    --chat-hljs-keyword: #ff7b72;
+    --chat-hljs-built-in: #ffa657;
+    --chat-hljs-type: #ffa657;
+    --chat-hljs-function: #d2a8ff;
+    --chat-hljs-string: #a5d6ff;
+    --chat-hljs-number: #79c0ff;
+    --chat-hljs-literal: #79c0ff;
+    --chat-hljs-comment: #8b949e;
+    --chat-hljs-variable: #ffa657;
+    --chat-hljs-attr: #79c0ff;
+    --chat-hljs-property: #7ee787;
+    --chat-hljs-operator: #ff7b72;
+    --chat-hljs-punctuation: #e6edf3;
+    --chat-hljs-params: #e6edf3;
+    --chat-hljs-regexp: #7ee787;
+    --chat-hljs-selector: #7ee787;
+    --chat-hljs-tag: #7ee787;
+    --chat-hljs-name: #7ee787;
+    --chat-hljs-deletion: #ffa198;
+    --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
+    --chat-hljs-addition: #7ee787;
+    --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+    --chat-hljs-meta: #8b949e;
+    --chat-hljs-link: #a5d6ff;
+    --chat-hljs-symbol: #79c0ff;
+    --chat-hljs-subst: #e6edf3;
+    --chat-hljs-section: #79c0ff;
+    --chat-hljs-bullet: #ffa657;
   }
 }
 
@@ -86,6 +151,7 @@
   --chat-muted-hover: #e6e5e0;
   --chat-border: #26251e1a;
   --chat-text: #26251eeb;
+  --chat-text-strong: #26251e;
   --chat-text-muted: #26251e99;
   --chat-primary: #54a9ff;
   --chat-primary-hover: #2f90ff;
@@ -99,6 +165,36 @@
   --chat-fab-bg: #ffffff;
   --chat-fab-bg-hover: var(--chat-input-bg);
   --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+
+  /* 代码高亮 - GitHub Light 风格 */
+  --chat-hljs-keyword: #cf222e;
+  --chat-hljs-built-in: #953800;
+  --chat-hljs-type: #953800;
+  --chat-hljs-function: #8250df;
+  --chat-hljs-string: #0a3069;
+  --chat-hljs-number: #0550ae;
+  --chat-hljs-literal: #0550ae;
+  --chat-hljs-comment: #6e7781;
+  --chat-hljs-variable: #953800;
+  --chat-hljs-attr: #0550ae;
+  --chat-hljs-property: #116329;
+  --chat-hljs-operator: #cf222e;
+  --chat-hljs-punctuation: #24292f;
+  --chat-hljs-params: #24292f;
+  --chat-hljs-regexp: #116329;
+  --chat-hljs-selector: #116329;
+  --chat-hljs-tag: #116329;
+  --chat-hljs-name: #116329;
+  --chat-hljs-deletion: #82071e;
+  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
+  --chat-hljs-addition: #116329;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #6e7781;
+  --chat-hljs-link: #0a3069;
+  --chat-hljs-symbol: #0550ae;
+  --chat-hljs-subst: #24292f;
+  --chat-hljs-section: #0550ae;
+  --chat-hljs-bullet: #953800;
 }
 
 :root[data-theme="dark"] {
@@ -112,6 +208,7 @@
   --chat-muted-hover: #3c3c3c;
   --chat-border: #333;
   --chat-text: #ccc;
+  --chat-text-strong: #fff;
   --chat-text-muted: #888;
   /* 主色：light/dark 保持一致（蓝） */
   --chat-primary: #54a9ff;
@@ -126,6 +223,36 @@
   --chat-fab-bg: var(--chat-muted);
   --chat-fab-bg-hover: var(--chat-muted-hover);
   --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  /* 代码高亮 - GitHub Dark 风格 */
+  --chat-hljs-keyword: #ff7b72;
+  --chat-hljs-built-in: #ffa657;
+  --chat-hljs-type: #ffa657;
+  --chat-hljs-function: #d2a8ff;
+  --chat-hljs-string: #a5d6ff;
+  --chat-hljs-number: #79c0ff;
+  --chat-hljs-literal: #79c0ff;
+  --chat-hljs-comment: #8b949e;
+  --chat-hljs-variable: #ffa657;
+  --chat-hljs-attr: #79c0ff;
+  --chat-hljs-property: #7ee787;
+  --chat-hljs-operator: #ff7b72;
+  --chat-hljs-punctuation: #e6edf3;
+  --chat-hljs-params: #e6edf3;
+  --chat-hljs-regexp: #7ee787;
+  --chat-hljs-selector: #7ee787;
+  --chat-hljs-tag: #7ee787;
+  --chat-hljs-name: #7ee787;
+  --chat-hljs-deletion: #ffa198;
+  --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
+  --chat-hljs-addition: #7ee787;
+  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
+  --chat-hljs-meta: #8b949e;
+  --chat-hljs-link: #a5d6ff;
+  --chat-hljs-symbol: #79c0ff;
+  --chat-hljs-subst: #e6edf3;
+  --chat-hljs-section: #79c0ff;
+  --chat-hljs-bullet: #ffa657;
 }
 
 /* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
@@ -170,6 +297,9 @@
   overflow-y: auto;
   padding: 12px;
   scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 /* 滚动到底部按钮 */

package/src/types/index.ts

@@ -24,6 +24,12 @@ export type ModelOption = ModelOptionType
 export type ProviderType = ProviderTypeType
 
 // ==================== Content Part 类型 ====================
+// 
+// 架构说明：
+// 1. 内置类型：text, code, thinking, search, tool_call, image, error
+// 2. 扩展类型：weather, stock 等业务类型（通过 partRenderers 注册渲染器）
+// 3. 工具执行完成后，如果定义了 resultType，直接生成对应类型的 Part（如 weather）
+// 4. 前端通过 partRenderers 统一渲染所有 Part 类型
 
 /** 搜索结果 */
 export interface SearchResult {
@@ -38,6 +44,13 @@ export interface TextPart {
   text: string
 }
 
+/** 代码块 Part（从 text 中解析，或直接返回）*/
+export interface CodePart {
+  type: 'code'
+  content: string
+  language?: string
+}
+
 /** 思考过程 Part */
 export interface ThinkingPart {
   type: 'thinking'
@@ -54,24 +67,19 @@ export interface SearchPart {
   status: 'running' | 'done'
 }
 
-/** 工具调用 Part */
+/** 工具调用 Part（仅展示执行过程，结果由具体类型 Part 渲染）*/
 export interface ToolCallPart {
   type: 'tool_call'
   id: string
   name: string
   args?: Record<string, unknown>
-  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'  // pending: 等待用户批准, cancelled: 已取消, skipped: 已跳过
-  result: unknown | null  // 执行结果，null 表示尚未执行或没有结果
-}
-
-/** 工具结果 Part - 用于自定义 UI 渲染（备用，主要使用 ToolCallPart） */
-export interface ToolResultPart {
-  type: 'tool_result'
-  id: string
-  name: string
-  args?: Record<string, unknown>
-  result: unknown  // 解析后的结构化数据
-  status: 'done' | 'error' | 'cancelled' | 'skipped'
+  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
+  // 注意：不再有 result 字段，结果由工具的 resultType 指定的 Part 类型渲染
+  /** 工具执行输出（用于 execute_command 等需要展示 stdout/stderr 的工具） */
+  output?: {
+    stdout?: string
+    stderr?: string
+  }
 }
 
 /** 图片 Part */
@@ -88,18 +96,44 @@ export interface ErrorPart {
   retryable?: boolean
 }
 
-/** 内容 Part 联合类型 */
-export type ContentPart =
+// ==================== 扩展 Part 类型（业务类型）====================
+
+/** 天气 Part（由 get_weather 工具生成）*/
+export interface WeatherPart {
+  type: 'weather'
+  city: string
+  temperature: number
+  condition: string
+  humidity: number
+  wind: string
+  reportTime?: string
+  province?: string
+}
+
+/** 自定义 Part 基础接口（用于扩展）*/
+export interface CustomPart {
+  type: string
+  [key: string]: unknown
+}
+
+/** 内置 Part 联合类型 */
+export type BuiltinPart =
   | TextPart
+  | CodePart
   | ThinkingPart
   | SearchPart
   | ToolCallPart
-  | ToolResultPart
   | ImagePart
   | ErrorPart
 
+/** 内容 Part 联合类型（包含内置和扩展类型）*/
+export type ContentPart = BuiltinPart | WeatherPart | CustomPart
+
+/** 内置 Part 类型字符串 */
+export type BuiltinPartType = BuiltinPart['type']
+
 /** 内容 Part 类型字符串 */
-export type ContentPartType = ContentPart['type']
+export type ContentPartType = string
 
 /** 步骤折叠模式 */
 export type StepsExpandedType = 'open' | 'close' | 'auto'
@@ -137,7 +171,7 @@ export interface ChatMessage {
   /** 是否已复制 */
   copied?: boolean
   /** 消息时间戳 */
-  timestamp?: Date
+  timestamp?: number
   /** 错误详情（如果有错误） */
   error?: ErrorDetails
   /** 是否被用户中止 */
@@ -160,53 +194,3 @@ export interface ChatInputOptions {
   thinkingEnabled: boolean
 }
 
-// ==================== 兼容旧类型（逐步废弃）====================
-
-/** @deprecated 使用 ContentPart 替代 */
-export type ExecutionStepType = 'thinking' | 'search' | 'tool_call' | 'error'
-
-/** @deprecated 使用 ContentPart 替代 */
-export type ExecutionStepStatus = 'running' | 'completed' | 'error'
-
-/** @deprecated 使用 ContentPart 替代 */
-export type ExecutionStep = {
-  id: string
-  type: ExecutionStepType
-  status: ExecutionStepStatus
-  startedAt?: number
-  completedAt?: number
-  duration?: number
-  content?: string
-  query?: string
-  results?: SearchResult[]
-  callId?: string
-  name?: string
-  args?: Record<string, unknown>
-  result?: string
-  message?: string
-  category?: string
-}
-
-/** @deprecated 使用 ContentPart 替代 - 思考步骤类型 */
-export type ThinkingStep = ExecutionStep & {
-  type: 'thinking'
-  status: 'running' | 'completed'
-}
-
-/** @deprecated 使用 ContentPart 替代 - 搜索步骤类型 */
-export type SearchStep = ExecutionStep & {
-  type: 'search'
-  status: 'running' | 'completed'
-}
-
-/** @deprecated 使用 ContentPart 替代 - 工具调用步骤类型 */
-export type ToolCallStep = ExecutionStep & {
-  type: 'tool_call'
-  status: 'running' | 'completed' | 'error'
-}
-
-/** @deprecated 使用 ContentPart 替代 - 错误步骤类型 */
-export type ErrorStep = ExecutionStep & {
-  type: 'error'
-  status: 'error'
-}

package/src/components/message/ContentRenderer.tsx

@@ -1,63 +0,0 @@
-/**
- * 内容渲染器
- * 将原始文本解析为内容块并渲染
- */
-
-import { FC, useMemo, useContext, type ComponentType } from 'react'
-import { parseContent } from '@huyooo/ai-chat-shared'
-import type { ContentBlock } from '@huyooo/ai-chat-shared'
-import { TextBlock, CodeBlock } from './blocks'
-import { BlockRenderersContext } from '../../context/RenderersContext'
-import './ContentRenderer.css'
-
-interface ContentRendererProps {
-  /** 原始文本内容 */
-  content: string
-  /** 预解析的块列表（可选，用于流式更新） */
-  blocks?: ContentBlock[]
-  /** 代码复制事件 */
-  onCodeCopy?: (code: string) => void
-}
-
-export const ContentRenderer: FC<ContentRendererProps> = ({
-  content,
-  blocks: preBlocks,
-  onCodeCopy,
-}) => {
-  // 从上层获取自定义块渲染器
-  const customRenderers = useContext(BlockRenderersContext)
-
-  // 解析后的内容块
-  const blocks = useMemo(() => {
-    // 优先使用预解析的块
-    if (preBlocks?.length) {
-      return preBlocks
-    }
-    // 否则解析原始内容
-    return parseContent(content)
-  }, [content, preBlocks])
-
-  if (!blocks.length) return null
-
-  return (
-    <div className="content-renderer">
-      {blocks.map((block) => {
-        // 自定义块渲染器
-        const CustomRenderer = customRenderers[block.type] as ComponentType<{ block: ContentBlock }>
-        if (CustomRenderer) {
-          return <CustomRenderer key={block.id} block={block} />
-        }
-
-        // 内置渲染器
-        switch (block.type) {
-          case 'text':
-            return <TextBlock key={block.id} block={block} />
-          case 'code':
-            return <CodeBlock key={block.id} block={block} onCopy={onCodeCopy} />
-          default:
-            return null
-        }
-      })}
-    </div>
-  )
-}