paul-ai-assistant

Paul AI 智能辅助组件

简介

paul-ai-assistant 是一个基于 React 16.14.0 的智能辅助组件库，提供完整的 AI 对话和交互能力。

特性

• 智能对话交互
• 支持多种消息类型
• 可定制的 UI 组件
• 完整的 TypeScript 支持
• 基于 React 16.14.0

安装

tnpm install paul-ai-assistant --save

或者使用 yarn:

yarn add paul-ai-assistant

使用

基础用法

import { PaulAiAssistant } from 'paul-ai-assistant';
import 'paul-ai-assistant/es/index.css';

function App() {
  return (
    <PaulAiAssistant
    // 你的配置项
    />
  );
}

API 参数

toolRender

自定义工具区域渲染函数。用于在输入框上方渲染自定义的工具栏内容。

类型定义：

toolRender?: () => ReactNode;

使用示例：

<PaulAiAssistant
  bizId="your-biz-id"
  toolRender={() => (
    <div style={{ padding: '8px 12px', borderBottom: '1px solid #eee' }}>
      <button onClick={() => console.log('工具1')}>工具1</button>
      <button onClick={() => console.log('工具2')}>工具2</button>
    </div>
  )}
/>

应用场景：

• 添加自定义快捷操作按钮
• 显示上下文相关的工具选项
• 添加文件上传、图片选择等功能入口

customFeedbackRender

自定义点赞点踩组件渲染函数。如果不传入此参数，将使用默认的点赞点踩组件。

类型定义：

customFeedbackRender?: (props: {
  feedbackValue?: { feedback: 'helpful' | 'unhelpful' };
  onFeedback: (feedback: 'helpful' | 'unhelpful') => void;
  message: any;
}) => ReactNode;

参数说明：

| 参数 | 说明 | 类型 | |------|------|------| | feedbackValue | 当前反馈值 | { feedback: 'helpful' \| 'unhelpful' } \| undefined | | onFeedback | 反馈回调函数，调用后会提交反馈到服务端 | (feedback: 'helpful' \| 'unhelpful') => void | | message | 当前消息的完整数据 | any |

使用示例：

<PaulAiAssistant
  bizId="your-biz-id"
  customFeedbackRender={({ feedbackValue, onFeedback }) => (
    <div>
      <button
        onClick={() => onFeedback('helpful')}
        style={{ color: feedbackValue?.feedback === 'helpful' ? 'green' : 'gray' }}
      >
        有帮助
      </button>
      <button
        onClick={() => onFeedback('unhelpful')}
        style={{ color: feedbackValue?.feedback === 'unhelpful' ? 'red' : 'gray' }}
      >
        没帮助
      </button>
    </div>
  )}
/>

开发

环境要求

• Node.js 16.x
• Yarn 或 npm

安装依赖

yarn install

开发命令

# 启动开发服务器
yarn start

# 构建生产版本
yarn build

# 代码质量检查
yarn lint

# 自动修复代码格式
yarn prettier

# 运行测试
yarn test

# 运行测试覆盖率
yarn test:coverage

# TypeScript 类型检查
yarn tsc

# 清理构建产物
yarn clean:dist

项目结构

src/
├── AssistantChat/      # 聊天助手核心组件
├── components/         # UI 组件库
├── constants/          # 常量定义
├── context/           # React Context
├── ErrorBoundary/     # 错误边界
├── interface/         # TypeScript 接口定义
├── utils/             # 工具函数
└── index.tsx          # 入口文件

构建

项目使用 Father 4 作为构建工具。

yarn build

构建产物：

• es/ - ES Module 格式（推荐）
• dist/ - UMD 格式（如果配置）

文档

项目使用 Dumi 构建文档站点。

# 启动文档开发服务器
yarn start

# 构建文档站点
yarn build:docs

浏览器支持

• Chrome (最新两个版本)
• Firefox (最新两个版本)
• Safari (最新两个版本)
• Edge (最新两个版本)
• IE 11+

技术栈

• UI 框架: React 16.14.0
• 类型系统: TypeScript 5.x
• 构建工具: Father 4.x
• 样式方案: SCSS/LESS + styled-components
• 状态管理: React Hooks
• 测试框架: Jest + Enzyme + Testing Library
• 代码规范: ESLint + Prettier + Stylelint

依赖说明

核心依赖

• @alife/magic-chat-ui - 聊天 UI 组件
• @alife/magic-chat-im - 聊天通信层
• @alife/magic-basic - 基础组件库
• @formily/antd - 表单方案
• ahooks - React Hooks 库
• lodash - 工具库
• moment - 日期处理

Peer 依赖

• react >= 16.9.0
• react-dom >= 16.9.0
• @alife/magic-request ^2.5.0

常见问题

1. 构建失败

请检查 Node.js 版本是否为 16.x：

node -v

2. 样式不生效

请确保在项目中引入了样式文件：

import 'paul-ai-assistant/es/index.css';

贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'feat: Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

提交规范

遵循 Conventional Commits 规范：

• feat: 新特性
• fix: 修复 Bug
• docs: 文档更新
• style: 代码格式调整（不影响功能）
• refactor: 代码重构
• test: 测试相关
• chore: 构建/工具相关