ChatAI Plugin

一个功能强大的聊天 AI 插件，支持 AI 问答、图表生成、报表生成和项目交互。

特性

• 🤖 AI 驱动的智能问答
• 📊 自动生成图表和报表
• 🔄 与宿主项目交互（跳转、数据传递等）
• 🎨 可自定义主题和样式
• 📱 响应式设计，支持移动端
• 🚀 基于 Vite + React + Ant Design 5

安装

npm install chat-ai-plugin

使用方法

基本用法

import React from "react";
import { ChatAIProvider, ChatAIPlugin } from "chat-ai-plugin";

function App() {
  return (
    <ChatAIProvider>
      <div>
        <h1>我的应用</h1>
        <ChatAIPlugin />
      </div>
    </ChatAIProvider>
  );
}

高级配置

import React from "react";
import { ChatAIProvider, ChatAIPlugin } from "chat-ai-plugin";

function App() {
  const config = {
    apiKey: "your-openai-api-key",
    apiEndpoint: "https://api.openai.com/v1/chat/completions",
    theme: "dark",
    position: "bottom-right",
    width: 450,
    height: 650,
    onMessage: message => {
      console.log("收到消息:", message);
    },
    onNavigate: path => {
      // 处理路由跳转
      window.location.href = path;
    },
    onGenerateChart: chartData => {
      // 处理图表生成
      console.log("生成图表:", chartData);
    },
    onGenerateReport: reportData => {
      // 处理报表生成
      console.log("生成报表:", reportData);
    },
  };

  return (
    <ChatAIProvider config={config}>
      <div>
        <h1>我的应用</h1>
        <ChatAIPlugin />
      </div>
    </ChatAIProvider>
  );
}

使用自定义 Hook

import React from "react";
import { useChatAI } from "chat-ai-plugin";

function MyComponent() {
  const { messages, sendMessage, toggleChat, isOpen } = useChatAI();

  const handleCustomAction = async () => {
    await sendMessage("请生成一个销售报表");
  };

  return (
    <div>
      <button onClick={handleCustomAction}>生成报表</button>
      <button onClick={toggleChat}>{isOpen ? "关闭聊天" : "打开聊天"}</button>
    </div>
  );
}

API 参考

ChatAIConfig

| 属性 | 类型 | 默认值 | 说明 | | ---------------- | ------------------------------------------------------------ | --------------- | --------------- | | apiKey | string | - | OpenAI API 密钥 | | apiEndpoint | string | OpenAI 默认端点 | AI 服务端点 | | theme | 'light' | 'dark' | 'light' | 主题 | | position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | 聊天窗口位置 | | width | number | 400 | 聊天窗口宽度 | | height | number | 600 | 聊天窗口高度 | | onMessage | function | - | 消息回调 | | onNavigate | function | - | 导航回调 | | onGenerateChart | function | - | 图表生成回调 | | onGenerateReport | function | - | 报表生成回调 |

useChatAI Hook

| 属性 | 类型 | 说明 | | ------------- | -------------- | ---------------- | | messages | ChatMessage[] | 聊天消息列表 | | isLoading | boolean | 是否正在加载 | | isOpen | boolean | 聊天窗口是否打开 | | config | ChatAIConfig | 当前配置 | | error | string | null | 错误信息 | | sendMessage | function | 发送消息 | | toggleChat | function | 切换聊天窗口 | | clearMessages | function | 清空消息 | | setConfig | function | 更新配置 |

开发

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

类型检查

npm run type-check

许可证

MIT