Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 4.5 KB

README.zh-CN.md

File metadata and controls

123 lines (89 loc) · 4.5 KB

服务于对话领域的设计和开发体系

官网:https://chatui.io

LICENSE NPM version NPM downloads Gzip Size Jsdelivr Hits

English | 简体中文

特性

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

兼容环境

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

安装

npm install @chatui/core --save
yarn add @chatui/core

示例

import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/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}
    />
  );
};

DEMO

本地开发

cd storybook
npm i
npm run storybook

定制主题

参考 定制主题 文档。

国际化

参考 国际化 文档。

交流讨论

License

MIT