BotFramework-Webchat中间件，用于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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！