如何为 'botframwork-webchat' 中的每条传入消息添加侦听器

Question

我在我的 React js 项目中使用 Microsoft 聊天机器人 botframework-webchat。我想为每条传入消息添加一个监听器。

需求是识别某条消息（Last message）及其内容。根据内容，用户应该被重定向到结果屏幕。如果我可以访问结果，我就可以进行导航。我搜索了解决方案，但找不到。

这是我的代码

const Chatbot = (props) => {
  const directLine = useMemo(
    () => createDirectLine({ token: process.env.REACT_APP_DIRECT_LINE_SECRET, locale: 'sv-se' }),
    []
  );

  const styleOptions = {
    bubbleBackground: 'white',
    bubbleBorder: '#26acab',
    bubbleFromUserBackground: 'white',
    bubbleFromUserBorder: '#26acab',
    botAvatarImage: './Icon.ico',
    botAvatarBackgroundColor: 'transparent',
    userAvatarBackgroundColor: '#26acab',
    userAvatarInitials: bubbleInitials,
    rootHeight: '50%',
    rootWidth: '100%',
    hideUploadButton: true,
    primaryFont: "'Avenir LT Std', sans-serif",
    hideSendBox: true,
  };

  useEffect(() => {
    var initiatingActivity = {
      from: {
        id: '001',
        name: 'noviral',
        token: msalToken,
        locale: language === 'en' ? 'en-US' : 'sv-se',
      },
      name: 'startConversation',
      type: 'event',
      value: 'Hi noviral!',
    };


    directLine.postActivity(initiatingActivity).subscribe(function (id) {
      if (console) {
        console.log('Chat bot initiated');
      }
    });

    
  }, []);

  return (
    <Layout className="login-layout">
      <div className="login-div">
        <div className="chatbot">
          <div className="consent-wrapper">
            <ReactWebChat
              directLine={directLine}
              userID={'001'}
              username="Noviral"
              locale={language === 'en' ? 'en-US' : 'sv-se'}
              styleOptions={styleOptions}
            ></ReactWebChat>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default withTranslation()(Chatbot);

谁能帮我解决这个问题？提前致谢

Answer 1

您可以将自定义商店传递给 ReactWebChat，只要您收到消息，它就会被调用

import  {  createStoreWithDevTools } from 'botframework-webchat

const store =  createStoreWithDevTools( {},
    ({ dispatch }) => next => action => {
     if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        console.log(action.payload); //this will have incoming message data
      }

      return next(action);
    });

<ReactWebChat directLine={directLine} store={store} userID="YOUR_USER_ID" />;

如何为 'botframwork-webchat' 中的每条传入消息添加侦听器

How to add a listener to every incoming message in 'botframwork-webchat'

web-chat

botframework

direct-line-botframework