1.0.12 • Published 9 months ago
chatui-sdk-x v1.0.12
ChatUI-SDK-X
Installation
npm i chatui-sdk-xUsage
using react
import React from 'react';
import {ChatUISDKSSE, createChatUISDKSSE} from "chatui-sdk-x";
const App = () => (
<ChatUISDKSSE apiUrl={YOUR_API_URL} sdkConfig={SDK_CONFIG} />
);using iife
<script src="index.iife.js"></script>
<script>
ChatUISDKX.createChatUISDKSSE(node, apiUrl, {
requests: {
send(msg, sendSSERequest) {
const {text} = msg.content;
// 需要判断是否需要流式请求
if (other conditon) {
return 调用其它方法
} else {
// 使用流式消息
return sendSSERequest(text);
}
return msg;
},
},
onSSEResponse(response, setMessage, ctx) {
const {id, content} = response;
// 显示流消息
setMessage({
id,
type: "card",
content: {code: "knowledge", data: {text: content.text}},
position: "left",
role: "alert",
user: {
avatar: "//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg",
},
meta: {
evaluable: true,
},
});
},
onSSEDone(e, ctx) {},
onSSEError(e, ctx) {},
});
</script>Props
| Property | Description | Type | Require |
|---|---|---|---|
apiUrl | 服务器接口API地址<scheme>://<host>/<basePath> | string | Yes |
sdkConfig | ChatPro SDK API | {} | No |
node | createChatUISDKSSE方法时用到 | HTMLElement | No |
onSSEResponse | onSSEResponse(response, setMessage, ctx)方法时用到 | function | No |
onSSEDone | onSSEDone(e, ctx)方法时用到 | function | No |
onSSEError | onSSEError(message, ctx)方法时用到 | function | No |
Example
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>智能助理</title>
<link rel="stylesheet" href="//g.alicdn.com/chatui/sdk-v2/0.3.2/sdk.css">
</head>
<body>
<div id="root"></div>
<script src="//g.alicdn.com/chatui/sdk-v2/0.3.2/sdk.js"></script>
<script src="//g.alicdn.com/chatui/extensions/0.1.3/isv-parser.js"></script>
<script src="//g.alicdn.com/chatui/icons/2.0.2/index.jsx" async></script>
<script type="module" src="./src/main.jsx"></script>
</body>
</html>main.jsx
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import ChatUISDKSSE from "chatui-sdk-x";
export default function App() {
return (
<StrictMode>
<ChatUISDKSSE apiUrl="{YOUR_API_URL}" sdkConfig={SDK_CONFIG} />
</StrictMode>
);
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);