Rhua ChatGPT Web

一个基于 React 和 Semi Design 的 ChatGPT Web 界面组件库，提供完整的聊天界面、智能体管理、插件系统等功能。

特性

• 🎨 基于 Semi Design 的现代化 UI 设计
• 🤖 支持多种智能体和角色配置
• 🔌 可扩展的插件系统
• 📱 响应式设计，支持移动端
• 🗺️ 集成地图功能
• 📊 支持 Mermaid 图表渲染
• 🎯 完整的 TypeScript 支持
• 🌙 支持明暗主题切换

安装

npm install rhua-chatgpt-web
# 或
yarn add rhua-chatgpt-web
# 或
pnpm add rhua-chatgpt-web

依赖要求

确保你的项目中已安装以下 peer dependencies：

npm install react react-dom react-router-dom

快速开始

基础使用

import React from "react";
import { XinXiaoYiChat } from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";

function App() {
  return (
    <div className="App">
      <XinXiaoYiChat />
    </div>
  );
}

export default App;

使用单个组件

import React from "react";
import {
  MessageBox,
  BotMessageBox,
  UserMessageBox,
  SessionBox,
  ChatHistory,
} from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";

function MyChatApp() {
  return (
    <div>
      <SessionBox />
      <ChatHistory />
      <BotMessageBox
        message={{
          id: "1",
          type: "bot",
          name: "Assistant",
          content: "Hello! How can I help you?",
          completed: true,
          isMap: false,
        }}
      />
    </div>
  );
}

使用设置页面

import React from "react";
import {
  SettingPage,
  ModelIndex,
  RoleIndex,
  PluginIndex,
} from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";

function SettingsApp() {
  return (
    <div>
      <SettingPage />
      {/* 或使用单独的子页面 */}
      <ModelIndex />
      <RoleIndex />
      <PluginIndex />
    </div>
  );
}

主要组件

页面组件

• XinXiaoYiChat - 主要的聊天界面
• CommentChat - 评论式聊天界面
• SettingPage - 设置页面
• LoginPage - 登录页面

子组件

• MessageBox - 消息框组件
  • BotMessageBox - 机器人消息框
  • UserMessageBox - 用户消息框
  • UserMessageDocBox - 用户文档消息框
• SessionBox - 会话管理组件
• ChatHistory - 聊天历史组件
• AgentList - 智能体列表组件
• MapComponent - 地图组件
• MarkdownBox - Markdown 渲染组件
• MermaidBox - Mermaid 图表组件

设置子页面

• ModelIndex - 模型设置
• RoleIndex - 角色设置
• PluginIndex - 插件设置
• NormalIndex - 常规设置

类型定义

import type { ChatMessage, ChatSession, Agent, Role } from "rhua-chatgpt-web";

// 使用类型
const message: ChatMessage = {
  id: "1",
  type: "user",
  name: "User",
  content: "Hello!",
  completed: true,
  isMap: false,
};

工具类

import {
  Storage,
  MessageUtil,
  PluginExecutor,
  CommonUtil,
} from "rhua-chatgpt-web";

// 使用存储服务
const storage = new Storage();
await storage.setItem("key", "value");

// 使用消息工具
const messageUtil = new MessageUtil();
const processedMessage = messageUtil.processMessage(message);

样式定制

组件库使用 Semi Design 主题系统，你可以通过 CSS 变量进行定制：

:root {
  --semi-color-primary: #1890ff;
  --semi-color-success: #52c41a;
  --semi-color-warning: #faad14;
  --semi-color-danger: #f5222d;
}

开发

# 克隆项目
git clone <repository-url>

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建库
pnpm build:lib

# 预览
pnpm preview

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

更新日志

1.0.1

• 初始版本发布
• 支持基础聊天功能
• 支持智能体管理
• 支持插件系统