BotFramework-用于 renderMarkdown 的 Webchat 中间件

Question

我想在 Bot 框架中使用 React 组件添加 renderMarkdown。我可以像下面那样通过 HTML 添加并且它按预期工作，但我的要求是使用反应添加相同的功能。

<!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 因为我是 React 的新手吗？

Answer 1

这对我有用。 Markdown 包括 Emoji 支持 :-) 在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-用于 renderMarkdown 的 Webchat 中间件

BotFramework-Webchat Middleware for renderMarkdown

html

markdown

reactjs

react-redux

botframework