一个基于React和Semi Design的ChatGPT Web界面组件库
npm install rhua-chatgpt-webbash
npm install rhua-chatgpt-web
或
yarn add rhua-chatgpt-web
或
pnpm add rhua-chatgpt-web
`
依赖要求
确保你的项目中已安装以下 peer dependencies：
`bash
npm install react react-dom react-router-dom
`
快速开始
$3
`tsx
import React from "react";
import { XinXiaoYiChat } from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";
function App() {
return (
);
}
export default App;
`
$3
`tsx
import React from "react";
import {
MessageBox,
BotMessageBox,
UserMessageBox,
SessionBox,
ChatHistory,
} from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";
function MyChatApp() {
return (
id: "1",
type: "bot",
name: "Assistant",
content: "Hello! How can I help you?",
completed: true,
isMap: false,
}}
/>
);
}
`
$3
`tsx
import React from "react";
import {
SettingPage,
ModelIndex,
RoleIndex,
PluginIndex,
} from "rhua-chatgpt-web";
import "rhua-chatgpt-web/styles";
function SettingsApp() {
return (
{/ 或使用单独的子页面 /}
);
}
`
主要组件
$3
- XinXiaoYiChat - 主要的聊天界面
- CommentChat - 评论式聊天界面
- SettingPage - 设置页面
- LoginPage - 登录页面
$3
- MessageBox - 消息框组件
- BotMessageBox - 机器人消息框
- UserMessageBox - 用户消息框
- UserMessageDocBox - 用户文档消息框
- SessionBox - 会话管理组件
- ChatHistory - 聊天历史组件
- AgentList - 智能体列表组件
- MapComponent - 地图组件
- MarkdownBox - Markdown 渲染组件
- MermaidBox - Mermaid 图表组件
$3
- ModelIndex - 模型设置
- RoleIndex - 角色设置
- PluginIndex - 插件设置
- NormalIndex - 常规设置
类型定义
`tsx
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,
};
`
工具类
`tsx
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 变量进行定制：
`css
:root {
--semi-color-primary: #1890ff;
--semi-color-success: #52c41a;
--semi-color-warning: #faad14;
--semi-color-danger: #f5222d;
}
`
开发
`bash
克隆项目
git clone
安装依赖
pnpm install
开发模式
pnpm dev
构建库
pnpm build:lib
预览
pnpm preview
``