阿里ChatSDK使用,开箱即用聊天框

介绍：

效果：智能助理

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} />;
}