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

package/src/components/message/PartsRenderer.tsx

@@ -1,114 +1,168 @@
-import type { FC } from 'react'
-import type { ContentPart, StepsExpandedType } from '../../types'
+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, 
-  ToolCallPart, 
-  ToolResultPart, 
   ImagePart,
-  ErrorPart 
+  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">
-      {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
-        }
-      })}
+      {visibleParts.map((part, index) => (
+        <div 
+          key={index} 
+          className="part-item"
+          style={{ marginTop: index > 0 ? '8px' : '0' }}
+        >
+          {renderPart(part)}
+        </div>
+      ))}
     </div>
   )
 }

package/src/components/message/parts/CollapsibleCard.css

@@ -1,5 +1,4 @@
 .collapsible-card {
-  margin: 8px 0;
   border-radius: 8px;
   background: var(--chat-muted, #2a2a2a);
   border: 1px solid var(--chat-border, #333);
@@ -20,6 +19,9 @@
   align-items: center;
   gap: 8px;
   flex: 1;
+}
+
+.card-header-left.clickable {
   cursor: pointer;
 }
 
@@ -72,7 +74,7 @@
 }
 
 .card-content {
-  padding: 12px;
+  padding: 0 12px 12px;
   min-width: 0;
   overflow: hidden;
 }

package/src/components/message/parts/CollapsibleCard.tsx

@@ -43,7 +43,10 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
   return (
     <div className={`collapsible-card ${expanded ? 'expanded' : ''}`}>
       <div className="card-header">
-        <div className="card-header-left" onClick={() => onExpandedChange(!expanded)}>
+        <div 
+          className={`card-header-left ${collapsible ? 'clickable' : ''}`} 
+          onClick={() => collapsible && onExpandedChange(!expanded)}
+        >
           <div className="card-icon" style={{ color: iconColor }}>
             {spinning ? (
               <Icon icon="lucide:loader-2" width={14} className="spinning" />

package/src/components/message/parts/ImagePart.css

@@ -1,6 +1,5 @@
 .image-part {
   position: relative;
-  margin: 8px 0;
   max-width: 100%;
   display: inline-block;
 }