阿里chatui怎么用?chatui下载安装使用方法详解

阿里chatui怎么用?chatui的安装方法通过 npm 安装#npm i @chatui/core -S引入组件#import React from 'react';，并回答给它的聊天伙伴，那么下面佳佳手游网小编为大家分享chatui下载安装使用方法详解。

阿里chatui怎么用?

通过 npm 安装#
npm i @chatui/core -S
引入组件#
import React from 'react';
import '@chatui/core/es/styles/index.less';
// 引入组件
import Chat, { Bubble, useMessages } from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';

渲染界面#
通过 <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={{ : '智能助理' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};

随着技术的发展，我们正在经历从「移动互联网时代」走向「人工智能时代」的过程中，人工智能扩大了对话式交互的使用场景，我们可以通过文字或语音的方式与机器对话来完成某些任务，这类机器人我们称之为Chatbot。

在阿里巴巴，智能对话助理应用场景也非常广泛，智能服务助理「阿里小蜜」就是其中一员，阿里小蜜经过几年的发展，在阿里经济体生态圈，支撑了阿里集团超过80个BU的智能服务业务；在企业生态圈，依托于钉钉以及阿里云的企业开放生态，通过 SaaS 和 PaaS的 模式赋能外部企业。

ChatUI 则是阿里小蜜团队经过多年真实业务场景打磨和沉淀的对话式 UI 体系，致力于打造对话领域的设计和开发标准。

在云上企业生态小范围内测半年之后，ChatUI 现已正式开源，期望与开发者共建和完善 ChatUI 体系，共同打造「让对话美而简单」的愿景。

用户可在阿里chatui官方地址：https://chatui.io/docs/quick-start，查看更多信息。

以上就是阿里chatui怎么用?chatui下载安装使用方法详解的详细内容啦，更多消息和内容关注佳佳手游网，之后会持续给大家带来更多全新的内容。