ChatUI

环境要求

• Node.js 环境与 npm 或 yarn 包管理器
• 一个已存在的 React 项目（本包为 React 组件库）
• 支持 CSS Variables 的现代浏览器（IE11 需额外 polyfill）

安装与启动步骤

1. 1安装核心包

   在 React 项目根目录执行安装，npm 与 yarn 任选其一，不要重复执行两条命令。

   npm install @chatui/core --save

   复制

2. 2引入组件与样式

   在业务代码顶部引入 Chat、Bubble、useMessages 以及样式文件，样式不引入界面会错乱。

   import Chat, { Bubble, useMessages } from '@chatui/core';
   import '@chatui/core/dist/index.css';

   复制

3. 3编写对话界面

   用 useMessages 管理消息列表，onSend 中追加用户消息并模拟机器人回复，再渲染 Chat 组件。

   const App = () => {
     const { messages, appendMsg, setTyping } = useMessages([]);
   
     function handleSend(type, val) {
       if (type === 'text' && val.trim()) {
         appendMsg({
           type: 'text',
           content: { text: val },
           position: 'right',
         });
   
         setTyping(true);
   
         setTimeout(() => {
           appendMsg({
             type: 'text',
             content: { text: 'Bala bala' },
           });
         }, 1000);
       }
     }
   
     function renderMessageContent(msg) {
       const { content } = msg;
       return <Bubble content={content.text} />;
     }
   
     return (
       <Chat
         navbar={{ title: 'Assistant' }}
         messages={messages}
         renderMessageContent={renderMessageContent}
         onSend={handleSend}
       />
     );
   };

   复制

关键配置

如何确认成功

启动项目后页面出现对话窗口，输入文字发送后右侧出现自己的气泡，1 秒后收到机器人回复气泡。

常见问题

注意事项

• 本项目是 React 组件库而非可独立运行的服务，必须集成到 React 工程中使用。
• 运行环境需支持 CSS Variables，否则主题与样式无法正常生效。
• 示例中的自动回复用 setTimeout 模拟，实际接入时请替换为真实后端接口。