阿里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 indicator
        setTimeout(() => {
          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} />;
}