当前位置: 首页 > news >正文

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

相关文章:

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

介绍&#xff1a; 效果&#xff1a;智能助理 ChatSDK&#xff0c;是在ChatUI的基础上&#xff0c;结合阿里云智能客服的最佳实践&#xff0c;沉淀和总结出来的一个开箱即用的&#xff0c;可快速搭建智能对话机器人的框架。它简单易上手&#xff0c;通过简单的配置就能搭建出对…...

LangChain —— Message —— How to trim messages

文章目录 一、概述二、获取最后的 max_tokens 令牌三、获取第一个 max_tokens 令牌四、编写自定义令牌计数器五、连成链六、使用 ChatMessageHistory 一、概述 所有模型都有 有限的 上下文窗口&#xff0c;这意味着它们可以作为输入的 token 数量是有限的。如果你有很长的消息&…...

专升本-1.0.3(英语)-升本209天-星期二

自己要耐得住寂寞&#xff0c;守得住自己的初心&#xff0c;守得住自己的未来&#xff0c;然后不断地真实地面对自己&#xff0c;使自己不断地获得一个真实地成长&#xff0c;说真话办真事&#xff0c;自己总会有一条路了&#xff0c;说真话&#xff0c;办真事的那条路才是最为…...

集合媒体管理、分类、搜索于一体的开源利器:Stash

Stash&#xff1a;强大的媒体管理工具&#xff0c;让您的影音生活井井有条- 精选真开源&#xff0c;释放新价值。 概览 Stash是一个专为个人媒体管理而设计的开源工具&#xff0c;基于 Go 编写&#xff0c;支持自部署。它以用户友好的界面和强大的功能&#xff0c;满足了现代用…...

数仓工具—Hive语法之事务表更新Transactional Table Update

Hive事务表更新 众所周知,Apache Hive 是建立在 Hadoop HDFS 之上的数据仓库框架。由于它包含表,您可能希望根据数据的变化更新表记录。直到最近,Apache Hive 还不支持事务。从 Hive 0.14 及以上版本开始支持事务性表。您需要启用 ACID 属性才能在 Hive 查询中使用更新、删…...

系统架构师(每日一练2)

每日一练 1.为实现对象重用&#xff0c;COM支持两种形式的对象组装&#xff0c;在()重用形式下&#xff0c;一个外部对象拥有指向一个内部对象的唯一引用&#xff0c;外部对象只是把请求转发给内部对象;在()重用形式下&#xff0c;直接把内部对象的接口引用传给外部对象的客户…...

Django REST Framework(十)视图集-ViewSet

视图集&#xff08;ViewSet&#xff09;是 Django REST framework 中的一个高级特性&#xff0c;它允许你使用更少的代码来实现标准的 CRUD&#xff08;创建、读取、更新、删除&#xff09;操作。ViewSet 类本质上是基于 GenericAPIView 的&#xff0c;但它们提供了更多的默认行…...

sping总览

一、spring体系 1. spring是什么&#xff1f; 轻量级的开源的J2EE框架。它是一个容器框架&#xff0c;主要实现了ioc&#xff0c;同时又通过aop实现了面向切面编程&#xff0c;它又是一个中间层框架&#xff08;万能胶&#xff09;可以起一个连接作用&#xff0c;比如说把myba…...

【Godot4.2】MLTag类:HTML、XML通用标签类

概述 HTML和XML采用类似的标签形式。 之前在Godot中以函数库形式实现了网页标签和内容生成。能用&#xff0c;但是缺点也很明显。函数之间没有从属关系&#xff0c;但是多有依赖&#xff0c;而且没有划分出各种对象和类型。 如果以完全的面向对象形式来设计标签类或者元素类…...

美式键盘 QWERTY 布局的起源

注&#xff1a;机翻&#xff0c;未校对。 The QWERTY Keyboard Is Tech’s Biggest Unsolved Mystery QWERTY 键盘是科技界最大的未解之谜 It’s on your computer keyboard and your smartphone screen: QWERTY, the first six letters of the top row of the standard keybo…...

【JavaEE】HTTP(2)

&#x1f921;&#x1f921;&#x1f921;个人主页&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;JavaEE专栏&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;下一篇文章&#xff1a;【JavaEE】HTTP协议(…...

LinuxShell编程2——shell搭建Discuzz论坛网站

目录 一、环境准备 ①准备一台虚拟机 ②初始化虚拟机 1、关闭防火墙 2、关闭selinux 3、配置yum源 4、修改主机名 二、搭建LAMP环境 ①安装httpd(阿帕奇apache&#xff09;服务器 查看是否安装过httpd 启动httpd 设置开机启动 查看状态 安装网络工具 测试 ②安装…...

.NET MAUI开源架构_1.学习资源分享

最近需要开发Android的App&#xff0c;想预研下使用.NET开源架构.NET MAUI来开发App程序。因此网上搜索了下相关资料&#xff0c;现在把我查询的结果记录下&#xff0c;方便后面学习。 1.官方文档 1.1MAUI官方学习网站 .NET Multi-Platform App UI 文档 - .NET MAUI | Micro…...

Unsloth 微调 Llama 3

本文参考&#xff1a; https://colab.research.google.com/drive/135ced7oHytdxu3N2DNe1Z0kqjyYIkDXp 改编自&#xff1a;https://blog.csdn.net/qq_38628046/article/details/138906504 文章目录 一、项目说明安装相关依赖下载模型和数据 二、训练1、加载 model、tokenizer2、…...

热修复的原理

热修复的原理 水一篇哈&#xff0c;完事儿后删掉热修复的原理 水一篇哈&#xff0c;完事儿后删掉 热修复的原理 Java虚拟机 —— JVM 是加载类的class文件的&#xff0c;而Android虚拟机——Dalvik/ART VM 是加载类的dex文件&#xff0c;而他们加载类的时候都需要ClassLoader,…...

【对顶堆 优先队列】2102. 序列顺序查询

本文涉及知识点 对顶堆 优先队列 LeetCode 2102. 序列顺序查询 一个观光景点由它的名字 name 和景点评分 score 组成&#xff0c;其中 name 是所有观光景点中 唯一 的字符串&#xff0c;score 是一个整数。景点按照最好到最坏排序。景点评分 越高 &#xff0c;这个景点越好。…...

Go 语言中的互斥锁 Mutex

Mutex 是一种互斥锁,名称来自 mutual exclusion,是一种用于控制多线程对共享资源的竞争访问的同步机制。在有的编程语言中,也将其称为锁(lock)。当一个线程获取互斥锁时,它将阻止其他线程对该资源的访问,直到该线程释放锁。这可以防止多个线程对共享资源进行冲突访问,从而…...

CSS 中的 ::before 和 ::after 伪元素

目录 一、CSS 伪元素 二、::before ::after 介绍 1、::before 2、::after 3、content 常用属性值 三、::before ::after 应用场景 1、设置统一字符 2、通过背景添加图片 3、添加装饰线 4、右侧展开箭头 5、对话框小三角 6、插入icon图标 一、CSS 伪元素 CSS伪元…...

JuiceFS缓存特性

缓存 对于一个由对象存储和数据库组合驱动的文件系统&#xff0c;缓存是本地客户端与远端服务之间高效交互的重要纽带。读写的数据可以提前或者异步载入缓存&#xff0c;再由客户端在后台与远端服务交互执行异步上传或预取数据。相比直接与远端服务交互&#xff0c;采用缓存技…...

R语言实现SVM算法——分类与回归

### 11.6 基于支持向量机进行类别预测 ### # 构建数据子集 X <- iris[iris$Species! virginica,2:3] # 自变量&#xff1a;Sepal.Width, Petal.Length y <- iris[iris$Species ! virginica,Species] # 因变量 plot(X,col y,pch as.numeric(y)15,cex 1.5) # 绘制散点图…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...