介紹：

效果：智能助理

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