如何在 React 组件中拦截来自 Chatbot 的消息？ (Microsoft botframework-webchat)

Question

我要根据聊天机器人的回复运行配乐（mp3文件）。所以我需要从我的 React 组件（或使用纯 JS）中识别来自聊天机器人的回复。我怎样才能做到这一点？

Answer 1

您可以通过搜索 Github 上的 Webchat 存储库快速找到您要查找的内容。

如果您搜索 incoming，您将转到这些 lines，它们可能对您的需求很有趣：

private handleIncomingActivity(activity: Activity) {
    let state = this.store.getState();
    switch (activity.type) {
        case "message":
            this.store.dispatch<ChatActions>({ type: activity.from.id === state.connection.user.id ? 'Receive_Sent_Message' : 'Receive_Message', activity });
            break;

        case "typing":
            if (activity.from.id !== state.connection.user.id)
                this.store.dispatch<ChatActions>({ type: 'Show_Typing', activity });
            break;
    }
}

Answer 2

谢谢@Nicolas R。我按如下方式更改了 handleIncomingActivity() 函数，并将 activity.text 值发送到我的聊天机器人反应组件，将数据从子（Chat.js）发送到父（我的反应组件）使用回调。这里的 giveTextForBot() 是一个回调函数，它作为一个 prop 来反应聊天机器人组件。

Chat.prototype.handleIncomingActivity = function (activity) {
        var state = this.store.getState();
        switch (activity.type) {
            case "message":
                this.store.dispatch({ type: activity.from.id === state.connection.user.id ? 'Receive_Sent_Message' :'Receive_Message' , activity: activity });
                if(activity.from.id === "<appName>"){
                    this.props.giveTextForBot(activity.text);
                   }             
            break;
            case "typing":
                if (activity.from.id !== state.connection.user.id)
                    this.store.dispatch({ type: 'Show_Typing', activity:activity });
                break;
        }
};

如何在 React 组件中拦截来自 Chatbot 的消息？ (Microsoft botframework-webchat)

How to intercept message from Chatbot in a React component ? (Microsoft botframework-webchat)

reactjs

botframework

chatbot