阿里chatui怎么用?随着技术的发展,我们正在经历从「移动互联网时代」走向「人工智能时代」的过程中,人工智能扩大了对话式交互的使用场景,我们可以通过文字或语音的方式与机器对话来完成某些任务,这类机器人我们称之为Chatbot,下面小编为大家分享阿里chatui下载安装使用教程。

chatgpt手机版下载:点击下载

阿里chatui下载安装使用教程:

近年来,越来越多的公司推出了对话式智能服务软件,比如 Apple 的 Siri、Mircosoft 的 Cortana 以及 Google 的 Google Assistant。

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

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

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

经过共创和大量竞品分析及思辨,ChatUI 最终选择了四个关键体验目标作为设计原则,以有效促进用户对话的意愿:

阿里chatui怎么用?阿里chatui下载安装使用教程

主动:用户还没想起,机器能预知用户所需;

高效:用户使用流顺,符合自然预期, 有效进行互动;

情感:用户有情感引导,情感互动,产生心理偏好或习惯,达至自然回访;

沉浸:用户能通过视觉,互动及物理传感器等触点,感受智能的新鲜感,引发交互意愿。

ChatUI 组件库基于以上设计原则进行设计,提供了50+组件,满足多样的对话场景需求,用户可基于基础组件搭建自己的对话界面,适合有深度定制需求的用户。

对于已经有对话接口,想开箱即用的用户,我们也贴心的提供了 ChatUI Pro,只需要在初始化的时候传入配置数据,即可快速生成可进行对话交互的界面。

除了对话界面的框架,对话中消息是重要的组成部分,除去基础的文本、图片、语音等消息,ChatUI 还提供了丰富的富交互卡片(ChatUI Card),这些卡片是基于阿里经济体业务沉淀下来的,经过大量业务场景验证的优质卡片。

*ChatUI SDK *则是可二次开发的脚手架,包含工程套件,此功能还未上线,敬请期待。

通过 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';

渲染界面#

通过 组件渲染出对话界面:

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 ;

}

return (

navbar={{ title: '智能助理' }}

messages={messages}

renderMessageContent={renderMessageContent}

onSend={handleSend}

/>

);

};