BotFramework-Webchat中间件，用于renderMarkdown [英] BotFramework-Webchat Middleware for renderMarkdown
本文介绍了BotFramework-Webchat中间件，用于renderMarkdown的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用Bot框架中的React组件添加renderMarkdown.我可以通过如下所示的HTML进行添加，并且可以按预期工作，但是我的要求是使用react添加相同的功能.
I'd like to add renderMarkdown using the React component in the Bot framework. I am able to add through HTML like below and it's working as expected but my requirement is to add the same feature using the react.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://www.acai-hub.com/js/markdown-it.min-8.4.2.js"></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
const renderMarkdown = text => markdownIt.render(text);
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'VeY8HxuBVIw.fKAVwOjeVn9tcx7fhZ0cSCBz5vM8tp8G0JcNT3BGiRI'
}),
userID: 'Arun',
username: 'Arun',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW',
renderMarkdown: renderMarkdown
},
document.getElementById('webchat')
);
</script>
</body>
</html>
由于我是新手，有人知道如何使用中间件添加renderMarkdown吗?
Does anybody know how to add renderMarkdown using middleware since I am new to the react?
推荐答案
这对我有用.包括表情符号支持的Markdown :-)在webchat.js
This works for me. Markdown including Emoji support :-) In webchat.js
import React, { useEffect, useMemo } from 'react';
import ReactWebChat, { createDirectLine, createStyleSet } from 'botframework-webchat';
import './WebChat.css';
// emoji support
var md = require('markdown-it')();
var emoji = require('markdown-it-emoji');
md.use(emoji);
const WebChat = ({ className, onFetchToken, store, token }) => {
const directLine = useMemo(() => createDirectLine({ token }), [token]);
const styleSet = useMemo(
() =>
createStyleSet({
rootWidth: '100%',
}),
[]
);
useEffect(() => {
onFetchToken();
}, [onFetchToken]);
return token ? (
<ReactWebChat className={`${className || ''} web-chat`} directLine={directLine} renderMarkdown={ md.render.bind(md) } store={store} styleSet={styleSet} />
) : (
<div className={`${className || ''} connect-spinner`}>
<div className="content">
<div className="icon">
<span className="ms-Icon ms-Icon--Robot" />
</div>
<p>Please wait while we are connecting.</p>
</div>
</div>
);
};
export default WebChat;
这篇关于BotFramework-Webchat中间件，用于renderMarkdown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
