@huyooo/ai-chat-frontend-react 0.2.17 → 0.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-frontend-react",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "AI Chat Frontend - React components with adapter pattern",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,8 +31,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@huyooo/ai-chat-bridge-electron": "^0.2.17",
-    "@huyooo/ai-chat-shared": "^0.2.17",
+    "@huyooo/ai-chat-bridge-electron": "^0.2.19",
+    "@huyooo/ai-chat-shared": "^0.2.19",
     "@iconify/react": "^5.0.2"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "frontend"
   ],
   "author": "huyooo",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
     "access": "public"
   }

package/README.md

@@ -1,383 +0,0 @@
-# @huyooo/ai-chat-frontend-react
-
-AI Chat 前端组件库 - React 版本。
-
-> 📖 **深入了解**：查看 [技术架构文档](../../ARCHITECTURE.md) 了解流式渲染、Content Parts 架构、自定义 UI 注入等核心原理。
-
-## 安装
-
-```bash
-npm install @huyooo/ai-chat-frontend-react
-```
-
-## 快速开始
-
-```tsx
-import { ChatPanel } from '@huyooo/ai-chat-frontend-react'
-import '@huyooo/ai-chat-frontend-react/style.css'
-import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
-
-const adapter = createElectronAdapter()
-
-function App() {
-  return <ChatPanel adapter={adapter} />
-}
-```
-
-## 组件
-
-### ChatPanel
-
-主聊天面板组件。
-
-```tsx
-<ChatPanel
-  adapter={adapter}
-  workingDir="/path/to/dir"
-  defaultModel="anthropic/claude-opus-4.5"
-  defaultMode="agent"
-  models={modelList}
-  hideHeader={false}
-  welcomeConfig={welcomeConfig}
-  partRenderers={partRenderers}
-  onClose={handleClose}
-/>
-```
-
-#### Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `adapter` | `ChatAdapter` | 必填 | 通信适配器 |
-| `workingDir` | `string` | - | 工作目录 |
-| `defaultModel` | `string` | `'anthropic/claude-opus-4.5'` | 默认模型 |
-| `defaultMode` | `ChatMode` | `'agent'` | 默认模式 |
-| `models` | `ModelOption[]` | `[]` | 可用模型列表 |
-| `hideHeader` | `boolean` | `false` | 是否隐藏标题栏 |
-| `welcomeConfig` | `Partial<WelcomeConfig>` | - | 欢迎页配置 |
-| `stepsExpandedType` | `'open' \| 'close' \| 'auto'` | `'auto'` | 执行步骤展开模式 |
-| `partRenderers` | `PartRenderers` | `{}` | 自定义 Part 类型渲染器 |
-| `autoRunConfig` | `AutoRunConfig` | - | 自动运行配置 |
-| `onClose` | `() => void` | - | 关闭回调 |
-| `onToolComplete` | `(event: ToolCompleteEvent) => void` | - | 工具执行完成回调 |
-
-#### stepsExpandedType 说明
-
-控制工具执行步骤的默认展开/折叠行为：
-
-| 值 | 说明 |
-|---|------|
-| `'open'` | 始终展开所有步骤 |
-| `'close'` | 始终折叠所有步骤 |
-| `'auto'` | 正在执行的步骤展开，执行完毕自动折叠 |
-
-#### autoRunConfig 说明
-
-自动运行配置用于控制 Agent 的工具执行行为：
-
-```typescript
-interface AutoRunConfig {
-  mode?: 'run-everything' | 'manual';  // 自动运行模式
-}
-```
-
-**配置项说明：**
-
-- **mode**: 自动运行模式
-  - `'run-everything'`: 运行所有内容（自动执行）
-  - `'manual'`: 手动批准模式（每次执行前询问）
-
-**使用示例：**
-
-```tsx
-<ChatPanel
-  adapter={adapter}
-  workingDir={workingDir}
-  autoRunConfig={{
-    mode: 'run-everything',
-  }}
-/>
-```
-
-### WelcomeMessage
-
-欢迎页组件，支持自定义配置。
-
-```tsx
-<WelcomeMessage config={welcomeConfig} onQuickAction={handleQuickAction} />
-```
-
-## 欢迎页配置
-
-可以通过 `welcomeConfig` 自定义欢迎页的标题、功能列表和快捷任务。
-
-```typescript
-import type { WelcomeConfig } from '@huyooo/ai-chat-frontend-react'
-
-const welcomeConfig: Partial<WelcomeConfig> = {
-  // 标题区域
-  title: '文件助手',
-  subtitle: '智能文件管理 · 代码分析',
-  icon: 'lucide:folder',
-  
-  // 功能列表
-  features: [
-    { name: '执行命令', icon: 'lucide:terminal' },
-    { name: '文件分析', icon: 'lucide:file-search' },
-    { name: '代码生成', icon: 'lucide:code' },
-  ],
-  
-  // 快捷任务
-  tasks: [
-    {
-      name: '列出文件',
-      desc: '查看目录内容',
-      prompt: '列出当前目录的文件',
-      icon: 'lucide:list',
-    },
-    {
-      name: '代码分析',
-      desc: '分析代码结构',
-      prompt: '分析这个项目的代码结构',
-      icon: 'lucide:code',
-    },
-  ],
-}
-```
-
-### 配置接口
-
-```typescript
-interface WelcomeConfig {
-  /** 标题 */
-  title: string
-  /** 副标题 */
-  subtitle: string
-  /** 图标 (Iconify 格式) */
-  icon: string
-  /** 功能列表 */
-  features: WelcomeFeature[]
-  /** 快捷任务 */
-  tasks: WelcomeTask[]
-}
-
-interface WelcomeFeature {
-  name: string
-  icon: string
-}
-
-interface WelcomeTask {
-  name: string
-  desc: string
-  prompt: string
-  icon: string
-}
-```
-
-### 默认配置
-
-如果不传 `welcomeConfig`，将使用内置的默认配置。也可以只覆盖部分字段：
-
-```typescript
-// 只修改标题，其他使用默认
-const welcomeConfig = {
-  title: '我的 AI 助手',
-  subtitle: '智能对话工具',
-}
-```
-
-可以导入默认配置作为基础：
-
-```typescript
-import { defaultWelcomeConfig } from '@huyooo/ai-chat-frontend-react'
-
-const welcomeConfig = {
-  ...defaultWelcomeConfig,
-  title: '自定义标题',
-}
-```
-
-## 自定义 Part 渲染器（新架构）
-
-新架构使用 `partRenderers` 为特定的 Part 类型注入自定义渲染组件。工具执行结果会直接生成对应类型的 Part（如 `weather`），前端根据 `part.type` 选择渲染组件。
-
-### 工作原理
-
-```
-工具执行完成
-    ↓
-后端发送 tool_call_result { id, name, result, resultType: 'weather' }
-    ↓
-前端 useChat 处理：
-  1. 更新 tool_call 状态为 done
-  2. 根据 resultType 创建 { type: 'weather', ...result } Part
-    ↓
-PartsRenderer 渲染：
-  - 检查 partRenderers['weather']
-  - 找到 → 使用自定义 WeatherCard 渲染
-  - 没找到 → 显示 JSON fallback
-```
-
-### 使用示例
-
-```tsx
-import { useMemo } from 'react'
-import { ChatPanel, PartRenderers } from '@huyooo/ai-chat-frontend-react'
-import { CustomWeatherCard } from './components/CustomWeatherCard'
-
-function App() {
-  // Part 类型 -> 渲染组件映射
-  const partRenderers = useMemo<PartRenderers>(() => ({
-    weather: CustomWeatherCard,  // weather 类型使用自定义卡片
-    // stock: CustomStockCard,
-  }), [])
-
-  return (
-    <ChatPanel
-      adapter={adapter}
-      partRenderers={partRenderers}
-    />
-  )
-}
-```
-
-### 创建自定义渲染组件
-
-自定义组件直接接收 Part 的所有字段作为 props：
-
-```tsx
-// CustomWeatherCard.tsx
-import { FC } from 'react'
-import './CustomWeatherCard.css'
-
-interface WeatherPartProps {
-  type: 'weather'    // Part 类型
-  city: string
-  temperature: number
-  condition: string
-  humidity?: number
-  wind?: string
-  reportTime?: string
-  province?: string
-}
-
-export const CustomWeatherCard: FC<WeatherPartProps> = ({
-  city,
-  temperature,
-  condition,
-  humidity,
-  wind,
-}) => {
-  return (
-    <div className="weather-card">
-      <div className="city">{city}</div>
-      <div className="temp">{temperature}°C</div>
-      <div className="condition">{condition}</div>
-      <div className="details">
-        {humidity && <span>湿度 {humidity}%</span>}
-        {wind && <span>{wind}</span>}
-      </div>
-    </div>
-  )
-}
-```
-
-### 内置 Part 类型
-
-| Part 类型 | 说明 | 内置渲染器 |
-|-----------|------|-----------|
-| `text` | 文本内容 | TextPart（支持 Markdown） |
-| `thinking` | 思考过程 | ThinkingPart（可折叠卡片） |
-| `search` | 搜索结果 | SearchPart |
-| `tool_call` | 工具执行状态 | ToolCallPart（仅显示状态） |
-| `image` | 图片 | ImagePart |
-| `error` | 错误信息 | ErrorPart |
-
-### 扩展 Part 类型
-
-可以通过工具的 `resultType` 定义新的 Part 类型：
-
-```typescript
-// 后端工具定义
-export function getWeatherTool(): ToolPlugin {
-  return tool({
-    name: 'get_weather',
-    description: '获取城市天气',
-    parameters: { city: { type: 'string' } },
-    resultType: 'weather',  // ← 指定结果 Part 类型
-    execute: async (args, context) => {
-      // 返回值会自动转换为 { type: 'weather', ...result }
-      return { city: args.city, temperature: 25, condition: '晴' }
-    }
-  })
-}
-```
-
-## useChat
-
-Hook 函数，用于自定义 UI。
-
-```typescript
-import { useChat } from '@huyooo/ai-chat-frontend-react'
-
-const {
-  messages,
-  isLoading,
-  sendMessage,
-  regenerateMessage,
-  abort,
-  clearHistory,
-} = useChat({ adapter })
-```
-
-## 导出
-
-```typescript
-// 主组件
-export { ChatPanel, WelcomeMessage, ChatInput, ChatHeader, MessageBubble }
-
-// Part 渲染组件
-export { PartsRenderer }
-export {
-  TextPartComponent,
-  ThinkingPartComponent,
-  SearchPartComponent,
-  ToolCallPartComponent,
-  ImagePartComponent,
-  ErrorPartComponent,
-}
-
-// Context Provider
-export { PartRenderersProvider, PartRenderersContext }
-
-// Hook
-export { useChat }
-
-// 类型
-export type {
-  WelcomeConfig,
-  WelcomeFeature,
-  WelcomeTask,
-  PartRenderers,
-  PartRendererProps,
-  ContentPart,
-  TextPart,
-  ThinkingPart,
-  SearchPart,
-  ToolCallPart,
-  ImagePart,
-  ErrorPart,
-  WeatherData,
-  SearchResultItem,
-}
-
-// 工具函数 (来自 @huyooo/ai-chat-shared)
-export { parseContent, highlightCode, getLanguageDisplayName }
-
-// 默认配置
-export { defaultWelcomeConfig }
-```
-
-## License
-
-MIT