npm i chatbot-antd
import React, { useCallback, useState } from "react";
import { CustomerServiceOutlined } from "@ant-design/icons";
import { Button } from "antd";
import "antd/dist/antd.css";
import {
library,
generateRespones,
RenderList,
useRegister,
} from "chatbot-antd";
//text是语句,reg会生成正则匹配,useReg会使用自定义匹配
library.push(
//语料库,push进去,也可以不用
{
text: "我是机器人",
reg: "你是谁",
},
{
text: "author is yehuozhili",
useReg: /(.*?)作者是谁(.*?)/,
},
{
text: <CustomerServiceOutlined></CustomerServiceOutlined>,
useReg: /(.*?)表情(.*?)/,
}
);
function App() {
const [modalOpen, setModalOpen] = useState(false);
//使用useCllback避免用户输入时调用匹配!!!!!!!
const callb = useCallback((v: RenderList) => {
setTimeout(() => {
//使用settimeout 更像机器人回话
let returnValue = generateRespones(v);
if (returnValue) {
//排除null
setList((prev) => [
...prev,
{ isUser: false, text: returnValue },
]);
}
}, 500);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// 注册
const [render, setList] = useRegister(
modalOpen,
callb,
{
onOk: () => setModalOpen(false),
onCancel: () => setModalOpen(false),
title: "h5-Dooring机器人客服",
},
{},
<div>welcome!我是机器人初始欢迎语句!!</div>
);
return (
<div>
<div
style={{
position: "fixed",
right: "10px",
top: "40%",
}}
>
<Button type="primary" onClick={() => setModalOpen(!modalOpen)}>
<CustomerServiceOutlined></CustomerServiceOutlined>
</Button>
</div>
{render}
</div>
);
}
import "chatbot-antd/index.css";
antd/lib/style/index.css
antd/lib/button/style/index.css
antd/lib/avatar/style/index.css
antd/lib/input/style/index.css
antd/lib/modal/style/index.css
antd/lib/popover/style/index.css
import "antd/dist/antd.css";
library.push(
//语料库,push进去,也可以不用
{
text: "我是机器人",
reg: "你是谁",
},
{
text: "author is yehuozhili",
useReg: /(.*?)作者是谁(.*?)/,
},
{
text: <CustomerServiceOutlined></CustomerServiceOutlined>,
useReg: /(.*?)表情(.*?)/,
}
);
export function useRegister(
//modal状态,只有开启状态才能开启Modal
state: boolean,
//获取用户回话的回调,用户输入会通过callback传回
callback?: (v: RenderList) => void,
//这个是antd的modal属性,参考antd官网
modalOption?: ModalProps,
//这个是input属性,参考antd官网
inputOption?: InputProps,
//这个是机器人语句,就是第一次打开后机器人发的语句
initWelcome?: ReactNode,
//这个是初始值,如果需要持久化可以考虑使用
initState?: RenderList[],
//是否关闭输入框上方功能条
closeFunctionBar?: boolean
): [ReactNode, React.Dispatch<React.SetStateAction<RenderList[]>>];
const callback = useCallback((v: RenderList) => {
setTimeout(() => {
//使用settimeout 更像机器人回话
let returnValue = generateRespones(v);
if (returnValue) {
//排除null
setList((prev) => [...prev, { isUser: false, text: returnValue }]);
}
}, 500);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
callback 传入 register 的第二个参数。
callback 可以直接去发请求给平台获取结果,再 setList 回来,让机器人发送。
setList 的格式为:
export interface RenderList {
isUser: boolean;
text: ReactNode;
}
isUser 表示是否是用户所发。
text 表示每条对话。其中用户所发的 text 类型为 string,而机器人所发 text 类型可以是 ReactNode。