ChatUI：阿里开源 智能对话式 UI 组件库

// npm
npm install @chatui/core --save
// import
import React from'react';
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: 'Assistant' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};
exportdefault App;