Adding quick replies

[thomas-negrault]

I would like to use quick replies in my chat (see the messenger documentation)
It would basically be like a bubble, without the agent picture with some propositions, and when the user click on it, it is displayed as a user bubble.

Ideally, the quick replies could have a display value and an internal value (one displayed to the user, and one that can be sent to a backend API)

Do you plan to add this feature ? I think I could make it work with a custom component but it would be nice to have a addQuickReplies() like addLinkSnippet()

[adantoscano]

You can using renderCustomComponent() and MaterialUI chips i.e.

[thomas-negrault]

I made a really simple custom component:

class QuickReply extends Component {
    constructor(props) {
        super(props);
        this.state = {replied: false};
        this.sendQuickReply = this.sendQuickReply.bind(this);
        toggleInputDisabled()
    }

    sendQuickReply = (reply) => {
        this.setState({
            replied: true
        });
        addUserMessage(reply);
        toggleInputDisabled();
    };

    render() {
        if (this.state.replied == true) {
            return (null);
        }
        return (
            <div className="message">
                {this.props.propositions.map(r => <div key={r} className={"response"}onClick={this.sendQuickReply.bind(this, r)}>{r}</div>)}
            </div>)
    }
}

How can I disable user input when I display my quick replies ?

Edit: my bad, just saw the toggleInputDisabled function

[thomas-negrault]

I still have an issue with this, my custom component works and displays X propositions and when the user click on one of them it send it as a user message.
But when the chat is closed then open again, my component is re-created from scratch so the propositions are displayed again..

I do not know how to use redux but is it something I can fix using it ? Why does the chat window have to be re-created and not just display:none ?

[udi-d]

its not clear why your app closes, but it depends on your app flow, and yes, after restart the app load with its initial state.
if you want to init the app with the user last state, you will have to use some state management (redux, mobx...) or just use local/session storage, depends of the complexity of your state.

[thomas-negrault]

My app does not close, I am talking about the chat toggle.

I will give an example:

1. My custom Components display: « Are you ok ? » with two buttons in the conversation « Yes » and « No
2. The user input is disabled so he can only click on one of the buttons, he click on yes.
3. I simulate the user message « Yes », hide the buttons and add a bot response like « Cool »
4. The user toggle the chat by clicking on the bottom-right button, the chat is closed.
5. The user toggle the chat by clicking on the top right button again
6. The chat display my custom component from scratch with the buttons « yes » and « no » visible, and I don’t know how to display the conversation like it was before the chat toggle:

->Are you ok ?
Yes<-
->Cool

And not:

->Are you ok ?
-> [Yes] [No]
Yes<-
->Cool

Video:

[udi-d]

its not because of the chat toggle, the chat will reopen with the current state.
I don't know how and when you add the QuickReply comp, but every time it mounts, the constructor will call this.state = {replied: false}; and display your buttons

[ghost]

@thomas-negrault Have you been able to find a solution for the chat toggle problem? I'm having the same issue and I can't seem to find a way to fix it cleanly.

Thanks!

[thomas-negrault]

No, I'm sorry. I added a function to clear all the conversation when exiting the chat window. And I do not work on this project anymore.
You should look into Redux and implementing this feature on your own (not with my beginner code)
Good luck !

[ghost]

Thanks, we've decided to drop the conversation for now, too. I've looked into Redux, but I was having difficulty passing information to the component after renderCustomComponent is called. But that's an issue for another time. :)

[tammaroivan]

Added this feature in #102 😄

[WoodyFleurant]

Hello guys, it seems that this feature was not published into npm. I cannot use Quick replies with npm install, I checked into node_modules, and the changes reflected here are not inside the code. Could you please check this out ?
I also tried to use this git repository directly with npm install Wolox/react-chat-widget but it keeps saying Module not found: Can't resolve 'react-chat-widget'