Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bot message implementation (quick replies copy and inspiration) #1211

Merged
merged 17 commits into from
May 21, 2019

Conversation

xcarpentier
Copy link
Collaborator

@xcarpentier xcarpentier commented Apr 30, 2019

Description

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

Image-1 (1)

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

Issues

Closes #826

@xcarpentier xcarpentier changed the title Feature/bot message bot message implementation (quick replies copy and inspiration) Apr 30, 2019
@codecov
Copy link

codecov bot commented Apr 30, 2019

Codecov Report

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

Impacted file tree graph

@@            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 xcarpentier changed the title bot message implementation (quick replies copy and inspiration) Bot message implementation (quick replies copy and inspiration) Apr 30, 2019
@xcarpentier xcarpentier changed the title Bot message implementation (quick replies copy and inspiration) WIP Bot message implementation (quick replies copy and inspiration) May 1, 2019
@xcarpentier xcarpentier added chat-bot related to chat bot pinned labels May 1, 2019
@xcarpentier xcarpentier self-assigned this May 1, 2019
@xcarpentier
Copy link
Collaborator Author

Untitled

@MLK57
Copy link

MLK57 commented May 9, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen it will be functional and available ?

@xcarpentier
Copy link
Collaborator Author

xcarpentier commented May 9, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen it will be functional and available ?

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

@MLK57
Copy link

MLK57 commented May 13, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen 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
Copy link
Collaborator Author

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 xcarpentier force-pushed the feature/bot_message branch 2 times, most recently from 741c829 to 34d1084 Compare May 13, 2019 15:56
@xcarpentier
Copy link
Collaborator Author

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

@xcarpentier
Copy link
Collaborator Author

0.9.0-beta.6

@xcarpentier xcarpentier changed the title WIP Bot message implementation (quick replies copy and inspiration) Bot message implementation (quick replies copy and inspiration) May 21, 2019
@xcarpentier xcarpentier merged commit af7758a into master May 21, 2019
@paolospag
Copy link

@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
Copy link

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
Copy link
Collaborator Author

@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
Copy link

moschap commented Jul 18, 2019

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
Copy link

nzrin commented Dec 27, 2019

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

@xcarpentier xcarpentier deleted the feature/bot_message branch May 7, 2020 07:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chat-bot related to chat bot pinned
Projects
None yet
Development

Successfully merging this pull request may close these issues.

RFC: Quick Replies
6 participants