import React from 'react';
import '@chatui/core/es/styles/index.less';
// 引入组件
import Chat, { Bubble, useMessages } from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';
const initialMessages = [
{
type: 'text',
content: { text: '主人好，我是智能助理，你的贴心小助手~' },
user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
},
{
type: 'image',
content: {
picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png',
},
},
];
const toolbar = [
{
type: 'image',
icon: 'image',
title: '相册',
},
{
type: 'speech',
icon: 'mic',
title: '语音输入'
}
];
// 默认快捷短语，可选
const defaultQuickReplies = [
{
icon: 'message',
name: '联系人工服务',
isNew: true,
isHighlight: true,
},
{
name: '短语1',
isNew: true,
},
{
name: '短语2',
isHighlight: true,
},
{
name: '短语3',
},
];
// eslint-disable-next-line import/no-anonymous-default-export
export default function() {
// 消息列表
const { messages, appendMsg, setTyping } = useMessages(initialMessages);
// 发送回调
function handleSend(type, val) {
if (type === 'text' && val.trim()) {
// TODO: 发送请求
appendMsg({
type: 'text',
content: { text: val },
position: 'right',
});
setTyping(true);
// 模拟回复消息
setTimeout(() => {
appendMsg({
type: 'text',
content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
});
}, 1000);
}
}
// 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
function handleQuickReplyClick(item) {
handleSend('text', item.name);
}
function ToolbarClick (item, ctx) {
if (item.type === 'speech') {
// // 这里改成 App 提供的 bridge 方法
// nativeInvoke('speech', (text) => {
// if (text) {
// // 通过 setText 更新输入框内容
// // bot.appRef.current.setText(text);
// }
// });
}
}
function renderMessageContent(msg) {
const { type, content } = msg;
// 根据消息类型来渲染
switch (type) {
case 'text':
return <Bubble content={content.text} />;
case 'image':
return (
<Bubble type="image">
<img src={content.picUrl} alt="" />
</Bubble>
);
default:
return null;
}
}
return (
<Chat
navbar={{ title: '智能助理' }}
messages={messages}
renderMessageContent={renderMessageContent}
quickReplies={defaultQuickReplies}
onQuickReplyClick={handleQuickReplyClick}
onSend={handleSend}
placeholder={'请输入...'}
toolbar={toolbar}
onToolbarClick={ToolbarClick}
/>
);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script src="./icons.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
