做淘宝优惠券网站要多少钱,商务网站建设详细步骤,各大网站的404,网站建设费可以抵扣么介绍#xff1a;
效果#xff1a;智能助理
ChatSDK#xff0c;是在ChatUI的基础上#xff0c;结合阿里云智能客服的最佳实践#xff0c;沉淀和总结出来的一个开箱即用的#xff0c;可快速搭建智能对话机器人的框架。它简单易上手#xff0c;通过简单的配置就能搭建出对…介绍
效果智能助理
ChatSDK是在ChatUI的基础上结合阿里云智能客服的最佳实践沉淀和总结出来的一个开箱即用的可快速搭建智能对话机器人的框架。它简单易上手通过简单的配置就能搭建出对话机器人同时它强大易扩展通过丰富的接口和自定义卡片满足各种定制化需求。 注意 npm包仅限阿里集团内部使用
外部客户可以使用cdn方式引入ChatSDK然后配置externals ali/chatui-sdk为ChatSDK,
详细怎么引入可以看viteExternalsPlugin 插件管理外部依赖-CSDN博客 具体参数请参考官方文档 智能客服
demo:
import React, { useEffect, useRef } from react;
import { nodeApi } from /api/runbayunapi/index.jsx;
import ChatSDK from ali/chatui-sdk;
import ./home.css;let time 0;
export default function App() {const wrapper useRef();let botInstance useRef();const options {config: {navbar: {// logo: http://www.runbayun.com/storge/enterprise/Public/beforehome2/images/logo.png,title: 智能客服,},wideBreakpoint: 600,avatarWhiteList: [all],loadMoreText: 点击加载更多,toolbar: [{type: emoji,title: 表情,icon: smile,},{type: image,title: 图片,icon: image,},],quickReplies: [{icon: message,name: 召唤在线客服,type: cmd,content: { code: agent_join },// isHighlight: true,},{name: 发送文本,isHighlight: true,},{name: 可见文本,type: text,text: 实际发送的文本,isNew: true,},{name: 点击跳转,type: url,url: https://www.taobao.com/,},{name: 唤起卡片,type: card,card: {code: knowledge,data: {text: 这是一个富文本卡片,},},},{name: 执行指令,type: cmd,cmd: { code: agent_join },},],showTyping: true,elderMode: false,robot: {avatar:/public/5a7716d445264e2d9adc54219ebc1be0.png~tplv-a9rns2rl98-downsize.png,name: 小润,},messages: [{code: system,data: {text: 智能助理进入对话为您服务,},},{code: text,data: {text: 智能助理为您服务请问有什么可以帮您,},},{code: list-v2,data: {title: 猜你想问,list: [{action: sendText,text: 购买后如何查看信息,content: 购买后如何查看信息,params: {key1: test,},context: {a: test,},},{action: sendText,text: 【夜间】自动发货,content: 【夜间】自动发货,},{action: openWindow,text: 【安装包】问题汇总,url: https://docs.qq.com/doc/DRVZCeWNGRGVhclhJ,},{action: sendText,text: 谷歌辅助邮箱怎么用,content: 谷歌辅助邮箱怎么用,},{action: openWindow,text: 【脸书】双重验证教程,url: https://docs.qq.com/doc/DRVhySEtIT3hXQUVm,},{action: openWindow,text: 【推特】确认码教程,url: https://docs.qq.com/doc/DRVhkSU9nZXR6Z1pz,},{action: openWindow,text: 【推特】双重验证教程,url: https://docs.qq.com/doc/DRWR2b0NMZnhTZG9H,},{action: openWindow,text: 【Ins】双重验证教程,url: https://docs.qq.com/doc/DRU5ocXFGb0pzRFR1,},],},},],client: ,beebotconfig: {showAIGC: true,},},requests: {send(msg) {console.log(msg:, msg);// Simulate bot typing indicatorsetTimeout(() {botInstance.current.appendMessage({code: text,data: { text: 这是模拟的回复消息 },});}, 1000);},makeSocket() {console.log(进入人工);botInstance.current.appendMessage({code: system,data: { text: 进入人工服务 },});return {};},history: function () {time 1;return Promise.resolve({list: [{ code: text, data: { text: 历史消息${time} } }],noMore: time 3,});},},handlers: {onToolbarClick(item, ctx) {if (item.type image) {ctx.util.chooseImage({success(e) {if (e.files) {const file e.files[0];ctx.appendMessage({code: image,data: {picUrl: URL.createObjectURL(file),},position: right,});requestOcr({ file }).then((res) {ctx.postMessage({code: text,data: {text: res.text,},quiet: true,});});} else if (e.images) {// Handle app uploaded images}},});}},},};const getdata async () {let data await nodeApi().getnodes({});console.log(data, hahahahhahah);};useEffect(() {getdata();botInstance.current new ChatSDK({root: wrapper.current,...options,});botInstance.current.run();}, []);return div style{{ height: 100% }} ref{wrapper} /;
}
