CODEWITHSUNDEEP
reactjsbotframeworkchatbot
Kaveesha Baddage
Kaveesha Baddage

Reputation: 69

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

I have to run a soundtrack (mp3 file) according to the reply given by Chatbot. So I need to identify the reply that comes from chatbot from my React component (or using pure JS). How can I do that?

Upvotes: 0

Views: 675

Answers (2)

Kaveesha Baddage
Kaveesha Baddage

Reputation: 69

Thank you @Nicolas R. I changed that handleIncomingActivity() function as follows and send the activity.text value in to my chatbot react component as sending data from child(Chat.js) to parent(My react component) using callbacks. Here giveTextForBot() is a callback function which is given to react chatbot component as a 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;
        }
};

Upvotes: 0

Nicolas R
Nicolas R

Reputation: 14619

You can quickly found what you are looking for by searching the Webchat repository on Github.

If you search incoming you will go to these lines which may be interesting for your needs:

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;
    }
}

Upvotes: 1

Related Questions