如何构建Botframework-WebChat v4

npm install botframework-webchat

import React, { useEffect } from 'react';
import { createDirectLine, DirectLineOptions } from 'botframework-directlinejs';
import { WebChat } from 'botframework-webchat';

const botSecret = 'YOUR_BOT_SECRET'; // 替换为你的Bot Secret

const directLineOptions: DirectLineOptions = {
  tokenEndpoint: `https://directline.botframework.com/v3/directline/tokens/generate`,
  secrets: [botSecret]
};

const WebChatComponent = () => {
  useEffect(() => {
    const directLine = createDirectLine(directLineOptions);

    const styleOptions = {
      rootHeight: '100%',
      rootWidth: '100%'
    };

    WebChat.renderWebChat(
      {
        directLine: directLine,
        styleOptions: styleOptions
      },
      document.getElementById('webchat')
    );

    return () => {
      directLine.end();
    };
  }, []);

  return <div id="webchat" />;
};

export default WebChatComponent;

const customStyles = {
  root: {
    height: '100vh',
    width: '100%'
  },
  // 其他自定义样式...
};

WebChat.renderWebChat(
  {
    directLine: directLine,
    styleOptions: { ...styleOptions, ...customStyles }
  },
  document.getElementById('webchat')
);