English | 简体中文

特性

• 😎 最佳实践：基于阿里小蜜业务积累和打磨的对话式交互最佳实践
• 🛡 TypeScript：使用 TypeScript 开发，提供完整的类型定义文件
• 📱 响应式：响应式布局，在无线和 PC 端都可以友好展现
• ♿ 障碍：支持无障碍，已通过深圳市无障碍研究会的认证
• 🎨 主题：支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求
• 🌍 国际化：支持多语言和本土化特性

兼容环境

• 现代浏览器 (支持 CSS Variables)
• IE 11 (需要 polyfills 和 CSS Variables Polyfill / css-vars-ponyfill)

| Edge | Firefox | Chrome | Safari | iOS Safari | Android WebView | | --- | --- | --- | --- | --- | --- | | 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |

安装

npm install zxuicn-chat --save

yarn add zxuicn-chat

示例

import Chat, { Bubble, useMessages } from 'zxuicn-chat';
import 'zxuicn-chat/dist/index.css';

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: '智能助理' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};

本地开发

cd storybook
npm i
npm run storybook

定制主题

参考 定制主题 文档。

国际化

参考 国际化 文档。

交流讨论

License

MIT

贡献指南

我们欢迎任何形式的贡献，包括但不限于：

• 提交问题和功能请求
• 提交PR以修复bug或添加新功能
• 改进文档
• 分享您使用此项目的经验

请阅读我们的 贡献指南 了解更多详情。

如何发布到GitHub

如果您想将此项目发布到您自己的GitHub仓库，请按照以下步骤操作：

1. 在GitHub上创建一个新的仓库
2. 初始化您的本地仓库（如果尚未初始化）：

   git init
   git add .
   git commit -m "初始提交"

3. 添加远程仓库：

   git remote add origin https://github.com/您的用户名/您的仓库名.git

4. 推送到GitHub：

   git push -u origin main

安全

如果您发现安全漏洞，请查看我们的 安全政策。