Bot message implementation (quick replies copy and inspiration)

[xcarpentier]

Description

Start to provide a solution to add quick replies list component between MessageContainer and Composer.

Limitations

• In this first implementation, we just provide a single (radio) and multiple (checkbox) selections of option present to the user.

Data definition and example

interface Reply {
  title: string,
  value: string
}

interface QuickReplies {
  type: 'radio' | 'checkbox',
  values: Reply[]
}

{
  _id: 123,
  text: 'This is a quick reply. Do you love Gifted Chat?',
  createdAt: new Date(),
  quickReplies: {
    type: 'radio', // or 'checkbox',
    values: [
      {
        title: '😋 Yes',
        value: 'yes',
      },
      {
        title: '📷 Yes, let me show you with a picture!',
        value: 'yes_picture',
      },
      {
        title: '😞 Nope. What?',
        value: 'no',
      },
    ],
  },
}

Inspirations

Pull-requests

• WIP Quick Replies
• Initial commit updating README.md to include new Quick Reply feature.
• Add support for onPress on Bubble

Issues

• RFC: Quick Replies
• Rendering Custom Responses (Like a Bot)

Closes #826

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@e578df2). Click here to learn what that means.
The diff coverage is 13.72%.

@@            Coverage Diff            @@
##             master    #1211   +/-   ##
=========================================
  Coverage          ?   31.35%           
=========================================
  Files             ?       22           
  Lines             ?      590           
  Branches          ?      198           
=========================================
  Hits              ?      185           
  Misses            ?      396           
  Partials          ?        9

Impacted Files	Coverage Δ
src/MessageContainer.tsx	18.46% <ø> (ø)
src/GiftedChat.tsx	12.42% <ø> (ø)
src/Message.tsx	42.5% <100%> (ø)
src/Bubble.tsx	46.98% <42.85%> (ø)
src/QuickReplies.tsx	6.97% <6.97%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e578df2...5e42a59. Read the comment docs.

[xcarpentier]

[MLK57]

This feature interests me a lot, do you have an idea of ​​when it will be functional and available ?

[xcarpentier]

This feature interests me a lot, do you have an idea of ​​when it will be functional and available ?

ASAP
but you already can use it on npm: 0.9.0-beta.0 (next)

[MLK57]

This feature interests me a lot, do you have an idea of ​​when it will be functional and available ?

ASAP
but you already can use it on npm: 0.9.0-beta.0 (next)

I have implemented your feature in my project, do you have Skype, Slack or some other way for me to ask you some questions?

[xcarpentier]

I have implemented your feature in my project, do you have Skype, Slack or some other way for me to ask you some questions?

Yes you can find me here: https://slack.reactnative.gallery/

[xcarpentier]

@MLK57 can you please test the next: 0.9.0-beta.4 ?

[xcarpentier]

0.9.0-beta.6

[paolospag]

@xcarpentier I'm trying this new feature now and I have to say it's a great idea!
But I was wondering if it is possible to add the support of the quick replies also in the system messages, to be used for example as the first message to start the conversation (like Facebook Messenger).

Do you think it is possible?

[avillega]

Great functionality so far. How ever it is very difficult to customize the QuickReplies component. Adding a few style props to the component would make it more configurable and customizable

[xcarpentier]

@paolospag & @avillega your ideas are excellent!
Feel free to create PR to customize more and another one PR with a system kind of quick replies (like facebook messenger)

[moschap]

Hi @xcarpentier, really good job you have done here.
Please one question how do i style the quickReply bubbles? I have added this in the GiftedChat component but it doesn't reflect.

               `
                  <GiftedChat
                      showUserAvatar={false}
                      showAvatarForEveryMessage={false}
                      messages={this.props.chatMessages}
                      onSend={messages => this.onSend(messages)}
                      onQuickReply={this.onQuickReplyEvent}
                      quickReplyStyle={{ color: "red", borderColor: "red"}}
                      renderSend={this.renderSend}
                      minInputToolbarHeight={65}                        
                      user={{
                          _id: this.props.userProfile.data.user.personal.phoneNos,
                          name: this.props.userProfile.data.user.personal.phoneNos
                      }}
                />

`

[nzrin]

How to customize onQuickReply bubble and how to make it flexdirection:row enabled instead of putting the option side by side.